# 语法结构

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。每条声明由一个属性和一个值组成。

例子：

h1 {
    color:red;
    font-size:14px;
}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

h1 { color: #ff0000; }

为了节约字节，我们也可以使用 CSS 的缩写形式：

h1 { color: #f00; }

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255, 0, 0); }
p { color: rgb(100%, 0%, 0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

提示：如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。

p {text-align:center; color:red;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：(推荐写法)

p {
  text-align: center;
  color: black;
  font-family: arial;
}

# 引入方式

CSS一共有三种引入方式，分别为：

行内引用是指，将CSS代码直接写在HTML标签中的style属性里。

注意：这种方式的引入CSS，是不需要写选择符的。

例子1：

<body style="background-color: #ccc">
    <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1>
</body>

页内引用是指，将CSS代码单独写在HTML页面的 <head> 标签中，并且由 <style> 标签包裹。

例子2：

<head>
    <style type="text/css">
        body {
            background-color: #cccccc;
        }
    </style>
</head>

页外引用是指，将CSS代码单独写到外部一个CSS文件中，然后再通过 <link> 标签引入到HTML页面中。
这种方式真正做到了表现与结构分离，所以得到开发人员广泛使用。

例子3：

新建 style.css 文件，写如下代码：

body {
    background-color: #cccccc;
}

index.html

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>

推荐使用：页外引用方式引用css文件, 可以做到样式文件，和html文件分离，就是做到样式内容分离，好维护

新建 style.css 文件，写如下代码：

body {
    background-color: #cccccc;
}

新建 index.css 文件，写如下代码：

@import './style.css';
div {
    font-size: 16px
}

index.html

<head>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>

注意：@import './style.css'; 一定要写在页面第一行才生效，不然不生效。

CSS的优先级特点是：就近原则

行内引用　>　页内引用　>　页外引用

下行　>　上行

在css中只有一种代码注释方式，它以 /* 开始 */ 结束

例子：

style.css

/* 公共样式 */
body {
    margin: 0px;
    padding: 0px;
}

/* 导航样式开始 */
.nav {
    font-size: 16px;
    color: black;
}
/* 导航样式结束 */