CSS 笔记

CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，起装饰作用。前者（如 HTML）负责确定网页中有哪些内容，CSS 则确定以何种外观（大小、粗细、颜色、对齐和位置）展现这些元素。

简介

什么是 CSS

CSS 指层叠样式表（Cascading Style Sheets）；
样式定义如何显示 HTML 元素；
样式通常存储在样式表中；
把样式添加到 HTML 中，是为了解决内容与表现分离的问题；
外部样式表可以极大提高工作效率；
外部样式表通常存储在 CSS 文件中；
多个样式定义可层叠为一；
样式对网页中元素位置的排版进行像素级精确控制。

样式层叠

样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。

层叠顺序

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，按优先级从高到低依次为：

内联样式（在 HTML 元素内部）
内部样式表（位于 <head> 标签内部）
外部样式表
浏览器默认设置

语法

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

Selector {
    Property: Value;
    Property: Value;
}

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

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

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

CSS 声明总是以分号 ; 结束，声明组以大括号 {} 括起来。

注释

注释用来解释代码，并且可以随意编辑。浏览器会忽略它。

CSS 注释以 /* 开始, 以 */ 结束，示例如下：

/* 这是个注释 */

p {
    text-align: center;
    /* 这是另一个注释 */
    color: black;
    font-family: arial;
}

颜色

在描述颜色的时候，除了使用英文单词 red，还可以使用十六进制的颜色值 #ff0000：

p {
    color: #ff0000;
}

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

p {
    color: #f00;
}

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

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

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

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

Id 和 Class 选择器

如果要在 HTML 元素中设置 CSS 样式，需要在元素中设置 id 和 class 选择器。

id 选择器

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

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

以下的样式规则应用于属性 id 为 para1 的元素：

#para1 {
    text-align: center;
    color: red;
}

ID 属性不要以数字开头；只能在每个 HTML 文档中出现一次。

class 选择器

class 选择器用于描述一组元素的样式。

class 选择器有别于 id 选择器，class 可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示；在 CSS 中，类选择器以一个点 . 显示：

在下面这个例子中，所有拥有 center 类的 HTML 元素均为居中：

.center {
    text-align: center;
}

也可以指定特定的 HTML 元素使用 class。下面这个示例中，所有的 p 元素使用 class="center" 让该元素的文本居中：

p.center {
    text-align: center;
}

同样，类名的第一个字符也不能使用数字。

创建

插入样式表的方法有三种：

外部样式表
内部样式表
内联样式

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

下面是一个外部样式表的例子：

hr {
    color: sienna;
}

p {
    margin-left: 20px;
}

body {
    background-image: url(/images/back40.gif);
}

不要在属性值与单位之间留有空格。

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表，就像这样：

<head>
    <style>
        hr {
            color: sienna;
        }

        p {
            margin-left: 20px;
        }

        body {
            background-image: url("images/back40.gif");
        }
    </style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，需要在相关的标签内使用样式（style）属性。style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

例如，外部样式表拥有针对 h3 选择器的三个属性：

h3 {
    color: red;
    text-align: left;
    font-size: 8pt;
}

而内部样式表拥有针对 h3 选择器的两个属性：

h3 {
    text-align: right;
    font-size: 20pt;
}

假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：

h3 {
    color: red;
    text-align: right;
    font-size: 20pt;
}

即颜色属性将被继承于外部样式表，而文字排列和字体尺寸会被内部样式表中的规则取代。

多重样式优先级顺序

下列是一份选择器列表，优先级从高到低依次是：

内联样式
ID 选择器
伪类
属性选择器
类选择器
元素（类型）选择器
通用选择器（*）

!important 规则例外

当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了样式表本来的级联规则，从而使其难以调试。

一些经验法则：

要优化考虑使用样式规则的优先级来解决问题而不是 !important；
只在需要覆盖全站或外部 CSS（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important；
不要在全站范围的 CSS 上使用 !important；
不要在插件中使用 !important。

CSS 优先级法则

选择器都有一个权值，权值越大越优先；
当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
继承的 CSS 样式不如后来指定的 CSS 样式；
在同一组属性设置中标有 !important 规则的优先级最大。

背景

CSS 背景属性用于定义 HTML 元素的背景。

背景属性	描述
`background`	简写属性，作用是将背景属性设置在一个声明中
`background-attachment`	背景图像是否固定或者随着页面的其余部分滚动
`background-color`	设置元素的背景颜色
`background-image`	把图像设置为背景
`background-position`	设置背景图像的起始位置
`background-repeat`	设置背景图像是否及如何重复

背景颜色

