作用 ：实现网页布局，美化页面元素
CSS 在文档中的三种方式
1 行内样式/内联样式
特点：在具体的html标签中引入css 代码
语法：
所有的html标签都具有一个style属性，属性值就可以使用css样式规则
<标签 style="CSS样式规则"><标签>
css样式规则：
由css属性与值组成 ,属性名与值之间使用：隔开，每一条CSS语句以分号结束
color:red;
常见的CSS属性
1.font-size :设置字体大小，取值为像素值
2 color:设置文本颜色，取值颜色的英文单词
3 background-color 设置背景颜色
2 文档内嵌
1 将css代码从标签中抽离出来，单独写在一起，在html文档中使用<style></style>引入样式表
<style>标签可以在文档的任意地方使用
2 样式表语法：
css选择器
标签选择器：根据给定的标签名，匹配文档中所有的该 元素，并应用样式
3 外部样式表/ 外链方式
优点：
1 真正实现样式与结构的分离，便于维护
2 可以实现样式的复用
使用：1 ，创建外部的css文件
2 在html文档中使用
<link rel="stylesheet">引入样式表文件
3 在样式表中添加样式，通过选择器书写样式
2 样式表特点
1 层叠性
多个css样式共同作用于元素
2 继承性
父元素中设置的样式，子元素可以继承下来
大部分文本相关的属性，都可以被继承，块级元素的宽度与父元素保持一致；
3 样式表的优先级
只有发生样式冲突时，才考虑优先级
优先级从低到高：
1 继承样式
2 浏览器的缺省设置（默认样式）
3 文档内嵌方式 / 外链方式 设置的样式
相同的优先级，发生 样式俚， 由代码的书写顺序决定最终样式，后来者居上
4 行内样式优先级最高
3 选择器介绍：
作用：根据指定的选择模式匹配文档中的元素，并为其设置样式
2 分类 ：标签选择器 / 元素选择器
语法：标签名｛属性：值;｝
使用：
常用于清除页面默认样式，以及设置基础样式
2 根据元素的class属性值进行匹配：
语法：以英文，开关，后面跟上class属性值
注意：
1 写选择器时，不要随便出现任何符号
2 类名自定义，禁止以数字开头，可以出现 数字 字母 尽量 见名知意
3 每个元素都具备class属性，也可以使用多个类名，多个类名之间使用空格隔开
3 根据元素的id属性值匹配元素
每个元素都具备id属性，并且id属性具有唯一性
语法：
以#开头，跟 上id 属性值
#id属性值｛｝
使用：通常页面中具有唯一性的元素，都可以使用id 进行标识，并使用id 选择器添加样式
页面中具有唯一性的元素：外围结构标签
注意：
1 。id 属性具有唯一性，不能重复使用相同的id值。在使用js获取页面元素时，ID是元素唯一的标识，如果出现重复，后面的元素都获取不到
2 。id 选择器与class选择器的区别：
id 具有唯一性，id 选择器定义的样式不能被复用class可以重复使用，类选择器定义的样式可以复用
3 。 具有唯一性的元素都可以使用ID选择器设置样式，外部的结构标签使用id 标识，内部的标签使用 class标识
4 群组选择器
为一组元素统一设置样式
5 后代选择器
依托元素的层级关系匹配后代元素。后代元素包含直接子元素和间接子元素
语法：
选择器1 选择器2｛样式规则｝
6 子代选择器
依托元素的层级关系，匹配直接子元素
语法：
选择器1 > 选择器2{}
表示在选择器1对应的元素中，匹配满足选择器2的直接子元素
7 伪类选择器
1 作用：针对元素的不同状态设置样式
2 分类：
1 超链接伪类选择器
主要针对超链接的不同状态设置样式
：link 超链接访问前的状态
: visited 超链接访问后的状态
2 动态伪类选择器
1 。 :hover 表示鼠标悬停时的状态
下拉菜单的制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ul{ display: none; } .list_:hover ul{ color: red; display: block; } </style> <body> <div class="list_">下拉菜单 <ul style="list-style: none;padding-left: 0;"> <li>下拉菜单1</li> <li>下拉菜单2</li> <li>下拉菜单3</li> <li>下拉菜单4</li> </ul> </div> </body> </html>
2 。：active表示鼠标点按时的状态
3 。 ：focus表示获取焦点时的状态，常见于输入框接收用户输入时，就表示获取到焦点
3 使用：
1 伪类选择器必须与其他选择器结合使用，伪类选择器是给元素不同的状态设置样式
2 设置超链接四种状态下的样式
a:link{} 访问前状态
a:visited{} 访问后状态
a:hover{} 悬停状态
a:active{} 活动状态
书写顺序：LoVe/HAte 爱恨原则
3 表单元素获取焦点（针对输入框）
input: focus{
}
1 外边距
1 外边距
2 垂直方向上的外边距，会发生合并取较大的值
水平方向上的外边距，会发生叠加，元素之间的距离较大
3 为子元素添加距上的外边距，作用于父元素上：
解决:
1 为父元素设置上边框（可以使用透明色）
2 为父元素添加顶部的内边距padding-top:0.1px;
2 内边距
1 元素内容与元素边框之间的距离，称为内边距
2 属性:padding
取值：像素值或百分比
1 padding:10px;设置上右下左四个方向的内边距
2 padding:10px ,20px
设置上下内边距为10，左右内边距为20
3 padding:10px,20px,30px;
设置上下内边距分别为10 30 ,左右内边距为20
4 padding:10px 20px 30px 40px
设置上右下左四个方向的内边距
3 单方向内边距的设置
1 属性：
padding-top:内容与元素顶部边框之间的距离
padding-right: 内容与元素右边边框之间的距离
padding-bottom 内容与元素右边框之间的距离
padding-left 内容与元素左边框之间的距离
2 取值为像素值
4 默认带有内边距的元素
ol ul input td ..
5 清除浏览器默认内外边距
body,h1,h2,h3,h4,h5,h6,p,ul,ol,input{margin:0;padding:0}
6 设置盒模型的计算方式
1 属性：box-sizing
作用：指定盒模型的计算方式
取值：
1.content-box:默认值
元素的width height属性只用来规定内容的尺寸，如果元素设置内外边框和边框，最终在文档中占据的尺寸由各种值相加得到
在父元素中设置字体大小为0，解决子元素水平方向上的间隙问题，需要在子元素中重新设置字体大小、
设置box-sizing为border-box时，需要单独考虑外边距
2 border-box:
元素的width height属性，规定的是包含边框，内边距和内容在内的尺寸
4 元素的显示设置
1 设置元素的可见性
属性 visibility
取值：
1 visible 默认值，元素可见
2 hidden 设置元素隐藏 ，元素在文档中仍然占位
2 转换元素类型
属性：display
取值：
1 block ：转换为块元素
2 inline：转换为行内元素
3 inline-block：转换行内块元素
特殊取值：
4 none : 实现元素隐藏,元素在文档中不占位，其他元素会相应的移动
实现元素隐藏与显示：
display:none:隐藏
display:block:显示
5 背景相关的属性
1 background-color
设置背景颜色，取颜色值
注意：
1 所有元素默认的背景颜色都是透明色，新建窗口的白色不是body的背景色，是浏览器渲染的结果
2 背景颜色是从元素的边框位置开始绘制的，如果元素添加内边距，都会被渲染成相应的背景颜色
2 背景图片
1 设置背景图片
属性：background-image
取值：url()
注意：1 背景图片的尺寸如果大于元素尺寸，图片仍然按照原始尺寸显示，超出元素的部分不可见
2 背景图片的尺寸小于元素尺寸，浏览器会自动对背景图片重复平铺，直到铺满元素
3 背景图片与背景颜色一样，不影响元素正常内容的显示
图片尺寸不够时，浏览器会自动沿水平和垂直两个方向对图片进行重复平铺，直到铺满元素
属性：backgroun-repeat
取值：
1 repeat:默认值，沿水平和垂直方向平铺
2 repeat-x 沿水平方向平铺
3 repeat-y 沿垂直方向平铺
4 no-repeat :设置背景图片不重复平铺
3 设置背景图片的位置
1 属性：background-position 结合精灵图实现元素背景图片调整，这种技术叫【精灵技术】
2 取值：x y
1 取像素值：
x:表示背景图片水平方向的偏移距离
正值表示图片向右偏移
负值表示图片向左偏移
y:背景图片垂直方向的偏移距离
正值表示向下偏移
负值表示图片向上偏移
2 取百分比
参照元素尺寸计算水平和垂直偏移距离
1 0% 0% 背景图片显示在元素左上角
2 50% 50% 背景图片显示在元素中间
3 100% 100% 背景图片显示在右下角
3 方位值确定背景图片的位置
x:left / center / right
y: top / center / bottom
如果某一个方向缺失，默认为center
4 设置背景图片的大小
1 属性： background-size
2 取值：x y
x y 分别表示背景图片的宽和高
1 像素值
2 百分比：参照元素宽高尺寸计算背景图片的大小
3 cover ：表示将图片等比放大至完全覆盖元素
超出部分不可见
4 contain : 表示将图片等比拉伸至刚好被元素容纳
不能走出元素尺寸，可能会造成背景图片无法完全覆盖元素的效果
5 背景属性简写
1 属性：background
2 取值：color url() repeat position
注意：
1 背景属性按照一定顺序设置
2 background-size 单独设置
3 可以省略属性值，单独设置颜色，或者背景图片
6 文本相关的属性
1 字体相关的属性
属性：font-size
取值：像素值或em 1em=16px
2 字体的精细程度
属性：font-weight
取值：
1 关键字 light / normal(正常) / bold（加粗）
2 整百数值 100-900
100(lighter) ~ 400 (normal) ~ 900(bolder)
3 字体名称
1 属性：font-family
2 取值：字体名称
注意：
1 如果字体名称是中文或者由多个英文单词组成， 需要使用引号引起来
font-family:"微软雅黑";
font-family:“Microsoft YaHei”
font-family:serif;
2 同时指定多个字体名称，之间使用英文逗号间隔，当浏览器不支持第一种字体时，会按照顺序依次以后面指定字体名称显示
et:
font-family:"黑体","微软雅黑","宋体"
4 字体样式（是否采用斜体）
1 属性：font-syle
2 取值：
1 normal 正常显示
2 italic 斜体显示
3 oblique 倾斜显示
注意：oblique可以将字体倾斜一定角度，默认倾斜效果与italic斜体没有差别
5 字体属性简写
1 属性：font
2 取值：style weight size family;
注意 ：
1 同时设置四个属性值时，参照给定顺序书写
2 font-family font-size 是必填项，不能省略
2 文本相关的属性
1 文本颜色
1 属性：color
2 取值：颜色值
2 文本装饰线
1 属性：text-decoration
2 取值：
1 underline:下划线
2 overline ：上划线
3 line-through:删除线
4 none:取消装饰线
3 文本水平对齐方式
1 属性：text-align
2 取值：
1 left / center / right
2 justify 两端对齐
4 设置行高
行高指的是一行文本所占的高度
1 属性：line-height
2 取值：像素值 或em
用法：
1 设置行高与元素高度相同，实现一行文本的垂直居中
2 line -height > height ,文本会下移
3 line-height < height, 文本会上移
注意： 文本内容在当前行中始终是垂直居中的，
特殊取值：
取无单位的数值，表示当前字体大小的倍数，由此计算行高
p{font-size:20px;line-height:2;} (当前行高为字体大小的2倍，40px)
7 表格相关的属性
1 基础样式是通用的
2 独有的css属性：
1 边框合并
属性：border-collapse
取值：
1 seperate :默认值，单元格边框与表格边框相分离
2 collapse:设置表格边框与单元格边框合并
注意：
1 .td 不支持margin
2 .border-collapse 只能在table中使用，独有属性，其它元素不能使用它
2 设置边框边距
属性：border-spacing
取值： h-value v-value
1 h-value:水平方向边框之间的距离
2 v-value :垂直方向边距之间的距离
两个值之间使用空格隔开
注意：
边框边距只能在边框分离状态下设置，合并时无法使用