【前端】前端学习二之CSS

QJXX

408人浏览 · 2026-04-04 18:01:41

QJXX · 2026-04-04 18:01:41 发布

（3）设置字体粗细：font-weight

（4）字体样式：font-style

（5）复合写法

2. 如何设置字体颜色？

3. 如何控制文本对齐/缩进/行高/文本装饰？

（1）控制对齐：text-align

（2）控制缩进：text-indent

（3）行高控制：line-height

（4）文本装饰：text-decoration

4. 背景属性设置：background

（1）背景颜色：background-color

（2）背景图片：background-image

（3）背景平铺：background-repeat

（4）背景位置：background-position

（5）背景尺寸：background-size

（1）水平方向的对齐：justify-content

（2）竖直方向的对齐：align-items

（3）出现多行的情况

8. 圆角矩形的设置

六、Chrome 浏览器调试工具简单介绍 -- 查看 CSS 属性

前言

上一篇文章，我们介绍了HTML的绝大部分知识，知道了HTML本质是决定页面结构的，但是只有结构还不够，而本章，我们将介绍前端技术中的CSS技术，通过CSS 我们便可以美化整个页面。

一、什么是CSS?

CSS，全称是层叠样式表，它是一种用来为 HTML 等文档添加样式和布局的样式表语言。

它能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果。其核心价值在于代码实现了“内容与表现分离”，能够极大地提升代码的可维护性与复用性。

二、CSS的基本语法

CSS的基本语法结构主要由 选择器 和 声明块（由一个 { } 括起来）两部分组成。

它的核心结构可以表示为：

选择器 {
   属性1: 值; 
   属性2: 值; 
   属性3: 值; 
   ...
}

选择器：用来“选中”你想要改变样式的 HTML 元素。
声明块：通过 { } 阔气来，由一条或多条声明组成，每条声明表示为 属性: 值 ，通过分号分隔。格式：比如要修改字体颜色： color: red 即将字体颜色设置为红色。

代码使用示例：

/* 选择器 p 选中所有 <p> 标签 */
p {
  color: red; /* 声明1：将字体颜色设置为红色 */
  
  font-size: 30px; /* 声明2：将字体大小设置为30像素 */
}

通过这段代码我们再在 body 中写代码的时候通过 <p> 标签写的内容的字体就是红色，字体大小为30px。这样就达到了属性和内容分离的效果了。

注意：在CSS中，注释是通过 /* */ 来实现的，可以使用【 Ctrl + / 】快速切换

三、CSS代码放在哪里？

知道了CSS的语法，那么这段代码具体是放在哪里的呢？

我们通常有如下三种方式：写在 HTML 标签里（行内样式表），写在 HTML 的头部head标签内（内部样式表），或者写在一个独立的文件里（外部样式表）。

它们的优先级从高到低的顺序是：行内样式 > 内部样式表 = 外部样式表。

1. 内部样式表

这种方法是写在 HTML 的头部的，即 head 标签内部。具体写法为：先写在 style 标签中，然后再将其嵌入到<head> </head>内部。使用示例：

这样做的优缺点如下：

优点：这样做能够让样式和页面结构分离。
缺点：分离的还不够彻底，尤其是 css 内容多的时候。

2. 行内样式表

这种方法就是直接把 CSS 代码写在 HTML 标签的 style 属性里。这样只适合于写简单的样式，只针对某个标签生效。比如：

这种方式的缺点是不能写太复杂的样式。

需要注意：这种写法的优先级在这三种方式中最高，会覆盖其他的样式。

3. 外部样式表

这是实际开发中最常用的方式。使用方法为：把所有的 CSS 代码写在一个独立的 .css 文件中，然后在 HTML 的 head 标签中通过 <link> 标签引入。如图所示：

需要注意：将CSS代码写在.css文件中后，一定要使用<link>标签将引入外部样式表。

使用 link 标签需要理解一下两个属性：

rel 属性：用来定义当前文档与链接资源之间的关系。常用取值：stylesheet（表示链接的是一个 CSS 样式表）。

href 属性：指定外部资源的位置。它的取值可以是相对路径或绝对路径。

这种方式的优点为：

彻底分离了结构与样式：HTML 负责结构，CSS 负责美观，代码更清晰。并且复用性也很高。
浏览器缓存：用户访问过一次后，浏览器会缓存 CSS 文件，第二次访问速度更快。

它也有缺点，即：受到浏览器缓存影响，修改之后不一定立刻生效。

四、选择器的种类

在介绍CSS基本语法的时候，我们知道CSS基本语法是有选择器和声明块组成。而CSS的选择器种类繁多，大致可以分为两种：基础选择器（单个选择器构成的）和复合选择器（把多种基础选择器综合运用起来）。

以下为了方便，我们都会采用行内样式表来使用。

