day02|day02 标签的分类 + 选择器 + 选择器优先排序
1.HTML标签的分类
1.1 块标签
标签名称 : div(盒子容器),p(段落),h1~h6(标题),ul,li（不排序目录),dl,dt,dd(定义目录)
标签特点 : 独占一行,可以设置width和height
默认显示 : display:block
【day02|day02 标签的分类 + 选择器 + 选择器优先排序】1.2 内联标签
标签名称 : a(超链接),span(普通字),em(字体倾斜),strong(字体加粗)
标签特点 : 并列显示,不能设置width和height,不能设置margin-top,margin-bottom
默认显示 : display:inline
1.3内联块标签
标签名称 : input(输入框),img(图片),button(按钮)
标签特点 : 并列显示,可以设置width和height
默认显示 : display:inline-block
1.4 如何让内联元素和内联块元素水平居中
块标签可以使用以下方法水平居中:
margin-left:auto;
margin-right:auto;
内联标签(display:inline)以及内联块标签(display:inline-block)
可以通过改变默认显示方法 display:block 改变为块标签后再使用 margin-left:auto;
margin-right:auto;
实现水平居中的效果;
以及给父级加 text-align:center;
实现水平居中,如下:
div{
width: 300px;
height: 300px;
background-color: pink;
text-align: center;
/*父级中加入此语句能使 内联标签以及内联块标签 达到居中的效果*/
margin-left: auto;
margin-right: auto;
/*以上为块标签居中*/
}
2.CSS选择器 选择你所要改变元素的一种方式
2.1分类
(1) css元素选择器 (文档的元素就是最基本的选择器)
p{color: white}
(2 )class选择器
.test{color: white}
(3) id选择器
#one{color: white}
(4) 分组选择器
p,h4{color: white}
(5) 后代选择器
div>p{color: white} 选择div子目录下所有的p元素,不选择孙目录的p元素
div p{color: white} 选择div目录下面的所有p元素
(6) 兄弟选择器
div+p{color: white} 选取div下面相邻的第一个元素p,如果不是p则不选择
div~p{color: white} 选取div下面的所有p元素
(7) 伪类选择器
p:hover{color:red;
} 鼠标移动到p段落时 p文字颜色变成红色
input:focus{background-color:red;
} 焦点控制,当鼠标点击输入框时,输入框背景颜色变成红色
(8) 伪元素
":before" 伪元素可以在元素的内容前面插入新内容
p:before{
content:''
}
":after" 伪元素可以在元素的内容之后插入新内容。
p:after{
content:''
}
(9) 属性选择
div[class='test']{}
hello world
hello world
2.2 选择器的优先级排序
元素选择器
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 热闹中的孤独
- JAVA（抽象类与接口的区别&重载与重写&内存泄漏）
- 放屁有这三个特征的，请注意啦！这说明你的身体毒素太多
- 一个人的旅行，三亚
- 布丽吉特，人生绝对的赢家
- 慢慢的美丽
- 尽力
- 一个小故事，我的思考。
- 家乡的那条小河
- 《真与假的困惑》???|《真与假的困惑》??? ——致良知是一种伟大的力量