1.Css 层叠样式表
Html：网页骨架
css ：用来修饰美化页面
2.怎么添加样式？（三种添加样式的方式）
l行内样式： 把样式写在标签里，格式： <h1 style="color: red; font-size:46px; ">我的标题</h1> style=“属性名称：属性值；属性名称2：属性值;…” 注意：最后一个;可以省略，建议不要省略 内部样式： 在head标签里添加style标签 <head> <style type="text/css"> h2{ color: red; } </style> </head> 外部样式： 新建一个后缀名为css的文件 在css文件编写样式 在html文件通过link引入css文件 <link rel="stylesheet" type="text/css" href="demo3.css">
3.三种样式的优先级？
!important>行内>内部>外部
4.一些常用的样式
color 颜色
font-size:字体大小
width 宽
height 高
border 边框
1px solid red
线的粗细 线的类型 线的颜色
font-family: "楷体"; 设置字体类型
font-weight: bolder; 设置字体加粗
font-style: italic; 设置字体斜体
text-decoration: underline;设置下滑线
5.div和span
div 块级标签，表示一块区域，用来布局
span 行级标签，范围标签
注意:块级标签若没有设置width,会占满一行
6.样式的继承
子元素会继承父元素的样式，比如： <h2> 初相遇 <span>文/席慕容</span> </h2> 对h2设置color为红色，span的颜色也为红色。 span是h2的子元素，红色是继承h2的。 继承的样式的优先级是比较低的。
7.css选择器
标签选择器 标签名{ 属性名：属性值；… } 比如： p{
color:red;
} 对页面上所有的p设置了颜色。 id选择器 #id名{属性名：属性值;} id是唯一的,在一个页面中不要出现相同的id名 比如： #my{} 只对id名为my的元素设置样式 类选择器 .class名{属性名：属性值;..} 类名是可以重复的 比如： .cla{} 会对页面上所有设置了class为cla的元素设置样式 子代选择器 <div id="my"> 111111 <div> <span>孙代span</span> </div> <span>子代span</span> </div> #my>span{ } 对#my中子代的span设置样式 中间用>连接 后代选择器 #my span{ } 对#my里面所有的span设置样式 中间用空格间隔 群组选择器（组合选择器） #myP,div,.cla { color: red; } Id为myP,所有的div, 所有class为cla的元素都设置了颜色为红色 多个选择器的组合，每个选择器匹配到的元素都设置相同的样式 伪类选择器 选择器:hover { } 鼠标悬浮状态下的样式 相邻选择器 选择器+选择器{} #myDiv+p{} 匹配与myDiv相邻的p元素 注意：只能匹配到myDiv后的p。myDiv前的p不匹配 通配符选择器 *{ } 匹配页面中所有的元素，也包含body
优先级：
Id选择器>类选择器>标签选择器
8.命名规范
名字中由数字，字母，_ ；
不能以数字开头
名字尽量取得有意义
驼峰命名法 myDiv userName
my_div user_name
9. 一些常用样式
text-decoration
underline 下划线
overline 上划线
line-through 删除线
text-align 设置文本水平位置
center 水平居中
left 左
right 右
text-indent 设置文本缩进
font-weight: 设置加粗
bold 加粗
normal 不加粗
line-height 行高 ,行高设置成height的值，垂直居中
background-color: red; 设置背景颜色
border:边框
1px solid red;
border-left:
vertical-align 设置对齐方式（一般设置在行内块元素）
middle 中对齐
top 顶部对齐
bottom 底部对齐
边框圆角 border-radius
css动画 转换：transform 过渡: transition
10.背景样式
background-color：背景颜色
background-image: 背景图片
background-repeat ： 平铺方式
repeat-x 在x轴上平铺
repeat-y 在y轴上平铺
no-repeat 不平铺
background-position:背景图片位置（背景偏移）
background-position: -100px 50px;
第一个值是水平方向的位置
+：向右
-: 向左
第二个值是垂直方向的位置
+：向下
-：向上
background-size:设置背景尺寸
cursor: pointer 设置手型
11.盒子模型
margin:外边距
本区域（设置了margin的区域）与其他区域之间的距离
margin-left 左外边距
margin-right 右外边距
margin-top 上…
margin-bottom 下…
margin:10px; 上下左右 都是10px
margin:10px 20px 30px 40px;
上 右 下 左
margin:10px 20px;
上下 左右
margin:0px auto; 可设置区域水平居中
padding：内边距
本区域边框与本区域内容之间的距离
设置padding会撑大区域。
标准文档流：
页面元素是从左到右，从上到下排列
12.浮动
左浮动 float:left;
右浮动 float:right;
浮动的元素是脱离了标准文档流
13.隐藏显示
display
block 显示
none 隐藏，不保留位置
visibility
visible 显示
hidden 隐藏，会保留位置
14.行级元素、块级元素、行内块的转换
转块级：display:block
转行级：display:inline
转行内块：display:inline-block
15.定位position
默认定位： position:static
默认就是，不需要设置
固定定位： position:fixed
固定定位，固定在窗口的某个位置
相对定位： position:relative
相对于自身原来的位置定位，后面的元素位置不会受到影响
绝对定位： position: absolute
后面的元素位置会受到影响
相对于设置了position（除了默认定位）的父元素定位，
如果父元素没有设置position,继续找爷爷元素，看爷爷元素是否设置position,如果设置了，
就相对于爷爷元素定位，依次类推，如果所有的父元素都没有设置position,那就相对于body定位。
16.清除浮动
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左右浮动
17.溢出处理 overflow
overflow:hidden 隐藏溢出部分
特殊用法：可以用来撑开区域
overflow:scroll 加滚动条
overflow:auto 自动，有溢出加滚动条，没溢出不加