background-color 属性定义了元素的背景颜色。

页面的背景颜色使用在 body 的选择器中：

body {
    background-color: #b0c4de;
}

可以为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。

background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

背景图像

background-image 属性描述了元素的背景图像。

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

body {
    background-image: url(paper.gif);
}

平铺

如果需要在 HTML 页面上对背景图像进行平铺，可以使用 background-repeat 属性。

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

下面是设置仅水平平铺的例子：

body {
    background-image: url(gradient2.png);
    background-repeat: repeat-x;
}

如果不想让图像平铺，可以将 background-repeat 属性设置为 no-repeat：

body {
    background-image: url(img_tree.png);
    background-repeat: no-repeat;
}

定位

为了让页面排版更加合理，不影响文本的阅读，可以改变图像的位置，利用 background-position 属性：

body {
    background-image: url(img_tree.png);
    background-repeat: no-repeat;
    background-position: right top;
}

为 background-position 属性提供值有很多方法：

可以使用一些关键字：top、bottom、left、right 和 center；
可以使用长度值，如 100px 或 5cm；
也可以使用百分数值。

不同类型的值对于背景图像的放置稍有差异。

关键字

图像放置关键字的作用顾名思义。例如， top left 使图像放置在元素内边距区的左上角。

只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向。那么可以设置位置关键字以任何顺序出现。

如果只有一个关键字，则会默认另一个关键字为 center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p {
    background-image: url(img_tree.png);
    background-repeat: no-repeat;
    background-position: top;
}

百分数值

百分数值的表现方式更为复杂。

假设希望用百分数值将图像在其元素中居中，可以按照下面的代码进行设置：

body {
    background-image: url(img_tree.png);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

这会使图像适当放置，其中心与其元素的中心对齐。

因此，如果想把一个图像放在水平方向 $ \frac{2}{3} $、垂直方向 $ \frac{1}{3} $ 处，可以这样声明：

body {
    background-image: url(img_tree.png);
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

长度值

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。

比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：

body {
    background-image: url(img_tree.png);
    background-repeat: no-repeat;
    background-position: 50px 100px;
}

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景－简写属性

在以上的许多示例中可以看到页面的背景通过了很多的属性来控制。

为了简化这些属性的代码，可以将这些属性合并在同一个属性中。

背景颜色的简写属性为 background：

body {
    background: #ffffff url(img_tree.png) no-repeat right top;
}

当使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

以上属性无需全部使用，可以按照页面的实际需要使用。

文本

通过 CSS 的文本属性，可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等。

文本颜色

颜色属性用来设置文字的颜色。

如果定义了颜色属性，还必须定义背景色属性。一个网页的背景颜色是指在主体内的选择：

body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255, 0, 0);
}

文本对齐

文本排列属性用来设置文本的水平对齐方式。

文本可居中、对齐到左或右、两端对齐。

当 text-align 设置为 justify，每一行展开为宽度相等，左、右外边距对齐（如杂志和报纸）。

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration 主要用来删除链接的下划线：

a {
    text-decoration: none;
}

不建议强调指出不是链接的文本，因为这常常使用户感到混淆。

也可以这样装饰文字：

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

文本转换

文本转换属性用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

p.capitalize {
    text-transform: capitalize;
}

文本缩进

文本缩进属性用来指定文本第一行的缩进。

CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。

通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。

p {
    text-indent: 50px;
}

文本间隔

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

p {
    word-spacing: 30px;
}

CSS 文本属性

属性	描述	属性	描述
`color`	文本颜色	`text-shadow`	文本阴影
`direction`	文本方向	`text-transform`	控制元素中的字母
`letter-spacing`	字符间距	`unicode-bidi`	设置或返回文本是否被重写
`line-height`	行高	`vertical-align`	元素的垂直对齐
`text-align`	对齐元素中的文本	`white-space`	元素中空白的处理方式
`text-decoration`	向文本添加修饰	`word-spacing`	字间距
`text-indent`	缩进元素中文本的首行

h1 {
    letter-spacing: 2px;
}

h2 {
    letter-spacing: -3px;
}

p.small {
    line-height: 70%;
}

p.big {
    line-height: 200%;
}

div.ex1 {
    direction: rtl;
}

p {
    white-space: nowrap;
}

img.top {
    vertical-align: text-top;
}

img.bottom {
    vertical-align: text-bottom;
}

h1 {
    text-shadow: 2px 2px #FF0000;
}

字体

CSS 字体属性定义字体、加粗、大小、文字样式。

CSS 字型

在 CSS 中，有两种类型的字体系列名称：

