局部套用CSS样式

本章学习的主要内容 1、怎样在网页中添加和应用CSS样式 2、添加三种类型的样式 自定义样式 重定义的HTML标签 组合选择器样式 3、实验内容及其要求 第7章 使用文本样式设计 了解CSS样式定义 1、级联样式表(Cascading Style Sheets)样式是网页元素外观属性的集合。样式可以定义文本、表格、图像、表单等各种网页元素的外观。 2、好处：使用定义好的样式，可以在整个站点内的文件中使用，这样既保证了站点风格的一致性，又提高了工作效率。 3、CSS样式具有很高的工作效率，还因为它可以单独生成样式表文件，扩展名为*.CSS。 4、CSS样式是通过名称或HTML标签识别的。这样当改变样式属性并应用它时，只要查看文本就可以立即看到改变后的文本外观。 5、CSS样式表放置在文档的HEAD区域并将定义一系列样式。 6、手动添加的文本格式可优先于样式。如果要使样式控制段落格式，请删除所有其他的格式设置。 CSS在页面中的使用方式 1、按照定义的CSS的方式，CSS在页面中的使用方式主要有三种不同的类型： 局部套用CSS样式。将CSS语法定义在HTML标记旁边，这时定义的样式只能影响该HTML标记，对于其他的HTML标记则无影响。 在页面开头定义。这种方式是将CSS样式表写在标签之间，内置到HTML的头部，CSS样式将影响整个页面，这种方式使用于单个页面的情况。 链接外部样式表。将编辑好的CSS样式表存为CSS文件，其扩展名为.CSS，在设计网页的过程中可以采用链接的方式将编辑好的CSS样式表套用在页面中，而无须在HTML中出现CSS语法，采用这种方法有个很大的优点，就是可以一次让多个页面同时使用一个样式表，当更新或修改CSS样式表的源文件.CSS时，所有使用该CSS样式表的页面将自动更新。 Dreamweaver中所能定义的CSS样式 1、类(可应用于各种标签)(HTML标签样式)。即自定义CSS样式，可以将CSS自定义样式应用到任何范围或任何文本段中。该样式可重新定义某些特殊标签的格式。 2、标签(重新定义特定标签的外观)(自定义CSS样式)。标签样式将重新定义标签的格式，当重建或修改标签的CSS样式时，所有以该标签格式化的文本都将更新。 3、高级(ID、。上下文选择器等)(级联样式表选择器样式)。CSS选择其样式将重新定义一些标签的特定格式或包含某指定属性的所有标签的格式。该样式可重新定义某些特殊的标签组合。 在网页中添加样式 CSS样式包括 1、自定义样式：自定义样式需要选定应用对象，然后进行应用。使用CSS样式可以定义文本的字体变化、字间距和行间距变化以及边框效果等多重属性。 2、重新定义的HTML标签：重新定义的HTML标签不需要应用。网页中的该类标签都将自动生效。 3、选择器样式：选择器样式不需要应用，直接生效。 a:link 控制网页中链接文本的普通状态外观 a:active 控制当前活动的超级链接文本的外观 a:hover 控制的是鼠标悬停状态下超级链接文本的外观 a:visited 控制的是已经访问的超级链接文本的外观 CSS样式定义的选项说明 CSS样式定义包括8大分类： 类型 背景 区块 方框 边框 列表 定位 扩展 导出样式表文件 要使单个文档中的样式应用到其他文档，可以将其中的样式导出为样式表文件，这样，Dreamweaver可以通过样式表链接，使整个站点具有相同的样式设置。 具体操作步骤如下：文件－－－导出 链接外部样式表文件 外部样式表是一个仅包含样式规则的文本文件。编辑外部样式表将影响到所有链接引用它的文档，用户可以将样式表文件复制到自己的站点内，然后引入文档中。 步骤： 省略 实验内容及其要求 1、按提供的图像和文字制作完成的网页。实例中Exp8－9\sucai08、sucai09文件夹中找到相关的素材。 2、通过实验，了解如何在网页中添加样式，定义CSS样式有三种：类、标签和高级，分别如何设置这三类样式。掌握创建CSS样式的方法，以及如何在网页中附加外部CSS样式表。 作 业 思考练习题 P182 1----5