.CSS颜色

1.CSS颜色

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

 

• CSS颜色名

在 CSS 中，可以使用颜色名称来指定颜色。

• CSS背景色

您可以为HTML元素设置背景色。

<h1 style="">China</h1>
<p style="">China is a great country!</p>

• CSS文本颜色

您可以设置文本的颜色。

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

　　

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

• CSS边框颜色

您可以设置边框的颜色。

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

• CSS颜色值

在CSS中，还可以使用RGB值、HEX值、HSL值、RGBA值或者HSLA值来指定颜色。

与颜色名 "Tomato" 等效的CSS颜色值。

与颜色名"Tomato"等效的CSS颜色值，但是透明度为50%。

<h1 style="">...</h1>
<h1 style="">...</h1>
<h1 style="">...</h1>

<h1 style="">...</h1>
<h1 style="">...</h1>

 

• RGB颜色

在 CSS 中，可以使用下面的公式将颜色指定为RGB值。

rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。

 

• RGBA值

RGBA颜色值是具有alpha通道的RGB颜色值的扩展，alpha指定了颜色的不透明度。

RGBA颜色值指定为：

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：

 

2.CSS 背景

CSS 背景属性用于定义元素的背景效果。

• CSS background-color

background-color 属性指定元素的背景色。

页面的背景色设置如下：

body {
  background-color: lightblue;
}

 

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：

div {
  background-color: green;
  opacity: 0.3;
}

注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

 

3.CSS 背景图像

• background-image

background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

页面的背景图像可以像这样设置：

body {
  background-image: url("paper.gif");
}

注意：使用背景图像时，请使用不会干扰文本的图像。

还可以为特定元素设置背景图像，例如 <p> 元素：

p {
  background-image: url("paper.gif");
}

 

• CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

body {
  background-image: url("gradient_bg.png");
}

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。

 

• CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

 

• CSS background-position

background-position 属性用于指定背景图像的位置。

把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

 

4.CSS 背景附着

• CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

 

5.CSS 背景简写

CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您能够使用简写属性 background：

使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

在使用简写属性时，属性值的顺序为：

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

 

6.CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

 

• CSS 轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。

dashed - 定义虚线的轮廓。

solid - 定义实线的轮廓。

double - 定义双线的轮廓。

groove - 定义 3D 凹槽轮廓。

ridge - 定义 3D 凸槽轮廓。

inset - 定义 3D 凹边轮廓。

outset - 定义 3D 凸边轮廓。

none - 定义无轮廓。

hidden - 定义隐藏的轮廓。

下例展示了不同的 outline-style 值：

 

演示不同的轮廓样式：

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

效果如下：

 

• CSS 轮廓宽度

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）

medium（通常为 3px）

thick （通常为 5px）

特定尺寸（以 px、pt、cm、em 计）

下例展示了一些不同宽度的轮廓：

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

 

7.CSS 文本

• 文本颜色

color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 "red"

十六进制值 - 比如 "#ff0000"

RGB 值 - 比如 "rgb(255,0,0)"

页面的默认文本颜色是在 body 选择器中定义的。

body {
  color: blue;
}

h1 {
  color: green;
}

提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。

 

• 文本颜色和背景色

在本例中，我们定义了 background-color 属性和 color 属性：

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

 

• CSS 文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

div {
  text-align: justify;
}

• 文本方向

direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

 

• 垂直对齐

vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式：

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}

 

• 文字装饰

text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

a {
  text-decoration: none;
}

 

• 文本转换

text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

 

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

 

• 文字缩进

text-indent 属性用于指定文本第一行的缩进：

 

p {
  text-indent: 50px;
}

 

• 字母间距

letter-spacing 属性用于指定文本中字符之间的间距。

下例演示如何增加或减少字符之间的间距：

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

 

• 行高

line-height 属性用于指定行之间的间距：

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

 

• 字间距

word-spacing 属性用于指定文本中单词之间的间距。

下例演示如何增加或减少单词之间的间距：

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}

 

• 文本阴影

text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：

h1 {
  text-shadow: 2px 2px;
}

接下来，向阴影添加颜色（红色）：

 

h1 {
  text-shadow: 2px 2px red;
}

 

8.CSS 字体

• 字体样式

font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示

italic - 文本以斜体显示

oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}

 

• 字体粗细

font-weight 属性指定字体的粗细：

 

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}

 

• 字体变体

font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

 

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}

 

• 字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小