1. 基础选择器

基础选择器主要有四种，这四种选择器是构建所有复杂选择器的基础。

（1）标签选择器

直接使用 HTML 标签名作为选择器来选择页面中所有该类型的元素。使用方法如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p {
                color: red; 
                font-size: 30px; 
            }
            div {
                color: blue; 
                font-size: 60px; 
            }
        </style>
    </head>
    <body>
        <p> Hello CSS! </p>
        <div> Hello CSS! </div>
    </body>
</html>

其中，上述代码会将页面中所有 <p> 标签内的内容变为红色，且字体大小变为30像素；div标签内的内容颜色变为蓝色，字体大小为60像素。其展示结果如下图所示：

（2）类选择器

这种选择器的语法为： 以点号 . 开头，后跟自定义的类名（建议使用有描述性的名称来命名）。

它的使用细节如下所示：

在<body>中的标签可以通过使用 class 属性来调用，class取值只需要写 . 后面的类名即可。
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让代码更好复用)
如果是长的类名，可以使用 - 分割。
不要使用纯数字，或者中文，以及标签名来命名类名。

具体示例如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=], initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 类选择器 */
            .eat {
                color: red; /*设置颜色*/
            }
            .sleep {
                color: blue;
            }
            .game {
                color: green;
            }
            .play {
                font-size: 30px; /*设置字体大小*/
            }
        </style>
    </head>
    <body>
        <p class="eat">吃饭</p>
        <p class="sleep">睡觉</p>

        <!-- 一个标签使用多个类 -->
        <p class="game play">玩游戏</p>
    </body>
</html>

这段代码的结果展示如下图所示：

（3）id 选择器

id 选择器和类选择器类似，但 id 选择器是以井号 # 开头，后跟自定义的 ID 名。它的使用细节如下：

调用方法：通过 HTML 中标签中的 id 属性调用，前提是需要保证其 id 属性取值和 id 选择器的 id 名相同，但 id 属性不必带 # 。
唯一性：在同一个 HTML 页面中，不允许出现两个或多个具有相同 id 值的元素，即不能被多个标签使用（是和类选择器最大的区别）。如果违反此规则，虽然浏览器通常不会报错，但会导致不可预测的行为。
它适用于在页面中独一无二的结构中。

简单的使用示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* id 选择器 */
            #eat {
                color: red;
            }
            #sleep {
                color: blue;
            }
        </style>
    </head>
    <body>
        <p id="eat"> 吃饭了 </p>
        <p id="sleep"> 睡觉了 </p>
    </body>
</html>

这段代码的结果展示如下图所示：

与类选择器的区别：

类选择器（.class）：用于重复的样式，一个类可以被多个元素使用。类选择器j就像是姓名，可以重复
id 选择器（#id）：用于唯一的元素，一个 id 只能对应一个元素。id 选择器就像身份证号码，是唯一的。

（4）通配符选择器

只使用 * 的定义，它可以选取所有的标签，相当于全选的意思。

在实际中通过用来对页面的所有元素进行默认样式消除的，主要用来消除页边距，因为浏览器默认会给很多标签添加外边距和内边。这样是为了消除不同浏览器之间的默认样式差异，让布局从零开始。

比如，我们想要将这个页面的背景的颜色改变一下，如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <head>
            <style>
                * {
                    background-color: red; /*设置背景颜色*/
                }
            </style>
        </head>
    </head>
    <body>
        <p>这是内容</p>
    </body>
</html>

这段代码的结果展示如下图所示：

2. 复合选择器

复合选择器其实就是基础选择器的组合，它的种类有很多，我们这里只说两种。其他的可以参考逻辑：CSS 组合器参考手册

（1）后代选择器

后代选择器也叫包含选择器，用于选择某个父元素（或祖先元素）内部的所有指定后代元素，无论嵌套多少层，都会被选中，其语法为：

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

其使用细节如下：

元素 1 和元素 2 要使用空格分割
元素 1 是父级/祖先级，元素 2 是子级
它可以选中 元素1 内部所有指定 元素1 的选择器，它的核心特点是不限制嵌套层级，只要目标元素在祖先元素内部，无论隔了多少层，都会被选中。

