38、CSS 属性与特性全解析-优快云博客

本文链接：https://blog.youkuaiyun.com/c6d7e8f9g/article/details/153253930

CSS 属性与特性全解析

1. CSS 属性概述

CSS 中有多种属性用于控制网页的不同方面，包括声音、视觉、排版等。下面将详细介绍一些重要的属性及其用法。

1.1 VOICE - FAMILY 属性

描述：设置语音家族名称的优先级列表。
媒体组 ：Aural
CSS2 家族类型 ：Aural（子家族：语音特性属性）
取值：
MALE | FEMALE | CHILD：分别代表男性、女性和儿童的通用语音值，可修改特定语音的值。
specific - voice name：特定的预定义语音名称。
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<P STYLE="VOICE - FAMILY: LAERTES, MALE;">
Laertes: Farewell, Ophelia, and remember well what
I have said to you.
</P>
<P STYLE="VOICE - FAMILY: OPHELIA, FEMALE;">
Ophelia: 'Tis in my memory lock'd, and you your-
self shall keep the key of it.
</P>
<P STYLE="VOICE - FAMILY: LAERTES, MALE;">
Laertes: Farewell.
</P>
<P STYLE="VOICE - FAMILY: MALE;">
Exit Laertes.
</P>

1.2 VOLUME 属性

描述：设置播放声音的动态范围级别，即音量。
媒体组 ：Aural
CSS2 家族类型 ：Aural（子家族：音量属性）
取值：
n（范围从 0（接近静音）到 100（最大音量））
% 值（范围从 0（接近静音）到 100（最大音量））
SILENT：音量关闭
X - SOFT：非常低的音量级别，相当于数值“0”（不意味着静音）
SOFT：低音量级别，相当于数值“25”
MEDIUM：中等音量级别，相当于数值“50”
LOUD：适度响亮的音量级别，相当于数值“75”
X - LOUD：非常响亮的音量级别，相当于数值“100”
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<P STYLE="VOLUME: MEDIUM;">
I'm the big gruff bear.
<IMG SRC="bear.gif">
<B STYLE="VOLUME: LOUD;">Roar!</B>
<P>

1.3 WHITE - SPACE 属性

描述：用于设置网页中空白空间和回车符的处理方式。
媒体组 ：Visual
CSS2 家族类型 ：Text
取值：
NORMAL：与该元素关联的 HTML 标签的浏览器默认行为。
NOWRAP：设置此值时，回车符和换行符将呈现为单个空格，但不影响换行。
PRE：设置此值时，文档中的所有空格、回车符和换行符将按原样显示。
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<P STYLE="WHITE - SPACE: NORMAL">
There
are no
extra white spaces
in
this sentence.
It is
displayed normally.
</P>
<P STYLE="WHITE - SPACE: PRE">
The
extra white
spaces and carriage
returns in
this sentence
are displayed.
</P>
<P STYLE="WHITE - SPACE: NOWRAP">
The
extra white
spaces and carriage
returns in
this sentence
are <B>not</B> displayed.
</P>

1.4 WIDOWS 属性

描述：设置段落必须留在页面顶部的最小行数。
媒体组 ：Visual, Paged
CSS2 家族类型 ：Paged media
取值：
n：一个整数值，指定段落中必须出现的行数；否则，它将被迫显示在前一页。默认值为 2。
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<STYLE>
@page {WIDOWS: 3;}
</STYLE>

1.5 WIDTH 属性

描述：将元素（通常是图像）缩放到指定的宽度。
媒体组 ：Visual
CSS2 家族类型 ：Visual formatting (Details)
取值：
AUTO：指定使用浏览器默认值。
%：相对于浏览器窗口宽度设置百分比值。
length (units)：以测量单位指定长度值。
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<IMG STYLE="WIDTH: AUTO" SRC="gordian3.jpg"> Regular size (AUTO setting)
<P>
<IMG STYLE="WIDTH: 25px" SRC="gordian3.jpg"> Set
to 25 pixels
<P>
<IMG STYLE="WIDTH: 25%" SRC="gordian3.jpg"> Set to
25% of the browser window's width

