CSS笔记

文章概述

本篇文章记录css笔记。

CSS基础

CSS概念

CSS指层叠样式表(Cascading Style Sheets);
样式定义如何显示HTML元素的样式;
样式文件(.css)允许同时控制多重页面的样式和布局;

样式表类型

（按优先级递减）

内联样式，定义在元素内部；

1
2
3

<p style="color: sienna; margin-left: 20px">
hello world
</p>

内部样式表，定义在html的head头部；

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

外部/联样式表；

1
2
3

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

多重样式表

概述：html文档同时引用多个外联样式表，对同名的选择器有多个样式，那么选择器使用多个样式的并集，属性重复则使用就近原则进行覆盖；

CSS样式结构格式

CSS样式规则由两部分构成：选择器和一条或多条声明；

格式：

1
2
3

/*selector {property: value; property1: value1;...}*/
/*例如：设置h1标签的样式：*/
h1 {color:red; font-size:14px;}

选择器

1> 概念

选择器的构成：标签元素、id(#id_name)、class(.class_name)、属性等；

2> 特点

class 和 id 名称对大小写是敏感的；

声明

声明由属性和值组成；
声明与声明之间用分号隔开；
应该在每行只描述一个属性，这样可以增强样式定义的可读性；

属性值规则

1> 如果值为若干单词，则要给值加引号:

CSS选择器

元素选择器

概述：

html文档的元素就是最基本的选择器;
元素选择器又称为类型选择器,类型选择器匹配文档语言元素类型的名称;

1
2
3

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

1 2	//CSS 元素选择器（类型选择器）可以设置 XML 文档中元素的样式 <?xml-stylesheet type="text/css" href="note.css"?>

选择器分组

概述

一组选择器共享一个样式；

1
2
3

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

通配符选择器

概述：CSS2 引入了通配选择器，显示为一个星号（*）。该选择器可以与任何元素匹配，就像是一个通配符,通配选择器等价于列出了文档中所有元素的一个分组选择器。。

1 2	/使文档中的每个元素都为红色/ * {color:red;}

选择器的继承性

概述：子元素继承父元素属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd，IE6忽略继承）

1	子元素如果没有设置color属性，会使用父元素的color属性;

类选择器

概述

html每个标签元素都有一个class属性，在html文档中可以有多个同名的class；“.”加html标签元素的class名称组成类选择器。
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。

1	.center {text-align: center}

基于所属标签类而被选择

格式：标签名.类名

1	<td class="class_name">

// 结合通配选择器=结合元素选择器
//(因为指定了具体的类名，所以可以忽略通配符)
td.class_name {
	color: #f60;
	background: #666;
}

*.class_name {color:red;}

多类选择器

概述：类名由多个单词组成，各个词之间用空格分隔，每个单词都可以作为一个类选择器；

两个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）；
如果一个多类选择器包含类名列表中没有的一个类名，匹配就会失败。

1
2
3

<p class="important warning">
hello world
</p>

1
2
3

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

派生选择器

概述：派生选择器又叫后代选择器；

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择某元素的所有任意后代元素（包括间接后代）。
派生选择器，根据标签的上下文关系来定义的选择器，如：storng 被包裹在 li标签内，strong和li就具有上下文关系;
派生选择器的有效范围是：li标签内的strong标签内的内容；
格式：父元素子元素{…}

<li>hello<strong>word</strong></li>
<div class="main">
    <a link="">link</a>
</div>

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

格式：标签元素.类名/.类名标签名/id选择器/类选择器

.fancy td {
	color: #f60;
	background: #666;
}

直接子元素选择器

概述：如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素直接子元素，请使用子元素选择器；

格式：父元素 > 子元素

1 2	h1 > strong {color:red;} table.company td > p{...}

相邻兄弟选择器

概述

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

格式

元素a +元素a后面的一个兄弟元素

案例：

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>

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

结合其他选择器

1	html > body table + ul {margin-top:20px;}

id选择器

概述

html每个标签元素都有一个id属性，在html文档中只能出现一次；“#”加html标签元素的id名称组成id选择器。id选择器名仅有一个单词组成，不支持多个单词。

1	<p id="red">这个段落是红色。</p>

// 结合通配符=独立使用
// (因为指定了具体的id名，所以可以忽略通配符)
*#red {color:red}
#red {color:red;}

id派生选择器

格式：#id名标签名/id选择器/类选择器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}

/*也可以用id紧跟所属的元素作为选择器*/
div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
}

