一、什么是CSS
概念：级联样式表（层叠样式表）
作用：决定网页的样式、外观。
优势：内容与表现分离；网页的表现统一，容易修改；丰富的样式，使得页面布局更加灵活；减少网页的代码量，增加网页的浏览速度，节省网络带宽；运用独立于页面的CSS，有利于网页被搜索引擎收录。
CSS发展史
二、CSS的语法规则
1.基本规则
CSS语法规则
2.style标签
style标签在<head>与</head>之间。
style标签
三、HTML中引入CSS的样式
1.行内样式
在标签元素里使用style样式。
行内样式
2.内部样式表
CSS代码写在<head>的<style>标签中。
内部样式表
3.外部样式表
CSS代码保存在扩展名为.css的样式表中。
引用扩展名为.css的样式表的两种方式：链接式和导入式。
链接式与导入式的区别：
<link/>标签属于XHTML，@import是属于CSS2.1。
使用<link/>链接的CSS文件先加载到网页当中，再进行编译显示。
使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中。
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的。
链接式
导入式
4.三种样式的优先级
行内样式>内部样式表>外部样式表
就近原则：谁离代码越近谁优先
四、CSS3的选择器
1.基本选择器
(1)标签选择器
如p标签、段落标签h1等。
标签选择器的css语法
(2)类选择器
类选择器的的css语法
HTML的写法
(3)ID选择器
ID选择器的名称就是HTML中标签的ID名称。
ID选择器在同一个页面中只能使用一次。
ID选择器的的css语法
(4)三种选择器的优先级
不遵循就近原则，无论是哪种方式引入CSS样式，一般都遵循ID选择器 > class类选择器 > 标签选择器的优先级。
2.高级选择器
(1)层次选择器
层次选择器
后代选择器
子选择器
相邻兄弟选择器
通用兄弟选择器
(2)结构伪类选择器
使用E F:nth-child(n)和E F:nth-of-type(n)的关键点：E F:nth-child(n)在父级里从一个元素开始查找，不分类型。E F:nth-of-type(n)在父级里先看类型，再看位置。
结构伪类选择器
结构伪类选择器具体事例
(3)属性选择器
属性选择器
用于选取带有指定属性的元素
用于选取带有指定属性和值的元素
匹配属性值中包含指定值的每个元素
匹配属性值以指定值开头的每个元素
匹配属性值以指定值结尾的每个元素
网友评论