第四章 css样式基础

KO想偷懒

于 2024-10-01 21:24:37 发布

阅读量693

点赞数 24

文章标签：前端 html5

本文链接：https://blog.csdn.net/KO2131855283/article/details/142673897

版权

4.1 CSS 概述：

CSS，即层叠样式表，作为一种专门用于描述文档呈现方式的样式表语言，在网页开发中扮演着至关重要的角色。它常常与 HTML 紧密结合，共同为用户呈现丰富多彩的网页内容。CSS 的主要任务是定义网页内容的外观和格式，从字体的选择、颜色的调配，到页面的整体布局以及元素之间的间距设置，无一不是 CSS 的管辖范围。通过运用 CSS，开发者能够为网页赋予独特的视觉风格，使其不仅美观大方，而且易于操作和浏览。

一、CSS 的基本概念

CSS 的核心作用在于为网页内容的外观和格式进行精准定义。它涵盖了众多方面，如字体的特性（包括字体类型、大小等）、色彩的呈现、页面的布局规划以及元素之间的间隔距离等。通过 CSS，开发者能够依据特定的样式规则，对网页进行精心打造，使其在视觉上更加吸引人，同时也更加便于用户使用。

二、传统 HTML 的缺点

（一）维护困难

在传统的 HTML 架构中，若采用直接在 HTML 代码中呈现样式的方式，会导致内容与样式相互交织，难以区分。这种情况使得后期的维护工作变得异常艰难。哪怕只是进行微小的样式调整，都可能需要在多个不同的位置对代码进行修改，极大地增加了维护的工作量和难度。

（二）标记不足

传统 HTML 在样式控制方面的能力十分有限。它无法提供足够丰富的样式控制选项，使得开发者在设置颜色、调整字体样式以及实现复杂排版效果等方面面临诸多困难。例如，想要实现一些特殊的字体效果或者独特的色彩搭配，传统 HTML 往往难以胜任。

（三）网页过“胖”

如果在网页开发的前期阶段就将样式直接嵌入到 HTML 代码当中，会导致网页文件的体积迅速膨胀。这不仅会使网页的加载速度明显变慢，影响用户的浏览体验，还会使得样式难以被重复利用。因为每个页面都包含了大量重复的样式代码，不仅浪费了存储空间，也增加了开发和维护的成本。

（四）定位困难

在缺乏严格样式定义的情况下，网页元素的定位会变得极为复杂。由于没有明确的规则来确定元素的位置和布局，开发者很难实现预期的布局效果。这可能导致网页的布局混乱，元素之间的位置关系不清晰，严重影响网页的整体美观和可用性。

三、CSS 的特点和优势

（一）表现和内容分离

CSS 最大的优势之一就是实现了内容与样式的分离。在这种架构下，HTML 专注于构建网页的内容结构，而 CSS 则负责网页的视觉表现。这种分离带来了诸多好处，其中最显著的就是增强了网页的可维护性。当需要进行样式调整时，开发者只需要修改 CSS 文件，而无需在大量的 HTML 代码中寻找和修改样式相关的内容，大大提高了开发效率。

（二）增强了网页的表现力

CSS 为网页的视觉表现提供了丰富多样的选择。它可以通过动画效果、渐变色彩、阴影等多种表现形式，为网页增添生动的视觉效果。例如，通过 CSS 动画可以使元素在页面上以动态的方式呈现，吸引用户的注意力；渐变色彩可以为网页营造出独特的氛围和风格；阴影效果则可以使元素看起来更加立体和有层次感。

（三）使整个网站显示风格趋于统一

借助外部样式表，CSS 能够确保网站的各个页面都保持一致的样式。这对于提升用户体验至关重要。当用户在浏览网站的不同页面时，不会因为样式的不一致而感到困惑或不适。统一的样式也有助于塑造网站的品牌形象，增强用户对网站的认知度和记忆点。

四、CSS 的编写规则

（一）目录结构命名规则

在进行项目开发时，合理划分不同的文件夹是非常重要的。对于 CSS 样式文件，通常将其放置在专门的“css”目录下。这样做可以使项目的文件结构更加清晰，便于管理和维护。同时，也方便开发者快速找到所需的 CSS 文件，提高开发效率。

