1.CSS修饰文本
text-align 文本对齐，水平对齐方式
text-decoration:line-through 删除线
underline 下划线
none 去掉线
font-style:italic 斜体字
letter-spacing 字符之间的距离
（word-spacing 单词之间的距离）
line-height 行距
text-indent 缩进（1em：当前字体尺寸）
.p1{
color: #0000FF;
text-align: center;
text-indent: 2em;
font-size: 20px;
font-family: 隶书;
text-decoration: line-through;
}
.p2{
color: #7FFF00;
text-decoration: underline;
text-indent: 2em;
line-height: 20px;
font-family: 楷体;
}
.p3{
color: #8A2BE2;
font-style: italic;
font-weight: bold;
letter-spacing: 10px;
text-indent: 2em;
}
a{
text-decoration: none;
}
2.CSS背景
background-color 背景颜色
background-image 背景图片背景图片优先级高于背景颜色，
背景图片不占标签空间
background-repeat 背景图片（重复）no-repeat 不重复
background-size 背景尺寸
background-position 背景位置 水平在前，垂直在后
p{
width: 800px;
height: 1000px;
background-color: #00FFFF;
background-image: url(./img/logo.jpg);
background-size: 400px;
background-repeat: no-repeat;
background-position: left top;
}
3.CSS列表
list-style-type:circle 圆圈 none 去掉符号
list-style-image 图标
list-style-position 图标位置 默认为outside
简写
list-style 值得顺序 无序
.u1>li{
text-align: center;
list-style-type: none;
list-style-image: url(./img/logo.jpg);
list-style-position: inside;
}
ul>li{
text-align: right;
list-style: circle outside;
}
4.CSS表格
border-collapse:collapse 边框收缩 使用单一边框
5.伪类
伪类：就是css为处在不同状态（例如鼠标移动到标签上，鼠标点击标签）
下的标签设置样式
link{}：访问前
visited{}：访问后
hover{}：鼠标放上
active{}：点击
focus{}：输入框获得焦点，针对可以输入内容的标签
.tab{
width: 100px;
height: 600px;
border-collapse: collapse;
}
6.透明度
opacity(0-1)
img{
opacity: 0.2;
}
img:hover{
opacity: 0.5;
}
img:active{
opacity: 1;
}
7.标签分类
（1）块级标签
无论内容多少，都会独自占据一行
默认宽：与父级一致 默认高：0/与内容高度一致
还可以通过width和height设置标签宽高
（2）行级标签
只占自身大小的标签，不会占一行
即使设置宽高也是无效的
（3）行级块标签
可以设置大小，不会占一行
（4）div标签
是一个纯净的块级标签，没有任何附加样式，
可以包含任何标签，主要用来网页布局
（5）span标签
是一个纯净的行级标签，主要用来选中文档中的文字
一般使用块级标签包含行级标签 a可以包含任何标签，除去a本身 p标签不能包含任何块级标签
<h2 style="width: 400px;">二级标题标签
</h2>
aaa
<a href="" style="width: 200px;">行级标签
</a>
bbbb
<img src="img/3.jpg" style="width: 200px;"/>
cccc
8.display
display:可以改变标签的类型
inline 设置标签为行级标签
block 设置标签为块级标签
inline-block 设置标签为行级块标签
none 隐藏标签，让标签在网页上消失，不占用网页空间
<h4 style="display: inline;">四级标题标签
</h4>aaaa
<a href="" style="display: block;">百度
</a><a href="">百度
</a>
<font style="display: inline-block; width: 400px; height: 200px;" >这是一句话
</font>bbbbbb
<img src="./img/壁纸.jpg" width="200px" style="display: none;"/>
9.盒子模型
（1）内容区（content）
标签中的内容都存储在内容区中
width、height只是设置了内容区的大小，不是标签的大小，
只适用于块级和行级块标签，如果标签的内边距，边框
都没有，那么内容区的大小就是标签的大小
（2）内边距（padding）
就是内容区到边框的距离，会影响标签的大小
padding-left/right/top/bottom
（3）边框（border）
标签可见框的最外部，也是计算在标签大小内的
border-radius 圆角边框
标签实际大小=内容区+内边距+边框
（4）外边距（margin）
标签边框与周围标签相距的空间
上下边距需要给具体的值
左右外边距设置为auto时，外边距最大化
div{
width: 180px;
height: 180px;
background-color: #7FFF00;
/* padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-top: 5px; */
padding:10px;
/* padding:5px 10px; 上下 左右 */
/* padding: 5px 10px 15px 20px; 上 右 下 左 */
border: #00FFFF 5px solid;
border-radius: 10px;
}
input{
width:400px ;
height: 50px;
outline: none;
border: red 2px solid;
font-size: 20px;
font-weight: 200;
color: #696969;
border-radius: 10px;
}
input:hover{
border: #7FFF00 2px solid;
}
.div1{
background-color: #00FFFF;
width: 200px;
height: 100px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
}
.div2{
background-color: #7FFF00;
width: 200px;
height: 100px;
margin-top: 50px;
}
10.清楚浏览器的默认样式
*{
margin:0;
padding:0;
}
