第五单元课1-3 层叠样式表.

Slides:



Advertisements
Similar presentations
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Advertisements

HyperText Markup Language
第六章 网页设计与制作基础.
HTML第一课 李 伟 HTML开发语言基础.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
动态网页制作 第1章 HTML语言1.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
XML 第05讲 使用CSS显示XML.
Css2/css3全教程 选择器 群号: 韬略课堂:何韬.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
CSS – 進階 IDIC.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
CSS简介 WEB前端三剑客之二.
CSS 徐于晉 陳政樺 陳郁蘋 黃麒錕 劉芳賓.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
第 11 章 讓版面更活潑 的 CSS.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
第 13 章 用CSS 設定 文字顏色與背景.
Ch.13 HTML網頁實作.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
XSL: Extensible Stylesheet Language
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
动态专题制作 凤凰网技术中心 应用管理部.
CHAPTER 18 CSS樣式表的動態效果.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
CSS技术 蒋玉华.
Web前端开发技术与实践 第9章:文字样式 阮晓龙 /
UI 软件 设计 页面布局(二).
大家所认为的电子商务行业有哪些途径来赚钱?
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
第4章 CSS基础 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
第13章 CSS 通过CSS可以使用更丰富、更灵活的样式,更简单地 设计出更美观的网页。同时,也让网页的设计与维护 更有效率。CSS在网页设计中的作用尤为重要,是网 页设计师必备的知识。本章首先介绍什么是CSS、CSS 的基本语法等基础知识,接着学习利用“CSS”面板 管理规则,如何在Dreamweaver中创建与应用CSS样式.
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
武汉纺织大学传媒学院 cm.wtu.edu.cn
UI 软件 设计 页面布局(一).
《网页设计与制作》.
布局大师——表格.
HTML大探索.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
CSS 一起來美化網頁吧!!.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
教师:李金双 网页制作 教师:李金双
Presentation transcript:

第五单元课1-3 层叠样式表

目标 掌握样式表的语法规则 样式表的分类: 掌握常用的样式 了解层<DIV>和<SPAN>标签 行内样式表 内嵌样式表 外部样式表 掌握常用的样式 了解层<DIV>和<SPAN>标签

DHTML 是制作动态 HTML 页面的技术! 层叠样式表 CSS 脚本语言 JavaScript = + + 讲解要点: 引入话题:如果一个城市的天气气候每天一成不变,都是夏天或冬天,这样好吗? 引导:学生可能会说四季如春,当然好啊,引导:天气气候应该动态变化,“四季分明”, 这才适合自然界生物的生长,我们的网页也是如此,样式不能一成不变,应给人一种鲜活的动态感受,吸引浏览者。 1.使用DHTML的目的是实现动态网页,使网页产生一些动态效果, 演示动态效果:参见TG6-Source文件夹中“超链接变色”和“超链接背景切换” 用例 1)超链接变色:鼠标移过去超链接会变色。 2 )超链接背景切换:上机我们将做此练习,鼠标移过去,背景切换。 2.DHTML包括三部分内容: HTML、层叠样式表、脚本语言 指定一个网页的元素 决定元素的大小 颜色和位置 操纵网页的元素

DHTML 的功能 在 DHTML 中,每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程 动态样式 动态内容 定 位 数据绑定 在 DHTML 中,每个元素都被视为一个对象。可以独立地对每个对象进行访问和编程 设计人员可以用 x 座标和 y 座标来指定网页元素的确切位置(绝对位置或相对位置) 设计人员可以随用户的输入或事件(如单击鼠标)而更改页面的内容 设计人员可以随着与用户的交互操作而改变文本的颜色、字体和大小 设计人员可以将选择的字体和网页一起封装 Web 程序员可以编写脚本以更改网页的样式和内容 设计人员可以将网页中的表格绑定到数据库 后面一页幻灯片演示效果 可下载字体 脚 本 对象结构

DHTML 示例 闪烁文本 移动文本 消隐文本 还可以演示:动态脚本效果,参见参见TG6-Source文件夹中“动态脚本” 用例 告诉学员:这就是依靠JavaScript实现的动态效果, JavaScript 我们后面会讲解。

