CSS学习小结(样式来源、选择器的运用与权重分析)
CSS样式来源
名称 |
描述 |
默认样式 |
我们把浏览器自带的样式叫做默认样式,也叫作代理样式 |
内联样式 |
写在元素标签内的样式,称作内联样式 |
文档样式 |
写在元素标签外,标签所在html文档内的CSS样式称作文档样式 |
外部样式 |
写在通过link等元素标签引用的外部文件内的CSS样式,称作外部样式 |
注:通常情况我们把内联样式、文档样式、外部样式统称为自定义样式
样式演示
内联样式
<h1 style="color: red;">内联样式</h1>
文档样式
<style>
h1{
color: blue;
}
</style>
<h1>文档样式</h1>
外部样式
<link rel="stylesheet" href="style.css"> <--引用外部style.css文件-->
<h1>外部样式</h1>
h1{
color: rebeccapurple;
}
写在style.css文件内的CSS样式规则,不需要用<style>元素标签包裹.
选择器
1.元素选择器
我们可以直接使用元素标签作为选择器,来为元素标签添加样式。
2.id选择器
我们可以使用元素标签的id属性,来选择特定的id属性的元素标签。
例子:#text (#号加上ID属性的“值”)
3.类选择器
我们可以使用元素标签的class属性,来选择特定的class属性的元素标签。
例子:.text (圆点加上class的“值”)
4.通用选择器
通用选择器我们用一个 * 来表示,它表示选择整个html页面上的所有元素,我们可以在 * 前面加上其他类型的选择器来控制 * (通用)选择器的作用范围。
例子:*{color:red;} 表示为整个html页面的所有元素都添加上红色字体;
.text * {color:red;} 表示只为设置了class="text"属性的元素标签内的所有子元素,添加上红色字体。
5.分组选择器
当我们需要为多组标签或多个类,添加同一样式的时候,我们可以用","逗号把标签或类名分隔开,同时添加css样式.
例子:p,span{color: red;} 或 .text1,.text2{color: red;}
6.属性选择器
当外面为html页面中,所有包含某个特定属性的元素标签添加CSS样式时,我们可以选择使用属性标签,方法是:标签名+[属性名](属性名需用中括号括起来)
例子:a[href]{color: red;},
多个属性可以链接起来:a[href][title]{color:red;}
7.子元素选择器
子元素选择器我们用“>” 大于号表示,示例中虽然虽然两行li元素标签都包含 class="name" 但是只对第一个生效,> 子元素选择器 不可以越代选择。
例子:ul > p{color: red;}
8.后代选择器
后代选择器用 “空格” 表示,它所选择的是标签内的所有符合条件的元素,不看几代关系;
例子:ul li{color:red;}
9.相邻兄弟选择器
看上图我们发现相邻兄弟选择器,有两种形式,一种是 “+” 另一种 “~” ,
用 “+” 时,选择的是紧跟着的一个元素标签;
用 “~” 时,选择的是后面的所有元素标签;
例子:.text + li{color:red;} 只选紧跟着的一个
.text ~ li{color:red;} 选择的是后面所有
CSS样式的权重
因为css样式,在html文档中,不受位置的影响;因此我们就通过引用多个css样式表来进行比较
通过上图的代码我们发现
ul li{color:red;}权重 > li{color:red;}权重
通过上图的代码我们发现
.list{color:red;}权重 > 大于ul li{color:red;}权重
通过上图的代码我们发现
#top ul li{color:red;}权重 > 大于.text ul li{color:red;}权重
最终我们得出,权重关系是,id选择器 > 类选择器 > 元素选择器