北工大web开发之第二课.pdf

Web Web 开发技术基础开发技术基础CSSCSS 北京工业大学计算机学院北京工业大学计算机学院 桂智明桂智明 zmgui@zmgui@ 2.1 CSS2.1 CSS的概念的概念 CSSCSS （层叠样式表）是一种格式化网页的标准方（层叠样式表）是一种格式化网页的标准方 式，它就颜色、字体、间隔、定位以及页边距等式，它就颜色、字体、间隔、定位以及页边距等 格式提供了格式提供了7070种以上的属性，这些属性均适用于种以上的属性，这些属性均适用于 HTMLHTML标记符。标记符。 它扩展了HTML的功能，可用更有效的方 法设计网页格式。 什么是表现什么是表现(Design)(Design)与内容与内容(Content)(Content) ？？  内容是指具体的信息，仅仅表示信息正文及各部分内容是指具体的信息，仅仅表示信息正文及各部分 的名称，如标题、作者、正文、图片的名称，如标题、作者、正文、图片  表现是指信息的展示形式，如标题使用表现是指信息的展示形式，如标题使用1616号黑体，号黑体， 正文使用正文使用1212号宋体、图片采用文绕图间距号宋体、图片采用文绕图间距10px10px的排的排 列方式等列方式等 内容(Content) 表现(Design) 示例 为什么要实现表现与内容的分离？为什么要实现表现与内容的分离？  分离技术使我们在制作网站的时候能够充分对网站分离技术使我们在制作网站的时候能够充分对网站 统一性、可用性进行思考与设计，提高网站可用性，统一性、可用性进行思考与设计，提高网站可用性， 改善用户体验改善用户体验 易于维护易于维护  MM  良好的规划与组织是维护的关键良好的规划与组织是维护的关键  多个多个CSSCSS协调工作、层次清晰协调工作、层次清晰 @import url(/css/fonts.css); @import url(/css/master.css); @import url(/css/globalnav.css); @import url(/css/globalfooter.css); @import url(/css/styles.css); @import url(/css/layout.css); @import url(/css/columns.css); @import url(/css/image_wrappers.css); @import url(/css/forms.css); @import url(/css/data.