1.CSS（Cascading Style Sheets : 层叠样式表）作用是美化HTML页面，将页面的HTML（决定骨架）和美化进行分离
2.在一个style标签中,去编写CSS内容,最好将style标签写在head标签中
<style> 选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style>
3.CSS选择器: 帮助我们找到我们要修饰的标签或者元素
4.CSS中常用的选择器：①元素选择器 ②ID选择器 ③类选择器
5.元素选择器
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
6.ID选择器（以#号开头 ID在整个页面中必须是唯一的）
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
7.类选择器（以 . 开头 ）
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
8.CSS的三种引入方式
①外部样式: 通过link标签引入一个外部的css文件
②内部样式: 直接在style标签内编写CSS代码
③行内样式: 直接在标签中添加一个style属性, 编写CSS样式（style中的属性用分号结尾）
9.<link></link>标签（只能存在于 head 部分，不过它可出现任何次数）的常用属性
①rel（规定当前文档与被链接文档之间的关系，链接文档为CSS时值是stylesheet）
②href(要链接的文件的位置)
10.CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间。浮动的块会随着浏览器窗口大小的改变而改变位置
11.float属性（浮动）的值：①left(左侧浮动) ②right（右侧浮动）
12.clear属性（清除浮动）的值：①both ②left ③right
13.浮动块的上一个块如果也是浮动块，那么两个浮动块会排到一行（如果一行能排的下的话，排不下就会到下一行）；浮动块的上一个块是非浮动块，那么浮动块会排到它的下一行，非浮动块的上一行的块必须是顶部或者其他非浮动块（默认没使用clear）
14.clear只影响块自己，不会影响其他块，可以理解为只允许换自己的行（由此导致clear部分时候会无效），无论浮动块还是非浮动块，都可以使用clear
15.CSS中的常用属性
①color(常用来改字体颜色)
②font-size(字体大小)
③background-color(常用来改div块的底色) background（背景图片） 使用举例: background: url(文件路径)
④border-width（边框宽度） border-style（边框风格） border-color(边框颜色) 可简写，例如:border: 1px solid red; solid:固体，这里指实线
⑤text-decoration（文字装饰，值为none可以去除下划线）
⑥text-align 值为center时可以使文本水平居中
⑦line-height（行高） 利用line-height和height相等可以使文字垂直居中
⑧padding(内边距) padding-top padding-right padding-bottom padding-left
/*简单写法*/
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
⑨margin(外边距) margin-top margin-right margin-bottom margin-left 简单写法如padding
⑩position: absolute top: 控制距离顶部的位置 left: 控制距离左边的位置 注意：这三个属性必须一起用才能进行绝对定位
16.选择器的优先级（精度越大，优先级越高） 行内样式 > ID选择器 > 类选择器 > 元素选择器 注意：在属性的值冲突时才会比较优先级
17.被多个同种选择器同时选中，遵循就近原则:（哪个离得近,就选用哪个的样式） class中可以写多个（！） 例子：<div class="first second">...</div>
18.选择器分组: 选择器1,选择器2，...，选择器n{ 属性的名称:属性的值...}
19.属性选择器（方括号中属性的值可以省去）
元素的名称[属性名称1='属性的值1'][属性名称2='属性的值2']...{
属性名称：属性的值;
...
}
20.后代选择器（所有后代）
元素名称 子元素名称{
属性名称1:属性值1;
...
}
21.子元素选择器（只选中儿子）
元素名称>子元素名称{
属性名称1:属性值1;
...
}
22.伪类选择器（几乎只与<a></a>标签使用）
a:link{color: blue;} /*未点击*/
a:visited{color: red;} /*已点击*/
a:hover{color: yellow;} /*鼠标放在链接上但未点击*/
a:active{color: green;} /*鼠标点击但未松开*/
23.CSS的盒子模型: 万物皆盒子（借助padding属性和margin属性）
24.CSS绝对定位借助position,top,left三个属性来完成