1.6 WORD - SPACING 属性

描述：设置单词之间的间距。
媒体组 ：Visual
CSS2 家族类型 ：Text
取值：
NORMAL：使用浏览器默认的单词间距值。
length (units)：以测量单位设置单词之间的长度值。
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<I STYLE="WORD - SPACING: 1cm">The words in this
sentence are all spaced 1cm apart.</I>

1.7 Z - INDEX 属性

描述：设置指定框相对于当前堆叠上下文的堆叠级别。它还确定指定框是否设置局部堆叠上下文。
媒体组 ：Visual
CSS2 家族类型 ：Visual formatting
取值：
n：一个整数值，表示指定元素框的堆叠级别。指定元素框还设置局部堆叠值。
AUTO：堆叠值与其父元素相同。指定元素框不设置局部堆叠值。
INHERIT：如果允许，采用父元素属性的相同值。
示例代码 ：

<HTML>
<HEAD>
<TITLE>Z - Index Example</TITLE>
<STYLE>
.stack {POSITION: ABSOLUTE; RIGHT: 1CM; BOTTOM:
0CM;}
</STYLE>
</HEAD>
<BODY STYLE="FONT - SIZE: XX - LARGE; COLOR: YEL -
LOW;">
<P>
<IMG SRC="fokker.gif" CLASS="stack" STYLE="Z -
INDEX: 1" width=369 height=201 border=0 alt="">
<DIV ID="text1" CLASS="stack" STYLE="Z - INDEX: 3">
This text overlays image1.
</DIV>
<DIV ID="text2">This text has not been assigned a
Z - INDEX value, so it lies beneath everything else.
</DIV>
<DIV ID="text3" CLASS="stack" STYLE="Z - INDEX: 2">
This text will underlay text1, but overlay image1.
</DIV>
</BODY>
</HTML>

2. 伪类和伪元素

伪类和伪元素用于为网页元素添加特殊效果。以下是一些常见的伪类和伪元素及其作用：

伪类/伪元素	作用
ACTIVE	确定用户点击（或以其他方式选择）超文本链接时的显示方式。
AFTER	在所选网页元素的末尾插入字符串和/或修改显示。
BEFORE	在所选网页元素的开头插入字符串和/或修改显示。
FIRST	用于指定网页第一页的样式（与 @page 规则结合使用）。
FIRST - CHILD	仅将第一个子网页元素设置为具有与父网页元素相同的显示特征。
FIRST - LETTER	设置段落第一行文本的第一个字母的显示方式。
FIRST - LINE	设置段落第一行文本的显示方式。
FOCUS	当与之关联的网页元素具有“焦点”（即可以以某种形式接受用户输入）时生效。
HOVER	当光标位于与之关联的网页元素上方时生效。
LANG	设置与特定网页元素关联的语言。
LEFT	用于指定所有左手边网页的样式（与 @page 规则结合使用）。
LINK	确定“静止”（即未点击）的超文本链接在网页上的显示方式。
RIGHT	用于指定所有右手边网页的样式（与 @page 规则结合使用）。
VISITED	确定超文本链接被访问（即点击）后的显示方式。

3. 媒体类型

CSS 支持多种媒体类型，不同的媒体类型适用于不同的设备和场景。以下是一些常见的媒体类型及其说明：

