“本部分记录了CSS进阶的内容”
目录
1.选择器
(1)后代
后代包括儿子、孙子、重孙子...... 但CSS选择器中最好不要超过三级。
使用空格选择父元素中的其他元素,两个选择器中间用空格隔开,结构如下:
<!-- 这是.html -->
<div>
<p><a href="#">a是div的后代孙子</a>
p是div的后代儿子</p>
</div>
/*这是.css*/
div p {
color : red;
}
<p>是<div>的后代儿子,<a>是<div>的后代孙子。
(2)子代
使用大于号">"选择父元素中的子元素,也就是之选儿子这一代的元素,结构如下:
<!-- 这是.html -->
<div>
<a href="#">这是div的大儿子</a>
<p>这是div的二儿子
<a href="#">这是div的孙子</a>
</p>
</div>
/*这是.css */
div>a {
color : red;
}
只选中了<div>的儿子<a>,没有选中它的孙子<a>。
(3)并集
使用逗号","选择多个元素,同时设置它们的样式,并且它的每个选择器也可是复合型式(就像上边的后代、自带选择器),结构如下:
<!-- 这是.html -->
<p>这是一个p</p>
<a href="#">这是一个a</a>
/*这是.css*/
p,a {
color : red;
}
这就可以同时设置<p>和<a>的样式。
(4)交集
直接上例子:
<!-- 这是.html -->
<p>这是一个p</p>
<p class="box">这是一个p的box</p>
<a href="#" class="box">这是一个a的box</a>
/*这是.css*/
p.box {
color : red;
}
选中了既是<p>元素又有class属性的p.box。
(5)hover伪类
当鼠标悬停在该元素上时,元素改变其状态,结构如下:
<!-- 这是.html -->
<p>伪类选择器</p>
/*这是.css*/
p:hover {
color:red;
}
当鼠标悬停在“伪类选择器”上时,它的颜色就会变为红色。
2.背景
(1)背景色
属性名:background-color
属性值:关键字、rgb、rgba、十六进制......
注意:默认不设置是透明的。
示例:
/*这是.css*/
div {
background-color:red;
}
(2)背景图
属性名:background-image
属性值:url("图片的路径")
注意:url中可以省略引号;背景图默认是水平竖直平铺的;背景图仅仅给盒子装饰,而不能撑开盒子。
示例:
/*这是.css*/
div {
background-image:url("./firefox.png");
}
(3)背景平铺
属性名:background-repeat
属性值 | 效果 |
repeat | 默认水平竖直平铺 |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着竖直方向(y轴)平铺 |
示例:
/*这是.css*/
div {
background-image:url("./firefox.png");
background-repeat:no-repeat;
}
(4)背景位置
结构:background-position:水平方向位置 竖直方向位置
属性名:background-position
属性值 | 方位名词 | 水平方向 | left |
center | |||
right | |||
竖直方向 | top | ||
center | |||
bottom | |||
数字+px(坐标) | 坐标系 | 原点(0,0)(盒子的左上角) | |
x轴(水平向右) | |||
y轴(水平向左) |
注意:方位名词和坐标值可以混用,第一个代表水平,第二个代表垂直。
示例:
<!-- 这是.css -->
div.one {
background-position:center center;
}
div.two {
background-position:50px 50px;
}
(5)background
与font相同,background也可以复合写,其中的内容也可以省略,并且当有特殊需要单独写时,要写在复合写的下边;
结构:background:color image repeat position;
与font不同的是,background的复合写不需要注意顺序。
(6)背景图和img的区别
img:直接写img标签即可,不需要设置宽高,默认原尺寸;
background:需要设置div的宽高,因为图片只起到装饰作用,不能将div撑开。
一般来说,重要的图片使用img,不那么重要的使用background。
3.显示模式
(1)块级元素
代表元素:div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......
特点:
- 独占一行(一行只能显示一个);
- 宽度默认时父元素的宽度,高度默认由内容撑开;
- 可以设置宽高。
(2)行内元素
代表标签:a、spar、b、u、i、s、strong、ins、em、del......
特点:
- 一行可以显示多个;
- 宽度和高度默认由内容撑开;
- 不可以设置宽高。
(3)行内块
代表标签:input、textarea、button、select......
特点:
- 一行可以显示多个;
- 可以设置宽高。
(4)转换
改变元素默认的显示特点,让元素复合布局要求;
属性 | 效果 | 使用频率 |
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 较少 |
示例:将块级元素修改为行内块
/*这是.css*/
div {
display:inline-block;
}
如此就可以在一行内使用多个div。
(5)嵌套规范
- 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等; but:<p>元素中不要嵌套<div>、<p>、<h>等块级元素
- <a>元素内部可以嵌套任何元素。 but:<a>元素中不可以嵌套<a>元素
4.特性
(1)继承性
特性:子元素默认继承父元素的样式
常见的可以继承的属性(文字控制属性都可以继承)
- color
- font的四个属性
- text-indent、text-align
- line-height
- ......
注意:可以通过调试工具判断是否可以继承;当元素有默认属性时,继承性仍然生效,但是优先显示默认属性。
(2)层叠性
特性:
- 给同一个元素设置不同的样式→此时样式会层层叠加→会共同作用在元素上;
- 给同一个元素设置相同的样式→此时样式会层层覆盖→写在最后的样式会作用在元素上。
注意:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果。
5.补充
特性.优先级
特性:不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低的选择器样式。
优先级公式:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important
注意:
- !important写在属性值的后面,分号的前面
- !important不能提升继承的优先级,继承的优先级永远最低
- 实际开发不建议使用!important
对于复合选择器,需要通过权重叠加计算来判断最终哪个选择器优先级最高;
在复合选择器中:
(0,0,0,0)→(行内样式个数,id选择器个数,类选择器个数,标签选择器个数)
从左到右挨个比较大小,优先选择大的。