属性选择器

概述

属性选择器可以根据元素的属性及属性值来选择元素设置样式。

注意：属性与属性值必须完全匹配（在这里，像class属性值可以有分隔符和空格，必须匹配完整的值才行，除非使用特殊符号~=或|=）

格式

根据属性设置：[属性名]{…}
根据属性和属性值设置：[属性名=属性值]{…}
*[属性名|属性名=属性值]{…}
根据多属性设置：[属性名1][属性名2]{…}
根据标签元素加属性设置：标签元素[属性名1][属性名2]{…}

// 设置包含标题（title）的所有元素变为红色
*[title] {color:red;}
// 只对有 href 属性的锚（a元素）设置样式
a[href] {color:red;}
// 将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
a[href][title] {color:red;}

1	注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

1	<img title="W3School" src="xxx.gif" />

1
2
3

[title=ls]{
    color: red;
}

属性值包含某字符

如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。

1	<img title="hello world" src="xxx.gif" />

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

属性值含连字符

1	<p lang="en-us">Hi!</p>

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

表单属性选择器

属性选择器在为不带有 class 或 id 的表单设置样式

<form name="input" action="" method="get">
    <input type="text" name="Name" value="Bill" size="20">
    <input type="text" name="Name" value="Gates" size="20">
    <input type="button" value="Example Button">
</form>