不允许用户在所有浏览器中更改文本大小（可访问性不佳）

当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小

允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

 

1.以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

 

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}

 

2.用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

 

h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}

在上例中，em 单位的文本大小与上一个例子中的像素大小相同。但是，若使用 em 尺寸，则可以在所有浏览器中调整文本大小。

不幸的是，旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大

 

3.响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

 

<h1 style="font-size:10vw">Hello World</h1>

 

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。

 

 

1.CSS颜色
指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

 

CSS颜色名
在 CSS 中，可以使用颜色名称来指定颜色。



CSS背景色
您可以为HTML元素设置背景色。



<h1 style="">China</h1>
<p style="">China is a great country!</p>
CSS文本颜色
您可以设置文本的颜色。


<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>
CSS边框颜色
您可以设置边框的颜色。



<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
CSS颜色值
在CSS中，还可以使用RGB值、HEX值、HSL值、RGBA值或者HSLA值来指定颜色。

与颜色名 "Tomato" 等效的CSS颜色值。



与颜色名"Tomato"等效的CSS颜色值，但是透明度为50%。



<h1 style="">...</h1>
<h1 style="">...</h1>
<h1 style="">...</h1>

<h1 style="">...</h1>
<h1 style="">...</h1>
 

RGB颜色
在 CSS 中，可以使用下面的公式将颜色指定为RGB值。

rgb(red, green, blue)

每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度。

例如，rgb(255, 0, 0) 显示为红色，因为红色设置为最大值（255），其他设置为 0。

要显示黑色，请将所有颜色参数设置为 0，如下所示：rgb(0, 0, 0)。

要显示白色，请将所有颜色参数设置为 255，如下所示：rgb(255, 255, 255)。



 

RGBA值
RGBA颜色值是具有alpha通道的RGB颜色值的扩展，alpha指定了颜色的不透明度。

RGBA颜色值指定为：

rgba(red, green, blue, alpha)

alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字：



 

2.CSS 背景
CSS 背景属性用于定义元素的背景效果。

CSS background-color
background-color 属性指定元素的背景色。

页面的背景色设置如下：

body {
  background-color: lightblue;
}
 

opacity 属性指定元素的不透明度/透明度。取值范围为 0.0 - 1.0。值越低，越透明：



div {
  background-color: green;
  opacity: 0.3;
}
注意：使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读。

 

3.CSS 背景图像
background-image
background-image 属性指定用作元素背景的图像。

默认情况下，图像会重复，以覆盖整个元素。

页面的背景图像可以像这样设置：

body {
  background-image: url("paper.gif");
}
注意：使用背景图像时，请使用不会干扰文本的图像。

还可以为特定元素设置背景图像，例如 <p> 元素：

p {
  background-image: url("paper.gif");
}
 

CSS background-repeat
默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

body {
  background-image: url("gradient_bg.png");
}
如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
提示：如需垂直重复图像，请设置 background-repeat: repeat-y;。

 

CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}
 

CSS background-position
background-position 属性用于指定背景图像的位置。

把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
 

4.CSS 背景附着
CSS background-attachment
background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}
 

5.CSS 背景简写
CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}
您能够使用简写属性 background：

使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;
}
在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position
属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

 

6.CSS 轮廓


轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline
注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

 

CSS 轮廓样式
outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。

dashed - 定义虚线的轮廓。

solid - 定义实线的轮廓。

double - 定义双线的轮廓。

groove - 定义 3D 凹槽轮廓。

ridge - 定义 3D 凸槽轮廓。

inset - 定义 3D 凹边轮廓。

outset - 定义 3D 凸边轮廓。

none - 定义无轮廓。

hidden - 定义隐藏的轮廓。

下例展示了不同的 outline-style 值：

 

演示不同的轮廓样式：

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
效果如下：



 

CSS 轮廓宽度
outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）

medium（通常为 3px）

thick （通常为 5px）

特定尺寸（以 px、pt、cm、em 计）

下例展示了一些不同宽度的轮廓：



p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}
 

7.CSS 文本
文本颜色
color 属性用于设置文本的颜色。颜色由以下值指定：

颜色名 - 比如 "red"

十六进制值 - 比如 "#ff0000"

RGB 值 - 比如 "rgb(255,0,0)"

页面的默认文本颜色是在 body 选择器中定义的。

body {
  color: blue;
}

h1 {
  color: green;
}
提示：对于 W3C compliant CSS：如果您定义了 color 属性，则还必须定义 background-color 属性。

 