（二）样式文件的命名规则

为了提高代码的可读性和可维护性，在命名 CSS 样式文件时，应遵循有意义、易于理解的原则。例如，可以使用“main.css”来表示主要的样式文件，“header.css”表示头部区域的样式文件等。避免使用过于复杂的命名方式，以免造成混淆和理解困难。

（三）选择器的命名规则

选择器的命名应当简洁明了，易于识别和理解。常用的规范包括使用小写字母，并通过连字符进行分隔。例如，“.button-primary”这样的命名方式既清晰地表达了选择器的作用（表示主要按钮），又符合规范，易于阅读和维护。

（四）CSS 代码注释

在 CSS 代码中添加注释是一种良好的编程习惯。可以使用“/ 注释内容 /”的形式为 CSS 代码添加注释。注释可以帮助开发者更好地理解代码的功能和作用，也方便其他开发人员在阅读代码时快速了解代码的意图。

（五）CSS 代码缩进

通过适当的缩进和格式化，可以使 CSS 代码的结构更加清晰，易于阅读和理解。合理的缩进可以帮助开发者快速识别代码的层次关系，提高代码的可读性和可维护性。

4.2 CSS 语法基础

一、CSS 基本语法

（一）基本语法

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>第四章</title>

    <style>

        p {

            / 标签选择器 /

            color: #0000ff; / 字体颜色 /

            font-size: 20px; / 字体大小 /

        }

    </style>

</head>

<body>

    <p>基本语法</p>

</body>

</html>

运行结果：

（二）语法说明

CSS 样式主要由选择器和声明两部分组成。选择器的作用是定义应用样式的元素，而声明则包含了属性与值的配对组合。通过选择器选中特定的元素后，再通过声明为这些元素设置相应的样式属性和值，从而实现对网页元素的样式控制。

二、CSS 选择器类型

（一）标记选择器

标记选择器可以选中所有相同的标签。在上述代码中，使用`<p>`标签选择器可以选中所有的`<p>`段落元素，并为它们设置相同的样式。这种选择器的使用非常方便，可以快速地为一类元素应用统一的样式。

（二）类选择器

<p class="class1">这是 class1 的内容</p>

<p class="class2">这是 class2 的内容</p>

类选择器通过指定元素的类名来选中相应的元素。在上述代码中，使用“.class1”和“.class2”类选择器可以分别选中带有对应类名的段落元素。类选择器的灵活性较高，可以为不同的元素设置相同的类名，从而实现对这些元素的统一样式控制，也可以为单个元素设置特定的类名，实现个性化的样式设置。

（三）ID 选择器

<p id="id1">这是 id1 内容</p>

ID 选择器通过指定元素的 ID 属性来选中唯一的元素。在上述代码中，使用“#id1”ID 选择器可以精准选中具有特定 ID 的段落元素。ID 选择器的针对性非常强，由于 ID 在页面中必须是唯一的，所以 ID 选择器可以确保只选中一个特定的元素，适用于需要对单个元素进行独特样式设置的情况。

（四）伪类选择器

<!DOCTYPE html>
<html>

<head>
  <style>
    a:link {
      color: #aa557f; /* 未访问链接颜色 */
    }

    a:hover {
      color: #ffff7f; /* 悬停时链接颜色 */
    }

    a:visited {
      color: #55aa00; /* 已访问链接颜色 */
    }
  </style>
</head>

<body>
  <a href="http://www.baidu.com">百度一下</a>
</body>

</html>

伪类选择器用于为元素的不同状态设置不同的样式。在上述代码中，分别为`<a>`链接元素的未访问状态、悬停状态和已访问状态设置了不同的颜色。伪类选择器可以增强用户与网页的交互效果，使网页更加生动和有趣。

三、CSS 选择器声明

（一）集体声明

可以针对多个选择器进行统一的样式声明。例如：“h1, h2, h3 { color: blue; }”，这条声明可以同时为`<h1>`、`<h2>`和`<h3>`标签设置蓝色的字体颜色。集体声明可以提高代码的效率，避免重复编写相同的样式声明。

h3, h4, h5, p { --color: red; font-size: 18px; }

