一.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的开始标记中
语法：
样式声明：由样式属性和值组成，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分别放上一段文本，然后用外部样式表修饰：
p元素的样式为红色字体，大小为30px；
div元素中文本的样式为蓝色字体，40px；
h3元素中的文本样式为绿色，背景颜色为灰色。
2.CSS的样式特点
1.继承性
子元素继承父元素的样式（有层级关系）。
大部分的样式可以直接被继承。
2.层叠性
可以为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上。
ex：
p{
color:blue;
}
p{
font-size:50px;
}
#p1{
background:gray;
}
3.优先级
在样式声明有冲突时（重复），则按照样式的优先级来应用样式。
优先级由低到高：
浏览器默认设置：低
样式表（内部样式和外部样式）：中-就近原则
内联样式：高
4.调整优先级
!important 规则
将!important加在属性值的后面，与值之间用空格隔开。
ex:
color:red !important;
练习：
网页中新建一个div元素，内容随意，用内部样式设置其字体大小为40px，字体颜色为红色，然后用外部样式设置其字体大小为70px，字体颜色为蓝色，将外部样式引入到网页中查看页面的效果，然后交互内 外样式的位置，再查看页面的效果，最后用!important去改变优先级。
三.选择器（重点）
1.选择器的作用
规范了页面中哪些元素能够使用定义好的样式。
为了匹配元素。
2.选择器详解
(1)通用选择器
语法：*{样式声明}
作用：可以匹配页面上的任意元素
注意：通用选择器的效率较低，尽量少用
(2)元素选择器
语法：元素名称{样式声明}
作用：设置页面上某种元素的样式
ex: div{…}
p{…}
a{…}
header{…}
(3)类选择器
作用：定义页面上某个元素或某些的样式（谁想用谁就可以使用）
特点：通过元素的class属性来引用类选择器
语法：
1.声明
.类名{样式声明}
定义类名注意：点不能省略，类名不能以数字开头，不能包含特殊字符，但可以包含（-，_）
2.引用
类选择器的特殊用法：
1.多类选择器
让元素引用多个类选择器
2.分类选择器
将元素选择器和类选择器结合使用
语法：元素选择器.类选择器{样式声明}
ex: div.test{color:red;}
练习：页面中新建div和p元素，内容随意
用类选择器为所有元素设置字体为红色；
用分类选择器为p元素设置背景颜色为黑色。
(4)id选择器
作用：设置指定id元素的样式（专属定制）
语法：#id值{样式声明}
(5)群组选择器
作用：将多个选择器放在一起进行样式的声明
语法：选择器1,选择器2,选择器3…{样式声明}
ex:
#s1,.myColor,div,p.test{color:red;}
对比：
#s1{color:red;}
.myColor{color:red;}
div{color:red;}
p.test{color:red;}
(6)后代选择器
作用：通过元素的后代关系匹配元素
后代：一级或多级嵌套
语法：选择器1 选择器2 选择器3...{样式声明}
课后作业：
按以下布局完成样式设置：
用后代选择器完成第一个span元素样式的设置，字体大小为32px，文本颜色为红色，背景颜色为黄色。
这是第一个span元素
这是第二个span元素
一.选择器详解
1.子代选择器
作用：通过元素的子代（一层嵌套）关系匹配元素。
语法：选择器1>选择器2{样式声明}
2.伪类选择器
作用：匹配元素不同的状态
语法：所有的伪类以:开始的
选择器:伪类选择器{样式声明}
伪类选择器分类：
(1)链接伪类
:link 匹配元素尚未访问时的状态
:visited 匹配元素访问过的状态
(2)动态伪类
:hover 匹配鼠标悬停在元素上时的状态
:active 匹配元素被激活时的状态
:focus 匹配元素获取焦点时的状态
练习：
在页面中增加一个a标记，并设置以下效果：
1.链接未访问时，颜色为红色，没有下划线
（text-decoration:none;）。
2.鼠标悬停时，文本颜色为黄色。
3.被激活时，文本为橙色。
4.访问后，文本颜色为绿色。
在页面中再增加一个输入框，默认文本颜色为灰色，字体为斜体（font-style:italic）
1.被激活时，字体为非斜体(font-style:normal)。
2.获取焦点时，文本颜色为红色。
3.选择器的优先级
权值：标识当前选择器的重要程度，权值越大的优先级越高。
元素选择器 1
类选择器 10
伪类选择器 10
ID选择器 100
内联样式 1000
选择器的权值加到一起，大的优先，权值相同，以后定义为主。
二.尺寸与边框
1.单位
1.尺寸单位
px：像素（1024*768）
in：英寸（1in=2.54cm）
pt：磅（1pt=1/72in）表示文字大小
cm：厘米
mm：毫米
em：相对单位（相对于元素本身字体的大小乘以倍数 ex:2em）
rem：相对单位（相对于根元素字体的大小乘以倍数 3rem ）
%：相对单位（50%）
2.颜色单位（取值）
1.英文单词（red,blue,black,yellow,orange…）
2.rgb(r,g,b)
r:red;
g:green;
b:blue;
r,g,b取值范围0-255
ex:
rgb(0,0,255)
3.#rrggbb
由6位16进制的数字和字母表示一个颜色
由0-9和A-F组成
#eeeeee 灰色
#000000 黑色
#ffffff 白色
4.#rgb是上面的缩写形式
#eeeeee–>#eee
5.rgba(r,g,b,alpah)
alpah:透明度，取值0-1的小数，值越小越透明
2.尺寸属性
1.作用
改变元素的宽度和高度
2.语法
1.宽度
width
min-width:最小宽度
max-width:最大宽度
2.高度
height
min-height:最小高度
max-height:最大高度
3.页面中允许设置尺寸的元素
1.所有块级元素都允许设置尺寸
div,p,h1-h6,结构标记,ul,ol,dl
2.行内块元素允许设置尺寸
表单控件元素（单选按钮，复选框除外）
3.本身具备width和height属性的元素
img,table
注意：大部分的行内元素是无法修改尺寸的。
3.溢出处理
当内容多，元素区域小的时候，就会产生溢出的效果，默认都是纵向溢出。
属性：overflow/overflow-x/overflow-y
取值：
1.visible 可见的，溢出可见，默认值
2.hidden 隐藏的，溢出的内容全部隐藏，不可见
3.scroll 显示滚动条，溢出时可用
4.auto 自动&#
最低0.47元/天 解锁文章
896
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
