HTML&CSS基础

本章极简地涵盖了html与CSS的基础知识, 内容来自html菜鸟教程.

一. HTML简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落.</p>

</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据,如定义网页编码格式为 utf-8.
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签

什么是HTML

HTML 是用来描述网页的一种语言.

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言,而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag).

HTML 标签是由尖括号包围的关键词,比如
HTML 标签通常是成对出现的,比如和
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思. 但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签,如下实例:

HTML 元素: <p>这是一个段落.</p>

<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页.

网络上有很多不同的文件,如果能够正确声明HTML的版本,浏览器就能正确显示网页内容. doctype 声明是不区分大小写的,以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

通用声明

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文编码

目前在大部分浏览器中,直接输出中文会出现中文乱码的情况,这时候我们就需要在头部将字符声明为 UTF-8 或 GBK.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落.</p>

</body>
</html>

二. HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现,比如：name="value".

属性实例

HTML 链接由 <a> 标签定义.链接的地址在 href 属性中指定：

<a href="http://www.runoob.com">这是一个链接</a>

HTML 属性常用引用属性值

属性值应该始终被包括在引号内.双引号是最常用的,不过使用单引号也没有问题.

提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如： name='John "ShotGun" Nelson'

HTML 属性参考手册

查看完整的HTML属性列表: HTML 标签参考手册.

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

三. HTML元素

HTML `<head>` 元素

<head> 元素包含了所有的头部标签元素.在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS）,及各种meta信息.

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>.

HTML `<title>` 元素

<title> 标签定义了不同文档的标题. <title> 在 HTML/XHTML 文档中是必需的. <title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时,显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>

HTML `<base>` 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML `<link>` 元素

标签定义了文档与外部资源之间的关系. 标签通常用于链接到样式表:

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

HTML `<style>` 元素

<style> 标签定义了HTML文档的样式文件引用地址. 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
    background-color:yellow;
}
p {
    color:blue
}
</style>
</head>

HTML `<meta>` 元素

meta标签描述了一些基本的元数据. <meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析. META 元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据. 元数据可以使用于浏览器（如何显示内容或重新加载页面）,搜索引擎（关键词）,或其他Web服务. <meta> 一般放置于 <head> 区域

`<meta>` 标签- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者:

<meta name="author" content="Runoob">

每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">

HTML `<script>` 元素

<script>标签用于加载脚本文件,如： JavaScript. <script>元素在以后的章节中会详细描述.

HTML head 元素

标签	描述
`<head>`	定义了文档的信息
`<title>`	定义了文档的标题
`<base>`	定义了页面链接标签的默认链接地址
`<link>`	定义了一个文档和外部资源之间的关系
`<meta>`	定义了HTML文档中的元数据
`<script>`	定义了客户端的脚本文件
`<style>`	定义了HTML文档的样式文件

四. HTML布局

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单的方式. 大多数站点可以使用 <div> 或者 <table> 元素来创建多列.CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观. 下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>主要的网页标题</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © runoob.com</td>
</tr>
</table>

</body>
</html>

菜鸟教程(runoob.com)

主要的网页标题
菜单 HTML CSS JavaScript	内容在这里
版权 © runoob.com

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护.通过编辑单一的文件,就可以改变所有页面的布局.如需学习更多有关 CSS 的知识,请访问我们的CSS 教程.
Tip: 由于创建高级的布局非常耗时,使用模板是一个快速的选项.通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局,并优化它们）.

CSS基础

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 选择器通常是您需要改变样式的 HTML 元素，每条声明由一个属性和一个值组成. 属性（property）是您希望设置的样式属性（style attribute）.每个属性有一个值. 属性和值被冒号分开.

CSS声明总是以分号;结束，声明总以大括号 {} 括起来, CSS注释以 /* 开始, 以 */ 结束

/*这是个注释*/
p
{
    color:red;
    /*这是另一个注释*/
    text-align:center;
}

一. 基本操作

id 和 class 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1":

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

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用. class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中.