（二）全局声明

使用“”选择器进行全局样式声明，如：“ { margin: 0; padding: 0; }”，可以将所有元素的边距和内边距都设置为 0。全局声明可以快速地统一页面的基本样式，减少样式冲突的可能性。

*{
color: red;
font-size:18px;
}

（三）派生选择器（上下文选择器）

可以选中某个元素的子元素。例如：“div > p { color: red; / 仅选中直接子元素<p> / }”，这条声明只会选中`<div>`元素的直接子元素`<p>`，并将其字体颜色设置为红色。派生选择器可以实现更加精细的样式控制，根据元素之间的关系来设置特定的样式。

<p><strong>我呈现为粗体字，并非斜体字，由于我不在列表当中，故而此规则对我无效。</strong></p> <ol> <li><strong>我是斜体字的说法不准确，这只是因为 strong 元素处于 li 标记内而产生的错误认知。</strong></li> </ol> <li>我是常规字体。</li>

4.3 CSS 引入方式

一、内联样式表（行内样式表）

（一）基本语法

<p style="color: red;">这是内联样式的段落</p>

（二）语法说明

内联样式是直接写在元素的属性中的，但这种方式不建议频繁使用，因为它会使代码的可维护性降低。内联样式虽然可以快速地为单个元素设置特定的样式，但当需要对多个元素进行相同的样式设置时，内联样式会导致代码的重复和冗余，增加了维护的难度。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.my-class {
color: #000000;
}
</style>
<title>Document</title>
</head>

<body>
<p class="my-class">这是第二段内容</p>
</body>

</html>

二、内部样式表

（一）基本语法

I <style type="text/css">

选择器一：{属性一:属性值一;属性二:属性值二……}

选择器二：{属性一:属性值一;属性二:属性值二……}

选择器 n：{属性一:属性值一;属性二:属性值二……}

</style>

（二）语法说明

内部样式表定义在`<head>`标签中，适用于单一文档。这种方式可以为当前文档中的特定元素设置样式，但如果多个文档需要相同的样式，内部样式表就会显得不够高效。因为每个文档都需要重复定义相同的样式，增加了代码的工作量和维护成本。

三、外部样式表

（一）链接外部样式表

<link type="text/css" rel="stylesheet" href="外部样式表的文件名.css">

（二）导入外部样式表

<style type="text/css"> @import url("CSS 文件的路径地址");



</style>

外部样式表是将 CSS 代码单独存储在一个文件中，然后通过`<link>`标签或`@import`语句引入到 HTML 文档中。这种方式可以实现样式的复用，提高开发效率。同时，外部样式表也使得代码的结构更加清晰，易于维护。

4.4 CSS 的属性单位

一、长度、百分比单位

（一）相对类型

相对类型的单位如`em`、`rem`和`%`，它们的大小是相对于父元素或根元素来确定的。相对单位的使用可以使网页在不同的设备和屏幕尺寸下具有更好的适应性。例如，使用`em`单位设置字体大小，可以根据父元素的字体大小进行相对调整，确保在不同的环境下都能保持较好的可读性。

（二）绝对类型

绝对类型的单位如`px`和`mm`，它们具有固定的大小，通常不会随父元素的变化而变化。绝对单位在需要精确控制元素大小和位置时非常有用。例如，在设计图形界面或需要确保元素具有特定尺寸的情况下，可以使用绝对单位进行设置。

二、色彩单位

（一）用十六进制数方式表示色彩值

例如：“color: #ff5733;”。十六进制数表示方式可以精确地指定颜色的红、绿、蓝三个通道的值，从而实现对颜色的精细控制。

（二）用色彩名称方式表示色彩值

例如：“color: red;”。色彩名称方式简单直观，易于记忆和使用。但这种方式所能表示的颜色种类有限，不能满足一些复杂的设计需求。

（三）使用 RGB（x，y，z）函数表示

例如：“color: rgb(255, 87, 51);”。RGB 函数表示方式可以通过指定红、绿、蓝三个通道的数值来确定颜色，与十六进制数表示方式类似，但更加直观和易于理解。

4.5 CSS 继承与层叠