什么是样式? <HTML> <HEAD> <TITLE>设置属性</TITLE> <BODY> <P style = "color:red;font-size:30px;font-family:隶书;"> 这个段落应用了样式 <P>这个段落按默认样式显示 </BODY> </HTML> 指定显示样式 样式规则 提问:我们以前学习的<P>标段落标签显示时是什么颜色? 回答:毫无疑问,黑色。 告诉学员: 1)如果把网页内容比喻为一个女孩的话,样式就好比这位女孩穿的衣服。 女孩喜欢用漂亮的衣装来打扮自己,同样,我们的网页也需要华丽的样式来包装。 2)<P><H1>等标签都是默认为黑色白底,如果希望改变这些默认效果,就必须自定义新的样式。 演示:参考TG6-Source文件夹中的”什么是样式“用例。

常用的样式属性 属 性 CSS名称 说 明 颜色 color 文本属性 font-size 字体大小 font-family 字体 text-align 文本对齐 边框属性 (用于表 单元素) border-style 边框样式 border-width 边框宽度 border-color 边框颜色 定位属性(position) top 顶部边距(上边距) left 左边距 width 宽度 height 高度 z-index z 轴索引号,用于层 重点提一下:文本属性、边框属性(后面的幻灯片讲”细边框样式时“会用到)。

在最后一个声明后面加上一个分号 (;) 是一个好习惯 样式的分类 根据样式代码的位置,分为三类: 行内样式 内嵌样式 外部样式 在最后一个声明后面加上一个分号 (;) 是一个好习惯

您如果希望某段文字和其他段落的文字显示风格不一样,那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。 /*--关键代码--*/ <p>剩余时间:成交结束<BR> 新旧程度:全新 <BR> 所 在 地:北京 <BR> 宝贝数量:5 件 <BR> 浏 览 量:220 次</p> <p style=“color:#FF00FF; font-family:隶书; font- weight:bold; font-size:24px"> 另送价值50元的充电器套装!(一个充电器,两节充电电池)可使用半年以 </p> 讲解要点: 1)强调什么场合用:希望某段文字和其他段落的文字显示风格不一样,那么请采用“行内样式”。 2)强调如何用:在HTML标签后面直接加上 ”style“属性即可,除了<P>以外,其他标签用法也是如此。 演示:参考TG6-Source文件夹中的”行内样式“用例。

行内样式表局限于某个标签,如果希望本网页内的所以同类标签都采用统一样式,这时应采用内嵌样式。 内嵌样式-1 <HTML> <HEAD> <TITLE>应用样式</TITLE> <STYLE TYPE="text/css" > P { font-size:20px; color:blue; text-align:center } </STYLE> </HEAD> <BODY> <P>我是段落 1</P> <P>我是段落 2</P> <P>我是段落 3</P> <P>我们的样式绝对统一</P> </BODY> </HTML> 行内样式表局限于某个标签,如果希望本网页内的所以同类标签都采用统一样式,这时应采用内嵌样式。 样式表 选择器 样式规则 用分号隔开 提问:我们刚才的行内样式表可以让个别段落与众不同,但是有缺陷: 如果我们希望所有的段落都采用统一的样式呢? 引导:在每个<P>标签后都加上相同的样式代码,太麻烦了。怎么办? 很简单,把统一的样式放在<HEAD>标签内,让本网页的所有段落<P>标签共享同一样式。 这就是我们要讲的内嵌样式表。 告诉学员: 1)选择器:表明此样式作用于哪个HTML标签。 2)样式规则之间用分号分割开 3)定好样式后,它将对本网页内所有的同类标签(如<P>)起作用。 演示:参考TG6-Source文件夹中的”什么是内嵌样式“用例。 所有的段落都采用 P 样式,保证样式统一

内嵌样式-2 选择器 根据选择器的不同,内嵌样式又分为: HTML 选择器 CLASS 类选择器 ID 选择器