.center {text-align:center;}

也可以指定特定的 HTML 元素使用 class. 在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

p.center {text-align:center;}

CSS创建

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

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

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

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

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

外部样式表可以在任何文本编辑器中进行编辑. 文件不能包含任何的 html 标签. 样式表应该以 .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 得到的样式是：

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

即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代.

多重样式优先级

样式表允许以多种方式规定样式信息. 样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中. 甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>显示绿色，是内部样式</h3>
</body>

注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下：

<head>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
    <h3>显示蓝色，是外部样式</h3>
</body>

CSS背景

CSS 背景属性用于定义HTML元素的背景，CSS 属性定义背景效果:

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

背景颜色

body {background-color:#b0c4de;}

CSS中，颜色值通常以以下方式定义:

十六进制："#ff0000"
RGB："rgb(255,0,0)"
颜色名称："red"

背景图像

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

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

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺. 一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

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

如果图像只在水平方向平铺 (repeat-x)

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

背景图像- 设置定位与不平铺

如果不想让图像平铺，可以使用 background-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;
}

CSS文本格式

文本颜色

body {color:red;}
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;}

文本缩进

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

p {text-indent:50px;}

CSS字体

CSS字型

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

通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"）
特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"）

字体系列

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;}

设置字体大小像素

设置文字的大小与像素，让您完全控制文字大小：

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素. em的尺寸单位由W3C建议. 1em和当前字体大小相等. 在浏览器中默认的文字大小是16px. 因此，1em的默认大小是16px. 可以通过下面这个公式将像素转换为em：px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样. 不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小.

使用百分比和EM组合

在所有浏览器的解决方案中，设置元素的默认字体大小的是百分比：

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

CSS链接

链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）.特别的链接，可以有不同的样式，这取决于他们是什么状态.

这四个链接状态是：

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

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

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

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

常见的链接样式

根据上述链接的颜色变化的例子，看它是在什么状态. 让我们通过一些其他常见的方式转到链接样式：

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS列表

CSS 列表属性作用如下：

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

列表

在 HTML中，有两种类型的列表：

无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母

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

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

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;}

作为列表项标记的图像

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

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

CSS表格

表格边框

指定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％的宽度，50像素的th元素的高度的表格：

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;
}

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容. 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素.

Margin(外边距) - 清除边框外的区域，外边距是透明的
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域，内边距是透明的
Content(内容) - 盒子的内容，显示文本和图像

元素的宽度和高度

重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度. 要知道，完整大小的元素，你还必须添加内边距，边框和外边距.

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

300px (宽) + 50px (左 + 右填充) + 50px (左 + 右边框) + 50px (左 + 右边距) = 450px

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

最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS边框

边框样式

border-style值

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

边框宽度

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

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin.

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

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

边框颜色

border-color属性用于设置边框的颜色. 可以设置的颜色：

name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"

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;
}

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

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一起使用

CSS轮廓(outline)

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用. CSS outline 属性规定元素轮廓的样式、颜色和宽度.

所有CSS轮廓属性

属性	说明	值
outline	在一个声明中设置所有的轮廓属性	outline-color outline-style outline-width inherit
outline-color	设置轮廓的颜色	color-name hex-number rgb-number invert inherit
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit
outline-width	设置轮廓的宽度	thin medium thick length inherit

CSS margin(外边距)

margin

margin 清除周围的（外边框）元素区域. margin 没有背景颜色，是完全透明的. margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性.

可能的值

值	说明
auto	设置浏览器边距这样做的结果会依赖于浏览器
length	定义一个固定的margin（使用像素，pt，em等）
%	定义一个使用百分比的边距

Margin - 单边外边距属性

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

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

CSS padding(填充)

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充,

length: 定义一个固定的填充(像素, pt, em,等)
%: 使用百分比值定义一个填充

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

CSS 分组和嵌套选择器

分组选择器

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

h1 {
    color:green;
}
h2 {
    color:green;
}
p {
    color:green;
}

