CSS基础教程
2009-12-04 10:18
204 查看
一、CSS的应用 [翻译Htmldog]
有三种方法应用CSS
（一）、In-line 行内
行内样式是在html标签里直接使用style属性
<!--Example Source Code-->
<p style="color: red">text</p>
设定段落文字红色。
但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。
（二）、Internal 内部
使用于整个页面的植入内部样式在head标签里面，style标签包围样式。
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...所有段落文字红色，链接蓝色。
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下救星。
外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：
/*Example Source Code*/
p {
color: red;
}
a {
color: blue;
}
如果上面保存为“web.css”，HTML里面的链接就像下面：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...
后面教程里会讲到其他外联样式的方法，现在已经足够了。
从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，保存"web.css"在html目录。保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。
二、CSS Selectors,Properties,and Values 选择器 、属性、值 [翻译Htmldog]
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。
每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。
值在冒号（不是等号）后面，分号分离属性。
/*Example Source Code*/
body {
font-size: 0.8em;
color: navy;
}
上面的意思是为body选择器设置font-size字体大小和color字体颜色。
所以基本的，当它作用于HTML页面时，在body标签（整个窗口中的内容）之间的文字颜色是navy，字体大小是0.8em。
长度和百分比
CSS里面有许多属性值要指定单位，但有些基本单位被使用在一些属性上，在使用之前值得解释下它们：
em：比如font-size:2em给于字体计算出的大小，所以2em就是实际字体大小的两倍。
px： 比如font-size:12px是pixel像素的单位。
pt： 比如font-size:12pt是points镑的单位。
%： 比如font-size:80%是百分比。
其他单位包括pc（派卡）、cm（厘米）、mm（毫米）和in（英寸）
当值是零的时候，不需要单位，例如：border:0意思没有边框。
网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。
三、CSS的color颜色 [翻译Htmldog]
css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。
/*Example Source Code*/
红色：
red
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00
有17个预先确定的颜色，它们是：
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.transparent 也是一个正确的值。
rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。
我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。
十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。
color和background-color
颜色可以使用color和background-color，是美国英语中"color"不是"colour"。
蓝色背景，黄色文字：
/*Example Source Code*/
h1 {
color: yellow;
background-color: blue;
}
这些颜色可能比较粗糙，你可以使用另外的色度：
/*Example Source Code*/
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
你可以看到h1已经变成黄色和蓝色。
color和background-color可以使用在绝大部分html元素，包括body。
四、CSS的Text 文本 [翻译Htmldog]
有一系列属性可以改变网页文字的大小和形状，概要如下：
font-family
文字使用的字体，比如宋体，Times New Roman，Arial等等
这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和times new roman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑拥有不同的字体。例子font-family: arial,helvetica，pc用户可以使用arial而苹果mac用户可以使用helvetica。
注意：如果字体的名称有许多单词组成，使用双引号组合，比如，font-family: "Times New Romes"。
font-size
字体的大小，要小心使用。比如标题不会和段落一样，它要用大字体，你可以使用h1，h2等等。
font-weight
这个属性决定字体是否加粗。在实际运用中通常使用font-weight: bold或font-weight: normal。理论上还可以使用bolder,lighter,100,200, 300, 400, 500, 600, 700, 800 or 900，但有些浏览器不认，仍坚持bold和normal。
font-style
这个属性决定字体是否是斜体，可能是font-style: italic或font-style: normal。
text-decoration
这个属性决定文本是否需要下划线。可以是：
/*Example Source Code*/
text-decoration: overline; /*加上划线*/
text-decoration: line-through; /*加通过文本的线条*/
text-decoration: underline; /*这应该使用在链接上，因为用户习惯认为它代表链接*/
text-transform改变文本的情况。
/*Example Source Code*/
text-transform: capitalize; /*让每个字的第一个字母大写*/
text-transform: uppercase; /*所有大写*/
text-transform: lowercase; /*所有小写*/
text-transform: none; /*这个属性不起作用*/
/*Example Source Code*/
body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
Text spacing
letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal。
line-height属性设定元素的行高，比如一个段落，没有调准字体的大小。它可以是数字（字体大小的倍数），长度，百分比或normal。
text-align设定元素位置，left,right,center或justify。
text-indent属性缩进段落的首行。这在打印时经常设置，但网页里通常用不上。
/*Example Source Code*/
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
五、Margin和Padding [翻译Htmldog]
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。
/*Example Source Code*/
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
元素四边可以设置的属性：margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
CSS盒模型 Box Model问题详解
width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。左右Margin加倍的问题：当box为float时，IE6中box左右的margin会加倍
W3C定义的盒模式如下：
width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时，IE6中box左右的margin会加倍。比如：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.cnblogs.com/uhome</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
左面的inner的右面margin明显大于5px。
这时候，定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.cnblogs.com/uhome</title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>
上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.cnblogs.com/uhome</title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto;
}
.inner1 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>
因此，外层css要定义overflow属性，内层最后要加上clear属性。
居中问题
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
你可以这样定义使它横向居中：
/*Example Source Code*/
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：
/*Example Source Code*/
#outer {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。
六、CSS的Border边框 [翻译Htmldog]
边框可以运用到body里的大部分HTML元素。
制作一个元素的边框，你需要border-style边框样式。值可以是： solid, dotted, dashed, double, groove, ridge, inset and outset，具体样式大家可以实际下。
border-width设定宽度，通常使用pixels即单位是px，同样有四边属性：border-top-width, border-right-width, border-bottom-width and border-left-width。
border-color设定边框颜色。例子：
/*Example Source Code*/
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
设定红色样式为dashed的边框，上下边框宽度为3px，而左右为10px（后面的属性覆盖了前面）。
七、CSS属性结合起来使用 [翻译Htmldog]
如果你学完HTML初级教程即可学习CSS初级教程，使用CSS处理HTML样式。
下面的代码覆盖了初级教程的所有方面，保存下面的CSS文件并且在浏览器里观看连接的HTML，你可以明白各个CSS属性的用法。最好的学习方法就是理解作用在HTML上的CSS文件，改变CSS HTML会发生什么变化。
/*Example Source Code*/
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* By the way, this is a comment */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}
八、CSS的Class以及ID选择器 [翻译Htmldog]
前面的学习我们仅仅使用HTML选择器（在HTML页面里为html标签，如 P）
现在我们学习使用class和id定义属于自己的选择器。
这样，同样的html元素可以通过class或ID使用不同的表现。
在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。
例子：
/*Example Source Code*/
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
html页面通过id和class属性调用CSS，像下面这样：
<!--Example Source Code-->
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。
同样，你可以在html选择器后面使用一个选择器来指定特殊HTML元素，比如p.jam{值}将作用到带有'jam'class属性的段落。
九、CSS的Grouping and Nesting分组和嵌套 [翻译Htmldog]
Grouping 分组
当许多选择器有同样属性时，可以使用逗号组合它们。
例子：
/*Example Source Code*/
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
上面的可以写成这样：
/*Example Source Code*/
h2, .thisOtherClass, .yetAnotherClass
{
color: red;
}
Nesting 嵌套
如果CSS结构良好，不需要使用很多class或ID选择器。这是因为CSS可以设定选择器里面选择器的属性。
例子：
/*Example Source Code*/
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
如果你碰到下面这样的形式，记得处理掉你网页上的class或ID。
<!--Example Source Code-->
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
这是由于，通过使用空格分离选择器，我们可以设定IDtop里面的h1颜色为#ff0，p是red和blod。
这可能比较复杂，因为嵌套可以多级使用，所以需要多加练习。
十、CSS的Pseudo Classes 伪类 [翻译Htmldog]
请你注意一些CSS伪类属性不被所有浏览器支持，但有四个伪类可以安全使用在链接上
伪类像是指定选择器状态或关联选择器的门闩。它们的形式如：selector:pseudo class { property: value; }，在选择器和伪属性之间使用冒号。
link 没有点击过的链接
visited以点击过的链接
active获得焦点时的链接（比如在点击时）
hover 鼠标在链接上面
/*Example Source Code*/
a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
尽管CSS里可以省略它们，但维护不同颜色的链接对于新手是个很好的练习。由于伪类（相比hover）不是经常使用，作为公用属性是非常不幸的特性。由于这样，它不像以前那么重要，但如果为最优用户响应考虑，应该使用它。
传统默认，文本链接是蓝色，访问后是紫色，理论上可以使用很多不同颜色效果，但由于逐渐广泛使用CSS，使得链接变得不再普通，用户也不再认为链接必须是蓝色或紫色。
十一、CSS的属性缩写 [翻译Htmldog]
一些CSS属性允许使用一串值代替许多属性，值使用空格分开。
margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width, margin-left-width等等，形式像这样：property:top right bottom left;逆时针顺序。
所以下面的：
/*Example Source Code*/
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以写成：
/*Example Source Code*/
p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起，例如：
/*Example Source Code*/
p {
border: 1px red solid;
}
（同样可以运用到border-top,border-right等等）
如果只使用两个值（比如margin: 1em 10em;），第一个值包括顶部和底部，第二个值包括左右。
字体属性同样可以使用font属性合并。
/*Example Source Code*/
p {
font: italic bold 1em/1.5 courier;
}
（上面"/1.5"是 line-height的值）
把它们总结在一起，试下下面的代码：
/*Example Source Code*/
p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}
推荐大家使用缩写形式，促进CSS代码的精简、优化！
十二、CSS的Background Images 背景图片 [翻译Htmldog]
背景图片Background Images有许多属性可以操作。
幸运的是，可以使用background处理所有：
/*Example Source Code*/
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
上面合并了下面属性：
background-color出现在前面。
background-image图片的位置。
background-repeat图片重复的形式。背景图片可以重复repeat（这就像建筑用的瓦片一样），repeat-x在x轴（左右）重复，repeat-y在y轴（上下）重复，no-repeat不重复只显示一个。
background-position可以使用top,center,bottom,left,right或任何可以看到的组合，比如above在上面。
可以为大部分html元素设置背景图片，不只是整个页面（body），可以用来制作简单但效果显著的美化，比如圆角等等不同的边角形状。
使用背影图片非常简单，而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面，带给用户判读前台文字困难加大。这是一个极端的例子，但事实上，大部分对用户友好、可读性强的文本是白色背景上显示黑色，或是黑色背景显示白色（建议使用柔和的颜色做为背景，减少刺眼的颜色）
所以，最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡，这样同样有利于减少图片大小，因为使用更少的颜色。（建议使用索引色格式，比如GIF）
十三、CSS的display属性 [翻译Htmldog]
操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成，本质上是显示类型。
display属性基本上分为inline,block,和none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。
设定表现可以更好运用在网页制作上。
/*Example Source Code*/
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
设定标题h1为行元素，可以和后面的元素在同一行。
/*Example Source Code*/
#navigation, #seeAlso, #comments, #standards {
display: none;
}
上面的代码可以使用在打印样式里，比如在导航使用，可以在打印时不显示导航这些无关紧要的东西。
display:none和visibility:hidden;的不同在于display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。例如，如果第二段设置为display:none，第一段将仅跟在第三段，如果设置为visibility:hidden，段落间就会空出。
表格
明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现，你可以使用table-row模拟table-cell模拟td。
display属性更进一步，可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格，比在html中使用行构建快速。
最后，inline-table设定表格前后不换行。
使用CSS表格会严重损害可用性。HTML应该用来传递语意，所以如果你有表格数据，那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。
其他表现形式
list-item列表项目，就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
compat根据上下阿文决定表现形式，同样IE和Mozilla都不支持。
maker仅仅使用在:before和:after伪元素，设定content属性的表现。content属性默认表现就是maker，所以它只有在覆盖原来属性时才有用。
content属性，它的默认就是maker，所以只有在覆盖原来属性时使用。
十四、CSS网页布局Page Layout [翻译Htmldog]
使用CSS布局非常简单，如果你习惯使用tables布局，可能开始时有点困难，但其实很容易，事实上只是观念的不同。你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。
Positioning 定位
positon属性可以指定元素为absolute,relative,static或是fixed。
static是元素默认属性，按HTML出现的先后顺序。
relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。
absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。
fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。
使用绝对定位布局
可以使用绝对定位创建传统的两列布局，如下：
<!--Example Source Code-->
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
上面加上CSS：
/*Example Source Code*/
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。如果你想添加第三列，比如：
/*Example Source Code*/
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
最后阶段去绝对定位元素，因为它们独立存在，无法正确了解它们哪里结束。如果你使用上面的例子，所有的页面有小的导航条和大的内容区域到可以，但是，特别是宽度和大小使用相对值，你必须经常放弃定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮动模式比绝对定位好。
Floating 浮动
浮动元素可以在一条线上移动。
浮动一般使用在定位页面里的小型元素，但也可使用在大块里，比如导航。
上面的HTML例子使用下面CSS：
/*Example Source Code*/
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望接下来的元素包围浮动对象，可以使用clear属性。clear:left清除浮动在左边的元素，clear:right清除浮动在右边的元素，clear:both清除所有。如果你想添加底部footer，可以像下面：
/*Example Source Code*/
#footer {
clear: both;
}
footer将在所有列下面，不管它们的长度如何。
这篇介绍了定位和浮动的基本情况，强调页面的大块，但记住，上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border，你可以表现出任何网页设计，table布局能做的CSS没有什么不能做。
使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性，而且体积上只有使用table布局的部分大小。
十五、CSS的At-Rules@规则 [翻译Htmldog]
At-rules分装不同的CSS规则，应用在特定场合。
Importing
import@规则引用另外的样式。例如，如果你想添加另外样式到现在的样式，可以这样：
@import url(addonstyles.css);
这很像使用link元素连接CSS到HTML，本质上说有一个内容样式像下面：
@import url(monkey.css);
这是为了照顾老版本浏览器，比如Netscape4不支持@规则所以不能链接样式表，已经构建好标签的HTML页面会失去样式表提供的功能。
Media types
media@规则应用内容使用特定媒体，比如打印，例如：
/*Example Source Code*/
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}
媒体形式：
all，所有媒体。
aural，言语合成器。
handheld，移动设备
print，打印
projection，投影
screen，电脑屏幕
你还可以使用braille,embossed,tty或者tv。
注意：说了这么多，IE只支持all,screen和print。
Charachter sets 字符设定
charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如@charset "ISO-8859-1";
Font faces 字体外观
font-face@规则用来详细描述字体，可以在CSS里嵌入外部字体。
它需要font-family描述符引用字体，它的值可以是字体的名称或是新命名一个。嵌入一个字体，使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体，例如如果你添加font-weight: bold粗体到@规则，font-family的src只能运用到带有font-family属性的选择器里，而且选择器里font-weight属性同样设置成bold。
看下面例子：
/*Example Source Code*/
@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}
如上面的例子，段落里的字体将是somefont的字体（如果p选择器没有font-weight: bold，那字体就不是somefont）
嵌入字体还凑合着用，因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持，但这也不是说可以直接使用，IE浏览器嵌入字体，你还需要微软WEFT软件，它提供Truetype字体转换成压缩的OpenType字体（只有这个你才能使用URI指定）。由于这个限制（显得非常复杂）兼容性，最好不要使用系统没有的字体。
Pages
page@规则服务页面媒体，是个高级方式应用于打印媒体样式。它定义了页面块，在盒模型上扩展，所以你可以定义单一页面的大小和表现。应用page@规则有许多规定，比如没有padding和border，而且也不上我们说的电脑屏幕，所以pixels和ems单位不被允许使用。
有许多特定属性可以使用，比如size，可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志
/*Example Source Code*/
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
页面媒体里的伪标签
有三种伪标签用来链接特定page@规则，如下形式：
@page :pseudo-class {stuff}。
:first应用到页面媒体里的第一页
:left和:right应用到左边和左边页面。这可能用在指定有非常大margin的左边页面和有非常大margin的右边页面。
还有一些页面@规则，比如page-breaks页面中断和named pages页面命名，但这些@规则在浏览器里很难工作，你也许浪费了许多时间阅读这篇文章，不过这些都是不错的想法。
十六、CSS的伪元素Pseudo Elements [翻译Htmldog]
伪元素吸附在选择上和pseudo classes伪类很像，像这样selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首字母和首行
first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。
/*Example Source Code*/
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and after 前后
before和after用来联系content属性不使用HTML确定一个元素的内容位置。
content属性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引号标记里关闭任何字符串或使用url(imagename)图片。
/*Example Source Code*/
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
听起来不错吧，可惜大部分用户不能体会到before或after的效果，因为IE不支持。
十七、CSS的优先级特性Specificity [翻译Htmldog]
如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如：
/*Example Source Code*/
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色，因为遵循后面的规则。
然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如：
/*Example Source Code*/
div p { color: red; }
p { color: blue; }
也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。
p的特性是1（一个html选择器）
div p的特性是2（两个html选择器）
.tree的特性是10（1个class选择器）
div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
#baobab的特性是100（1个ID选择器）
body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）
按照上面的规则，div p.tree的特性比div p高，body #content .alternative p又比它们两个都高。（完）
有三种方法应用CSS
（一）、In-line 行内
行内样式是在html标签里直接使用style属性
<!--Example Source Code-->
<p style="color: red">text</p>
设定段落文字红色。
但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。
（二）、Internal 内部
使用于整个页面的植入内部样式在head标签里面，style标签包围样式。
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...所有段落文字红色，链接蓝色。
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下救星。
外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：
/*Example Source Code*/
p {
color: red;
}
a {
color: blue;
}
如果上面保存为“web.css”，HTML里面的链接就像下面：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...
后面教程里会讲到其他外联样式的方法，现在已经足够了。
从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，保存"web.css"在html目录。保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。
二、CSS Selectors,Properties,and Values 选择器 、属性、值 [翻译Htmldog]
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。
每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。
值在冒号（不是等号）后面，分号分离属性。
/*Example Source Code*/
body {
font-size: 0.8em;
color: navy;
}
上面的意思是为body选择器设置font-size字体大小和color字体颜色。
所以基本的，当它作用于HTML页面时，在body标签（整个窗口中的内容）之间的文字颜色是navy，字体大小是0.8em。
长度和百分比
CSS里面有许多属性值要指定单位，但有些基本单位被使用在一些属性上，在使用之前值得解释下它们：
em：比如font-size:2em给于字体计算出的大小，所以2em就是实际字体大小的两倍。
px： 比如font-size:12px是pixel像素的单位。
pt： 比如font-size:12pt是points镑的单位。
%： 比如font-size:80%是百分比。
其他单位包括pc（派卡）、cm（厘米）、mm（毫米）和in（英寸）
当值是零的时候，不需要单位，例如：border:0意思没有边框。
网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式，包括字体大小和屏幕大小。
三、CSS的color颜色 [翻译Htmldog]
css可以处理16,777,216颜色，可以使用名字、rgb值或十六进制代码。
/*Example Source Code*/
红色：
red
等同于
rgb(255,0,0)
等同于
rgb(100%,0%,0%)
等同于
#ff0000
等同于
#f00
有17个预先确定的颜色，它们是：
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.transparent 也是一个正确的值。
rgb的三个值都是从0到255，0是最低级，255是最高级，这些值同样可以是百分比。
我们通常使用10进制即0-9，但hexadecimal使用16进制，即0到f。
十六进制三或六个数字长度前面带上#字符，三个长度是六个的压缩形式，比如#f00是ff0000的压缩，#c96是#cc9966。三位数很好理解，像rgb，第一个是红色，第二个是绿色，第三个蓝色。但六位数给于更多的颜色控制。
color和background-color
颜色可以使用color和background-color，是美国英语中"color"不是"colour"。
蓝色背景，黄色文字：
/*Example Source Code*/
h1 {
color: yellow;
background-color: blue;
}
这些颜色可能比较粗糙，你可以使用另外的色度：
/*Example Source Code*/
body {
font-size: 0.8em;
color: navy;
}
h1 {
color: #ffc;
background-color: #009;
}
你可以看到h1已经变成黄色和蓝色。
color和background-color可以使用在绝大部分html元素，包括body。
四、CSS的Text 文本 [翻译Htmldog]
有一系列属性可以改变网页文字的大小和形状，概要如下：
font-family
文字使用的字体，比如宋体，Times New Roman，Arial等等
这个属性必须详细制定，不能使用偏僻的字体，要使用安全字体（比如arial，verdana和times new roman和宋体），可以同时指定许多字体，只要使用逗号分开即可。这样的用意是，如果用户电脑里没有第一个字体浏览器可以使用后面指定的字体。这非常有用，因为不同的电脑拥有不同的字体。例子font-family: arial,helvetica，pc用户可以使用arial而苹果mac用户可以使用helvetica。
注意：如果字体的名称有许多单词组成，使用双引号组合，比如，font-family: "Times New Romes"。
font-size
字体的大小，要小心使用。比如标题不会和段落一样，它要用大字体，你可以使用h1，h2等等。
font-weight
这个属性决定字体是否加粗。在实际运用中通常使用font-weight: bold或font-weight: normal。理论上还可以使用bolder,lighter,100,200, 300, 400, 500, 600, 700, 800 or 900，但有些浏览器不认，仍坚持bold和normal。
font-style
这个属性决定字体是否是斜体，可能是font-style: italic或font-style: normal。
text-decoration
这个属性决定文本是否需要下划线。可以是：
/*Example Source Code*/
text-decoration: overline; /*加上划线*/
text-decoration: line-through; /*加通过文本的线条*/
text-decoration: underline; /*这应该使用在链接上，因为用户习惯认为它代表链接*/
text-transform改变文本的情况。
/*Example Source Code*/
text-transform: capitalize; /*让每个字的第一个字母大写*/
text-transform: uppercase; /*所有大写*/
text-transform: lowercase; /*所有小写*/
text-transform: none; /*这个属性不起作用*/
/*Example Source Code*/
body {
font-family: arial, helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
Text spacing
letter-spacing和word-spacing属性的意思是字母和文字之间的间隔。值可以是长度或normal。
line-height属性设定元素的行高，比如一个段落，没有调准字体的大小。它可以是数字（字体大小的倍数），长度，百分比或normal。
text-align设定元素位置，left,right,center或justify。
text-indent属性缩进段落的首行。这在打印时经常设置，但网页里通常用不上。
/*Example Source Code*/
p {
letter-spacing: 0.5em;
word-spacing: 2em;
line-height: 1.5;
text-align: center;
}
五、Margin和Padding [翻译Htmldog]
margin和padding用来隔开元素，margin是隔开元素与外边，padding是隔开元素里边。
/*Example Source Code*/
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 1em;
padding: 3em;
}
元素四边可以设置的属性：margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
CSS盒模型 Box Model问题详解
width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。左右Margin加倍的问题：当box为float时，IE6中box左右的margin会加倍
W3C定义的盒模式如下：
width和height定义的是Content部分的宽度和高度，padding border margin的宽度依次加在外面。背景会填充padding和content部分。但是由于浏览器设计上的问题，不同浏览器显示效果会有些不同。
左右Margin加倍的问题
当box为float时，IE6中box左右的margin会加倍。比如：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.cnblogs.com/uhome</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</body>
</html>
左面的inner的右面margin明显大于5px。
这时候，定义inner的display属性为inline。
外层box自动计算高度的问题
根据W3C定义，没有float属性的外层box不会自动计算高度，要计算高度，必须在内层最后一个box加入clear:both。
Opera、netscape、mozilla等不会计算外层box高度，但是微软ie6会自动计算外层高度。比如：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.cnblogs.com/uhome</title>
<style>
.outer {
width:600px;
background:#000;
}
.inner1 {
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
</div>
</body>
</html>
上面的代码在ie中有黑色的背景，但是没有正确的计算上下的margin，在inner2下面加上一个包含clear:both属性的div后，可以正确计算margin。但是firefox中仍然没有黑色背景，通常的解决办法是定义一下clear:both这个div的高度，或者插入全角空格，这样就必须增加额外的高度。网上一种比较好的解决办法是在外层div中加入overflow属性，同时使用clear:both，这样就不会增加额外的高度了。如下：
<!--Example Source Code-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.cnblogs.com/uhome</title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto;
}
.inner1 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>
</div>
</body>
</html>
因此，外层css要定义overflow属性，内层最后要加上clear属性。
居中问题
需要定义元素的宽，并且定义横向的margin，如果你的布局包含在一个层(容器)中，就象这样：
你可以这样定义使它横向居中：
/*Example Source Code*/
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
}
但是IE5/Win不能正确显示这个定义，我们采用一个非常有用的技巧来解决：在外层用text-align属性。就象这样：
/*Example Source Code*/
#outer {
text-align:center;
}
#wrap {
width:760px; /* 修改为你的层的宽度 */
margin:0 auto;
text-align:left;
}
第一个#outer的text-align:center; 规则定义IE5/Win中#outer的所有元素居中(其他浏览器只是将文字居中) ，第二个text-align:left;是将#warp中的文字居左。
因此，在有居中元素的css中，外层css要定义text-align:center属性，内层居中用margin:x auto x auto定义，并重新定义text-align。
六、CSS的Border边框 [翻译Htmldog]
边框可以运用到body里的大部分HTML元素。
制作一个元素的边框，你需要border-style边框样式。值可以是： solid, dotted, dashed, double, groove, ridge, inset and outset，具体样式大家可以实际下。
border-width设定宽度，通常使用pixels即单位是px，同样有四边属性：border-top-width, border-right-width, border-bottom-width and border-left-width。
border-color设定边框颜色。例子：
/*Example Source Code*/
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}
设定红色样式为dashed的边框，上下边框宽度为3px，而左右为10px（后面的属性覆盖了前面）。
七、CSS属性结合起来使用 [翻译Htmldog]
如果你学完HTML初级教程即可学习CSS初级教程，使用CSS处理HTML样式。
下面的代码覆盖了初级教程的所有方面，保存下面的CSS文件并且在浏览器里观看连接的HTML，你可以明白各个CSS属性的用法。最好的学习方法就是理解作用在HTML上的CSS文件，改变CSS HTML会发生什么变化。
/*Example Source Code*/
body {
font-family: arial, helvetica, sans-serif;
font-size: 80%;
color: black;
background-color: #ffc;
margin: 1em;
padding: 0;
}
/* By the way, this is a comment */
p {
line-height: 1.5em;
}
h1 {
color: #ffc;
background-color: #900;
font-size: 2em;
margin: 0;
margin-bottom: 0.5em;
padding: 0.25em;
font-style: italic;
text-align: center;
letter-spacing: 0.5em;
border-bottom-style: solid;
border-bottom-width: 0.5em;
border-bottom-color: #c00;
}
h2 {
color: white;
background-color: #090;
font-size: 1.5em;
margin: 0;
padding: 0.1em;
padding-left: 1em;
}
h3 {
color: #999;
font-size: 1.25em;
}
img {
border-style: dashed;
border-width: 2px;
border-color: #ccc;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}
li {
color: #900;
font-style: italic;
}
table {
background-color: #ccc;
}
八、CSS的Class以及ID选择器 [翻译Htmldog]
前面的学习我们仅仅使用HTML选择器（在HTML页面里为html标签，如 P）
现在我们学习使用class和id定义属于自己的选择器。
这样，同样的html元素可以通过class或ID使用不同的表现。
在CSS里，使用点号（.）创建class选择器，使用hash符号（#）创建ID选择器。
例子：
/*Example Source Code*/
#top {
background-color: #ccc;
padding: 1em
}
.intro {
color: red;
font-weight: bold;
}
html页面通过id和class属性调用CSS，像下面这样：
<!--Example Source Code-->
<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>
<p class="intro">Mmm mm mmmmm</p>
</div>
id和class的不同指出在于一个页面同一个ID只能只有一次，而class可以无限制使用。
同样，你可以在html选择器后面使用一个选择器来指定特殊HTML元素，比如p.jam{值}将作用到带有'jam'class属性的段落。
九、CSS的Grouping and Nesting分组和嵌套 [翻译Htmldog]
Grouping 分组
当许多选择器有同样属性时，可以使用逗号组合它们。
例子：
/*Example Source Code*/
h2 {
color: red;
}
.thisOtherClass {
color: red;
}
.yetAnotherClass {
color: red;
}
上面的可以写成这样：
/*Example Source Code*/
h2, .thisOtherClass, .yetAnotherClass
{
color: red;
}
Nesting 嵌套
如果CSS结构良好，不需要使用很多class或ID选择器。这是因为CSS可以设定选择器里面选择器的属性。
例子：
/*Example Source Code*/
#top {
background-color: #ccc;
padding: 1em
}
#top h1 {
color: #ff0;
}
#top p {
color: red;
font-weight: bold;
}
如果你碰到下面这样的形式，记得处理掉你网页上的class或ID。
<!--Example Source Code-->
<div id="top">
<h1>Chocolate curry</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
这是由于，通过使用空格分离选择器，我们可以设定IDtop里面的h1颜色为#ff0，p是red和blod。
这可能比较复杂，因为嵌套可以多级使用，所以需要多加练习。
十、CSS的Pseudo Classes 伪类 [翻译Htmldog]
请你注意一些CSS伪类属性不被所有浏览器支持，但有四个伪类可以安全使用在链接上
伪类像是指定选择器状态或关联选择器的门闩。它们的形式如：selector:pseudo class { property: value; }，在选择器和伪属性之间使用冒号。
link 没有点击过的链接
visited以点击过的链接
active获得焦点时的链接（比如在点击时）
hover 鼠标在链接上面
/*Example Source Code*/
a.snowman:link {
color: blue;
}
a.snowman:visited {
color: purple;
}
a.snowman:active {
color: red;
}
a.snowman:hover {
text-decoration: none;
color: blue;
background-color: yellow;
}
尽管CSS里可以省略它们，但维护不同颜色的链接对于新手是个很好的练习。由于伪类（相比hover）不是经常使用，作为公用属性是非常不幸的特性。由于这样，它不像以前那么重要，但如果为最优用户响应考虑，应该使用它。
传统默认，文本链接是蓝色，访问后是紫色，理论上可以使用很多不同颜色效果，但由于逐渐广泛使用CSS，使得链接变得不再普通，用户也不再认为链接必须是蓝色或紫色。
十一、CSS的属性缩写 [翻译Htmldog]
一些CSS属性允许使用一串值代替许多属性，值使用空格分开。
margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width, margin-left-width等等，形式像这样：property:top right bottom left;逆时针顺序。
所以下面的：
/*Example Source Code*/
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以写成：
/*Example Source Code*/
p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起，例如：
/*Example Source Code*/
p {
border: 1px red solid;
}
（同样可以运用到border-top,border-right等等）
如果只使用两个值（比如margin: 1em 10em;），第一个值包括顶部和底部，第二个值包括左右。
字体属性同样可以使用font属性合并。
/*Example Source Code*/
p {
font: italic bold 1em/1.5 courier;
}
（上面"/1.5"是 line-height的值）
把它们总结在一起，试下下面的代码：
/*Example Source Code*/
p {
font: 1em/1.5 "Times New Roman", times, serif;
padding: 3em 1em;
border: 1px black solid;
border-width: 1px 5px 5px 1px;
border-color: red green blue yellow;
margin: 1em 5em;
}
推荐大家使用缩写形式，促进CSS代码的精简、优化！
十二、CSS的Background Images 背景图片 [翻译Htmldog]
背景图片Background Images有许多属性可以操作。
幸运的是，可以使用background处理所有：
/*Example Source Code*/
body {
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;
}
上面合并了下面属性：
background-color出现在前面。
background-image图片的位置。
background-repeat图片重复的形式。背景图片可以重复repeat（这就像建筑用的瓦片一样），repeat-x在x轴（左右）重复，repeat-y在y轴（上下）重复，no-repeat不重复只显示一个。
background-position可以使用top,center,bottom,left,right或任何可以看到的组合，比如above在上面。
可以为大部分html元素设置背景图片，不只是整个页面（body），可以用来制作简单但效果显著的美化，比如圆角等等不同的边角形状。
使用背影图片非常简单，而且可以使用在页面的任何地方。许多人喜欢使用色彩鲜艳的图片作为背景的页面，带给用户判读前台文字困难加大。这是一个极端的例子，但事实上，大部分对用户友好、可读性强的文本是白色背景上显示黑色，或是黑色背景显示白色（建议使用柔和的颜色做为背景，减少刺眼的颜色）
所以，最佳使用背景图片的位置要么是上面没有内容要么是背景非常淡，这样同样有利于减少图片大小，因为使用更少的颜色。（建议使用索引色格式，比如GIF）
十三、CSS的display属性 [翻译Htmldog]
操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成，本质上是显示类型。
display属性基本上分为inline,block,和none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。
设定表现可以更好运用在网页制作上。
/*Example Source Code*/
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
设定标题h1为行元素，可以和后面的元素在同一行。
/*Example Source Code*/
#navigation, #seeAlso, #comments, #standards {
display: none;
}
上面的代码可以使用在打印样式里，比如在导航使用，可以在打印时不显示导航这些无关紧要的东西。
display:none和visibility:hidden;的不同在于display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。例如，如果第二段设置为display:none，第一段将仅跟在第三段，如果设置为visibility:hidden，段落间就会空出。
表格
明白表格相关的表现属性值最好的方法想象html表格。table是最初的表现，你可以使用table-row模拟table-cell模拟td。
display属性更进一步，可以通过使用table-column, table-row-group, table-column-group, table-header-group, table-footer-group and table-caption。现在可以直接使用columns构建表格，比在html中使用行构建快速。
最后，inline-table设定表格前后不换行。
使用CSS表格会严重损害可用性。HTML应该用来传递语意，所以如果你有表格数据，那可以使用HTML表格。使用CSS表格仅仅会产生糟糕的数据如果没有CSS数据将不可读。
其他表现形式
list-item列表项目，就像期待HTML里的li元素。它们需要嵌套在元素里面显示。
run-in元素的表现形式由它的父元素决定。IE和Mozilla都不支持。
compat根据上下阿文决定表现形式，同样IE和Mozilla都不支持。
maker仅仅使用在:before和:after伪元素，设定content属性的表现。content属性默认表现就是maker，所以它只有在覆盖原来属性时才有用。
content属性，它的默认就是maker，所以只有在覆盖原来属性时使用。
十四、CSS网页布局Page Layout [翻译Htmldog]
使用CSS布局非常简单，如果你习惯使用tables布局，可能开始时有点困难，但其实很容易，事实上只是观念的不同。你需要把网页的每个部分看成独立的块，你可以绝对或相对定位块。
Positioning 定位
positon属性可以指定元素为absolute,relative,static或是fixed。
static是元素默认属性，按HTML出现的先后顺序。
relative比较像static，但元素可以使用top,right,bottom和left设定初始属性。
absolute把元素从HTML里面拉出，一切由它自己决定，在这里，绝对定位元素可以使用top,right,bottom,left定位在任何地方。
fixed行为像absolute，但它绝对定位的元素参照浏览器窗口与网页没有关系。所以，理论上，fixed元素可以固定在屏幕上当页面滚动时。为什么说是理论上的？因为IE7以下的浏览器不支持。
使用绝对定位布局
可以使用绝对定位创建传统的两列布局，如下：
<!--Example Source Code-->
<div id="navigation">
<ul>
<li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href="theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
上面加上CSS：
/*Example Source Code*/
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。如果你想添加第三列，比如：
/*Example Source Code*/
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#navigation2 {
position: absolute;
top: 0;
right: 0;
width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin to 10em */
}
最后阶段去绝对定位元素，因为它们独立存在，无法正确了解它们哪里结束。如果你使用上面的例子，所有的页面有小的导航条和大的内容区域到可以，但是，特别是宽度和大小使用相对值，你必须经常放弃定位的希望，比如位于元素最下面的底部布局。如果你想定位底部，采用浮动模式比绝对定位好。
Floating 浮动
浮动元素可以在一条线上移动。
浮动一般使用在定位页面里的小型元素，但也可使用在大块里，比如导航。
上面的HTML例子使用下面CSS：
/*Example Source Code*/
#navigation {
float: left;
width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望接下来的元素包围浮动对象，可以使用clear属性。clear:left清除浮动在左边的元素，clear:right清除浮动在右边的元素，clear:both清除所有。如果你想添加底部footer，可以像下面：
/*Example Source Code*/
#footer {
clear: both;
}
footer将在所有列下面，不管它们的长度如何。
这篇介绍了定位和浮动的基本情况，强调页面的大块，但记住，上面方法可以运用到块里面的任何元素。通过组合使用position,floating,margins,padding和border，你可以表现出任何网页设计，table布局能做的CSS没有什么不能做。
使用表格布局的理由就是考虑古老的浏览器。CSS的优势在于拥有很高的可用性，而且体积上只有使用table布局的部分大小。
十五、CSS的At-Rules@规则 [翻译Htmldog]
At-rules分装不同的CSS规则，应用在特定场合。
Importing
import@规则引用另外的样式。例如，如果你想添加另外样式到现在的样式，可以这样：
@import url(addonstyles.css);
这很像使用link元素连接CSS到HTML，本质上说有一个内容样式像下面：
@import url(monkey.css);
这是为了照顾老版本浏览器，比如Netscape4不支持@规则所以不能链接样式表，已经构建好标签的HTML页面会失去样式表提供的功能。
Media types
media@规则应用内容使用特定媒体，比如打印，例如：
/*Example Source Code*/
@media print {
body {
font-size: 10pt;
font-family: times new roman, times, serif;
}
#navigation {
display: none;
}
}
媒体形式：
all，所有媒体。
aural，言语合成器。
handheld，移动设备
print，打印
projection，投影
screen，电脑屏幕
你还可以使用braille,embossed,tty或者tv。
注意：说了这么多，IE只支持all,screen和print。
Charachter sets 字符设定
charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如@charset "ISO-8859-1";
Font faces 字体外观
font-face@规则用来详细描述字体，可以在CSS里嵌入外部字体。
它需要font-family描述符引用字体，它的值可以是字体的名称或是新命名一个。嵌入一个字体，使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体，例如如果你添加font-weight: bold粗体到@规则，font-family的src只能运用到带有font-family属性的选择器里，而且选择器里font-weight属性同样设置成bold。
看下面例子：
/*Example Source Code*/
@font-face {
font-family: somerandomfontname;
src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}
如上面的例子，段落里的字体将是somefont的字体（如果p选择器没有font-weight: bold，那字体就不是somefont）
嵌入字体还凑合着用，因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持，但这也不是说可以直接使用，IE浏览器嵌入字体，你还需要微软WEFT软件，它提供Truetype字体转换成压缩的OpenType字体（只有这个你才能使用URI指定）。由于这个限制（显得非常复杂）兼容性，最好不要使用系统没有的字体。
Pages
page@规则服务页面媒体，是个高级方式应用于打印媒体样式。它定义了页面块，在盒模型上扩展，所以你可以定义单一页面的大小和表现。应用page@规则有许多规定，比如没有padding和border，而且也不上我们说的电脑屏幕，所以pixels和ems单位不被允许使用。
有许多特定属性可以使用，比如size，可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志
/*Example Source Code*/
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
页面媒体里的伪标签
有三种伪标签用来链接特定page@规则，如下形式：
@page :pseudo-class {stuff}。
:first应用到页面媒体里的第一页
:left和:right应用到左边和左边页面。这可能用在指定有非常大margin的左边页面和有非常大margin的右边页面。
还有一些页面@规则，比如page-breaks页面中断和named pages页面命名，但这些@规则在浏览器里很难工作，你也许浪费了许多时间阅读这篇文章，不过这些都是不错的想法。
十六、CSS的伪元素Pseudo Elements [翻译Htmldog]
伪元素吸附在选择上和pseudo classes伪类很像，像这样selector:pseudoelement{property: value;}。有四种方式。
First letters and First lines 首字母和首行
first-letter伪元素作用到元素的第一个字母，first-line作用到元素的顶行。你可以，例如为段落创建一个drop caps和首行加粗。
/*Example Source Code*/
p:first-letter {
font-size: 3em;
float: left;
}
p:first-line {
font-weight: bold;
}
Before and after 前后
before和after用来联系content属性不使用HTML确定一个元素的内容位置。
content属性值可以是：open-quote,close-quote,no-open-quote,no-close-quote，在引号标记里关闭任何字符串或使用url(imagename)图片。
/*Example Source Code*/
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
li:before {
content: "POW: "
}
p:before {
content: url(images/jam.jpg)
}
听起来不错吧，可惜大部分用户不能体会到before或after的效果，因为IE不支持。
十七、CSS的优先级特性Specificity [翻译Htmldog]
如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规则来决定哪一个非常特殊而胜出。
它可能不像其它那么重要，大部分案例你不需要担心冲突，但大型而且复杂的CSS文件，或有很多CSS文件组成的，可能产生冲突。
选择器一样的情况下后面的会覆盖前面的属性。比如：
/*Example Source Code*/
p { color: red; }
p { color: blue; }
p元素的元素将是蓝色，因为遵循后面的规则。
然而，你不可能经常用相同的选择器冲突达到目的，当你使用嵌套选择器，合理的冲突来了。比如：
/*Example Source Code*/
div p { color: red; }
p { color: blue; }
也许你看起来p元素在div元素里面的颜色是蓝色，就像后面p元素的规则，但是第一个选择器的特性却是红色。基本上，一个选择器越多特性，样式冲突的时候将显示它的样式。
一组嵌套选择器的实际特性可以计算出来。基本的，使用ID选择器的值是100，使用class选择器的值是10，每个html选择器的值是1。它们加起来就可以计算出特性的值。
p的特性是1（一个html选择器）
div p的特性是2（两个html选择器）
.tree的特性是10（1个class选择器）
div p.tree的特性是1+1+10=12，（两个html选择器，一个class选择器）
#baobab的特性是100（1个ID选择器）
body #content .alternative p的特性是112（两个html选择器，一个ID选择器，一个类选择器）
按照上面的规则，div p.tree的特性比div p高，body #content .alternative p又比它们两个都高。（完）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS 基础教程
- 从基础开始:CSS实用教程（二）
- CSS应用基础教程(1)基本认识
- jquery基础教程四(css的操作之css,height和width)
- 我的学习笔记——CSS基础教程
- CSS教程-02-CSS语法基础
- DIV+CSS基础教程：XHTML+CSS与SEO
- DIV+CSS基础教程：盒子模型
- DIV+CSS基础教程：浮动
- DIV+CSS基础教程：浮动(float)页面布局
- [jQuery教程]jquery基础教程四(css的操作之css,height和width)
- DOM基础教程之使用DOM + Css
- Web标准基础教程：CSS简写指南
- CSS基础教程17篇（转载）
- CSS基础教程十九之CSS图文混排，图像签名，多图拼接和图片特效
- CSS基础教程 -- 媒体查询屏幕适配
- Web前端开发精品课HTML CSS JavaScript基础教程第十三章课后编程题答案
- 从基础开始:CSS实用教程（一）
- CSS应用基础教程(2)应用方式
- CSS基础教程整理