HTML之CSS——CSS的高级应用
CSS选择器：
一.CSS复合选择器：
1.后代选择器
2.交集选择器
3.并集选择器
1.后代选择器
后代选择器又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
- 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明
- 外层的标签写在前面，内层的标签写在后面，之间用空格分隔
-
标签嵌套时，内层的标签成为外层标签的后代
eg:
h3 strong{color:blue; font-size:36px;}
只改变后代的样式
示例
2.交集选择器
- 由两个选择器直接连接构成，选中二者各自元素范围的交集
- 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
-
选择器之间不能有空格，必须连续书写
eg:
p.txt{color:blue; line-height:28px;}
示例
3.并集选择器
- 多个选择器通过逗号连接而成
-
利用并集选择器同时声明风格相同样式
eg:
h3,.first,.second,#end{
font-size:16px;
color:green;
font-weight:normal;
}
示例
- 拓展：
3.子元素选择器：
h2>p{
属性名：属性值；
。。。}
示例
4.比邻选择器：
示例
5.属性选择器：
标签名[属性名=“属性值”]{
属性名：属性值；
。。。
}
示例
CSS引入方式
二.HTML中引入CSS样式：
1.行内样式
2.内部样式表
3.外部样式表
1.行内样式
-
在标签中写Style属性，style属性中添加相应的样式。
eg:
<img style="width:50ps" src="图片路径"/>
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
示例
2.内部样式：
- CSS代码写在<head>的<style>标签中
优点： - 方便在同页面中修改样式
缺点： -
不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底
eg:
<head>
<style>
选择器{
属性名：属性值；
。。。}
</style>
</head>
示例
3.外部样式：
- CSS代码保存在扩展名为.css的样式表中
-
HTML文件引用扩展名为.css的样式表，有两种方式
链接式
导入式
链接式方式：
1.在css目录新建CSS文件，在css文件中写相应的样式
2.在HTML文件中的<head>标签里添加引入外部样式文件的代码
3.<link rel="stylesheet" href="css/demo.css" />
示例
示例
CSS继承
1.css中应用继承
- 子标签可以继承父标签的样式风格
-
子标签的样式不会影响父标签的样式风格
示例
2.CSS的优先级
1.ID选择器>类选择器>标签选择器
2.p和.first都匹配到了p这个标签上，green是正确的颜色
示例
3.在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
示例
4.内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
示例
5.有些特殊的情况需要为某些样式设置具有最高权值，我们可以使用!important来解决。
示例
练习1：
示例
示例
示例2
练习2：阴影
示例
（此文章仅作为个人学习笔记使用，如有错误欢迎指正~）