通用字体系列。拥有相似外观的字体系统组合；
- serif：衬线体
- sans-serif：无衬线体
- monospace：等宽体
- cursive：草书体
- fantasy：幻想体
特定字体系列。特定的字体系列。

字体系列

font-family 属性设置文本的字体系列。

font-family 属性应该设置几个字体名称作为一种“后备”机制。如果浏览器不支持第一种字体，将尝试下一种字体。

多个字体系列用逗号分隔指明：

p {
    font-family: "Times New Roman", Times, serif;
}

字体样式

主要用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常。正常显示文本；
斜体。以斜体字显示的文字；
倾斜的文字。文字向一边倾斜（和斜体非常类似，但不太支持）。

p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}

italic 和 oblique 的区别

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在网页浏览器中看上去完全一样。

CSS 字体属性

属性	描述
`font`	在一个声明中设置所有的字体属性
`font-family`	文本的字体系列
`font-size`	文本的字体大小
`font-style`	文本的字体样式
`font-variant`	以小型大写字体或者正常字体显示文本
`font-weight`	字体的粗细

p.normal {
    font-weight: normal;
}

p.light {
    font-weight: lighter;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

p.normal {
    font-variant: normal;
}

p.small {
    font-variant: small-caps;
}

p.ex1 {
    font: 15px arial, sans-serif;
}

p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
}

链接

不同的链接可以有不同的样式。

链接样式

链接的样式，可以用任何 CSS 属性（如颜色、字体、背景等）。

特别的链接，可以有不同的样式，这取决于它们是什么状态。

这四种链接状态是：

a:link：正常，未访问过的链接
a:visited：用户已访问过的链接
a:hover：当用户鼠标放在链接上时
a:active：链接被点击的那一刻

/* unvisited link */

a:link {
    color: #FF0000;
}

/* visited link */

a:visited {
    color: #00FF00;
}

/* mouse over link */

a:hover {
    color: #FF00FF;
}

/* selected link */

a:active {
    color: #0000FF;
}

当设置为若干链接状态的样式，也有一些顺序规则：

a:hover 必须跟在 a:link 和 a:visited 后面；
a:active 必须跟在 a:hover 后面。

下面的示例将链接显示为方框。

a:link,
a:visited {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    width: 120px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}

a:hover,
a:active {
    background-color: #7A991A;
}

列表样式

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表；
设置不同的列表项标记为无序列表；
设置列表项标记为图像。

在 HTML 中，有无序列表和有序列表两种。

使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

不同的列表项标记

ul.a {
    list-style-type: circle;
}

ul.b {
    list-style-type: square;
}

ol.c {
    list-style-type: upper-roman;
}

ol.d {
    list-style-type: lower-alpha;
}

示例中，一些值是无序列表，以及有些是有序列表。

下列是对 list-style-type 属性的常见属性值的描述：

none：不使用项目符号
disc：实心圆
circle：空心圆
square：实心方块
demical：阿拉伯数字
lower-alpha：小写英文字母
upper-alpha：大写英文字母
lower-roman：小写罗马数字
upper-roman：大写罗马数字

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

ul {
    list-style-image: url(sqpurple.gif);
}

利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。

列表－缩写属性

在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。

为列表使用缩写属性，列表样式属性设置如下：

ul {
    list-style: square url(sqpurple.gif);
}

使用缩写属性值的顺序是：

list-style-type
list-style-position
list-style-image

如果上述值丢失一个，其余仍在指定的顺序，就没关系。

CSS 列表属性

属性	描述
`list-style`	简写属性。用于把所有用于列表的属性设置于一个声明中
`list-style-image`	将图像设置为列表项标志
`list-style-position`	设置列表中列表项标志的位置
`list-style-type`	设置列表项标志的类型

表格

使用 CSS 可以大大提高 HTML 表格的外观。

表格边框

指定 CSS 表格边框，使用 border 属性。

下面的例子指定了一个表格的 th 和 td 元素的黑色边框：

table,
th,
td {
    border: 1px solid black;
}

在上面的例子中的表格有双边框，这是因为表和 th/td 元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse 属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid black;
}

表格尺寸

width 和 height 属性定义表格的宽度和高度。

下面的例子是设置宽度 100%、th 元素高度 50 像素的表格：

table {
    width: 100%;
}

th {
    height: 50px;
}

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align 属性设置水平对齐方式，如左、右或中心：

td {
    text-align: right;
}

垂直对齐属性设置垂直对齐，比如顶部、底部或中间：

td {
    height: 50px;
    vertical-align: bottom;
}

表格填充

如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性：

td {
    padding: 15px;
}

表格颜色