如果元素1和元素2都是标签，那么使用示例如下：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 后代选择器 */
            div li {
                color: red;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li>列表 1</li>
                <li>列表 2</li>
                <li>列表 3</li>
             </ul>
        </div>
    </body>
</html>
这段代码在，<li> 元素被包裹在 <ul> 中，<ul> 在 <p> 中，<p> 又在 <div> 中。虽然嵌套层级较多，但 <li> 确实位于 <div> 的后代位置。

所以其结果就是其中的列表字体都会变红，即：

除此之外，后代选择器还可以是任意基础选择器的组合。(比如类选择器和 id 选择器)。使用示例如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .myclass li {
                color: red;
            }
             
        </style>
    </head>
    <body>
        <div class="myclass">
            <ul>
                <!-- 会变红 -->
                <li>列表 1</li>
                <li>列表 2</li>
                <li>列表 3</li>
            </ul>
        </div>      
        <div>     
            <ol>
                <!-- 不会变红 -->
                <li>列表 1</li>
                <li>列表 2</li>
                <li>列表 3</li>
            </ol>               
        </div>
    </body>
</html>

其展示结果如下图所示：

（2）伪类选择器

伪类选择器是 CSS 中用于定义元素状态的。它的使用方法如下：

标签:伪类名 {
    样式声明;   
}

它的常见的使用时应用在链接上，比如，我们在一些网站上看到的链接，当我们鼠标放上去，这个链接的颜色会改变，而当我们点击它后，这个链接的颜色也会改变。这就是通过伪类选择器来实现的。要实现这个效果，我们需要使用 a 标签，以及我们的伪类名，如下：

hover：鼠标悬停在元素上时的样式
active：元素被激活时的样式(即：鼠标按下了但是未弹起)

当然关于伪类名，肯定不止这两个，如果要了解更多，可以参考文档：CSS 伪类参考手册

上述实现点击效果的代码示例如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            a {
                /* 初始状态颜色设置为蓝色 */
                color: blue;
            }
            a:hover {
                color: red;
            }
            a:active {
                color: green;
            }
        </style>
    </head>
    <body>
        <a href="#"> 跳转到当前页面 </a>
    </body>
</html>

其结果演示：

除了链接，我们也可以对按钮实现这个样式的功能，其代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            input {
                color: blue;
            }
            input:hover {
                color: red;
            }
            input:active {
                color: green;
            }
        </style>
    </head>
    <body>
        <input type="button" value="按钮"> 
    </body>
</html>

其结果演示如图：

五、CSS元素的属性

CSS 属性有很多，可以参考文档：CSS 参考手册https://www.w3school.com.cn/cssref/index.asp下面我们介绍几种比较常见的设置。如果本文没有设置，大家可以参考这个手册来了解。

1. 如何设置字体样式？

在 CSS 中，设置字体样式主要通过一系列 font- 开头的属性来实现，具体实现请看以下解释。关于font属性，大家可以参考文档：https://www.w3school.com.cn/cssref/pr_font_font.asp

注意一下：以下介绍中的示例使用的都是内部样式表进行的展示。

（1）字体系列：font-family

基本语法如下：

选择器 {
    font-family:字体1,字体2,...字体n;
}

语法说明：

其中字体表示为双引号包裹字体类型（如："微软雅黑"，"Microsoft YaHei"，"宋体"），单引号也可以。注意：字体名称可以用中文，但是不建议。
多个字体之间使用逗号分隔。(从左到右查找字体, 如果都找不到, 会使用默认字体)
如果字体名有空格，则需要使用引号包裹。
建议使用常见字体，否则兼容性不好。

比如我们如果要让p标签中使用不同对应取值的class属性，使用不同的字体，就可以如下所示代码这样写：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .Type1 {
                font-family: "Microsoft YaHei";
            }
            .Type2 {
                font-family: "宋体";
            }
        </style>
    </head>
    <body>
        <p class="Type1">这是微软雅黑的字体</p>
        <p class="Type2">这是黑体的字体</p>
    </body>
</html>

其中使用class属性为Type1的标签中的字体类型就是微软雅黑，使用class属性为Type2的标签中的字体类型就是宋体，那么上述代码达到的效果如下所示：

（2）字体大小：font-size

基本语法：

选择器 {
    font-size: 字体大小;
}

解释：

其中的字体大小，可以是绝对大小，也可以是相对大小，还可以是关键字。下面我们主要解释一下绝对和相对大小中几个比较常用的单位。

绝对单位：

px：最常用的绝对单位。1px 对应屏幕上的一个物理像素点（在高分屏上会有映射）。

相对单位：

em： 1em 等于当前元素的字体大小（如果未设置，则继承父元素大小）。

%：通过其父元素的值来计算。比如，如果父元素宽度为200px，字体宽度设为50%，则字元素宽度实际为100px。

使用示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .Type1 {
                font-size: 10px;
            }
            .Type2 {
                font-size: 20px;
            }
        </style>
    </head>
    <body>
        <p class="Type1"> 这是第一段文字 </p>
        <p class="Type2"> 这是第二段文字 </p>
    </body>
</html>

展示结果：

（3）设置字体粗细：font-weight

基本语法：

选择器 {
    font-size: 取值;
}

其中的取值有以下几种：

normal：默认值。定义标准的字符。
bold：表示标准的粗体。
bolder：表示特粗体。
lighter：表示细体。
数字：取值为100,,200,300,...,900 表示粗细程度。100表示最细，400 等同于 normal，而 700 等同于 bold。

使用方法同上。

（4）字体样式：font-style

基本语法：

选择器 {
    font-style: 取值;
}

其中的取值有以下几种：

normal：默认值。表示不使用斜体。
italic：浏览器会显示一个斜体的字体样式。
oblique：浏览器会显示一个倾斜的字体样式。

使用方法同上。

（5）复合写法

上述的各个属性都可以通过font属性同时设置多个样式效果，即同时设置字体，大小，粗细等等。但是我们必须遵循以下顺序写各个属性：

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

其规则即：最后两项必须是“字号”和“字体”，其他属性必须放在“字号”之前。比如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p {
                font: oblique bolder 100px "Microsoft YaHei";
            }
        </style>
        </head>
    <body>
        <p>这是Microsoft YaHei字体,大小为100px,加粗，斜体的内容</p>
    </body>
</html>

展示效果：

其实，如果你记不住这个规则，也可以分开写，分开写更不容易出错。

2. 如何设置字体颜色？

CSS中字体的颜色设置是通过color属性实现的。设置颜色有三种方法，如下所示：

选择器 {
    color: red;  /* 颜色名称设置 */
    color: #ff0000; /* 使用十六进制设置 */
    color: rgb(255, 0, 0); /* rgb函数设置 */
}

解释：

直接使用颜色名称设置颜色，很好理解。下面我们来理解一下十六进制设置和rgb函数设置。

关于rbg函数，我们使用的这三个字母其实分别代表了三原色，即：R (red), G (green), B (blue)。通过这三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果。其中数值越大, 表示该分量的颜色就越浓，比如 rbg(255, 255, 255) 就表示白色；rbg(0, 0, 0) 就表示黑色。

而十六进制的原理和 rbg 的原理一样，只是十六进制表示方法是将原来rgb中的三个数字转换成了十六进制而已，数字两两一组，分别代码 red，green，blue。注意一下：如果这里的两两一组，这三组中，每一组的的数都相同，则可以缩写，比如： #ff00ff 可以写为 #f0f 。

3. 如何控制文本对齐/缩进/行高/文本装饰？

（1）控制对齐：text-align

控制对齐需要通过text-align属性来实现，可以参照文档：CSS text-align 属性它的基本语法如下：

选择器 {
    text-align: [值];
}

其中的值，常用的有以下几种：

center: 居中对齐
left: 左对齐
right: 右对齐

简单演示一下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .one {
                text-align: left;
            }
            .two {
                text-align: center;
            }
            .three {
                text-align: right;
            }
        </style>
    </head>
    <body>
        <p class="one">靠左对齐的文本</p>
        <p class="two">居中对齐的文本</p>
        <p class="three">靠右对齐的文本</p>
    </body>
</html>

结果展示：

（2）控制缩进：text-indent

一般用来控制段落的 首行缩进 (其他行不影响)，通过text-indent属性实现，其基本语法如下：

选择器 {
    text-indent: [值];
}

其中的取值为【数字+单位】，其中单位可以使用 px 或者 em。我们使用 em 作为单位更好，因为1 个 em 就是当前元素的文字大小，那么2em就表示首行缩进2字符了。

注意：缩进可以是负的, 表示往左缩进，但是这样会导致文字就冒出去了。

使用示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p {
                text-indent: 2em; /* 首行文本的缩进2文字内容 */
            }
        </style>
    </head>
    <body>
        <p>
            这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
        </p>
    </body>
</html>

结果展示：

可以发现，这里就缩进了2个汉字的内容。

（3）行高控制：line-height

什么是行高？行高指的是上下文本行之间的基线距离。什么是基线呢？在HTML中有以下几种线，如下图所示：

基线就是其中红色的线。

控制行高的基本语法为：

选择器 {
    line-height: [值];
}

这里的值我们常常可以取数字尺寸来实现，使用示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p {
                text-indent: 2em; /* 首行文本的缩进2文字内容 */
                line-height: 40px; /* 设置行高 */
            }
        </style>
    </head>
    <body>
        <p>
            这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容
        </p>
    </body>
</html>

展示结果：

（4）文本装饰：text-decoration

基本语法：

选择器 {
    text-decoration: [值];
}

其中的取值有：

none：啥都没有。可以给 a 标签去掉下划线
underline：下划线
overline：上划线
line-through：删除线

注意：如果要让文本同时拥有多种装饰线，你需要将这些值写在同一个text-decoration属性里，用空格隔开。否则会出现覆盖的情况（后面的值会覆盖前面的值）

样例展示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p {
                text-decoration: underline overline line-through;
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <p>
            这是内容这是内容这是内容这是内
        </p>
    </body>
</html>

结果展示：

注意：行高等与元素高度，就可以实现文字居中对齐

4. 背景属性设置：background

CSS的背景是通过background属性来设置的。它有许多子属性用来实现不同的背设置效果。

（1）背景颜色：background-color

使用background-color属性设置，基本语法如下：

选择器 {
    background-color: [值];
}

这里的取值和color的取值方式是一样的。

（2）背景图片：background-image

使用background-image属性设置，其语法如下：

选择器 {
    background-image: url("图片所在位置");
}

注意:

url 不要遗漏。
url 可以是绝对路径，也可以是相对路径。
url 上可以加引号，也可以不加。

但是在设置图片背景的时候，我们还需要考虑图片的大小，因为如果图片不能完全覆盖所指的的背景，则就会填充在所指定背景上，比如一下代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 为body的整个内容页面设置背景 */
            body {
                background-image: url("./image/male.png");
            }
        </style>
    </head>
    <body>
        
    </body>
</html>

其中的图片比较小，它的原图如下：

那么通过上述代码的展示后，将body作为选择器，设置的背景就会不断填充，覆盖整个页面，其展示结果如下图所示：

接下来，我们来看看背景的平铺设置。

（3）背景平铺：background-repeat

所谓平铺，其实就是填充。它通过background-repeat属性设置，语法如下所示：

选择器 {
    background-repeat: [平铺方式];
}

这里的平铺方式取值有：

repeat: 平铺，使用背景完全填充所指定的空间。如果不行，默认就是repeat。
no-repeat: 不平铺，即不重复的填充。
repeat-x: 水平平铺。只沿着水平方向填充。
repeat-y: 垂直平铺。只沿着竖直方向填充。

展示示例：

最后注意下：背景颜色和背景图片可以同时存在的，只是背景图片是在背景颜色上的方。

（4）背景位置：background-position

通过background-position属性设置，用于设置背景图片的具体起始位置，使用语法如下：

选择器 {
    background-position: 参数1 参数2;
}

说明：

一般都是设置两个参数，即精确单位，坐标（比如（20px 10px）设置偏移量）或者百分比（比如（50% 50%）设置图片的某点对齐容器的某点）。通过空格分隔，第一个参数表示水平位置，第二个参数表示垂直位置。(以左上角为原点（0,0）)。如果只给了一个数值，则该数值一定是 x 坐标，另一个默认垂直居中。
也可以只写一个参数，比如方位名词: (top, left, right, bottom)。但是，第二个参数默认是居中（水平居中或垂直居中）。

（5）背景尺寸：background-size

决定图片是保持原样、拉伸填满，还是按比例缩放。使用语法如下：

选择器 {
    background-size: [值];
}

取值主要有：

cover 等比缩放，直到图片完全覆盖当前容器。图片可能会被裁剪。
contain 等比缩放，直到图片完整显示在当前容器内。容器可能会有留白。
可以填具体的数值，如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比，按照父元素的尺寸设置

最后，关于背景设置也有复合写法，但也要注意一下细节的顺序问题。即：除了尺寸必须跟在位置后面用斜杠隔开，其他属性顺序基本随意。

5. 元素的显示模式

这里主要介绍两种：块级元素和行内元素

（1）块级元素

常见的块级元素标签有以下几种：

<div>：最通用的容器，没有语义，专门用来组合元素。
<p>：段落。
<h1> ~ <h6>：各级标题。
<ul> / <ol> / <li>：列表（无序、有序、列表项）。
<form>：表单。
<table>：表格。
<hr>：水平分割线（也是空元素）。

在上一篇HTML的文章中，它们的使用方法我们基本都介绍过。

它们的特点为：

独占一行：无论其内容多少，它都会从新的一行开始，并强制其后的元素换行。
默认宽度为100% ：宽度默认是父级元素宽度的 100% (和父元素一样宽)。
盒模型：是一个盒子，里面可以放行内和块级元素。这个盒子的高度，宽度，内外边距,，行高都可以控制（通过width、height、margin（外边距）和 padding（内边距）控制）。具体细节可以看一下盒模型的内容。

需要注意使用它们的嵌套规则：

虽然块级元素通常可以包含其他元素，但有一些重要的例外：

文字类块级元素不能包含块级元素，比如<p> 标签和 <h1>~`中不能包含<div>这样的块级元素。

行内元素中不能嵌套块级元素嵌套规则，比如 <span>、<a> 这样的行内元素，其内部只能包含文本或其他行内元素。

我们可以通过为这些标签设置背景颜色来观察它们：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                background-color: beige;
            }
            p {
                background-color: aquamarine;

                /* 设置p的盒子的宽度和高度 */
                width: 100px;
                height: 100px;
            }
            div {
                background-color: rgb(201, 241, 191);

                /* 设置div的盒子的宽度 */
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div>
            <p>哈哈哈</p>
            <p>哈哈哈</p>
            <p>哈哈哈</p>
            <p>哈哈哈</p>
        </div>
    </body>
</html>

其结果展示：

（2）行内元素

行内元素就是不会单独占一行的元素，一般都是用于修饰文本细节的。常见的行内元素有：

<span>：最通用的行内容器，没语义，专门用来加样式。
<a>：超链接。
<strong> / <b>：加粗。
<em> / <i>：斜体。
<u>：下划线。
<del> / <s>：删除线。
<input>：输入框（表单）。
<label>：表单标签。
<button>：按钮（注：虽然默认表现像行内块，但语义上常归为此类讨论）。
<img>：图片（特例：虽然它是行内元素，但它有宽高，且底部会有奇怪的间隙）。
<br>：换行符（空元素）。

除此之外，肯定还有，大家可以自行查询官方文档即可：HTML 元素参考 - HTML（超文本标记语言） | MDN

它们的特点有：

不独占一行：一行可以显示多个
宽高设置无效：设置高度, 宽度, 行高无效
左右外边距有效，但上下边距无效，内边距有效。
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素，不能放块级元素

注意事项：

<a> 标签内部不能再放 <a> 标签

特殊例外：虽然 HTML5 允许 <a> 包裹块级元素，但为了兼容性和语义清晰，建议先将 <a> 转换为块级或行内块（display: inline-block 或 block）后再包裹。

（3）显示模式的改变

在 CSS 中，“改变显示模式”是指利用 display 属性，强制改变 HTML 元素默认的排版行为。

我们可以通过修改 display 的值，在以下三种模式间自由切换：

display: block 改成块级元素 [常用]
display: inline 改成行内元素 [很少用]
display: inline-block 改成行内块元素

常见应用：

使用 display: inline 可以把 div 等变成行内元素，让多个div排在同一行。
为<a>设置 display: block;，让链接独占一行。

6. 盒模型

（1）认识盒模型的属性布局

上面我们介绍了块级元素，那么我们有改如何设置块级元素的高度，宽度，内外边距,，行高等属性呢？我们就需要认识盒模型。这个盒子由这几个部分构成：

内容 content
内边距 padding
边框 border
外边距 margin

对于一个块级元素的各个区域展示，如图所示：解释：

内容区（content）：位于最中心的橙色区域。这里存放着你真正想要展示的东西，比如文本、图片或者视频。它的尺寸由 width 和 height 属性决定。

内边距（padding）：这是紧挨着内容区的那一圈黄色区域。用来把内容从边框推开一点，避免文字紧贴着边框，让布局看起来不那么拥挤。

边框（border）这是包裹在内边距外面的深蓝色区域。它是盒子的边缘或轮廓。

外边距（margin）：这是最外层的浅绿色区域。他是完全透明的，不占据背景色，它的唯一目的就是控制盒子与周围元素的间隔。

（2）边框：border

边框是用border属性设置的，常用的有三种子属性：

border-width 边框粗细可以取值为：1px, 2px, thin, medium, thick。
border-style 边框线型，不设置style，则默认没有边框。常用取值有 solid (实线), dashed (虚线), dotted (点线), double (双线), none (无边框)
border-color 边框颜色，可以取值：red, #ff0000, rgb(255,0,0), transparent (透明)。

也可以简写，不要求顺序，比如：

border: 1px solid red;

就表示设置 1px粗的红色实边框。在实际开发中，我们几乎不分开写上面三个属性。

如果你只想给盒子的上、右、下、左其中一边加边框，可以使用方向性属性，比如：

/* 只设置上边框为2px粗的红色是实边框 */
border-top: 2px solid red;

/* 只设置右边框为1px粗的蓝色虚边框 */
border-right: 1px dashed blue;

如果想修改一条边的样式，可以利用CSS的层叠性，如：

border: 1px solid blue;
border-top: red;

这两行代码的最终结果就是设置只有上边框设为红色，其余为蓝色。

注意：边框是会撑大盒子的

因为 width 和 height 属性设置的只是内容的宽高，比如如果我们这里的有一个div盒子，将其 width 设为300 和 height 设为200，再将边框设为10px，即如下代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 300px;
                height: 200px;
                border: 10px solid green;
            }
        </style>
    </head>
    <body>
        <div>
            哈哈哈
        </div>
    </body>
</html>

通过按【F12】就可以来观察到我们的盒子大小，得一下界面：

如何不行要边框撑大盒子，则可以通过 box-sizing 属性可以修改浏览器的行为，使边框不再撑大盒子。如图所示：

（3）内边距：padding

盒子的内边距是通过padding属性来设置的。默认情况下，内容是顶着边框来放置的，使用 padding 则可以来控制这个距离，四个方向分别是有它的四个子属性设置的，即：

padding-top 设置上方的内边距
padding-bottom 设置下方的内边距
padding-left 设置左方的内边距
padding-right 设置右方的内边距

它们后面的取值都可以是以px（像素）为单位的值。使用示例如下：

其中浅绿色的部分就是内边距，听同时，我们也可以发现，内边距也是可以撑大盒子的。如果不想让它撑大盒子，则可以使用 box-sizing: border-box 属性使内边距不再撑大盒子。 (和上面 border 类似)

注意，上述设置内边距的写法可以简写，即可以把多个方向的 padding 合并到一起，它的写法有四种情况（都很重要）：

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

（4）外边距：margin

外边距是控制盒子和盒子之间的距离的。其给四个方向设置外边距的属性如下：

margin-top 上方的外边距
margin-bottom 下上方的外边距
margin-left 左上方的外边距
margin-right 右上方的外边距

其取值常常以像素为单位（px）。

来看看效果，如果没有设置外边距，则盒子与盒子之间的距离就是0px，如图所示：设置了外边距之后，其结果如图所示：

外边距的设置也有复合写法，即：

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

margin属性还可以让一个块级元素（如 div ）在父容器中水平居中，方法就是设置左右外边距为 auto ，前提条件是必须给该元素设置一个固定的宽度 (width) 。

注意：不能auto不能设置垂直居中。

三种写法都可以：

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

使用示例比如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 300px; /* 宽度 */
                height: 200px;
                border: 10px solid green;

                margin: 0 auto; /* 水平居中 */
            }
        </style>
    </head>
    <body>
        <div>
            哈哈哈
        </div>
    </body>
</html>

结果展示：

注意: 这个水平居中的方式和 text-align 不一样，margin: auto 是给块级元素用的，text-align: center 是让行内元素或者行内块元素居中的。

7. 弹性布局

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局。

弹性布局的核心在于父容器。当一个元素设置了 display: flex; 属性后，它就成为了一个弹性容器。容器内的所有直接子元素会自动变成弹性项目。 弹性容器的属性用于控制其内部所有项目的整体布局方式。常用的两个属性为：

justify-content：定义项目在主轴上（水平方向）的对齐方式。
align-items：定义项目在交叉轴上（竖直方向）的对齐方式。

注意：当父元素设置为 display: flex 之后，子元素的 float, clear, vertical-align 都会失效.

（1）水平方向的对齐：justify-content

justify-content 用于定义项目在主轴上（水平方向）的对齐方式。它的常用取值（其他取值参考CSS手册即可）如下：

start: 从主轴起点开始排列，这也是默认的对齐方式
center: 在主轴上居中对齐。
end: 在主轴终点对齐。
space-between: 两端对齐，项目之间的间隔相等。

使用示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .dad {
                width: 1000px;
                height: 500px;
                background-color: antiquewhite;

                /* 设置弹性布局 */
                display: flex;
            }
            .son {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="dad">
            <div class="son">1号</div>
            <div class="son">2号</div>
            <div class="son">3号</div>
        </div>
    </body>
</html>

其中.dad类为父，.son类为子。

此时页面展示如下：

然后如果我们在.dad中设置 justify-content: start; ，其结果同上。

如果在.dad中设置 justify-content: center; ，其结果如下图所示：

如果设置为 justify-content: end; ，其结果如下图所示：

如果设置为 justify-content: space-between; ，其结果如下图所示：

（2）竖直方向的对齐：align-items

align-items 用于定义项目在交叉轴上（竖直方向）的对齐方式。它的常用取值如下：

start: 从交叉轴起点开始对齐。
center: 在交叉轴上居中对齐。
end: 在交叉轴终点对齐。
stretch (默认): 这个是 align-items 的默认值。意思是如果子元素没有被显式指定高度, 那么就会填充满父元素的高度.

注意：align-items 只能针对单行元素来实现。如果有多行元素, 就需要使用 item-contents了（等会说）。

还是以上述的水平方向上对齐的示例为例，如果在.dad中设置 align-items: start; ，其结果如图所示：

如果设置为align-items: center;，其结果展示图如下所示：

如果设置为align-items: end;，其结果如图所示：

说明：水平和竖直方向一起配合使用，效果会更好

（3）出现多行的情况

这里我们简单来说一说。在弹性布局中只有当一行的宽度不够时，才会出现多行，并且必须要加上 flex-wrap: wrap; ，才能出现多行。 flex-wrap: wrap; 是多行的前提。如果没有它，所有的方块都会挤在第一行，甚至溢出容器。

所以如果没有 flex-wrap: wrap; ，则不论弹性容器怎么设置，它的弹性项目都只会以一行的实现显示。

比如：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .dad {
                width: 500px;
                height: 500px;
                background-color: antiquewhite;

                /* 设置弹性布局 */
                display: flex;
            }
            .son {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="dad">
            <div class="son">1号</div>
            <div class="son">2号</div>
            <div class="son">3号</div>
            <div class="son">4号</div>
            <div class="son">5号</div>
            <div class="son">6号</div>
        </div>
    </body>
</html>

这里容器的宽度是500，而这里是弹性容器，并且没有 flex-wrap: wrap; ，所以这6个字元素都会挤到一行，如图所示：

加上 flex-wrap: wrap; 后，才会有多行出现：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .dad {
                width: 500px;
                height: 500px;
                background-color: antiquewhite;

                /* 设置弹性布局 */
                display: flex;
                flex-wrap: wrap;
            }
            .son {
                background-color: aquamarine;
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="dad">
            <div class="son">1号</div>
            <div class="son">2号</div>
            <div class="son">3号</div>
            <div class="son">4号</div>
            <div class="son">5号</div>
            <div class="son">6号</div>
        </div>
    </body>
</html>

其结果为：

这时我们就可以使用 item-contents 了，则得到：

8. 圆角矩形的设置

一般来说，我们的盒子都是直角矩形的，在有些使用时候看起来并不美观，所以我们也可以将直角改成圆形的，通过 border-radius 就可以使边框带圆角效果。使用语法为：

选择器 {
    border-radius: [值];
}

这里的取值为内切圆的半径，数值越大，就越圆。

使用示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                border: 2px solid;
                width: 400px;
                height: 200px;
                background-color: azure;
                text-align: center;
                display: inline-block; /* 不换行 */
            }
            .Circle1 {
                border-radius: 10px;
            }
            .Circle2 {
                border-radius: 50px;
            }
            .Circle3 {
                border-radius: 100px;
            }
        </style>
    </head>
    <body>
        <p>普通的盒子</p>
        <div>
            宽400px <br> 高200px
        </div>
        <br>
        <p>设置了圆角矩形的盒子</p>
        <div class="Circle1">
            半径为10px
        </div>
        <div class="Circle2">
            半径为50px
        </div>
        <div class="Circle3">
            半径为100px
        </div>
    </body>
</html>

展示结果：

如果想要得到一个圆形，则将 border-radius 设置为正方形宽度的 50%即可。

六、Chrome 浏览器调试工具简单介绍 -- 查看 CSS 属性

当我们写了一个代码通过Chrome浏览器打开的时候，我们也可以来观察页面的各个属性。比如我们有以下代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                width: 300px;
                height: 200px;
                background-color: aliceblue;
                border: 10px solid;
                padding: 10px 20px 30px 40px; /* 内边距 */
                margin: 20px 30px 40px 50px; /* 外边距 */
            }
        </style>
    </head>
    <body>
        <div>
            <p>你好!</p>
        </div>
        <div>
            <p>Hello!</p>
        </div>
    </body>
</html>

通过Chrome浏览器打开，然后在按【F12】，就得到如下页面，其部分功能的简单说明（当前了解即可，后面我们再详细解释）也如下图所示：

然后我们可以点击如图所示的箭头，点了之后，我们就可以移动鼠标到目标页面，此时就会呈现出各个框架的意思，如图所示：

也可以鼠标移动到Elements中的代码中，此时右侧也会显示出对应内容，如图：

到这里，我们CSS差不多就结束了，对CSS的基本语法与用法有了大致了解，关于本文没有涉及的属性，大家自行查看CSS手册即可：CSS 手册

感谢各位观看！希望能多多支持！

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

计及自适应预测修正的微电网 MPC 优化调度方法研究（Python代码实现）

针对高比例可再生能源接入微电网后面临的源荷功率波动显著、预测误差难以抑制、储能长期约束难以闭环等问题，本文提出一种融合自适应预测修正与模型预测控制（MPC）的微电网优化调度方法。该方法构建自适应预测修正环节，基于源荷实测与预测的误差反馈动态调整预测结果，降低不确定性对调度的影响；以滚动优化为核心，在有限时域内实现运行成本最优与多设备约束协同满足；增设全局储能荷电状态（SOC）校正环节，确保调度周期

AtomGit开源社区

【一区顶刊复现】自适应强化学习机械臂固定时间轨迹跟踪控制(输入饱和不确定)研究（Matlab代码实现）

针对存在模型不确定性、外部扰动与执行器输入饱和约束的机械臂轨迹跟踪控制问题，提出一种融合自适应强化学习与非奇异快速终端滑模的固定时间控制方法。该方法采用径向基函数神经网络构建行动者 - 批评者强化学习架构，实现不确定系统的自适应最优控制策略生成与性能评估；设计新型非奇异快速终端滑模面，保障跟踪误差在固定时间内全局收敛并给出收敛时间上界估计；针对执行器饱和效应，构建非线性反卷绕补偿器实时抑制饱和引发