Download presentation
Presentation is loading. Please wait.
1
计算机网络与网页制作 Chapter 10：用CSS设定页面样式
复旦大学计算机学院 肖川
2
目标 层叠式样式表概述 使用CSS样式面板 使用属性面板 创建类样式与标签样式
3
效果
4
1. 层叠式样式表(CSS) CSS样式表可以位于 （1）CSS内联于HTML标签，存在于标签内 (内联样式)
HTML标签的“style”属性 （2）直接位于一个HTML文档的<head>区内 (内部样式) <style>标签内 （3）位于一个外部文件内，该外部文件可以被任意数量的HTML页面所引用 (外部样式) .css为后缀的的外部文件，引用页面内使用<link>标签指向该外部文件
5
样式表组成 一个样式表是多条CSS规则组成的集合。
7
样式表类型 1. 标签CSS规则 自动应用于同名的HTML标签 2. 类CSS规则 在HTML标签内使用class属性 应用该条CSS规则
3. ID CSS规则 在HTML标签内使用id属性 上述三种类型针对位于<style>标签内或外部CSS文件内的样式表
8
样式表类型 4. 复合内容CSS规则 更加精确地指明CSS规则的应用对象 复合内容的伪类选择器为超链接设定更加丰富的样式
9
如何对页面元素应用CSS样式？ 标签CSS规则的使用 类CSS规则的使用 ID CSS规则的使用 复合内容规则的使用 自动匹配
设置页面元素的class属性 ID CSS规则的使用 设置页面元素的id属性 复合内容规则的使用 根据页面元素的上下文关系自动匹配
10
创建、修改CSS规则的三条途径 “CSS样式”面板 “属性”面板 代码定位器 (略)
11
2. 使用“CSS样式”面板
12
在“CSS样式”面板查看规则 单击第一行 单击第二行 单击第三行
13
在“CSS样式”面板管理样式 附加样式表 新建CSS规则 编辑样式 启用/禁用CSS属性 删除CSS属性 添加属性 修改属性
14
3. 使用“属性”面板
15
在“属性”面板查看/修改规则 单击设计视图第一行 单击设计视图第二行 单击设计视图第三行
16
4. 通过不同途径新建样式 样式位置 面板 内联样式 内部样式 外部样式 “CSS样式” 4.2 4.3 “属性” 4.4 4.5 4.6
1. 标签CSS规则 类CSS规则 3. ID CSS规则 复合内容CSS规则 示例分别从stylePlacesByCSS.html和stylePlacesByProperty.html开始。
17
4.2 在“CSS样式”面板内新建内部样式 1. 打开页面文件，在“CSS样式”面板内单击“新建CSS规则”。(新建样式)
在网页的<style>标签内添加一条名为.redtext 的CSS规则，但尚未应用至页面元素。
18
4.2 在“CSS样式”面板内新建内部样式 2. 单击设计视图的第二段，从右键快捷菜单选择 CSS样式>>redtext，则光标所在的HTML标签内自动添加属性 class=“redtext” 。你也可以手工修改上述HTML代码。(应用类CSS样式)
19
4.3 在“CSS样式”面板内新建外部样式 1. 打开页面文件，在“CSS样式”面板内单击“新建CSS规则”。（新建样式）
新建了一个名为externalCSS.css外部文件， 并且网页内自动引用了该CSS文件。
20
4.3 在“CSS样式”面板内新建外部样式 2. 如果之前已经存在一个CSS文件，则打开页面文件，在“CSS样式”面板内单击“附加样式表”。（引用外部样式） 网页内引用该CSS文件。
21
4.3 在“CSS样式”面板内新建外部样式 3. 单击设计视图的第三段，从右键快捷菜单选择 CSS样式>>greenText，则光标所在的HTML标签内自动添加属性 class=“greenText” 。你也可以手工修改上述HTML代码。(应用类CSS样式)
22
4.4 在“属性”面板内新建内联样式 单击设计视图的第一段，面板 属性>>CSS 则光标所在的HTML标签内自动添加属性
style="font-family: '方正舒体'; font-size: 24px; color: #00F;"
23
4.5 在“属性”面板内新建内部样式 单击设计视图的第二段，面板 属性>>CSS
在网页的<style>标签内添加一条名为.redtext 的CSS规则，并且自动应用至页面的第二段。
24
4.6 在“属性”面板内新建外部样式 单击设计视图的第三段，面板 属性>>CSS
25
—— 续 新建了一个名为externalCSS2.css外部文件， 网页内自动引用了该CSS文件；并且自动
应用.greenText规则至页面的第三段
26
5. 更换页面元素的“类CSS样式” 方法一：在设计视图内定位光标至页面元素，从右键快捷菜单选择“CSS样式”>>…
打勾表示当前所用规则
27
更换页面元素的“类CSS样式” 方法二：在设计视图内定位光标至页面元素，面板 属性>>CSS>>“目标规则”列表
28
示例 本质上修改了页面元素<p>的class属性值。
29
6. 设置页面元素的id属性 此项功能具有对该页面元素应用ID CSS规则的效果。
在设计视图内定位光标至页面元素或选中页面元素，面板 属性>>HTML>>“ID”输入框
30
7. 修改events.html页面的样式 events.html已有的样式
打开网页，再面板 CSS样式>>全部>>所有规则
31
为二级标题(<h2>)设定样式
在二级标题内单击，面板 CSS样式>>新建CSS规则， 亦可面板 属性>>CSS>>“编辑规则”按钮。均自动应用。
32
新建并应用copyright类样式 若通过“CSS样式”面板创建类规则，则还需要手工设置该规则的作用对象。若通过“属性”面板的“编辑规则”按钮创建类规则，则自动作用于网页的当前元素。
33
更换段落的样式 单击要更换样式的段落，面板 属性>>CSS>>“目标规则”下拉列表，选择新样式；亦可通过右键快捷菜单 CSS样式>>…，选择新样式。 若从下拉列表选择“<删除类>”或从快捷菜单选择“无”，则清除类样式，当前段落恢复使用针对标签<p>的标签样式。
34
新建针对<body>的标签规则
不论是通过面板 CSS样式>>新建CSS规则 还是通过面板 属性>>CSS>>目标规则(<新CSS规则>)>>编辑规则 创建，都自动应用标签CSS规则。
35
修改copyright类规则 在“CSS样式”面板内双击规则，或者在“属性”面板内当“目标规则”列表的当前项是要修改的规则时单击“编辑规则”按钮。 粉色是body的背景色
36
修改针对<p>的标签规则 段落内的行间距增大，但列表项的行间距不受影响。
37
修改列表项的行间距 列表项的行 间距增大
38
添加粗体 (标签<strong>)
选中文本，a)面板 属性>>HTML>>粗体，b)亦可菜单 插入>>HTML>>文本对象>>粗体，c)亦可面板 插入>>文本>>粗体(注：后两种方式可以添加更多的标签)
39
新建复合内容CSS规则 列表内的粗体呈现蓝色，列表外的粗体颜色不变。
40
针对超链接的复合内容规则名称 a:link a:visited a:hover a:active 超链接尚未被点击的状态
超链接被点击后的状态 a:hover 把鼠标放在超链接上但不点击它的状态 a:active 超链接被点击时的状态 此处可输入其他的名称
42
8. Div标签及其样式 选中文本，a)菜单 插入>>布局对象>>Div标签，b)亦可面板 插入>>常用>>插入Div标签 (注：对比P38，无法通过“属性”面板插入Div标签) 所选内容自动放入Div标签内。
43
设定Div标签的样式 打开网页，a)面板 CSS样式>>新建CSS规则 ，b)或者面板 属性>>CSS>>目标规则(<新CSS规则>)>>编辑规则
44
9. 把内部样式表转成外部样式表 在“CSS样式”面板内按下Shift键再单击以选中全部内部样式，之后单击右键快捷菜单的“移动CSS规则”命令。 亦可将CSS规则移至已有的外部样式表 移动后“CSS样式”面板及网页代码发生的变化
45
10. 附加(或引用)外部样式表 面板 CSS样式>>附加样式表
46
11. 修改CSS规则 不论内部样式还是外部样式，只需在“CSS样式”面板内双击要修改的CSS规则。 网页的左右页边距各占网页总宽度的20%
47
小结 为所选内容添加各种HTML标签：选中内容，菜单 插入>>布局对象(或插入>>HTML>>文本对象)，或者面板 插入>>常用(或插入>>文本) 对CSS规则进行管理：首选“CSS样式”面板，其次“属性”面板的“CSS”模式 创建CSS规则 引用CSS规则 (针对外部样式表) 应用CSS规则
Similar presentations
