一、CSS概述
1.什么是CSS?
CSS:Cascading Style Sheets层叠样式表/级联样式表，简称样式表。
2.CSS作用
设置HTML网页元素的样式（修饰网页）
3.HTML和CSS的关系
HTML:构建网页内容
CSS:修饰网页
4.HTML属性与CSS属性是使用原则
w3c建议尽量使用css属性来取代HTML的属性。
二、CSS的语法规范
1.使用CSS的方式
1.内联方式（行内样式）
特点：将CSS样式定义在HTML的开始标记中
语法：<any style="CSS样式的声明"></any>
样式声明：由样式属性和值组成，CSS属性名与其值之间用冒号连接，
多个样式声明之间用分号分割。
常用的属性和值：
(1)设置文本颜色的属性和值
属性：color
值：颜色的英文单词（red,blue,yellow..）
(2)设置背景颜色的属性和值
属性：background
值：颜色的英文单词
(3)设置字体大小的属性和值
属性：font-size
值：以px/pt为单位的数字(24px)
2.内部样式
在网页的头元素中增加一对<style></style>,在<style></style>
标记中声明该网页的所有样式。
语法：
<head>
<style>
样式规则
</style>
</head>
样式规则：由选择器和样式声明组成
选择器：规范页面中哪些元素能够使用定义好的样式。
元素选择器：由元素名称作为选择器
元素选择器语法：元素名称{样式声明}
ex: div{
color:red;
font-size:24px;
}
3.外部样式
独立于任何网页的位置处，声明一个样式文件(*.css),在css文件中保存样式规则。
使用步骤：
1.创建样式表文件（.css为后缀）
2.在文件中编写样式规则
3.在网页中引入外部样式表
<link rel="stylesheet" href="CSS文件url">
练习：新建一个网页，页面中创建p,div和h3分别放上一段文本，然后用外部样式表修饰
2.CSS的样式特点
1.继承性
子元素可以继承父元素的样式（有层级关系）
大部分样式可以直接被继承
2.层叠性
可以为一个元素定义多个样式规则，规则中的属性不冲突时，
3.优先级
在样式声明有冲突时（重复），则按照样式的优先级来应用样式。
优先级由低到高：
浏览器默认设置：低
样式表（内部样式和外部样式）：中-就近原则
内联样式：高
4.调整优先级
!important 规则
将!important加在属性值的后面，与值之间用空格隔开。
ex:
color:red !important;
三、选择器（重点）
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式
为了匹配元素
2.选择器详解
(1)通用选择器
语法：*{样式声明}
作用：可以匹配页面上的任意元素
注意：通用选择器效率较低，尽量少用
(2)元素选择器
语法：元素名称{样式声明}
作用：设置页面上某种元素的样式
ex: div{...}
p{...}
a{...}
header{...}
(3)类选择器
作用：定义页面上某个元素或某些元素的样式
特点：通过元素的class属性来引用类选择器
语法:
1.声明
.类名{样式声明}
定义类名注意：点不能省略，类名不能以数字开头，不能包含特殊字符，
但可以包含（-，_）
2.引用
<any class="类名"></any>
类选择器的特殊用法：
1.多类选择器
让元素引用多个类选择器
<any class="类名1 类名2..."></any>
2.分类选择器
将元素选择器和类选择器结合使用
语法：元素名称.类选择器{样式声明}
ex: div.test{color:red;}
练习：页面中新建div和p元素，内容随意
用类选择器为所有元素设置字体为红色
用分类选择器为p元素设置背景颜色为黑色
(4)id选择器
作用：设置指定id元素的样式(专属定制)
语法: #id值{样式声明}
(5)群组选择器
作用：将多个选择器放在一起进行样式的声明
语法：选择器1，选择器2，选择器3......{样式声明}
(6)后代选择器
作用：通过元素的后代关系匹配元素
后代：一级或多级嵌套
语法：选择器1 选择器2 选择器2......
3042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