在 CSS 中，许多属性是可以从父元素继承的，比如字体样式和颜色等。同时，CSS 还可以制定样式的优先级，通过层叠来确定最终的样式表现。

以下是一个继承关系演示的示例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>继承关系</title>
		<style>
			h1{
				color: blue;
				text-decoration: aqua;
			}
			em{
				color: cyan;
			}
		</style>
	</head>
	<body>
		<h1>学习<em>web开发</em>教程</h1>
		<p>如果你有问题请联系我们</p >
	</body>
</html>

以下是一个 CSS 层叠的示例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS 层叠</title>
    <style type="text/css">
        p {
            color: #3498db; /* 蓝色 */
        }

       .red {
            color: #e74c3c; /* 红色 */
        }

       .purple {
            color: #9b59b6; /* 紫色 */
        }

        #line3 {
            color: #2ecc71; /* 绿色 */
        }
    </style>
</head>

<body>
    <p>这是第 1 行文本</p>
    <p class="red">这是第 2 行文本</p>
    <p id="line3" class="red">这是第 3 行文本</p>
    <p style="color: #f39c12; " id="line3">这是第 4 行文本</p>
    <p class="purple red">这是第 5 行文本</p>
</body>

</html>

4.6 元素类型

一、块级元素

块级元素包括`<div>`、`<p>`、`<h1>`等。这类元素通常会占据整行空间，前后会有换行出现。块级元素具有较强的结构性，适合用于构建网页的主要布局和框架。例如，可以使用`<div>`元素来划分页面的不同区域，使用`<p>`元素来显示段落文本，使用`<h1>`元素来表示页面的标题。

二、行级元素

行级元素包括`<span>`、`<a>`等。这些元素不会产生换行，其宽度仅占据自身内容所需的空间。行级元素通常用于在文本中插入特定的内容或设置链接等。例如，可以使用`<span>`元素来为一段文本中的特定部分设置样式，使用`<a>`元素来创建超链接。

三、列表项元素

列表项元素如`<ul>`、`<ol>`、`<li>`等，主要用于创建各种类型的列表。`<ul>`用于创建无序列表，`<ol>`用于创建有序列表，`<li>`则用于表示列表中的每个项目。列表项元素可以使网页中的内容更加清晰和有条理，方便用户阅读和理解。

四、隐藏元素

可以使用 CSS 属性“display: none;”或“visibility: hidden;”来隐藏元素。前者会完全移除元素在页面上的显示，而后者则只是隐藏元素，但元素在页面布局中仍然占据空间。这两种隐藏方式在不同的场景下有不同的用途。例如，当需要完全隐藏一个元素，并且不希望它在页面布局中占据任何空间时，可以使用“display: none;”。而当只是希望暂时隐藏一个元素，但又不想影响页面的布局时，可以使用“visibility: hidden;”。

4.7 综合案例：开平碉楼申遗大事记

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>开平碉楼</title>
    <link type="text/css" rel="stylesheet" href="css/new_file.css" />
</head>

