CSS语言的规则集(Rule Set)或规则(Rule)
CSS中,规则集(Rule Set)或规则(Rule)是用于指定如何格式化HTML文档中特定元素的指令集合。每个规则集由一个选择器(Selector)和一组由大括号 {} 包围的声明(Declaration)组成。选择器确定哪些元素将被应用样式,而声明则定义了具体的样式规则。
规则集的基本结构:
css
复制
selector { property: value; property: value; /* ...更多的属性-值对... */ }
示例:
css
复制
h1 { color: blue; text-align: center; font-size: 24px; } p { color: black; font-size: 16px; line-height: 1.5; } /* 类选择器 */ .warning { color: red; } /* ID选择器 */ #header { background-color: #333; padding: 10px; } /* 属性选择器 */ input[type="text"] { border: 1px solid #ccc; } /* 伪类选择器 */ a:hover { text-decoration: none; }
在这个例子中,我们有几个规则集:
h1 选择器应用于所有的 <h1> 元素,设置了蓝色文本、居中对齐和24像素的字体大小。
p 选择器应用于所有的 <p> 段落元素,设置了黑色文本、16像素的字体大小和1.5的行高。
.warning 类选择器应用于具有 warning 类的所有元素,设置了红色文本。
#header ID选择器应用于具有 header ID的元素,设置了深灰色背景、10像素的内边距。
input[type="text"] 属性选择器应用于所有类型为文本的输入元素,设置了灰色边框。
a:hover 伪类选择器应用于鼠标悬停在链接上时的状态,移除了文本下划线。
每个规则集都是独立的,可以包含一个或多个声明。声明由属性和值组成,用于定义具体的样式。属性和值之间用冒号 : 分隔,每个声明用分号 ; 结束。规则集之间通常用换行或空格分隔,以提高可读性。
正确使用规则集是CSS中的核心概念,它允许开发者精确地控制网页上的样式。