下面的例子指定边框的颜色，以及 th 元素的文本和背景颜色：

table,
td,
th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}

盒子模型

所有 HTML 元素可以看作盒子。在 CSS 中，“盒子模型”这一术语是在设计和布局时使用的。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充和实际内容。

盒子模型允许在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型：

Margin（外边距）：清除边框区域。Margin 没有背景颜色，它是完全透明的；
Border（边框）：边框周围的填充和内容。边框受到盒子的背景颜色影响；
Padding（内边距）：清除内容周围的区域。会受到框中填充的背景颜色影响；
Content（内容）：盒子的内容，显示文本和图像。

在盒子模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

元素的尺寸

当指定一个 CSS 元素的宽度和高度属性时，只是设置了内容区域的宽度和高度。要知道，完全大小的元素还必须添加填充、边框和边距。

下面的例子中的元素的总宽度为 300 px：

{
    width: 250px;
    padding: 10px;
    border: 5px solid gray;
    margin: 10px;
}

250 px（宽）+ 20 px（左右填充）+ 10 px（左右边框）+ 20 px（左右边距）= 300 px。

下面设置总宽度为 250 像素的元素：

{
    width: 220px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0px;
}

元素的总宽度计算公式：

总元素的宽度＝宽度＋左填充＋右填充＋左边框＋右边框＋左边距＋右边距。
元素的总高度计算公式：

总元素的高度＝高度＋顶部填充＋底部填充＋上边框＋下边框＋上边距＋下边距。

边框

CSS 边框可以是围绕元素内容和内边距的一条或多条线，对于这些线条，可以自定义它们的样式、宽度以及颜色。使用 CSS 边框属性，可以创建出比 HTML 中更加优秀的效果。

边框样式

边框样式属性指定要显示什么样的边界。border-style 属性用来定义边框的样式。

border-style 属性的值包括：

none：默认无边框；
dotted：点线框；
dashed：虚线框；
solid：实线边界；
double：两个边界。两个边界的宽度和 border-width 的值相同；
groove：3D 沟槽边界。效果取决于边界的颜色值；
ridge：3D 脊边界。效果取决于边界的颜色值；
inset：3D 嵌入边框。效果取决于边界的颜色值；
outset：3D 突出边框。效果取决于边界的颜色值。

边框宽度

可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2 px 或 0.1 em；或者使用三个关键字之一，它们分别是 thin 、medium（默认值）和 thick。

CSS 没有定义三个关键字的具体宽度，所以一个用户代理可能把 thin 、medium 和 thick 分别设置为 5 px、3 px 和 2 px，而另一个用户代理则分别设置为 3 px、2 px 和 1 px。

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

边框颜色

border-color 属性用于设置边框的颜色，它一次可以接受最多 4 个颜色值。

还可以设置边框的颜色为 transparent。

border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式。

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

边框－单独设置各边

在 CSS 中，可以指定不同的侧面不同的边框：

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

上面的例子也可以设置一个单一属性：

p {
    border-style: dotted solid;
}

border-style 属性可以有 1 到 4 个值：

border-style: dotted solid double dashed;
- 上边框是 dotted
- 右边框是 solid
- 底边框是 double
- 左边框是 dashed
border-style: dotted solid double;
- 上边框是 dotted
- 左、右边框是 solid
- 底边框是 double
border-style: dotted solid;
- 上、底边框是 dotted
- 左、右边框是 solid
border-style: dotted;
- 四面边框是 dotted

上面的例子用了 border-style。然而，它也可以和 border-width、border-color 一起使用。

透明边框

边框颜色值 transparent 用于创建有宽度的不可见边框。

a:link,
a:visited {
    border-style: solid;
    border-width: 5px;
    border-color: transparent;
}

a:hover {
    border-color: gray;
}

利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

边框－简写属性

上面的例子用了很多属性来设置边框。也可以在一个属性中设置边框。

可以在 border 属性中设置：

border-width
border-style
border-color

p {
    border: 5px solid red;
}

CSS 边框属性

属性	描述
`border`	四个边的属性
`border-style`	元素所有边框的样式，或者单独地为各边设置边框样式
`border-width`	为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
`border-color`	元素的所有边框中可见部分的颜色，或为四个边分别设置颜色
`border-bottom`	下边框的所有属性
`border-bottom-color`	元素的下边框的颜色
`border-bottom-style`	元素的下边框的样式
`border-bottom-width`	元素的下边框的宽度
`border-left`	左边框的所有属性
`border-left-color`	元素的左边框的颜色
`border-left-style`	元素的左边框的样式
`border-left-width`	元素的左边框的宽度
`border-right`	右边框的所有属性
`border-right-color`	设置元素的右边框的颜色
`border-right-style`	设置元素的右边框的样式
`border-right-width`	设置元素的右边框的宽度
`border-top`	上边框的所有属性
`border-top-color`	设置元素的上边框的颜色
`border-top-style`	设置元素的上边框的样式
`border-top-width`	设置元素的上边框的宽度

