A：今天学的内容
一、标签的分类
1、块标签（div、p、h1~h6、ul、li、dl、dt、dd）
特点：1.独占一行。 2.可以设置宽高。
2、内联标签（a、span、i、em、syrong）
特点：1.并排显示。 2.不可以设置宽高。 3.不可以设置margin-top、margin-bottom
3、内联块（img、input、button）
特点：1.并排显示。 2.可以设置宽高。
二、水平居中
1、块元素的居中（margin-left: auto; margin-right:auto;）
margin-left: auto; margin-right:auto;只针对块元素。
如果要给内联和内联块居中，
（display: block;）块元素
（display: inline;）内联元素
（display: inline-block;）内联块元素
2、内联和内联块的居中（text-align: center;）
针对内联和内联块有效，只能添加给父级或祖父级，但父级或祖父级必须是块元素。
三、选择器的分类
1、元素选择器（例如：p{ }）
2、class选择器（例如：.one{}）
3、id选择器（例如：#two）
以上三种的优先排序（元素选择器<class选择器<id选择器<！important）
例如：
<style>
p{color: pink !important;}
.one{color: blue;}
#two{color: red;}
</style>
4、伪类选择器
1.针对块元素（鼠标经过）
<style>
p:hover{
color: pink;
}
</style>
2.针对内联块（鼠标点击）
<style>
input:focus{
background-color: aqua;
}
</style>
5、分组选择器（用逗号隔开）
<style>
div,h1,p,ul,dl{
color: pink;
}
</style>
6、后代选择器（“>”、“空格”）
<style>
.head>p{ color: blue;} /*给选中父级之后的第一代子元素的P*/
.head p{ color: coral;} /*给选中父级之后所有的p元素*/
</style>
7、兄弟选择器（“+”、“~”）（必须是兄弟关系）
<style>
div+p{
color: pink; /*给div之后紧邻的第一个p元素*/
}
div~p{
color: burlywood; /*给div之后的所有p元素*/
}
</style>
8、属性选择器（p[class=“”]{}）
<style>
p[class="one"]{
color: red;
}
</style>
9、伪元素
<style>
p:before{
content: "前面";
display:block ;
}
p:after{
content: "后面";
display: block;
}
/*为什么要叫伪元素，因为这个元素是自定义的*/
</style>
四、css的基本样式
1、背景
①颜色，（background-color：red;）
②图片，（background-image：url（“”））（url是资源定位）
③吸附，（background-attachment：fixed / scroll ）（固定 / 拖动是默认）
④重复，（background-repeat：no-repeat / repeat-x / repeat-y）
⑤位置，（background-position : x y）
⑥大小，（background-size：100% 100%）
（background-size：cover 背景比图片大的情况下使用）
【简写 background：color image no-repeat x y】
2、文本
①颜色，（color：red / #333 / rgb(255,0,0)）
②文本对齐，（text-align：right / left / center）
③文本修饰，（text-decoration：underline / overline / line-through）（下划线，上划线，删除线）
④文本转换，（text-transfrom：uppercase / lowercase / capitalize）（大写，小写，首字母大写）
⑤文本缩进，（text-inden：20px；）
3、字体
①字体类型，（font-family：）
②字体大小，（font-size：）
③字体样式，（font-style：normal / italic）（正常，斜体）
④字体粗细，（font-weight：normal / bold / lighter）（正常，粗体，细）
4、链接
①a：link（未被访问时）
②a：visited（被访问时）
③a：hover（鼠标放在上面时）
④a：active（鼠标点击时）
【注：必须按照依次顺序】
5、css样式列表（针对ul）
①样式（list-style：none）消除
②类型（list-style-type：circle / square）(切换成圆形 / 正方形)
③图片（list-style-image：url（“ ”））切换成图片
6、边框
①宽度（border-width）
②样式（border-style）
③颜色（border-color）
【简写：border：width style color】
【单独设置各边：border-top-style：dotted（虚线）/ solid（实线）】
7、table表格
①列（colspan：“数字”）所跨的列
②行（rowspan：“数字”）所跨的行
③间隙（加 <tr class="one"></tr>）间隙的表格
<table>
<tr>
<td>京东</td><td>iphone</td>
</tr>
<tr class="one"></tr>
<tr>
<td>天猫</td><td>小米手机</td>
</tr>
</table>
【折叠单一边框：border-collapse：collapse】
8、轮廓（outline：none）
<style>
input{
outline: none; /*去掉轮廓边框*/
}
</style>
9、透明度（opacity：值）
<style>
div{
width: 200px;
height: 200px;
background: rgba(255,0,0,.5);
opacity: 0.2;
/*透明度*/
/*visibility: inherit;*/
/*可见度*/
}
</style>
B：学会了什么
1、标签的分类
