CSS级联样式表.pptVIP

CSS 级联样式表 主要内容和要求 内容: CSS 样式表的使用方法和技巧 文本样式、超级链接样式和页面元素标签样式的创建与应用 样式编辑、分级和共享 CSS 样式表文件 要求 数量掌握 CSS 样式表的创建和应用 了解利用代码编辑方式修改 CSS 样式表 CSS 的基本概念 Cascading Style Sheets，CSS，也称为CSS样式表或层叠样式表、级联样式表。 和 Word 中样式为同一个概念，可对网页页面内容进行修饰，不同之处是增加了设置超级链接、表单元素属性和其它页面属性。 CSS是将文字、超级链接和表单元素等页面元素统一为相同风格的管理工具。 一、创建文本的CSS样式表 打开 css1.htm 选菜单?窗口?CSS样式 或右击编辑窗口?CSS样式表 ?新建样式表 使用CSS选择器 a:link：文字链接样式 a:visited：点击过链接后样式 a:hover：鼠标悬停在链接上时的样式 a:active：文字链接处于激活状态时样式 打开link.htm 进行样式设置 创建HTML标签的CSS样式 打开 htmlcss.htm 文件，创建样式表 CSS样式表修改 CSS样式表分组 途径： 用CSS样式面板中添加样式 通过代码编辑器进行设置 创建超级链接的big和small样式 打开cssgroup.htm文件 样式表文件共享 导出样式表到文件： 打开 css1.htm， 导入样式表到文件 打开adds.htm文件， 应用导入的样式表 通过新建窗口建立样式表 菜单?新建?窗口 实验 1.定义一个新的CSS样式 ① 将插入点放在文档中。 ② 单击【窗口】→【CSS 样式】选项，弹出“CSS 样式”面板，单击面板右下角区域中的“新建 CSS 样式”按钮。如图所示。或者在文本属性检查器中，从“样式”弹出式菜单中选择“管理样式”，然后在出现的对话框中单击“新建”。或者右键单击“窗口”→“标签检查器”→“相关 CSS”选项卡，从上下文菜单中选择“新建规则”。或者单击【文本】→【新建】→【CSS 样式表】选项。如图所示。 ③ 定义要创建的 CSS 样式的类型。若要创建可作为 class 属性应用于文本范围或文本块的自定义样式，请选择“创建自定义样式 (Class)”，然后在“名称”文本框中输入样式名称。(类名称必须以句点开头，并且可以包含任何字母和数字组合，例如.jcss。如果没有输入开头的句点，Dreamweaver MX 2004将自动输入)。若要重定义特定HTML标签的默认格式，请选择“重定义标签”，然后在“标签”字段中输入一个 HTML 标签， 或从下拉列表中选择一个标签。若要为具体某个标签组合或所有包含特定 Id 属性的标签定义格式，请选择“使用 CSS 选择器”，然后在“选择器”文本框中输入一个或多个 HTML 标签，或从下拉列表中选择一个标签。下拉列表中提供的选择器(称作伪类选择器)包括 a:active、a:hover、a:link 和 a:visited。 ④ 选择定义样式的位置。若要创建外部样式表，请选择“新建样式表文件”。若要在当前文档中嵌入样式，请选择“仅对该文档”。 ⑤ 单击“确定”。完成定义。 实验 2.利用CSS样式制作一个带阴影的文字效果。 ① 建立站点myweb，新建空白网页文件yywz.htm。 ② 单击【窗口】→【CSS 样式】选项，弹出“CSS 样式”面板，单击面板右下角区域中的“新建 CSS 样式”按钮，打开“新建 CSS 样式”对话框。并选中“选择器类型”单选按钮组中的“类(可应用于任何标签)”单选按钮，在名称列表框中输入“.shadow”，如图所示。 ③ 单击“确定”按钮，在弹出的“.shadow的CSS样式定义”对话框中设定参数。选择“分类”列表中的“类型”选项，设定“字体”为“隶书”，“字号”为“48”，“颜色”为“#66CCCC”。如图所示。 ④ 选择“分类”列表中的“扩展”选项，在“光标”下拉列表中选择“hand”,在“过滤器”下拉列表中选择“shadow(color=?,direction=?)”,将过滤器的参数设为“shadow(color= #000000,direction=240)”。如图所示。 ⑤ 参数设置完毕，单击“确定”按钮。在文件中输入“一些带阴影的文字”。 ⑥ 保存。按F12预览网页。 * 选择创建自定义样式表，输入名称“.p9” 选仅对该文档，然后单击确定 应用 CSS样式 应用 效果 CSS代码 右击编辑窗口 设置样式后的效果 选编辑样式表 预览效果 a.link a.hover a.active a.visited 设置input标签的类型 设置input标签的边框 设置input标签的背景 按下面