轮廓

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓属性指定了样式、颜色和外边框的宽度。

轮廓属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。

元素的轮廓

由于轮廓是元素周围的线条，所以可以利用此来画线，使用 outline 元素。

p {
    border: 1px solid red;
    outline: green dotted thick;
}

CSS 轮廓属性

属性	说明
`outline`	所有的外边框属性
`outline-color`	外边框的颜色
`outline-style`	外边框的样式
`outline-width`	外边框的宽度

p {
    border: 1px solid red;
}

p.dotted {
    outline-style: dotted;
}

p.dashed {
    outline-style: dashed;
}

p.solid {
    outline-style: solid;
}

p.double {
    outline-style: double;
}

p.groove {
    outline-style: groove;
}

p.ridge {
    outline-style: ridge;
}

p.inset {
    outline-style: inset;
}

p.outset {
    outline-style: outset;
}

p {
    border: 1px solid red;
    outline-style: dotted;
    outline-color: #00ff00;
}

p.one {
    border: 1px solid red;
    outline-style: solid;
    outline-width: thin;
}

p.two {
    border: 1px solid red;
    outline-style: dotted;
    outline-width: 3px;
}

外边距

CSS 外边距定义元素周围的空间。

margin 属性接受任何长度单位、百分数值甚至负值。

margin 清除周围的元素（外边框）的区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上、下、左、右边距。也可以一次改变所有的属性。

值	说明
`auto`	自动设置浏览器边距。这样做的结果会依赖于浏览器
长度	固定的外边距（使用像素、pt、em 等）
百分数	使用百分比的边距
负值	内容重叠

填充

CSS 填充属性定义元素边框与元素内容之间的空间。

当元素的 padding（填充）被清除时，所“释放”的区域将会受到元素背景颜色的填充。

单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变，一切都改变。

padding 属性可以使用长度值或百分比值。但与 margin 属性不同，它不允许使用负值。

内边距的百分比数值

padding 属性的百分比数值是相对于其父元素 width 计算的。如果改变了父元素 width，则它们也会改变。

以下是将段落的内边距设置为父元素 width 的 20% 的示例：

p {
    padding: 20%;
}

假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：

<div style="width: 200px;">
    <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。

填充－单边内边距属性

在 CSS 中，可以指定不同的侧面不同的填充：

p {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 50px;
    padding-left: 50px;
}

填充－简写属性

p {
    padding: 25px 50px;
}

padding 属性可以有一到四个值：

padding: 25px 50px 75px 100px;
- 上填充为 25 px
- 右填充为 50 px
- 下填充为 75 px
- 左填充为 100 px
padding: 25px 50px 75px;
- 上填充为 25 px
- 左、右填充为 50 px
- 下填充为 75 px
padding: 25px 50px;
- 上、下填充为 25 px
- 左、右填充为 50 px
padding: 25px;
- 所有的填充都是 25 px

CSS 填充属性

属性	说明
`padding`	所有填充属性
`padding-bottom`	元素的底部填充
`padding-left`	元素的左部填充
`padding-right`	元素的右部填充
`padding-top`	元素的顶部填充

分组和嵌套

CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。

CSS 嵌套适用于选择器内部的选择器的样式。

分组选择器

在样式表中有很多具有相同样式的元素：

h1 {
    color: green;
}

h2 {
    color: green;
}

p {
    color: green;
}

为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔。

在下面的例子中，对以上代码使用分组选择器：

h1,
h2,
p {
    color: green;
}

可以对任意多个选择器进行分组，CSS 对此没有限制。

嵌套选择器

适用于选择器内部的选择器的样式。

在下面的例子中，为所有 p 元素指定一个样式，为 class="marked" 的元素指定样式，并仅为该类内的 p 元素指定第三个样式：

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

.marked {
    background-color: red;
}

.marked p {
    color: white;
}

显示与可见性

display 属性和 visibility 属性都可以用来隐藏某个元素，但是这两个属性有不同的定义。

前者设置一个元素应如何显示，后者指定一个元素应可见还是隐藏。

隐藏元素

隐藏一个元素可以通过把 display 属性设置为 none，或把 visibility 属性设置为 hidden。这两种方法会产生不同的结果。

visibility: hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {
    visibility: hidden;
}

