.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 厘米。