35、CSS 属性详解：从音频到视觉的全方位控制

c6d7e8f9g

于 2025-10-11 09:12:16 发布

阅读量27

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS艺术：从理论到实践文章标签： CSS CUE属性 ELEVATION属性

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

CSS艺术：从理论到实践专栏收录该内容

38 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

CSS 属性详解：从音频到视觉的全方位控制

1. 音频相关属性

1.1 CUE 属性

CUE 属性可以在网页元素前后添加声音，有助于从听觉上区分网页的重要部分。它分为 CUE-BEFORE 和 CUE-AFTER 。

1.1.1 CUE-BEFORE

描述：在网页元素之前立即播放声音。
值：
- URL(sound) ：指向浏览器支持格式的声音文件。
- NONE ：不播放声音。
- INHERIT ：若允许，继承父元素的属性值。

示例代码

<H1 STYLE="CUE-BEFORE: BONG.AU;">Hamlet: Act I, Scene I</H1>

1.1.2 CUE-AFTER

描述：在网页元素之后立即播放声音。
值：与 CUE-BEFORE 相同。

示例代码

You can get there by <A HREF="link.html" STYLE="CUE-AFTER: CLICK.WAV">Clicking here</A>.

1.2 ELEVATION 属性

该属性设置声音在从观众位置下方到上方的空间中播放的“角度”。

值：
- n DEG ：声音所在的角度（-90DEG 到 90DEG）。
- BELOW ：相当于 -90DEG。
- LEVEL ：相当于 0DEG。
- ABOVE ：相当于 90DEG。
- HIGHER ：当前高度增加 10 度。
- LOWER ：当前高度减少 10 度。
- INHERIT ：继承父元素属性值。

示例代码

<P STYLE="ELEVATION: -20DEG;">
    Gravedigger: A pestilence on him for a mad rogue!
    'A pour'd a flagon of Rhenish on my head once.
    This same skull, sir, was Yorick's skull, the
    King's jester.
</P>

2. 视觉相关属性

2.1 CURSOR 属性

该属性定义要显示的光标类型。

值：
- URL ：指向特定网页内容，鼠标悬停时变为所选光标类型。
- AUTO ：浏览器显示与网页元素通常关联的光标类型。
- CROSSHAIR ：显示类似“+”的符号。
- DEFAULT ：显示默认光标类型。
- POINTER ：显示指针光标（通常是左上角的小箭头）。
- MOVE ：表示网页元素要被移动的光标。
- E-RESIZE | NE-RESIZE | NW-RESIZE | N-RESIZE | SE-RESIZE | SW-RESIZE | S-RESIZE | W-RESIZE ：与可移动的边缘或角落关联的光标。
- TEXT ：表示可以选择文本，通常呈现为 I 形条。
- WAIT ：表示程序繁忙，通常是沙漏。
- HELP ：表示光标下的对象有在线帮助，通常是带指针的问号或气球。
- INHERIT ：继承父元素属性值。

示例代码

Take aim and fire! <A HREF="link.html"><IMG SRC="shooting_gallery.gif" STYLE="CURSOR: CROSSHAIR;"></A>

2.2 DIRECTION 属性

该属性设置文本中字母的显示方向。

值：
- LTR ：文本从左到右显示。
- RTL ：文本从右到左显示。
- INHERIT ：继承父元素属性值。

示例代码

<P STYLE="DIRECTION: LTR;">This sentence is displayed normally.</P>
<P STYLE="DIRECTION: RTL;">.yllamron deyalpsid si ecnetnes sihT</P>

2.3 DISPLAY 属性

该属性控制指定 HTML 标签的基本性质。

值：
- BLOCK ：将指定元素设置为块级元素。
- COMPACT | RUN-IN ：根据上下文创建块级或内联框。
- INLINE ：将指定元素设置为内联元素。
- LIST-ITEM ：将指定元素设置为列表项类型。
- MARKER ：将框前后生成的内容设置为标记，应与 :BEFORE 和 :AFTER 伪类结合使用。
- NONE ：关闭指定元素的显示，不创建任何框。
- TABLE | TABLE-CAPTION | TABLE-CELL | TABLE-COLUMN | TABLE-COLUMN-GROUP | TABLE-FOOTER-GROUP | TABLE-HEADER-GROUP | TABLE-ROW | TABLE-ROW-GROUP | INLINE-TABLE ：使所选元素表现得像指定的特定表格元素。
- INHERIT ：继承父元素属性值。

示例代码

<P STYLE="DISPLAY: NONE">This paragraph will not be displayed.</P>

