31、CSS1 属性、伪元素、伪类及概念参考

于 2025-10-07 11:18:34 发布
阅读量27 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： CSS艺术：从理论到实践 文章标签： CSS1 背景属性 边框属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/c6d7e8f9g/article/details/153253876

CSS1 属性、伪元素、伪类及概念参考

1. CSS 属性概述

CSS（层叠样式表）属性用于控制 HTML 元素的外观和布局。下面将详细介绍一些常见的 CSS1 属性及其用法、取值和在主流浏览器中的支持情况。

2. 背景相关属性

2.1 BACKGROUND

  • 描述 ：设置元素的背景颜色或图像，可以使用背景属性家族中的任何值。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：
  • 颜色名称或数值颜色值
  • URL(图像)
  • SCROLL - 当浏览器窗口滚动时，图像随之移动。
  • FIXED - 当浏览器窗口滚动时，图像保持不动。
  • TRANSPARENT – 使指定元素透明
  • X% Y% - 百分比是相对于浏览器窗口显示尺寸的。
  • X Y - 表示图像的绝对坐标位置。
  • (LEFT/CENTER/RIGHT) | (TOP/CENTER/BOTTOM) - 表示屏幕位置的关键字。左关键字是图像的 X 位置，右关键字是 Y 位置。
  • REPEAT - 图像在水平和垂直方向上平铺。
  • REPEAT-X - 图像在水平方向上平铺。
  • REPEAT-Y - 图像在垂直方向上平铺。
  • NO-REPEAT - 图像不重复。
  • 示例代码 ： 
<B STYLE="BACKGROUND: GREEN">This text is displayed against a green background.</B>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 | Safe | Safe | Partial | Partial | Safe |

2.2 BACKGROUND-ATTACHMENT

  • 描述 ：如果设置了 BACKGROUND-IMAGE 元素，此元素指定当浏览器窗口滚动时背景图像应如何移动。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：
  • SCROLL - 当浏览器窗口滚动时，图像随之移动。
  • FIXED - 当浏览器窗口滚动时，图像保持不动。
  • 示例代码 ： 
<BODY STYLE="BACKGROUND-IMAGE: URL(canvas.gif); BACKGROUND-ATTACHMENT: FIXED">
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 | Safe | Safe | Partial | Partial | Safe |

2.3 BACKGROUND-COLOR

  • 描述 ：设置元素的背景颜色。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：
  • 颜色名称或数值颜色值
  • TRANSPARENT – 使指定元素透明
  • 示例代码 ： 
<I STYLE="BACKGROUND-COLOR: FFFF00">Italicized text on a yellow background.</I>

2.4 BACKGROUND-IMAGE

  • 描述 ：将图形图像设置为背景图像。如果指定了此元素，还可以使用 CSS 元素 BACKGROUND-REPEAT、BACKGROUND-ATTACHMENT 和 BACKGROUND-POSITION，也可以添加颜色值。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：
  • URL(图像)
  • 示例代码 ： 
<BODY STYLE="BACKGROUND-IMAGE: URL(canvas.gif)">
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Partial | Partial | Safe |

2.5 BACKGROUND-POSITION

  • 描述 ：如果指定了 BACKGROUND-IMAGE 元素，此元素指定图像首次出现的位置，并描述其应如何平铺。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：
  • X% Y% - 百分比是相对于浏览器窗口显示尺寸的。
  • X Y - 表示图像的绝对坐标位置。
  • (LEFT/CENTER/RIGHT) | (TOP/CENTER/BOTTOM) - 表示屏幕位置的关键字。左关键字是图像的 X 位置，右关键字是 Y 位置。
  • 示例代码 ： 
<BODY STYLE="BACKGROUND-IMAGE: URL(victorinus.jpg); BACKGROUND-POSITION: 100 50">
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Safe | Safe | Safe |

2.6 BACKGROUND-REPEAT

  • 描述 ：如果设置了 BACKGROUND-IMAGE 元素，此附加元素指定图像在网页上的重复方式。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：
  • REPEAT - 图像在水平和垂直方向上平铺。
  • REPEAT-X - 图像在水平方向上平铺。
  • REPEAT-Y - 图像在垂直方向上平铺。
  • NO-REPEAT - 图像不重复。
  • 示例代码 ： 
