CSS - 语法

CSS包含样式规则，由浏览器解释，然后应用于文档中的相应元素.样式规则由三部分组成 :

• 选择器 : 选择器是将应用样式的HTML标记.这可以是任何标签，例如< h1>或< table>等.

• 财产 : 属性是HTML标记的一种属性.简而言之，所有HTML属性都转换为CSS属性.它们可以是颜色，边框等.

• 值 : 值将分配给属性.例如， color 属性可以具有 red 或＃F1F1F1 等值.

您可以将CSS样式规则语法设置如下 :

selector {property:value}

示例 : 你可以定义一个表格边框如下 :

table {border:1px solid＃C00; }

这里的表是一个选择器，border是一个属性，给定值 1px solid＃C00 是该属性的值.

您可以根据自己的舒适度以各种简单的方式定义选择器.让我逐个放置这些选择器.

类型选择器

这与我们上面看到的选择器相同.再一次，为所有1级标题和减号提供颜色的另一个例子;

h1 { color:＃36CFFF; }

通用选择器

不是选择特定类型的元素，而是选择通用选择器只需匹配任何元素类型的名称 :

* { color:＃000000; }

此规则将文档中每个元素的内容呈现为黑色.

后代选择器

假设您希望仅在特定元素位于特定元素内时才将样式规则应用于特定元素.如以下示例所示，样式规则将应用于< em>元素仅在它位于< ul>内时标签.

ul em { color:＃000000; }

类选择器

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

.black { color:＃000000; }

此规则在我们的文档中为class属性设置为 black 的每个元素呈现黑色内容.你可以使它更具特色.例如 :

h1.black {   color: #000000; }

此规则仅为< h1>呈现黑色内容class属性设置为 black 的元素.

您可以将多个类选择器应用于给定元素.请考虑以下示例 :

   This para will be styled by the classes center and bold.

ID选择器

您可以根据 id 属性定义样式规则要素.所有具有 id 的元素将根据定义的规则进行格式化.

#black {   color: #000000; }

此规则将 id 属性设置为 black

h1#black {   color: #000000; }

此规则仅为< h1>呈现黑色内容 id 属性设置为黑色的元素.

id 选择器的真正强大之处在于它们被用作后代选择器的基础，例如 :

#black h2 {   color: #000000; }

在这个例子中，当这些标题位于 id

子选择器

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

body > p {   color: #000000; }

如果这些规则是< body>的直接子节点，则此规则将呈现黑色的所有段落元件.其他段落放在其他元素中，例如< div>或< td>将不会对此规则产生任何影响.

属性选择器

您还可以将样式应用于具有特定属性的HTML元素.下面的样式规则将匹配具有类型属性的所有输入元素，其值为 text :

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

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

以下规则应用于属性选择器.

• p [lang] : 选择具有 lang 属性的所有段落元素.

• p [lang ="fr"] :  ;选择其 lang 属性的值完全为"fr"的所有段落元素.

• p [lang~ =" fr"] : 选择其 lang 属性包含单词"fr"的所有段落元素.

• p [lang | ="en" ] : 选择其 lang 属性包含完全为"en"的值的所有段落元素，或以"en  - "开头.

多个样式规则

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

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

这里所有的属性和值对都用分号(;)分隔.您可以将它们保存在一行或多行中.为了更好的可读性，我们将它们保持在不同的行中.

有一段时间，不要打扰上面块中提到的属性.这些属性将在接下来的章节中解释，您可以在CSS参考

分组选择器

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

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;}