2.4 EMPTY-CELLS 属性

该属性用于控制不包含内容的表格单元格的显示方式。

值：
- SHOW ：在空单元格周围绘制边框（表格默认值）。
- HIDE ：不绘制空单元格周围的边框。
- INHERIT ：继承父元素属性值。

示例代码

<TABLE STYLE="EMPTY-CELLS: HIDE;" BORDER>
    <TR>
        <TD>No border should be drawn around the adjacent cell.</TD>
        <TD></TD>
    </TR>
</TABLE>

2.5 FLOAT 属性

该属性设置元素在网页上浮动时，其他元素如何围绕“父”元素环绕。

值：
- NONE ：其他元素不能围绕指定元素浮动。
- LEFT ：其他元素可以显示在指定元素的左边缘。
- RIGHT ：其他元素可以显示在指定元素的右边缘。
- INHERIT ：继承父元素属性值。

示例代码

<IMG SRC="aurelian.jpg" STYLE="FLOAT: RIGHT">This text floats to the left of the image.

2.6 字体相关属性

2.6.1 FONT 属性

这是一个缩写元素，允许网页作者快速设置字体，涵盖 FONT-FAMILY 、 FONT-SIZE 、 FONT-STYLE 、 FONT-VARIANT 和 FONT-WEIGHT 等属性。

值：
- CURSIVE | FANTASY | MONOSPACE | SANS-SERIF | SERIF ：设置字体“家族”的视觉特征类型。
- font_family ：要显示的字体名称。
- LARGE | MEDIUM | SMALL | X-LARGE | X-SMALL | XX-LARGE | XX-SMALL ：指定文本大小。
- LARGER | SMALLER ：相对于先前指定的值更改当前指定元素的大小。
- n value ：指定元素的特定单位值。
- % value ：设置字体大小相对于基本字体大小的百分比。
- ITALIC | NORMAL ：确定文本是否斜体。
- OBLIQUE ：如果使用的字体是无衬线字体，则设置类似斜体的属性。
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：绝对字体粗细值。
- BOLD | NORMAL ：设置指定文本元素是否使用粗体。
- BOLDER | LIGHTER ：相对于先前指定的值更改当前指定元素的粗细。
- CAPTION ：设置用于带标题控件（如按钮）的系统字体。
- ICON ：设置用于标记图标的系统字体。
- MENU ：设置用于菜单（如下拉菜单）的系统字体。
- MESSAGE-BOX ：设置用于对话框的系统字体。
- SMALL-CAPTION ：设置用于标记小控件的系统字体。
- STATUS-BAR ：设置用于窗口状态栏的系统字体。
- INHERIT ：继承父元素属性值。

示例代码

<FORM STYLE="FONT: MENU ITALIC;">
    <SELECT NAME="emperors">
        <OPTION>Augustus
        <OPTION>Tiberius
        <OPTION>Caligula
        <OPTION>Claudius
        <OPTION>Nero
    </SELECT>
</FORM>

2.6.2 FONT-FAMILY 属性

该属性设置指定元素要显示的字体类型。

值：
- CURSIVE | FANTASY | MONOSPACE | SANS-SERIF | SERIF ：设置字体的视觉特征类型。
- INHERIT ：继承父元素属性值。

示例代码

<B STYLE="FONT-FAMILY: SERIF">This sentence is displayed in a serif font.</B>

2.6.3 FONT-SIZE 属性

该属性设置文本的显示大小。

值：
- LARGE | MEDIUM | SMALL | X-LARGE | X-SMALL | XX-LARGE | XX-SMALL ：设置文本大小。
- LARGER | SMALLER ：相对于先前指定的值更改当前指定元素的大小。
- n value ：指定元素的特定单位值。
- % value ：设置字体大小相对于基本字体大小的百分比。
- INHERIT ：继承父元素属性值。

示例代码

<H1 STYLE="FONT-SIZE: 48 pt">Monster-Sized Heading</H1>

2.7 其他视觉属性

2.7.1 HEIGHT 属性

该属性将元素（通常是图像）缩放到指定的高度。

值：
- AUTO ：使用浏览器默认值。
- % ：设置元素宽度的百分比值。
- length (units) ：指定长度值作为测量单位。
- INHERIT ：继承父元素属性值。

示例代码

<IMG SRC="philco_jnr.jpg" STYLE="HEIGHT: 2.5 in">

2.7.2 LEFT 属性

该属性指定当前网页元素相对于其包含框左边缘的位置。