<BODY STYLE="BACKGROUND-IMAGE: URL(gordian3.jpg); BACKGROUND-REPEAT: REPEAT-X">

3. 边框相关属性

3.1 BORDER

  • 描述 ：这是一个缩写元素，允许网页作者轻松指定 BORDER-TOP、BORDER-RIGHT、BORDER-BOTTOM 和 BORDER-LEFT 元素。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • n 测量单位 - 设置边框的厚度。
  • THIN | MEDIUM | THICK - 设置边框的相对厚度。
  • 颜色名称或数值颜色值 - 设置边框的颜色。
  • DASHED - 显示虚线边框。
  • DOTTED - 显示点状边框。
  • DOUBLE - 显示双线边框。
  • INSET - 显示 3D 内凹边框。
  • GROOVE - 显示 3D 凹槽边框。
  • NONE - 无论 BORDER-WIDTH 值是多少，都不显示边框。
  • OUTSET - 显示 3D 外凸边框。
  • RIDGE - 显示 3D 脊状边框。
  • SOLID - 显示实线边框。
  • 示例代码 ： 
<STRONG STYLE="BORDER: RIDGE RED">A strong statement.</STRONG>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Partial | Partial | Safe | Safe | Partial | Partial | Safe |

3.2 BORDER-BOTTOM

  • 描述 ：设置指定 HTML 标签底部边框的显示值。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：与 BORDER 类似，包括厚度、颜色和边框样式等取值。
  • 示例代码 ： 
<EM STYLE="BORDER-BOTTOM: DOUBLE BLUE">Text with a double blue underline.</EM>

3.3 BORDER-BOTTOM-WIDTH

  • 描述 ：设置底部边框的厚度。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • n 测量单位 - 设置底部边框的厚度。
  • THIN | MEDIUM | THICK - 设置底部边框的相对厚度。
  • 示例代码 ： 
<BLOCKQUOTE STYLE="BORDER-BOTTOM-WIDTH: THICK">"This is an important quote,"</BLOCKQUOTE> he said.
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Unsafe | Unsafe | Partial |

3.4 BORDER-COLOR

  • 描述 ：设置边框的颜色。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：颜色名称或数值颜色值
  • 示例代码 ： 
<H3 STYLE="BORDER-COLOR: OLIVE">Header with a Colored Border</H3>

3.5 BORDER-LEFT

  • 描述 ：指定与 HTML 标签关联的左边框应如何显示。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：与 BORDER 类似，包括厚度、颜色和边框样式等取值。
  • 示例代码 ： 
<ADDRESS STYLE="BORDER-LEFT: 1.0cm AQUA">123 Underwater Drive<BR>An aqua-tic address.</ADDRESS>

3.6 BORDER-LEFT-WIDTH

  • 描述 ：设置左边框的厚度。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • n 测量单位 - 设置左边框的厚度。
  • THIN | MEDIUM | THICK - 设置左边框的相对厚度。
  • 示例代码 ： 
<H4 STYLE="BORDER-LEFT-WIDTH THIN">Text with a thin border to the left.</H4>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Unsafe | Unsafe | Partial |

3.7 BORDER-RIGHT

  • 描述 ：指定与 HTML 标签关联的右边框应如何显示。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：与 BORDER 类似，包括厚度、颜色和边框样式等取值。
  • 示例代码 ： 
<H5 STYLE="BORDER-RIGHT: THICK DOUBLE YELLOW">Header with Yellow Right Border</H5>

3.8 BORDER-RIGHT-WIDTH

  • 描述 ：设置右边框的厚度。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • n 测量单位 - 设置右边框的厚度。
  • THIN | MEDIUM | THICK - 设置右边框的相对厚度。
  • 示例代码 ： 
<SUP STYLE="BORDER-RIGHT-WIDTH 0.2in">Superscript with border to the right.</SUP>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Unsafe | Unsafe | Partial |

