css样式表_详解.pptVIP

6.3.2 外部样式表  返回本节 内部样式表只在一个网页中起作用，如果想制作很多具有统一样式的网页，就必须在每个网页内定义相同的CSS样式表。这样很麻烦，效率也很低。外部CSS样式表能够较好地解决这个问题。具体实现方法是，先建立一个外部CSS样式表文件，在这个文件中定义文字、段落、表格、超级链接等网页元素的样式。然后在需要的网页上链接这个外部CSS样式表文件即可。 下面通过实例介绍外部CSS样式表的创建及应用的方法。 原始网页 1．创建外部CSS样式表 2．链接外部CSS样式表 结束放映 返回本章首页 * 第6章 CSS样式表 CSS入门 CSS详解 创建和应用CSS 开 始 CSS是Cascading Style Sheets（层叠样式表）的简称。CSS的基本概念在于可将网页要展示的内容与样式设定分开，也就是将网页的外观设定信息从网页内容独立出来，并集中管理。这样，当要改变网页外观时，只需更改样式设定的部分，HTML文件本身并不需要更改。 本章主要内容： 6.1.1 “CSS样式”面板 6.1.2 定义CSS样式 6.1.3 在网页中应用CSS样式 返回本章首页 6.1 CSS入门述 CSS是W3C定义和维护的标准，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。它可以使网页制作者的工作更加轻松和灵活，现在越来越多的网站采用了CSS技术。 6.1.1 “CSS样式”面板 返回本节 在Dreamweaver中，“CSS样式”面板是新建、编辑、管理CCS的主要工具。选择“窗口”|“CSS样式”命令可以打开或者关闭“CSS样式”面板。 在没有定义CSS前，“CSS样式”面板是空白的。如果在Dreamweaver中定义了CSS，那么“CSS样式”面板中会显示所定义好的CSS规则。 样式表文件名 CSS规则列表 属性和属性值列表 工具按钮栏 图6-1 “CSS样式”面板 6.1.2 定义CSS样式 返回本节 在【CSS样式】面板上，单击【新建CSS规则】按钮，会打开如图6-3所示的【新建CSS规则】对话框。 图6-3 【新建CSS规则】对话框 1．【定义在】选项 【定义在】选项包括两个单选项，分别介绍如下。 （1）【新建样式表文件】：此选项将会把设定的样式最终保存在一个外部单独的样式表文件中，这个样式表文件可以被其他HTML文件共同使用，也就是说可以使站点内的所有页面文件使用同一个样式表文件，甚至不同的站点只要是网页就可以使用。 （2）【仅对该文档】：此选项将会把设定的样式仅仅放在当前文件的头文件中，这些样式只能在此文件中使用。 专家点拨：根据运用CSS的范围是局限于当前网页内部还是可以运用到其他网页文件，可以分为“内联样式表”和“外部样式表”。“内联样式表”是将CSS规则定义在HTML网页文档内部。 “外部样式表”是将CSS规则定义在一个独立的外部样式表文件（扩展名为.css）中。 6.1.2 定义CSS样式 返回本节 【选择器类型】选项包括3个单选项，分别介绍如下。 （1）【类（可应用于任何标签）】：选择此类型后，需要在上方的【名称】文本框中填入一个样式名字，需要注意的是，此类名称必须以“.”开头。这种方式定义的样式可以用来定义绝大多数的HTML对象，可以使这些对象有统一的外观。如图6-4所示是创建一个.mystyle的样式。 图6-4 创建mystyle样式 6.1.2 定义CSS样式 返回本节 专家点拨：如果在【定义在】选项中选择的是【新建样式表文件】，那么单击【确定】按钮后会弹出【保存样式表文件为】对话框，在其中选择要保存到的目录，输入文件名，单击【保存】按钮后进入【.mystyle的CSS规则定义】对话框。在其中可以定义【类型】、【背景】、【区块】、【方框】、【边框】、【列表】、【定位】、【扩展】等属性。 （2）【标签（重新定义特定标签的外观）】：选择此选项后，在【标签】下拉框里选择需要重新定义的HTML标签。 （3）【高级（ID、伪类选择器等）】：重新定义特定元素组合的格式，或其他CSS允许的选择器表单的格式（例如，每当h2标题出现在表格单元格内时，就会应用选择器td h2）。还可以重定义包含特定id属性的标签的格式（例如，由#myStyle定义的样式可以应用于所有包含属性/值对id=myStyle的HTML标签）。另外，这个选项还可以设定链接文本的样式。 返回本节 定义完样式表文件后，就可以在Dreamweaver中套用这些样式了