媒体类型	说明	关联媒体组
ALL	网页内容适用于所有设备，包括所有媒体类型。	-
AURAL	网页内容适用于“语音浏览器”（配备语音合成器）。	Continuous, Aural, Interactive/Static
BRAILLE	网页内容适用于盲文触觉交互式反馈设备。	Continuous, Tactile, Grid, Interactive/Static
EMBOSSED	网页内容设计用于以盲文打印。	Paged, Tactile, Grid, Interactive/Static
HANDHELD	网页内容旨在显示在手持设备上（通常具有小的单色屏幕和有限的带宽）。	Continuous/Paged, Visual, Grid/Bitmap, Interactive/Static
PRINT	网页内容专门设计用于打印，或可以以打印预览形式在屏幕上查看。	Paged, Visual, Bitmap, Static
PROJECTION	网页内容用于投影，直接投影或从打印透明胶片投影。	Paged, Visual, Bitmap, Static
SCREEN	网页内容设计用于标准彩色计算机显示器。	Continuous, Visual, Grid, Interactive/Static
TTY	网页内容设计用于电传显示器或使用固定间距字符网格的终端。	Continuous, Visual, Grid, Interactive/Static
TV	网页内容旨在显示在电视屏幕上（通常分辨率较低、彩色显示、有声音且滚动能力有限）。	Continuous/Paged, Visual/Aural, Bitmap, Interactive/Static

4. 颜色表示方法

在 CSS 中，可以通过以下五种方式指定颜色：
1. 使用预定义的颜色名称（例如，“BLUE”）
2. 使用前面带有井号的完整十六进制颜色值（例如，“#00FF00”）
3. 使用前面带有井号的压缩十六进制颜色值，其中每个数字重复（例如，“#0F0”）
4. 使用前面带有“RGB”的三位数 RGB（“Red Green Blue”）颜色值，每个数字指定从 0 到 255 的颜色用量，数字包含在圆括号中（例如，RGB(0,255,0)）
5. 使用前面带有“RGB”的三值 RGB 百分比颜色值，每个数字指定从 0% 到 100% 的颜色百分比，百分比值包含在圆括号中（例如，RGB(0%,100%,0%)）

4.1 示例代码

<HTML>
<HEAD>
<TITLE>Color Formats</TITLE>
</HEAD>
<BODY STYLE="FONT - SIZE: LARGE">
<P STYLE="COLOR: LIME;">
This text should be lime green <CODE>(STYLE="COLOR: LIME;")</CODE>.
</P>
<P STYLE="COLOR: #00FF00;">
This text should be lime green <CODE>(STYLE="COLOR: #00FF00;")
</CODE>.
</P>
<P STYLE="COLOR: #0F0;">
This text should be lime green <CODE>(STYLE="COLOR: #0F0;")</CODE>.
</P>
<P STYLE="COLOR: RGB(0,255,0);">
This text should be lime green <CODE>(STYLE="COLOR: RGB(0,255,0);")
</CODE>.
</P>
<P STYLE="COLOR: RGB(0%,100%,0%);">
This text should be lime green <CODE>(STYLE="COLOR: RGB(0%,100%,0%);")
</CODE>.
</P>
</BODY>
</HTML>

4.2 主要浏览器支持情况

浏览器	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
支持情况	Partial	Safe	Partial	Safe	Safe	Safe	Safe	Safe

4.3 VGA 调色板颜色名称

根据 CSS 规范，浏览器应能够识别与 Windows VGA 调色板颜色对应的 16 个核心颜色名称。以下是这些颜色名称及其十六进制等效值：

颜色名称	十六进制值
Aqua	00FFFF
Black	000000
Blue	0000FF
Fuchsia	FF00FF
Gray	808080
Green	008000
Lime	00FF00
Maroon	800000
Navy	000080
Olive	808000
Purple	800080
Red	FF0000
Silver	C0C0C0
Teal	008080
White	FFFFFF
Yellow	FFFF00

4.4 “安全” 216 色调色板

虽然许多显示器能够呈现多达 1670 万种颜色，但仍有许多计算机显示器一次只能显示 256 种颜色。在这些颜色中，只有 216 种颜色可以在不抖动到不同颜色值的情况下显示。以下是“安全”颜色值的列表，这些值将在能够显示至少 256 种颜色的系统上统一显示且不抖动。“安全”值是包含以下十六进制值的任意组合的十六进制值：
- 00
- 33
- 66
- 99
- CC
- FF

