05-CSS进阶

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

4）背景位置

background-position (bgp)

background-position：水平方向位置垂直方向位置；

5）背景相关属性连写

background：color image repeat position（不分先后顺序）

三、元素显示模式

1）块级元素

特点：（如div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer…）

1.独占一行

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

2）行内元素

特点：（如a、span、b、u、i、s、strong、ins、em、del…）

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

3）行内块元素

特点：（input、textarea、button、select…）

特殊情况：img标签有行内块元素特点，但是Chorme调试工具中显示结果是inline

1.一行可以显示多个

2.可以设置宽高

4）元素显示模式转换

（改变元素默认的显示特点让元素符合布局要求）

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

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

1. 块级元素一般作为大容器可以嵌套：文本、块级元素、行内元素、行内块元素……

但是p标签不要嵌套div、p、h等块级元素

2. a标签内部可以嵌套任何元素

但是a标签不可以嵌套a标签

四、CSS特性

1）继承性

特性：子元素有默认继承父元素样式的特点（子承父业）

可以继承的常见属性（文字控制属性都可以继承）

（可通过调试工具判断样式是否可以继承）

1.color

2.font-style、font-weight、font-size、font-family…

3.text-indent、text-align

4.line-height

5.……

2）层叠性

特性：

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

1.给同一个标签设置不同的样式此时样式会层层叠加共同作用在标签上

2.给同一个标签设置相同的样式此时样式会层叠覆盖最终写在最后的样式生效

五、综合案例

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=, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* a是行内 加宽高默认不生效 转行内块 */
        a{
            text-decoration: none;
            background-color: red;
            width: 100px;
            height: 50px;
            color: white;
            text-align: center;
            line-height: 50px;
            display: inline-block;
        }
        a:hover{
            background-color: rgb(243, 191, 18);

        }

    </style>
</head>
<body>
    <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{
            display: inline-block;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            color: white;
            width: 120px;
            height: 58px;
        }
        .one{
            background-image: url(./五彩导航/bg1.png);
        }
        .one:hover{
            background-image: url(./五彩导航/bg5.png);
        }

        .two{
            background-image: url(./五彩导航/bg2.png);
        }
        .two:hover{
            background-image: url(./五彩导航/bg6.png);
        }

        .three{
            background-image: url(./五彩导航/bg3.png);
        }
        .three:hover{
            background-image: url(./五彩导航/bg7.png);
        }

        .four{
            background-image: url(./五彩导航/bg4.png);
        }
        .four:hover{
            background-image: url(./五彩导航/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>