<body>
    <div id="content">
        <h2 class="biaoti">开平碉楼申遗大事记</h2>
        <hr color="#d3b175" size="5" />
        <img src="img/tp.jpg" />
        <p class="tx1">2000 年，开平成立申遗小组。</p>
        <p>2000 年 2 月，从国务院信访局到开平挂市委常委职务的李玫同志在香港侨团团拜会上向胡耀坤、吴荣治等侨领首次提出将开平碉楼申报为世界文化遗产。</p>
        <p>2000 年 10 月 30 日，开平市成立“开平碉楼”申报世界文化遗产领导小组。领导小组下设办公室，分整治组、资料组、宣传组。</p>
        <p class="tx1">2001 年，省申遗领导小组成立。</p>
        <p>2001 年 4 月 30 日，开平市市长办公会议研究将开平碉楼申遗项目名称定为“开平碉楼与民居”。</p>
        <p>2001 年 6 月 19 日，申遗办谭伟强、张健文、邝积康 3 位负责人赴北京，在李玫同志的陪同下拜访了中国国际古迹遗址理事会秘书长郭旃、清华大学教授陈志华，就申遗的有关事宜进行会谈。</p>
        <p>2001 年 3 月至 6 月，开平市开展“开平碉楼”的普查工作，并请上海同济大学、华南理工大学专家对 33 座碉楼测绘了立面图、剖面图、平面图和细部特征图。</p>
        <p>2001 年 6 月，江门市成立了以时任市长雷于蓝为组长的江门市申报世界文化遗产领导小组。</p>
        <p>2001 年 7 月 11 日至 17 日，清华大学陈志华、楼庆西、李秋香教授，五邑大学张国雄、梅伟强教授，深入到三埠、长沙、沙冈、塘口、蚬冈、百合、月山、赤坎、大沙等镇（办事处）对碉楼与民居进行了认真细致的考察。开平市政府特聘几位专家为“开平碉楼与民居”申报世界文化遗产工作高级顾问。</p>
        <p>2001 年 9 月 6 日至 7 日，时任副省长的李兰芳到江门市视察碉楼，对开平碉楼申遗工作给予了充分的肯定，并表示省政府对此将大力支持。</p>
        <p>2001 年 9 月 12 日，联合国世界遗产评估机构——国际古迹遗址理事会总协调员亨利博士考察开平碉楼，对开平碉楼的价值和开平乃至广东的文物保护工作表示了充分的肯定。</p>
        <p>2001 年 11 月，广东省成立申报世界文化遗产领导小组及其办公室。</p>
        <p>2001 年，开平籍旅港同胞、恒生银行董事长利国伟爵士就开平碉楼申报事宜专门写信给时任国务院总理的朱镕基。</p>
        <p class="tx1">2004 年，世遗中心受理开平申遗。</p>
        <p>2004 年 4 月 10 日至 11 日，联合国世界遗产专家乔拉·索拉先生及夫人、以色列文物专家阿里·拉哈米莫夫先生及夫人，中国国际古迹遗址理事会秘书长郭旃先生，澳门文化局文化财产厅陈泽成厅长的陪同下到开平考察碉楼。</p>
        <p>2004 年 5 月，任仲夷同志致函省委书记张德江，请德江同志向中央汇报开平碉楼申报世界文化遗产工作。</p>
        <p>2004 年 5 月 17 日，张德江同志在开平市委、市政府《关于请张德江书记向中央汇报开平碉楼申报世界遗产工作的请示》中批示：我赞成和支持开平碉楼申报世界文化遗产。</p>
        <p>2004 年 6 月，开平市被中国建筑学会授予“中国碉楼之乡”的称号。</p>
        <p>2004 年 7 月 2 日，中国 100 多个申遗“预备清单”中已有 5 个申报项目被世界遗产中心受理，分别是澳门历史建筑群、开平碉楼、殷墟、福建土楼和红河哈尼梯田。</p>
        <p>2004 年 10 月 28 日，蚬冈镇锦江里昇峰楼业主旅加华侨胡黄惠英（乳名：黄滚盛）女士及其兄长黄雄畅先生在梁金山世外豪园酒店正式将他们的碉楼无偿委托给开平人民政府管理。</p>
        <p class="tx1">2005 年，申报名称变更。</p>
        <p>2005 年 4 月 21 日，由清华大学建筑学院与开平市申遗办合作开展的第二次全市性碉楼普查工作圆满完成。本次碉楼普查从 2005 年 3 月 16 日开始，历时 13 个月。第二次碉楼普查深入到全市每条村庄逐幢碉楼进行登记、拍照、调查核实，拍摄 2 万多张图片，采集到一些珍贵的、鲜为人知的历史资料。</p>
        <p>2005 年 9 月 18 日，联合国世界遗产协调员乔拉先生、建筑规划师阿里先生来到开平，指导开平碉楼申报世界文化遗产工作。</p>
        <p>2005 年 9 月 24 日，由省人民政府主办，省文化厅、江门市人民政府、开平市人民政府承办的广东省开平碉楼申报世界文化遗产动员大会在省博物馆门前隆重举行。</p>
        <p>2005 年 11 月，开平碉楼申报世界文化遗产的项目名称由“开平碉楼与民居”变为“开平碉楼与村落”，极大地延伸了开平碉楼的文化内涵和历史价值，更有利于申报世界文化遗产。</p>
        <p>2005 年 12 月 5 日，北京大学世界遗产中心沈文权博士，中国古文物保护专家张志平女士（郭旃夫人）抵达开平，着手开展修改北大制订的开平碉楼文化遗产保护规划，为适应申报的需要，该规划将改名为《开平碉楼与村落保护管理规划》，并对相关内容进行增补。</p>
        <p class="tx1">2006 年，世遗专家评估开平申遗。</p>
        <p>2006 年 1 月 11 日，国家文物局局长单霁翔正式签署英文申报文本。</p>
        <p>2006 年 1 月，国务院正式批准“开平碉楼与村落”作为 2007 年代表中国向联合国申报世界文化遗产的项目，英文申报文本已被联合国教科文组织确认合格接收。</p>
        <p>2006 年 3 月 2 日至 3 日，联合国教科文组织专家乔拉·索拉先生和阿里先生按原计划来到开平考察“申遗”准备工作。</p>
        <p>2006 年 4 月 3 日下午，国家文物局、省政府、江门和开平市委、市政府在开平市行政大楼召开了开平碉楼与村落申报世界文化遗产工作会议，研究申遗工作进入第二个重要环节——环境整治阶段存在的问题，提出下一步工作意见。</p>
        <p>2006 年 5 月 9 日，黄华华省长在江门市委书记陈继兴、市长王南健的陪同下到江门市检查指导开平碉楼与村落申遗工作。</p>
        <p>2006 年 8 月 21 日至 22 日，经业主方其祥、方其赏、方其锦授权，塘口镇自力村三座尘封了大半个世纪的居庐——叶生居庐、官生居庐、澜生居庐被依次打开，并发现大量珍贵文物。</p>
        <p>2006 年 8 月 27 日至 28 日，著名歌唱家阎维文与中央电视台摄制组一行 10 多人来到开平，拍摄开平碉楼与村落申报世界文化遗产主题曲——《碉楼颂》音乐电视。</p>
        <p>2006 年 9 月，中国华侨出版社出版了两本关于开平碉楼与村落的学术著作，总结开平碉楼与村落研究所取得的丰硕成果，支持开平碉楼与村落申报世界文化遗产。</p>
        <p>2006 年 9 月 15 日，开平市举行“共同的心愿——全力支持开平碉楼与村落申报世界文化遗产”为主题的申遗文艺晚会，世遗评估专家卢光裕先生、副省长雷于蓝、国家文物局有关领导观看了晚会。晚会结束时，共收到来自社会各界的捐款 1480 多万元，其中，著名侨领吴荣治先生及夫人捐款 100 万元。</p>
        <p>2006 年 9 月 15 至 18 日，受联合国教科文组织世界遗产中心的委派，“世遗”评估专家卢光裕先生到江门市对开平碉楼与村落进行评估。</p>
        <p class="tx1">2007 年，申遗成功。</p>
        <p>2007 年 1 月，开平碉楼与村落申遗项目顺利通过国际古迹遗址（ICOMOS）委员会执委会在巴黎召开的专家会议的评审。</p>
        <p>2007 年 6 月 20 日，开平市赴新西兰、澳大利亚申遗代表团一行 30 多人经香港转机后抵达新西兰。</p>
        <p>2007 年 6 月 22 日，中国政府代表团飞赴新西兰，出席世界遗产委员会第 31 届大会，为开平碉楼与村落申遗助威。</p>
        <p>2007 年 6 月底，开平碉楼与村落申遗项目顺利通过在新西兰召开的第 31 届世界遗产大会的表决，正式列入《世界遗产名录》。</p>
        <p id="t1">来源:开平碉楼</p>
    </div>
</body>

</html>

css代码：

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
}

#content {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.biaoti {
    color: #333;
    text-align: center;
}

hr {
    border: none;
    border-top: 5px solid #d3b175;
    margin: 20px 0;
}

img {
    display: block;
    margin: 20px auto;
}

.tx1 {
    font-weight: bold;
    margin-top: 20px;
}

p {
    line-height: 1.5;
    margin-bottom: 15px;
}

#t1 {
    text-align: right;
    font-size: 12px;
    color: #999;
}

图片：