为了尽量减少代码，你可以使用分组选择器, 每个选择器用逗号分隔. 在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p
{
    color:green;
}

嵌套选择器

它可能适用于选择器内部的选择器的样式，在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式
.marked{ }: 为所有 class="marked" 的元素指定一个样式
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式

p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

CSS 尺寸 (Dimension)

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度. 同样，它允许你增加行间距.

属性	描述
height	设置元素的高度
line-height	设置行高
max-height	设置元素最大高度
max-width	设置元素最大宽度
min-height	设置元素最小高度
min-width	设置元素最小宽度
width	设置元素宽度

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏.

隐藏元素 - `display:none`或`visibility:hidden`

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

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

h1.hidden {visibility:hidden;}

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

h1.hidden {display:none;}

CSS Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符.

块元素的例子：

<h1>
<p>
<div>

内联元素只需要必要的宽度，不强制换行.

内联元素的例子：

<span>
<a>

如何改变一个元素显示

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

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

li {display:inline;}

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

span {display:block;}

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

CSS Position(定位)

position 属性指定了元素的定位类型. position 属性的五个值：

static
relative
fixed
absolute
sticky

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

static 定位

HTML 元素的默认值，即没有定位，遵循正常的文档流对象. 静态定位的元素不会受到 top, bottom, left, right影响.

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed 定位

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

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

Fixed定位使元素的位置与文档流无关，因此不占据空间. Fixed定位的元素和其他元素重叠。

absolute 定位

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

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

absolute 定位使元素的位置与文档流无关，因此不占据空间. absolute 定位的元素和其他元素重叠.

sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换. 它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; 它会固定在目标位置. 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位.

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效. 否则其行为与相对定位相同.

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    background-color: green;
    border: 2px solid #4CAF50;
}

重叠的元素

元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素. z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）. 一个元素可以有正数或负数的堆叠顺序：

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

具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面. 注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面.

CSS 布局 - Overflow

CSS overflow 属性用于控制内容溢出元素框时显示的方式. overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条.

overflow属性有以下值：

值	描述
visible	默认值. 内容不会被修剪，会呈现在元素框之外
hidden	内容会被修剪，并且其余内容是不可见的
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit	规定应该从父元素继承 overflow 属性的值

注意:overflow 属性只工作于指定高度的块元素上. 默认情况下，overflow 的值为 visible，意思是内容溢出元素框：

div {
    width: 200px;
    height: 50px;
    background-color: #eee;
    overflow: visible;
}

CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列. Float（浮动），往往是用于图像，但它在布局时一样非常有用.

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动. 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止. 浮动元素之后的元素将围绕它. 浮动元素之前的元素将不会受到影响. 如果图像是右浮动，下面的文本流将环绕在它左边：

img
{
    float:right;
}

如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻. 在这里，我们对图片廊使用 float 属性：

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

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

clear 属性指定元素两侧不能出现浮动元素. 使用 clear 属性往文本中添加图片廊：

.text_line
{
    clear:both;
}

CSS 布局 - 水平 & 垂直对齐

元素居中对齐

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘. 元素通过指定宽度，并将两边的空外边距平均分配：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用.

文本居中对齐

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

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

图片居中对齐

要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中:

img {
    display: block;
    margin: auto;
    width: 40%;
}

左右对齐 - 使用定位方式

我们可以使用 position: absolute; 属性来对齐元素:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素. 提示: 当使用 position 来对齐元素时, 通常 <body> 元素会设置 margin 和 padding . 这样可以避免在不同的浏览器中出现可见的差异.

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

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

左右对齐 - 使用 float 方式

我们也可以使用 float 属性来对齐元素:

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意. 这样可以避免在不同的浏览器中出现可见的差异.

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 "clearfix(清除浮动)" 来解决该问题.

我们可以在父元素上添加 overflow: auto; 来解决子元素溢出的问题:

.clearfix {
    overflow: auto;
}

body {
    margin: 0;
    padding: 0;
}

.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;
}

