1、从显示效果即样式上，找缺点
1、属性不统一
想完成相同的效果，却使用的是不同的属性或标记
2、可重用性、可维护性不高
在html中，可以通过 css 解决以上两个弊端
2、CSS
1、什么是CSS
CSS (Cascading Style Sheets) ，层叠样式表、级联样式表，样式表
用于 html 文档中， 元素样式的定义
1、实现 内容 与 表现 相分离
2、提高了代码的可重用性和可维护性
HTML : 定义网页内容(人)
CSS ：定义网页的显示效果(衣服、化妆)
2、CSS 与 HTML属性之间的关系
W3C建议 尽量使用 css 样式 取代 html属性
如果html拥有特有属性的话，则使用html属性,比如：colspan，rowspan
3、使用CSS样式表
1、CSS样式表的三种使用方式
1、内联方式
内联样式,行内样式
将样式定义在html元素中
将 样式 定义在元素的 style 属性中
CSS语法：
属性:属性值
color:red
background-color:green
多对属性/值之间，用;隔开
color:red;background-color:green;
定义 div 元素 的文本颜色为 红色， 背景颜色为绿色
<div style="color:red;background-color:green;">Hello CSS</div>
2、内部样式表
将样式定义在 html 的 head标记中
将 若干 "样式规则" 存放在 <style>元素中
<head>
<meta />
<style>
样式规则1 ...
样式规则2 ...
</style>
</head>
样式规则：针对页面中某一个/某一组元素进行的样式定义
样式规则语法：
选择器 和 样式声明
选择器：决定了页面中哪些元素能够使用定义好的样式。
选择器{
样式属性:值;
样式属性:值;
样式属性:值;
}
div{
color:red;
background-color:green;
}
3、外部样式表
将样式定义在 外部 的css 文件中
由html页面进行引用
步骤：
1、创建 .css 文件
包含若干样式规则
2、在需要使用的页面上进行引入
<link rel="stylesheet" type="text/css" href="路径" />
4、css语法规范
1、CSS样式表特征
1、继承性
大多数CSS样式规则时可以被继承的。
2、层叠性
可以为一个元素定义多个样式规则
不冲突时，过个样式规则的效果可以层叠为一个
3、优先级
样式定义冲突时，会按照不同样式规则的优先级应用样式
样式表三种使用方式优先级
1、浏览器的缺省设置（最低）
2、外部样式表 或 内部样式表（中间）
就近原则，谁离元素近，就用谁
3、内联样式（最高）
注意:相同样式重复定义的话，以最后一次出现为主
!important 规则
作用:显示调整样式规则的优先级
将!important 添加在样式属性值的后面，中间用空格分开
错误信息：
1、Invalid property value
属性值不对
2、Unknown property name
属性名称不对
5、CSS 基础选择器
选择器：决定了页面中哪些元素能够使用定义好的样式。
1、通用选择器
作用：匹配页面上[所有的]元素
语法：*
*{
font-size:12px;
}
定义页面中所有的标记文本大小统一为 12px
body{
font-size:12px;
}
如果属性支持继承的话，尽量通过继承 解决页面通用样式的问题，比如 font-size:12px; 。不支持继承的属性，并且页面中所有的元素都要用到的属性，可以放在 *{}
2、元素选择器
标签选择器、标记选择器、标签样式、标记样式
由html文档中的元素充当选择器
通常在定义某个元素的默认样式时使用
元素名称{
}
div{}
p{}
....
3、类选择器
可以通过元素的 class 属性进行 类选择器的引用
语法：.className{}
<div class="className"></div>
html中，允许一个元素引用多个类选择器，将元素的class属性设置为 "值列表"
<p class="className1 className2 className3"></p>
可以将类选择器与元素选择器结合使用，可以对某种元素中不同样式的细分控制，可以称之为 分类选择器
语法：元素选择器.类选择器{}
div.important{
}
4、id选择器
<div id="header"></div>
主要是配合元素的id属性一起来使用，为指定id值的元素去定义样式。
语法：#idValue{}
5、群组选择器
选择器的声明以逗号隔开的选择器列表
h1,h2,p,span,.important,#header,#footer,div.warning{
color:gray;
}
6、后代选择器
根据元素所在的上下级的关系来定义元素的样式,通常用在选择某个元素的后代元素时使用
语法:
选择器1 选择器2{}
7、子代选择器
根据元素所在的上下级的关系来定义元素的样式,要求选择器之间只能存在父子关系，即只有一层上下级关系.目的是缩小范围
语法：选择器1>选择器2{}
8、伪类选择器
匹配元素不同的状态
1、链接伪类
2、动态伪类
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
语法： 选择器:伪类选择器
1、链接伪类
:link , 定义尚未访问的链接的样式
:visited , 定义访问过的链接的样式
a:link{}
a:visited{}
2、动态伪类
:hover ,定义鼠标悬停在 html 元素上时的样式
:active , 定义元素被激活时的状态
:focus , 定义html元素获取焦点时的样式(多用在文本框或密码框)
*********************************************************
1、尺寸
用于设置元素的宽度和高度
单位 一般为 px 或 %
1、宽度属性
width
max-width : 最大宽度
min-width : 最小宽度
注意：
1、max-width ，min-width 与 width 相冲突
2、块级元素，宽度默认为 100%，如果一旦设置，以设置的为主
2、高度属性
height
max-height : 最大高度
min-height : 最小高度
注意：
1、max-height，min-height 以 height 相冲突
2、块级元素，默认没有高度，自适应,行内元素高度，以当前元素字体大小高度为主
注意：如果使用 width 或 height 去限制元素大小的话，如果元素中的内容的宽 或 高 大于了元素本身的宽 和 高的话，那么就会导致内容溢出
3、溢出处理
如果内容溢出的话，如何去处理溢出的东西
属性：
overflow
overflow-x : 横向溢出处理方式
overflow-y : 纵向溢出处理方式
取值：
visible : 默认值，溢出正常显示
hidden : 溢出隐藏
scroll : 滚动，让元素显示滚动条，溢出时，滚动条可用
auto : 自动处理，元素溢出则显示滚动条，否则则不显示滚动条
注意：页面中不是所有的元素都能修改尺寸
1、所有的行内元素 默认情况下，是不允许修改尺寸的。
2、边框
1、简写方式
border:width style color;
width:边框宽度，px为单位的数值
style:边框样式，solid 实线 ， dotted 虚线，dashed 虚线
color:颜色 ， rgb() , #rrggbb
一次性定义四个边框的同一风格
2、单边定义
border-left/right/top/bottom:width style color;
border-left:1px solid #ddd;
broder-top:1px dotted #f00;
3、定义边框宽度
四个边框宽度:
border-width : width;
单边框宽度:
border-left/right/top/bottom-width
4、定义边框样式
border-style:
border-left/right/top/bottom-style:
5、颜色
border-color:
border-left/right/top/bottom-color
颜色取值可以为 transparent，用于创建有宽度的不可见边框
边框组成：是由等腰三角形 或 等腰梯形组成的
3、边框倒角
将边框的直角倒成圆角
属性：border-radius
取值：
数量 ：1个值 或 4个值
单位 ：具体数值 或 百分比
单独定义:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
border-radius:5px;
4、边框阴影
属性：
box-shadow
取值：由多个属性值组成的值列表
h-shadow : 必须，阴影的水平位置,值为正，向右偏移，值为负，向左偏移
v-shadow : 必须，阴影的垂直位置,值为正，向下偏移，值为负，向上偏移
blur : 可选 ，模糊距离
spread : 可选，阴影的尺寸
color : 可选，颜色
inset : 可选，将默认的外部阴影，改为内阴影
常用操作：
box-shadow:h-shadow v-shadow blur color;
box-shadow:0px 0px 1px #ddd;
模拟边框发光的效果
5、轮廓
绘制于元素周围的一条线，位于边框之外
语法：outline:width style color;
outline-width:
outline-style:
outline-color:
1、属性不统一
想完成相同的效果，却使用的是不同的属性或标记
2、可重用性、可维护性不高
在html中，可以通过 css 解决以上两个弊端
2、CSS
1、什么是CSS
CSS (Cascading Style Sheets) ，层叠样式表、级联样式表，样式表
用于 html 文档中， 元素样式的定义
1、实现 内容 与 表现 相分离
2、提高了代码的可重用性和可维护性
HTML : 定义网页内容(人)
CSS ：定义网页的显示效果(衣服、化妆)
2、CSS 与 HTML属性之间的关系
W3C建议 尽量使用 css 样式 取代 html属性
如果html拥有特有属性的话，则使用html属性,比如：colspan，rowspan
3、使用CSS样式表
1、CSS样式表的三种使用方式
1、内联方式
内联样式,行内样式
将样式定义在html元素中
将 样式 定义在元素的 style 属性中
CSS语法：
属性:属性值
color:red
background-color:green
多对属性/值之间，用;隔开
color:red;background-color:green;
定义 div 元素 的文本颜色为 红色， 背景颜色为绿色
<div style="color:red;background-color:green;">Hello CSS</div>
2、内部样式表
将样式定义在 html 的 head标记中
将 若干 "样式规则" 存放在 <style>元素中
<head>
<meta />
<style>
样式规则1 ...
样式规则2 ...
</style>
</head>
样式规则：针对页面中某一个/某一组元素进行的样式定义
样式规则语法：
选择器 和 样式声明
选择器：决定了页面中哪些元素能够使用定义好的样式。
选择器{
样式属性:值;
样式属性:值;
样式属性:值;
}
div{
color:red;
background-color:green;
}
3、外部样式表
将样式定义在 外部 的css 文件中
由html页面进行引用
步骤：
1、创建 .css 文件
包含若干样式规则
2、在需要使用的页面上进行引入
<link rel="stylesheet" type="text/css" href="路径" />
4、css语法规范
1、CSS样式表特征
1、继承性
大多数CSS样式规则时可以被继承的。
2、层叠性
可以为一个元素定义多个样式规则
不冲突时，过个样式规则的效果可以层叠为一个
3、优先级
样式定义冲突时，会按照不同样式规则的优先级应用样式
样式表三种使用方式优先级
1、浏览器的缺省设置（最低）
2、外部样式表 或 内部样式表（中间）
就近原则，谁离元素近，就用谁
3、内联样式（最高）
注意:相同样式重复定义的话，以最后一次出现为主
!important 规则
作用:显示调整样式规则的优先级
将!important 添加在样式属性值的后面，中间用空格分开
错误信息：
1、Invalid property value
属性值不对
2、Unknown property name
属性名称不对
5、CSS 基础选择器
选择器：决定了页面中哪些元素能够使用定义好的样式。
1、通用选择器
作用：匹配页面上[所有的]元素
语法：*
*{
font-size:12px;
}
定义页面中所有的标记文本大小统一为 12px
body{
font-size:12px;
}
如果属性支持继承的话，尽量通过继承 解决页面通用样式的问题，比如 font-size:12px; 。不支持继承的属性，并且页面中所有的元素都要用到的属性，可以放在 *{}
2、元素选择器
标签选择器、标记选择器、标签样式、标记样式
由html文档中的元素充当选择器
通常在定义某个元素的默认样式时使用
元素名称{
}
div{}
p{}
....
3、类选择器
可以通过元素的 class 属性进行 类选择器的引用
语法：.className{}
<div class="className"></div>
html中，允许一个元素引用多个类选择器，将元素的class属性设置为 "值列表"
<p class="className1 className2 className3"></p>
可以将类选择器与元素选择器结合使用，可以对某种元素中不同样式的细分控制，可以称之为 分类选择器
语法：元素选择器.类选择器{}
div.important{
}
4、id选择器
<div id="header"></div>
主要是配合元素的id属性一起来使用，为指定id值的元素去定义样式。
语法：#idValue{}
5、群组选择器
选择器的声明以逗号隔开的选择器列表
h1,h2,p,span,.important,#header,#footer,div.warning{
color:gray;
}
6、后代选择器
根据元素所在的上下级的关系来定义元素的样式,通常用在选择某个元素的后代元素时使用
语法:
选择器1 选择器2{}
7、子代选择器
根据元素所在的上下级的关系来定义元素的样式,要求选择器之间只能存在父子关系，即只有一层上下级关系.目的是缩小范围
语法：选择器1>选择器2{}
8、伪类选择器
匹配元素不同的状态
1、链接伪类
2、动态伪类
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
语法： 选择器:伪类选择器
1、链接伪类
:link , 定义尚未访问的链接的样式
:visited , 定义访问过的链接的样式
a:link{}
a:visited{}
2、动态伪类
:hover ,定义鼠标悬停在 html 元素上时的样式
:active , 定义元素被激活时的状态
:focus , 定义html元素获取焦点时的样式(多用在文本框或密码框)
*********************************************************
1、尺寸
用于设置元素的宽度和高度
单位 一般为 px 或 %
1、宽度属性
width
max-width : 最大宽度
min-width : 最小宽度
注意：
1、max-width ，min-width 与 width 相冲突
2、块级元素，宽度默认为 100%，如果一旦设置，以设置的为主
2、高度属性
height
max-height : 最大高度
min-height : 最小高度
注意：
1、max-height，min-height 以 height 相冲突
2、块级元素，默认没有高度，自适应,行内元素高度，以当前元素字体大小高度为主
注意：如果使用 width 或 height 去限制元素大小的话，如果元素中的内容的宽 或 高 大于了元素本身的宽 和 高的话，那么就会导致内容溢出
3、溢出处理
如果内容溢出的话，如何去处理溢出的东西
属性：
overflow
overflow-x : 横向溢出处理方式
overflow-y : 纵向溢出处理方式
取值：
visible : 默认值，溢出正常显示
hidden : 溢出隐藏
scroll : 滚动，让元素显示滚动条，溢出时，滚动条可用
auto : 自动处理，元素溢出则显示滚动条，否则则不显示滚动条
注意：页面中不是所有的元素都能修改尺寸
1、所有的行内元素 默认情况下，是不允许修改尺寸的。
2、边框
1、简写方式
border:width style color;
width:边框宽度，px为单位的数值
style:边框样式，solid 实线 ， dotted 虚线，dashed 虚线
color:颜色 ， rgb() , #rrggbb
一次性定义四个边框的同一风格
2、单边定义
border-left/right/top/bottom:width style color;
border-left:1px solid #ddd;
broder-top:1px dotted #f00;
3、定义边框宽度
四个边框宽度:
border-width : width;
单边框宽度:
border-left/right/top/bottom-width
4、定义边框样式
border-style:
border-left/right/top/bottom-style:
5、颜色
border-color:
border-left/right/top/bottom-color
颜色取值可以为 transparent，用于创建有宽度的不可见边框
边框组成：是由等腰三角形 或 等腰梯形组成的
3、边框倒角
将边框的直角倒成圆角
属性：border-radius
取值：
数量 ：1个值 或 4个值
单位 ：具体数值 或 百分比
单独定义:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
border-radius:5px;
4、边框阴影
属性：
box-shadow
取值：由多个属性值组成的值列表
h-shadow : 必须，阴影的水平位置,值为正，向右偏移，值为负，向左偏移
v-shadow : 必须，阴影的垂直位置,值为正，向下偏移，值为负，向上偏移
blur : 可选 ，模糊距离
spread : 可选，阴影的尺寸
color : 可选，颜色
inset : 可选，将默认的外部阴影，改为内阴影
常用操作：
box-shadow:h-shadow v-shadow blur color;
box-shadow:0px 0px 1px #ddd;
模拟边框发光的效果
5、轮廓
绘制于元素周围的一条线，位于边框之外
语法：outline:width style color;
outline-width:
outline-style:
outline-color:
7931
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
