[JavaScript知识库] 七：以理论结合实践方式梳理前端 CSS 3 ——

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性 -> 正文阅读

[JavaScript知识库]七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性

样式单位

相对长度单位指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸，绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）

相对单位	描述
em	它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
ex	依赖于英文字母小 x 的高度
ch	数字 0 的宽度
rem	rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
vw	viewpoint width，视窗宽度，1vw=视窗宽度的1%
vh	viewpoint height，视窗高度，1vh=视窗高度的1%
vmin	vw和vh中较小的那个。
vmax	vw和vh中较大的那个。
%

绝对单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in)
pt	point，大约1/72英寸； (1pt = 1/72in)
pc	pica，大约6pt，1/6英寸； (1pc = 12 pt)

样式颜色

颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合，CSS 3 中颜色的获取有以下几种：

颜色名称：red、yellow、green、blue、black、white、orange 等，其中透明为 transparent
十六进制：#ff0000、#ffff00、#00ff00、#0000ff 等，另外同组的可简写，例：#ff0000 = #f00，#ffffff = #fff，#000000 = #000
RGB 格式：rgb(255,0,0)、rgb(255,255,0)、rgb(0,255,0)、rgb(0,0,255) 等
RGBA 式：rgba(255,0,0,1)、rgba(255,255,0,1)、rgba(0,255,0,1)、rgba(0,0,255,1) 等，其中 a 表示透明度，1 = 100%，0.2 = 20%

属性	描述	CSS
opacity	设置一个元素的透明度级别	3

div.main {
	width: 200px;
	height: 50px;
	background-color: #f00;
	opacity: 0.5;
}

比较	RGBA	opacity
取值相同	0.5 = 50% 透明度	0.5 = 50% 透明度
作用不同	仅仅作用颜色透明度设置	将整个元素透明度设置
影响子元素	不影响	影响

在 CSS3 之前，表示颜色可以使用以下三种方法：

关键字表示法，例如黑色可以表示为 black，白色可以表示为 white
十六进制格式，例如黑色可以表示为 #000000，白色可以表示为 #FFFFFF
rgb()，例如黑色可以表示为 rgb(0,0,0)，白色可以表示为 rgb(255,255,255)

而在 CSS3 中，又新增三种方法，分别是：

```
hsl()
```
：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)
- hue：数值，取值范围为 0 ~ 359，例如红色为 0，绿色为 120，蓝色为 240
- saturate：百分比，100% 为实际色调，0% 为灰色
- lightness：百分比，50% 为实际色调，0% 为黑色，100% 为白色
```
rgba()
```
：r 表示红色 (red)，g 表示绿色 (green)，b 表示蓝色 (blue)，a 表示不透明度 (alpha)
- alpha：数值，取值范围为 0 ~ 1，0 为完全透明，1 为完全不透明
hsla()：h 表示色调 (hue)，s 表示饱和度 (saturate)，l 表示亮度 (lightness)，a 表示不透明度 (alpha)

常用技巧：

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一： 你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二： 在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。font-family: “\5FAE\8F6F\96C5\9ED1”，表示设置字体为“微软雅黑”。可以通过escape() 来测试属于什么字体

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYua	5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

阴影样式

我们既可以为块级元素添加阴影，也可以为文字添加阴影

（1）块级元素阴影

我们可以使用 box-shadow 为块级元素添加阴影

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

offset-x：水平偏移位置，必需
offset-y：垂直偏移位置，必需
blur-radius：模糊距离，可选，指定阴影的模糊程度
spread-radius：阴影半径，可选，指定阴影的区域大小
color：阴影颜色，可选，默认值是黑色
inset：默认情况下设置的阴影是外部阴影，使用 inset 可以将阴影设置为内部阴影

<!DOCTYPE html>
<html>
<head>
    <style>
        .moon {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: rgba(255, 244, 99, 0.8);
            box-shadow: 5px 5px 5px 10px rgba(255, 244, 99, 0.2);
        }
    </style>
</head>
<body>
    <div class="moon"></div>
</body>
</html>

（2）文字阴影

