层迭样式表CSS.ppt
第三章 层叠样式表CSS,本章目标,认识CSS样式了解CSS规则定义对话框使用CSS样式管理CSS样式整理CSS样式表典型实例-用CSS美化网页,本章内容,3.4管理CSS样式,3.3使用CSS样式,3.2了解CSS规则规则对话框的使用,3.1什么是CSS样式,3.5整理CSS样式表,3.6典型实例应用,3.1 什么是CSS样式,CSS样式：是Cascading Style Sheets的缩写，即层叠样式。CSS样式的用途：统一网站的风格；可以来布局网页；可以用来美化表单。总之，使用CSS样式后，可以减少很多网站的维护工作，能很大程度地提高工作效率。,3.1 什么是CSS样式,CSS样式面板：可视化定义CSS样式。创建样式表部分学习内容：新建CSS样式使用CSS面板管理样式 外部样式表,3.1.1 使用CSS面板-新建样式,选择【窗口】|【CSS样式】命令，出现【CSS样式】面板,3.1.1 使用CSS面板认识按钮,面板中的按钮及作用如下：【全部】：单击按钮显示全部样式；【正在】：显示当前文档的样式；【属性】：显示和修改样式属性；“分类显示”图标：按分类显示样式属性；“列表显示”图标：按列表显示样式属性；“链接”图标：添加外部的CSS样式文件；“新建”图标：新建样式表或样式文件；“编辑”图标：编辑CSS样式表；“删除”图标：删除选择的样式。,3.1.1 新建样式,单击该面板的【新建CSS样式】按钮，在【新建CSS样式】对话框中定义样式表的类型,3.1.1 新建CSS样式认识按钮,“类”单选按钮：自定义CSS样式；“标签”单选按钮：重新定义HTML标签中的默认样式；“高级”单选按钮：为某个标签组合或包含特定ID属性的标签定义格式；“名称”/“标签”/“选择器”下拉列表框：选择上面三个单选按钮的对应值；,3.1.1 新建CSS样式认识按钮,如下下拉列表框：选中单选按钮，样式以文件存储，指定或选择文件名；“仅对该文档”单选按钮：在当前文档头部嵌入样式；,3.1.1 使用CSS面板-认识按钮,单击【新建CSS规则】对话框中的【确定】按钮，弹出样式定义对话框,3.4使用和管理CSS样式,鼠标右键单击样式，弹出菜单：复制样式表 编辑修改CSS样式 删除CSS样式 重制CSS样式,3.4.1 复制样式表,复制样式表是指将已有的样式表进行复制，就如同复制文件一样，在对原来的文件进行修改的时候不会连带到原来的文件这对于样式表的备份和防止错误修改是很有效的手段,3.4.2 修改CSS样式,在【CSS样式】面板中选中需要进行修改的样式表文件单击【CSS样式】面板底部的【编辑样式】图标即可打开【定义CSS样式】对话框，以供用户对已经存在的CSS样式表进行修改,3.4.3 删除CSS样式,如果用户对前面制作的已经存在的CSS样式不满意，需要重新来过时，可以将原有文件删除掉，再从头做起 单击【CSS样式】面板底部的【删除CSS样式】图标即可,3.5 定制CSS,制作CSS样式表 改变文字属性修改行间距 改变鼠标指针形状 给图像添加边框,3.5.1 制作CSS样式表,3.5.2 改变文字属性,编辑由大量文本构成的网页文档时，为了区分内容一般都会设置不同的文字属性。这时如果应用样式表就可以更快捷、更准确地统一文字的属性,3.5.3 修改行间距,在网页文档中，如果文字之间的行间距过于狭窄，就会给访问者的阅读带来不便，而且页面也不美观，使用样式表则可以轻松地实现修改行间距，将页面效果美化,3.5.4 改变鼠标指针形状,当浏览网页时将鼠标置于已设置超链接的图像上时，鼠标形状将变为手形，这是HTML中默认的设置项如果用户对单一的手形鼠标不满意的话，利用CSS样式表可以对其进行修改,3.5.5 修改链接样式,一般来说，在文本上建立链接之后，文字就会变成蓝色，同时还出现下划线如果不喜欢有下划线的蓝色文本，就可以利用相关链接的样式表来取消建立链接的文本下划线，并且还可以根据鼠标的移动来设置不同的文本格式,3.5.6 给图像添加边框,在图像相关标记中应用样式表，使得插入图像之后，在图像周围出现虚线边框的方法,3.6 套用CSS样式,标签样式，例如段落标签、表格标签等，定义此类样式后，设计面板上的相应元素自动套用该样式高级样式，例如指定id样式，定义此类样式后，须将相应元素id指定为“Layer1”，方可套用，该样式具有惟一性 在【CSS 样式】面板中，右击要应用的样式的名称，然后从菜单中选择【套用】选项在【属性】面板上，从【样式】下拉菜单中选择要套用的类样式在设计视图中，右击所选文本，在菜单中选择【CSS 样式】，然后选择要套用的样式选择【文本】|【CSS样式】菜单命令，然后在子菜单中选择要套用的样式,3.7 CSS样式表的导出/导入,导出样式以创建CSS样式表链接/导入外部样式表,3.7.1 导出样式以创建CSS样式表,从当前文档中导出样式以创建新的CSS样式表，使其他文档可以应用这些样式选择【文件（F）】|【导出】|【CSS样式】菜单命令，系统弹出【导出样式为CSS文件】对话框输入样式表的名称（扩展名为.css），然后单击【保存】按钮，样式随即保存为CSS样式表,3.7.2 外部样式表,一个外部的层叠样式表是指一个包含样式规范的文本文件使用外部样式表包括导入和链接，能大大提高了网页设计的效率编辑一个外部层叠样式表会影响所有与之相链接的所有文档 链接一个外部样式表 编辑外部样式表,3.7.3 链接/导入外部样式表,选择【窗口（W）】|【CSS样式】菜单命令，或按快捷键Shift+F11，打开【CSS样式】面板在【CSS样式】面板中，单击【附加样式表】按钮，系统弹出【链接外部样式表】对话框,3.6典型实例应用,将“素材第三章syl1”目录复制到虚拟目录，启动Dreamweaver；按【shift+F11】键，打开“CSS样式”面板，单击 图表按钮；在“新建CSS规则”对话框，进行设置，保存；在“CSS规则定义”对话框，“类型”“大小”选择“18”“像素”；在“分类”“背景”“背景图像”，选择图像，【确定】；,3.6典型实例应用,在“所有规则”栏的空白处，单击鼠标右键，选择“新建”；在弹出对话框进行如下设置，单击【确定】,3.6典型实例应用,在弹出的“CSS规则定义”对话框，“分类”“定位”，进行如下设置，【确定】,3.6典型实例应用,3.6典型实例应用,【文件】-【保存】，【F12】进行预览。,本章总结,学习了CSS样式的概念熟悉了CSS规则定义对话框熟悉了CSS样式的使用学习了管理CSS样式学习了整理CSS样式表典型实例练习-用CSS美化网页,