input[type="button"]{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

属性选择器属性值匹配参考

选择器：描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

伪类

概述：CSS 伪类用于向某些选择器添加特殊的效果。

常见伪类参考

W3C：”W3C” 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。

属性	描述	CSS版本
:active	向被激活的元素添加样式。	1
:focus	向拥有键盘输入焦点的元素添加样式。	2
:hover	当鼠标悬浮在元素上方时，向元素添加样式。	1
:link	向未被访问的链接添加样式。	1
:visited	向已被访问的链接添加样式。	1
:first-child	向元素的第一个子元素添加样式。	2
:lang	向带有指定 lang 属性的元素添加样式。	2

语法格式

伪类语法：selector : pseudo-class {property: value}
CSS类与伪类搭配使用：selector.class : pseudo-class {property: value}

1	<a class="red" href="css_syntax.asp">CSS Syntax</a>

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

CSS类id与伪类搭配：selector#id : pseudo-class {property: value}

锚(a链接)伪类

锚伪类使用顺序：

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

:first-child伪类

格式：某标签元素:first-child{…}
概述：向某标签元素的第一个子元素设置样式；

:lang伪类

概述：向带有指定 lang 属性的元素添加样式;

<html>
<head>
<style type="text/css">
q:lang(no){
   quotes: "~" "~"
}
</style>
</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

伪元素

概述：

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

常用的伪元素

W3C："W3C" 列指示出该属性在哪个 CSS 版本中定义（CSS1 还是 CSS2）。
属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

语法格式

伪元素语法：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
color
background
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” 伪元素只能用于块级元素。
可以给同个selector设置多个伪元素；
下面的属性可应用于 “first-letter” 伪元素：

font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear（左侧和右侧均不允许出现浮动元素）

:before伪元素

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

1
2
3

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

:after伪元素

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

// 示例：下面的例子在每个 <h1> 元素后面插入一幅图片：
h1:after{
  content:url(logo.gif);
}

CSS3选择器参考

选择器	例子	例子描述	CSS
.class	.intro	选择 class="intro" 的所有元素。	1
#id	#firstname	选择 id="firstname" 的所有元素。	1
*	*	选择所有元素。	2
element	p	选择所有 <p> 元素。	1
element,element	div,p	选择所有 <div> 元素和所有 <p> 元素。	1
element element	div p	选择 <div> 元素内部的所有 <p> 元素。	1
element>element	div>p	选择父元素为 <div> 元素的所有 <p> 元素。	2
element+element	div+p	选择紧接在 <div> 元素之后的所有 <p> 元素。	2
[attribute]	[target]	选择带有 target 属性所有元素。	2
[attribute=value]	[target=_blank]	选择 target="_blank" 的所有元素。	2
[attribute~=value]	[title~=flower]	选择 title 属性包含单词 "flower" 的所有元素。	2
[attribute|=value]	[lang|=en]	选择 lang 属性值以 "en" 开头的所有元素。	2
:link	a:link	选择所有未被访问的链接。	1
:visited	a:visited	选择所有已被访问的链接。	1
:active	a:active	选择活动链接。	1
:hover	a:hover	选择鼠标指针位于其上的链接。	1
:focus	input:focus	选择获得焦点的 input 元素。	2
:first-letter	p:first-letter	选择每个 <p> 元素的首字母。	1
:first-line	p:first-line	选择每个 <p> 元素的首行。	1
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。	2
:before	p:before	在每个 <p> 元素的内容之前插入内容。	2
:after	p:after	在每个 <p> 元素的内容之后插入内容。	2
:lang(language)	p:lang(it)	选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。	2
element1~element2	p~ul	选择前面有 <p> 元素的每个 <ul> 元素。	3
[attribute^=value]	a[src^="https"]	选择其 src 属性值以 "https" 开头的每个 <a> 元素。	3
[attribute$=value]	a[src$=".pdf"]	选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。	3
[attribute*=value]	a[src*="abc"]	选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。	3
:first-of-type	p:first-of-type	选择属于其父元素的首个 <p> 元素的每个 <p> 元素。	3
:last-of-type	p:last-of-type	选择属于其父元素的最后 <p> 元素的每个 <p> 元素。	3
:only-of-type	p:only-of-type	选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。	3
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。	3
:nth-of-type(n)	p:nth-of-type(2)	选择属于其父元素第二个 <p> 元素的每个 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是从最后一个子元素开始计数。	3
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。	3
:root	:root	选择文档的根元素。	3
:empty	p:empty	选择没有子元素的每个 <p> 元素（包括文本节点）。	3
:target	#news:target	选择当前活动的 #news 元素。	3
:enabled	input:enabled	选择每个启用的 <input> 元素。	3
:disabled	input:disabled	选择每个禁用的 <input> 元素	3
:checked	input:checked	选择每个被选中的 <input> 元素。	3
:not(selector)	:not(p)	选择非 <p> 元素的每个元素。	3
::selection	::selection	选择被用户选取的元素部分。	3

CSS样式

大小

宽高：height width

auto	默认。浏览器会计算出实际的高度。
length	使用 px、cm 等单位定义高度。
%	基于包含它的块级对象的百分比高度。
inherit	规定应该从父元素继承 height 属性的值

line-height 行与行之间的基线间的距离（设置行内元素行高，块级元素基线之间的最小距离）。

normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

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

none	默认。定义对元素被允许的最大高度没有限制。
length	定义元素的最大高度值。
%	定义基于包含它的块级对象的百分比最大高度。
inherit	规定应该从父元素继承 max-height 属性的值。

设置元素的最大宽度。

none	默认。定义对元素的最大宽度没有限制。
length	定义元素的最大宽度值。
%	定义基于包含它的块级对象的百分比最大宽度。
inherit	规定应该从父元素继承 max-width 属性的值。

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

1
2
3

length	定义元素的最小高度。默认值是 0。
%	定义基于包含它的块级对象的百分比最小高度。
inherit	规定应该从父元素继承 min-height 属性的值。

背景

背景属性概览

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

背景色

属性名：background-color
目标元素：可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
属性值：默认transparent，接受任何合法的颜色值；

1	p {background-color: gray;}

背景图像

属性名：background-image

属性值: 默认none

1	body {background-image: url(/i/eg_bg_04.gif);}

背景重复

属性名：background-repeat

属性值：

repeat-y：垂直方向重复
repeat-x
no-repeat

body{
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
}

背景定位

概述：利用background-position属性改变图像在背景中的位置。

属性值：标准两个值（水平方向定位垂直方向定位）,如果有一个值，则另一个值时center;

top、bottom、left、right 和 center
top center、center center
百分数值：10% 20%
长度值：20px 10px

body{
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
}

背景关联

概述：长文档，上下滚动时，控制背景的联动样式；

属性值：

scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
fixed：当页面的其余部分滚动时，背景图像不会移动。
inherit：规定应该从父元素继承 background-attachment 属性的设置。

body{
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
}

背景属性

概述：

属性名：background
属性值：

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

在一个声明中可以设置所有背景属性（不区分顺序和完整性）：

1
2
3

body{
    background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}

文本

概述：文本属性可定义文本的外观；

常用CSS文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

缩进文本

属性名：text-indent

1	p {text-indent: 5em;}

概述：对文档标签中文本进行首行缩进；

设置目标：所有块级元素应用 text-indent，但无法将该属性应用于行内元素；

属性值：

使用正负值
使用百分比值：缩进值是父元素的 20%；
继承：子元素可以继承父元素的缩进属性；

水平对齐

属性名

text-align

针对行内或者块元素内部的文字、图片、按钮；

属性值

left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

文本方向

属性名

direction

针对目标

主要影响块级元素中文本的方向;
对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

属性值

1
2
3

ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

示例：

1	p{direction: rtl}

书写的方向

writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

默认值：normal
适用于：除 <’ display ‘> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素;

horizontal-tb：水平方向自上而下的书写方式。即left-right-top-bottom（类似IE私有值lr-tb）
vertical-rl：垂直方向自右而左的书写方式。即top-bottom-right-left（类似IE私有值tb-rl）
vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right
lr-tb(ie)：左-右，上-下。对象中的内容在水平方向上从左向右流入，后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的（IE）
tb-rl(ie)：上-下，右-左。对象中的内容在垂直方向上从上向下流入，自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的，半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的（IE）

字(单词)间隔

属性名

word-spacing

属性值

1
2
3

normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间，可以是正负长度。
inherit	规定应该从父元素继承 word-spacing 属性的值。

示例：

1 2	p {word-spacing: 30px;} p {word-spacing: -0.5em;}

字符或字母间隔

属性名

letter-spacing

属性值

1
2
3

normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

示例：

1 2	h1 {letter-spacing:2px} h2 {letter-spacing:-3px}

大小写转换

属性名

text-transform

属性值

none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

示例：

1
2
3

h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}

