视频资源：​​https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425​​

视频记录 127-135

HTML5+CSS3 学习笔记 05_microsoft

<style>
.nav a {
    display: inline-block;
    width: 120px;
    height: 58px;
    background-color: pink;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 58px;
    /* 去除链接下划线 */
    text-decoration: none;
    /* 文字颜色 */
    color: #fff;
}
.nav .bg1 {
    background: url(img/img1) no-repeat;
}
.nav .bg1:hover {
    background-color: pink;
}
.nav .bg2 {
    background: url(img/img2) no-repeat;
}
.nav .bg2:hover {
    background-color: plum;
}
</style>

<div class="nav">
    <a href="#" class="bg1">五彩导航</a>
    <a href="#" class="bg2">五彩导航</a>
    <a href="#" class="bg3">五彩导航</a>
    <a href="#">五彩导航</a>
    <a href="#">五彩导航</a>
</div>

CSS三大特性

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。

层叠性原则

  • 遵循就近原则，哪个样式距离结构近，就执行哪个样式。
  • 样式不冲突，不会层叠。
<style>
div {
    color: plum;
}
div {
    color: pink;
}
</style>

<div>我要飞翔</div>

# pink距离div近，则颜色为pink。

<style>
div {
    color: plum;
    font: 12px;
}
div {
    color: pink;
}
</style>

<div>我要飞翔</div>

# 我要飞翔颜色为pink，字体大小为12px。

1.2 继承性

子标签会继承父标签的某些样式，比如字体和颜色。简化代码，降低CSS复杂性。

某些样式：text-,font-,line-开头的元素，以及color属性。

<style>
div {
    color: plum;
    font: 12px;
}
</style>

<div>
    <p>我要飞翔</p> // Inherited from div
</div>

# 我要飞翔颜色为plum，字体大小为12px。

行高的继承

<style>
body {
    color: pink;
    font: 12px/24px 'Microsoft YaHei';
}
</style>

<body>
<div>我是一只小小鸟</div>
<p>我要飞翔</p>
</body>

#12px/24px 24px是指行高，div/p行高都是24px。

<style>
body {
    color: pink;
    font: 12px/1.5 'Microsoft YaHei';
}
div {
    /* 1.5是指当前元素文字大小的 font-size的1.5倍，所以当前行高是21px */
    font-size: 14px;
}
</style>

<body>
<div>我是一只小小鸟</div>
<p>我要飞翔</p>

#行高的另一种写法

<style>
body {
    color: pink;
    font: 12px/1.5 'Microsoft YaHei';
}
div {
    /* 1.5是指当前元素文字大小的 font-size的1.5倍，所以当前行高是21px */
    font-size: 14px;
}
/* li 没有指定字体大小，会继承父亲ul字体大小，ul继承父亲body字体大小为12px
    li行高为 12px * 1.5 = 18px
*/
</style>

<body>
<div>我是一只小小鸟</div>
<p>我要飞翔</p>
<ul>
    <li>没有指定文字大小</li>
</ul>
</body>

1.3优先级


当同一个元素指定多个选择器，就会有优先级产生。


  • 选择器相同，则执行层叠性。
  • 选择器不同，则根据选择器权重执行。

HTML5+CSS3 学习笔记 05_权重_02

不管父元素权重有多高，子元素选择器权重为0。

div {
    color: red;
}
.test {
    color: pink;
}

<div class="test">你笑起来像真好看</div>

# 颜色为purple，ID选择器权重更高

<style>
div {
    color: red;
}
.test {
    color: pink;
}
#demo {
    color: purple;
}
</style>

<div class="test" id="demo" style="color: black;">你笑起来像真好看</div>

# 颜色为black，style选择器权重更高

<style>
div {
    color: red !important;
}
.test {
    color: pink;
}
#demo {
    color: purple;
}
</style>


<div class="test" id="demo" style="color: black;">你笑起来像真好看</div>

# 颜色为red，!important权重最高

HTML5+CSS3 学习笔记 05_css3_03


1.3 优先级

  选中叠加（权重虽叠加，但不会进位。10次叠加为10，不会进位。）

  

/* 复合选择器有权限叠加的问题 */
/* url li权重0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
url li {
    color: black;
}
/* li的权重是0,0,0,1, */
li {
    color: red;
}
</style>

<url>
    <li>Jim</li>
    <li>Jack</li>
    <li>Jhon</li>
</url>

#尽管 li距离标签更接近，但是权重不高，最终颜色为black。

/* 复合选择器有权限叠加的问题 */
/* url li权重0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
url li {
    color: black;
}
/* li的权重是0,0,0,1, */
li {
    color: red;
}
/* .nav li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
    color: blue;
}

<url class="nav">
    <li>Jim</li>
    <li>Jack</li>
    <li>Jhon</li>
</url>

#类选择器的权重更高，最终颜色为blue。

权重练习题



.nav {
    color: blue;
}
li {
    color: red;
}

<url class="nav">
    <li>Jim</li>
    <li>Jack</li>
    <li>Jhon</li>
</url>

#最终文字为red，.nav权重虽高，但是li继承之后父元素权重为0，子元素定义的颜色将其覆盖。

 

/* .nav li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
    color: blue;
}
/* pink权重 0,0,1,0 */
.pink {
    color: pink;
}

<url class="nav">
    <li class="pink">Jim</li>
    <li>Jack</li>
    <li>Jhon</li>
</url>

#Jim颜色为blue。

/* .nav li权重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
    color: blue;
}
/* .nav pink权重 0,0,1,0 + 0,0,1,0  = 0,0,2,0 */
.nav .pink {
    color: pink;
}

<url class="nav">
    <li class="pink">Jim</li>
    <li>Jack</li>
    <li>Jhon</li>
</url>

#Jim颜色为pink。