display: none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {
    display: none;
}

如何改变一个元素显示

可以更改内联元素为块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循 Web 标准。

下面的示例把列表项显示为内联元素：

li {
    display: inline;
}

下面的示例把 span 元素显示为块元素：

span {
    display: block;
}

变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为 display: block 不允许有它内部的嵌套块元素。

定位

CSS 定位属性允许为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。

元素可以使用顶部、底部、左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性。它们也有不同的工作方式，这取决于定位方法。

有四种不同的定位方法。

静态定位

HTML 元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到顶部、底部、左侧和右侧属性影响。

固定定位

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：

p.pos_fixed {
    position: fixed;
    top: 30px;
    right: 5px;
}

固定定位使元素的位置与文档流无关，因此不占据空间。

固定定位的元素和其他元素重叠。

相对定位

相对定位元素的定位是相对其正常位置而言的。

h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}

可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。

h2.pos_top {
    position: relative;
    top: -50px;
}

相对定位元素经常被用来作为绝对定位元素的容器块。

绝对定位

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>：

h2 {
    position: absolute;
    left: 100px;
    top: 150px;
}

绝对定位使元素的位置与文档流无关，因此不占据空间。

绝对定位的元素和其他元素重叠。

重叠的元素

元素的定位与文档流无关，所以可以覆盖页面上的其它元素。

z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。

一个元素可以有正数或负数的堆叠顺序：

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

如果两个定位元素重叠，且没有指定 z-index，最后定位在 HTML 代码中的元素将被显示在最前面。

CSS 定位属性

属性	说明
`bottom`	定位元素下外边距边界与其包含块下边界之间的偏移
`clip`	剪辑一个绝对定位的元素
`cursor`	显示光标移动到指定的类型
`left`	定位元素左外边距边界与其包含块左边界之间的偏移
`overflow`	当元素的内容溢出其区域时发生的事情
`position`	元素的定位类型
`right`	定位元素右外边距边界与其包含块右边界之间的偏移
`top`	定位元素上外边距边界与其包含块上边界之间的偏移
`z-index`	元素的堆叠顺序

img {
    position: absolute;
    clip: rect(0px, 60px, 200px, 0px);
}

<span style="cursor:auto">auto</span>
<br/>
<span style="cursor:crosshair">crosshair</span>
<br/>
<span style="cursor:default">default</span>
<br/>
<span style="cursor:e-resize">e-resize</span>
<br/>
<span style="cursor:help">help</span>
<br/>
<span style="cursor:move">move</span>
<br/>
<span style="cursor:n-resize">n-resize</span>
<br/>
<span style="cursor:ne-resize">ne-resize</span>
<br/>
<span style="cursor:nw-resize">nw-resize</span>
<br/>
<span style="cursor:pointer">pointer</span>
<br/>
<span style="cursor:progress">progress</span>
<br/>
<span style="cursor:s-resize">s-resize</span>
<br/>
<span style="cursor:se-resize">se-resize</span>
<br/>
<span style="cursor:sw-resize">sw-resize</span>
<br/>
<span style="cursor:text">text</span>
<br/>
<span style="cursor:w-resize">w-resize</span>
<br/>
<span style="cursor:wait">wait</span>
<br/>

浮动

float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其它的浮动框为止。

CSS 的 float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。

浮动往往用于图像，但它在布局时一样非常有用。

元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边：

img {
    float: right;
}

彼此相邻的浮动元素

把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

下面的示例对图片廊使用 float 属性：

.thumbnail {
    float: left;
    width: 110px;
    height: 90px;
    margin: 5px;
}

清除浮动

元素浮动之后，周围的元素会重新排列。为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

.text_line {
    clear: both;
}

CSS 浮动属性

属性	描述
`clear`	不允许元素周围有浮动元素
`float`	盒子（元素）是否可以浮动

img {
    float: right;
    border: 1px dotted black;
    margin: 0px 0px 15px 20px;
}

div {
    float: right;
    width: 120px;
    margin: 0 0 15px 20px;
    padding: 15px;
    border: 1px solid black;
    text-align: center;
}

span {
    float: left;
    width: 1.2em;
    font-size: 400%;
    font-family: algerian, courier;
    line-height: 80%;
}

水平对齐

关于 CSS 中元素的水平对齐，可以使用多种属性来进行设置。

块元素对齐

块元素的对齐可以使用 text-align 属性。

h1 {
    text-align: center;
}

使用 margin 属性设置中心对齐

块元素可以把左、右页边距设置为“自动”对齐。

