CSS学习文档（2）：Emmet语法、复合选择器、元素显示模式、背景、三大特性

码农_小文

已于 2024-07-24 22:13:10 修改

阅读量1k

点赞数 28

文章标签： css 学习前端

于 2024-07-24 22:08:48 首次发布

本文链接：https://blog.csdn.net/m0_58433849/article/details/140672556

版权

一、Emmet语法

（1）Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode内部已经集成该语法。

（2）快速生成HTML结构语法如下图所示：

（3）快速生成CSS结构语法如下：

比如w200按tab 可以生成width: 200px;
比如lh26按tab 可以生成 line-height: 26px;

二、复合选择器

（1）在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

（2）后代选择器：后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 { 样式声明 }

ul li { 样式声明 }

代码如下所示：

    <title>后代选择器</title>
    <style>
        ol li {
            color: pink;
        }

        ul li {
            color: aqua;
        }

        ol li a {
            color: pink;
        }

        .nav li a {
            color: aquamarine;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul class="nav">
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ul>
</body>

（3）子选择器：子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.

元素>元素2 { 样式声明 }

div > p { 样式声明 }

代码如下所示：

    <title>子元素选择器</title>
    <style>
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">儿子</a>
        <p>
            <a href="#">孙子</a>
        </p>
    </div>
</body>

(4)并集选择器：并集选择器可以选择多组标签同时为他们定义相同的样式。通常用于集体声明.

元素1，元素2 { 样式声明 }

ul，div { 样式声明 }

代码如下所示：

    <title>并集选择器</title>
    <style>
        /* div,
        p {
            color: red;
        } */
        div,
        p,
        .pig li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>

（5）复合选择器总结如下图所示：

三、元素显示模式

（1）作用︰网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

（2）元素显示模式就是元素(标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

（3）元素显示模式总结如下图所示：

四、CSS的背景

（1）通过CSS背景属性，可以给页面元素添加背景样式。背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

（2）背景复合写法：为了简化背景属性的代码，我们可以将这些属性合并简写在同一个属性background中。从而节约代码量当使用简写属性时，没有特定的书写顺序,一般习惯约定顺序为∶

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置;

（3）CSS背景总结如下图所示：

背景图片:实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置.(精灵图也是一种运用场景)

五、CSS的三大特性

CSS有三个非常重要的三个特性∶层叠性、继承性、优先级。

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

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠

代码如下所示：

   <title>层叠性</title>
    <style>
        div {
            color: red;
            font-size: 12px;
        }

        div {
            color: pink;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div>层叠性测试</div>
</body>

（2）继承性：CSS中的继承:子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是∶子承父业。

代码如下所示：

    <title>继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>我是继承性测试</p>
    </div>
</body>