3.9 BORDER-STYLE

  • 描述 ：设置要显示的边框类型。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • DASHED - 显示虚线边框。
  • DOTTED - 显示点状边框。
  • DOUBLE - 显示双线边框。
  • INSET - 显示 3D 内凹边框。
  • GROOVE - 显示 3D 凹槽边框。
  • NONE - 无论 BORDER-WIDTH 值是多少，都不显示边框。
  • OUTSET - 显示 3D 外凸边框。
  • RIDGE - 显示 3D 脊状边框。
  • SOLID - 显示实线边框。
  • 示例代码 ： 
<H1 STYLE="BORDER-STYLE: SOLID">Header with Inset Border.</H1>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Partial | Partial | Partial |

3.10 BORDER-TOP

  • 描述 ：指定与 HTML 标签关联的上边框应如何显示。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：与 BORDER 类似，包括厚度、颜色和边框样式等取值。
  • 示例代码 ： 
<TT STYLE="BORDER-TOP: THIN DASHED 00FF00">Teletype text with a top-border</TT>

3.11 BORDER-TOP-WIDTH

  • 描述 ：设置上边框的厚度。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • n 测量单位 - 设置上边框的厚度。
  • THIN | MEDIUM | THICK - 设置上边框的相对厚度。
  • 示例代码 ： 
<SUB STYLE="BORDER-TOP-WIDTH 1mm">Subscript with very thin top border.</SUB>

3.12 BORDER-WIDTH

  • 描述 ：设置指定元素的边框厚度。可以设置一到四个边框边。
  • CSS 家族类型 ：盒子（子家族：边框）
  • 取值 ：
  • n [ n n n] 测量单位 - 设置边框的厚度。
  • 如果只有 1 个值，则所有边框都设置为指定的数值。
  • 如果有 2 个值，则上/下边框和左右边框分别取指定的数值。
  • 如果有 3 个值，则上、右和左边框，然后下边框分别取指定的数值。
  • 如果有 4 个值，则上、右、下和左边框分别取指定的数值。
  • THIN | MEDIUM | THICK - 设置边框的相对厚度。
  • 示例代码 ： 
<H2 STYLE="BORDER-WIDTH: 5 5 15 5">Header with Surrounding Border</H2>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Unsafe | Unsafe | Partial |

4. 其他常见属性

4.1 CLEAR

  • 描述 ：设置指定元素是否允许其他元素“浮动”在其两侧。
  • CSS 家族类型 ：盒子
  • 取值 ：
  • BOTH - 指定元素将移动到两侧浮动元素的下方。
  • LEFT - 指定元素将仅移动到左侧浮动元素的下方。
  • NONE - 指定元素的两侧允许有任何浮动元素。
  • RIGHT - 指定元素将仅移动到右侧浮动元素的下方。
  • 示例代码 ： 
<B STYLE="CLEAR: BOTH">This text should appear below the image.</B>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Safe | Safe | Safe | Safe | Partial | Partial | Partial |

4.2 COLOR

  • 描述 ：设置要显示的颜色。
  • CSS 家族类型 ：颜色和背景
  • 取值 ：颜色名称或数值颜色值
  • 示例代码 ： 
<UL>
  <LI STYLE="COLOR: FF0000">This is displayed as red text</LI>
  <LI STYLE="COLOR: 00FF00">This is displayed as green text</LI>
  <LI STYLE="COLOR: 0000FF">This is displayed as blue text</LI>
</UL>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Partial | Partial | Safe | Safe | Partial | Partial | Safe |

4.3 DISPLAY

  • 描述 ：控制指定 HTML 标签的基本性质。
  • CSS 家族类型 ：分类
  • 取值 ：
  • BLOCK - 将指定元素设置为块级元素。
  • INLINE - 将指定元素设置为内联元素。
  • LIST-ITEM - 将指定元素设置为列表项类型。
  • NONE - 关闭指定元素的显示。
  • 示例代码 ： 
<I STYLE="DISPLAY: LIST-ITEM">This italicized text is indented in the same way a list-item would be.</I>

4.4 FLOAT

  • 描述 ：设置元素在网页上浮动时，其他元素如何环绕它。
  • CSS 家族类型 ：盒子
  • 取值 ：
  • NONE - 其他元素不能显示为环绕指定元素浮动。
  • LEFT - 其他元素可以显示在指定元素的左边缘。
  • RIGHT - 其他元素可以显示在指定元素的右边缘。
  • 示例代码 ： 
