什么是css？
css的中文含义为层叠样式表
我的理解就是在通过连接html文件 把要修饰的东西单拎出来放到css中 来优化html文件 的代码 增加可读性 方便于修改；
css的语法结构
标记{ 属性：属性值；属性：属性值；} 属性值末尾要加分号 属性后加冒号 大括号包围
yangshi {color：red；}
css 的应用场景（优先级）
标记内的样式
语法结构：
<style type = 'text/css'>
标记{属性：属性值}
</style>
外链式的结构： 项目中常用通用的模式
单独为一个样式文件
语法结构：
<link/>
属性：type 属性值：text/css
href 属性值：文件的地址
rel属性值：stylesheet
<link type='text/css' href='文件地址' rel='stylesheet'/>
位置：放在html中 的head部分
导入式 样式
语法结构：
<style type='text/css'>
@import url('文件地址’)
</style>
位置同样放在head里面
优先级：标记内>内嵌式>导入式
注意内嵌和外链式的执行顺序
css中的选择器
标签选择器
id选择器：
<div id="名称"></div> 盒子 名称不能是中文、不能是纯数字、只能写英文或者拼音 不能数字开头
id选择器的样式唯一
样式表中找id选择器
格式：
#名称{属性：属性值;}
class选择器：
<div class="名称"></div> 名称不能是中文、不能是纯数字、只能写英文或者拼音 不能数字开头
class样式是可以重复的
样式表中找id选择器
格式：
.名称{属性：属性值;}
后代选择器（派生选择器）：
语法结构：选择器名称 标签/选择器
例如：
#box a{ 属性：属性值;}
伪类选择器：
专门修饰超链接
语法结构：
标记/选择器名:伪类选择器名称{ 属性：属性名；}
:hover 鼠标悬停
:link 超链接本身 a
:visited 访问过
:active 激活 鼠标点击一瞬间产生的样式
l-v-h-a 同时设置的时候 顺序
· 全局选择器
去除掉页面中多余的间距 padding、margin
* { padding:0;margin:0}
群组选择器：
样式相同，在一起设置
语法结构：
选择器名称 其他选择器的名称
#div p,.box p{ 属性：属性值;}
css中的单位：
像素（px）
百分比（%）
css属性：
文字属性：
· font-size 文字大小
· font-family文字字体 属性值：系统字体 默认是宋体 注意：字体加双引号
· font-weight文字加粗 属性值：bold
· font-style文字样式 属性值：normal 普通样式、italic
· color 文字颜色(rgb、rgba)
· text-indent首行缩进 用于段落
· text-align文字位置 属性值：left、center、right
· text-decoration 文字修饰 属性值：none 没有下划线、underline 加下划线、overline 加上划线、line-through 加删除线
一般用于修饰超链接
· line-height 行高(行间距)
· letter-spacing 字间距
· text-transform 形式转换 属性值：uppercase 完全转换成大写、lowercase 完全转换成小写、none 不转、capitalize 首字母转 换成大写 适用于字母
边框属性：
· border-left 左边框
· border-right 右边框
· border-top 上边框
· border-bottom 下边框
border：上 右 下 左
语法结构：
border: 线宽 线型(solid 实线 dashed 虚线(杠) dotted 虚线(点) ) 线色
例如：
border: 1px solid #00ff00
padding内部白属性：
· padding-left 左内边距
· padding-right 右内边距
· padding-top 上内边距
· padding-bottom 下内边距
注意事项：使用padding 会增加div的容量 如果设置左右方向，则需要用宽度减去设置的padding值，反之用高度减去设置的 padding值
margin外补白属性：
· margin-left 左外边距
· margin-right 右外边距
· margin-top 上外边距
· margin-bottom 下外边距
背景属性：
· background-color 背景颜色
· background-image 背景图片
· background-repeat 是否重复
重复：repeat
不重复：no-repeat
x轴方向：repeat-x
y轴方向：repeat-y
· background-position 图片定位
属性：水平方向：left、center、right
垂直方向：top、middle、bottom
定位属性：
· 绝对定位 absolute
· 相对定位 relative
· 静态定位 static(默认) 相当于没有定位
· 固定 fixed
· 层叠加 z-index
· top、left、right、bottom
（注意父层为相对子层为绝对）
布局属性：
· 浮动布局 float 属性值：left、right
· 清除浮动布局 clear 属性值：both 清除两侧浮动、left、right、none 不清除
· 是否显示/行元素修改为块元素 display 属性值：none 隐藏元素、block 行元素修改为块元素
· 超出内容隐藏 overflow
属性值：
hidden 内容会被修剪，并且其余内容是不可见的。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
· 是否显示对象 visibility
属性值：
visible 默认 可见、
hidden 不可见 、
collapse 使用表格时候隐藏一行或者一列，也可以用于表单
鼠标属性：
· cusor 属性值：default(默认)、move、pointer 小手、text、url
无序列表属性：
· list-style 属性值:none
· list-style-type 属性值：none
尺寸属性：
· width 属性值:像素、百分比
· height 属性值：像素
（关于各种属性值 这边建议亲们还是 全部背会呢 ：D