具体的“安全”颜色值表格如下：
| | 0000 | 3300 | 6600 | 9900 | CC00 | FF00 |
| — | — | — | — | — | — | — |
| 00 | 000000 | 003300 | 006600 | 009900 | 00CC00 | 00FF00 |
| | 000033 | 003333 | 006633 | 009933 | 00CC33 | 00FF33 |
| | 000066 | 003366 | 006666 | 009966 | 00CC66 | 00FF66 |
| | 000099 | 003399 | 006699 | 009999 | 00CC99 | 00FF99 |
| | 0000CC | 0033CC | 0066CC | 0099CC | 00CCCC | 00FFCC |
| | 0000FF | 0033FF | 0066FF | 0099FF | 00CCFF | 00FFFF |
| 33 | 330000 | 333300 | 336600 | 339900 | 33CC00 | 33FF00 |
| | 330033 | 333333 | 336633 | 339933 | 33CC33 | 33FF33 |
| | 330066 | 333366 | 336666 | 339966 | 33CC66 | 33FF66 |
| | 330099 | 333399 | 336699 | 339999 | 33CC99 | 33FF99 |
| | 3300CC | 3333CC | 3366CC | 3399CC | 33CCCC | 33FFCC |
| | 3300FF | 3333FF | 3366FF | 3399FF | 33CCFF | 33FFFF |
| 66 | 660000 | 663300 | 666600 | 669900 | 66CC00 | 66FF00 |
| | 660033 | 663333 | 666633 | 669933 | 66CC33 | 66FF33 |
| | 660066 | 663366 | 666666 | 669966 | 66CC66 | 66FF66 |
| | 660099 | 663399 | 666699 | 669999 | 66CC99 | 66FF99 |
| | 6600CC | 6633CC | 6666CC | 6699CC | 66CCCC | 66FFCC |
| | 6600FF | 6633FF | 6666FF | 6699FF | 66CCFF | 66FFFF |
| 99 | 990000 | 993300 | 996600 | 999900 | 99CC00 | 99FF00 |
| | 990033 | 993333 | 996633 | 999933 | 99CC33 | 99FF33 |
| | 990066 | 993366 | 996666 | 999966 | 99CC66 | 99FF66 |
| | 990099 | 993399 | 996699 | 999999 | 99CC99 | 99FF99 |
| | 9900CC | 9933CC | 9966CC | 9999CC | 99CCCC | 99FFCC |
| | 9900FF | 9933FF | 9966FF | 9999FF | 99CCFF | 99FFFF |
| CC | CC0000 | CC3300 | CC6600 | CC9900 | CCCC00 | CCFF00 |
| | CC0033 | CC3333 | CC6633 | CC9933 | CCCC33 | CCFF33 |
| | CC0066 | CC3366 | CC6666 | CC9966 | CCCC66 | CCFF66 |
| | CC0099 | CC3399 | CC6699 | CC9999 | CCCC99 | CCFF99 |
| | CC00CC | CC33CC | CC66CC | CC99CC | CCCCCC | CCFFCC |
| | CC00FF | CC33FF | CC66FF | CC99FF | CCCCFF | CCFFFF |
| FF | FF0000 | FF3300 | FF6600 | FF9900 | FFCC00 | FFFF00 |
| | FF0033 | FF3333 | FF6633 | FF9933 | FFCC33 | FFFF33 |
| | FF0066 | FF3366 | FF6666 | FF9966 | FFCC66 | FFFF66 |
| | FF0099 | FF3399 | FF6699 | FF9999 | FFCC99 | FFFF99 |
| | FF00CC | FF33CC | FF66CC | FF99CC | FFCCCC | FFFFCC |
| | FF00FF | FF33FF | FF66FF | FF99FF | FFCCFF | FFFFFF |

4.5 常见颜色及其十六进制等效值

以下是常见颜色及其十六进制等效值的列表，列表从白色变体开始，然后是黑色和灰色，最后是从红色到紫色的全光谱颜色。