垂直居中 - 使用 `line-height`

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

垂直居中 - 使用 `position` 和 `transform`

除了使用 padding 和 line-height 属性外, 我们还可以使用 transform 属性来设置垂直居中:

.center {
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CSS 组合选择符

组合选择符说明了两个选择器之间的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式:

后代选择器(以空格分隔)
子元素选择器(以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）

后代选择器

后代选择器用于选取某元素的后代元素. 以下实例选取所有 <p> 元素插入到 <div> 元素中:

div p
{
  background-color:yellow;
}

子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素. 以下实例选择了<div>元素中所有直接子元素 <p> ：

div>p
{
  background-color:yellow;
}

相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素. 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）. 以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:

div+p
{
  background-color:yellow;
}

后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素. 以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :

div~p
{
  background-color:yellow;
}

CSS 伪类(Pseudo-classes)

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

语法

伪类的语法：selector:pseudo-class {property:value;} CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}

anchor伪类

在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

注意：在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的注意：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的注意：伪类的名称不区分大小写

伪类和CSS类

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

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS 语法</a>

如果在上面的例子的链接已被访问，它会显示为红色.

CSS `:first-child` 伪类

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

匹配第一个 `<p>` 元素

在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：

p:first-child
{
    color:blue;
}

匹配所有 `<p>` 元素中的第一个 `<i>` 元素

在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：

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

匹配所有作为第一个子元素的 `<p>` 元素中的所有 `<i>` 元素

在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：

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

CSS - `:lang` 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

在下面的例子中，:lang 类为属性值为 no 的q元素定义引号的类型：

q:lang(no) {quotes: "~" "~";}

所有CSS伪类/元素

选择器	示例	示例说明
:checked	input:checked	选择所有选中的表单元素
:disabled	input:disabled	选择所有禁用的表单元素
:empty	p:empty	选择所有没有子元素的p元素
:enabled	input:enabled 选择所有启用的表单元素
:first-of-type	p:first-of-type	选择的每个 p 元素是其父元素的第一个 p 元素
:in-range	input:in-range	选择元素指定范围内的值
:invalid	input:invalid	选择所有无效的元素
:last-child	p:last-child	选择所有p元素的最后一个子元素
:last-of-type	p:last-of-type	选择每个p元素是其母元素的最后一个p元素
:not(selector)	:not(p)	选择所有p以外的元素
:nth-child(n)	p:nth-child(2)	选择所有 p 元素的父元素的第二个子元素
:nth-last-child(n)	p:nth-last-child(2)	选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)	p:nth-of-type(2)	选择所有p元素第二个为p的子元素
:only-of-type	p:only-of-type	选择所有仅有一个子元素为p的元素
:only-child	p:only-child	选择所有仅有一个子元素的p元素
:optional	input:optional	选择没有"required"的元素属性
:out-of-range	input:out-of-range	选择指定范围以外的值的元素属性
:read-only	input:read-only	选择只读属性的元素属性
:read-write	input:read-write	选择没有只读属性的元素属性
:required	input:required	选择有"required"属性指定的元素属性
:root	root	选择文档的根元素
:target	#news:target	选择当前活动#news元素(点击URL包含锚的名字)
:valid	input:valid	选择所有有效值的属性
: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(language)	p:lang(it)	为`<p>`元素的lang属性选择一个开始值

CSS 伪元素

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

伪元素的语法：

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-line" 伪元素：

font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

`:first-letter` 伪元素

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

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

注意： "first-letter" 伪元素只能用于块级元素注意：下面的属性可应用于 "first-letter" 伪元素：

font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

伪元素和CSS类

伪元素可以结合CSS类：