我们可以使用 text-shadow 属性为文字添加阴影

text-shadow: offset-x offset-y blur-radius color;

offset-x：水平偏移位置，必需
offset-y：垂直偏移位置，必需
blur-radius：模糊距离，可选
color：阴影颜色，可选，默认值是黑色

<!DOCTYPE html>
<html>
<head>
    <style>
        .shadow {
            font-size: xx-large;
            font-weight: bolder;
            color: black;
            background-color: white;
            text-shadow: 5px 5px 5px gray;
        }
    </style>
</head>
<body>
    <div class="shadow">你好，世界</div>
</body>
</html>

渐变样式

渐变效果有两种类型，分别是线性渐变（Linear Gradient）和径向渐变（Radial Gradient）

线性渐变：渐变效果向下、向右或向对角方向展开
径向渐变：渐变效果从中心开始向四周展开

（1）线性渐变

可以将 background-image 属性的值设置为 linear-gradient 添加线性渐变效果

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

```
direction
```
：指定渐变方向，可选，下面列举几个常见的值：
- to bottom：渐变方向从上到下展开，默认值
- to right：渐变效果从左到右展开
- to bottom right：渐变方向从左上到右下展开
- <degree>：水平线和渐变线之间的角度，按逆时针方向计算
color-stop1, color-stop2, ...：指定渐变颜色，必需

<!DOCTYPE html>
<html>
<head>
    <style>
        .rainbow {
            width: 800px;
            height: 100px;
            background-color: white; /* linear-gradient 不生效时使用 */
            background-image: linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF);
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>

（2）径向渐变

可以将 background-image 属性的值设置为 radial-gradient 添加线性渐变效果

background-image: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

shape：指定形状，可选，取值如下：
- ellipse：椭圆，默认值
- circle：圆形
size：表示渐变到哪停止，可选，取值如下：
- farthest-corner：最远角，默认值
- closest-corner：最近角
- farthest-side：最远边
- closest-side：最近边
position：表示中心点所在的位置，可选

它由两个百分数值决定，分别代表中心点在水平和垂直方向的位置，默认为 50% 50%
color-stop1, color-stop2, ...：指定渐变颜色，必需

<!DOCTYPE html>
<html>
<head>
    <style>
        .rainbow {
            width: 500px;
            height: 500px;
            background-color: white; /* radial-gradient 不生效时使用 */
            background-image: radial-gradient(circle farthest-corner at 0% 100%, #FF0000, #FF7F00, #FFFF00, #00FF00, #00FFFF, #0000FF, #8B00FF);
        }
    </style>
</head>
<body>
    <div class="rainbow"></div>
</body>
</html>

反射样式

通过 -webkit-box-reflect 属性我们可以实现镜面效果

-webkit-box-reflect：direction offset mask-box-image

```
direction
```
：反射方向，取值如下：
- above：倒影出现在原对象的上方
- below：倒影出现在原对象的下方
- left：倒影出现在原对象的左方
- right：倒影出现在原对象的右方
offset：倒影与原对象之间的间距
mask：遮罩效果，图片或者渐变

<!doctype html>
<html>
<head>
    <style>
        .reflect {
            font-size: xx-large;
            font-weight: bolder;
            -webkit-box-reflect: below 5px linear-gradient(transparent, rgba(255, 255, 255, 0.2));
        }
    </style>
</head>
<body>
    <div class="reflect">你好，世界</div>
</body>
</html>

字体样式

@font-face 规则用来加载字体，它甚至可以让我们使用服务端的字体文件，一个例子如下：

@font-face
{
    /* font-family 属性指定字体名称 */
    font-family: myFont;
    /* src 属性指定资源位置 */
    src: url('myFont.ttf'), url('myFont.eot')/* IE9 */;
}

然后就能在文件中直接使用，例子如下：

.use-my-font {
    font-family: myFont; /* 自定义的字体名称 */
}

媒体查询

@media 规则允许在相同样式表为不同媒体设置不同的样式，常用于不同移动端设备兼容处理

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
	@media screen and (min-width: 360px) {
        .media-style {
            background-color: rgba(255, 0, 0, 0.5);
        }
    }
    @media screen and (min-width: 640px) {
        .media-style {
            background-color: rgba(0, 255, 0, 0.5);
        }
    }
    @media screen and (min-width: 800px) {
        .media-style {
            background-color: rgba(0, 0, 255, 0.5);
        }
    }
</style>
</head>

<body>
    <div class="media-style">
        这里的样式随着浏览器窗口不同大小而变更
    </div>
</body>
</html>

浏览器样式

一个网页的渲染样式，不仅仅是开发者自定义样式，在不同浏览器平台上，浏览器自带代理样式

通过 F12 打开浏览器开发者工具，方便开发者查看页面 HTML 元素所具有的 CSS 样式，以下常用开发者工具解析

Elements – 用于查找查看：HTML 标签、样式、盒子模型、事件、HTML DOM 元素信息等
Console – 用于打印 JavaScript 编程输出信息
Sources – 用于查看管理网站项目结构以及文件详情，还可以设置断点调试 JavaScript
Network – 用于查看网站资源缓存数据，也可以查看前端请求后端接口信息及返回数据
Application – 用于查看网站本地存储信息（Cookie、Local、Session、WebSQL 等）

样式覆盖规则

有的时候 CSS 真的十分调皮，明明我们给一个元素指定了样式，但是在页面上却没有一点改变

这时我们就要考虑是不是别处指定的样式覆盖了当前指定的样式呢？

所以了解一下样式覆盖规则还是十分有必要的，对于一个元素的某个属性而言，表现出来的样式会遵循以下的规则

（1）内联样式 > 内部样式表 / 外部样式表

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; } /* 内部样式表 */
    </style>