<IMG SRC="aurelian.jpg" STYLE="FLOAT: RIGHT">This text floats to the left of the image.
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |
    | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ---- |
    | 支持情况 | Unsafe | Unsafe | Unsafe | Partial | Partial | Partial | Partial | Partial |

4.5 FONT

  • 描述 ：这是一个缩写元素，允许网页作者通过 FONT-FAMILY、FONT-SIZE、FONT-STYLE、FONT-VARIANT 和 FONT-WEIGHT 等 CSS 元素快速设置字体。
  • CSS 家族类型 ：字体
  • 取值 ：
  • CURSIVE | FANTASY | MONOSPACE | SANS-SERIF | SERIF - 设置字体“家族”名称的视觉特征类型。
  • font_family - 要显示的字体名称
  • LARGE | MEDIUM | SMALL | X-LARGE | X-SMALL | XX-LARGE | XX-SMALL - 指定文本的大小。值范围从 XX-SMALL（最小）到 XX-LARGE（最大）。
  • LARGER | SMALLER - 相对于先前指定的值更改当前指定元素的大小。
  • n 值 - 指定元素的特定单位值。
  • % 值 – 设置字体大小相对于基本字体大小的百分比。
  • ITALIC | NORMAL - 确定文本是否斜体。
  • OBLIQUE - 如果使用的字体是无衬线字体，则设置类似斜体的属性。
  • 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 - 绝对字体重量值。
  • BOLD | NORMAL - 设置指定文本元素是否使用粗体。
  • BOLDER | LIGHTER - 相对于先前指定的值更改当前指定元素的重量。
  • 示例代码 ： 
<B STYLE="FONT: MEDIUM FANTASY">Fantasy font</B>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 |

4.6 FONT-FAMILY

  • 描述 ：设置与指定元素一起显示的字体类型。
  • CSS 家族类型 ：字体
  • 取值 ：
  • CURSIVE | FANTASY | MONOSPACE | SANS-SERIF | SERIF - 设置字体的视觉特征类型。
  • 示例代码 ： 
<B STYLE="FONT-FAMILY: SERIF">This sentence is displayed in a serif font.</B>

4.7 FONT-SIZE

  • 描述 ：设置文本的显示大小。
  • CSS 家族类型 ：字体
  • 取值 ：
  • LARGE | MEDIUM | SMALL | X-LARGE | X-SMALL | XX-LARGE | XX-SMALL - 设置文本的大小。值范围从 XX-SMALL（最小）到 XX-LARGE（最大）。
  • LARGER | SMALLER - 相对于先前指定的值更改当前指定元素的大小。
  • n 值 - 指定元素的特定单位值。
  • % 值 – 设置字体大小相对于基本字体大小的百分比。
  • 示例代码 ： 
<H1 STYLE="FONT-SIZE: 48pt">Monster-Sized Heading</H1>
  • 主流浏览器支持情况 ：
    | 浏览器 | 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 | Safe | Safe | Safe | Safe | Safe | Safe |

5. 总结

通过上述介绍，我们了解了一些常见的 CSS1 属性，包括背景、边框、清除浮动、颜色、显示方式、浮动和字体等方面的属性。这些属性在网页设计中起着重要的作用，不同的取值可以实现多样化的视觉效果。同时，我们也看到了这些属性在主流浏览器中的支持情况，在实际开发中需要根据目标用户的浏览器使用情况进行合理选择和兼容性处理。

6. 各属性之间的关系及使用建议

6.1 背景属性间的协同使用

背景相关属性如 BACKGROUND 、 BACKGROUND-IMAGE 、 BACKGROUND-REPEAT 、 BACKGROUND-ATTACHMENT 和 BACKGROUND-POSITION 通常需要协同使用，以实现丰富的背景效果。例如，当设置背景图像时，可通过 BACKGROUND-REPEAT 控制图像的重复方式，通过 BACKGROUND-ATTACHMENT 决定图像在滚动时的行为，通过 BACKGROUND-POSITION 确定图像的初始位置。

