35、CSS 样式控制与布局全解析

CSS 样式控制与布局全解析

1. 动态使用轮廓属性

若要动态运用轮廓属性，可借助 :focus 和 :active 伪元素。这两个伪元素能明确元素轮廓何时可见，也就是元素获得焦点或处于活动状态时。

示例代码

form *:focus { outline-width: thick; outline-color: green;}
form *:active { outline-width: thin; outline-color: blue;}

注意事项

目前，用户代理对轮廓的支持参差不齐。若要在文档里使用轮廓，需在目标受众可能使用的所有平台上全面测试代码。

2. 元素颜色设置

HTML 文档中的多数元素具备两种颜色属性，即前景色和背景色，可通过 CSS 样式加以控制。

2.1 前景色

元素的前景色一般用于该元素的可见部分，多数情况下是文本，但也可能包含其他非文本组件。可使用 CSS 的 color 属性控制元素的前景色，其格式如下：

color: <color_value>;

颜色值表示方法

• 预定义颜色关键字 ：如 blue 、 red