1、CSS概述
1、问题
1、控制页面中所有的 文本 颜色为 红色
2、控制页面中所有 div 的文本颜色为 蓝色
3、将所有 div 的颜色变为 黄色
HTML元素的不足:
1、要完成相同的效果，使用的是不同的属性
<body text="red"></body>
<font color="blue"></font>
2、没有提升 html属性的 可重用性和可维护性
可重用性：重复的操作，不用重复的写
可以通过css解决以上两个问题
2、什么是CSS
CSS（Cascading Style Sheets），层叠样式表，级联样式表，简称：样式表。专门用于定义页面元素的样式的。
以统一的方式定义页面元素的样式
CSS实现了内容与表现相分离
提升了代码的可重用性 和 可维护性+
3、CSS 与 HTML之间的关系
HTML：专门用于构建网页结构
CSS：专门构建HTML网页的样式
HTML属性效果 与 CSS样式效果相冲突的话，优先使用CSS定义页面元素的效果
2、CSS语法
1、使用CSS样式表
1、内联方式（注：也没有提升 属性的 可重用性和可维护性，但是采用的是CSS的方式）
又称为：行内样式
将样式定义在某个html元素中
语法：
<ANY style="样式声明（若干条）；样式声明；"></ANY>
样式声明：
由 属性名称 和 属性值 来组成，属性名称和属性值之间用":"来关联
ex:
属性名称 属性值
color：定义他所在的行的颜色属性； red,blue,yellow
background-color：（背景颜色） 合法颜色值即可...（同上）
font-size 以px，pt为单位的数值
控制以下 文本颜色为 红色，背景颜色为 黄色 文字大小为24px
<p>静夜思</p>
2、内部样式表
将样式定义在网页的一块独立位置处
在<head></head>中增加一对 <style></style>元素，在<style>元素中 定义元素的样式，具体语法如下：
ex:
<head>
<title></title>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
<head>
样式规则，由两部分组成
1、选择器
选择(规范)页面中哪些元素能够使用声明好的样式
比如：元素选择器，由元素名称来充当选择器，控制某标记对应所有页面元素的样式
2、若干样式声明
样式规则 语法结构：
选择器｛
样式声明1；
样式声明2；
...
样式声明n；
｝
ex:
p{
color:red;
background-color:yellow;
font-size:24px;
}
3、外部样式表(样式规则同内部样式语法规则一样)
将样式定义在外部的"样式表文件(*.css)"中
1、创建 .css文件，编写样式规则
2、在要使用 样式表的 html文件中进行引入
<head>
<link rel="stylesheet" href="样式表文件 url">
</head>
2、CSS样式表特征
1、继承性
大部分样式属性是可以被继承
2、层叠性
可以为一个元素定义多个样式规则
如果属性不冲突时，多个样式规则可以层叠为一个（即都可以应用到当前元素上）
3、优先级
在层叠性基础上，如果 样式定义 冲突的话，那就会按照不同使用方式的优先级，来选择性应用样式
低：浏览器默认设置
中：外部样式表 和 内部样式表
就近原则
（后定义优先 即 谁后定义谁优先）
高：内联方式
（在非作弊的情况下，内联方式级别最高）
4、!important 规则(即上面所说的“作弊方式”，不建议在页面中使用的过多)
显示调整样式属性的优先级
语法：
属性名:值 !important;、
谨慎使用
3、选择器（重点）
1、作用
选择（规范）页面中哪些元素能够使用声明好的样式为了匹配页面的元素
2、详解
1、通用选择器
作用：匹配页面中所有的元素
语法：*{}
缺点：效率较低，尽可能少用,可以通过 使用body 的继承性 来替代 *
2、元素选择器
作用：匹配某一标记所对应的页面中所有的元素
语法：元素/标签{}
ex：
div{/*匹配页面中所有div*/}
span{/*匹配页面中所有span*/}
li{/*匹配页面中所有li*/}
3、类选择器
作用：事先定义好样式，可以任由元素通过class属性进行引用
语法：
定义：.类名{}
引用：<ANY class="类名"></ANY>
多类选择器的引用方式：
让一个元素引用多个类选择器，中间用 空格 隔开即可
分类选择器的声明方式：
将元素选择器和类选择器结合到一起进行声明，实现对某种元素中的不同样式细分控制
ex：想要控制 class为important的div元素，
文字大小为 48px
语法：元素选择器.类选择器{}
4、id选择器(专属定制)
作用：匹配 指定id值的元素的 样式
ex：
<div id="nav"></div>
语法：#ID值{}
【2、3、4统称为基础选择器】
5、群组选择器
群组选择器的声明以一个“，”隔开的选择器列表
语法：
选择器1，选择器2，...{}
ex:
#title,p.redColor,.important,span{
color:red;
}
6、后代选择器
后代：
多于 一级 层级关系的元素，只能叫后代
只具备 一级 层级关系的元素 也可以叫后代
语法：
选择器1 选择器2{}
语义：匹配 在选择器1 中的 所有后代元素选择器2
ex：
#content span()
7、子代选择器
子代：
只具备 一级 层级关系的元素 称之为子代
语法：
选择器1>选择器2{}
语义：匹配 在选择器1 中的 子级元素 选择器2
8、伪类选择器
伪类：专门匹配元素不同状态的选择器
分类：
1、链接伪类
2、动态伪类
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
语法：
以“:”作为开始的选择器
1、链接伪类
1、:link
适用于未被访问的超链接
2、:visited
适用于访问过的超链接
2、动态伪类
1、:hover
适用于鼠标悬停在html元素时
2、:active
使用于html元素被激活时
3、:focus
适用于html元素获取焦点时
选择器优先级
选择器类型 权值
元素选择器 0，0，0，1
类选择器 0，0，1，0
伪类选择器 0，0，1，0
ID选择器 0，1，0，0
内联样式 1，0，0，0
（思考：当使用元素选择器时，就可以实现大部分功能了，为何还要使用其他选择器？
答：
元素选择器用于同名元素的批量引用；
类选择器可以用于某个元素进行样式灵活选用；即某个单独的元素是引用；
多类选择器是某个元素引用多个样式；
分类选择器；将元素选择器和类选择器结合起来，针对于某种元素不同样式的细分详细控制）
3、尺寸与边框
1、css单位
1、尺寸单位
1、px：像素
2、pt：磅（1pt=1/72 in）
3、in：英寸，1 in=2.54 cm
4、% ：百分比，占据 当前元素 或 父元素对属性的 占比
5、em：倍数，多数用于 文字大小的描述（响应式布局时用）
6、mm：毫米
7、cm：厘米
注意：css中尺寸单位是不能省略的。
2、颜色单位（取值）
1、rgb(r,g,b)
(r:red,范围0-255)
（g:green,范围0-255）
(b:blue,范围0-255)
ex：
background-color:rgb(0,0,0);黑色
background-color:rgb(255,0,0);红色
background-color:rgb(255,255,255)白色
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha:透明度0~1之间的数字
0：完全透明
1：完全不透明
0.5：半透明
4、#rrggbb
通过6位16进制数字表示一个颜色
每位数字范围：0-9 A-F
#00ff00：绿色
#ff0000：红色
#1a2b3c：？
5、#rgb
#rrggbb 每两位数字相同时，可以使用#rgb简化
#00ff00 -> #0f0
#aabbcc -> #abc
#accdda -> x
6、颜色的英文表示
red，green，blur,.orange,pink
2、尺寸属性
1、作用
用于设置元素的宽度和高度
单位一般为 px 或 %(父元素对应属性的占比)
2、语法
1、宽度
width
min-width：最小宽度
max-width: 最大宽度
2、高度
height
min-height：最小高度
max-height：最大高度
注意：
页面中所有元素的高度，在不指定的情况全部自适应（以内容为主）。
页面中所有块级元素的宽度，默认占据父元素的100%
页面中
3、页面中允许修改 尺寸 属性的元素
1、所有块级元素都允许修改
2、大部分的行内块元素
所有的表单元素都是行内块元素
除radio、checkbox之外，其他元素允许修改尺寸
3、本事html元素就具备width 和 height的
img，table 可以修改尺寸
4、行内元素（除具备width和height之外）是不能修改尺寸
span,a,b,i,s,b ... 不能修改尺寸
4、溢出
1、什么是溢出
使用尺寸属性限制元素大小时，如果内容所需要的空间大于元素本身空间，则会导致内容溢出
2、溢出处理属性
属性：overflow
overflow-x：横向溢出处理
overflow-y：纵向溢出处理
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏
3、scroll
滚动，让元素出现滚动条，溢出时，滚动条可用
4、auto
自动，溢出时显示滚动条并可用，非溢出时，不显示滚动条
3、边框属性
1、边框
1、简写方式
border：width style color；
作用：设置元素上下左右四个边框的宽度，样式以及颜色
width：边框的宽度（尺寸）
style：边框的样式
取值：
1、solid：直线
2、dotted：虚线(点状)
3、dashed：虚线(线状)
color：边框的颜色,可以取值为 transparent（透明）
ex：
div{
border:1px solid red;
}
2、单边定义
border-方向：width style color；
方向可以被以下关键字所取代
top：上
right：右
bottom：下
left：左
ex：
border-bottom:2px dashed #00ff00;
3、单属性定义
border-属性：值；
属性可以被以下关键字取代
width：宽度
style：样式
color：颜色
ex：
border-width:5px;
border-style:solid;
border-color:#f00f00;
4、单边单属性定义
border-方向-属性：值；
方向：top/right/bottom/left
属性：width/style/color
ex:
border-top-color:yellow;
1、问题
1、控制页面中所有的 文本 颜色为 红色
2、控制页面中所有 div 的文本颜色为 蓝色
3、将所有 div 的颜色变为 黄色
HTML元素的不足:
1、要完成相同的效果，使用的是不同的属性
<body text="red"></body>
<font color="blue"></font>
2、没有提升 html属性的 可重用性和可维护性
可重用性：重复的操作，不用重复的写
可以通过css解决以上两个问题
2、什么是CSS
CSS（Cascading Style Sheets），层叠样式表，级联样式表，简称：样式表。专门用于定义页面元素的样式的。
以统一的方式定义页面元素的样式
CSS实现了内容与表现相分离
提升了代码的可重用性 和 可维护性+
3、CSS 与 HTML之间的关系
HTML：专门用于构建网页结构
CSS：专门构建HTML网页的样式
HTML属性效果 与 CSS样式效果相冲突的话，优先使用CSS定义页面元素的效果
2、CSS语法
1、使用CSS样式表
1、内联方式（注：也没有提升 属性的 可重用性和可维护性，但是采用的是CSS的方式）
又称为：行内样式
将样式定义在某个html元素中
语法：
<ANY style="样式声明（若干条）；样式声明；"></ANY>
样式声明：
由 属性名称 和 属性值 来组成，属性名称和属性值之间用":"来关联
ex:
属性名称 属性值
color：定义他所在的行的颜色属性； red,blue,yellow
background-color：（背景颜色） 合法颜色值即可...（同上）
font-size 以px，pt为单位的数值
控制以下 文本颜色为 红色，背景颜色为 黄色 文字大小为24px
<p>静夜思</p>
2、内部样式表
将样式定义在网页的一块独立位置处
在<head></head>中增加一对 <style></style>元素，在<style>元素中 定义元素的样式，具体语法如下：
ex:
<head>
<title></title>
<style>
样式规则1
样式规则2
...
样式规则n
</style>
<head>
样式规则，由两部分组成
1、选择器
选择(规范)页面中哪些元素能够使用声明好的样式
比如：元素选择器，由元素名称来充当选择器，控制某标记对应所有页面元素的样式
2、若干样式声明
样式规则 语法结构：
选择器｛
样式声明1；
样式声明2；
...
样式声明n；
｝
ex:
p{
color:red;
background-color:yellow;
font-size:24px;
}
3、外部样式表(样式规则同内部样式语法规则一样)
将样式定义在外部的"样式表文件(*.css)"中
1、创建 .css文件，编写样式规则
2、在要使用 样式表的 html文件中进行引入
<head>
<link rel="stylesheet" href="样式表文件 url">
</head>
2、CSS样式表特征
1、继承性
大部分样式属性是可以被继承
2、层叠性
可以为一个元素定义多个样式规则
如果属性不冲突时，多个样式规则可以层叠为一个（即都可以应用到当前元素上）
3、优先级
在层叠性基础上，如果 样式定义 冲突的话，那就会按照不同使用方式的优先级，来选择性应用样式
低：浏览器默认设置
中：外部样式表 和 内部样式表
就近原则
（后定义优先 即 谁后定义谁优先）
高：内联方式
（在非作弊的情况下，内联方式级别最高）
4、!important 规则(即上面所说的“作弊方式”，不建议在页面中使用的过多)
显示调整样式属性的优先级
语法：
属性名:值 !important;、
谨慎使用
3、选择器（重点）
1、作用
选择（规范）页面中哪些元素能够使用声明好的样式为了匹配页面的元素
2、详解
1、通用选择器
作用：匹配页面中所有的元素
语法：*{}
缺点：效率较低，尽可能少用,可以通过 使用body 的继承性 来替代 *
2、元素选择器
作用：匹配某一标记所对应的页面中所有的元素
语法：元素/标签{}
ex：
div{/*匹配页面中所有div*/}
span{/*匹配页面中所有span*/}
li{/*匹配页面中所有li*/}
3、类选择器
作用：事先定义好样式，可以任由元素通过class属性进行引用
语法：
定义：.类名{}
引用：<ANY class="类名"></ANY>
多类选择器的引用方式：
让一个元素引用多个类选择器，中间用 空格 隔开即可
分类选择器的声明方式：
将元素选择器和类选择器结合到一起进行声明，实现对某种元素中的不同样式细分控制
ex：想要控制 class为important的div元素，
文字大小为 48px
语法：元素选择器.类选择器{}
4、id选择器(专属定制)
作用：匹配 指定id值的元素的 样式
ex：
<div id="nav"></div>
语法：#ID值{}
【2、3、4统称为基础选择器】
5、群组选择器
群组选择器的声明以一个“，”隔开的选择器列表
语法：
选择器1，选择器2，...{}
ex:
#title,p.redColor,.important,span{
color:red;
}
6、后代选择器
后代：
多于 一级 层级关系的元素，只能叫后代
只具备 一级 层级关系的元素 也可以叫后代
语法：
选择器1 选择器2{}
语义：匹配 在选择器1 中的 所有后代元素选择器2
ex：
#content span()
7、子代选择器
子代：
只具备 一级 层级关系的元素 称之为子代
语法：
选择器1>选择器2{}
语义：匹配 在选择器1 中的 子级元素 选择器2
8、伪类选择器
伪类：专门匹配元素不同状态的选择器
分类：
1、链接伪类
2、动态伪类
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
语法：
以“:”作为开始的选择器
1、链接伪类
1、:link
适用于未被访问的超链接
2、:visited
适用于访问过的超链接
2、动态伪类
1、:hover
适用于鼠标悬停在html元素时
2、:active
使用于html元素被激活时
3、:focus
适用于html元素获取焦点时
选择器优先级
选择器类型 权值
元素选择器 0，0，0，1
类选择器 0，0，1，0
伪类选择器 0，0，1，0
ID选择器 0，1，0，0
内联样式 1，0，0，0
（思考：当使用元素选择器时，就可以实现大部分功能了，为何还要使用其他选择器？
答：
元素选择器用于同名元素的批量引用；
类选择器可以用于某个元素进行样式灵活选用；即某个单独的元素是引用；
多类选择器是某个元素引用多个样式；
分类选择器；将元素选择器和类选择器结合起来，针对于某种元素不同样式的细分详细控制）
3、尺寸与边框
1、css单位
1、尺寸单位
1、px：像素
2、pt：磅（1pt=1/72 in）
3、in：英寸，1 in=2.54 cm
4、% ：百分比，占据 当前元素 或 父元素对属性的 占比
5、em：倍数，多数用于 文字大小的描述（响应式布局时用）
6、mm：毫米
7、cm：厘米
注意：css中尺寸单位是不能省略的。
2、颜色单位（取值）
1、rgb(r,g,b)
(r:red,范围0-255)
（g:green,范围0-255）
(b:blue,范围0-255)
ex：
background-color:rgb(0,0,0);黑色
background-color:rgb(255,0,0);红色
background-color:rgb(255,255,255)白色
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha)
alpha:透明度0~1之间的数字
0：完全透明
1：完全不透明
0.5：半透明
4、#rrggbb
通过6位16进制数字表示一个颜色
每位数字范围：0-9 A-F
#00ff00：绿色
#ff0000：红色
#1a2b3c：？
5、#rgb
#rrggbb 每两位数字相同时，可以使用#rgb简化
#00ff00 -> #0f0
#aabbcc -> #abc
#accdda -> x
6、颜色的英文表示
red，green，blur,.orange,pink
2、尺寸属性
1、作用
用于设置元素的宽度和高度
单位一般为 px 或 %(父元素对应属性的占比)
2、语法
1、宽度
width
min-width：最小宽度
max-width: 最大宽度
2、高度
height
min-height：最小高度
max-height：最大高度
注意：
页面中所有元素的高度，在不指定的情况全部自适应（以内容为主）。
页面中所有块级元素的宽度，默认占据父元素的100%
页面中
3、页面中允许修改 尺寸 属性的元素
1、所有块级元素都允许修改
2、大部分的行内块元素
所有的表单元素都是行内块元素
除radio、checkbox之外，其他元素允许修改尺寸
3、本事html元素就具备width 和 height的
img，table 可以修改尺寸
4、行内元素（除具备width和height之外）是不能修改尺寸
span,a,b,i,s,b ... 不能修改尺寸
4、溢出
1、什么是溢出
使用尺寸属性限制元素大小时，如果内容所需要的空间大于元素本身空间，则会导致内容溢出
2、溢出处理属性
属性：overflow
overflow-x：横向溢出处理
overflow-y：纵向溢出处理
取值：
1、visible
默认值，溢出可见
2、hidden
隐藏
3、scroll
滚动，让元素出现滚动条，溢出时，滚动条可用
4、auto
自动，溢出时显示滚动条并可用，非溢出时，不显示滚动条
3、边框属性
1、边框
1、简写方式
border：width style color；
作用：设置元素上下左右四个边框的宽度，样式以及颜色
width：边框的宽度（尺寸）
style：边框的样式
取值：
1、solid：直线
2、dotted：虚线(点状)
3、dashed：虚线(线状)
color：边框的颜色,可以取值为 transparent（透明）
ex：
div{
border:1px solid red;
}
2、单边定义
border-方向：width style color；
方向可以被以下关键字所取代
top：上
right：右
bottom：下
left：左
ex：
border-bottom:2px dashed #00ff00;
3、单属性定义
border-属性：值；
属性可以被以下关键字取代
width：宽度
style：样式
color：颜色
ex：
border-width:5px;
border-style:solid;
border-color:#f00f00;
4、单边单属性定义
border-方向-属性：值；
方向：top/right/bottom/left
属性：width/style/color
ex:
border-top-color:yellow;
border-right-style:dotted;
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