内嵌样式-3 HTML选择器 HTML选择器 应用H2样式 应用P样式 /*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式:字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; </STYLE> </HEAD> <BODY> <H2>品种特征方面:</H2> <P>   1、蛋鱼:蛋鱼…….。</P> <P>   2、龙睛:龙睛……..。</P> <P>   3、高头:高头….。</P> HTML选择器 讲解要点: 1)先演示:参考TG6-Source文件夹中的”HTML选择器“用例。 2)指出: 品种特征-<H2> 下面的三段都是段落<P>, 3)提问:我们应该采用哪些标签的样式呢? 4)回答:显然是<H2>和<P>标签。 5)讲解关键代码,也可以打开源文件讲解。 应用H2样式 应用P样式

内嵌样式-4 class类选择器 .myinput CLASS类选择器 应用类选择器: class=”类名“ <HEAD> <STYLE type="text/css"> .myinput { border: 1px solid; border-color:#D4BFFF; color:#2A00FF } </STYLE> </HEAD> <BODY> <FORM > <P>用户名 <INPUT name="textfield" type="text" class="myinput"></P> <P>密  码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> CLASS类选择器 类选择器的定义格式为: .类名 { …样式规则; } 应用类选择器: class=”类名“ 提问: 1)实现如图所示的细边框效果,我们想想能不能用HTML选择器。 文本框和密码框对应的标签都是<INPUT>标签。 2)引导:确实是可以的,但是我们的按钮对应的HTML标签也是<INPUT>, 这样按钮也会变成细边框了,所以不行,怎么办,采用类样式,引出类样式。 3) 提问:哪我们一起看看,应该涉及到哪些样式呢? 4)引导:前面我们讲过的边框样式,边框颜色,字体的颜色就可以了,然后给出源代码。 讲解要点: 1)类选择器的定义格式,border: 1px solid; 表示边框为实线,粗细为1 px 2)如何应用 3)类选择器可以让网页设计者选择性的应用,大家注意:两个按钮没有应用类样式, 所以没受影响,从而实现了我们的要求。 4)演示:参考TG6-Source文件夹中的”类选择器“用例。

内嵌样式-5 ID选择器 <HEAD> <STYLE TYPE="text/css"> #fire { color:red; font-size: 24px; } </STYLE> </HEAD> <BODY> <H2 ID="fire">我是二级标题,火是这样的</H2> <P ID ="fire">我是段落,火是这样的</P> </BODY> ID选择器 ID选择器的定义格式为: #ID名 { …样式规则; } 告诉学员: 由于ID选择器的功能与CLASS选择器一样,并且有时容易与HTML标签的“ID“属性相冲突,所以一般不推荐使用。 应用ID选择器:ID=”ID名“

特殊的伪类:A代表超链接,hover代表鼠标悬停 内嵌样式-6 特殊的选择器 <HEAD> <STYLE type="text/css"> A { /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰:无*/ } A:hover {/*鼠标在超链接上方停留时,带下划线 */ color: red; text-decoration:underline; /*文本修饰:下划线*/ </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接,移过来我就显示下划线</A> </BODY> </HTML> HTML选择器 特殊的伪类:A代表超链接,hover代表鼠标悬停 讲解要点: 1)伪类的定义格式,HTML标签:某个动作 { 样式 },如本例,A:hover{ … } 2)当对应的HTML标签发生了这个动作,样式就会起作用。 如本例:当鼠标停留在超链接的上方时,指定的样式起作用,所以颜色变红,并带下划线,该例将会在后续章节使用。 3)告诉学员,这些伪类选择器只需了解,都是一些固定的用法,可以从网上查找别的一些用法。 4)演示:参考TG6-Source文件夹中的”伪类选择器“用例。

外部样式 根据样式文件与网页的关联方式又分为: 链接(LINK )外部样式表 导入(import)外部样式表 样式文件 P { ….. } 提问学员: 1)行内样式表什么场合用? 2)内嵌样式表什么场合用?有什么好处? 3)既然内嵌样式可以使一张网页内的同类标签共享同一样式, 如果希望网站的所有网页都共享同一样式呢?怎么办? 4)引导:模仿我们的C语言中的头文件,我们可以把样式单独提取来,放在一个单独的文件, 然后和每张网页关联不就可以了吗 。引出外部样式表。 网页1 网页2 网页3

链接外部样式表 演示:链接样式表示例 使用LINK(链接)标签 ,语法: <HEAD> <LINK rel = “stylesheet” type = ”text/css” href = ”样式表文件.css” > </HEAD> 第一步:创建样式表文件newstyle.css 样式文件: newstyle.css P { ….. } 第二步:把样式文件和网页关联 第三步:浏览查看各网页 讲解要点: 1)先讲解链接外部样式表的语法 2)然后讲解步骤 3)按上述步骤演示:参考TG6-Source文件夹中的”链接样式表“用例。 Onel.htm another.htm 演示:链接样式表示例