文本颜色和背景色
在本例中，我们定义了 background-color 属性和 color 属性：

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}
 

CSS 文本对齐
text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
当 text-align 属性设置为 "justify" 后，将拉伸每一行，以使每一行具有相等的宽度，并且左右边距是直的（就像在杂志和报纸中）：

div {
  text-align: justify;
}
文本方向
direction 和 unicode-bidi 属性可用于更改元素的文本方向：

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}
 

垂直对齐
vertical-align 属性设置元素的垂直对齐方式。

本例演示如何设置文本中图像的垂直对齐方式：

img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
 

文字装饰
text-decoration 属性用于设置或删除文本装饰。

text-decoration: none; 通常用于从链接上删除下划线：

a {
  text-decoration: none;
}
 

文本转换
text-transform 属性用于指定文本中的大写和小写字母。

它可用于将所有内容转换为大写或小写字母，或将每个单词的首字母大写：

 
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
 

文字缩进
text-indent 属性用于指定文本第一行的缩进：

 

p {
  text-indent: 50px;
}
 

字母间距
letter-spacing 属性用于指定文本中字符之间的间距。

下例演示如何增加或减少字符之间的间距：

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
 

行高
line-height 属性用于指定行之间的间距：

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
 

字间距
word-spacing 属性用于指定文本中单词之间的间距。

下例演示如何增加或减少单词之间的间距：

h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
 

文本阴影
text-shadow 属性为文本添加阴影。

最简单的用法是只指定水平阴影（2px）和垂直阴影（2px）：



h1 {
  text-shadow: 2px 2px;
}
接下来，向阴影添加颜色（红色）：

 



h1 {
  text-shadow: 2px 2px red;
}
 

8.CSS 字体
字体样式
font-style 属性主要用于指定斜体文本。

此属性可设置三个值：

normal - 文字正常显示

italic - 文本以斜体显示

oblique - 文本为“倾斜”（倾斜与斜体非常相似，但支持较少）

p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
 

字体粗细
font-weight 属性指定字体的粗细：

 

p.normal {
  font-weight: normal;
}

p.thick {
  font-weight: bold;
}
 

字体变体
font-variant 属性指定是否以 small-caps 字体（小型大写字母）显示文本。

在 small-caps 字体中，所有小写字母都将转换为大写字母。但是，转换后的大写字母的字体大小小于文本中原始大写字母的字体大小。

 

p.normal {
  font-variant: normal;
}

p.small {
  font-variant: small-caps;
}
 

字体大小
font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小很重要。但是，不应使用调整字体大小来使段落看起来像标题，或是使标题看起来像段落。

请始终使用正确的 HTML 标签，例如 <h1> - <h6> 用于标题，而 <p> 仅用于段落。

font-size 值可以是绝对或相对大小。

绝对尺寸：

将文本设置为指定大小

不允许用户在所有浏览器中更改文本大小（可访问性不佳）

当输出的物理尺寸已知时，绝对尺寸很有用

相对尺寸：

设置相对于周围元素的大小

允许用户在浏览器中更改文本大小

注释：如果您没有指定字体大小，则普通文本（如段落）的默认大小为 16px（16px = 1em）。

 

1.以像素设置字体大小

使用像素设置文本大小可以完全控制文本大小：

 

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

p {
  font-size: 14px;
}
 

2.用 em 设置字体大小

为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

W3C 建议使用 em 尺寸单位。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，默认大小 1em 为 16px。

可以使用这个公式从像素到 em 来计算大小：pixels/16=em。

 
h1 {
  font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
  font-size: 1.875em; /* 30px/16=1.875em */
}

p {
  font-size: 0.875em; /* 14px/16=0.875em */
}
在上例中，em 单位的文本大小与上一个例子中的像素大小相同。但是，若使用 em 尺寸，则可以在所有浏览器中调整文本大小。

不幸的是，旧版本的 Internet Explorer 仍然存在问题。放大文本时它比应该大的尺寸更大

 

3.响应式字体大小

可以使用 vw 单位设置文本大小，它的意思是“视口宽度”（"viewport width"）。

这样，文本大小将遵循浏览器窗口的大小，请调整浏览器窗口的大小，以查看字体大小如何缩放：

 
<h1 style="font-size:10vw">Hello World</h1>
 

视口（Viewport）是浏览器窗口的大小。 1vw = 视口宽度的 1％。如果视口为 50 厘米宽，则 1vw 为 0.5 厘米。