计算机网络与网页制作 Chapter 10:用CSS设定页面样式

Slides:



Advertisements
Similar presentations
计算机网络与网页制作 Chapter 13 :使用表格 复旦大学计算机学院 肖川 1.
Advertisements

单元8: DIV+CSS技术的应用 授课教师:张俊辉. 单元8: DIV+CSS技术的应用 授课教师:张俊辉.
第六 章数据库访问页 6.1 数据访问页视图 6.2 创建数据访问页 6.3 编辑数据访问页 6.4 查看数据访问页 退出.
项目2 字符格式和段落编排 2017年3月7日6时54分.
点击输入贵公司名称 年度工作总结汇报幻灯片模版 工作总结 年终汇报 工作计划 活动流程 汇报部门:XXXX.
第六讲 课 题:在Dreamweaver8中使用CSS设置页面格式 目的及要求:使用CSS设置页面格式
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
插入超链接 高邮市第一实验小学 范太国 任务一:设置文本超链接 任务一:设置文字超链接 步骤:1、选定文字并右击,在快捷菜单 中选择“超链接”命令。 2、在弹出的对话框中选择左侧“链接到:”中的“本文档中的位置(A)”项,在“请选择文档中的位置(C):”中选择需要链接的幻灯片,单击“确定”按钮。
第五单元课1-3 层叠样式表.
Css2/css3全教程 选择器 群号: 韬略课堂:何韬.
有序列表.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
UI 软件 设计 网页基本元素设计(二).
CSS简介 WEB前端三剑客之二.
第 11 章 讓版面更活潑 的 CSS.
武汉纺织大学传媒学院 cm.wtu.edu.cn
XSL: Extensible Stylesheet Language
第八章 菜单设计 §8.1 Visual FoxPro 系统菜单 §8.2 为自己的程序添加菜单 §8.3 创建快捷菜单.
计算机网络与网页制作 Chapter 18:用行为增加页面的互动
主讲教师:唐大仕 第9讲 网页制作初步 主讲教师:唐大仕
PostgreSQL 8.3 安装要点 四川大学计算机学院 段 磊
CHAPTER 18 CSS樣式表的動態效果.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
CSS样式.
HTML & CSS.
2017 唯美樱花工作模板 Your content to play here, or through your copy, paste in this box, and select only the text. Your content to play here, or through your.
POWERPOINT TEMPLATE HI.
点击此处添加标题 01 点击此处添加标题 点击此处添加标题 点击此处添加标题 点击此处添加标题 点击此处添加标题 点击此处添加标题
PRESENTED BY OfficePLUS
CSS技术 蒋玉华.
UI 软件 设计 页面布局(二).
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
UI 软件 设计 页面布局(三).
网页设计与制作 Dreamweaver CS6 标准教程
网页设计(2) 第2讲 HTML标记、样式、页面布局 2019/4/5 制作人:马秀麟.
计算机网络与网页制作 Chapter 11:用CSS作页面布局
项目5 使用CSS控制网页元素.
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
产品推广 PRODUCT PROMOTION PRESENTED BY OfficePLUS.
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序. 标准配色方案 背景 文本和线条 阴影 强调色 主色一 主色二 主色三 主色四 推荐应用顺序.
武汉纺织大学传媒学院 cm.wtu.edu.cn
《网页设计与制作》.
计算机网络与网页制作 Chapter 12:页面布局高级技术
PRESENTED BY OfficePLUS
姚金宇 MIT SCHEME 使用说明 姚金宇
工业机器人知识要点解析 (ABB机器人) 主讲人:王老师
POWERPOINT TEMPLATE PRESENTED BY OfficePLUS.
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
项目二:HTML语言基础.
布局大师——表格.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第六章 素材的加工与处理 第13讲 用GoldWave进行音频的截取、合并、淡入淡出操作
第15节 CSS超链接样式 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/10 传媒学院.
Visual Basic程序设计 第13章 访问数据库
VRP教程 2011.
Dreamweaver 進階網頁製作 B 許天彰.
Python 环境搭建 基于Anaconda和VSCode.
CSS基礎 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第8章 创建与使用图块 将一个或多个单一的实体对象整合为一个对象,这个对象就是图块。图块中的各实体可以具有各自的图层、线性、颜色等特征。在应用时,图块作为一个独立的、完整的对象进行操作,可以根据需要按一定比例和角度将图块插入到需要的位置。 2019/6/30.
CSS 一起來美化網頁吧!!.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
创建、启动和关闭Activity 本讲大纲: 1、创建Activity 2、配置Activity 3、启动和关闭Activity
点击此处添加标题 PPT背景图片: PPT图表下载:
LOGO HERE 单击此处添加 您的标题标题标题 PRESENTED BY JANE DOE
环境保护 / 能源 / 绿色城市 / 生态环境 / 林业局
Presentation transcript:

计算机网络与网页制作 Chapter 10:用CSS设定页面样式 复旦大学计算机学院 肖川 cxiao@fudan.edu.cn

目标 层叠式样式表概述 使用CSS样式面板 使用属性面板 创建类样式与标签样式

效果

1. 层叠式样式表(CSS) CSS样式表可以位于 (1)CSS内联于HTML标签,存在于标签内 (内联样式) HTML标签的“style”属性 (2)直接位于一个HTML文档的<head>区内 (内部样式) <style>标签内 (3)位于一个外部文件内,该外部文件可以被任意数量的HTML页面所引用 (外部样式) .css为后缀的的外部文件,引用页面内使用<link>标签指向该外部文件

样式表组成 一个样式表是多条CSS规则组成的集合。

样式表类型 1. 标签CSS规则 自动应用于同名的HTML标签 2. 类CSS规则 在HTML标签内使用class属性 应用该条CSS规则 3. ID CSS规则 在HTML标签内使用id属性 上述三种类型针对位于<style>标签内或外部CSS文件内的样式表

样式表类型 4. 复合内容CSS规则 更加精确地指明CSS规则的应用对象 复合内容的伪类选择器为超链接设定更加丰富的样式

如何对页面元素应用CSS样式? 标签CSS规则的使用 类CSS规则的使用 ID CSS规则的使用 复合内容规则的使用 自动匹配 设置页面元素的class属性 ID CSS规则的使用 设置页面元素的id属性 复合内容规则的使用 根据页面元素的上下文关系自动匹配

创建、修改CSS规则的三条途径 “CSS样式”面板 “属性”面板 代码定位器 (略)

2. 使用“CSS样式”面板

在“CSS样式”面板查看规则 单击第一行 单击第二行 单击第三行

在“CSS样式”面板管理样式 附加样式表 新建CSS规则 编辑样式 启用/禁用CSS属性 删除CSS属性 添加属性 修改属性

3. 使用“属性”面板

在“属性”面板查看/修改规则 单击设计视图第一行 单击设计视图第二行 单击设计视图第三行

4. 通过不同途径新建样式 样式位置 面板 内联样式 内部样式 外部样式 “CSS样式” 4.2 4.3 “属性” 4.4 4.5 4.6 1. 标签CSS规则 2. 类CSS规则 3. ID CSS规则 4.复合内容CSS规则 示例分别从stylePlacesByCSS.html和stylePlacesByProperty.html开始。

4.2 在“CSS样式”面板内新建内部样式 1. 打开页面文件,在“CSS样式”面板内单击“新建CSS规则”。(新建样式) 在网页的<style>标签内添加一条名为.redtext 的CSS规则,但尚未应用至页面元素。

4.2 在“CSS样式”面板内新建内部样式 2. 单击设计视图的第二段,从右键快捷菜单选择 CSS样式>>redtext,则光标所在的HTML标签内自动添加属性 class=“redtext” 。你也可以手工修改上述HTML代码。(应用类CSS样式)

4.3 在“CSS样式”面板内新建外部样式 1. 打开页面文件,在“CSS样式”面板内单击“新建CSS规则”。(新建样式) 新建了一个名为externalCSS.css外部文件, 并且网页内自动引用了该CSS文件。

4.3 在“CSS样式”面板内新建外部样式 2. 如果之前已经存在一个CSS文件,则打开页面文件,在“CSS样式”面板内单击“附加样式表”。(引用外部样式) 网页内引用该CSS文件。

4.3 在“CSS样式”面板内新建外部样式 3. 单击设计视图的第三段,从右键快捷菜单选择 CSS样式>>greenText,则光标所在的HTML标签内自动添加属性 class=“greenText” 。你也可以手工修改上述HTML代码。(应用类CSS样式)

4.4 在“属性”面板内新建内联样式 单击设计视图的第一段,面板 属性>>CSS 则光标所在的HTML标签内自动添加属性 style="font-family: '方正舒体'; font-size: 24px; color: #00F;"