文本装饰

属性名

text-decoration

属性值

none	默认。定义标准的文本，关闭所有装饰。
underline	文本下划线。
overline	文本上划线。
line-through	文本中划线（删除线）等效于strike标签。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

设置上述单个属性值；
可以同时设置多个属性值效果；

示例：

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}
div{text-decoration: underline line-through overline;}

处理空白符

属性名

white-space

属性值

normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

示例：

1	p{white-space: nowrap}

字体

字体属性概览

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch	对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

字体类系

5种通用字体系列

注意：小写

serif
sans-serif
monospace
cursive
fantasy

通用系列的具体字体

serif：Times、Georgia、New Century Schoolbook
sans-serif：Helvetica、Geneva、Verdana、Arial 或 Univers
monospace：Courier、Courier New 和 Andale Mono
cursive：Zapf Chancery、Author 和 Comic Sans
fantasy：Western、Woodblock 和 Klingon

设置字体

font-family

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

// 设置通用字体系列
body {font-family: sans-serif;}
// 设置通用字体系列中的具体字体
h1 {font-family: Georgia, serif;}
// 设置通用字体系列中的具体字体,按照优先顺序排列备用字体
p {font-family: Times, TimesNR, 'New Century Schoolbook',
     Georgia, 'New York', serif;}

字体风格

font-style

属性值

normal	默认值。浏览器显示一个标准的字体样式。
italic	每个字母都倾斜。
oblique	竖直文本的一个倾斜版本。
inherit	规定应该从父元素继承字体样式。

示例：

1
2
3

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

字体变形

font-variant

属性值

1
2
3

normal	默认值。浏览器会显示一个标准的字体。
small-caps	将非大写字母设置成小型大写字母。
inherit	规定应该从父元素继承 font-variant 属性的值。

