网页表现语言——CSS单飞的鞋子

《网页表现语言——CSS单飞的鞋子》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页设计与制作教程(第4版）机械工业出版社同名教材配套电子教案CSS简介CSS样式面板创建并使用内部样式表创建并使用外部CSS样式五实训第7章网页表现语言——CSS7.1.1CSS的特点和用途CSS是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS样式表是由一系列样式选择器和CSS属性组成的，它支持字体属性、颜色和背景属性、文本属性、边框属性、列表属性及精确定位网页元素等属性，从而大大增强了网页的格式化能力。CSS的出现简化了这样的工作，CSS是通过对页面结构的风格控制的思想，控制整个页面的风格的。当需要更改这些页

2、面的样式设置时，只要在样式表中进行修改，而不用对每个页面逐个修改，从而大大简化了格式化的工作。7.1CSS简介7.1.2CSS规则样式由一组规则定义并存放在与要设置格式的实际文本分离的位置（通常在外部样式表或HTML文档的文件头部分中）。因此，可以将h1标签的某个规则一次应用于多个标签（如果在外部样式表中，则可以将此规则一次应用于多个不同页面上的标签）。通过这种方式，CSS可提供非常便利的更新功能。如果用户在一个位置更新CSS规则，使用已定义样式的所有元素的格式设置将自动更新为新样式。7.1CSS简介7.1.3CSS常用属性用户可以定义CSS规则的属性，如文本字体、

3、背景图像和颜色、间距和布局属性以及列表元素外观。首先创建新规则，然后定义下列任意属性。1．定义CSS类型属性2．定义CSS样式背景属性3．定义CSS样式区块属性4．定义CSS样式方框属性5．定义CSS样式边框属性6．定义CSS样式列表属性7．定义CSS样式定位属性8．定义CSS样式扩展属性7.1CSS简介1．CSS样式面板视图在“全部”模式和“正在”模式下，CSS样式面板都允许用户在属性窗格中改变3种视图状态。类别视图：将Dreamweaver支持的CSS属性分为八个类别：字体、背景、区块、边框、方框、列表、定位和扩展名。每个类别的属性都包含在一个列表中，用户可以

4、单击类别名称旁边的加号按钮展开或折叠它。列表视图：按照字母顺序显示Dreamweaver支持的所有CSS属性。属性视图：为默认视图，仅显示那些已进行设置的属性。7.2CSS样式面板2．CSS样式面板按钮在“全部”模式和“正在”模式下，CSS样式面板还包含4个按钮。附加：附加链接到或导入到当前文档中的外部样式表。新建：新建CSS规则，用户可以选择要创建的样式类型。编辑：编辑当前文档或外部样式表中的样式。删除：删除CSS样式面板中选定的规则或属性，并从它所应用的所有元素中删除格式设置。7.2CSS样式面板7.3.1创建自定义样式创建自定义样式的方法如下：将插

5、入点放在文档中，然后执行以下操作之一：执行“格式”→“CSS样式”→“新建”命令。在CSS样式面板中，单击面板右下侧的“新建CSS规则”按钮。在文档窗口中选择文本，从属性面板的“目标规则”弹出菜单中选择“新CSS规则”，然后单击“编辑规则”按钮。7.3创建并使用内部样式表7.3.2创建仅应用于一个HTML元素的样式创建仅应用于一个HTML元素的样式的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“ID（仅应用于一个HTML元素）”，然后在“选择器名称”文本框中输入ID名称，例如，#myhead

6、1。7.3创建并使用内部样式表7.3.3创建重定义HTML标签样式创建重定义HTML标签样式的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“标签（重新定义HTML元素）”，然后在“选择器名称”文本框中输入或从下拉列表中选择HTML元素的名称，例如，h1，如图7-18所示。③选择定义规则的位置。7.3创建并使用内部样式表7.3.4创建链接样式创建重定义HTML标签样式的方法如下：①打开“新建CSS规则”对话框。②在“新建CSS规则”对话框中，指定要创建的CSS规则的“选择器类型”为“复合内容（基于选

7、择的内容）”，然后在“选择器名称”文本框中输入或从下拉列表中选择超链接状态的名称，例如，a:link，如图7-19所示。③选择定义规则的位置。④单击“确定”按钮，完成样式属性的设置。7.3创建并使用内部样式表7.3.5样式的应用①在文档窗口中，选择要应用CSS样式的对象。②执行下列操作之一：在CSS样式面板中，选择“全部”模式，右键单击要应用的样式的名称，然后从弹出菜单中选择“套用”，如图7-20所示。从“类”弹出菜单中选择要应用的类样式。在文档窗口中，右键单击所选对象，从弹出菜单中选择“CSS样式”，然后选择要应用的样式。执行“格式”→“CSS样式”命