如何使inline元素垂直居中（line-height和vertical-align）
display属性：block, inline, inline-block，提供了一个playground示例，很方便进行试验~
http://www.quirksmode.org/css/display.html
http://www.oschina.net/news/23129/fresh-powerful-css3-tutorials?from=20111120
15 个最新的 CSS3 教程 （创建纯CSS3的票式标签，用CSS3来创建具有动画效果的按钮，用CSS3创建动态菜单，原始的鼠标浮动效果）
CSS3 和 JavaScript 特效（Paperfold, 3D Flip list menu, Animated Menu Icons, Animated CSS3 Gallery）
Touch Gallery（Touch Gallery 可在智能手机的浏览器上实现类似本地相册应用的图片展示效果。支持 iPhone、Android、iPad 等）
Real Shadow（可以创建非常真实的阴影效果。非常适合做 demo 或者首页。）
NailThumb（jQuery NailThumb 可让你轻松创建高分辨率图像的无损缩略图，只需一行代码搞定。你可以通过 CSS 来设定缩略图的尺寸。）
子串匹配属性选择器
[abc^=”def”]选择 abc 属性值以 “def” 开头的所有元素[abc$=”def”]选择 abc 属性值以 “def” 结尾的所有元素[abc*=”def”]选择 abc 属性值中包含子串 “def” 的所有元素
可以想到，这些选择有很多用途。
举例来说，如果希望对指向 W3School 的所有链接应用样式，不必为所有这些链接指定 class，再根据这个类编写样式，而只需编写以下规则：
a[href*=”w3school.com.cn”] {color: red;}
特定属性选择类型
最后为您介绍特定属性选择器。请看下面的例子：
*[lang|=”en”] {color: red;}
上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：
<p lang=”en”>Hello!</p>
<p lang=”en-us”>Greetings!</p>
<p lang=”en-au”>G’day!</p>
<p lang=”fr”>Bonjour!</p>
<p lang=”cy-en”>Jrooana!</p>
部分值属性选择器
img[title~=”Figure”] {border: 1px solid gray;}
这个规则会选择 title 文本包含 “Figure” 的所有图像。没有 title 属性或者 title 属性中不包含 “Figure” 的图像都不会匹配。
From BBS
<HTML>
<HEAD>
<STYLE>
A {color: red}
P {background-color:blue; color:white}
</STYLE>
</HEAD>
<BODY>
<A href=”http://www.nease.net/~haidian">动态网页制作</A>
<P>你注意到这一段文字的颜色和背景颜色了吗?</P> 怎么样?
</BODY>
</HTML>
CSS 第二节: CSS Selector
上一节开始我们讨论 CSS (Cascading Style Sheet) 的基础.
告诉你有三种 Selector. 但只介绍了其中的 HTML selector.
这一节我们把三种都详细介绍给你
HTML selector
class selector:
ID selector:
HTML selector
HTML selector 就是 HTML 的 tags, 比如 P, DIV, TD 等. 如
你用 CSS 定义了它们, 在整页中, 这个 Tag 的性质就按照你
的定义来显示了. HTML selector 的语法如下
tag {property:value}
比如我们想叫 H1 的颜色是红的
H1 {color: red}
这里还要告诉你 CSS 的一个特点, 它可定义好几个 selector
在一个 rule 里. 比如
H1, H2, TD {color: red}
这个定义就能让所有的 H1, H2, 和 TD 的颜色都为红色.
Class selector
Class selector 有两种, 一种叫相关 class selector, 它跟一
个 HTML 的 tag 有关系. 它的语法是
tag.Classname {property:value}
比如我们想叫一些而不是全部 H2 的颜色是红的
<style>
H2.redone {color: red}
</style>
<H2>This is H2</H2>
<H2 class=redone>This is red H2</H2>
This is H2
This is red H2
第二种是独立 class selector . 它可被任何 HTML tag 所应用.
它的语法如下
.Classname {property:value}
假如我们有下面这个定义
.blueone {color: blue}
那么我们可以把他应用到不同的 Tag 当中去. 比如
<style>
.blueone {color:blue}
</style>
<H2 class=”blueone”>Blue H2</H2>
<P class=”blueone”>Blue paragraph</P>
Blue H2
Blue paragraph
显然 class selector 给了我们更多的自由.
ID selector
ID selector 其实跟独立 class selector 的功能一样. 而区别
在于它们的语法和用法不同, 以及对于 Javascript 操纵 HTML
元素有帮助. 它的语法如下
#IDname {property:value}
假如我们有下面的定义
#yelowone {color: yellow}
我们可以运用这个定义到任何的有同样 ID 名字的 tag, 比如
<style>
#redone {color: red}
</style>
<P ID=”redone”>text here</P>
text here
你可能觉得既然 ID selector 和独立 class selector 功能一
样, 为什么两者都存在呢. 如果你知道用 CSS-P 来定位的话,
你就明白它们的区别了. 有 ID 的 HTML 元素可以被 CSS-P
和 JavaScript 来操纵.
到现在为止, 你已经大概知道如何来写 CSS 的定义了, 下面
七节我们将会告诉你如何用 CSS 来操纵或修改
字体
文字间的空间
列表
颜色
背景
Margin
位置
CSS 第三节: CSS 控制字体
这一节我们将讨论如何用 CSS 来控制元素中字体的形状, 大
小, 风格.
字形
CSS 用来控制字形的性质是 font-family. 你可以用它来决定任何一个元素中文字的字
形. 比如
P.v {font-family: Verdana}
H2.a {font-family: arial}
This H2’s font is “Times New Roman”
This paragraph is using “Verdana” font
有的时候， 你所给的字体浏览器不见得有，你可以多给几种比如
P {font-family: Verdana, Forte, “Times New Roman”}
上面这个定义可以使得浏览器先用Verdana, 如果没有就用Forte…
记住每个字形之间要用逗号隔开.
大小
用来控制字体大小的性质是 font-size 比如
P.f12 {font-size: 12pt}
P.f18 {font-size: 18pt}
This paragraph’s font is 12pt
This paragraph’s font is 18pt
你可以自己慢慢调整字体的大小直到满意为止. 一般来说, 字
体的大小没什么限制, 但 500 以下比较安全.
斜体
如果想让字体成为斜体, 要用 font-style 性质, 比如
P {font-style: italic}
This paragraph’s font is italic
加重
用 font-weight 来调节文字的粗细, 比如
P.bold {font-weight: bold}
This paragraph’s font is normal
This paragraph’s font is bold
font-style 的可能的值是 lighter, normal, bold, bolder
我们只介绍在 Netscape 和 IE 上都通用的性质. 下一节我们讨
论文字的定位.
第四节: CSS 控制文字定位
这一节我们将讨论如何用 CSS 来控制网页中文字定位, 这些性质是
line-height: 行距
text-align: 向那个方向看齐
vertical-align: 向上还是向下看齐
text-indent: 段落第一行空格
text-transform: 字母的大小写
text-decoration: 给文字加装饰, 比如下滑线
行距
我们有时候可能会想把行距加大点使得文字看的清楚一些. CSS
中的 line-height 可以取得这种调节
P.double {line-height: 2}
请看下面的比较. 这 一 段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的.
这 乙?段 的 行 距 是 正常 的. 这 一 段 的 行 距 是 正常 的.
这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的. 这 一 段 的 行
距 是 双 倍 的. 这 一 段 的 行 距 是 双 倍 的.
你要让 line-height 等于 3 的话, 那行距就更大了.
看齐
一般来说我们都是向左边看齐. 但有的时候也有其他的选择,
比如说向右边看齐.
P.right {text-align: right}
P.center {text-align: center}
P.justify {text-align: justify}
请看下面的比较. 这 一 行 左 边 看 齐
这 一 行 右 边 看 齐
这 一 行 在 中 间
text-align 可以有 left, right, center, 和 justify
段落的首行空格
如果我们想让第一行的开头空几格, 可以用 text-indent, 比如
P {text-indent: 1cm}
请看下面的例子. 这 一 段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.
这 ?
段 开 头 空 了 1 厘 米. 这 一 段 开 头 空 了 1 厘 米.
字母的大小写
这个性质显然跟中文没关系, 但如果我们要处理英文, 你可以
用 text-transform 来改变英文的大小写. 比如, 让每个字的
第一个字母大写
P.capitalize {text-transform: capitalize}
P.up {text-transform: uppercase}
P.low {text-transform: lowercase}
请看下面的比较. All the words’ first letter have been capitalized in this li
ne
All the letters are uppercase in this line
ALL THE LETTERS ARE UPPERCASE IN THIS LINE
all the letters are lowercase in this line
文字的装饰
就是在文字上加下滑线, 或中间加条线的. 比如
P.underline {text-decoration: underline}
P.line-through {text-decoration: line-through}
请看下面的比较. Underline line
line-through line
其实最常用的是我们想去掉联接下面的下滑线.
A {text-decoration: none}
第五节: CSS 列表的标识
这一节唯一我们将要讨论的是如何用 CSS 来改变列表
前的标识。我们知道有两种列表：有序和无序。有序
列表用阿拉伯数字为标识， 无序列表用黑色小圆圈来
做标识。用 CSS 的 list-style-type 这两种列表的标
识都可以有四种选择：
无序： disc, circle, square, decimal
有序： upper-roman, lower-roman, upper-alpha, lower-alpha.
假如你想叫有序列表的标识为大小罗马字母
LI.upperroman {list-style-type: upper-roman}
请看下面的比较 disc
circle
square
decimal
大写罗马
小写罗马
大写字母
小写字母
第六节: CSS 控制背景
用 CSS 你不但可以改变整个网页的背景你还可以控
制其他元素的的背景，比如 P，DIV 等。这一节我们
将要讨论的性质有
color: 文字的颜色
background-color: 背景颜色
background-image: 背景图象
background-repeat: 重复背景图象
background-attachment: 是否冻结背景图象
文字的颜色
我们用 color 可以来决定文字，周边，以及横线的颜色
P.greentext {color: green}
请看下面的例子 这一行文字的颜色是绿色的
背景的颜色
背景的颜色可以由 background-color 来控制， 比如我们想叫一些文字段落的背景颜色
为?
绿色的，
P.greenbg {background-color: #CCEFCC}
请看下面的例子
这一行的背景颜色是浅绿色的
背景的图象
我们不但可以给整个网页加个背景图象，我们还可以给其
中一个元素加个背景图象，比如说我们给 P 的背景加上天
空的背景
P.sky {background-image: url(../image/sky.jpg)}
请看下面的例子
给元素背景加颜色或加图象使得我们能自由的强调一些我
们想让大家注意的文字。而没有 CSS 我们只能改变整个网
页的背景颜色或图象
我们不但可以决定是否给背景加图象， 还可以确定是否让
这个图象重复以及在哪个方向重复。比如我们只让图象在
整个网页的竖直方向重复我们就可以去掉左边有个图象条
较蛑馗础１热缥颐侵蝗猛枷笤?
整个网页的竖直方向重复我们就可以去掉左边有个图象
条
的效果。
body {background-image: url(../image/cdbk009a.jpg);
background-repeat: repeat-y}
background-repeat 可以有这些可能值：no-repeat, repeat-x, repeat-y
我们还可以用 background-attachment 来决定当别人浏览
你的网页的是否让背景图象随着内容一起滚动。比如我们
如果不让背景图象动，
body {background-image: url(../image/cdbk009a.jpg);
background-attachment: fixed}
这个性质挺有意思的。 如果你的背景图象是你自己网页的
logo， 你想让它固定在中间不动， 用这个性质可以
达到这个效果
第七节: CSS 控制边框
这一节我们讨论如何用 CSS 来控制四周的空格以及边框
的设定
元素周边的空格 margin
性质 margin 可被用来决定周边的空格， 假如我们想让整
个网页在左边有 5em 但让标题没有任何空格
BODY {margin: 5em}
H3 {margin: -5em}
H3 的负值 -5em 抵销了 BODY 5em 的空格。
另外我们还可以分别用 margin-left, margin-right, margin-top,
和 margin-bottom 来设定 左，右，上，下的空格
元素内部周边的空格 padding
初看起来这个性质跟 margin 好象一样。 其实它们之间有
很大的区别。margin 的空格是相对于其他的元素所空的，
而 padding 是在元素的周边和内部的内容所空的空格。在
下面的例子，我们用有背景颜色的 TABLE 来让你注意这
个性质
TABLE.pad {padding: 5mm; background-color: #CCEFCC}
Petersen was arrested in a modest apartment building in Studio City, Calif.,
whi
h he had been sharing with three other people. The Marshals entered the apar
tmen
using a key provided by the building’s manager. When they entered, the Mars
hals
said, they
found Petersen alone – sitting on his bed and using his laptop computer.
我们同样可以用 padding-left, padding-right, padding-top, 和
padding-bottom 来分别控制左，右，上，下的元素内部
的周边空格。
元素边框的宽度
我们可以用 border-width 性质来调节边框的宽度。 比如
P.width5 {border-width: 1px}
这个 P 元素的边框宽度是 1 px
你可以用 border-left-width, border-right-width, border-top-width,
和 border-bottom-width 来分别决定左，右，上，下边的宽度
元素边框的颜色
我们可以用 border-color 性质来调节边框的颜色。 比如
P.colorred {border-color: red}
这个 P 元素的边框的颜色是红色的
元素边框的形态
我们可以用 border-style 性质来调节边框的形态。 比如
P.inset {border-style: inset, border-width: 5px}
这个 P 元素的边框的形态是 inset
这个 P 元素的边框的形态是 outset
这个 P 元素的边框的形态是 double
这个 P 元素的边框的形态是 groove
这个 P 元素的边框的形态是 ridge
http://hi.baidu.com/cly84920/blog/item/a7337d6e39af20dc80cb4a3d.html
在div中，文本布局经常出现，换行混乱的情况。
问题表现：1.如果是全英文字符串,中间不包含任何符号(包括空格)，不自动换行.
2.中英文混写，则在英文字符串的开始处换行（英文长度>div长度），结尾处不换行。
3.英文整个单词换行。等等，可能还有一些问题，这里只列出了常见的几个；
介绍上面几个css属性功能的简单用法；
word-wrap:normal | break-word; (内容换行)
normal:默认的属性值.（允许内容顶开指定的容器边界）.
break-word:内容将在边界内换行(不截断英文单词换行，截断英文单词下面的属性才具备这个功能。)
word-break:normal | break-all | keep-all (词内换行)
normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
break-all : 强行换行,将截断英文单词
keep-all : 不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示.
text-overflow:clip | ellipsis (文本溢出)
clip : 不显示省略标记（…），而是简单的裁切
ellipsis : 当对象内文本溢出时（超过width部分）显示省略标记（…）
white-space: normal | pre | nowrap (内容不换行)
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
（层中放一个表格，如果层的float：none 则表格和层间会有空隙，这种问题的解决办法是在层的style里面加上white-space: nowrap）
使用方式: word-break:break-all;
一般情况下:
.body{
word-wrap:break-word;
word-break:keep-all;
overflow:hidden;
}
.css{
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
IE与Firefox将它看成是一个长单词了，因此不会自动换行。
对于IE，可以通过IE专有的CSS属性word-wrap即可实现自动换行：word-wrap:break-word;
对于Firefox，CSS2标准并没有定义类似word-wrap的属性，可以通过overflow属性将撑出的部分隐藏：overflow:hidden