导入外部样式表 使用@import导入 ,语法: <HEAD> <STYLE TYPE="text/css"> @ import 样式表文件.css; </STYLE> </HEAD> 操作步骤同链接样式表 告诉学员: 1 ) 操作步骤同链接样式表。 2) 导入和链接两种方式功能一样,没什么大的区别,掌握其中一种就行。

样式的混合使用 外部样式文件 内嵌样式 行内样式表、内嵌样式表、外部样式表各有优势,实际的开发中常常 需要混合使用: 有关整个网站统一风格的样式代码,放置在独立的样式文件*.css 某些样式不同的页面,除了链接外部样式文件,还需定义内嵌样式 某张网页内,部分内容”与众不同“,采用行内样式 外部样式文件 对于某个HTML标签: 1)如果有多种样式,如果规定的样式没有冲突,则叠加; 2)如果有冲突,则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示,如果还没有,最后采用外面样式表显示,否则就按HTML的默认样式显示; 内嵌样式 行内样式 告诉学员: 对于某个HTML标签: 1)如果有多种样式,如果规定的样式没有冲突,则叠加。 例如,行内样式指定字体,而内嵌样式指定颜色,外部样式指定大小,则三种样式综合即可。 2)如果有冲突(例如都指定字体大小),则最先考虑行内样式表显示,如果没有,再考虑内嵌样式显示, 如果还没有,最后采用外面样式表显示,否则就按HTML的默认样式显示。 3)演示示例:参考TG6-Source文件夹中的”样式混合使用“用例,同时使用了外部样式和行内样式。 某个HTML标签

<DIV>是块级容器标签,可以包含图片、标题、段落、文字等 …关键代码… <DIV id="Layer1" style="position:absolute; left:149px; top:110px; width:357px; height:87px; z-index:1; " > <IMG src="talk.gif" width="91" height="76"> <P>Z-index=1,我是第一层,我是容器,包含图片段落</P> </DIV> <DIV id="Layer2" style=“….; z-index:2; …."> <IMG src="bbs_logo.gif" width="101" height="43"> <P>Z-index=2,我是第二层,包含图片和段落 </P> </DIV>… 图片 段落 top left 使用 Z - index指定是哪一层 讲解要点: 1)<DIV>也称为层标签,表示一层区域。语法为: <DIV id=“层编号” style=“postion:…指定层所在的位置…;z-index=n (指定在Z轴方向的编号)” > ….包含的内容 </DIV> 2)<DIV>是容器标签,它可以包括(容纳)段落<P>、标题<H1>、图片<IMG>、文字等内容,如图所示。 所以还称为块级容器标签。 3)告诉学员,层的位置了解,因为实际设计页面时需要DreamWeaver插入层(可演示如何插入),强调z-index的含义 <DIV>是块级容器标签,可以包含图片、标题、段落、文字等

<SPAN>是行级容器标签,不可以包含图片、标题、段落等,只能包含文字内容 <HTML> <BODY> <H2>所有韩款童装<SPAN style=“color:#FF66FF; font- size:50px;”>10</SPAN>元/件起拍喽 </H2> <IMG src="show.gif" width="360" height="195"><BR> </BODY> </HTML> <SPAN>是行级容器标签,不可以包含图片、标题、段落等,只能包含文字内容 讲解要点: 1)<SPAN>是一个行内元素,它不能包含段落、标题、表格等,显示时也不会引起换行。 最常见的使用方式是嵌入在某个标签中,突出显示某部分文本,甚至某个字符。 例如,文本内容“<H2>所有韩款童装10元/件起拍<H2>”中, 我们希望突出显示客户关心的价格数字“10”,就可以<H2>标签中插入<SPAN>,单独修饰”10”。 2)告诉学员:关于SPAN的样式只需了解,一般也通过DreamWeaver来辅助设计。

CSS 的优点 改变浏览器的默认显示风格 页面内容和显示样式分离 可以重用样式表 方便网站维护

总结 DHTML 是网页中 HTML、样式表和脚本的组合应用程序,增强网页的交互性 样式分为行内样式、内嵌样式、外部样式 样式表包括选择器和样式规则,选择器又分为HTML选择器、类选择器、ID选择器以及特殊的伪类 <DIV>和<SPAN>都是容器标签,<DIV>是块级标签,可包含段落、标题等,<SPAN>是行级标签,不能包含段落、标题等,只能包含部分文字