CSS 语法

先决条件:	基本计算机知识，安装的基本软件，基本知识 developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files\">处理文件，HTML基础(学习 HTML简介)，以及 CSS的工作原理的想法。
目的:	详细学习CSS的基本语法结构。

注意:CSS是一种声明性语言，它使其语法相当容易，直观易懂。此外，它还有一个非常漂亮的错误恢复系统，允许你犯错误，而不破坏一切 - 例如不明白的声明一般被忽略。缺点是，可能更难理解错误来自哪里。阅读，所有将最终变得清楚。

一串词汇

在最基本的层面上，CSS包含两个构件:

Properties: Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)

与值配对的属性称为 CSS声明 。 CSS声明放在 CSS声明块中。最后，CSS声明块与选择器配对以产生 CSS规则集(或 CSS规则)。

在理论和书面解释过于深入之前，让我们看一个具体的例子(我们在前面的文章中看到了非常相似的东西)。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>

    <ul>
      <li>This is</li>
      <li>a list</li>
    </ul>
  </body>
</html>

和CSS文件:

h1 {
  colour: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

p, li {
  text-decoration: underline;
}

组合这两个给我们以下结果:

让我们更详细地看一下语法。

CSS声明

将CSS属性设置为特定值是CSS语言的核心功能。 CSS引擎计算哪些声明适用于页面的每个单个元素，以便适当地布局和风格化。重要的是要记住，CSS中的属性和值都区分大小写。每个对中的属性和值由冒号分隔(:)。

alt ="">

在CSS中有超过 300个不同的属性，并且几乎有无数个不同的值。不是所有的属性和值对都是允许的; 每个属性都有为其定义的有效值的特定列表。

重要:如果某个属性未知或某个值对于某个属性无效，则声明将被视为无效，并被浏览器的CSS引擎完全忽略。

重要:在CSS(和其他网络标准)中，已经同意美国拼写作为遵守不确定性出现的标准。例如， color (如上面的代码所示)应该总是拼写 color 。 color 将无法工作。

Active learning: Spot the declarations

在上面的示例中，有五个单独的CSS声明。你能识别无效的声明并找出为什么它无效吗？

CSS声明块

声明分组在块中，每组声明由开头的大括号( {)和结束的(} )

声明块中包含的每个声明必须用分号(; )分隔，否则代码将无法工作(或至少会给出意外的结果)。 )块的最后一个声明不需要以分号结尾，虽然它通常被认为是好的样式，因为它阻止了在用另一个扩展块时忘记添加它宣言。

"。 alt ="">

注意:块有时可以嵌套; 在这种情况下，打开和关闭括号必须逻辑嵌套，与嵌套HTML元素的标签相同。您会遇到的最常见的例子是 @ - rules，，它们以@标识符开头，例如 @media ， @ font-face >，etc(见下面的CSS语句)。

注意:声明块可能为空 - 这是完全有效的。

Active learning: Where are the declaration blocks?

在上面的示例中，您是否已经能够识别三个单独的CSS声明块？

CSS规则

我们缺少一个部分的谜题 - 我们需要讨论如何告诉我们的声明块应该应用哪些元素。这是通过为每个声明块添加一个 selector 来实现的 - 该模式匹配页面上的某些元素。相关的声明将仅应用于这些元素。选择器加上声明块称为规则集，或者通常只是一个规则。

alt ="">

选择器可以变得非常复杂 - 您可以使规则匹配多个元素，包括用逗号分隔的多个选择器(一个组，)和选择器可以链接在一起，例如，我想选择任何具有类"blah "，但只有当它在一个article元素内，并且只有当它被鼠标指针悬停时。不要担心，随着您对CSS的经验越来越丰富，我们将在下一篇文章选择器中详细解释选择器。

元素可以由几个选择器匹配，因此几个规则可以多次设置给定属性。 CSS定义哪个优先于其他优先级，必须应用:这被称为级联算法，您将在 ">级联和继承。

重要:如果链或组中的单个基本选择器无效，例如使用未知伪元素或伪类时，整个选择器组无效，因此整个规则是无效的，因此被忽略。

Active learning: Spot the group of selectors

在我们的示例中，您是否能够识别将应用于两个不同选择器的规则？

CSS语句

CSS规则是样式表的主要构建块 - 您将在CSS中看到的最常见的块。但是还有其他类型的块，你会偶尔遇到 - CSS规则是一种所谓的CSS语句。其他类型如下:

