第13章编写CSS代码规范(精品).ppt

《第13章编写CSS代码规范(精品).ppt》由会员分享，可在线阅读，更多相关《第13章编写CSS代码规范(精品).ppt（7页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1313章章 编写编写CSSCSS代码的规范代码的规范一个大型的网站的每个网页都包含大量的源代码。以往网页一个大型的网站的每个网页都包含大量的源代码。以往网页设计师使用表格来进行页面布局，使网站的源代码更加繁设计师使用表格来进行页面布局，使网站的源代码更加繁复累赘。要对一个使用表格排版的大型网站进行修改是非复累赘。要对一个使用表格排版的大型网站进行修改是非常困难的。自从出现了常困难的。自从出现了DIV+CSS的页面排版方式后，网的页面排版方式后，网页的源代码量就大大减少了。但要制作出语义明确、结构页的源代码量就大大减少了。但要制作出语义明确、结构清晰的网页还需要遵循编写清晰的网页还需要遵循

2、编写CSS代码的规范。代码的规范。CSS代码代码的规范并不是一些明文细则，而是网页设计者在制作和修的规范并不是一些明文细则，而是网页设计者在制作和修改网页代码时总结的经验。本章内容包括：改网页代码时总结的经验。本章内容包括：如何在如何在XHTML文档中使用语义明确的标记文档中使用语义明确的标记如何命名有意义的如何命名有意义的CSS选择器选择器如何运用如何运用CSS代码的缩写和合理的注释代码的缩写和合理的注释13.1 13.1 使用语义明确的标记使用语义明确的标记传统的传统的HTML代码本身也是一种容易理解的标记语言。例如代码本身也是一种容易理解的标记语言。例如p标签代表标签代表paragrap

3、h，就是段落的意思；，就是段落的意思；b标签代表标签代表bold，就是粗体的意思。在编写，就是粗体的意思。在编写XHTML文档时，使用有文档时，使用有意义的标签能让网页源代码易懂易改，并且能防止代码累意义的标签能让网页源代码易懂易改，并且能防止代码累赘。赘。XHTML中常用有语义的标签如表所示。中常用有语义的标签如表所示。13.2 13.2 使用有意义的使用有意义的CSSCSS命名命名尽管尽管XHTML提供很多有语义的标签，但是在实际运用中仍然不足够。所提供很多有语义的标签，但是在实际运用中仍然不足够。所以需要为不同功能的标签增加类选择器或者以需要为不同功能的标签增加类选择器或者ID选择器。在

4、进行页面排选择器。在进行页面排版的时候要为不同功能的标签设置相应的版的时候要为不同功能的标签设置相应的CSS选择器名称。例如，网选择器名称。例如，网页的头部若有一个页的头部若有一个div标签来嵌套，那么这个标签来嵌套，那么这个div标签的类选择器就应标签的类选择器就应该命名为该命名为header。表列出了常用的一些有意义的。表列出了常用的一些有意义的CSS命名。命名。13.3 CSS13.3 CSS代码的缩写代码的缩写在之前的章节中有介绍如何缩写一些在之前的章节中有介绍如何缩写一些CSS属性代码。例如属性代码。例如font属性可以缩写所有文字属性，属性可以缩写所有文字属性，background

5、属性可以属性可以缩写所以背景属性。使用属性缩写可以减少代码量，增加缩写所以背景属性。使用属性缩写可以减少代码量，增加代码可读性。表中列出了可以缩写的代码可读性。表中列出了可以缩写的CSS属性以及其缩写属性以及其缩写的方式。的方式。13.4 13.4 合理的合理的CSSCSS注释注释在制作标准网页的过程中合理使用注释能给文档创建者和修在制作标准网页的过程中合理使用注释能给文档创建者和修改者提供很大的帮助。文档创建者在编写改者提供很大的帮助。文档创建者在编写CSS文档时可能文档时可能非常清楚各个代码的意义，但是半年或者一年后再次修改非常清楚各个代码的意义，但是半年或者一年后再次修改该文档就不会那么

6、清晰了。若别的设计师要修改这个文档，该文档就不会那么清晰了。若别的设计师要修改这个文档，若没有注释的话，修改起来非常困难。常见使用若没有注释的话，修改起来非常困难。常见使用CSS注释注释的地方有以下几个。的地方有以下几个。13.5 13.5 常见面试题常见面试题问题问题1：在使用：在使用h1-h6标签的时候，标签的时候，IE与火狐的字体大小不同，与火狐的字体大小不同，为何还建议使用它们？为何还建议使用它们？问题问题2：是否一定要使用驼峰式来给：是否一定要使用驼峰式来给CSS名称命名？名称命名？问题问题3：为每行：为每行CSS样式都添加注释的做法合理吗？样式都添加注释的做法合理吗？13.6 13

7、.6 小结小结本章讲解了如何编写本章讲解了如何编写CSS代码应该遵循的规则。使用有语义代码应该遵循的规则。使用有语义的的XHTML标签和有语义的标签和有语义的CSS命名是遵循命名是遵循WEB标准的做标准的做法。合理缩写法。合理缩写CSS属性和合理注释属性和合理注释CSS代码能提高代码代码能提高代码的可读性。本章的重点是在网页制作中正确运用的可读性。本章的重点是在网页制作中正确运用XHTML标签和标签和CSS命名。本章的难点是综合所学的知识来提高代命名。本章的难点是综合所学的知识来提高代码的质量。下一章将进入本书的第三部分，学习码的质量。下一章将进入本书的第三部分，学习DIV+CSS的布局基础。的布局基础。出自俊网天下出自俊网天下:http:/