以下是一个综合使用的示例： 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url('example.jpg');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center center;
        }
    </style>
</head>
<body>
    <p>这段文本显示在具有固定背景图像的页面上。</p>
</body>
</html>

在这个示例中，背景图像 example.jpg 不会重复，在滚动页面时保持固定，并且位于页面的中心位置。

6.2 边框属性的组合应用

边框属性如 BORDER 、 BORDER-TOP 、 BORDER-RIGHT 、 BORDER-BOTTOM 、 BORDER-LEFT 等可以组合使用，以创建不同样式的边框。例如，使用 BORDER 缩写属性可以一次性设置所有边框的样式，而使用具体的单边边框属性可以对每个边框进行单独设置。

以下是一个组合使用的示例： 

<!DOCTYPE html>
<html>
<head>
    <style>
        div {
            border: 2px solid black;
            border-top: 4px dashed red;
            border-right: 3px dotted blue;
        }
    </style>
</head>
<body>
    <div>这个 div 元素具有不同样式的边框。</div>
</body>
</html>

在这个示例中， div 元素的所有边框初始为 2 像素的黑色实线边框，顶部边框为 4 像素的红色虚线边框，右边框为 3 像素的蓝色点状边框。

6.3 浮动与清除浮动的配合

FLOAT 和 CLEAR 属性通常一起使用，以实现元素的浮动布局和清除浮动带来的影响。当使用 FLOAT 属性使元素浮动时，可能会导致父元素高度塌陷，此时可以使用 CLEAR 属性来清除浮动。

