1.CSS介绍
CSS是Cascading Style Sheet的缩写,中文意思为"层叠样式表",它是网页的装饰者,用来修饰各标签 排版(大小、边距、背景、位置等)、改变字体的样式(字体大小、字体颜色、对齐方式等)。
2.CSS书写位置
2.1 样式表特征
层叠性:多组不同的css样式可以共同作用于同一个元素 继承性:有些css样式会自动从父元素传给子元素 大部分文字样式属性都会被继承 优先级: 显示哪个样式,浏览器默认样式和继承下来的样式优先级最低
2.2 行内样式
借助了所有标签都有的属性style,为当前的元素添加样式声明。
<标签名 style="样式声明">
CSS样式声明: 由CSS属性和值组成
CSS属性:希望给HTML标签设置的样式名字值:使用值来控制某个属性显示的效果
style="css属性名:值;css属性名:值;"
学习前端
学习CSS
运行结果:
2.3 内嵌样式
借助于style标签,在HTML文档中嵌入 CSS 样式代码,可以实现 CSS 样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML中匹配元素并应用样式。
/* css代码 */
p{
color: green;
}
div{
font-size: 40px;
}
学习前端
学习CSS
运行结果:
2.4 外链样式表
创建外部样式表文件 后缀使用 .css ,在HTML文件中使用 标签引入外部样式表
学习前端
学习CSS
运行结果:
3.CSS简单选择器
3.1 标签选择器
一个完整的HTML文档由各式各样的标签组成,而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签。
p{
color: aqua;
}
div{
color: red;
}
p标签
运行结果:
3.2 类选择器
类选择器可以根据标签的 class 属性,找到具体的HTML标签。类选择器的定义需要用到一个英文的句号‘.’,后面紧跟 class 属性的值。
命名规范:
类名应该反映元素的用途或内容,而不仅仅是样式。这有助于提高代码的可读性。推荐使用连字符而不是驼峰命名法来分隔单词,因为连字符在HTML和CSS中更为普遍。类名不应以数字开头。
.text-box {
font-size: 20px; /* 设置字体大小 */
}
.text-red {
color: red; /* 设置文本颜色为红色 */
}
.text-green {
color: green; /* 设置文本颜色为绿色 */
}
运行结果:
3.3 ID选择器
ID选择器用来找到HTML文档中具有指定ID属性的标签,ID选择器的定义需要用到井号#,后面紧跟ID 属性的值。ID选择器的使用方式和类选择器的使用方式是非常像,但是ID选择器的主要作用是结合js用 于确定页面上的唯一元素。单个标签不允许拥有多个id名,同页面中不存出现重复的id名(id重名会影响 js代码获取标签)。并不是主要用来设置css的。
#qq2{
color: purple;
font-size: 30px;
}
3.4 通配符选择器
通配符选择器用星号*表示,它不匹配某个特定的HTML元素,而是匹配 HTML文档中的每个元素。我 们通常使用通用选择器来清除HTML元素中默认的内外边距。通配符选择器在开发中不会使用,一般我们页面的标签的样式不会长的都完全一样。在平常的练习去除 标签默认的 margin 和 padding 。
* {margin: 0;
padding: 0;
}
4.CSS复杂选择器
两个或两个以上的选择器配合使用
4.1 交集选择器
找到页面中既能被选择器1选中,又能被选择器2选中的标签,设置样式交集选择器中的选择器之间是紧挨着的,没有东西分隔
p.one{
color: red;
}
学习
认真学习
认真学习前端
运行结果:
4.2 后代选择器
在选择器1所找到标签的后代(后代包括:儿子、孙子、重孙子……)中,找到满足选择器2的标 签,设置样式
#one p {
color: orange;
}
111
333
222
666
444
运行结果:
4.3 子代选择器
在选择器1所找到标签的子代(子代只包括:儿子)中,找到满足选择器2的标签,设置样式
#one>p {
color: green;
}
111
333
222
666
444
运行结果:
222 虽然不属于子代,但由于继承性仍会变色
4.4 相邻兄弟选择器
相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素,这两个元素拥有同一个父级元素并且不 存在嵌套关系。相邻兄弟选择器的定义需要用到加号+,加号两边为相邻的两个元素,选择器会 匹配加号后面的元素
.three+p {
color: green;
}
.four+p {
color: red;
}
111
222
555
333
666
444
运行结果:
4.5 通用兄弟选择器
通用兄弟选择器同样会匹配同一父级元素下的兄弟元素,但兄弟元素之间无需紧邻。定义通用兄弟 选择器需要用到波浪号~,波浪号两边为同一父级元素下的两个元素,选择器会匹配波浪号后面 的元素
.two~p {
color: blue;
margin: 0;
}
111
222
444
555
666
777
888
运行结果:
4.6 分组选择器
结构: 选择器1,选择器2 {css属性名:属性值;}同时选择多组标签,设置相同的样式并集选择器中的每组选择器之间通过 , 分隔选择器中的每组选择器通常一行写一个,提高代码的可读性
p,
h1,
h2,
h3,
div,
span {
padding: 0;
margin: 0;
}
5.层叠性与优先级
层叠性:所谓的层叠即叠加的意思,表示样式可以一层一层的层叠覆盖。多个选择器给同一个标签设置 不同的样式,会共同作用在标签上。
优先级:如果同一个标签被多个选择器赋予了相同的属性且值不一样时,会按照选择器的优先级来决定 以哪个样式为准
!important > 行内 > id选择器 > 类选择器 > 标签 > 继承先比较级别,级别一样比较各级别选择器出现的次数当两个选择器权重一样时,以最后出现的为准
#red{
color: red;
}
p{
color: green !important;
font-size: 20px ;
}
.blue{
color: blue;
}
我爱中国
运行结果: