A今天学习内容

1.HTML标签的分类

块标签：（常用）div、h1-h6、p、ul，li、dl，dt，dd
特点：独占独占一行，且能设置宽高
属性：display：block

内联标签：（常用）a、span、em、strong
特点：并排显示，不能设置宽高
属性：display：line

内联块：（常用）button、img、input
特点：并排显示，且能设置宽高
属性：display：line-block

使内联元素和内联块元素水平居中的方法
一：display：block
       margin-left：auto
       margin-right：auto
二：给父级加text-align：center

例子：

1.PNG

2.css选择器

2.1 选择器的种类

①元素选择器（文档的元素就是最基本的选择器）
如：p{ },a{ },div{ }等

②class选择器
如：.test{ }等

③id选择器
如：#test{ }等

④分组选择器
如：h1/h2/h3/...,p，.class,#id{ }等

⑤后代选择器
1.div>span{ }——选取div所有子元素为span的标签
2.div  span{ }——选取div之后的所有兄弟元素
例子：

2.PNG

⑥兄弟选择器
1.div+p{ }——选取紧邻div之后的第一个兄弟元素
2.div~p{ }——选取紧邻div之后的所有兄弟元素
例子：

3.PNG

⑦属性选择器
如：div[class="test"],img[src"img/1.jpg"],img[alt="1"]等
例子：

4.PNG

⑧伪类选择器
如：div：hover{ }，input：focus{ }等

2.2 选择器的优先级排序

①元素选择器<class器<id选择器<!important
②div{ }<div.class{ }<div#id{ }<div{!imporatant}

3.伪元素

①：before——可在元素的内容前面插入新内容

②：after——可在元素的内容之后插入新内容

例子：

5.PNG

结果

6.PNG

4.如何做出一个三角形
例子：

9.PNG

图解：给一个块元素设置边框，给边框的任意一个方向设置颜色，其余三个方向设置颜色为透明
5.如何使链接打开后在title前显示小图标
例子:

8.PNG
图解：将所需的图标转换为ico格式，然后在<title>前or后插入<link>，rel输入“icon”即可

B今天掌握的内容

>1.html标签的分类（包括块标签，内联标签和内联块标签）
>2.css选择器的种类（元素选择器、class选择器、id选择器、分组选择器、兄弟选择器、后代选择器、属性选择器、伪类选择器），使用方法和优先级排序
>3.伪元素（before和after）及其使用方法
>4.利用小技巧做出三角形
>5.使链接打开后在title前显示小图标