超级会员免费看
CSS 属性详解：从语音到视觉的全方位设置
在网页设计中，CSS 属性起着至关重要的作用，它可以控制网页元素的各个方面，包括语音效果和视觉呈现。下面将详细介绍一系列常用的 CSS 属性。
1. 语音相关属性
语音相关属性主要用于控制网页内容在语音朗读时的效果，以下是一些常见的语音属性及其用法。
1.1 PAUSE - AFTER 和 PAUSE - BEFORE
这两个属性分别用于设置元素前后的语音停顿。
-
描述
：
PAUSE - AFTER
设置元素之后的语音停顿值，
PAUSE - BEFORE
设置元素之前的语音停顿值。
-
取值
：
-
n
：以毫秒或秒为单位的时间值。
-
%
：相对于
SPEECH - RATE
属性设置的文本朗读速度的百分比值。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<P STYLE="PAUSE - AFTER: 0.5S;">Need a dramatic pause?</P> You just got one.
Need a dramatic pause?
<P STYLE="PAUSE - BEFORE: 500MS;">You just got one.</P>
1.2 PITCH 和 PITCH - RANGE
PITCH
用于设置语音的平均音高，
PITCH - RANGE
用于指定语音音高的变化范围。
-
PITCH
：
-
描述
：设置给定语音的平均音高。
-
取值
：
-
n HZ
：以赫兹为单位设置语音的数值。
-
X - LOW | LOW | MEDIUM | HIGH | X - HIGH
：表示不同的音高范围，具体音高取决于所使用的语音家族。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<P STYLE="VOICE - FAMILY: MALE; PITCH: MEDIUM;">
Hamlet: What hour now?
</P>
<P STYLE=" VOICE - FAMILY: MALE; PITCH: LOW;">
Horatio: I think it lacks of twelve.
</P>
<P STYLE=" VOICE - FAMILY: MALE; PITCH: X - LOW;">
Marcellus: No, it is struck.
</P>
- PITCH - RANGE ：
- 描述 ：指定特定语音的音高变化。
-
取值
：
-
n：取值范围在 0 到 100 之间的数值，50 为正常音高范围，0 产生单调语音，100 产生高度生动的语音。 -
INHERIT：继承父元素的属性值。
-
- 示例代码 ：
<P STYLE="PITCH - RANGE: 25;">
Ghost: Revenge his foul and most unnatural murder.
</P>
<P STYLE="PITCH - RANGE: 80;">
Hamlet: Murder?
</P>
<P STYLE="PITCH - RANGE: 35;">
Ghost: Murder most foul, as in the best it is; but
this most foul, strange, and unnatural.
</P>
1.3 PLAY - DURING
该属性用于设置在读取特定网页元素时播放的声音文件。
-
描述
：设置在读取特定网页元素时作为“背景”播放的声音文件。
-
取值
：
-
URL(sound)
：指向浏览器支持格式的声音文件。
-
MIX
：将指定声音与可能存在的其他声音值叠加。
-
REPEAT
：在网页元素存在期间持续重复播放声音。
-
AUTO
：一旦选定的
PLAY - DURING
元素结束，任何父声音继续播放（而不是简单地重新启动）。
-
NONE
：无声音；如果存在父声音，也将其关闭。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<BODY STYLE="PLAY - DURING: WINDY - OUTDOORS.WAV REPEAT;">
Hamlet: Whither wilt thou lead me? Speak! I'll go no further.
<P STYLE="PLAY - DURING: GHOSTLY.WAV MIX REPEAT;">
Ghost: Mark me.
</P>
Hamlet: I will.
<P STYLE="PLAY - DURING: GHOSTLY.WAV MIX REPEAT;">
Ghost: My hour is almost come, when I to sulph'rous and tormenting flames must render up myself.
</BODY>
2. 视觉相关属性
视觉相关属性用于控制网页元素的外观和布局，以下是一些常见的视觉属性及其用法。
2.1 POSITION
该属性用于设置块级元素的定位方式。
-
描述
：设置块级元素的定位。
-
取值
：
-
STATIC
：块级元素正常定位，按照正常流布局。
-
RELATIVE
：块级元素的定位相对于正常流进行计算，并相对于其正常位置进行偏移。
-
ABSOLUTE
：块级元素使用
LEFT
、
RIGHT
、
TOP
和
BOTTOM
属性进行定位，与正常流分离。
-
FIXED
：块级元素的定位方式与
ABSOLUTE
相同，但相对于其他元素固定。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<STYLE>
@MEDIA SCREEN { {H1#first {POSITION: FIXED} }
@MEDIA PRINT { {H1#first {POSITION: STATIC} }
</STYLE>
2.2 QUOTES
该属性用于确定嵌入式引号中显示的引号类型。
-
描述
：确定嵌入式引号中显示的引号类型。
-
取值
：
-
string, string
：
CONTENT
属性使用的开始引号和结束引号值。
-
NONE
：不显示引号。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<HTML>
<TITLE>Quotes</TITLE>
<STYLE>
Q:LANG(EN) {QUOTES: '"' '"' "'" "'"}
Q:BEFORE {CONTENT: OPEN - QUOTE}
Q:AFTER {CONTENT: CLOSE - QUOTE}
</STYLE>
<BODY>
In the lecture the professor said <Q>Shakespeare was the one who said the immortal words <Q>to thine own self be true</Q></Q>
</BODY>
</HTML>
2.3 RICHNESS
该属性用于设置语音的“亮度”（也称为“丰富度”）。
-
描述
：设置所使用语音的“亮度”。语音越亮，在远处越容易听到。
-
取值
：
-
n
：设置给定语音的亮度值，范围在 0 到 100 之间，50 为正常亮度。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<P STYLE="VOICE - FAMILY: MALE; PITCH: LOW; PITCH - RANGE: 25; STRESS: 40; RICHNESS: 80;">
King: O, yet defend me, friends! I am but hurt.
</P>
<P STYLE="VOICE - FAMILY: MALE; PITCH: MEDIUM; PITCH - RANGE: 40; STRESS: 80; RICHNESS: 70;">
Hamlet: Here, thou incestuous, murd'rous, damned Dane,
Drink off this potion! Is thy union here?
Follow my mother.
</P>
<P STYLE="VOICE - FAMILY: MALE; PITCH: HIGH; PITCH - RANGE: 20; STRESS: 50; RICHNESS: 40;">
[King dies.]
</P>
3. 表格和文本相关属性
除了上述属性外，还有一些与表格和文本相关的属性，用于控制表格的布局和文本的显示效果。
3.1 TABLE - LAYOUT
该属性用于控制表格宽度的显示方式。
-
描述
：使用固定或自动值控制表格宽度的显示。
-
取值
：
-
AUTO
：使用自动表格布局。
-
FIXED
：使用固定表格布局。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<TABLE STYLE="TABLE - LAYOUT: AUTO;">
<TR>
<TD>This text is in the table</TD>
</TR>
</TABLE>
3.2 TEXT - ALIGN
该属性用于设置文本的对齐方式。
-
描述
：设置文本的对齐方式。
-
取值
：
-
CENTER | JUSTIFY | LEFT | RIGHT
：对齐指定元素包含的文本。
-
string
：表格单元格将根据此标识字符串进行对齐。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<P STYLE="TEXT - ALIGN: CENTER">Centered text</P>
<P STYLE="TEXT - ALIGN: JUSTIFY">Justified text</P>
<P STYLE="TEXT - ALIGN: LEFT">Left - aligned text</P>
<P STYLE="TEXT - ALIGN: RIGHT">Right - aligned text</P>
以下是这些属性的简单分类表格：
| 属性类型 | 属性名称 | 作用 |
| ---- | ---- | ---- |
| 语音属性 | PAUSE - AFTER、PAUSE - BEFORE | 设置语音停顿 |
| 语音属性 | PITCH、PITCH - RANGE | 设置语音音高和音高范围 |
| 语音属性 | PLAY - DURING | 设置语音播放的声音文件 |
| 视觉属性 | POSITION | 设置元素定位 |
| 视觉属性 | QUOTES | 设置引号类型 |
| 视觉属性 | RICHNESS | 设置语音亮度 |
| 表格和文本属性 | TABLE - LAYOUT | 控制表格布局 |
| 表格和文本属性 | TEXT - ALIGN | 设置文本对齐方式 |
通过合理使用这些 CSS 属性，可以为网页添加丰富的语音和视觉效果，提升用户体验。在实际应用中，可以根据具体需求选择合适的属性和取值，并结合示例代码进行实践。
4. 文本装饰与排版相关属性
文本的装饰和排版对于网页的视觉效果至关重要，下面介绍一些相关的 CSS 属性。
4.1 TEXT - DECORATION
该属性用于为指定的 HTML 标签添加“装饰”效果。
-
描述
：为指定的 HTML 标签添加装饰属性。
-
取值
：
-
BLINK
：文本闪烁。
-
LINE - THROUGH
：文本中间有一条线（删除线文本）。
-
NONE
：不添加装饰。
-
OVERLINE
：文本上方显示一条线。
-
UNDERLINE
：文本下划线。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<A HREF="fred.html" STYLE="TEXT - DECORATION: NONE">This link is not underlined</A>
<H1 STYLE="TEXT - DECORATION: OVERLINE">Header with an Overline</H1>
<H1 STYLE="TEXT - DECORATION: UNDERLINE">Header with an Underline</H1>
<P STYLE="TEXT - DECORATION: LINE - THROUGH">
Ignore this sentence
<P>
<I STYLE="TEXT - DECORATION: BLINK">This text blinks</I>
4.2 TEXT - INDENT
此属性用于指定文本从左边缘或块元素的缩进。
-
描述
：指定文本从左边缘或块元素的缩进。
-
取值
：
-
length (units)
：以测量单位指定长度值。
-
%
：以浏览器窗口显示的百分比指定距离。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<H1 STYLE="TEXT - INDENT: 2cmin">This text is indented from the margins by 1 inch.</H1>
4.3 TEXT - SHADOW
该属性用于为文本添加阴影效果。
-
描述
：为文本添加阴影效果。
-
取值
：
-
NONE
：不设置阴影值。
-
n n [n]
：设置颜色值加上阴影的单位长度。至少需要两个长度单位值。逗号可以分隔一系列叠加值。
-
color name or numerical color value
：设置阴影的颜色值，始终与长度单位值关联。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<H1 STYLE="TEXT - SHADOW: GRAY 2PX 3PX, LIME -4PX 3PX 4PX;">Header with Drop Shadow Effect</H1>
4.4 TEXT - TRANSFORM
该属性用于指定文本的大小写类型。
-
描述
：指定文本使用的大小写类型。
-
取值
：
-
CAPITALIZE
：将单词的首字母设置为大写。
-
LOWERCASE
：将所有文本设置为小写。
-
NONE
：不进行转换。
-
UPPERCASE
：将所有文本设置为大写。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<H1 STYLE="TEXT - TRANSFORM: CAPITALIZE">Header in initial caps</H1>
<H2 STYLE="TEXT - TRANSFORM: LOWERCASE">HEADER ALL IN LOWERCASE LETTERS</H2>
<H3 STYLE="TEXT - TRANSFORM: UPPERCASE">header all in uppercase letters</H3>
<H4 STYLE="TEXT - TRANSFORM: NONE">Nothing special happens with this header</H4>
5. 元素定位与显示相关属性
这些属性主要用于控制元素的定位和显示状态。
5.1 TOP 和 RIGHT
TOP
和
RIGHT
属性分别用于指定元素相对于包含框的垂直和水平位置。
-
TOP
：
-
描述
：指定当前网页元素相对于包含框下方的位置。
-
取值
：
-
n value
：设置长度单位值。
-
% value
：相对于包含块的宽度设置长度百分比值。
-
AUTO
：特定元素的默认值。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<P STYLE="POSITION: ABSOLUTE; TOP: 1CM;">This header is positioned 1 centimeter below the containing box, which in this case is the bottom of the browser window.</P>
- RIGHT ：
- 描述 ：指定当前网页元素相对于包含框右边缘的位置。
-
取值
：
-
n value：设置长度单位值。 -
% value：相对于包含块的宽度设置长度百分比值。 -
AUTO：特定元素的默认值。 -
INHERIT：继承父元素的属性值。
-
- 示例代码 ：
<P STYLE="POSITION: ABSOLUTE; RIGHT: 2CM;">This header is positioned 2 centimeters from the containing box, which in this case is the right margin of the browser.</P>
5.2 UNICODE - BIDI
该属性用于定义 Unicode 文本的双向特性。
-
描述
：定义 Unicode 文本具有双向特性，即文本在不同情况下可能从右到左或从左到右渲染。
-
取值
：
-
NORMAL
：所选网页元素不改变当前的双向设置。
-
EMBED
：如果所选网页元素是内联元素，此值会根据双向算法设置额外的嵌入级别。
-
BIDI - OVERRIDE
：如果所选网页元素是内联或块级元素，此值会覆盖现有设置，遵循
DIRECTION
属性设置的值。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<STYLE>
ARABIC {DIRECTION: RTL; UNICODE - BIDI: EMBED}
ENGLISH {DIRECTION: LTR; UNICODE - BIDI: EMBED}
</STYLE>
5.3 VERTICAL - ALIGN
该属性用于设置 HTML 标签的垂直定位。
-
描述
：设置与之关联的 HTML 标签的垂直定位。
-
取值
：
-
BASELINE | BOTTOM | MIDDLE | SUB | SUPER | TEXT - TOP | TEXT - BOTTOM | TOP
：相对于指定值对齐文本元素。
-
n value
：设置长度单位值。
-
% value
：相对于包含块的行高设置长度百分比值。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<B STYLE="VERTICAL - ALIGN: SUB">Subscript - aligned text</B> <I STYLE="FONT - SIZE: 16pt">Large, itla - cized text.</I>
<B STYLE="VERTICAL - ALIGN: SUPER">Superscript - aligned text</B> <I STYLE="FONT - SIZE: 16pt">Large, itlacized text.</I>
5.4 VISIBILITY
该属性用于设置元素关联的框是否渲染。
-
描述
：设置与元素关联的框是否渲染。
-
取值
：
-
VISIBLE
：显示元素生成的框。
-
HIDDEN
：不显示元素生成的框。
-
COLLAPSE
：应用于表格元素（即行、行组、列或列组）时，会使整个选定的行或列不显示。
-
INHERIT
：继承父元素的属性值。
-
示例代码
：
<H1 STYLE="VISIBILITY: HIDDEN;">Header in an Invisible Box</H1>
以下是这些属性的另一个分类表格：
| 属性类型 | 属性名称 | 作用 |
| ---- | ---- | ---- |
| 文本装饰与排版属性 | TEXT - DECORATION | 添加文本装饰效果 |
| 文本装饰与排版属性 | TEXT - INDENT | 设置文本缩进 |
| 文本装饰与排版属性 | TEXT - SHADOW | 添加文本阴影效果 |
| 文本装饰与排版属性 | TEXT - TRANSFORM | 指定文本大小写类型 |
| 元素定位与显示属性 | TOP、RIGHT | 设置元素的垂直和水平位置 |
| 元素定位与显示属性 | UNICODE - BIDI | 定义文本双向特性 |
| 元素定位与显示属性 | VERTICAL - ALIGN | 设置元素垂直定位 |
| 元素定位与显示属性 | VISIBILITY | 设置元素显示状态 |
下面是一个简单的 mermaid 流程图，展示了根据不同需求选择属性的大致流程：
graph LR
A[需求类型] --> B{语音效果}
A --> C{视觉效果}
A --> D{表格和文本排版}
B --> B1(PAUSE - AFTER、PAUSE - BEFORE)
B --> B2(PITCH、PITCH - RANGE)
B --> B3(PLAY - DURING)
C --> C1(POSITION)
C --> C2(QUOTES)
C --> C3(RICHNESS)
C --> C4(TEXT - DECORATION等)
D --> D1(TABLE - LAYOUT)
D --> D2(TEXT - ALIGN)
通过对这些 CSS 属性的深入了解和灵活运用，可以创建出更加丰富、美观且用户体验良好的网页。无论是语音效果的设置，还是视觉元素的布局和文本的排版，都能通过合理选择属性和取值来实现。在实际开发中，要根据具体的设计需求和目标用户，综合考虑这些属性的使用，以达到最佳的网页呈现效果。
扫一扫
13
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
