点击联系发帖人CSS 指层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，起装饰作用。前者（如 HTML）负责确定网页中有哪些内容，CSS 则确定以何种外观（大小、粗细、颜色、对齐和位置）展现这些元素。
- 样式定义如何显示 HTML 元素；
- 样式通常存储在样式表中；
- 把样式添加到 HTML 中，是为了解决内容与表现分离的问题；
- 外部样式表可以极大提高工作效率；
- 外部样式表通常存储在 CSS 文件中；
- 多个样式定义可层叠为一；
- 样式对网页中元素位置的排版进行像素级精确控制。
样式层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，按优先级从高到低依次为：
- 内联样式（在 HTML 元素内部）
CSS 规则由两个主要的部分构成——选择器，以及一条或多条声明：
选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性。每个属性有一个值。属性和值由冒号分开。
CSS 声明总是以分号 ; 结束，声明组以大括号 {} 括起来。
注释用来解释代码，并且可以随意编辑。浏览器会忽略它。
/* 这是另一个注释 */在描述颜色的时候，除了使用英文单词 red，还可以使用十六进制的颜色值 #ff0000：
为了节约字节，可以使用 CSS 的缩写形式：
还可以通过两种方法使用 RGB 值：
当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如当尺寸为 0 像素时，0 之后不需要使用 px 单位。
如果要在 HTML 元素中设置 CSS 样式，需要在元素中设置 id 和 class 选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
以下的样式规则应用于属性 id 为 para1 的元素：
ID 属性不要以数字开头；只能在每个 HTML 文档中出现一次。
class 选择器用于描述一组元素的样式。
class 选择器有别于 id 选择器，class 可以在多个元素中使用。
在下面这个例子中，所有拥有 center 类的 HTML 元素均为居中：
也可以指定特定的 HTML 元素使用 class。下面这个示例中，所有的 p 元素使用 class="center" 让该元素的文本居中：
同样，类名的第一个字符也不能使用数字。
插入样式表的方法有三种：
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
下面是一个外部样式表的例子：
不要在属性值与单位之间留有空格。
当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表，就像这样：
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，需要在相关的标签内使用样式（style）属性。style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
而内部样式表拥有针对 h3 选择器的两个属性：
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
即颜色属性将被继承于外部样式表，而文字排列和字体尺寸会被内部样式表中的规则取代。
下列是一份选择器列表，优先级从高到低依次是：
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖 CSS 中任何其他的声明，无论它处在声明列表中的哪里。尽管如此，!important 规则还是与优先级毫无关系。使用 !important 不是一个好习惯，因为它改变了样式表本来的级联规则，从而使其难以调试。
- 要优化考虑使用样式规则的优先级来解决问题而不是
!important； - 只在需要覆盖全站或外部 CSS（例如引用的 ExtJs 或者 YUI ）的特定页面中使用
!important；
- 选择器都有一个权值，权值越大越优先；
- 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
- 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
- 继承的 CSS 样式不如后来指定的 CSS 样式；
- 在同一组属性设置中标有
!important规则的优先级最大。
CSS 背景属性用于定义 HTML 元素的背景。
| 简写属性，作用是将背景属性设置在一个声明中 |
| 背景图像是否固定或者随着页面的其余部分滚动 |
| 设置背景图像的起始位置 |
| 设置背景图像是否及如何重复 |
页面的背景颜色使用在 body 的选择器中：
可以为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
下面是设置仅水平平铺的例子：
为了让页面排版更加合理，不影响文本的阅读，可以改变图像的位置，利用 background-position 属性：
不同类型的值对于背景图像的放置稍有差异。
图像放置关键字的作用顾名思义。例如， top left 使图像放置在元素内边距区的左上角。
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向。那么可以设置位置关键字以任何顺序出现。
如果只有一个关键字，则会默认另一个关键字为 center。
所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
百分数值的表现方式更为复杂。
假设希望用百分数值将图像在其元素中居中，可以按照下面的代码进行设置：
这会使图像适当放置，其中心与其元素的中心对齐。
因此，如果想把一个图像放在水平方向 、垂直方向 处，可以这样声明：
长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。
比如，如果设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。
在以上的许多示例中可以看到页面的背景通过了很多的属性来控制。
为了简化这些属性的代码，可以将这些属性合并在同一个属性中。
当使用简写属性时，属性值的顺序为：
以上属性无需全部使用，可以按照页面的实际需要使用。
通过 CSS 的文本属性，可以改变页面中文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进等等。
颜色属性用来设置文字的颜色。
如果定义了颜色属性，还必须定义背景色属性。一个网页的背景颜色是指在主体内的选择：
文本排列属性用来设置文本的水平对齐方式。
文本可居中、对齐到左或右、两端对齐。
当 text-align 设置为 justify，每一行展开为宽度相等，左、右外边距对齐（如杂志和报纸）。
如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
从设计的角度看 text-decoration 主要用来删除链接的下划线：
不建议强调指出不是链接的文本，因为这常常使用户感到混淆。
文本转换属性用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
文本缩进属性用来指定文本第一行的缩进。
CSS 提供了 text-indent 属性，该属性可以方便地实现文本缩进。
通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度。
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
| 设置或返回文本是否被重写 |
CSS 字体属性定义字体、加粗、大小、文字样式。
在 CSS 中，有两种类型的字体系列名称：
- 通用字体系列。拥有相似外观的字体系统组合；
- 特定字体系列。特定的字体系列。
font-family 属性应该设置几个字体名称作为一种“后备”机制。如果浏览器不支持第一种字体，将尝试下一种字体。
多个字体系列用逗号分隔指明：
主要用于指定斜体文字的字体样式属性。
- 斜体。以斜体字显示的文字；
- 倾斜的文字。文字向一边倾斜（和斜体非常类似，但不太支持）。
- 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
- 倾斜（oblique）文本是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在网页浏览器中看上去完全一样。
字体大小的值可以是绝对或相对的大小。
如果不指定字体的大小，默认大小和普通文本段落一样，为 16 像素（16 px = 1 em）。
设置文字的大小与像素，完全控制文字大小：
使用百分比和 em 组合
在所有浏览器的解决方案中，设置 <body> 元素的默认字体大小的是百分比：
| 在一个声明中设置所有的字体属性 |
| 以小型大写字体或者正常字体显示文本 |
不同的链接可以有不同的样式。
链接的样式，可以用任何 CSS 属性（如颜色、字体、背景等）。
特别的链接，可以有不同的样式，这取决于它们是什么状态。
-
a:link：正常，未访问过的链接 -
a:visited：用户已访问过的链接 -
a:hover：当用户鼠标放在链接上时 -
a:active：链接被点击的那一刻
当设置为若干链接状态的样式，也有一些顺序规则：
下面的示例将链接显示为方框。
CSS 列表属性作用如下：
- 设置不同的列表项标记为有序列表；
- 设置不同的列表项标记为无序列表；
- 设置列表项标记为图像。
在 HTML 中，有无序列表和有序列表两种。
使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。
示例中，一些值是无序列表，以及有些是有序列表。
-
none：不使用项目符号
要指定列表项标记的图像，使用列表样式图像属性：
利用 list-style-position 可以确定标志出现在列表项内容之外还是内容内部。
在单个属性中可以指定所有的列表属性。这就是所谓的缩写属性。
为列表使用缩写属性，列表样式属性设置如下：
使用缩写属性值的顺序是：
如果上述值丢失一个，其余仍在指定的顺序，就没关系。
| 简写属性。用于把所有用于列表的属性设置于一个声明中 |
| 将图像设置为列表项标志 |
| 设置列表中列表项标志的位置 |
使用 CSS 可以大大提高 HTML 表格的外观。
下面的例子指定了一个表格的 th 和 td 元素的黑色边框：
在上面的例子中的表格有双边框，这是因为表和 th/td 元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse 属性。
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
下面的例子是设置宽度 100%、th 元素高度 50 像素的表格：
表格中的文本对齐和垂直对齐属性。
text-align 属性设置水平对齐方式，如左、右或中心：
垂直对齐属性设置垂直对齐，比如顶部、底部或中间：
如果在表的内容中控制空格之间的边框，应使用 td 和 th 元素的填充属性：
下面的例子指定边框的颜色，以及 th 元素的文本和背景颜色：
所有 HTML 元素可以看作盒子。在 CSS 中，“盒子模型”这一术语是在设计和布局时使用的。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距、边框、填充和实际内容。
盒子模型允许在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型：
- Margin（外边距）：清除边框区域。Margin 没有背景颜色，它是完全透明的；
- Border（边框）：边框周围的填充和内容。边框受到盒子的背景颜色影响；
- Padding（内边距）：清除内容周围的区域。会受到框中填充的背景颜色影响；
- Content（内容）：盒子的内容，显示文本和图像。
在盒子模型中，外边距可以是负值，而且在很多情况下都要使用负值的外边距。
当指定一个 CSS 元素的宽度和高度属性时，只是设置了内容区域的宽度和高度。要知道，完全大小的元素还必须添加填充、边框和边距。
下面的例子中的元素的总宽度为 300 px：
下面设置总宽度为 250 像素的元素：
-
元素的总宽度计算公式：
总元素的宽度＝宽度＋左填充＋右填充＋左边框＋右边框＋左边距＋右边距。
-
元素的总高度计算公式：
总元素的高度＝高度＋顶部填充＋底部填充＋上边框＋下边框＋上边距＋下边距。
CSS 边框可以是围绕元素内容和内边距的一条或多条线，对于这些线条，可以自定义它们的样式、宽度以及颜色。使用 CSS 边框属性，可以创建出比 HTML 中更加优秀的效果。
边框样式属性指定要显示什么样的边界。border-style 属性用来定义边框的样式。
-
none：默认无边框； -
solid：实线边界； -
groove：3D 沟槽边界。效果取决于边界的颜色值； -
ridge：3D 脊边界。效果取决于边界的颜色值； -
inset：3D 嵌入边框。效果取决于边界的颜色值； -
outset：3D 突出边框。效果取决于边界的颜色值。
为边框指定宽度有两种方法：可以指定长度值，比如 2 px 或 0.1 em；或者使用三个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
border-color 属性用于设置边框的颜色，它一次可以接受最多 4 个颜色值。
在 CSS 中，可以指定不同的侧面不同的边框：
上面的例子也可以设置一个单一属性：
边框颜色值 transparent 用于创建有宽度的不可见边框。
利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。
上面的例子用了很多属性来设置边框。也可以在一个属性中设置边框。
可以在 border 属性中设置：
| 元素所有边框的样式，或者单独地为各边设置边框样式 |
| 为元素的所有边框设置宽度，或者单独地为各边边框设置宽度 |
| 元素的所有边框中可见部分的颜色，或为四个边分别设置颜色 |
| 设置元素的右边框的颜色 |
| 设置元素的右边框的样式 |
| 设置元素的右边框的宽度 |
| 设置元素的上边框的颜色 |
| 设置元素的上边框的样式 |
| 设置元素的上边框的宽度 |
轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
轮廓属性指定了样式、颜色和外边框的宽度。
轮廓属性的位置让它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。
由于轮廓是元素周围的线条，所以可以利用此来画线，使用 outline 元素。
CSS 外边距定义元素周围的空间。
margin 属性接受任何长度单位、百分数值甚至负值。
margin 清除周围的元素（外边框）的区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上、下、左、右边距。也可以一次改变所有的属性。
| 自动设置浏览器边距。这样做的结果会依赖于浏览器 |
| 固定的外边距（使用像素、pt、em 等） |
CSS 填充属性定义元素边框与元素内容之间的空间。
当元素的 padding（填充）被清除时，所“释放”的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变，一切都改变。
padding 属性可以使用长度值或百分比值。但与 margin 属性不同，它不允许使用负值。
padding 属性的百分比数值是相对于其父元素 width 计算的。如果改变了父元素 width，则它们也会改变。
以下是将段落的内边距设置为父元素 width 的 20% 的示例：
假设一个段落的父元素是 div 元素，那么它的 padding 的 width 计算是根据 div 进行的：
上下内边距与左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度。
在 CSS 中，可以指定不同的侧面不同的填充：
padding 属性可以有一到四个值：
- 所有的填充都是 25 px
CSS 分组可以将具有相同样式的选择器进行分组，减少代码量。
CSS 嵌套适用于选择器内部的选择器的样式。
在样式表中有很多具有相同样式的元素：
为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔。
在下面的例子中，对以上代码使用分组选择器：
可以对任意多个选择器进行分组，CSS 对此没有限制。
适用于选择器内部的选择器的样式。
在下面的例子中，为所有 p 元素指定一个样式，为 class="marked" 的元素指定样式，并仅为该类内的 p 元素指定第三个样式：
display 属性和 visibility 属性都可以用来隐藏某个元素，但是这两个属性有不同的定义。
前者设置一个元素应如何显示，后者指定一个元素应可见还是隐藏。
隐藏一个元素可以通过把 display 属性设置为 none，或把 visibility 属性设置为 hidden。这两种方法会产生不同的结果。
visibility: hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display: none 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
可以更改内联元素为块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循 Web 标准。
下面的示例把列表项显示为内联元素：
下面的示例把 span 元素显示为块元素：
变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为 display: block 不允许有它内部的嵌套块元素。
CSS 定位属性允许为一个元素定位。它也可以将一个元素放在另一个元素后面，并指定一个元素的内容太大时，应该发生什么。
元素可以使用顶部、底部、左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定 position 属性。它们也有不同的工作方式，这取决于定位方法。
有四种不同的定位方法。
HTML 元素的默认值，即没有定位，元素出现在正常的流中。
静态定位的元素不会受到顶部、底部、左侧和右侧属性影响。
元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
固定定位使元素的位置与文档流无关，因此不占据空间。
固定定位的元素和其他元素重叠。
相对定位元素的定位是相对其正常位置而言的。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于 <html>：
绝对定位使元素的位置与文档流无关，因此不占据空间。
绝对定位的元素和其他元素重叠。
元素的定位与文档流无关，所以可以覆盖页面上的其它元素。
z-index 属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）。
一个元素可以有正数或负数的堆叠顺序：
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
如果两个定位元素重叠，且没有指定 z-index，最后定位在 HTML 代码中的元素将被显示在最前面。
| 定位元素下外边距边界与其包含块下边界之间的偏移 |
| 剪辑一个绝对定位的元素 |
| 显示光标移动到指定的类型 |
| 定位元素左外边距边界与其包含块左边界之间的偏移 |
| 当元素的内容溢出其区域时发生的事情 |
| 定位元素右外边距边界与其包含块右边界之间的偏移 |
| 定位元素上外边距边界与其包含块上边界之间的偏移 |
float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其它的浮动框为止。
CSS 的 float（浮动）会使元素向左或向右移动，其周围的元素也会重新排列。
浮动往往用于图像，但它在布局时一样非常有用。
元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边：
把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。
下面的示例对图片廊使用 float 属性：
元素浮动之后，周围的元素会重新排列。为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊：
| 不允许元素周围有浮动元素 |
| 盒子（元素）是否可以浮动 |
关于 CSS 中元素的水平对齐，可以使用多种属性来进行设置。
块元素的对齐可以使用 text-align 属性。
使用 margin 属性设置中心对齐
块元素可以把左、右页边距设置为“自动”对齐。
margin 属性可任意拆分为左、右页边距设置自动指定，结果都是出现居中元素：
需要注意的是，如果宽度是 100％，对齐是没有效果的。
元素对齐的方法之一是使用绝对定位：
绝对定位与文档流无关，所以可以覆盖页面上的其它元素。
使用 float 属性设置左右对齐
使用 float 属性是对齐元素的方法之一：
使用 padding 设置垂直居中对齐
CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding：
CSS 组合选择符可以直观地显示选择器与选择器之间的关系。
组合选择符说明了两个选择器直接的关系。
CSS 组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式：
- 后代选取器。以空格分隔；
- 子元素选择器。以大于号分隔；
- 相邻兄弟选择器。以加号分隔；
- 普通兄弟选择器。以波浪号分隔；
后代选取器匹配所有指定元素的后代元素。
与后代选择器相比，子元素选择器只能选择某元素的子元素。
相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
普通兄弟选择器选取所有指定元素之后的兄弟元素。
伪类用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和类有些类似，但它是基于文档之外的抽象，所以叫伪类。
CSS 类也可以使用伪类：
伪类可以与 CSS 类配合使用：
可以使用 :first-child 伪类来选择元素的第一个子元素。
| 把鼠标放在链接上的状态 |
| 选择元素输入后具有焦点 |
选择每个 <p> 元素的第一个字母
|
选择属于任意元素的第一个子元素的 <p> 元素
|
伪元素用来添加一些选择器的特殊效果。
伪元素控制的内容和元素是没有差别的，但是它本身只是基于元素的抽象，并不存在于文档中，所以称为伪元素。
CSS 类也可以使用伪类：
first-line 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：
first-line 伪元素只能用于块级元素。
first-letter 伪元素用于向文本的首字母设置特殊样式：
伪元素可以结合 CSS 类：
上面的例子会使所有类为 article 的段落的首字母变为红色。
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示：
| 把鼠标放在链接上的状态 |
| 选择元素输入后具有焦点 |
选择每个 <p> 元素的第一个字母
|
选择属于任意元素的第一个子元素的 <p> 元素
|
熟练使用导航栏，对于任何网站都非常重要。
使用 CSS，可以转换成好看的导航栏而不是枯燥的 HTML 菜单。
作为标准的 HTML 基础，一个导航栏是必需的。
在下面的例子中，将建立一个标准的 HTML 列表导航栏。
导航条基本上是一个链接列表，所以使用 <ul> 和 <li> 元素非常有意义：
现在从列表中删除边距和填充：
-
list-style-type: none：移除列表前的小标志。一个导航栏并不需要列表标记； - 移除浏览器的默认设置，将边距和填充设置为 0。
上面例子中的代码是垂直和水平导航栏使用的标准代码。
上面的代码，只需要元素的样式，建立一个垂直的导航栏：
-
display: block：显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许指定宽度； -
width: 60px：块元素默认情况下是最大宽度。这里指定一个 60 像素的宽度。
有两种方法创建横向导航栏——使用内联或浮动的列表项。
这两种方法都很好，但如果想链接到具有相同的大小，则必须使用浮动的方法。
建立一个横向导航栏的方法之一是指定元素，下面的代码是标准的内嵌：
默认情况下，<li> 元素是块元素。这里删除换行符之前和之后每个列表项，以显示一行。
在上面的例子中，链接有不同的宽度。
对于所有的链接，指定宽度相等，设置为浮动元素，并指定为元素的宽度：
-
float: left：使用浮动块元素的幻灯片彼此相邻； -
display: block：显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许指定宽度； -
width: 60px：块元素默认情况下是最大宽度。这里指定一个 60 像素的宽度。
下面将使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。
当鼠标移动到指定元素上时，会出现下拉菜单。
-
使用容器元素（如
<div>）来创建下拉菜单的内容，并放在任何位置上。使用
<div>元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。 -
.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。注意min-width的值设置为 160 px，这可以随意修改。如果想设置下拉内容与下拉按钮的宽度一致，可设置width为 100%（overflow: auto设置可以在小尺寸屏幕上滚动）。使用
box-shadow属性让下拉菜单看起来像一个“卡片”。:hover选择器用于在用户将鼠标移动到下拉按钮上时显示下拉菜单。
创建下拉菜单，并允许用户选取列表中的某一项。
这个示例类似于前面的示例，只不过在下拉列表中添加了链接，并设置了样式：
/* 下拉菜单的链接 */ /* 鼠标移上去后修改下拉菜单链接颜色 */ /* 在鼠标移上去后显示下拉菜单 */ /* 当下拉内容显示后修改下拉按钮的背景颜色 */如果想设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右，可以添加以下代码：
使用 CSS 很容易创建透明的图像。
浏览器使用透明度属性可以将图像变得不透明。opacity 属性值从 0.0 到 1.0。值越小，元素更加透明。
顾名思义，属性选择器就是指可以根据元素的属性以及属性值来选择元素。
具有特定属性的 HTML 元素样式不仅仅是 class 和 id。
下面的例子把包含 title 的所有元素变为蓝色：
属性和值的选择器－多值
下面是包含指定值的 title 属性的元素样式的例子，使用 ~ 分隔属性和值：
下面是包含指定值的 lang 属性的元素样式的例子，使用 | 分隔属性和值：
属性选择器样式无需使用 class 或 id 的形式：