值：
- n value ：设置长度单位值。
- % value ：设置相对于包含块宽度的长度百分比值。
- AUTO ：特定元素的默认值。
- INHERIT ：继承父元素属性值。

示例代码

<P STYLE="POSITION: ABSOLUTE; LEFT: 20PX;">This header is positioned 20 pixels from the containing box, which in this case is the left margin of the browser.</P>

2.7.3 LETTER-SPACING 属性

该属性指定字母之间的间距值。

值：
- NORMAL ：浏览器的默认字母间距值。
- length (units) ：设置字母之间的长度值作为测量单位。
- INHERIT ：继承父元素属性值。

示例代码

<B STYLE="LETTER-SPACING: 1cm">Some wide letter spacing!</B>

2.7.4 LINE-HEIGHT 属性

该属性设置网页上文本行之间的距离。

值：
- NORMAL ：将行高设置为浏览器使用的默认值。
- n ：设置当前使用字体高度的倍数。
- % ：设置相对于当前使用字体大小的百分比值。
- length (units) ：指定长度值作为测量单位。
- INHERIT ：继承父元素属性值。

示例代码

Baseline<BR>
<H1 STYLE="LINE-HEIGHT: 2in">This appears 2 inches down from the break element at the top of the page!</H1>

3. 列表相关属性

3.1 LIST-STYLE 属性

这是一个缩写元素，允许网页作者快速设置列表项标记，涵盖 LIST-STYLE-POSITION 、 LIST-STYLE-IMAGE 和 LIST-STYLE-TYPE 。

值：
- CIRCLE | DISC | SQUARE ：设置出现在每个列表项之前的符号。
- DECIMAL | LOWER-ALPHA | LOWER-ROMAN | UPPER-ALPHA | UPPER-ROMAN | LOWER-GREEK ：设置出现在每个列表项之前的字母数字符号类型。
- HEBREW | ARMENIAN | GEORGIAN | CJK-IDEOGRAPHIC | HIRAGANA | KATAKANA | HIRAGANA-IROHA | KATAKANA-IROHA ：基于所选语言类型的传统编号。
- NONE ：列表项前不显示列表标记。
- URL(image) ：指定用作列表标记的图形的 URL。
- INSIDE ：列表项的文本与列表标记显示在相似的缩进级别。
- OUTSIDE ：列表项的文本从列表标记缩进显示。
- INHERIT ：继承父元素属性值。

示例代码

<UL STYLE="LIST-STYLE: HEBREW">
    <LI>List items
    <LI>preceded by
    <LI>alphabetical hebrew letters
</UL>

3.2 LIST-STYLE-IMAGE 属性

该属性指定用作列表元素标记的图像。

值：
- NONE ：列表项前不显示列表标记。
- URL(image) ：指定用作列表标记的图形的 URL。
- INHERIT ：继承父元素属性值。

示例代码

<UL>
    <LI STYLE="LIST-STYLE-IMAGE: url(trajan.jpg)">Emperor Trajan, 98 - 117 AD
    <LI STYLE="LIST-STYLE-IMAGE: url(hadrian.jpg)">Emperor Hadrian, 117 - 158 AD
</UL>

3.3 LIST-STYLE-POSITION 属性

该属性指定列表标记相对于列表项内容的呈现方式。

值：
- INSIDE ：列表项的文本与列表标记显示在相似的缩进级别。
- OUTSIDE ：列表项的文本从列表标记缩进显示。
- INHERIT ：继承父元素属性值。

示例代码

<UL STYLE="LIST-STYLE-POSITION: INSIDE">
    <LI>Notice how the text in the second line of this bullet item begins underneath the bullet rather than directly under the first word.
</UL>

3.4 LIST-STYLE-TYPE 属性

该属性设置出现在列表项之前的列表标记类型。

值：
- CIRCLE | DISC | SQUARE ：设置出现在列表元素之前的符号。
- DECIMAL | DECIMAL-LEADING-ZERO | LOWER-ALPHA | LOWER-GREEK | LOWER-LATIN | LOWER-ROMAN | UPPER-ALPHA | UPPER-LATIN | UPPER-ROMAN ：设置出现在列表标记之前的字母数字符号类型。
- HEBREW | ARMENIAN | GEORGIAN | CJK-IDEOGRAPHIC | HIRAGANA | KATAKANA | HIRAGANA-IROHA | KATAKANA-IROHA ：基于所选语言类型的传统编号。
- NONE ：列表项前不显示列表标记。
- INHERIT ：继承父元素属性值。

示例代码

<UL STYLE="LIST-STYLE-TYPE: LOWER-ALPHA">
    <LI>List items
    <LI>preceded by
    <LI>lower-case letters