颜色名称	十六进制值	颜色名称	十六进制值
Snow	FFFAFA	Lavender Blush	FFF0F5
Ghost White	F8F8FF	Misty Rose	FFE4E1
White Smoke	F5F5F5	White	FFFFFF
Gainsboro	0EDCDC	Black	000000
Floral White	FFFAF0	Dark Slate Gray	2F4F4F
Old Lace	FDF5E6	Dim Gray	696969
Linen	FAF0E6	Slate Gray	708090
Antique White	FAEBD7	Light Slate Gray	778899
Papaya Whip	FFEFD5	Gray	BEBEBE
Blanched Almond	FFEBCD	Light Gray	D3D3D3
Bisque	FFE4C4	Midnight Blue	191970
Peach Puff	FFDAB9	Navy Blue	000080
Navajo White	FFDEAD	Cornflower Blue	6495ED
Moccasin	FFE4B5	Dark Slate Blue	483D8B
Cornsilk	37F8DC	Slate Blue	6A5ACD
Ivory	FFFFF0	Medium Slate Blue	7B68EE
Lemon Chiffon	FFFACD	Light Slate Blue	8470FF
Seashell	FFF5EE	Medium Blue	0000CD
Honeydew	F0FFF0	Royal Blue	4169E1
Mint Cream	F5FFFA	Blue	0000FF
Azure	F0FFFF	Dodger Blue	1E90FF
Alice Blue	F0F8FF	Deep Sky Blue	0013FF
Lavender	E6E6FA	Sky Blue	87CEEB
Light Sky Blue	87CEFA	Yellow Green	9ACD32
Steel Blue	4682B4	Forest Green	228B22
Light Steel Blue	B0C4DE	Olive Drab	6B8E23
Light Blue	ADD8E6	Dark Khaki	BDB76B
Powder Blue	B0E0E6	Khaki	F0E68C
Pale Turquoise	AFEEEE	Pale Goldenrod	EEE8AA
Dark Turquoise	00CED1	Light Goldenrod Yellow	FAFAD2
Medium Turquoise	48D1CC	Light Yellow	FFFFE0
Turquoise	40E0D0	Yellow	FFFF00
Cyan	00FFFF	Gold	FFD700
Light Cyan	E0FFFF	Light Goldenrod	EEDD82
Cadet Blue	5F9EA0	Goldenrod	DAA520
Medium Aquamarine	66CDAA	Dark Goldenrod	B8860B
Aquamarine	7FFFD4	Rosy Brown	BC8F8F
Dark Green	006400	Indian Red	CD5C5C
Dark Olive Green	556B2F	Saddle Brown	8B4513
Dark Sea Green	8FBC8F	Sienna	A0522D
Sea Green	2E8B57	Peru	CD853F
Medium Sea Green	3CB371	Burlywood	DEB887
Light Sea Green	20B2AA	Beige	F5F5DC
Pale Green	98FB98	Wheat	F5DEB3
Spring Green	00FF7F	Sandy Brown	F4A460
Lawn Green	7CFC00	Tan	D2B48C
Green	00FF00	Chocolate	D2691E
Chartreuse	7FFF00	Firebrick	B22222
Medium Spring Green	00FA9A	Brown	A52A2A
Green Yellow	ADFF2F	Dark Salmon	E9967A
Lime Green	32CD32	Salmon	FA8072
Light Salmon	FFA07A	Medium Violet Red	C71585
Orange	FFA500	Violet Red	D02090
Dark Orange	FF8C00	Magenta	FF00FF
Coral	FF7F50	Violet	EE82EE
Light Coral	F08080	Plum	DDA0DD
Tomato	FF6347	Orchid	DA70D6
Orange Red	FF4500	Medium Orchid	BA55D3
Red	FF0000	Dark Orchid	15332CC
Hot Pink	FF69B4	Dark Violet	9400D3
Deep Pink	FF0E93	Blue Violet	8A2BE2
Pink	FFCCB	Purple	A020F0
Light Pink	FFB6C1	Medium Purple	9370DB
Pale Violet Red	DB7093	Thistle	D8BFD8
Maroon	B03060

