精通CSS：高级Web标准解决方案（第2版）--第一章 基础知识

 

“人们几乎不会先去读完整的CSS规范，这些规范能把任何人送入梦乡。”

“学习CSS最好的一种方式是直接开始使用它。”

“先从博客上看到了一些出色的效果，于是通过查看源代码研究它们是如何实现的，然后就在自己的个人网站是大胆尝试。”

 

一、首先，从开始养成好的习惯

1、良好的文档结构

　　不要过于依赖可视化的编辑器；糟糕的代码结构可能让你宁愿从头编写页面而不想去寻找bug；

2、有意义的标记

　　HTML 4 目前可使用的语义化标签并不全面，至少没有像header、navigation、footer等可直接使用的元素，次优的解决方案是使用现有的元素，并且通过添加ID或类名给它们赋予额外的意义。例如制作一个导航栏：<ul id="nav">。

3、易于理解和维护

 

---

 

二、ID和类

一句话：ID唯一，类相似。

“andy-budd 比 andyBudd 清楚得多。”

1、命名ID和类时，一定要与其表现方式无关。

　　差的命名（它的外观如何）：red，leftColumn，topNav，firstPara...

　　好的命名（它是什么）：error，secondaryContent，mainNav，intro...

2、ID和类的命名注意区分大小写，根据个人习惯或要求使用统一的约定。

 

---

 

三、div 和 span

div  division 部分 → 块级

span  跨度，跨距 → 行内

1、元素能够实现区域分割应不使用div。例如，主导航栏列表直接写作：<ul id="nav">...</ul>。