4.1 元素显示模式转换

➢ 目的：改变元素默认的显示特点，让元素符合布局要求
➢ 语法：
在这里插入图片描述
inline-block,inline,block;

4.2 小结

➢ 转换成块级元素的属性是什么？
• display：block
➢ 转换成行内块元素的属性是什么？
• display：inline-block
➢ 转换成行内元素的属性是什么？
• display：inline

拓展1：HTML嵌套规范注意点

块级元素一般作为大容器，可以嵌套：文本，块级元素，行内元素，行内块元素等等
➢ 但是：p标签中不要嵌套div、p、h等块级元素
div,p,h
2. a标签内部可以嵌套任意元素
➢ 但是：a标签不能嵌套a标签
拓展2：居中方法总结
在这里插入图片描述
line-height:单行文本
margin:0 auto;块级元素，注意点：直接给当前元素设置的
text-align:文本，行内元素，span,a行内块元素ionput,img
如果需要让以上元素水平居中，此时直接给以上元素的父元素设置就可以了、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- p 和 h标题不能相互嵌套 -->
    <!-- <p>
        <h1>一级标题</h1>
    </p> -->
    <!-- p里面不能包含div -->
    <p>
        <div>divdiv</div>
    </p>
</body>
</html>

p和h标签不能相互嵌套

四、CSS 特性

1.1 继承性的介绍

默认继程父元素的样式特点
➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
可以继承的常见属性(文字控制属性都可以继承)
文字控制属性都可以继程、

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height
……
color,font-style,font-weight,font-size,font-family,text-indent,text-alig
➢ 注意点：
• 可以通过调试工具判断样式是否可以继承

1.2 小结

➢ 继承性的特性是什么？
• 子元素有默认继承父元素样式的特点
➢ 有哪些常见属性可以继承？

color
font-style、font-weight、font-size、font-family
text-indent、text-align
line-height

color,font-style,font-weight,font-size,font-family,

（拓展）继承的应用

font-size:从而同一不同的浏览器默认文字的大小
➢ 好处：可以在一定程度上减少代码
➢ 常见应用场景：

可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
body标签设置同一的font-size,从而统一不同浏览器的文字大小,body标签统一的font-size从而统一不同浏览器的默认文字大小

（拓展）继承失效的特殊情况

➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 控制文字的属性都能继承; 不是控制文字的都不能继承 */
        div {
    
    
            color: red;
            font-size: 30px;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>
        这是div标签里面的文字
        <span>这是div里面的span</span>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            color: red;
            font-size: 12px;
        }

        a {
    
    
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">超链接</a>
        <h1>一级标题</h1>
    </div>
</body>
</html>

a-color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
h-font-size会继承失效，其实font-size属性继承下来了，但是被浏览器的默认设置样式给覆盖掉了

2.1 层叠性的介绍

➢ 特性：

给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

当样式冲突的时候，只有当选择器优先级相同的时候，才能通过层叠性判断结果。

2.2 小结

➢ 如果给同一个标签设置了相同的属性，此时样式会？
• 会层叠覆盖，写在最后的会生效
➢ 如果给同一个标签设置了不同的样式，此时样式会？
• 会层叠叠加，共同作用在标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
    
    
            color: red;
            color: green;
        }

        .box {
    
    
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="box">文字</div>
</body>
</html>

五、综合案例

1. 普通导航-效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a 显示模式是行内, 加宽高默认不生效, 转显示模式: 行内块 */
        a {
    
    
            text-decoration: none;
            width: 100px;
            height: 50px;
            background-color: red;
            display: inline-block;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }

        a:hover {
    
    
            background-color: orange;
        }
    </style>
</head>
<body>
    <!-- a*5 -->
    <!-- 选多行加内容删除 alt + shift + 鼠标左键单击 -->
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

2. 五彩导航-效果图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
    
    
            text-decoration: none;
            width: 120px;
            height: 58px;
            background-color: pink;
            display: inline-block;
            text-align: center;
            line-height: 50px;
            color: #fff;
        }
        /* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */
        .one {
    
    
            background-image: url(./images/bg1.png);
        }

        .two {
    
    
            background-image: url(./images/bg2.png);
        }

        .three {
    
    
            background-image: url(./images/bg3.png);
        }

        .four {
    
    
            background-image: url(./images/bg4.png);
        }

        .one:hover {
    
    
            background-image: url(./images/bg5.png);
        }

        .two:hover {
    
    
            background-image: url(./images/bg6.png);
        }

        .three:hover {
    
    
            background-image: url(./images/bg7.png);
        }

        .four:hover {
    
    
            background-image: url(./images/bg8.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>

◆ 能够使用复合选择器在 HTML 中选择元素
◆ 能够使用 Emmet 语法提高编码速度
◆ 能够使用 hover伪类选择器设置标签的鼠标悬停状态
◆ 能够使用背景相关属性装饰元素的背景样式
◆ 能够认识三种常见的元素显示模式的特点
◆ 能够使用代码实现不同元素显示模式间的转换
◆ 能够实现行内元素和块级元素水平居中
text-decoration:none;
width:120px;
height:58px;
background-color:pink;
display:inline-block;
text-align:center;
line-height:50px;
color:#ffff;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box a {
    
    }
        .box > a {
    
    }
        .box, a {
    
    }
        h1, h2, h3 {
    
    }
        div.box {
    
    }
        div:hover {
    
    
            background-color: #fff;
            background-image: url();
            background-repeat: no-repeat;
            background-position: left 10px;
            background: #000 url() no-repeat 0 0 ;
        }
        /* img 背景 */
    </style>
</head>
<body>
    <!-- 选择器   背景 -->
    <!-- 找标签 -->
</body>
</html>

.box a{}
.boxa>a{}
.box a{}
h1,h2,h3{}
background-image:url();background-repeat:no-repeat;

CSS基础选择器进阶+背景属性+元素显示模式+三大特性（3）元素显示模式转换HTML嵌套规范注意点五彩导航,普通导航,层叠性继承继承性的介绍失效的特殊情况继承的应用

4.1 元素显示模式转换

4.2 小结

拓展1：HTML嵌套规范注意点

四、CSS 特性

1.1 继承性的介绍

1.2 小结

（拓展）继承的应用

（拓展）继承失效的特殊情况

2.1 层叠性的介绍

2.2 小结

五、综合案例

1. 普通导航-效果图

2. 五彩导航-效果图

猜你喜欢

CSS基础 选择器进阶+背景属性+元素显示模式+三大特性（3）元素显示模式转换HTML嵌套规范注意点五彩导航,普通导航,层叠性继承继承性的介绍失效的特殊情况继承的应用

4.1 元素显示模式转换

4.2 小结

拓展1：HTML嵌套规范注意点

四、CSS 特性

1.1 继承性的介绍

1.2 小结

（拓展）继承的应用

（拓展）继承失效的特殊情况

2.1 层叠性的介绍

2.2 小结

五、综合案例

1. 普通导航-效果图

2. 五彩导航-效果图

猜你喜欢

CSS基础选择器进阶+背景属性+元素显示模式+三大特性（3）元素显示模式转换HTML嵌套规范注意点五彩导航,普通导航,层叠性继承继承性的介绍失效的特殊情况继承的应用