5. 测量单位

在 CSS 中，有八种测量单位可与 CSS 属性结合使用：
- inches – IN
- millimeters – MM
- centimeters – CM
- picas – PC
- points – PT
- pixels – PX
- m - lengths – EM
- x - heights – EX

5.1 示例代码

<HTML>
<HEAD>
<TITLE>Length Units</TITLE>
<STYLE TYPE="text/css">
.NOLEFTMARGIN {MARGIN-LEFT: 0;}
.INCH {MARGIN-LEFT: 1IN;}
.MM {MARGIN-LEFT: 25.4MM;}
.CM {MARGIN-LEFT: 2.54CM;}
.PICA {MARGIN-LEFT: 6PC;}
.POINT {MARGIN-LEFT: 72PT;}
.EX {MARGIN-LEFT: 12EX;}
.EM {MARGIN-LEFT: 6EM;}
.PIXEL {MARGIN-LEFT: 96PX;}
</STYLE>
</HEAD>
<BODY STYLE="font-family : monospace;">
<P CLASS="NOLEFTMARGIN">
This paragraph has no left margin. All of the other
paragraphs that follow have margins that should be
set the equivalent of one inch.
</P>
<P CLASS="INCH">
This paragraph has a left margin set to 1 inch.
</P>
<P CLASS="MM">
This paragraph has a left margin set to 25.4 millimeters.
</P>
<P CLASS="CM">
This paragraph has a left margin set to 2.54 millimeters.
</P>
<P CLASS="PICA">
This paragraph has a left margin set to 6 picas.
</P>
<P CLASS="POINT">
This paragraph has a left margin set to 72 points.
</P>
<P CLASS="EX">
This paragraph has a left margin set to 12 x - heights.
</P>
<P CLASS="EM">
This paragraph has a left margin set to 6 em - spaces. The
major browsers calculate 1 ex = 1/2 em, which
is not technically correct, but at least it is consistent.
;-)
</P>
<P CLASS="PIXEL">
This paragraph has a left margin set to 96 pixels (which is
equivalent to 1 inch on the monitor
displaying this code).
</P>
</BODY>
</HTML>

5.2 主要浏览器支持情况

浏览器	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
支持情况	Partial	Partial	Partial	Partial	Partial	Partial	Partial	Partial

6. 百分比单位

在 CSS 中，使用数字后跟百分比符号（“%”）来指定百分比值。百分比值总是相对于另一个值，例如浏览器窗口的宽度或高度。

6.1 示例代码

<HTML>
<HEAD>
<TITLE>Percentages</TITLE>
</HEAD>
<BODY STYLE="FONT-SIZE: X-LARGE">
<P STYLE="MARGIN-LEFT: 25%;">
This text is indented 25% of the browser window to the
left. Here's some extra text to make this more
apparent.
</P>
<P STYLE="MARGIN-RIGHT: 25%;">
This text is indented 25% of the browser window to the
right. Here's some extra text to make this more
apparent.
</P>
</BODY>
</HTML>

6.2 主要浏览器支持情况

浏览器	IE 3.02	IE 4.x	IE 4.01 (Mac)	IE 4.5 (Mac)	IE 5.0 (Win. & UNIX)	NN 4.x	NN 4.0 (Mac & UNIX)	Opera 3.6
支持情况	Safe	Safe	Safe	Safe	Safe	Safe	Safe	Safe

7. 总结

综上所述，CSS 提供了丰富的属性和特性来控制网页的各个方面。从语音和音量的设置，到视觉效果、排版、颜色、测量单位和百分比单位的使用，每个属性都有其特定的用途和取值范围。

7.1 CSS 属性使用流程

graph LR
    A[选择属性] --> B{确定媒体组}
    B -- Aural --> C[设置语音或音量相关属性]
    B -- Visual --> D[设置视觉相关属性]
    B -- Paged --> E[设置分页相关属性]
    C --> F[选择合适取值]
    D --> F
    E --> F
    F --> G[编写代码实现效果]