Css 简明教程

CSS - Syntax

CSS 由浏览器解释并随后应用于文档中的相应元素的样式规则组成。一个样式规则由以下三个部分组成：

  1. Selector − 选择器是一个将应用样式的 HTML 标记。这可以是类似 <h1> 或 <table> 等任何标记。

  2. Property − 属性是 HTML 标记的一种类型。简而言之，所有 HTML 属性都转换为 CSS 属性。它们可以是颜色、边框等。

  3. Value − 给属性分配值。例如，color 属性可以具有红色或 #F1F1F1 等值。

您可以按如下方式设置 CSS 样式规则语法 −

selector { property: value }
syntax

Example − 您可以定义表格边框如下所示 −

table{ border :1px solid #C00; }

这里表格是一个选择器，边界是一个属性，并且给定的值 1px solid #C00 是该属性的值。

您可以根据您的习惯以各种简单方式定义选择器。让我逐个介绍这些选择器。

The Type Selectors

这是我们在上面看到的同一选择器。再次，提供另一个示例为所有级别 1 标题赋予颜色 −

h1 {
   color: #36CFFF;
}

The Universal Selectors

通用选择器不会选择特定类型，而是简单地匹配任何元素类型的名称 −

* {
   color: #000000;
}

此规则以黑色渲染我们文档中每个元素的内容。

The Descendant Selectors

假设您只希望在特定元素内部存在特定元素时才向该元素应用样式规则。如下例所示，样式规则仅在位于 <ul> 标记内部时才应用于 <em> 元素。

ul em {
   color: #000000;
}

The Class Selectors

您可以根据元素的 class 属性定义样式规则。 具有该类属性的所有元素都将按照定义的规则进行格式化。

.black {
   color: #000000;
}

对于我们文档中将 class 属性设置为 black 的每个元素，此规则会将内容渲染为黑色。 您还可以让它更具体一些。 例如 −

h1.black {
   color: #000000;
}

对于仅将 class 属性设置为 black 的 <h1> 元素，此规则会将内容渲染为黑色。

您可以向给定元素应用多个类选择器。 请考虑以下示例 −

<p class = "center bold">
   This para will be styled by the classes center and bold.
</p>

The ID Selectors

您可以根据元素的 id 属性定义样式规则。 具有该 id 属性的所有元素都将按照定义的规则进行格式化。

#black {
   color: #000000;
}

对于我们文档中将 id 属性设置为 black 的每个元素，此规则会将内容渲染为黑色。 您还可以让它更具体一些。 例如 −

h1#black {
   color: #000000;
}

对于仅将 id 属性设置为 black 的 <h1> 元素，此规则会将内容渲染为黑色。

当 id 选择器用作后代选择器的基础时，它们具有真正的强大功能，例如 −

#black h2 {
   color: #000000;
}

在此示例中，当这些标题位于将 id 属性设置为 black 的标记内时，所有级别 2 标题都将显示为黑色。

The Child Selectors

您已经看到了后代选择器。 还有另一种选择器类型，它与后代非常相似，但具有不同的功能。 请考虑以下示例 −

body > p {
   color: #000000;
}

如果此规则是 <body> 元素的直接子元素，则此规则会将所有段落渲染为黑色。 放入其他元素（例如 <div> 或 <td>）中的其他段落不会受到此规则的任何影响。

The Attribute Selectors

您还可以向具有特定属性的 HTML 元素应用样式。 下面的样式规则将匹配具有值为 text 的 type 属性的所有输入元素 −

input[type = "text"] {
   color: #000000;
}

这种方法的优点是 <input type = "submit" /> 元素不受影响，且仅将颜色应用于所需的文本字段。

属性选择器应用以下规则。

  1. p[lang] − 选择所有带有 lang 属性的段落元素。

  2. p[lang="fr"] − 选择所有其 lang 属性的值exactly为 “fr” 的段落元素。

  3. p[lang~="fr"] − 选择所有其 lang 属性包含单词 “fr” 的段落元素。

  4. p[lang|="en"] − 选择所有其 lang 属性的值 exactly为 “en” 或以 “en-” 开头的段落元素。

Multiple Style Rules

您可能需要为单个元素定义多个样式规则。您可以定义这些规则来将多个属性和相应的值组合到一个块中，如以下示例中所定义 −

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

这里所有属性和值对都用 semicolon (;) 分隔。您可以将它们放在一行或多行中。为了更好的可读性，我们将其保存在单独的行中。

暂时不用理会上述代码块中提到的属性。这些属性将在接下来的章节中进行解释，您可以在 CSS 参考中找到有关属性的完整详细信息

Grouping Selectors

如果您愿意，可以将样式应用于许多选择器。只需用逗号分隔选择器，如下例所示 −

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

此定义样式规则还适用于 h1、h2 和 h3 元素。列表的顺序无关紧要。选择器中的所有元素都将应用相应的声明。

您可以将各种 id 选择器组合在一起，如下所示 −

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}