CSS 样式规则规则详解

CSS规则是用来定义HTML元素样式的一种语法。其基本结构为：

<selector> {
  <property>: <value>;
  <property>: <value>;
  ...
}

其中selector定义要应用规则的HTML元素，property为CSS属性，常见属性包括color、font-size、margin、padding等等，而value为该属性的取值。

以下是一些常用的CSS属性及其取值：

• color：文字颜色，取值可以是颜色名称如red，也可以是16进制颜色代码如#FF0000。
• font-size：文字大小，取值可以是em、px、pt等单位。
• font-family：字体，取值为该字体在计算机中的名称。
• background-color：背景颜色，取值可以是颜色名称或颜色代码。
• margin：外边距，取值可以是auto、px等单位。
• padding：内边距，取值可以是px、%等单位。
• border：边框，取值可以是none、solid、dotted等边框样式。

以下是一些常用的CSS选择器：

• 元素选择器：div、p等HTML元素标签名称。
• ID选择器：#加上该元素的id属性值，如#header。
• 类选择器：.加上该元素的class属性值，如.active。
• 属性选择器：[]匹配具有某个属性的元素，如[title]匹配具有title属性的元素。

示例代码：

/* 元素样式 */
p {
  color: red;
  font-size: 16px;
}

/* ID样式 */
#header {
  background-color: green;
  height: 50px;
}

/* 类样式 */
.active {
  font-weight: bold;
  color: blue;
}

/* 属性选择器 */
input[type="submit"] {
  background-color: #337ab7;
  color: #fff;
  border: none;
  padding: 10px;
}