CSS 笔记

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

简介

什么是 CSS

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

样式层叠

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

层叠顺序

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

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

语法

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

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

多重样式优先级顺序

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

  1. 内联样式
  2. ID 选择器
  3. 伪类
  4. 属性选择器
  5. 类选择器
  6. 元素（类型）选择器
  7. 通用选择器（*）

!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 文本在网页浏览器中看上去完全一样。

字体大小

font-size 属性设置文本的大小。

字体大小的值可以是绝对或相对的大小。

如果不指定字体的大小，默认大小和普通文本段落一样，为 16 像素（16 px = 1 em）。

设置字体大小像素

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

h1 {
    font-size: 40px;
}

h2 {
    font-size: 30px;
}

p {
    font-size: 14px;
}

使用百分比和 em 组合

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

body {
    font-size: 100%;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 1.875em;
}

p {
    font-size: 0.875em;
}

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 选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。

下拉菜单

创建下拉菜单，并允许用户选取列表中的某一项。

这个示例类似于前面的示例，只不过在下拉列表中添加了链接，并设置了样式：

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

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

    li {
        float: left;
    }

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

    li a:hover,
    .dropdown:hover .dropbtn {
        background-color: #111;
    }

    .dropdown {
        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;
    }
</style>
</head>

<body>
    <ul>
        <li>
            <a class="active" href="#home">主页</a>
        </li>
        <li>
            <a href="#news">新闻</a>
        </li>
        <div class="dropdown">
            <a href="#" class="dropbtn">下拉菜单</a>
            <div class="dropdown-content">
                <a href="#">链接 1</a>
                <a href="#">链接 2</a>
                <a href="#">链接 3</a>
            </div>
        </div>
    </ul>
</body>

下拉内容对齐方式

使用 float: left 或 float: right。

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

.dropdown-content {
    right: 0;
}

图像透明度

使用 CSS 很容易创建透明的图像。

CSS3 中属性的透明度是 opacity。

img {
    opacity: 0.4;
}

浏览器使用透明度属性可以将图像变得不透明。opacity 属性值从 0.0 到 1.0。值越小，元素更加透明。

属性选择器

顾名思义，属性选择器就是指可以根据元素的属性以及属性值来选择元素。

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

属性选择器

下面的例子把包含 title 的所有元素变为蓝色：

[title] {
    color: blue;
}

属性和值选择器

下面的示例改变了 title="example" 元素的边框样式：

[title=example] {
    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;
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,565评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,021评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,003评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,015评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,020评论 5赞 370
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,856评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,178评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,824评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,264评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,788评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,913评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,535评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,130评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,102评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,334评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,298评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,622评论 2赞 343

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1赞 92
  • CSS笔记总结
    css笔记总结 1.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是您需要改变样式的 ...
    一生有你_c480阅读 451评论 1赞 1
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,304评论 2赞 66
  • HTML&CSS笔记(2)
    CSS格式化排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性，如下： 不...
    wq04200阅读 378评论 0赞 1
  • 叛逆的青春
    听！又是一阵责怪声， 看！又是一张严肃脸。 真得很无奈、好无助， 一种压力犹如被老虎追赶， 哪里还敢掉以轻心， 紧...
    豫视西影阅读 486评论 6赞 9