以下是一个示例： 

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            border: 1px solid black;
        }
        .float-left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .clear-both {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="float-left">浮动元素</div>
        <div class="clear-both"></div>
    </div>
    <p>这段文本在清除浮动后正常显示。</p>
</body>
</html>

在这个示例中， .float-left 元素向左浮动， .clear-both 元素清除了浮动，避免了父元素 .parent 的高度塌陷。

7. 主流浏览器支持情况分析

7.1 整体支持趋势

从各属性在主流浏览器中的支持情况来看，随着浏览器版本的更新，对 CSS1 属性的支持逐渐趋于完善。早期的浏览器如 IE 3.02 对很多属性的支持较差，存在 Unsafe 或 Partial 支持的情况，而较新的版本如 IE 5.0、NN 4.x 等对大部分属性的支持较好。

7.2 不同属性的支持差异

不同属性在浏览器中的支持情况存在差异。例如， BACKGROUND 相关属性在大部分浏览器中得到了较好的支持，但在早期版本中仍存在部分问题；而 FONT 相关属性在一些浏览器中的支持相对较弱，尤其是在早期版本中。

以下是一个简单的表格总结部分属性在不同浏览器中的支持情况：
| 属性 | IE 3.02 | IE 4.x | IE 5.0 | NN 4.x | Opera 3.6 |
| ---- | ---- | ---- | ---- | ---- | ---- |
| BACKGROUND | Partial | Partial | Safe | Partial | Safe |
| BORDER | Unsafe | Partial | Safe | Partial | Safe |
| FONT | Partial | Partial | Partial | Partial | Partial |

7.3 兼容性处理建议

在实际开发中，为了确保网页在不同浏览器中都能正常显示，需要进行兼容性处理。可以采用以下方法：
- 渐进增强 ：先为现代浏览器提供完整的功能和样式，然后为旧浏览器提供基本的功能和样式。
- 使用浏览器前缀 ：对于一些新的 CSS 属性，不同浏览器可能需要使用不同的前缀，如 -webkit- 、 -moz- 、 -ms- 等。
- 测试和修复 ：在不同浏览器中进行测试，发现问题后及时修复。

8. 总结与展望

8.1 总结

本文详细介绍了 CSS1 中的常见属性，包括背景、边框、清除浮动、颜色、显示方式、浮动和字体等方面的属性。通过对这些属性的取值、用法和主流浏览器支持情况的介绍，我们可以更好地理解和使用 CSS1 来实现网页的样式设计。同时，我们也了解了各属性之间的协同使用方法和兼容性处理建议，这对于开发跨浏览器兼容的网页至关重要。

8.2 展望

虽然 CSS1 已经有一定的历史，但其中的很多属性仍然在现代网页开发中被广泛使用。随着 CSS 技术的不断发展，新的属性和特性不断涌现，如 CSS3 中的动画、过渡、响应式布局等。在未来的开发中，我们可以结合 CSS1 的基础属性和新的 CSS 特性，创造出更加丰富、美观和交互性强的网页。同时，也需要持续关注浏览器的更新和兼容性问题，以确保网页在各种设备和浏览器上都能提供良好的用户体验。

8.3 流程图：CSS 属性使用流程 

graph LR
    A[确定设计需求] --> B[选择合适的属性]
    B --> C{是否需要组合属性}
    C -- 是 --> D[组合使用属性]
    C -- 否 --> E[单独使用属性]
    D --> F[编写代码]
    E --> F
    F --> G[在不同浏览器中测试]
    G --> H{是否存在兼容性问题}
    H -- 是 --> I[进行兼容性处理]
    H -- 否 --> J[完成开发]
    I --> F

这个流程图展示了使用 CSS 属性进行网页样式设计的基本流程，包括确定需求、选择属性、编写代码、测试和处理兼容性问题等步骤。

CSS选择器（基本选择器、关系选择器、属性选择器、伪类选择器、伪元素选择器、选择器权重及优先级）总结
shuimoguzhou的博客
10-19 981
参考MND在线文档整理-待更新完毕
css改变伪元素color_CSS伪类伪元素详解
weixin_35851515的博客
01-14 582
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越...
html 伪元素原理,CSS伪类伪元素详解
weixin_33216825的博客
05-30 1694
CSS选择器大致可以分成5类：基本选择器，层次选择器，属性选择器，伪类，伪元素。基本，层次，属性选择器比较容易理解，毕竟它们选择的对象都属于DOM中看得见摸得着的元素。但伪类和伪元素相对比较抽象，稍微有一点点理解上的难度。本篇就是我对伪类和伪元素的理解。先介绍一下伪类和伪元素有什么区别？其实这是个纯概念上的问题，就算不理解也不影响实际的使用。但作为一个CSSer，概念这种东西有时候就像地基，地基越...
关于css中伪类及伪元素的总结
songxiugongwang的博客
12-30 169
关于css中伪类及伪元素的总结 css中的伪类和伪元素总是混淆，今天参考了很多资料，也查看了部分文档，现将伪类及伪元素总结如下： 一、由来： 　　伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述，比如CSS没有“段落的第一行”、“文章首字母”之类的选择器，而这在一些出版场景里又是必须的，这一情况下出现的。引用标准中的话： CSS introduces the concepts ...
CSS3伪类和伪元素
qq_36412715的博客
08-12 767
1.伪类 CSS3给出的定义是： 伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。 通过上面的概念我们知道了伪类的功能有两种： 1.格式化DOM树以外的信息。比如： <a> 标签的:link、:visited等。这些信息不存在于DOM树中。 2.不能被常规CSS选择器获取到的信息。比如：要获取第一个子元素，我们无法用常规的CSS选择器获取...
CSS3 伪类和伪元素详解：提升你的样式选择能力
小白菜的博客
05-28 816
CSS 的核心是“选择元素+定义样式”，但普通选择器（如classid）只能定位“静态存在的元素”。定位元素的动态状态（如鼠标悬停、链接访问过）；操作元素的虚拟结构（如文本的首字母、元素前/后添加内容）。本文覆盖 CSS3 中最常用的伪类和伪元素（含部分 CSS4 新特性），适合前端开发者提升样式控制精度。本文从“生活化类比”入手，先区分伪类和伪元素的本质，再分类讲解常见类型，最后通过“导航栏交互”“表单验证”等实战案例演示应用，帮你彻底掌握！伪类（:）：元素的“状态探测器”，识别动态状态（如。
css伪类与伪元素
丶拾慌
04-04 2527
在css1中就引入了伪类和伪元素的概念，伪类可以对一个元素的不同状态或者类型进行区分，添加特殊效果。伪元素能为元素的组成部分，或是文本结点内容添加特殊效果。 伪类 我的导师曾说"认识事物可以采用分类法，简单化事物采用分步法"。我们都知道伪类在css1中就存在了，是在HTML元素处于某种状态时，为该元素添加css样式。之后，css2,css3又添加和完善了好些伪类。 结构化伪类 结构化伪类常
细数CSS伪元素及其用法
05-14 1481
引言 CSS中有两个很常见的概念，伪类和伪元素。 伪类用于在页面中的元素处于某个状态时，为其添加指定的样式。 伪元素会创建一个抽象的伪元素，这个元素不是DOM中的真实元素，但是会存在于最终的渲染树中，我们可以为其添加样式。 最常规的区分伪类和伪元素的方法是：实现伪类的效果可以通过添加类来实现，但是想要实现伪元素的等价效果只能创建实际的DOM节点。 此外，伪类是使用单冒号:，伪元素使用是双...
深入理解CSS伪类与元素定位技术
weixin_34885746的博客
05-16 522
本篇博客文章深入探讨了CSS中的伪类和元素定位技术，包括如何使用各种伪类改善网页的交云性和布局效果，以及如何通过定位技术实现复杂的页面设计。文章结合了理论知识和实际案例，为读者提供了丰富的HTML和CSS技巧。
伪类和伪元素
A_NuoDaDa的博客
06-27 433
伪元素和伪类 现在在做前端工作，但是在css的使用方面显然还是皮毛，很多东西都不是很了解，导致每次想要实现某种效果的时候就是各种百度，百度了之后又是什么都没记住，下次遇到问题的时候还是百度，这样是永远学不到东西的，所以就打算将自己需要加强学习的东西都记录下来，作为记录方便以后查阅和深入理解，理解初期可能会有一些问题，以后会慢慢更正，如有问题，请多指教！ 今天先来记录伪类和伪元素，之前就遇到过这类的...
CSS 类、伪类和伪元素区别详解
陈小峰（iefreer）的专栏
01-08 5034
CSS伪类(pseudo-classes)和伪元素(pseudo-elements)是用来支持根据DOM树之外的信息来格式化文档的能力。使用语法常被混用，但两者有着明显的不同。
CSS1属性、伪元素、伪类及概念参考
# CSS1 属性、伪元素、伪类及概念参考 ## 1. 背景相关属性 ### 1.1 BACKGROUND - **描述**：设置背景颜色或图像，可采用背景属性族中的任何值。 - **CSS 族类型**：颜色和背景 - **取值**： - 颜色名称或数值颜色...
CSS伪类与伪元素详解及应用示例
本文所涉及的“CSS伪类与伪元素[项目代码]”不仅系统地讲解了这两类选择器的基本概念、语法结构和实际应用场景，还通过丰富的代码示例帮助开发者深入理解其工作原理和使用技巧，具有极高的学习与实践价值。...
css伪类和伪元素的区别
08-21
首先，用户的问题是：“我想理解CSS中伪类和伪元素的概念及其区别 请问CSS 伪类与伪元素的区别详解”。这是一个关于CSS的问题，具体是伪类（pseudo-classes）和伪元素（pseudo-elements）的区别。 根据系统级指令：...
基于改进YOLOv8的文本识别检测系统源码分享与一条龙教学项目_该项目是一个集成了从数据准备到模型部署全流程的深度学习应用系统核心内容围绕YOLOv8目标检测模型在复杂文本识别任.zip
12-12
基于改进YOLOv8的文本识别检测系统源码分享与一条龙教学项目_该项目是一个集成了从数据准备到模型部署全流程的深度学习应用系统核心内容围绕YOLOv8目标检测模型在复杂文本识别任.zip
（63页PPT）某智慧小区全面解决方案.pptx
12-12
（63页PPT）某智慧小区全面解决方案.pptx
（74页PPT）DG大型制造业企业数据架构顶层设计总体规划方案.pptx
12-12
（74页PPT）DG大型制造业企业数据架构顶层设计总体规划方案.pptx
（80页PPT）社会综治一网统管解决方案.pptx
12-12
（80页PPT）社会综治一网统管解决方案.pptx
滑雪大冒险无限金币钻石最新版本.apk
最新发布
12-12
滑雪大冒险无限金币钻石最新版本.apk
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值