At-rules分装不同的CSS规则，应用在特定场合。
Importing
import@规则引用另外的样式。例如，假如你想添加另外样式到现在的样式，可以这样：
@import url(addonstyles.css);
这很像使用link元素连接CSS到HTML，本质上说有一个内容样式像下面：
<style type="text/css" media="all">@import url(monkey.css);</style>
这是为了照顾老版本浏览器，比如Netscape4不支持@规则所以不能链接样式表，已经构建好标签的HTML页面会失去样式表提供的功能。
Media types
media@规则应用内容使用特定媒体，比如打印，例如：
@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。
@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属性可以用来定义裁剪标志：
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
页面媒体里的伪标签
Continue Reading →
使用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以下的浏览器不支持。
使用绝对定位布局
可以使用绝对定位创建传统的两列布局，如下：
<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：
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
#content {
margin-left: 10em;
}
上面导航条设定在左边，宽度是10em。因为导航条是绝对定位，所以流动的页面上什么也不动，需要设定内容的左边margin等于导航条的宽度。
真是简单。你没有限制这两列的距离，使用聪明的布局，你可以随心所欲安排许多块。假如你想添加第三列，比如：
#navigation {
position: absolute;
top: 0;
left: 0;
width: 10em;
}
Continue Reading →
操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式。一些由标签组成的大部分页面可以设定任何样式。浏览器默认的样式里的大部分html元素由字体样式、margin,padding组成，本质上是显示类型。
Display属性基本上分为inline,block,和 none。inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。block元素前后换行。标题和段落元素是块元素。none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。
设定表现可以更好运用在网页制作上。
h1 {
display: inline;
font-size: 2em;
}
#header p {
display: inline;
font-size: 0.9em;
padding-left: 2em;
}
设定标题h1为行元素，可以和后面的元素在同一行。
#navigation, #seeAlso, #comments, #standards {
display: none;
}
面的代码可以使用在打印样式里，比如在导航使用，可以在打印时不显示导航这些无关紧要的东西。
Display:none和 visibility:hidden;的不同在于display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。例如，假如3的第二段设置为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，所以只有在覆盖原来属性时使用。
背景图片Background Images有许多属性可以操作。幸运的是，可以使用background处理所有：
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属性允许使用一串值代替许多属性，值使用空格分开。
margin,pdding和border-width答应合并 margin-top-width, margin-right-width, margin-bottom-width等等，形式像这样：property:top right bottom left;逆时针顺序。
所以下面的：
p {
border-top-width: 1px;
border-right-width: 5px;
border-bottom-width: 10px;
border-left-width: 20px;
}
可以写成：
p {
border-width: 1px 5px 10px 20px;
}
border-width,border-color,border-style同样可以合并到一起，例如：
p {
border: 1px red solid;
}
同样可以运用到border-top,border-right等等。假如只使用两个值（比如margin: 1em 10em;），第一个值包括顶部和底部，第二个值包括左右。
字体属性同样可以使用font属性合并。
p {
font: italic bold 1em/1.5 courier;
}
上面”/1.5″是 line-height的值。
把它们总结在一起，试下下面的代码：
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代码的精简、优化！
