A：今天的学习内容
一、如何给内联和内联块水平居中
给父级或祖父级加（ text-align：center ）仅仅对块元素使用
二、选择器的分类
1.元素选择器、class选择器、id选择器、伪类选择器（p:hover）
元素选择器 < class选择器 < id选择器
p:hover{} 针对块标签
<style>
p.one{color: blue;} /*变色*/
p#two{color: pink;} /*变色*/
p:hover{color: aqua;} /*不变色*/
p#two:hover{color:yellow } /*变色*/
</style>
2.分组选择器
<style>
p,div,h1,li{color: blue} /*需要变一样色的元素用逗号分隔*/
</style>
3.后代选择器（" > "，" 空格 "）
<style>
.head>p{ color: blue;}
.head p{ color: coral;}
</style>
.head>p{} 给选中父级之后的子元素里的P
.head p{} 给选中父级之后所有的p元素
4.兄弟选择器（“ + ”，“ ~ ”）
<style>
div+p{color:pink;}
/*给div之后紧邻的第一个p元素*/
div~p{color: blue;}
/*给div之后的所有p元素*/
</style>
5.属性选择器
<style>
p[class="one"]{color: blue;}
</style>
6.伪类选择器（input:foucus）
input:foucus {} 针对内联块
<style>
input:focus{
background: coral;
border: 4px solid blue;
}
</style>
7.伪元素
<style>
div:before{
content: "我是前面";
display: table;
}
div:after{
content: "我是后面";
display: table;
}
</style>
为什么要添加伪元素，因为这个元素是虚构的。
三、CSS的基本样式
1.背景
①颜色，（background-color）
②图片，（background-image）
③吸附，（background-attachment：fixed / scroll ）（固定 / 拖动是默认）
④重复，（background-repeat：no-repeat）
⑤位置，（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）
④字体粗细，（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.表格
①列（colspan：“数字”）所跨的列
②行（rowspan：“数字”）所跨的行
【折叠单一边框：border-collapse：collapse】
8.轮廓
p{outline：1px solid pink} 用于需要突出的元素的部分
透明度（opacity：值）
B：学会什么
1.如何给内联和内联块居中
2.选择器的分类
3.css的基本样式
D：练习