</UL>

3.5 MARGIN 属性

该属性是一个缩写元素，允许网页作者快速设置 MARGIN-TOP 、 MARGIN-RIGHT 、 MARGIN-LEFT 或 MARGIN-BOTTOM 等边距值。

值：
- AUTO ：使用浏览器默认值。
- % ：设置元素宽度的百分比值。

这些属性在网页设计中起着至关重要的作用，通过合理运用它们，可以实现丰富多样的视觉和听觉效果，提升用户体验。在实际应用中，需要根据具体的需求和场景，灵活选择和组合这些属性。

4. 总结与应用建议

4.1 属性总结

4.2 应用建议

4.2.1 音频属性应用

在设计网页时，如果需要突出某些重要链接或元素，可以使用 CUE-BEFORE 和 CUE-AFTER 属性添加声音提示。例如，在导航链接前添加提示音，让用户在操作时能有更好的听觉反馈。而 ELEVATION 属性可以用于创建更立体的音频效果，比如在音频故事网页中，通过设置不同的 ELEVATION 值，模拟声音从不同高度传来。

4.2.2 视觉属性应用

字体属性 ：根据网页的整体风格选择合适的字体。如果是正式的商务网站，可以选择 SERIF 字体；如果是时尚、现代的网站，可以选择 SANS-SERIF 字体。同时，通过 FONT-SIZE 和 LINE-HEIGHT 属性调整文本的大小和行间距，提高可读性。
布局属性 ：使用 FLOAT 属性实现元素的浮动布局，让文本和图片更好地排列。 DISPLAY 属性可以灵活控制元素的显示方式，如隐藏不必要的元素（ DISPLAY: NONE ）或创建块级元素（ DISPLAY: BLOCK ）。

4.2.3 列表属性应用

在创建列表时，根据列表的类型和用途选择合适的列表标记。如果是有序列表，可以使用 DECIMAL 或 UPPER-ALPHA 等；如果是无序列表，可以使用 CIRCLE 或 SQUARE 等。同时，通过 LIST-STYLE-IMAGE 属性可以使用自定义的图片作为列表标记，增加列表的独特性。

4.3 操作流程示例

下面通过 mermaid 流程图展示设置一个包含列表和字体样式的网页元素的基本操作流程：

graph TD;
    A[开始] --> B[选择元素];
    B --> C{设置字体属性};
    C -- 是 --> D[设置 FONT-FAMILY, FONT-SIZE 等];
    C -- 否 --> E{设置列表属性};
    D --> E;
    E -- 是 --> F[设置 LIST-STYLE-TYPE, LIST-STYLE-IMAGE 等];
    E -- 否 --> G[结束];
    F --> G;

5. 实战案例

5.1 简单网页布局案例

以下是一个简单的网页布局示例，综合运用了上述的一些属性：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 属性实战案例</title>
    <style>
        body {
            font-family: SANS-SERIF;
            line-height: 1.6;
        }

        h1 {
            font-size: 32px;
            color: #333;
            letter-spacing: 2px;
        }

        img {
            float: right;
            height: 200px;
            margin-left: 20px;
        }

        ul {
            list-style-type: square;
            list-style-position: inside;
        }

        p {
            text-align: justify;
        }
    </style>
</head>

<body>
    <h1>欢迎来到我的网页</h1>
    <img src="example.jpg" alt="示例图片">
    <p>这是一个简单的网页布局示例，展示了如何运用 CSS 属性来创建一个美观且易读的页面。通过设置字体、浮动元素和列表样式，我们可以让页面更加吸引人。</p>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
        <li>列表项 3</li>
    </ul>
</body>

</html>

5.2 代码解释

字体设置 ： body 元素使用 SANS-SERIF 字体， h1 元素设置了字体大小和字母间距，提高了标题的可读性。
图片浮动 ：图片使用 float: right 实现向右浮动，并且设置了高度和左边距，使文本能够环绕图片。
列表样式 ：无序列表使用 square 作为列表标记，并且设置了 list-style-position: inside ，让列表项更加整齐。

6. 结论

CSS 属性为网页设计提供了强大的功能，通过合理运用音频、视觉和列表相关属性，可以创建出丰富多样、交互性强的网页。在实际应用中，需要根据网页的需求和目标用户，灵活选择和组合这些属性。同时，不断实践和尝试新的属性组合，能够提升网页设计的水平，为用户带来更好的体验。希望本文介绍的属性和案例能够帮助你在网页设计中取得更好的效果。