4.5 在“属性”面板内新建内部样式 单击设计视图的第二段,面板 属性>>CSS 在网页的<style>标签内添加一条名为.redtext 的CSS规则,并且自动应用至页面的第二段。

4.6 在“属性”面板内新建外部样式 单击设计视图的第三段,面板 属性>>CSS

—— 续 新建了一个名为externalCSS2.css外部文件, 网页内自动引用了该CSS文件;并且自动 应用.greenText规则至页面的第三段

5. 更换页面元素的“类CSS样式” 方法一:在设计视图内定位光标至页面元素,从右键快捷菜单选择“CSS样式”>>… 打勾表示当前所用规则

更换页面元素的“类CSS样式” 方法二:在设计视图内定位光标至页面元素,面板 属性>>CSS>>“目标规则”列表

示例 本质上修改了页面元素<p>的class属性值。

6. 设置页面元素的id属性 此项功能具有对该页面元素应用ID CSS规则的效果。 在设计视图内定位光标至页面元素或选中页面元素,面板 属性>>HTML>>“ID”输入框

7. 修改events.html页面的样式 events.html已有的样式 打开网页,再面板 CSS样式>>全部>>所有规则

为二级标题(<h2>)设定样式 在二级标题内单击,面板 CSS样式>>新建CSS规则, 亦可面板 属性>>CSS>>“编辑规则”按钮。均自动应用。

新建并应用copyright类样式 若通过“CSS样式”面板创建类规则,则还需要手工设置该规则的作用对象。若通过“属性”面板的“编辑规则”按钮创建类规则,则自动作用于网页的当前元素。

更换段落的样式 单击要更换样式的段落,面板 属性>>CSS>>“目标规则”下拉列表,选择新样式;亦可通过右键快捷菜单 CSS样式>>…,选择新样式。 若从下拉列表选择“<删除类>”或从快捷菜单选择“无”,则清除类样式,当前段落恢复使用针对标签<p>的标签样式。

新建针对<body>的标签规则 不论是通过面板 CSS样式>>新建CSS规则 还是通过面板 属性>>CSS>>目标规则(<新CSS规则>)>>编辑规则 创建,都自动应用标签CSS规则。

修改copyright类规则 在“CSS样式”面板内双击规则,或者在“属性”面板内当“目标规则”列表的当前项是要修改的规则时单击“编辑规则”按钮。 粉色是body的背景色

修改针对<p>的标签规则 段落内的行间距增大,但列表项的行间距不受影响。

修改列表项的行间距 列表项的行 间距增大

添加粗体 (标签<strong>) 选中文本,a)面板 属性>>HTML>>粗体,b)亦可菜单 插入>>HTML>>文本对象>>粗体,c)亦可面板 插入>>文本>>粗体(注:后两种方式可以添加更多的标签)

新建复合内容CSS规则 列表内的粗体呈现蓝色,列表外的粗体颜色不变。

针对超链接的复合内容规则名称 a:link a:visited a:hover a:active 超链接尚未被点击的状态 超链接被点击后的状态 a:hover 把鼠标放在超链接上但不点击它的状态 a:active 超链接被点击时的状态 此处可输入其他的名称

8. Div标签及其样式 选中文本,a)菜单 插入>>布局对象>>Div标签,b)亦可面板 插入>>常用>>插入Div标签 (注:对比P38,无法通过“属性”面板插入Div标签) 所选内容自动放入Div标签内。

设定Div标签的样式 打开网页,a)面板 CSS样式>>新建CSS规则 ,b)或者面板 属性>>CSS>>目标规则(<新CSS规则>)>>编辑规则

9. 把内部样式表转成外部样式表 在“CSS样式”面板内按下Shift键再单击以选中全部内部样式,之后单击右键快捷菜单的“移动CSS规则”命令。 亦可将CSS规则移至已有的外部样式表 移动后“CSS样式”面板及网页代码发生的变化

10. 附加(或引用)外部样式表 面板 CSS样式>>附加样式表

11. 修改CSS规则 不论内部样式还是外部样式,只需在“CSS样式”面板内双击要修改的CSS规则。 网页的左右页边距各占网页总宽度的20%

小结 为所选内容添加各种HTML标签:选中内容,菜单 插入>>布局对象(或插入>>HTML>>文本对象),或者面板 插入>>常用(或插入>>文本) 对CSS规则进行管理:首选“CSS样式”面板,其次“属性”面板的“CSS”模式 创建CSS规则 引用CSS规则 (针对外部样式表) 应用CSS规则