示例：

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

字体加粗

font-weight

属性值

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符。
100~900 为字体指定了 9 级加粗度，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit 规定应该从父元素继承字体的粗细。

示例

1
2
3

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

链接

为链接设置样式

链接的四种伪类状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

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

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

示例

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

列表

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

列表属性

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

列表项标志类型

list-style-type

属性值

CSS2 的值：

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

CSS2.1 的值：

1
2
3

disc | circle | square | decimal | decimal-leading-zero |
lower-roman | upper-roman | lower-greek | lower-latin | upper-latin |
armenian | georgian | none | inherit

示例

// 设置不同的列表样式
ul {list-style-type : square}
ul.circle {list-style-type:circle;}
ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

列表项图像

list-style-image

概述：有时，常规的标志是不够的。你可能想对各标志使用一个图像；

1	ul li {list-style-image : url(xxx.gif)}

列表标志位置

list-style-position

概述：CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。

属性值

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

示例

1
2
3

ul.inside {
    list-style-position: inside
}

列表样式合并写法

list-style

属性值

可以同时包含list-style-type、list-style-image、list-style-position、inherit值，并且值无顺序；

1	li {list-style : url(example.gif) square inside}

表格

常用属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

表格边框

border

// 为 table、th 以及 td 设置了蓝色边框
// 写法 1：
table, th, td{border: 1px solid blue;}
// 写法 2：
table,th,td{border:1px solid;}

注：详见边框

边框线

border-collapse 属性设置是否将表格边框折叠为单一边框：

属性值

1
2
3

separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit	规定应该从父元素继承 border-collapse 属性的值。

示例

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

表格宽度和高度

1 2	table{width:100%;} th{height:50px;}

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

text-align

属性设置水平对齐方式，比如左对齐、右对齐或者居中：

1	td{text-align:right;}

vertical-align

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

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

表格内边距

1	td{padding:15px;}

详见：边框内边距；

表格颜色

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

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

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

单元格间距

border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

1	注释：某些版本的IE浏览器不支持此属性。

属性值

length length 规定相邻单元的边框之间的距离。

1
2
3

使用 px、cm 等单位。不允许使用负值。
如果定义一个 length 参数，那么定义的是水平和垂直间距。
如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

inherit 规定应该从父元素继承 border-spacing 属性的值。

标题位置

caption-side 属性设置表格标题的位置。

属性值

top 默认值。把表格标题定位在表格之上。
bottom 把表格标题定位在表格之下。
inherit 规定应该从父元素继承 caption-side 属性的值。

空单元格

empty-cells

属性值：

hide 不在空单元格周围绘制边框。
show 在空单元格周围绘制边框。默认。
inherit 规定应该从父元素继承 empty-cells 属性的值。

示例

隐藏表格中空单元格上的边框和背景：

table{
  border-collapse:separate;
  empty-cells:hide;
}

列宽度算法

table-layout

概述

tableLayout 属性用来显示表格单元格、行、列的算法规则。

属性值

automatic 默认。列宽度由单元格内容设定。
fixed 列宽由表格宽度和列宽度设定。
inherit 规定应该从父元素继承 table-layout 属性的值。

示例

1	table{table-layout:fixed;}

轮廓线

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

属性概览

属性	描述	CSS
outline	在一个声明中设置所有的轮廓属性。	2
outline-color	设置轮廓的颜色。	2
outline-style	设置轮廓的样式。	2
outline-width	设置轮廓的宽度。

轮廓线样式

outline-style

概述

设置轮廓的样式：

属性值

none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。
inherit	规定应该从父元素继承轮廓样式的设置。

示例

1	p{outline-style:dotted;}

轮廓线颜色

outline-color

概述

outline-color 属性设置一个元素整个轮廓中可见部分的颜色。要记住，轮廓的样式不能是 none，否则轮廓不会出现。

注意：

请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
轮廓线不会占据空间，也不一定是矩形。

属性值

颜色值
invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
inherit 规定应该从父元素继承轮廓颜色的设置。

示例

p{
  outline-style:dotted;
  outline-color:#00ff00;
}

轮廓线宽度

outline-width

概述

