CSS属性和CSS规则

时间:2020-01-09 10:34:07  来源:igfitidea点击:

我们可以通过CSS属性设置HTML元素的样式。不同的HTML元素可能具有可以设置的不同CSS属性。 CSS属性可以组织成CSS规则。 CSS规则将一组CSS属性组合在一起,并将所有属性应用于与CSS规则匹配的HTML元素。本文将详细介绍CSS属性和CSS规则。

CSS属性

CSS属性设置HTML元素的外观样式。这里有一些例子:

<div style="border: 1px solid black;
            font-size: 18px; "> Style This </div>

在这个例子中,有两个CSS属性被应用到div元素:border和font-size属性。

CSS属性声明由属性名称和属性值组成。首先是属性名称,然后是冒号,然后是值。这是CSS属性声明遵循的一般模式:

property-name : property-value

如果我们指定多个CSS属性,则每个名称值对都用分号分隔,如下所示:

property1 : property-value1;
property2 : property-value2;

最后一个属性声明不必以分号结尾,但是它使添加更多CSS属性变得更加容易,而又无需忘记添加多余的分号。

我们可以为不同的HTML元素指定许多CSS属性。这些CSS属性包含在它们自己的文本中。

CSS规则

CSS规则是一个或者多个CSS属性的分组,这些属性将应用于一个或者多个目标HTML元素。

CSS规则由CSS选择器和一组CSS属性组成。 CSS选择器确定使用CSS规则定位的HTML元素。 CSS属性指定目标HTML元素的样式。

这是一个CSS规则示例:

div {
      border    : 1px solid black;
      font-size : 18px;
  }

本示例创建了一个针对所有div元素的CSS规则,并为目标元素设置了CSS属性borderfont-size

CSS选择器部分CSS规则是第一个{之前的部分。在上面的示例中,它是CSS规则的div部分。 CSS属性列在{...}块内。

CSS规则必须在style元素内部或者外部CSS文件中指定。