第四章 初识 CSS
CSS的引入方式
行内样式
在HTML标签中添加style属性
<li style="font-size:30px;color:red;">唐三藏</li>
内部样式
在HTML中添加<style>
标签
<style type="text/css">
li{
font-size:30px;
color:red;
}
</style>
外部样式
注意:需要先创建.css文件
链接式:在html的<head></head>
标签中使用link标签
<link rel="stylesheet" href="css/index.css">
导入式:在内部中写入@import
<style type="text/css"
@import url("style.css");
</style>
优先级:就近原则
选择器
基本选择器
全局选择器 使用*号,选择所有的HTML标签
标签选择器 使用HTML标签
类选择器 在HTML中使用class属性,在css中使用.操作符
ID选择器 在HTML中使用id属性,在css中使用#操作符(ID通常是唯一的)
交集选择器
并集选择器
层次选择器
E F 后代选择器 选择E下面的所有后代F
E>F 子选择器 选择E的子元素F
E+F 相邻兄弟选择器 选择的E元素后面的相邻F元素
E~F 通用兄弟选择器 选择所有E后面的所有F元素
结构伪类选择器
E:first-child 选择根元素的第一个E元素
E:last-child 选择根元素的最后一个E元素
E F:nth-child(n) 选择E的第n个F元素(n∈Z)
E:first-of-type 选择根元素的第一个具有指定类型E的元素
E:last-of-type 选择根元素的最后一个具有指定类型E的元素
E F:nth-of-type(n) 选择E元素的第n个具有指定类型的元素(n∈Z)
属性选择器
E[attr] 选择E标签内具有attr属性的元素
E[attr=val] 选择E标签内具有attr属性且值为val的元素
E[attr^=val] 选择E标签内属性为attr且以val开头的元素
E[attr$=val] 选择E标签内属性为attr且以val结尾的的元素
E[attr*=val] 选择E标签内属性为attr且属性值包含“val”的元素
注意:属性选择器中间不能有空格
选择器的优先级
行内样式(最高级)>id选择器>类选择器>标签选择器