outline-width 属性设置元素整个轮廓的宽度；

注意：

只有当轮廓样式不是 none 时，这个宽度才会起作用。
如果样式为 none，宽度实际上会重置为 0。
不允许设置负长度值。
请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
轮廓线不会占据空间，也不一定是矩形。

属性值

thin 规定细轮廓。
medium 默认。规定中等的轮廓。
thick 规定粗的轮廓。
length 允许您规定轮廓粗细的值。
inherit 规定应该从父元素继承轮廓宽度的设置。

示例

p{
  outline-style:dotted;
  outline-width:5px;
}

轮廓样式简写

outline

概述

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline 简写属性在一个声明中设置所有的轮廓属性。

可以按顺序设置如下属性：
outline-color
outline-style
outline-width

属性值

值	描述
outline-color	规定边框的颜色。参阅：outline-color 中可能的值。
outline-style	规定边框的样式。参阅：outline-style 中可能的值。
outline-width	规定边框的宽度。参阅：outline-width 中可能的值。
inherit	规定应该从父元素继承 outline 属性的设置。

示例

1	p{outline:#00FF00 dotted thick;}

CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式

内边距

padding

padding-top
padding-right
padding-bottom
padding-left

概述

CSS padding 属性定义元素的内边距。

属性值

auto 浏览器计算内边距。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。但不允许使用负值。

length 格式：
1> length length length length
3> length 或 length length 值复制
这两个值可以取代前面 4 个值。，允许指定少于 4 个值。规则如下：
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。

示例

// 按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
}
// 各边内边距相同
h1 {padding: 10px;}
// 设置为父元素 width 的 10%
p {padding: 10%;}
// 值复制
td.test2 {padding: 0.5cm 2.5cm}

外边距

margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

属性值

同内边距

示例

p {margin: 20px 30px 30px 20px;}
p {margin: auto auto auto 20px;}
h2 {
  margin-top: 20px;
  margin-right: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
}
h1 {margin: 0.25em 1em 0.5em;}	/* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;}		/* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;}			/* 等价于 1px 1px 1px 1px */

边框

元素的边框绘制在背景之上。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。

属性概览

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
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	设置元素的上边框的宽度。

边框的样式

border-style
border-top-style
border-right-style
border-bottom-style
border-left-style

注意

border-style支持设置小于或等于4个值（上、右、下、左），支持css值复制属性；

属性值

none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。

示例

p{border-style: outset;}
// 一个边框定义多个样式
p{border-style:dotted solid double dashed; }
p{border-style:dotted solid;}
p{border-style:dotted;}
// 设置单一边框样式
p {border-left-style: none;}

边框的宽度

border-width 边框宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
概述
只有当边框样式不是 none 时才起作用。
如果边框样式是 none，边框宽度实际上会重置为 0。
不允许指定负长度值。
支持设置小于或等于4个值（上、右、下、左），支持css值复制属性；

属性值

thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。

示例

p {border-style: solid; border-width: 15px 5px 15px 5px;}
p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
}
p {border-style: solid; border-width: 15px 5px;}

边框的颜色

border-color
border-top-color
border-right-color
border-bottom-color
border-left-color

概述

支持设置小于或等于4个值（上、右、下、左），支持css值复制属性；

属性值

颜色值
transparent 默认值。边框颜色为透明。
inherit 规定应该从父元素继承边框颜色。

示例

p {
    border-style: solid;
    border-color: blue rgb(25%,35%,45%) #909090 red;
}
p {
  border-style: solid;
  border-color: blue red;
}

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

元素定位

元素调整在文档中的位置；
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

1 2	【普通流】除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

元素的框

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

1
2

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。
与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

框的类型

display 属性规定元素应该生成的框的类型；

属性值

none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	作用域子元素，让子元素成为行内块元素,不独占一行的块级元素，横向排列。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

示例

// p显示为内联元素
p {display: inline}
// span显示为块级元素
span{display: block}

元素定位

CSS 定位属性允许你对元素进行定位。

属性	描述
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow	设置当元素的内容溢出其区域时发生的事情。
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。
vertical-align	设置元素的垂直对齐方式。
z-index	设置元素的堆叠顺序。

