CSS三大特性
一、层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。 层叠性主要解决样式冲突的问题
层叠性原则:
- 如果样式冲突,则遵循
就近原则
,哪个样式近 ,就执行哪个样式。
例如:
div{
background-color: black;
}
div{
background-color: orange;
}
先给div背景颜色设置成黑色,后设置成橙色。因为div离设置成橙色这个样式近,所以最终div会显示成橙色
二、继承性
子标签会继承父标签的某些样式,如文本颜色和字号( text- , font- , line-这些元素开头
的可以继承,以及color属性
)
案例:
<style>
div{
color: blueviolet;
font-size: 16px;
}
</style>
<body>
<div>
<p>我是子标签,没有设置样式,但是
父标签设置了,所以我继承后字体变大变紫了</p>
</div>
</body>
效果显示:
继承中的特殊情况——行高的继承
body {
font : 12px/1.5 Microsolft YaHei;
}
- 行高可以跟单位,也可以不跟单位
- 如果子元素没有设置行高,则会继承父元素行高为1.5
- 此时子元素行高为:当前子元素的文字大小*1.5
- body行高1.5,子元素可以根据自己文字大小自动调整行高
例如:
<style>
body{
color: blueviolet;
font: 12px/1.5 'Microsoft Himalaya';
}
div{
/* 子元素继承了父元素body的行高1.5 ,这个1.5就是当前元素文字大小font-size 的1.5倍 */
/* 所以当前div的行高就是14 * 1.5 = 21像素*/
font-size: 14px;
}
</style>
三、优先级
当同一个元素指定多个选择器
如下:
<style>
div{
color: blue;
}
.new {
color: orange;
}
</style>
<body>
<div class="new"></div>
</body>
这时就会有一个原则告诉我们,到底该选择谁,因此也就会有优先级的产生。
- 选择器相同, 则执行层叠性。
- 选择器不同,则根据
选择器权重
执行
选择器权重大小如下表所示:
选择器 | 选择器权重 |
---|---|
继承 或 * | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器 ,伪类选择器 | 0,0,1,0 |
ID选择器 | 0,1,0,0 |
行内样式 style=“ ” | 1,0,0,0 |
!important | 无穷大 |
因此在上述代码中,div
是元素选择器,.new
是类选择器。类选择器的权重大于元素选择器,所以最后显示效果为橙色。
优先级注意事项:
- 权重由4位数组成,但是不会有进位
- 等级判断从左往右,数值相等则判断下一位
- 继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
- a链接浏览器有默认指定样式,蓝色,下划线。因此给a链接的父元素body指定样式时,a不会继承。
例如:
<style>
/*父元素的权重是100*/
#father {
color: orange;
}
/*p继承的权重是0*/
p {
color: blue;
}
</style>
<body>
<div id="father">
<p>我会变蓝</p>
</div>
</body>
尽管ID选择器的权重较大,但是p继承过来的权重过来的权重是0,所以p标签会执行自己设置的样式,最终结果是蓝色。
/所以以后我们看标签到底执行那个样式,就先看这个标签有没有直接被选出来/
权重叠加
如果是复合选择器,则会有权重叠加,需要计算权重
<style>
/*ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
ul li {
color: blue;
}
/*li 的权重是0,0,0,1*/
li {
color: orange;
}
/*.new li 的权重是0,0,1,0 + 0,0,0,0,1 = 0,0,1,1*/
.new li {
color: pink;
}
</style>
<body>
<div class="new">
<ul>
<li>我会变粉色</li>
<li>我会变粉色</li>
</ul>
</div>
</body>
注意:权重会叠加,但永远不会有进位
CSS元素显示模式
什么是元素显示模式?
元素显示模式就是 元素(标签)以什么样的方式显示
比如div
,它的显示方式就是自己独占一行,而span
标签,一行却可以放多个。
在网页中有许许多多的标签,不同的地方会用到不同的标签,了解它们的特点能有利帮助我们布局。
一、块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、 <ol>、<li>
等 ,其中 <div>
标签是最典型的块元素。
特点:
- 自己独占一行,高度和宽度、外边距以及内边距都可以控制
- 宽度默认是父级宽度的100%
- 是一个容器或者盒子,里面可以放块级元素或者行内元素
- 文字类的元素内不能使用块级元素。
<p>、<h1>~<h6>
等都属于文字类块级类标签。
<p> <div>不可以把我放p里面</div> </p> /*此种方法是错误的*/
二、行内元素
常见的行内元素有<a>、<strong>、 <b>、<em>、<i>、 <del>、 <ins>、 <span>
等 ,其中 <span>
标签是最典型的行内元素。
特点:
- 一行可以显示多个
- 不能直接设置宽、高
- 默认宽度就是它的文本宽度
- 行内元素内只能放文本或其他行内元素
- 链接里面不能再放链接,但是行内元素
<a>
链接里面可以放块元素,这是个特殊情况。
三、行内块元素
行内元素中有一些特殊标签,它们同时具有块元素和行内元素特点,比如<img>、<input>、<td>
等
特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
- 默认宽度就是它本身内容的宽度(行内元素特点)
- 高度,行高、外边距以及内边距都可以控制(块元素特点)
以input
为例:
<style>
input {
width: 100px;
height: 50px;
}
</style>
<body>
<input type='text'>
<input type='text'>
</body>
显示效果:
四、元素显示模式转换
在一些情况下,一种模式的元素需要另外一种模式的元素的特性,这时我们就需要转换元素显示模式。比如我们想要给行内元素<span>
设置宽和高,这就需要把<span>
转换成块元素。
- 转换为块元素
display: block;
<style>
a {
display: block;/*转换为块元素*/
width: 200px;
background-color: palevioletred;
}
</style>
<body>
<a href="#">我是行内元素,本来不能设置高度</a>
<a href="#">我是行内元素,但是转换成了块元素</a>
</body>
效果显示:
2. 转换为行内元素 diaplay: inline;
<style>
div {
display: inline; /*将div转换为行内元素*/
}
</style>
3.转换为行内块元素 display: inline-block
<style>
span {
display: inline-block; /*将span标签转换为行内块元素,可设置高度宽度*/
width: 2000px;
height: 50px;
}
</style>