Css 简明教程

CSS - Syntax

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

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts −

Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

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

You can put CSS Style Rule Syntax as follows −

selector { property: value }

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

Example − You can define a table border as follows −

table{ border :1px solid #C00; }

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

Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property.

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

You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one.

The Type Selectors

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

This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings −

h1 {
   color: #36CFFF;
}

The Universal Selectors

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

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type −

* {
   color: #000000;
}

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

This rule renders the content of every element in our document in black.

The Descendant Selectors

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

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

ul em {
   color: #000000;
}

The Class Selectors

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

You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.

.black {
   color: #000000;
}

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

This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example −

h1.black {
   color: #000000;
}

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

This rule renders the content in black for only <h1> elements with class attribute set to black.

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

You can apply more than one class selectors to given element. Consider the following example −

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

The ID Selectors

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

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#black {
   color: #000000;
}

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

This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example −

h1#black {
   color: #000000;
}

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

This rule renders the content in black for only <h1> elements with id attribute set to black.

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

The true power of id selectors is when they are used as the foundation for descendant selectors, For example −

#black h2 {
   color: #000000;
}

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

In this example all level 2 headings will be displayed in black color when those headings will lie with in tags having id attribute set to black.

The Child Selectors

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

You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example −

body > p {
   color: #000000;
}

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

This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.

The Attribute Selectors

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

You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text −

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

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

The advantage to this method is that the <input type = "submit" /> element is unaffected, and the color applied only to the desired text fields.

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

There are following rules applied to attribute selector.

p[lang] − Selects all paragraph elements with a lang attribute.
p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly "en", or begin with "en-".

Multiple Style Rules

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

You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example −

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

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

Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines.

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

For a while, don’t bother about the properties mentioned in the above block. These properties will be explained in the coming chapters and you can find complete detail about properties in CSS References

Grouping Selectors

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

You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example −

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

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

This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.

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

You can combine the various id selectors together as shown below −

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