1.1概念：
层叠：多个样式可以作用于同一个html的元素上，同时生效。
1.2优点：
-
功能强大；
-
将内容的展示和样式的控制分离，降低耦合度（解耦），让分工协作更容易，提高开发效率。
1.3CSS的使用：CSS与html的结合方式
-
内联样式；
在标签内部使用style属性指定css代码。
-
内部样式；
在head标签内，定义style标签，style标签的标签体内容就是css代码。
-
外部样式；
①.定义css资源文件；
②.在head标签内，定义link标签，引入外部的资源文件
ps：1,2,3种方式作用范围越来越大；第一种方式不建议使用，推荐使用第三种方式
1.4css语法：
1.4.1格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
·······
}
选择器：筛选具有相似特征的元素，每一对属性需要使用" ; "隔开，最后一对属性可以不加，但一般都会加上。
1.5选择器：
1.5.1基本选择器
-
id选择器：选择具体的id属性值的元素,建议一个html中只有一个id属性值
语法:#id属性值{ }
1 #div1{ 2 color:green; 3 }ps：id 选择器优先级高于元素选择器。
-
元素选择器：选择具有相同标签的元素
语法：标签名称{ }
1 div1{ 2 color:green; 3 } -
类选择器：选择具有相同class属性值的元素
语法：.class{ }
1 .class{ 2 color:green; 3 }ps：类选择器优先级高于元素选择器。
1.5.2扩展选择器
-
全局选择器；
语法：*{ }
1 *{ } -
并集选择器：选择器1和选择器2的元素
语法：选择器1，选择器2{ }
1 div,p{ 2 color:green; 3 } -
子选择器：筛选选择器1元素下的选择器2的元素
语法：选择器1 （空格）选择器2{ }
1 div p{ 2 color:green; 3 } -
父选择器：筛选选择器2元素的选择器1
语法：选择器1>选择器2{ }
1 div>p{ 2 color:green; 3 } -
属性选择器：选择元素名称，属性名=属性值的元素，一般用于input多一点
语法：元素名称[属性名="属性值"]{ }
1 input[type="text"]{ 2 boder:1px solid red； 3 } -
伪类选择器：选择一些元素具有的状态
语法：元素：状态{ }
1 <a herf="#"></a> 2 3 a:link{ 4 初始化的状态（鼠标没有放在上面时的状态）； 5 } 6 7 a:hover{ 8 鼠标悬停时的状态（鼠标放在上面没点击时的状态）； 9 } 10 11 a:active{ 12 正在被访问时的状态（鼠标点在上面不松手时的状态）； 13 } 14 15 a:visited{ 16 被访问过的状态（鼠标点击过后的状态）； 17 }
1.6属性：
-
文本、字体
font-size：字体大小；
font-family：字体系列（楷体，宋体等）
color：文本颜色；
text-align：对齐方式；
line-height：行高
-
背景
background：设置背景，复合属性
1 { 2 background:url("img/1.jpg")//设置背景图 no-repeat//背景图片不重复 center//图片全局居中 3 } -
边框
border：设置边框，复合属性；
1 {border:1px//边框大小像素为1 solid//边框为实线 red//边框颜色为红色} -
尺寸
height：设置高度；
width：设置宽度；
1 { 2 width：200px；//宽度为200像素 3 height：200px；//高度为200像素 4 } -
盒子模型
margin：外边距；
padding：内边距；默认情况下内边距会影响整个盒子的大小，使用box-sizing设置盒子属性，使得width和height就是盒子的最终大小；
float：浮动
left：左浮动，使得盒子始终在左边；
right：右浮动，使得盒子始终在右边。