p.article:first-letter {color:#ff0000;}

<p class="article">文章段落</p>

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

多个伪元素

可以结合多个伪元素来使用. 在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large. 第一行中的其余文本将为蓝色，并以小型大写字母显示. 段落中的其余文本将以默认字体大小和颜色来显示：

p:first-letter
{
    color:#ff0000;
    font-size:xx-large;
}
p:first-line
{
    color:#0000ff;
    font-variant:small-caps;
}

CSS - `:before` 伪元素

":before" 伪元素可以在元素的内容前面插入新内容. 下面的例子在每个 <h1>元素前面插入一幅图片：

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

CSS - `:after` 伪元素

":after" 伪元素可以在元素的内容之后插入新内容. 下面的例子在每个 <h1> 元素后面插入一幅图片：

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

所有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(language)	p:lang(it)	为`<p>`元素的lang属性选择一个开始值

CSS 导航栏

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

导航栏=链接列表

在我们的例子中我们将建立一个标准的 HTML 列表导航栏. 导航条基本上是一个链接列表，所以使用 <ul> 和 <li>元素非常有意义：

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

现在，让我们从列表中删除边距和填充：

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

例子解析：

list-style-type:none - 移除列表前小标志. 一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0 上面的例子中的代码是垂直和水平导航栏使用的标准代码.

垂直导航栏

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

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

示例说明：

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

注意：请务必指定 <a>元素在垂直导航栏的的宽度. 如果省略宽度，IE6可能产生意想不到的效果.

垂直导航条实例

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

激活/当前导航条实例

在点击了选项后，我们可以添加 "active" 类来标注哪个选项被选中：

li a.active {
    background-color: #4CAF50;
    color: white;
}

创建链接并添加边框

可以在 <li> or <a>上添加 text-align:center 样式来让链接居中. 可以在 border <ul> 上添加 border 属性来让导航栏有边框. 如果要在每个选项上添加边框，可以在每个 <li> 元素上添加border-bottom :

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

全屏高度的固定导航条

接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed;
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

水平导航栏

有两种方法创建横向导航栏. 使用内联(inline)或浮动(float)的列表项. 这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法.

内联列表项

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

li
{
    display:inline;
}

实例解析：

display:inline; - 默认情况下，<li> 元素是块元素. 在这里，我们删除换行符之前和之后每个列表项，以显示一行

浮动列表项

在上面的例子中链接有不同的宽度. 对于所有的链接宽度相等，浮动 <li>元素，并指定为 <a>元素的宽度：

li
{
    float:left;
}
a
{
    display:block;
    width:60px;
}

实例解析：

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

水平导航条实例

创建一个水平导航条，在鼠标移动到选项后修改背景颜色.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

激活/当前导航条实例

在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中：

.active {
    background-color: #4CAF50;
}

链接右对齐

将导航条最右边的选项设置右对齐 (float:right;)：

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>

添加分割线

<li> 通过 border-right 样式来添加分割线:

/* 除了最后一个选项(last-child) 其他的都添加分割线 */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

固定导航条

可以设置页面的导航条固定在头部或者底部：

固定在头部

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

固定在底部

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

灰色水平导航条

ul {
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

li a {
    color: #666;
}

CSS 下拉菜单

使用 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;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>菜鸟教程</p>
    <p>www.runoob.com</p>
  </div>
</div>

实例解析 HTML 部分：我们可以使用任何的 HTML 元素来打开下拉菜单，如：<span>, 或 a <button> 元素. 使用容器元素 (如： <div>) 来创建下拉菜单的内容，并放在任何你想放的位置上. 使用 <div> 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式.

CSS 部分： .dropdown 类使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置.

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

我们使用 box-shadow 属性让下拉菜单看起来像一个"卡片".

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

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项. 这个实例类似前面的实例，当我们在下拉列表中添加了链接，并设置了样式：

<style>
/* 下拉按钮样式 */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.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);
}

/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">菜鸟教程 1</a>
    <a href="#">菜鸟教程 2</a>
    <a href="#">菜鸟教程 3</a>
  </div>
</div>

下拉内容对齐方式

如果你想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码 right: 0;

.dropdown-content {
    right: 0;
}

CSS 提示工具(Tooltip)

提示工具在鼠标移动到指定元素后触发

基础提示框(Tooltip)

