CSS与其选择器

CSS 概述

• CSS 指层叠样式表 (Cascading Style Sheets)

• 样式定义如何显示 HTML 元素

• 样式通常存储在样式表中

• 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

• 外部样式表可以极大提高工作效率

• 外部样式表通常存储在 CSS 文件中

• 多个样式定义可层叠为一

CSS 语法

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

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

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

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。

body {
     font-family: Verdana, sans-serif;
     }

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>
​
<p class="center">
This paragraph will also be center-aligned.
</p>

和id 一样，class 也可被用作派生选择器：

.fancy td {
    color: #f60;
    background: #666;
    }

元素也可以基于它们的类而被选择：

td.fancy {
    color: #f60;
    background: #666;
    }

对带有指定属性的 HTML 元素设置样式。

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

属性选择器

下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

属性和值选择器

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

CSS 选择器

统配选择器：匹配页面所以元素；

*{ }

样式初始化：

初始化页面的默认元素

标记选择器：匹配页面指定的所有的某种元素

tagName { }

css首选的选择器：

类选择器：

给对应的元素增加一个class名

.类名{

}

CSS 元素选择器

最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。

如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

选择器分组

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。

可以将任意多个选择器分组在一起，对此没有任何限制。

CSS 类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

该选择器可以单独使用，也可以与其他元素结合使用。

CSS ID 选择器

ID 选择器允许以一种独立于文档元素的方式来指定样式。

与类不同，在一个 HTML 文档中，ID 选择器会使用一次，而且仅一次。

不同于类选择器，ID 选择器不能结合使用，因为 ID 属性不允许有以空格分隔的词列表。