（9）CSS 给盒子、背景、链接、列表、表单、表格等加样式

本知识学习用时：5小时，总第47/10000小时

前言：通过前 8 篇文章基础知识的铺垫，我们也算是见识了 CSS 的“神通广大”。不止 10 个大佬曾说过：整个前端的学习， HTML 和 CSS 才是最难学的，后边的 JS 等虽“号称”是真正意义上的编程，但学习过程却是呈“线性”平滑上升的。CSS 则不然，他总是给你一种：“哎哟，我掌握了哦，很简单嘛！”、“我**，怎么会这样，水太深了！”、“哦哦，原来是这个原理，我就说嘛！”……如此周而复始，虽不能说“生生不息”，但 CSS 的学习真的是一件细水长流的事。

那这篇文章，我们就把实际工作中最高频用到的“CSS 加样式”挨个列一列，用一行行代码来展示 CSS 是如何给“盒子”、“背景”、“链接”、“列表”、“表单”、“表格”等加样式的。

这篇的所有知识点为必掌握项，我们学习的时候可以先自己按要求写出样式，然后参照我的代码，把一行行全部弄懂。

一、CSS 实现如下边框效果

参考代码：

html

css

二、CSS 实现如下边框、按钮效果

参考代码：

html

css

三、CSS 实现如下两个表格效果

参考代码：

html

css

⚠️注释：结构选择器

第一类：

第二类：

❓例：试着运行以下代码，并对结果作出解释。

html

css

答：

以上 html 结构为

1.

匹配类名为 box 的元素的父元素的第一个子元素，为 ①，使其字体颜色为 red 。①生效；

2.

匹配类名为 box 的元素的父元素下使用“同种标签”的“第一个”标签元素。①③④ 使用的是

，②⑤ 使用的是

标签。故选同种标签的第一个，① ② 生效；

3.

选择类名为 box 的后代元素的第一个子元素，加样式。 故 ⑥ 生效；

4.

选择类名为 box 的后代元素同标签的第一个标签元素加样式。故⑥ ⑦ 生效。

四、CSS 实现如下三角形

参考代码：

html

css

五、CSS 对边框做圆角、圆形

参考代码：

html

css

六、CSS 给盒子加个“背景”

-- 需要注意的：

加个“背景”就是加个图片，这个图片是背景图片，背景图片相当于这个元素是一个窗口，而背景图片就是这个窗口后的风景。

假如这个窗口没有了，那这个背景图片也可能看不到，比如没有 height ,就没有窗口：

html

css

还有一个明显的例子：对于 span 他这个里边没有内容就代表着他没有宽度。当然就什么也没有。你稍微加一点文字，也会显示出来。

html

css

-- 对于 background-size 需要知道的：

background-size 的设置是去拉伸背景图片（给图片加一个长度的范围）以适应给定的“宽高”尺寸。

① 设置绝对长度值。

html

css

② 设置为 50% ，就代表窗口宽度的一半。

③ 设置为 contain ,缩放背景图片以完全装入背景区，可能背景区部分空白。代表不管你背景图片多么的异型，我们这个窗口都可以把你给包围起来。

④ 设置 cover ,缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

-- css sprite 精灵图

css sprite 指将不同的图片、图标合并在一张图上。使用 css sprite 可以减少网络请求，提高网页加载性能——其实就是使用“背景图片”的方式来展示这些放在一张图上的小图标。

但由于图片的“可维护性”很差，现在一般都会选择用“字体图标”——在文章 《

（5）CSS 给文本加样式——① 字体属性》中有详细讲解。

制作精灵图的网站：CSS Sprites Generator（谷歌直接搜索）

图片压缩网站：tinypng （谷歌直接搜索）——————TinyPNG 使用智能有损压缩技术来减少 PNG文件的文件大小，提高网站加载性能。

七、CSS 如何实现：单行文本溢出加 ...

html

css

后记：CSS 能做的事情还有很多，上边介绍的都是实际工作中的高频用法，属于必掌握。至于其他用法，我们要抱有敬畏之心去细水长流地认真学习，不必一蹴而就。

下篇，我们做一个小页面，把这之前学到的基础知识统统活用起来。加油！

欢迎继续关注下文 ：

（10）CSS 做个小页面

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）