学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp

关于CSS3 http://www.jianshu.com/p/890ab5c22f13

CSS：层叠样式表 (CascadingStyleSheets)，编写CSS是为了解决内容（HTML）与表现（CSS）分离的问题。

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

当同一个 HTML 元素被不止一个样式定义时，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中内联样式拥有最高的优先权。

- 浏览器缺省设置

- 外部样式表

- 内部样式表（位于 标签内部）

- 内联样式（在 HTML 元素内部）

外部样式表：<link rel="stylesheet" type="text/css" href="mystyle.css">

内部样式表：<style type="text/css">....</style>

内联样式：<p style="....">this is paragraph</p>

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

CSS 语法

CSS 规则由两个主要的部分构成：选择器（需要改变样式的 HTML 元素），以及一条或多条声明（由一个属性和一个值组成）。

selector {declaration1; declaration2; ... declarationN }

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

selector {property: value}

比如：h1 {color: red/#f00/rgb(255,0,0)/rgb(100%,0%,0%); font-size: 14px; font-family: "sans serif";}

CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

PS：

p{margin: 5px 6px 7px 8px} //对应的分别是上、右、下、左

p{margin: 5px 6px 7px} //对应的分别是上、左右、下

p{margin: 5px 6px}  //对应的分别是上下、左右

p{margin: 5px} //上下左右

样式书写规范：

- 开括号与选择器位于同一行

- 在开括号之前用一个空格

- 使用两个字符的缩进

- 在每个属性与其值之间使用冒号加一个空格

- 在每个逗号或分号之后使用空格

- 在每个属性值对（包括最后一个）之后使用分号

- 只在值包含空格时使用引号来包围值

- 把闭括号放在新的一行，之前不用空格

- 避免每行超过 80 个字符

注释：在逗号或分号之后添加空格，是所有书写类型的通用规则。

如：

短规则

p.into {font-family: "Verdana"; font-size: 16em;}

长规则

body {

  background-color: lightgrey;

  font-family: "Arial Black", Helvetica, sans-serif;

  font-size: 16em;

  color: black;

}

选择器的分组

被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。

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

继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {

font-family: Verdana, sans-serif;

}

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？

友善地对待Netscape 4

幸运地是，你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。

body  {

font-family: Verdana, sans-serif;

}

p, td, ul, ol, li, dl, dt, dd  {

font-family: Verdana, sans-serif;

}

4.0 浏览器无法理解继承，不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽，但是如果需要对 Netscape 4 用户进行支持，就不得不这么做。

继承是一个诅咒吗？

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body  {

font-family: Verdana, sans-serif;

}

td, ul, ol, ul, li, dl, dt, dd  {

font-family: Verdana, sans-serif;

}

p  {

font-family: Times, "Times New Roman", serif;

}

CSS选择器。

元素选择器，选择器分组，派生选择器，id选择器，类选择器，属性选择器，伪类，伪元素，后代选择器，子元素选择器，相邻兄弟选择器……

可以多种选择器结合使用。

元素选择器（文档的元素就是最基本的选择器。）

给某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身设置样式：

html {color:black;}

h1 {color:blue;}

h2 {color:silver;}

元素选择器又称为类型选择器（type selector）。

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”

选择器分组，

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

h2, p {color:gray;}

提示：通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。

通配符选择器（*）该选择器可以与任何元素匹配

例如，下面的规则可以使文档中的每个元素都为红色：

* {color:red;}

声明分组

假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：

h1 {font: 28px Verdana;}

h1 {color: blue;}

h1 {background: red;}

但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，我们可以将声明分组在一起：

h1 {font: 28px Verdana; color: white; background: black;}

派生选择器（上下文选择器）：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

（派生选择器还包括：后代选择器，子元素选择器，相邻兄弟选择器……）

后代选择器（descendant selector）又称为包含选择器。

比方说，你希望列表（li）中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

li strong { font-style: italic; font-weight: normal; }

<li>This is a<strong>important</strong>title</li>

子元素选择器：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1>strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>

<h1>This is <em>really <strong>very</strong></em> important.</h1>

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

例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

h1 + p {margin-top:50px;}

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

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

<div id="red">this is text.</div>

#red { color: red; }

#green { color: green; }

id 属性只能在每个 HTML 文档中出现一次。

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

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

<div class="center">this is text.</div>

<p class="center">this is text too.</p>

.center { text-align: center; }

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

类选择器可以结合元素选择器来使用。

例如，您可能希望只有段落显示为红色文本：

p.important {color:red;}

多类选择器

在 HTML 中，一个 class 值中可能包含一个词列表，各个词之间用空格分隔。例如，如果希望将一个特定的元素同时标记为重要（important）和警告（warning），就可以写作：

<p class="important warning">This paragraph is a very important warning</p>

这两个词的顺序无关紧要，写成 warning important 也可以。

如果想要将同时包含 important 和 warning 的所有元素还有一个银色的背景 。就可以写作：

.important.warning {background:silver;}

通过把两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）。

如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

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

带有 title 属性的所有元素设置样式：

[title] { color: red; }

为 title="W3School" 的所有元素设置样式：

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

为 type="text" 的所有input元素设置样式：

input[type="text"] { width: 150px; }

将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

属性与属性值必须完全匹配

比如：

如果属性值包含用空格分隔的值列表，匹配就可能出问题。

请考虑一下的标记片段：

<pclass="important warning">This paragraph is a very important warning.</p>

如果写成 p[class="important"]，那么这个规则不能匹配示例标记。

要根据具体属性值来选择该元素，必须这样写：

p[class="important warning"] {color: red;}

属性和值选择器 - 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

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

如果忽略了波浪号，则说明需要完成完全值匹配。

为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

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

[attribute] 用于选取带有指定属性的元素。

[attribute=value] 用于选取带有指定属性和值的元素。

[attribute~=value] 用于选取属性值中包含指定词汇的元素。

[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

[attribute^=value] 匹配属性值以指定值开头的每个元素。

[attribute$=value] 匹配属性值以指定值结尾的每个元素。

[attribute*=value] 匹配属性值中包含指定值的每个元素。

伪类(Pseudo-classes)：用于向某些选择器添加特殊的效果。

比如锚伪类，

a:link{color: #FF0000}/* 未访问的链接 */

a:visited{color: #00FF00}/* 已访问的链接 */

a:hover{color: #FF00FF}/* 鼠标移动到链接上 */

a:active{color: #0000FF}/* 选定的链接 */

:lang伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：

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

<p>文字<lang="no">段落中的引用的文字</q>文字</p>

比如 :first-child（元素的第一个子元素），

这个特定伪类很容易遭到误解，所以有必要举例来说明。考虑以下标记：

提示：最常见的错误是认为 :first-child 之类的选择器会选择元素的第一个子元素。

<div>

<p>These are the necessary steps:</p>

<ul>

<li>Intert Key</li>

<li>Turn key <strong>clockwise</strong></li>

<li>Push accelerator</li>

</ul>

<p>Do<em>not</em>push the brake at the same time as the accelerator.</p>

</div>

上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。

更多伪类：

:active  向被激活的元素添加样式。 

:focus  向拥有键盘输入焦点的元素添加样式。 

:hover  当鼠标悬浮在元素上方时，向元素添加样式。 

:link      向未被访问的链接添加样式。 

:visited  向已被访问的链接添加样式。 

:first-child  向元素的第一个子元素添加样式。 

:lang      向带有指定 lang 属性的元素添加样式。

伪元素：用于向某些选择器设置特殊效果。

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

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

注释："first-line" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-line" 伪元素：

font

color

background

word-spacing

letter-spacing

text-decoration

vertical-align

text-transform

line-height

clear

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

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

注释："first-letter" 伪元素只能用于块级元素。

注释：下面的属性可应用于 "first-letter" 伪元素：

font

color

background

margin

padding

border

text-decoration

vertical-align (仅当 float 为 none 时)

text-transform

line-height

float

clear

:before 伪元素：可以在元素的内容前面插入新内容。

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

:after 伪元素：可以在元素的内容之后插入新内容。

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

背景：background简写属性（通常建议使用这个属性，而不是分别使用单个属性，）

可以设置如下属性：（或者值为inherit：从父元素继承background属性的设置。）

背景颜色：background-color

背景图像的位置：background-position

背景图片的尺寸：background-size

背景图片是否重复：background-repeat

背景图片的定位区域：background-origin

背景的绘制区域：background-clip

背景图图像是否固定或随页面滚动：background-attachment

背景图片：background-image

比如：body  { background: #00FF00 url(bgimage.gif) no-repeat fixed top;  }

注释：IE8 以及更早的浏览器不支持一个元素多个背景图像。

注释：IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。

一般来说，所有背景属性都不能继承。

背景颜色：background-color（不能继承，其默认值是 transparent。透明。）不能继承

背景图片：background-image: url(); （默认值是 none，也不能继承）不能继承

背景重复：background-repeat（值可以是repeat-x，repeat-y，no-repeat）

背景定位：background-position（值可以是top，bottom，left，right，center，长度值（元素内边距区左上角的偏移。偏移点是图像的左上角），百分数值）

位置关键字（top，bottom，left，right，center）可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是center。百分数值同理。

下面是等价的位置关键字：

单一关键字 等价的关键字

center == center center

top == top center 或 center top

bottom == bottom center 或 center bottom

right == right center 或 center right

left == left center 或 center left

背景关联：background-attachement（默认为scroll，还可以是fixed）

文本：可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

文本颜色：color

缩进文本：text-indent（最常见的用途是将段落的首行缩进，可以是数值，百分比值，继承）

可以是负值，使用负值时可以实现悬挂缩进，但是首行的某些文本可能会超出浏览器窗口的左边界。建议再设置一个外边距或一些内边距。

百分数要相对于缩进元素父元素的宽度。

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

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

水平对齐：text-align（值可以是left，right，center，justify两端对齐，inherit）

提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现。

需要注意的是，要由用户代理（而不是 CSS）来确定两端对齐文本如何拉伸，以填满父元素左右边界之间的空间。

例如，有些浏览器可能只在单词之间增加额外的空间，而另外一些浏览器可能会平均分布字母间的额外空间（不过 CSS 规范特别指出，如果letter-spacing属性指定为一个长度值，“用户代理不能进一步增加或减少字符间的空间”）。还有一些用户代理可能会减少某些行的空间，使文本挤得更紧密。所有这些做法都会影响元素的外观，甚至改变其高度，这取决于用户代理的对齐选择影响了多少文本行。

字间距：word-spacing（其默认值 normal 与设置值为 0 是一样的。可以是负值。）

字母间隔：letter-spacing 默认为normal，normal == letter-spacing:0（与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔）

字符转换：text-transform（值可以是none，uppercase，lowercase，capitalize首字母大写）

文本装饰：text-decoration（值可以是none，underline，overline，line-through，blink会让文本闪烁）

处理空白符（空格、换行和 tab 字符）：white-space（值可以是normal，pre，nowrap，pre-wrap，pre-line）

总结了 white-space 属性的行为：

值      空白符 换行符 自动换行

pre-line 合并 保留 允许

normal 合并 忽略 允许

nowrap 合并 忽略 不允许

pre        保留 保留 不允许

pre-wrap 保留 保留 允许

文本方向：direction（值可以是ltr（默认），rtl）

注释：对于行内元素，只有当unicode-bidi属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

文本阴影：text-shadow（CSS2 包含该属性，但是 CSS2.1 没有保留该属性。）

行间距：line-height（不允许负值，值可以是normal，数值，固定的行间距，百分比值，inherit）

字体：定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。

有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）

特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：Serif 字体，Sans-serif 字体，Monospace 字体，Cursive 字体，Fantasy 字体

更多：http://www.w3school.com.cn/css/css_font-family.asp

指定字体系列：font-family

使用通用字体系列  body { font-family: sans-serif; }

指定字体系列  h1 { font-family: Georgia; }

如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素。我们可以通过结合特定字体名和通用字体系列来解决这个问题：h1 { font-family: Georgia, serif; }

建议在所有 font-family 规则中都提供一个通用字体系列。

如果您对字体非常熟悉，也可以为给定的元素指定一系列类似的字体。要做到这一点，需要把这些字体按照优先顺序排列，然后用逗号进行连接：

p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}

只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

字体风格：font-style（值可以是normal，italic斜体显示，oblique倾斜显示）

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

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

字体变形：font-variant，值为small-caps。（设定小型大写字母。小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。）

字体加粗：font-weight（值可以是bold，关键字 100 ~ 900 为字体指定了 9 级加粗度。）400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

字体大小：font-size（可以是绝对值或相对值）

注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

可以使用下面这个公式将像素转换为 em：pixels/16=em

注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em

字体：font（简写属性。）

可以按顺序设置如下属性：

font-style

font-variant

font-weight

font-size/line-height

font-family

可以不设置其中的某个值，比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。

更多：http://www.w3school.com.cn/cssref/pr_font_font.asp

font-size-adjust：当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。） 

font-stretch：对字体进行水平拉伸。（CSS2.1 已删除该属性。）

为链接设置样式。（可以改变颜色，文本修饰，背景色，字体……）

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

a:link - 普通的、未被访问的链接

a:visited - 用户已访问的链接

a:hover - 鼠标指针位于链接的上方

a:active - 链接被点击的时刻

注意：

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后

a:active 必须位于 a:hover 之后

比如：

a:link {color:#FF0000;}/* 未被访问的链接 */

a:visited {color:#00FF00;}/* 已被访问的链接 */

a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}/* 正在被点击的链接 */

列表：允许你放置、改变列表项标志，或者将图像作为列表项标志。

列表类型，list-style-type（可取值http://www.w3school.com.cn/cssref/pr_list-style-type.asp）

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

常用的值：

none无标记。

disc默认。标记是实心圆。

circle标记是空心圆。

square标记是实心方块。

decimal标记是数字。

列表项图像，list-style-image: url()/none/inherit

列表标志位置，list-style-position

简写列表样式，list-style，值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。

表格：

表格边框，border

比如：table, th, td { border: 1px solid blue; }

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

折叠边框：border-collapse（是否将表格边框折叠为单一边框），值为collapse

表格文本对齐：text-align （水平对齐方式，比如左对齐、右对齐或者居中）和 vertical-align （垂直对齐方式，比如顶部对齐、底部对齐或居中对齐）

border-spacing 设置分隔单元格边框的距离，两个值，第一个是水平间距，第二个是垂直间距。（仅用于“边框分离”模式）

caption-side 设置表格标题的位置。（top/bottom）

empty-cells 设置是否显示表格中的空单元格。（show/hide）

table-layout 设置显示单元、行和列的算法。（automatic/fixed）

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

outline 简写属性。设置所有的轮廓属性。 

p { outline: #00FF00 dotted thick; }

outline-color 设置轮廓的颜色。 （http://www.w3school.com.cn/cssref/pr_outline-color.asp）

outline-style 设置轮廓的样式。 （http://www.w3school.com.cn/cssref/pr_outline-style.asp）

outline-width 设置轮廓的宽度。（http://www.w3school.com.cn/cssref/pr_outline-width.asp）

框模型（Box Model）：规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

提示：背景应用于由内容和内边距、边框组成的区域。

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

内边距：padding（值可以是长度值或百分比值，但不允许使用负值。）使用百分比值时，内边距要根据父元素的width来计算

比如：h1 {padding: 10px;}

还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1 {padding: 10px 0.25em 2ex 20%;}

或者通过使用下面四个单独的属性，分别设置上、右、下、左内边距：padding-top，padding-right，padding-bottom，padding-left

边框border，可以设置宽度，样式，颜色。

可以使用简写属性border，也可以：

border-top

border-bottom

border-left

border-right

宽度：border-width（可以是长度值，或者thin 、medium（默认值） 和 thick。）

也可以通过下列属性分别设置边框各边的宽度：

border-top-width

border-right-width

border-bottom-width

border-left-width

颜色：border-color，颜色可以是transparent

还有一些单边边框颜色属性。

border-top-color

border-right-color

border-bottom-color

border-left-color

样式：border-style

常用值：（更多http://www.w3school.com.cn/cssref/pr_border-style.asp）

值 描述

none定义无边框。

hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

dotted定义点状边框。在大多数浏览器中呈现为实线。

dashed定义虚线。在大多数浏览器中呈现为实线。

solid定义实线。

double定义双线。双线的宽度等于 border-width 的值。

定义单边样式

border-top-style

border-right-style

border-bottom-style

border-left-style

因此这两种方法是等价的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

注意：

如果把 border-style 设置为 none，无论宽度是多少，但是边框样式设置为none，此时，不仅边框的样式没有了，其宽度也会变成 0。

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

外边距：margin，这个属性接受任何长度单位（可以是像素、英寸、毫米或 em。）、百分数值甚至负值。

可以使用下列任何一个属性来只设置相应的外边距，

margin-top

margin-right

margin-bottom

margin-left

提示和注释

提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

尽管看上去有些奇怪，但是外边距甚至可以与自身发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

定位：

三种基本的定位机制：普通流、浮动和绝对定位。

position，值可以是static，relative，absolute，fixed

relative：偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。（绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。）

fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

可以设置top，right，bottom，left的值，

提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

overflow 设置当元素的内容溢出其区域时发生的事情。

clip 设置元素的形状。元素被剪入这个形状之中，然后显示出来。

vertical-align 设置元素的垂直对齐方式。

z-index 设置元素的堆叠顺序。

浮动：float，清浮动：clear

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。

因此，创建浮动框可以使文本围绕图像：

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。

为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

左图是清理第一个段落，右图是清理第二个段落。

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。（图片作浮动，文本右浮动）

这时候出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能在容器内添加一个空元素并且清理它。

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

不过我们还有另一种办法，那就是对容器 div 进行浮动。

这样会得到我们希望的效果。不幸的是，下一个元素会受到这个浮动元素的影响。为了解决这个问题，有些人选择对布局中的所有东西进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少或消除不必要的标记。

（例子1：想要都浮动在左侧，除了设置浮动外，还需要设置清浮动。http://www.w3school.com.cn/tiy/t.asp?f=csse_class-clear

例子2：w3school的页面 http://www.w3school.com.cn/tiy/t.asp?f=csse_float6

例子3：常见的水平菜单就是通过设置浮动实现的）

水平对齐的方式：

使用 margin 属性来水平对齐：可通过将左和右外边距设置为 "auto"，来对齐块元素。

.center {

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

}

使用 position 属性进行左和右对齐，对齐元素的方法之一是使用绝对定位：

.right{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

使用 float 属性来进行左和右对齐

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

水平居中，垂直居中的方法：

div{width:50px;height:50px;position:absolute;top:50%;left:50%;margin: -25px 0 0 -25px;}（margin-left的取值是负的元素宽度的一半，margin-top的取值是负的元素高度的一半）

div{width:50px;height:50px;position:absolute;top:0;bottom:0;left:0;right:0;margin: auto;}

.element {width:600px;height:400px;position:absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/* 50%为自身尺寸的一半 */}

等等……

尺寸：（可以使用像素值，百分比值，数值）

height 设置元素的高度。

line-height 设置行高。

max-height 设置元素的最大高度。

max-width 设置元素的最大宽度。

min-height 设置元素的最小高度。

min-width 设置元素的最小宽度。

width 设置元素的宽度。

分类属性：允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

clear 设置一个元素的侧面是否允许其他的浮动元素。（值可以是left，right，both，none）

cursor 规定当指向某元素之上时显示的指针类型。（取值可以看这里：http://www.w3school.com.cn/cssref/pr_class_cursor.asp）

display 设置是否及如何显示元素。（取值可以看这里：http://www.w3school.com.cn/cssref/pr_class_display.asp）

float 定义元素在哪个方向浮动。

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

visibility 设置元素是否可见或不可见。（值可以是visible，hidden，collapse）

图像透明度：

http://www.w3school.com.cn/tiy/t.asp?f=css_image_transparency

img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */}

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

某些 CSS 属性仅仅被设计为针对某些媒介。比方说 "voice-family" 属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如，"font-size" 属性可被用于显示器以及印刷媒介，但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号，同时，在显示器上，sans-serif 字体更易阅读，而在纸媒介上，serif 字体更易阅读。

@media规则，使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介。

例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印，将使用 10 个像素的 Times 字体。注意：font-weight 被设置为粗体，不论显示器还是纸媒介：

@media screen{

p.test {font-family:verdana,sans-serif; font-size:14px}

}

@media print{

p.test {font-family:times,serif; font-size:10px}

}

@media screen,print{

p.test {font-weight:bold}

}

不同的媒介类型

all 用于所有的媒介设备。

aural 用于语音和音频合成器。

braille 用于盲人用点字法触觉回馈设备。

embossed 用于分页的盲人用点字法打印机。

handheld 用于小的手持的设备。

print 用于打印机。

projection 用于方案展示，比如幻灯片。

screen 用于电脑显示器。

tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。

tv 用于电视机类型的设备。