basefont.createfont设置表单字体_（09）CSS 给盒子、背景、链接、列表、表单、表格等加样式 | CSS...

原创：itsOli  @前端一万小时

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

1. 让一个元素“看不见”有几种方式？有什么区别？
2. 单行文本溢出加 ... 如何实现？
3. 如何在页面上实现一个圆形的可点击区域？
4. 解释下面代码的作用？字体里 \5b8b\4f53 代表什么？
    body{
      font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
    }

5. 如何去除列表元素的默认样式前面的点 · ？
  ✅ list-style: none;
  ❌ text-decoration: none;
  ❌ opacity: 0;
  ❌ default-type: none;

🙋上方面试题“参考答案详解”，请点击文末“

---

前言：通过前 8 篇文章基础知识的铺垫，我们也算是见识了 CSS 的“神通广大”。

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

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

1 CSS 实现如下边框效果

参考代码：
🔗源码及效果展示https://jsbin.com/wequzugoba/edit?html,css,output

HTML

html>

CSS

body {

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

参考代码：
🔗源码及效果展示 https://jsbin.com/hewomutoku/1/edit?html,css,output

HTML

html>

CSS

body,

3 CSS 实现如下两个表格效果

参考代码：
🔗源码及效果展示 https://jsbin.com/yaguhobamo/edit?html,css,output

HTML

html>

CSS

body {

❗️❗️❗️注释：结构选择器 第一类：

① 选择其父元素的第一个子元素。
E:first-child

② 选择其父元素的最后一个子元素。
E:last-child

③ 选择父元素下第 n 个元素或奇偶元素，n 的值为：数字/odd/even。
E:nth-child(n)

第二类：

① 

❓(用例子讲解)：试着运行以下代码，并对结果作出解释。
🔗源码及效果展示https://jsbin.com/jesaximine/edit?html,css,output

HTML

<div class="container">

CSS

.box:first-child {color: red;
}.box:first-of-type {background: blue;
}.box :first-child {font-size: 30px;
}.box :first-of-type {font-weight: bold;
}

💡答，以上 HTML 结构为：

1.

.box

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

.box

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

 ，②⑤ 使用的是  标签。故选同种标签的第一个，①② 生效；3.

.box 

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

4.

.box 

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

4 CSS 实现如下三角形

参考代码：
HTML

html>

CSS

t0：

🔗源码及效果展示https://jsbin.com/tuqihevite/edit?html,css,output

/*
🏆CSS 画三角形原理：
边框颜色 border-color 四个值默认的加载方向是(上、右、下、左) top right bottom left。
 */.t0 {width: 0;height: 0;border-style: solid;border-width: 100px 100px 100px 100px;border-color: blue yellow green red;
}

t1：

🔗源码及效果展示https://jsbin.com/pugototalu/edit?html,css,output

.t1 {width: 0;height: 0;border-style: solid;border-width: 100px 100px 0 100px; /*
                                     🚀通过将 bottom 的 width 值设置为 0 来把多余的位置
                                     去掉！
                                       */border-color: blue transparent transparent transparent;
}

t5：

🔗源码及效果展示https://jsbin.com/taparetoxo/edit?html,css,output🏆分析

以绿色的三角形为例，它的“高度”就是 CSS 中设置的 100px。而它的底边长则为：

我们可以看到，在绿色三角形中，从它的顶点垂直下来一条线将绿色三角形分为两个小的三角形：
① 左边小三角形受 left 影响；
② 右边小三角形受 right 影响。由此，我们可以画出 t5 这个三角形的形状：

.t5 {

5 CSS 对边框做圆角、圆形

🔗源码及效果展示https://jsbin.com/xovapuyofi/edit?html,css,output

参考代码：
HTML

<div class="circle-1">div>

CSS

.circle-1 {

6 CSS 给盒子加个“背景”

6.1 需要注意的

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

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

HTML

<div class="box">div>

CSS

.box {width: 200px;height: 200px;border: 1px solid;background-image: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 
}

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

HTML

<span class="box">span>

CSS

.box {width: 200px;height: 200px;border: 1px solid;background-image: url(https://qdywxs.github.io/css-images/css09-img01.jpg); 
}

6.2 对于 background-size 需要知道的

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

① 设置绝对长度值：

HTML

<div class="box">div>

CSS

.box {width: 200px;height: 200px;border: 1px solid;background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size: 200px 200px;
}

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

.box {width: 500px;height: 200px;border: 1px solid;background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size: 50%;
}

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

.box {width: 500px;height: 200px;border: 1px solid;background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size: contain;
}

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

.box {width: 600px;height: 200px;border: 1px solid;background: url(https://qdywxs.github.io/css-images/css09-img01.jpg) 0 0 no-repeat;background-size: cover;
}

6.3 CSS Sprite 精灵图

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

但由于图片的“可维护性”很差，现在一般都会选择用“字体图标”——在文章《CSS 给文本加样式：① 字体属性》中有详细讲解。

💡制作精灵图的网站：CSS Sprites Generatorhttps://www.toptal.com/developers/css/sprite-generator/

💡图片压缩网站：TinyPNGhttps://tinypng.com/

TinyPNG 使用智能有损压缩技术来减少 PNG 文件的文件大小，提高网站加载性能。

7 CSS 如何实现：单行文本溢出加 …

7.1 前置知识：CSS 中的 overflow 属性

p {overflow: 值;
}

值属性visible默认值，内容不会被修剪，会呈现在元素框之外；hidden内容会被修剪，并且其余内容是不可见的；scroll内容会被修剪，但浏览器会显示滚动条以便查看其余的内容；auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容；inherit规定应该从父元素继承 overflow 属性的值。


7.2 代码实现

🔗源码及效果展示https://jsbin.com/kujewijega/1/edit?html,css,output

HTML

html>

CSS

.card{

8 动手写出下边的页面

💡参考代码：
🔗源码及效果展示https://jsbin.com/yolanuwuwa/edit?html,css,output

HTML

html>

CSS

body,

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

祝好，qdywxs ♥ you！

点击“