</head>
<body>
    <div style="color: green;" id="title"> <!-- 内联样式 -->
        Hello World
    </div>
</body>
</html>

【最终效果（内联样式优先）】Hello World

（2）在内部样式表 / 外部样式表中，直接指定的样式 > 继承祖先的样式

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; }
        span { color: green; } /* 直接指定 span 标签样式 */
    </style>
</head>
<body>
    <div id="title">
        <span>Hello World</span> <!-- span 标签也会继承 div 标签的样式 -->
    </div>
</body>
</html>

【最终效果（直接指定的样式优先）】Hello World

（3）对于直接指定的样式，权值大的优先；如果权值相同，后定义的优先【重要】

当直接指定的样式发生冲突时，根据定义该样式的选择器的权值大小进行比较，权值大的优先

选择器的权值计算定义如下：

id 选择器 >> class 选择器 >> 标签选择器，其中同一类型的选择器权值相同
后代选择器的权值等于其包含的各级选择器的权值之和

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title span { color: red; } /* 后代选择器 = id 选择器（#title） + 标签选择器（span） */
        #intro { color: green; } /* id 选择器（#intro） */
    </style>
</head>
<body>
    <div id="title">
        <span id="intro">Hello World</span> <!-- id 选择器 + 标签选择器 > id 选择器 -->
    </div>
</body>
</html>

【最终效果（权值大的优先）】Hello World

（4）对于继承祖先的样式，最近祖先优先

当继承祖先的样式发生冲突时，根据继承的关系进行比较，最近祖先优先

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red; }
        #intro { color: green; }
    </style>
</head>
<body>
    <div id="title"> <!-- 对于下面的 span 标签来说，在继承树上距离较远 -->
        <div id="intro"> <!-- 对于下面的 span 标签来说，在继承树上距离较近 -->
            <span>Hello World</span>
        </div>
    </div>
</body>
</html>

【最终效果（最近祖先优先）】Hello World

（5）!important 声明无视上面的规则，其指定的样式永远不被覆盖【重要】

其实这样的说法或许还有些许不准确，因为（有且仅有） !important 声明可以覆盖 !important 声明

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #title { color: red!important; } /* 加上 !important 声明的内部样式表 */
    </style>
</head>
<body>
    <div style="color: green;" id="title"> <!-- 内联样式 -->
        Hello World
    </div>
</body>
</html>