Day02

A：今天的学习内容

一、如何给内联和内联块水平居中

给父级或祖父级加（ text-align：center ）仅仅对块元素使用

二、选择器的分类

1.元素选择器、class选择器、id选择器、伪类选择器（p:hover）

元素选择器 < class选择器 < id选择器
p:hover{} 针对块标签

2.分组选择器

3.后代选择器（" > "，" 空格 "）

.head>p{} 给选中父级之后的子元素里的P
.head p{} 给选中父级之后所有的p元素

4.兄弟选择器（“ + ”，“ ~ ”）

5.属性选择器

6.伪类选择器（input:foucus）

input:foucus {} 针对内联块

7.伪元素

为什么要添加伪元素，因为这个元素是虚构的。

三、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：练习

day02.png