高级网页设计高级网页设计.ppt

实验五 高级网页设计 孙晓燕 2013.5 CSS样式表 CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 样式的类型 自定义css规则 Html标签规则 Css选择器样式 CSS样式面板 “窗口”|”CSS样式” 组合键:Shift+f11 面板中的主要功能按钮 附加样式表 新建样式表 编辑选中的样式表 删除选中的样式表 从CSS样式模板中创建CSS样式表文件 “文件”|”新建”,打开”新建文档”对话框,在”类别”中选择” CSS样式表”类别,在中间的” CSS样式表”栏中选择需要的样式,右侧是样式表预览图. 单击”创建”按钮,新建了一个CSS样式表文件. 新建的CSS样式表文件只有”代码”视图. 编辑样式表文件后,”保存”文件. 附加外部的样式表 “链接”:网页与样式表文件的关系是链接关系,不将样式表的信息导入网页中. “导入”:将外部样式表文件的信息导入到当前文档中. 在CSS样式面板中创建CSS样式表文件 在”CSS样式面板”中,单击”新建”按钮,打开”新建CSS规则”对话框. 选择器类型 类:CSS样式可应用到网页中任何范围或任何文本区域中. 标签:标签样式将重新定义HTML 高级:CSS样式选择器将重新定义一些标签的特定格式或包含特性属性的所有标签的格式. 名称 “类”命名:以英文或数字命名,名称前加”.”,例如”.css1” “标签”命名:可以通过点击下拉列表按钮选择需要的标签代码. “高级”命名:输入带”#”的CSS样式标签或点击下拉列表按钮选择设置超链接的样式. 定义在 “新建样式表文件”:定义的是外部样式表文件 “仅对该文档”:定义的是内嵌式样式表和内联式样式表,不需要保存外部的CSS文件 应用CSS样式 打开需要链接CSS样式的文档,选中文字或图片等网页元素.执行以下操作: 在属性检查器中的”样式”下拉列表选择样式 在CSS样式面板中,右键单击要应用的样式名称,在弹出的快捷菜单中选择”套用”. 取消样式的应用,只需要选择已应用样式的文本,在属性检查器中的”样式”下拉列表选择”无”即可. 实例 如梦令 李清照 昨夜雨疏风骤， 浓睡不消残酒。 试问卷帘人， 却道海棠依旧。 知否、知否？ 应是绿肥红瘦。 段落设置 设置段间距 margin 首行缩进 text-indent(区块). em是相对长度单位,相对于当前对象内文本的字体尺寸。 设置行间距 line-height(类型) 字体 font-family (类型) 大小 font-size (类型) p class=first第1段文字是绿色/p p class=second第2段文字是紫色/p p class=third第3段文字是灰色/p #green{color:green;} h1 id=“green”一级标题是绿色/h1 p id=“green”本段文字是绿色/p img { float: left; } 段落宽度 实例 /ReadNews.asp?NewsID=2629 专题网站 /ReadNews.asp?NewsID=3534 新闻出版 /ReadNews.asp?NewsID=1923 临沂大学信息公告 * *