margin 属性可任意拆分为左、右页边距设置自动指定，结果都是出现居中元素：

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
    background-color: #b0e0e6;
}

需要注意的是，如果宽度是 100％，对齐是没有效果的。

使用 position 属性设置左右对齐

元素对齐的方法之一是使用绝对定位：

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #b0e0e6;
}

绝对定位与文档流无关，所以可以覆盖页面上的其它元素。

使用 float 属性设置左右对齐

使用 float 属性是对齐元素的方法之一：

.right {
    float: right;
    width: 300px;
    background-color: #b0e0e6;
}

使用 padding 设置垂直居中对齐

CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding：

.center {
    padding: 70px 0;
    border: 3px solid green;
}

如果要水平和垂直都居中，可以使用 padding 和 text-align: center：

.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}

组合选择符

CSS 组合选择符可以直观地显示选择器与选择器之间的关系。

组合选择符说明了两个选择器直接的关系。

CSS 组合选择符包括各种简单选择符的组合方式。

在 CSS3 中包含了四种组合方式：

后代选取器。以空格分隔；
子元素选择器。以大于号分隔；
相邻兄弟选择器。以加号分隔；
普通兄弟选择器。以波浪号分隔；

后代选取器

后代选取器匹配所有指定元素的后代元素。

以下示例选取所有 <div> 元素中包含的 <p> 元素：

div p {
    background-color: yellow;
}

子元素选择器

与后代选择器相比，子元素选择器只能选择某元素的子元素。

以下示例选择了 <div> 元素中所有直接子元素的 <p>：

div>p {
    background-color: yellow;
}

相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。

以下示例选取了所有位于 <div> 元素后的第一个 <p> 元素：

div+p {
    background-color: yellow;
}

普通兄弟选择器

普通兄弟选择器选取所有指定元素之后的兄弟元素。

以下示例选取了所有 <div> 元素之后的所有兄弟元素 <p>：

div~p {
    background-color: yellow;
}

伪类

伪类用来添加一些选择器的特殊效果。

由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和类有些类似，但它是基于文档之外的抽象，所以叫伪类。

语法

伪类的语法：

selector:pseudo-class {
    property: value;
}

CSS 类也可以使用伪类：

selector.class:pseudo-class {
    property: value;
}

伪类和 CSS 类

伪类可以与 CSS 类配合使用：

<style>
    a.red:visited {
        color: #FF0000;
    }
</style>
<a class="red" href="css-syntax.html">CSS Syntax</a>

:first-child 伪类

可以使用 :first-child 伪类来选择元素的第一个子元素。

CSS 伪类／伪元素

选择器	示例	示例说明
`:link`	`a:link`	选择所有未访问链接
`:visited`	`a:visited`	选择所有访问过的链接
`:active`	`a:active`	选择正在活动的链接
`:hover`	`a:hover`	把鼠标放在链接上的状态
`:focus`	`input:focus`	选择元素输入后具有焦点
`:first-letter`	`p:first-letter`	选择每个 `<p>` 元素的第一个字母
`:first-line`	`p:first-line`	选择每个 `<p>` 元素的第一行
`:first-child`	`p:first-child`	选择属于任意元素的第一个子元素的 `<p>` 元素
`:before`	`p:before`	在每个 `<p>` 元素之前插入内容
`:after`	`p:after`	在每个 `<p>` 元素之后插入内容
`:lang`	`p:lang`	为 `<p>` 元素的 `lang` 属性选择一个开始值

p:first-child {
    color: blue;
}

p>i:first-child {
    color: blue;
}

p:first-child i {
    color: blue;
}

<style>
    q:lang(no) {
        quotes: "~" "~";
    }
</style>
<p>
    Some text
    <q lang="no">A quote in a paragraph</q> Some text.
</p>

input:focus {
    background-color: yellow;
}

伪元素

伪元素用来添加一些选择器的特殊效果。

伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。

语法

伪元素的语法：

selector:pseudo-element {
    property: value;
}

CSS 类也可以使用伪类：

selector.class:pseudo-element {
    property: value;
}

:first-line 伪元素

first-line 伪元素用于向文本的首行设置特殊样式。

在下面的例子中，浏览器会根据 first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：

p:first-line {
    color: #ff0000;
    font-variant: small-caps;
}

first-line 伪元素只能用于块级元素。

:first-letter 伪元素

first-letter 伪元素用于向文本的首字母设置特殊样式：

p:first-letter {
    color: #ff0000;
    font-size: xx-large;
}

first-letter 伪元素只能用于块级元素。

伪元素和 CSS 类

伪元素可以结合 CSS 类：

<style>
    p.article:first-letter {
        color: #ff0000;
    }