提示框在鼠标移动到指定元素上显示：

<style>
/* Tooltip 容器 */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}

/* Tooltip 文本 */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* 定位 */
    position: absolute;
    z-index: 1;
}

/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

实例解析

HTML-使用容器元素 (like <div>) 并添加 "tooltip" 类. 在鼠标移动到 <div> 上时显示提示信息.

提示文本放在内联元素上(如 <span>) 并使用class="tooltiptext"

CSS-tooltip 类使用 position:relative, 提示文本需要设置定位值 position:absolute. 注意: 接下来的实例会显示更多的定位效果.

tooltiptext 类用于实际的提示文本. 模式是隐藏的，在鼠标移动到元素显示. 设置了一些宽度、背景色、字体色等样式.

CSS3 border-radius 属性用于为提示框添加圆角.

:hover 选择器用于在鼠标移动到到指定元素 <div> 上时显示的提示.

定位提示工具

以下实例中，提示工具显示在指定元素的右侧(left:105%)

注意 top:-5px 同于定位在容器元素的中间. 使用数字 5 因为提示文本的顶部和底部的内边距（padding）是 5px. 如果你修改 padding 的值，top 值也要对应修改，这样才可以确保它是居中对齐的. 在提示框显示在左边的情况也是这个原理.

显示在右侧：

.tooltip .tooltiptext {
    top: -5px;
    left: 105%;
}

显示在左侧：

.tooltip .tooltiptext {
    top: -5px;
    right: 105%;
}

如果你想要提示工具显示在头部和底部, 我们需要使用 margin-left 属性，并设置为-60px. 这个数字计算来源是使用宽度的一半来居中对齐，即： width/2 (120/2 = 60).

显示在头部：

.tooltip .tooltiptext {
    width: 120px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

显示在底部：

.tooltip .tooltiptext {
    width: 120px;
    top: 100%;
    left: 50%;
    margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}

添加箭头

我们可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框. 以下实例演示了如何为显示在顶部的提示工具添加底部箭头：

顶部提示框/底部箭头：

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* 提示工具底部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

实例解析在提示工具内定位箭头: top: 100% , 箭头将显示在提示工具的底部. left: 50% 用于居中对齐箭头.

注意：border-width 属性指定了箭头的大小. 如果你修改它，也要修改 margin-left 值. 这样箭头才能居中显示.

border-color 用于将内容转换为箭头. 设置顶部边框为黑色，其他是透明的. 如果设置了其他的也是黑色则会显示为一个黑色的四边形.

以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：

底部提示框/顶部箭头：

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* 提示工具头部 */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

以下两个实例是左右两边的箭头实例：

右侧提示框/左侧箭头：

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* 提示工具左侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

左侧提示框/右侧箭头：

.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 100%; /* 提示工具右侧 */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

淡入效果

我们可以使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果:

淡入效果：

.tooltip .tooltiptext {
    opacity: 0;
    transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
    opacity: 1;
}

CSS 图片廊

以下是使用 CSS 创建图片廊：

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
      <img decoding="async" src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
      <img decoding="async" loading="lazy" src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
      <img decoding="async" loading="lazy" src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
      <img decoding="async" loading="lazy" src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

使用 CSS3 的媒体查询来创建响应式图片廊：

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img decoding="async" loading="lazy" src="http://www.runoob.com/wp-content/uploads/2016/04/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>


<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_forest.jpg">
      <img decoding="async" loading="lazy" src="http://www.runoob.com/wp-content/uploads/2016/04/img_forest.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_lights.jpg">
      <img decoding="async" loading="lazy" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_mountains.jpg">
      <img decoding="async" loading="lazy" src="http://www.runoob.com/wp-content/uploads/2016/04/img_mountains.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">这里添加图片文本描述</div>
  </div>
</div>

<div class="clearfix"></div>

<div style="padding:6px;">

  <h4>重置浏览器大小查看效果</h4>
</div>

CSS 图像透明/不透明

注意：CSS Opacity属性是W3C的CSS3建议的一部分.

实例1 - 创建一个透明图像

首先，展示如何用CSS创建一个透明图像.

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /* IE8 及其更早版本 */
}

