CSS 基本语法

预备知识

写在前面

这一节的知识将会比较杂，包含了 CSS 语法，CSS 的作用以及应用 CSS 的三种方法

语法部分先回顾了规则集的构成，重点讲了选择器部分的语法，再讲了关于属性方面的一点小语法知识

关于选择器的一些比较零碎的内容我本来打算留到下一节专门讲选择器时再讲，但是由于下一节的内容本身就不少，所以还是将这一部分先放到这里；另外我将下一节的一些知识作为例子放在这里，先培养培养感情，到下一节时读者不会因为一时接触了过多新概念而心生退意

CSS 语法

CSS 是一门基于规则的语言，你能定义用于你的网页中特定元素样式的一组规则

规则集构成

假如我们需要为网页中某个元素样式定义一组规则，首先我们应该选定规则作用的对象，即选择器

1
2
3

p {
    /*...*/
}

其次我们将规则写进大括号内，针对我们想要修改的属性，给定相应的值

p {
    font-size: inherit; // 字号
    font-family: "Times new Roman"; // 字体
    color: #333; // 字色
    hyphen: auto; // 换行连字符
}

使用类名

我们可以给一个 HTML 元素赋予类名 class

1	<li class="special">...</li>

此时类名为 wrapper 的 <li>，将于拥有其他类名的 <li> 以及 <li> 本身区别开来。如果我们需要选中该类，只需在选择器前面加上西文句点 .

1
2
3

.special {
    list-style-type: none;
}

如果你仅仅只想选中列表的 special 类（例如还有 special 类的段落元素存在）

1
2
3

li.special {
    list-style-type: none;
}

根据元素在文档中的位置确定样式

有时候，你希望某些内容根据它在文档中的位置而有所不同

考虑下面这个例子：

<ul>
  <li><strong>列表中段落元素</strong></li>
  <li>列表项目二</li>
  <li>列表项目三</li>
  <p><strong>普通的段落元素</strong></p>
</ul>

假如我们想选择列表中的 <strong>，此时我们利用包含选择器达到目的。该选择器将选择<li>内部的任何<strong>元素（<li>的后代）

1
2
3

ul strong {
  color: red;
}

在上面的 css 代码后增加这段代码，看看效果变化

1
2
3

li strong {
  color: green;
}

你可以在 Codepen 上查看这个例子

另外一个例子是相邻选择器

另一些可能想尝试的事情是在 HTML 文档中设置直接出现在标题后面并且与标题具有相同层级的段落样式

1
2
3

<h1>我是一级标题</h1>
<p>这是一个段落文本。</p>
<p>这是第二段。</p>

为此需在两个选择器之间添加一个 + 号 (成为 相邻选择符)

1
2
3

h1 + p {
  font-size: 200%;
}

根据状态确定样式

最后要看的一种修改样式的方法就是根据标签的状态确定样式。一个直观的例子就是当我们修改链接的样式时。当我们修改一个链接的样式时我们需要定位 (针对) <a> （锚）标签。取决于是否是未访问的、访问过的、被鼠标悬停的、被键盘定位的，亦或是正在被点击当中的状态，这个标签有着不同的状态

例如我们希望链接在未访问状态下没有下划线，链接颜色改为 #555 (灰黑色)，而访问过之后仍保持这样的样式

a:link,
a:visited {
    text-decoration-line: none; // 值为 underline 则有下划线，none 则没有
    color: #333;
}

鼠标悬停链接时增加下划线，并且颜色变为黑色

a:hover {
    text-decoration-line: underline;
    color: #000;
}

激活时链接背景色变黑色，字体变白色

a:active {
    background-color: black; 
    color: white;
}

上例中element:{state} 的 :{state} 是一种伪类选择器。它并不直接更改元素的样式，仅当元素处于某种状态或者某些情形下，它才会起作用，并且作用于整个元素

速记属性

一些属性，如 font，background，padding，border 和 margin 等属性称为速记属性—这是因为它们允许您在一行中设置多个属性值，从而节省时间并使代码更整洁

这里仅以 margin 为例 (padding 和 border 也是类似的道理)，其他待后续讲到时再提一嘴（如果我还记得自己在这里挖了个坑）

1	margin: 10px 15px 15px 5px;

这一行等价于 (按顺时针)

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

另外

1	margin: 0 15px;

等价于

margin-top: 0;
margin-right: 15px;
margin-bottom: 0;
margin-left: 15px;

CSS 的作用

在预备知识中我们曾提到过，HTML 决定了网页的静态内容，CSS 规定了网页应该以何种形式进行布局和以何种样式显示内容，甚至是完成一些动画效果，以达到浏览的舒适性和美感

样式化 HTML 元素

样式化段落元素 <p>

1
2
3

p {
    color: #333;
}

或者一次使用多个选择器，选择器之间用逗号隔开

p,
li {
    color: #333;
}

注意：当同时使用多个选择器时，如果有一个选择器失效，那么其他选择器也将失效

改变元素的默认行为

你可能对浏览器的默认样式不太满意。没关系，只需选定那个元素，加一条 CSS 规则即可。就拿我们的无序列表 <ul>举个例子吧，它自带项目符号，如果你对这个样式并不满意，你就可以这样移除它们：

1
2
3

li {
  list-style-type: none;
}

应用 CSS 于 HTML

第一种方式是利用 link 的属性 rel 建立外部样式表与 HTML 文档的联系

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

css 文件如下所示：

h1 {
  color: blue; // 字色
  background-color: yellow; // 背景颜色
  border: 1px solid black; // 边界
}

p {
  color: red; // 字色
}

第二种方式是使用内部样式表

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is my first CSS example</p>
  </body>
</html>

有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑 CSS 文件)，但该方法和外部样式表比起来更加低效。在一个站点里，你不得不在每个页面里重复添加相同的 CSS，并且在需要更改 CSS 时修改每个页面文件

最后一种方式是内联样式表。内联样式表存在于 HTML 元素的 style 属性之中。其特点是每个 CSS 表只影响一个元素：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experiment</title>
  </head>
  <body>
    <h1 style="color: blue; background-color: yellow; border: 1px solid black;">Hello World!</h1>
    <p style="color: red;">This is my first CSS example</p>
  </body>
</html>

除非你有充足的理由，否则不要这样做！它难以维护（在需要更新时，你必须在修改同一个文档的多处地方），并且这种写法将文档结构和文档表现混合起来了，这使得代码变得难以阅读和理解

Shaw