高级网页设计

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