实例2 - 图像的透明度 - 悬停效果

img
{
  opacity:0.4;
  filter:alpha(opacity=40); /*  IE8 及其更早版本 */
}
img:hover
{
  opacity:1.0;
  filter:alpha(opacity=100); /* IE8 及其更早版本 */
}

第一个CSS块是和例1中的代码类似. 此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么. 在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的.

此CSS是：opacity=1.

当鼠标指针远离图像时，图像将重新具有透明度.

实例3 - 透明的盒子中的文字

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div.background
{
  width:500px;
  height:250px;
  background:url(https://www.runoob.com/images/klematis.jpg) repeat;
  border:2px solid black;
}
div.transbox
{
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* IE8 及更早版本 */
}
div.transbox p
{
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
}
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。
</p>
</div>
</div>

</body>
</html>

首先，我们创建一个固定的高度和宽度的div元素，带有一个背景图片和边框. 然后我们在第一个div内部创建一个较小的div元素. 这个div也有一个固定的宽度，背景颜色，边框 - 而且它是透明的. 透明的div里面，我们在P元素内部添加一些文本.

CSS 图像拼合技术

图像拼合

图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量，并节省带宽.

图像拼合 - 简单实例

有了CSS，我们可以只显示我们需要的图像的一部分. 在下面的例子CSS指定显示 "img_navsprites.gif" 的图像的一部分：

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

实例解析：

<img class="home" src="img_trans.gif" /> -因为不能为空, src属性只定义了一个小的透明图像. 显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

这是使用图像拼合最简单的方法，现在我们使用链接和悬停效果.

图像拼合 - 创建一个导航列表

我们想使用拼合图像 ("img_navsprites.gif")，以创建一个导航列表. 我们将使用一个HTML列表，因为它可以链接，同时还支持背景图像：

#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}

实例解析：

#navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
#navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px

现在开始每个具体部分的定位和样式：

#home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
#home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
#prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px
#prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
#next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
#next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）

图像拼合 - 悬停效果

现在，我们希望我们的导航列表中添加一个悬停效果. :hover 选择器用于鼠标悬停在元素上的显示的效果. :hover 选择器可以运用于所有元素. 我们的新图像 ("img_navsprites_hover.gif") 包含三个导航图像和三幅图像, 因为这是一个单一的图像，而不是6个单独的图像文件，当用户停留在图像上不会有延迟加载.

我们添加悬停效果只添加三行代码：

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

实例解析：

由于该列表项包含一个链接，我们可以使用：hover伪类
#home a:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} - 对于所有三个悬停图像，我们指定相同的背景位置，只是每个再向下45px

CSS 属性选择器

具有特定属性的HTML元素样式不仅仅是class和id.

属性选择器

下面的例子是把包含标题（title）的所有元素变为蓝色：

[title]
{
    color:blue;
}

属性和值选择器

下面的实例改变了标题title='runoob'元素的边框样式:

[title=runoob]
{
    border:5px solid green;
}

属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子，使用~分隔属性和值:

[title~=hello] { color:blue; }

下面是包含指定值的lang属性的元素样式的例子，使用|分隔属性和值:

[lang|=en] { color:blue; }

表单样式

属性选择器样式无需使用class或id的形式:

input[type="text"]
{
    width:150px;
    display:block;
    margin-bottom:10px;
    background-color:yellow;
}
input[type="button"]
{
    width:120px;
    margin-left:35px;
    display:block;
}

CSS 表单

一个表单案例，我们使用 CSS 来渲染 HTML 的表单元素：

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

输入框(input) 样式

使用 width 属性来设置输入框的宽度：

input {
  width: 100%;
}

以上实例中设置了所有 <input> 元素的宽度为 100%，如果你只想设置指定类型的输入框可以使用以下属性选择器：

input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框
...

输入框填充

使用 padding 属性可以在输入框中添加内边距.

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

注意我们设置了 box-sizing 属性为 border-box. 这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的.

输入框(input) 边框

使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角：

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

如果你只想添加底部边框可以使用 border-bottom 属性:

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

输入框(input) 颜色

可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

输入框(input) 聚焦

默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓. 我们可以设置 input 样式为 outline: none; 来忽略该效果.

使用 :focus 选择器可以设置输入框在获取焦点时的样式：

input[type=text]:focus {
  background-color: lightblue;
}

input[type=text]:focus {
  border: 3px solid #555;
}

输入框(input) 图标

如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性. 注意设置图标的左边距，让图标有一定的空间：

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

带动画的搜索框

以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展.

input[type=text] {
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

文本框（textarea）样式

注意: 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

下拉菜单（select）样式

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

按钮样式

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* 提示: 使用 width: 100% 设置全宽按钮 */

响应式表单

响应式表单可以根据浏览器窗口的大小重新布局各个元素，我们可以通过重置浏览器窗口大小来查看效果：

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* 清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 layout - 在屏幕宽度小于 600px 时， 设置为上下堆叠元素 */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

CSS 计数器

CSS 计数器通过一个变量来设置，根据规则递增变量.

使用计数器自动编号

CSS 计数器根据规则来递增变量. CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

要使用 CSS 计数器，得先用 counter-reset 创建：

以下实例在页面创建一个计数器 (在 body 选择器中)，每个 <h2> 元素的计数值都会递增，并在每个 <h2> 元素前添加 "Section <计数值>:"

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

嵌套计数器

以下实例在页面创建一个计数器，在每一个 <h1> 元素前添加计数值 "Section <主标题计数值>.", 嵌套的计数值则放在 <h2> 元素的前面，内容为 "<主标题计数值>.<副标题计数值>":

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

计数器也可用于列表中，列表的子元素会自动创建. 这里我们使用了 counters() 函数在不同的嵌套层级中插入字符串:

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";

}

CSS 计数器属性

属性	描述
content	使用 `::before` 和 `::after` 伪元素来插入自动生成的内容
counter-increment	递增一个或多个值
counter-reset	创建或重置一个或多个计数器

CSS 网页布局

头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

内容区域

内容区域一般有三种形式:

1 列：一般用于移动端
2 列：一般用于平板设备
3 列：一般用于 PC 桌面设备

我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：

/* 创建三个相等的列 */
.column {
  float: left;
  width: 33.33%;
}

/* 列后清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

提示:要设置两列可以设置 width 为 50%. 创建 4 列可以设置为 25% 提示: 现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％.

.column {
  float: left;
}

/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}

/* 中间列宽度 */
.column.middle {
  width: 50%;
}

/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等.

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* 创建两列 */
/* Left column */
.leftcolumn {
  float: left;
  width: 75%;
}

/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

CSS !important 规则

什么是 !important

CSS 中的 !important 规则用于增加样式的权重. !important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明.

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

以上实例中，尽管 ID 选择器和类选择器具有更高的优先级，但三个段落背景颜色都显示为红色，因为 !important 规则会覆盖 background-color 属性.

重要说明

使用 !important 是一个坏习惯，应该尽量避免，因为这破坏了样式表中的固有的级联规则使得调试找 bug 变得更加困难了. 当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大优先级的声明将会被采用.

以下实例我们在查看 CSS 源码时就不是很清楚哪种颜色最重要：

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

使用建议：

一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important

何时使用 `!important`

如果要在你的网站上设定一个全站样式的 CSS 样式可以使用 !important. 比如我们要让网站上所有按钮的样式都一样：

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

如果我们将按钮放在另一个具有更优先级的元素中，按钮的外观就会发生变化，并且属性会发生冲突，如下实例：

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

如果想要设置所有按钮具有相同的外观，我们可以将 !important 规则添加到按钮的样式属性中，如下所示：

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

布武不舞

主要的网页标题