位置坐标

left, top, right和bottom

元素值：

auto	默认值。通过浏览器计算上边缘的位置。
%	设置以包含元素的百分比计的上边位置。可使用负值。
length	使用 px、cm 等单位设置元素的上边位置。可使用负值。
inherit	规定应该从父元素继承 top 属性的值。

示例

img{
  position:absolute;
  top:5px;
}

定位类型

position

概述

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

属性值

absolute 相对第一个父元素进行定位，原本所占的空间删除。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 相对于浏览器窗口进行绝对定位，原本所占的空间删除。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 相对于正常位置进行定位，原本所占的空间仍保留；因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit 规定应该从父元素继承 position 属性的值。

示例

absolute 绝对定位

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

溢出内容控制

overflow

概述

overflow 属性规定当内容溢出元素框时发生的事情。

属性值

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

示例

使用滚动条来显示元素内溢出的内容

div {
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow: scroll;
}

裁剪元素的形状

clip

概述

clip 属性剪裁绝对定位元素（absolute和fixed）。

属性值

shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto 默认值。不应用任何剪裁。
inherit 规定应该从父元素继承 clip 属性的值。

示例

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

垂直对齐

vertical-align

概述

属性设置元素在当前行内相对于行内内容的垂直对齐方式。
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

属性值

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	（IE不支持）规定应该从父元素继承 vertical-align 属性的值。

元素的堆叠

概述

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(上层)。
元素可拥有负的 z-index 属性值。
z-index 仅能在设置position的定位元素上奏效（例如 position:absolute;）

属性值

auto 默认。堆叠顺序与父元素相等。
number 设置元素的堆叠顺序。
inherit 规定应该从父元素继承 z-index 属性的值。

示例

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

浮动框

元素浮动

float

概述

float 属性定义元素在哪个方向浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动框周围是有内容的块框，浮动框不会覆盖内容框，视觉上没有浮动效果。
浮动框周围是无内容的块框，浮动框不占据空间，浮动并覆盖下一个元素。
如果三个浮动框都是left浮动，则会出现三个浮动框水平方向上排列；

属性值

left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

示例

1	img{float:right;}

清除浮动

clear

概述

clear 表示框的哪些边不应该挨着浮动框，即清除对应边浮动元素框的浮动效果。

属性值

left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

示例

清除img两侧浮动元素框的浮动效果

img{
    float:left;
    clear:both;
}

参考

元素显隐

visibility

visible 默认值。元素是可见的。
hidden 元素是不可见的。
collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit 规定应该从父元素继承 visibility 属性的值。

示例

1	h2{visibility:hidden;}

水平导航栏

实现方式：设置行内或浮动列表项；

1 2	li{display:inline;} li{float:left;}

图像透明度

opacity: 值从 0.0 到 1.0,值越小，越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明。

示例：

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

CSS单位

% 百分比
in 英寸
cm 厘米
mm 毫米
em

1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如，如果某元素以 12pt 显示，那么 2em 是24pt。
在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。

ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸),多做字体。
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)

颜色

/*颜色英文名(浏览器支持的有16种)*/
p {color: red;}
/*十六进制的颜色值*/
p { color: #ff0000; }
/*十六进制的颜色值节约字节写法*/
p { color: #f00; }
/*RGB值*/
p { color: rgb(255,0,0); }
/*RGB 百分比必须加 %*/
p { color: rgb(100%,0%,0%); }
/*rgba设置颜色和透明度，此时子元素不会继承父元素的透明度（r,g,b,alpha）*/
p { color: rgba(0, 0, 0, 0.7); }

鼠标样式

cursor

1 2	需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。

default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

示例：

1
2
3

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

媒介类型

媒介类型允许你定义以何种媒介来提交文档，文档可以显示在显示器、纸、听觉浏览器等媒介上。

媒介类型概览

注释：媒介类型名称对大小写不敏感。

媒介类型	描述
all	用于所有的媒介设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv	用于电视机类型的设备。

示例

同一个样式表中设置文档在不同媒介中的样式：

<html>
<head>
<style>
@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}
}
</style>
</head>
<body>....</body>
</html>