</style>
<p class="article">A paragraph in an article</p>

上面的例子会使所有类为 article 的段落的首字母变为红色。

多个伪元素

可以结合多个伪元素来使用。

在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p:first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p:first-line {
    color: #0000ff;
    font-variant: small-caps;
}

CSS 伪类／伪元素

选择器	示例	示例说明
`:link`	`a:link`	选择所有未访问链接
`:visited`	`a:visited`	选择所有访问过的链接
`:active`	`a:active`	选择正在活动的链接
`:hover`	`a:hover`	把鼠标放在链接上的状态
`:focus`	`input:focus`	选择元素输入后具有焦点
`:first-letter`	`p:first-letter`	选择每个 `<p>` 元素的第一个字母
`:first-line`	`p:first-line`	选择每个 `<p>` 元素的第一行
`:first-child`	`p:first-child`	选择属于任意元素的第一个子元素的 `<p>` 元素
`:before`	`p:before`	在每个 `<p>` 元素之前插入内容
`:after`	`p:after`	在每个 `<p>` 元素之后插入内容
`:lang`	`p:lang`	为 `<p>` 元素的 `lang` 属性选择一个开始值

h1:before {
    content: url(smiley.gif);
}

h1:after {
    content: url(smiley.gif);
}

导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用 CSS，可以转换成好看的导航栏而不是枯燥的 HTML 菜单。

导航栏＝链接列表

作为标准的 HTML 基础，一个导航栏是必需的。

在下面的例子中，将建立一个标准的 HTML 列表导航栏。

导航条基本上是一个链接列表，所以使用 <ul> 和 <li> 元素非常有意义：

<ul>
    <li>
        <a href="default.asp">Home</a>
    </li>
    <li>
        <a href="news.asp">News</a>
    </li>
    <li>
        <a href="contact.asp">Contact</a>
    </li>
    <li>
        <a href="about.asp">About</a>
    </li>
</ul>

现在从列表中删除边距和填充：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

list-style-type: none：移除列表前的小标志。一个导航栏并不需要列表标记；
移除浏览器的默认设置，将边距和填充设置为 0。

上面例子中的代码是垂直和水平导航栏使用的标准代码。

垂直导航栏

上面的代码，只需要元素的样式，建立一个垂直的导航栏：

a {
    display: block;
    width: 60px;
}

display: block：显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许指定宽度；
width: 60px：块元素默认情况下是最大宽度。这里指定一个 60 像素的宽度。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a:link,
a:visited {
    display: block;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    width: 120px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover,
a:active {
    background-color: #7A991A;
}

水平导航栏

有两种方法创建横向导航栏——使用内联或浮动的列表项。

这两种方法都很好，但如果想链接到具有相同的大小，则必须使用浮动的方法。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-top: 6px;
    padding-bottom: 6px;
}

li {
    display: inline;
}

a:link,
a:visited {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 6px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover,
a:active {
    background-color: #7A991A;
}

内嵌列表项

建立一个横向导航栏的方法之一是指定元素，下面的代码是标准的内嵌：

li {
    display: inline;
}

默认情况下，<li> 元素是块元素。这里删除换行符之前和之后每个列表项，以显示一行。

浮动列表项

在上面的例子中，链接有不同的宽度。

对于所有的链接，指定宽度相等，设置为浮动元素，并指定为元素的宽度：

li {
    float: left;
}

a {
    display: block;
    width: 60px;
}

float: left：使用浮动块元素的幻灯片彼此相邻；
display: block：显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许指定宽度；
width: 60px：块元素默认情况下是最大宽度。这里指定一个 60 像素的宽度。

下拉菜单

下面将使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。

基本下拉菜单

当鼠标移动到指定元素上时，会出现下拉菜单。

<style>
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        padding: 12px 16px;
        z-index: 1;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
</style>

<div class="dropdown">
    <span>Mouse over me</span>
    <div class="dropdown-content">
        <p>Hello World!</p>
    </div>
</div>

HTML 部分：

可以使用任意 HTML 元素来打开下拉菜单，如 <span> 或 <button> 元素。

使用容器元素（如 <div>）来创建下拉菜单的内容，并放在任何位置上。

使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：

.dropdown 类使用 position: relative，这将设置下拉菜单的内容放置在下拉按钮（使用 position: absolute）的右下角位置。

.dropdown-content 类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意 min-width 的值设置为 160 px，这可以随意修改。如果想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100%（overflow: auto 设置可以在小尺寸屏幕上滚动）。

使用 box-shadow 属性让下拉菜单看起来像一个“卡片”。

:hover 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。