《精通CSS高级WEB标准解决方案》第一章：基础知识

我在第九区 上发表了这个系列的笔记，并上传了原作电子书，今天有空，转一下过来。

第一章、基础知识
1.1设计代码的结构

• 
  
• 设计代码时应该使用有意义的标记，比如，xHTML里包含很多有意义的元素，如h1、ul、strong、thead等等，应用使用所有意义合适的元素；当现有元素不足以描述页面内容时，可以用id或是class来赋予它们额外的意义(显然，目前用XML来创建自己的元素仍然是不现实的)。
• 一个id只能命名页面上的一个元素，而在整个站点上，id命名仍应该保持一致;
• class适合用来标识同一类型或相似的条目，比如，一个新闻页面中每条新闻的日期，都可以统一分配class为date;
• 命名id和class时，应该尽量保持名称有意义且和表现方式无关。比如，一开始你的导航栏出现在右边，于是就给它分配id:rightHandNav，可是不久之后，想把它的位置改到左边，名称就不合适了，所以，应该把它命名为subHandNav更加合理。同样道理，即使你希望所有错误消息以红色显示，也应该将它命名为error，而不是red
• 传统的HTML中，id和class的大小写是不区分的，但是在XHTML中，则是区分大小写的，所以，我们应该养成习惯保持大小写统一。
• 应该删除不必要的类，以简化代码，使页面整洁。如果你的类很多，则可能你的XHTML文档结构有问题。
• 过度使用div被称为"divitus"(多div症)。
• div用来给块级(block)元素分组，span则用来给行内(line)元素分组。
• 有时候为了以希望的方式现实页面，无法避免添加额外的无意义的div和span，这是正常的，不必担心，将来CSS3.0会解决这个问题。
• 文档应该声明DOCTYPE，并进行有效性检验。可以通过http://validator.w3.org 进行检验，也可以通过多种firefox插件进行检验。
• DOCTYPE声明分成三种：

怪异的（完全兼容老版本）[code]

[/code]过渡的(部分兼容老版本)[code]

[/code]严格的(不兼容老版本)[code]

[/code]事实上，目前流行的浏览器不会去读取代码中提供的网址，而只判断文档属于三种模式中的哪一种。
很多编辑器会自动添加DOCTYPE声明，但有时它们还可能添加XML声明：[code]

[/code]问题在于，如果DOCTYPE声明不是出现在第一行，则系统默认怪异模式。所以，应该避免使用XML声明
1.2为样式找目标
常用的选择器有：
元素选择器[code]
p {color:black}
[/code]后代选择器[code]
li a {text-decoration:none;}
[/code]id选择器[code]
#intro {color:black}
[/code]class选择器[code]
.post {color:black}
[/code]选择器组合[code]
.post p {color:black}
[/code]伪类[code]
a:link {color:black}
tr:hover {color:black}
[/code]通用选择器[code]
*{
padding:0;
margin:0;
}
[/code]IE6及其以下版本不支持的选择器：
子选择器（只选择元素的直接后代）[code]
#nav > li{color:black;}
[/code]相邻同胞选择器[code]
#nav + p{color:black;}
[/code]属性选择器(根据是否具有某个属性或某个属性的值来进行选择)[code]
abbr[title]{color:black;}
abbr[reg='nofollow']{color:black;}
abbr[class~='friends']{color:black;}//class等属性可以有多个值时，用~来选择其中一个
[/code]更特殊选择器的规则优先，如果特殊性相同，则后定义的规则优先，如[code]
form{width:30em;}
form#search{width:15em;}
[/code]很明显form#search比form更特殊
在站点的每个页面增加id（俗称CSS签名）,一般采用id='www-cn09-com'格式，用户可以用他自己的样式表来设置站点：[code]
body#www-cn09-com{
    font-size:200%
}
[/code]在IE中，用户可以通过工具-internet选项-常规-辅助工具来选择自己定义的CSS文件

1.3规划、组织和维护样式表
样式表的链接：[code]

[/code]样式表的导入[code]

[/code]link是HTML中关联CSS的语法，而import则是css中多个文件关联调用的语法
添加结构性注释[code]
/*-------------------------------
基本样式表
version:1.1
author:作者名
email:[email protected]
wibsite:http://www.cn09.com
-------------------------------*/
[/code]将样式表分为几块，一般先写一般规则，如body、title、a等等，然后根据在文档流中出现的次序处理页面的主要部分。如导航、正文、页脚等，最后处理整站无规律出现的一般元素，如表单样式、图形按钮等
在每块内容头部写一段注释，如[code]
/*=TypHeader
---------------------------*/
[/code]这样，只要搜索=Typ就很容易在不同块之间跳转
有多种在线优化器，如http://www.cssoptimiser.com/ ，可以删除注和空白，从而减小CSS文件，提高响应速度
应当编写样式指南，以便在团队中进行沟通。
对于大型站点，可以使用多个样式表以便维护。比如，一个CSS处理布局，另一个处理细节修饰，布局确定后很少修改，这样可以避免布局样式被意外破坏。