At-rules are used in CSS to convey metadata, conditional information, or other descriptive information. They start with an at sign (@), followed by an identifier to say what kind of rule it is, then a syntax block of some kind, ending with a semi-colon (;). Each type of at-rule, defined by the identifier, will have its own internal syntax and semantics. Examples include:
- @charset and @import (metadata)
- @media or @document (conditional information, also called nested statements, see below.)
- @font-face (descriptive information)
Specific syntax example:
```
@import 'custom.css';
```
This at-rule imports another CSS file into the current CSS.
Nested statements are a specific subset of at-rule, the syntax of which is a nested block of CSS rules that will only be applied to the document if a specific condition is matched:
- The @media at-rule content is applied only if the device which runs the browser matches the expressed condition;
- the @supports at-rule content is applied only if the browser actually supports the tested feature;
- the @document at-rule content is applied only if the current page matches some conditions.
Specific syntax example
```
@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}
```
The above nested statement only applies the nested rule when the page's width exceeds 800 pixels.

您将在课程中的适当位置了解有关某些类型的规则/嵌套语句的更多信息。

重要:任何不是规则集，规则或嵌套语句的语句都是无效的，因此会被忽略。

超越语法:使CSS可读

正如你所看到的，CSS语法不难写:你写了一些规则，如果你写错了，它们将被忽略。然而，即使这是有效的，有一些最佳实践值得知道，使您的CSS代码更容易使用和维护。

空白空间

空白表示实际空格，制表符和新行。您可以添加空格以使您的样式表更易读。

以与HTML相同的方式，浏览器倾向于忽略CSS中的大部分空格; 很多空白只是在帮助可读性。在我们的第一个例子中，我们有每个声明(和规则的开始/结束)在自己的线上 - 这可以说是一个很好的方式来编写CSS，因为它使维护和理解容易:

body {
  font : 1em/150% Helvetica, Arial, sans-serif;
  padding : 1em;
  margin : 0 auto;
  max-width : 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p, #id:first-line {
  background-color: red;
  background-style: none
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

你可以编写完全相同的CSS像这样，大部分的空白被删除 - 这在功能上与第一个例子相同，但我相信你会同意，它有点难以阅读:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; background-style: none}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

你选择的代码布局通常是个人偏好，虽然当你开始在团队中工作时，你可能会发现现有的团队有自己的风格指南，指定一个约定遵守。

你需要在CSS中小心的空格是属性及其值的空格。例如，以下是有效的CSS:

margin: 0 auto;
padding-left: 10px;

但以下是无效的:

margin: 0auto;
padding- left: 10px;

因为 0auto 未被识别为margin属性的有效值( 0 和 auto 是两个单独的值)，并且浏览器无法识别 padding - 作为有效属性。因此，你应该总是确保通过至少一个空格将不同的值彼此分开，但是将属性名/值保持在一起作为一个不间断的字符串。

注释

与HTML一样，我们鼓励您在CSS中进行评论，帮助您了解代码在几个月后回来的工作原理，并帮助其他人理解它。注释对于临时注释掉代码的某些部分以用于测试也是有用的，例如，如果您试图找到代码的哪一部分导致错误。

CSS中的注释以 / * 开头，以 * / 结尾。

/* Handle basic element styling */
/* -------------------------------------------------------------------------------------------- */
body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) {
  /* Let's special case the global font size. On large screen or window,
     we increase the font size for better readability */
  body {font-size: 130%;}
}

h1 {font-size: 1.5em;}

/* Handle specific elements nested in the DOM  */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {background-color: red; background-style: none}
div p                 {margin          :   0; padding         : 1em;}
div p + p             {padding-top     :   0;                       }

速记

font ， / background"> 背景 ， padding ， a href ="/ zh-CN / docs / Web / CSS / border"> border 和 > margin 称为速记属性 - 这是因为它们允许您在一行中设置多个属性值，从而节省时间，处理。

例如，此行:

/* in shorthand like padding and margin, the values are applied
   in the order top, right, bottom, left. There are also other 
   shorthand types, for example two values, which set for example
   the padding for top/bottom, then left/right */
padding: 10px 15px 15px 5px;

这是同样的事情，所有这些:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

而这行:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

做同样的事情，所有这些:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

我们不会尝试详尽地教这些内容 - 您会在课程中遇到很多示例，建议您在我们的 / zh-CN / docs / Web / CSS / Reference"> CSS参考以了解更多。

下一步是什么

在这一点上，您现在应该理解编写易于随时间维护的工作样式表所需的CSS语法的基本原理。在下一篇文章中，我们将深入探讨 CSS选择器，查看可用的不同和它们的工作原理。

w3cschool 编程狮，随时随地学编程

CSS 语法

一串词汇

CSS声明

Active learning: Spot the declarations

CSS声明块

Active learning: Where are the declaration blocks?

CSS规则

Active learning: Spot the group of selectors

CSS语句

超越语法:使CSS可读

空白空间

注释

速记

下一步是什么

Web开发入门

HTML—构建网络

HTML介绍

Multimedia_and_embedding

Introduction_to_CSS

Accessibility

Styling_text

First_steps

Tools_and_testing

Building_blocks

CSS_layout

Objects

Express_Nodejs

Django