总结：当我们浏览网页时，经常可以看到链接的下划线是虚线，或者当链接和悬停处于不同状态时，下划线...
当我们浏览网页时，经常可以看到链接的下划线是虚线，或者在链接和悬停的不同状态下下划线由虚线变为实线。 这个效果是如何实现的呢？
其实效果就是设置text-:none。 即去掉链接的下划线。然后给链接添加一条下边框线，并设置下边框线不同的宽度、线型、颜色，实现各种“下划线”效果。
1.使用css缩写
使用缩写可以帮助减小 CSS 文件的大小并使其更易于阅读。 CSS缩写的主要规则请参考《常用CSS缩写语法汇总》，这里不再赘述。
2.明确定义单位，除非值为0
忘记定义尺寸单位是 CSS 新手的一个常见错误。 在 HTML 中你可以只写 width=100，但在 CSS 中你必须给出一个精确的单位，例如：width:100px width:100em。 只有两种情况不定义单位：行高和 0 值。 另外，其他数值必须遵循单位。 请注意不要在值和单位之间添加空格。
3.区分大小写
在 XHTML 中使用 CSS 时，CSS 中定义的元素名称区分大小写。 为了避免此错误，我建议所有定义名称都使用小写。
class和id的值在HTML和XHTML中也是区分大小写的。 如果必须混合大小写，请仔细确认CSS中的定义与XHTML中的标签一致。
4、取消class、id之前的元素限制
当你编写为元素定义class或id时，可以省略前面的元素限定，因为ID在页面中是唯一的，并且可以在页面中多次使用。 对你来说限定一个元素是没有意义的。 例如：
div# { /* */ }
。 { /* */ }
可以写成
# { /* */ }
。 { /* */ }
这节省了一些字节。
5.默认值
通常的默认值为 0，-color 的默认值为。 但不同浏览器的默认值可能不同。 如果你害怕冲突，可以在样式表的开头定义所有元素的总和为0，如下所示：
* {
:0;
:0;
6. 无需重复定义可继承的值
CSS中，子元素自动继承父元素的属性值，比如颜色、字体等，在父元素中已经定义的，可以直接在子元素中继承，无需重复定义。 但请注意，浏览器可能会使用某些默认值覆盖您的定义。
7.最近的第一原则
如果同一元素有多个定义，则最接近（最低级别）的定义将优先。 比如有这样一段代码
：Lorem ipsum dolor 套装
在 CSS 文件中，您定义了元素 p，然后定义了 a
p {
:1em 0;
字体大小：1em；
颜色：#333；
.{
字体-：粗体；
颜色：#600；
在这两个定义中，将使用 class=，因为 class 比 p 更接近。 您可以查看 W3C 的“a”以了解更多信息。
8. 多个类定义
一个标签可以同时定义多个类。 例如：我们首先定义两种样式，第一种样式背景为#666； 第二种样式有 10 像素边框。
.one{宽度:200px;:#666;}
.two{:10px实心#F00;}
在页面代码中我们可以这样调用
最终的显示效果是这个div既有#666背景，又有10px边框。 是的，这是可以做到的，你可以尝试一下。
9. 使用子选择器()
CSS初学者不知道使用子选择器是影响其效率的原因之一。 子选择器可以帮助你保存大量的类定义。 我们看一下下面的代码：
此代码的 CSS 定义是：
div# ul { /* 一些 */ }
div# ul li. { /* 一些 */ }
div# ul li. A。 { /* 一些 */ }
div# ul li. { /* 一些 */ }
div# ul li. A。 { /* 一些 */ }
可以用下面的方法替换上面的代码
样式定义为：
＃ { /* 一些 */ }
# li { /* 一些 */ }
# a { /* 一些 */ }
# .sel { /* 一些 */ }
# .sel a { /* 一些 */ }
使用子选择器可以使您的代码和 CSS 更简洁、更易于阅读。
10.背景图片路径无需加引号
为了节省字节，我建议不要引用背景图像路径，因为引号不是必需的。 例如：
:url(/***.gif) #333;
可以写成
:url(/***.gif) #333;
如果添加引号，将会导致一些浏览器错误。
11. 组选择器（Group）
当某些元素类型、类或 id 具有某些共同属性时，可以使用组选择器来避免多次重复定义。 这可以节省相当多的字节。
例如：要定义所有标题的字体、颜色和颜色，可以这样写：
h1,h2,h3,h4,h5,h6 {
字体-:,,Arial,,sans-serif;
颜色：#333；
:1em 0;
如果使用过程中有个别元素需要定义独立样式，可以添加新的定义或者覆盖旧的定义，例如：
h1 { 字体大小：2em; }
h2 { 字体大小：1.6em; }
12. 以正确的顺序指定链接样式
当您使用 CSS 定义链接的多种状态样式时，请注意它们的编写顺序。 正确的顺序是： :link : :hover :。 提取的第一个字母是 LVHA，您可以将其记为 LoVe HAte（喜欢到讨厌）。 为什么这么定义呢？ 你可以参考Eric Meyer的《Link》。
如果您的用户需要使用键盘控制并且需要知道当前链接的焦点，您还可以定义 :focus 属性。 :focus 属性的效果还取决于您写入的位置。 如果你想让获得焦点的元素显示 :hover 效果，可以在 :hover 之前写 :focus; 如果你想让焦点效果取代 :hover 效果，你可以把 :focus 放在 :hover 之后。
13.清除浮子
一个很常见的CSS问题是，当使用浮动进行定位时，底层被浮动层覆盖，或者层中嵌套的子层超出了外层的范围。
通常的解决方案是在浮动层后面添加一个额外的元素，例如div或br，并将其样式定义为clear:both。 这个方法有点牵强，不过好在有一个好方法可以解决。 请参考这篇文章《如何清除》（注：本站会尽快翻译这篇文章）。
以上两种方法可以很好的解决浮动溢出的问题，但是如果确实需要清除图层或者图层中的对象怎么办？ 一个简单的方法是使用属性。 该方法最初发表于《of》，并在《》和《Super》中得到广泛讨论。
以上哪种清除方法更适合您，需要根据具体情况而定，这里不再讨论。 另外，一些优秀的文章已经把float的应用说得很清楚了。 建议您阅读：“”、“”和“Float”
14. 水平居中()
这是一个简单的技巧，但值得再说一遍，因为我看到很多新手问题都在问：如何水平居中 CSS？ 如果您的布局包含在图层（容器）中，则需要定义元素的宽度并定义水平方向，如下所示：
您可以将其定义为水平居中，如下所示：
＃裹 {
宽度：760px； /* 更改图层的宽度*/
:0 自动；
但IE5/Win无法正确显示该定义。 我们使用一个非常有用的技巧来解决它：使用 text-align 属性。 像这样：
身体 {
文本对齐：；
＃裹 {
宽度：760px； /* 更改图层的宽度*/
:0 自动；
文本对齐：左对齐；
第一个正文的文本对齐：； 规则定义IE5/Win中body所有元素居中（其他浏览器只是文本居中），第二个text-align:left; 是将 #warp 中的文本置于左侧中心。
15. () 并隐藏 CSS
由于较旧的浏览器不支持 CSS，因此常见的方法是使用 @ 技巧来隐藏 CSS。 例如：
@url(main.css);
不过这个方法对IE4不起作用，让我头疼了一段时间。 后来我是这样写的：
@main.css；
这样就可以在IE4中隐藏CSS了。 哈哈，还节省了5个字节。 如果你想了解@语法的详细解释，可以看这里“的css图表”
16.IE优化
有时，您需要为 IE bug 定义一些特殊规则。 这里有太多的CSS hack。 我只使用其中两个，无论微软在即将推出的IE7测试版中是否更好。 由于支持 CSS，这两种方法都是最安全的。
1、标注方法
(a) 要在 IE 中隐藏 CSS 定义，可以使用子选择器（child）：
html>正文 p {
/* 定义内容 */
(b) 以下写法只能被IE浏览器看懂（对其他浏览器隐藏）
* html p {
/* */
(c) 有时，您希望 IE/Win 处于活动状态但 IE/Mac 处于隐藏状态，您可以使用反斜杠技巧：
/* */
* html p {
/* */
2.条件注释()方法
另一种方法，我认为更经过时间考验，是使用微软的私有属性条件注释（）。 使用这种方法你可以为IE单独定义一些样式，而不影响主样式表的定义。 像这样：
17.调试技巧：层数有多大？
调试CSS错误时，你必须像打字机一样，逐行分析CSS代码。 我通常在相关图层上定义背景颜色，这样图层占用的空间就很明显了。 有人建议使用，一般也可以，但问题是有时候元素的尺寸会变大，而且-top和-会破坏垂直值，所以用起来比较安全。
另一个经常引起问题的属性是。 它看起来很相似，但不影响元素的大小或位置。 只有少数浏览器支持属性，我所知道的仅有 、 、 和 Opera 。
18.CSS代码编写风格
在编写 CSS 代码时，每个人对于缩进、换行和空格都有自己的书写习惯。 经过不断的练习，我决定采用以下的写作风格：
,
{
：价值;
使用联合定义时，我通常将每个选择器写在自己的行上，以便更容易在 CSS 文件中找到它们。 在最后一个选择器和大括号 { 之间添加一个空格。 还将每个定义写在自己的行上。 分号应直接放在属性值之后。 不要添加空格。
我习惯在每个属性值后面添加分号。 虽然规则允许分号不需要写在最后一个属性值后面，但是如果要添加新的样式，很容易忘记添加分号而导致错误，所以还是添加了。 更好的。
最后，右大括号 } 单独写在一行上。
空格和换行符有助于阅读。
