本文介绍了如何为HTML5文档添加CSS样式，包括行内、内部和外部样式，以及CSS3的选择器如基本选择器和高级选择器，如层次、结构伪类和属性选择器。强调了CSS在网页美化和用户体验中的作用，以及学习的重点和语法应用。
一、学习目标
1、会使用行内样式、内部样式、外部样式三种方式为HTML5文档添加CSS样式
2、会使用CSS3的基本选择器来设置字体大小和颜色
3、会使用复合选择器为特定的网页添加CSS样式
4、会使用CSS3高级选择器为网页添加CSS样式
二、CSS的概念
Cascading Style Sheet 级联样式表
创始时间：1996年
CSS3.0版本时间：2021年
优势：
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得网页布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
语法：选择器{声明}
例如：h1{font-size:12px;}
style标签：
<style type="text/css">
h1 {
font-size:12px;
color:#F00;
}
</style>
三、三种样式表
行内样式：使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
内部样式表：CSS代码写在<head>的<style>标签中
<head>
<style>
h1{color: green; }
</style>
</head>
外部样式表：CSS代码写在扩展名为.css的文件中，其有两种引用方式（链接式，导入式）
链接式：
<head>
……
<link href="style.css" rel="stylesheet" type="text/css" />
……
</head>
导入式：
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
链接式和导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的
优先级：行内样式 > 内部样式 > 外部样式（就近原则）
四、基本选择器
标签选择器：
p { font-size:16px;}
类选择器：
.class { font-size:16px;}
id选择器：
#id { font-size:16px;}
优先级：id选择器 > 类选择器 > id标签选择器
小结：
标签选择器直接应用于HTML标签
类选择器可在页面中多次使用
ID选择器在同一个页面中只能使用一次
五、高级选择器
层次选择器：
E F（后代选择器）：在E标签中的所有F标签， body p{ background: red; }
E>F（子代选择器）：在E标签中的子标签F，body>p{ background: pink; }
E+F（相邻兄弟选择器）：与E标签相邻（向下相邻）的兄弟标签F（只有一个被选中），.active+p { background: green; }
E~F（通用兄弟选择器）：与E标签同胞（向后不向前）的兄弟标签F（有多少同胞就都被选中），.active~p{ background: yellow; }
结构伪类选择器：
E：first-child：作为父元素的第一个子元素
E：last-child：作为父元素的最后一个子元素
E F：nth-child（n）：作为父元素后面的第n个子元素（不分类型）
E：first-of-type：选择父元素内具有指定类型的第一个元素
E：last-of-type：选择父元素内具有指定类型的最后一个元素
E F：nth-of-type（n）：选择父元素内具有指定类型的第n元素（先分类型再找元素）
属性选择器：
E[attr]:选择匹配具有属性attr的E元素
E[attr=val]：选择匹配具有属性attr的E元素，并且属性值为val
E[attr^=val]：选择匹配具有属性attr的E元素，并且属性值是以val开头
E[attr$=val]：选择匹配具有属性attr的E元素，并且属性值是以val结尾
E[attr*=val]：选择匹配具有属性attr的E元素，并且属性值带有val
六、总结
CSS是可以使得网页的呈现更加的美观，可以吸引用户来使用，这是学习CSS的用途。同时CSS的学习也并没有那么的困难，总的来说主要还是一些记忆的语法格式应用。对于CSS的学习主要是了解CSS的概念和CSS的语法规则，掌握CSS的样式：行内样式、内部样式、外部样式，同时还要学会CSS的基本选择器：标签选择器、类选择器、id选择器以及CSS的高级选择器：层次选择器、结构伪类选择器、属性选择器。
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
