网页设计与制作项目实训教程 教学课件 作者 严加琼 曾金发项目14.ppt

CSS标记的正文内容2

5、同一个区域，方便了后期的维护。但如果是一个网站，拥有众多不同页面，对于不同页面上的

标记都希望采用同样的风格时，内嵌样式的方法就显得略微麻烦，每次更新都要每个页面一起更新。因此这种方式仅适用于对特殊的页面设置单独的样式风格，比如网站的首页，也是目前国内外大多数门户网站对首页面使用的CSS引入方式。14.2知识储备14.2.1CSS的基本概念（3）链接式链接式CSS样式表是使用频率最高，也是最为实用的方法。它将HTML页面本身与CSS样式风格分离为两个或者多个文件，实现了页面HTML代码与美工CSS代码的分离，使得前期

6、制作和后期维护都较为方便，网站后台的技术人员与美工设计者也因此可以较好的分工。它的主要特点在于，CSS代码与HTML代码完全分离，并且同一个CSS文件可以被不同的HTML所链接使用。在设计整个网站时，可以将所有页面都链接到同一个CSS文件，使用相同的样式风格，这样如果整个网站需要进行样式上的修改，仅需要修改这一个CSS文件即可。它使得网站整体风格快速统一成为可能，后期维护的工作量大幅减少。14.2知识储备14.2.1CSS的基本概念（4）导入样式导入样式表与前文所讲的链接样式表的功能相似，但在语法和加载方式上有区別。采用i

7、mport方式导入的样式表，在HTML文件初始化时，就会被导入到HTML文件内，作为该文件的一部分，类似内嵌式的效果。而链接式样式表则是在HTML的标记需要样式定义外观时才以链接的方式加载。在HTML文件中导入样式表使用@import语句，它本身属于CSS语句，放在〈style〉与标记之间。14.2知识储备14.2.2CSS样式面板介绍1．打开CSS样式面板使用“CSS样式”面板可以查看、创建、编辑和删除CSS样式，也可以将外部样式表附加到文档。可以通过顶部菜单栏的“窗口”菜单，单击“CSS样式“命令，打开

8、CSS样式面板。如图14-3所示。图14-3CSS样式面板14.2知识储备14.2.2CSS样式面板介绍2．CSS样式面板“当前”状态在“CSS样式”面板中单击“当前”按钮，使CSS样式面板处于“当前”模式下，在此模式下，CSS样式面板将显示三个窗格面板。如图14-4所示。图14-4CSS样式面板“当前