进击のpython
前端学习——CSS基础
CSS的样式可以写在哪呢？其实CSS的样式插入式十分灵活的
按照插入的形势来看，可以分为三种情况
而接下来就对这三种情况进行简单的讨论
内嵌式
CSS样式表是可以直接把代码放在现有的标签里面去的
这种方法就称为内嵌式：
<p style='color:red;'>文字颜色为红色</p>
把对应的style属性，写在p标签的开始标签中
CSS样式代码要写在style=“”双引号中，如果有多条CSS样式代码设置可以写在一起，中间用分号隔开
<p style='color:red;font-size:12px;'>文字颜色为红色</p>
嵌入式
有个新的任务百因必有果！你的报应就是我！，我想把百因必有果，你，我这三个变成红色
要是用内嵌式的话，那可就太难了（每一个<span>标签加入style=”color:red;”语句，如果有多个span呢？）
那么嵌入式CSS样式的编写就能让我们很快的解决这个问题
嵌入式样式就是把CSS样式代码写在<style type='text/CSS'></style>标签之间
统一设置span标签的样式：
<style type='text/CSS'>
span{
color:red;
}
</style>
嵌入式的CSS样式必须写在<style></style>之间
并且一般情况下嵌入式CSS样式写在<head></head>之间
外部式
大家试想一下，如果我们做一个类似淘宝那样的商城网站
那么随着项目需求的增多，我们的CSS代码量也会更庞大，越发到了后期
我们上述的内联式和嵌入式CSS样式的方式肯定是不行的，那我们应该怎么办?
这个时候，我们可以使用将我们的CSS代码编写到另一个单独的文件中，以为了后期方便维护我们的代码
那么这就是外部式CSS样式
外部式CSS样式(也可称为外链式)就是把CSS代码写一个单独的外部文件中，这个CSS样式文件以”.CSS”为扩展名
在<head>内（不是在style标签内）使用<link>标签将样式文件链接到HTML文件内，如下代码：
<link rel="stylesheet" href="index.CSS" type="text/CSS">
- CSS样式文件名称以有意义的英文字母命名，如main.css、index.css、base.css等
- rel=”stylesheet”
- rel:relationship的缩写，rel属性用于定义链接的文件和HTML文档之间的关系
- stylesheet：文档的外部样式表
- href：是指定超链接(之前学习a标签的时候)目标的URL,href属性的值为样式表文件的地址
<link>标签位置一般写在<head>标签之内
优先级
这么多方式，要是叠加使用，应该用谁的样式呢？？？这就是我们现在要考虑的问题
我们做个测试：
- 使用内联css设置”百因必有果“文字为红色。
- 然后使用嵌入式css设置文字为绿色
- 最后使用外部式设置文字为蓝色(index.css文件中设置)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span style="color: red">百因必有果！</span>你的报应就是我！</p>
</body>
</html>
span{
color: pink;
}
我们发现，颜色是红色，为什么呢？因为这三种引入方式是优先级的，谁的优先级高浏览器就会显示谁的样式属性
内联式>嵌入式>外部式
重点来了！！嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面！
绿色：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
span {
color: green;
}
</style>
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>
粉色：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span {
color: green;
}
</style>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p><span>百因必有果！</span>你的报应就是我！</p>
</body>
</html>
所以根本的优先级其实是就近原则！，哪个离被修饰的元素近，用哪个样式！
这也就是为什么CSS叫层叠样式表！