第 3 章 HTML 和 CSS
-
Upload
alice-rivas -
Category
Documents
-
view
94 -
download
0
description
Transcript of 第 3 章 HTML 和 CSS
![Page 1: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/1.jpg)
![Page 3: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/3.jpg)
3
主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心
本章学习内容
HTML 的文档结构 常见 HTML 标记的作用与应用 基本 CSS 选择器的用法 CSS 的实现方式 使用 CSS 进行样式设计
![Page 4: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/4.jpg)
4
主讲:陶建平 E-mail : [email protected] 华中科技大学网络与计算中心
具体要求
掌握 HTML 中标记的使用方法 会用 HTML 的标记设置颜色、文本格式和列表 理解表格、框架、表单的作用 掌握 CSS 样式表的结构 掌握在网页中添加 CSS 的方法
![Page 5: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/5.jpg)
3.1 HTML 语言基础3.1.1 HTML 简介 HTML 全称为 Hypertext Markup Language (超文件标记语言)。 HTML 不是一种编程语言,而是一种描述性的标记语言,用于描述超文本中内
容的显示方式。
HTML 中的一些基本概念: 1 .标记
1 )单标记: < 标记 >
2 )双标记: < 标记 >… 内容… </ 标记 >
2 .标记属性: < 标记 属性 1=“” 属性 2=“” …>
3 .注释语句: <!-- 注释文字 -->
![Page 6: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/6.jpg)
3.1.2 HTML 的文档结构和语法规则1.HTML 的文档结构
<html> <head>
…… </head> <body> …… </body></html>
HTML 文档标记
文档的头部标记
文档的主体标记
<title> <base> <link> <meta>
<script> <style>
![Page 7: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/7.jpg)
2.HTML 的语法规则
1 •HTML标记通常是成对使用,有一个开始标记就对应一个尾标记,尾标记只是在始标记的前面加上一个斜杠“/”表示结束。
2 •HTML标记不区分大小写。
3 •HTML标记可以嵌套,但不允许相互交叉。
4 •HTML文件一行可以写多个标记,一个标记也可以分多行书写,不用任何续行符号。
<body> <b><i> 这行文字以粗斜体显示 </i></b> </body>
<body> <b><i> 这行文字以粗斜体显示 </b></i> </body>
<font color=”#000000” face=” 宋体” > 网页设计与网站建设 </font>
<font color=”#000000” face=” 宋体” >网页设计与网站建设</font>
![Page 8: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/8.jpg)
3.1.3 文本格式标记1. 段落和换行标记
HTML 文件中的换行、回车符和空格在显示效果中是无效的。见例3-1
对例 3-1 进行段落排版。
使用格式 作 用
段落标记 <p>… 文字内容… </p> 设置文章段落的开始和结束。
换行标记… 文字内容… <br>或…文字内容… <br/>
另起一行显示文字。
空 格 一个半角空格,多个空格需多次使用。
![Page 9: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/9.jpg)
2. 标题和水平居中标记
在 HTML 中设定了 6 个标题标记,从 <h1> 到 <h6> 来分别显示不同级别的标题,
<h1> 标题的字号最大, <h6> 最小。见例3-2所示。
使用格式 作 用标题格式标记 <hn>… 文字内容… </hn> 定义文章内章节标题的显
示格式。水平居中标记 <center>… 文 字 内 容 … </
center>显示文字水平居中。
![Page 10: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/10.jpg)
3. 文字列表标记文字列表的主要作用是使图文信息有序地编列,使其条理化,并以列表的样式
显示出来。
见例3-3所示。
使用格式 作 用
无序列表标记
<ul><li> 列表项 </li><li> 列表项 </li>……</ul>
无 序 列 表 , 小 的 列 表 项 使 用<li></li> 标 记 , 放 置 在 <ul></ul>标记中间。
有序列表标记
<ol><li> 列表项 </li><li> 列表项 </li>……</ol>
有序列表,用法类似无序列表。
![Page 11: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/11.jpg)
4. 段落缩进标记
见例3-4所示。
使用格式 作用
段落缩进标记<blockquote>
… 文字内容…</blockquote>
实现文字的段落缩进,多次缩进可以叠加使用缩进标记。
![Page 12: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/12.jpg)
3.1.4 表格标记
简单的 HTML 表格由 table 标记以及一个或多个 th 、 tr 或 td 标记组成。
基本表格见例3-5所示。表格的行、列合并,见例3-6所示。
表格基本标记 使用格式 作 用table <table> 表 格 内 容 </
table>创建一个表格。
tr <tr>……</tr> 创建表格的行。td <td>……</td> 每行中的单元格,即列。th <th>……</th> 创建表头,即表格的第一行。
caption <caption>……</caption> 表格标题
![Page 13: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/13.jpg)
3.1.5 图像和多媒体标记1. 图像标记
图像在网页中是非常重要的元素, HTML 语言提供了 <img> 标记来处理图像的显示,下面介绍插入图像的格式:
<img src=”img-URL” alt=” 文字” width=”x” height=”y” border=”value” hspace=” x” vspace=” y” align=”left/right/center”> 。
网页中插入图像见例3-7所示。
2. 多媒体标记在当前位置插入其他媒体(视频、音频等)可使用 <embed></embed> 或<object></object> 标记。格式为:<embed src=”file-URL” height=”x” width=”y” hidden=”true/false” autostart=”true/false” ></embed>
![Page 14: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/14.jpg)
3.1.6 超链接标记超链接标记
<a href=“http://www.artech.cn/study/index.htm”> 我的网页 </a>
链接标记 链接地址 链接文本
结束标记1. 文字链接 <a href=“link-URL”> 链接文字 </a>
2. 图像链接 <a href=“link-URL”><img src=“ 链接图片地址” ></img></a>
3. 电子邮件链接 <a href=“mailto:E-mail 地址” > 链接邮箱 </a>
网页中插入超链接,见例3-8所示。
![Page 15: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/15.jpg)
3.1.7 框架标记
框架主要包括两个部分,一个是框架集 <frameset> ,另一个就是框架<frame> 。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。
而框架则是指在网页上定义的一个显示区域。该标记放在框架集标记之间。
框架集的应用见例3-9。
框架集框架 1
框架 2
框架 3
![Page 16: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/16.jpg)
3.2 CSS 基础3.2.1 CSS 概述
CSS ( Cascading Style Sheet ),译为层叠样式表,它是用于控制网页样式并允
许将样式信息与网页内容分离的一种标记性语言。
它的引入弥补了传统HTML 的几个缺陷:
维护困难。 标记不足。 网页文件过于臃肿。 定位困难。
![Page 17: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/17.jpg)
3.2.2 CSS 选择器CSS 语法规则由两个主要的部分构成:选择器( selector ),以及一条或多条声
明( declaration )。其格式为: selector {declaration1; declaration2; ... ;declarationN }
1. 标记选择器( Type Selectors )HTML 文件由多个不同的标记组成,而 CSS 标记选择器就是声明哪些标记采用
何种样式来显示。因此,每一个 HTML 标记的名称都可以作为相应的标记选择器的名称。
h1 { color:blue; font-size:14px}
标记选择器 声明 1 声明 2
属性 值
![Page 18: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/18.jpg)
2. 类别选择器( Class Selectors )类别选择器以一个点号显示,名称可以由用户自定义,属性和值与标记选择器
一样,也必须符合 CSS 规范。类别选择器的格式如下:.class { text-align: center; font-family: arial; }
类别选择器的应用见例3-10。
3.ID 选择器( ID Selectors ) ID 选择器可以为标有特定 id 的 HTML 元素指定样式,以“ #” 来定义。 ID
选择器的使用方法与类别选择器基本相同,不同之处在于 ID 选择器只能在页面中使用一次。 ID 选择器的格式如下:
#id { color:yellow; font-size:30px; }
ID 选择器的应用见例3-11。
![Page 19: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/19.jpg)
CSS 属性值的书写规则: 值的不同写法和单位:
– 除了英文单词 red ,我们还可以使用十六进制的颜色值 : p { color:#ff0000; }– 还可以通过两种方法使用 RGB 值:
p { color:rgb(255,0,0); }
p { color:rgb(100%,0%,0%); } 如果值为若干单词,则要给值加引号: p { font-family: "sans serif"; } 多重声明:
p { text-align:center; color:black; font-family:arial; }
为增强样式定义的可读性,可在每行只描述一个属性: p {
text-align:center;
color:black;
font-family:arial;
}
当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。
![Page 20: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/20.jpg)
3.2.3 CSS 在网页中的使用方法1. 内嵌样式
内嵌样式是直接在 HTML 的标记中使用 style 属性,并将 CSS代码写在属性中。当样式仅需要在一个元素上应用一次时,可使用内嵌样式。
CSS 的内嵌样式,见例3-12。
2. 内部样式表 (Internal Style Sheet)内部样式表是将 CSS 写在 HTML 文档的 <head> 和 </head> 之间,并且用
<style></style> 标记进行声明,它只对所在的页面有效。 CSS 的内部样式表,见例3-13。
3. 外部样式表 (External Style Sheet)如果很多网页需要用到同样的样式,可以将样式写在一个以 .css 为后缀的 CSS 文件里,然
后在每个需要用到这些样式的网页里引用这个 CSS 文件。外部样式表调用方法有 2 种:1 )链接式
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
链接外部样式表,见例3-14。
![Page 21: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/21.jpg)
2 )导入式导入样式表与链接样式表的功能基本相同,只是语法和运作方式上略有区别:
<head>
<style type=“text/css”>
<!--
@import url(mystyle.css);
-->
</style>
</head>
除了上面的写法外,还可以采用以下几种写法:@import url(“mystyle.css”);
@import url(‘mystyle.css’);
@import mystyle.css;
@import “mystyle.css”;
@import ‘mystyle.css’;
4. 各种方式的优先级1 )内嵌样式 > 内部样式 >外部样式;2 )外部样式中,出现在后面的优先级高于出现在前面的。
两种方式的区别:• import导入方式的样式表,在 HTML 文件初
始化时,会被导入文件内,作为文件的一部分,类似内部样式的效果;
• link 链接方式:在 HTML 的标记需要格式时才以链接的方式引入。
![Page 22: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/22.jpg)
3.2.4 用 CSS 设置文本样式
字体样式: font | color | font-family | font-size | font-style | font-weight |text-decoration | text-underline-position | text-shadow | font-variant | text-transform | line-height | letter-spacing | word-spacing |……
文本样式: vertical-align | text-align | layout-flow | writing-modedirection | word-break | line-break | white-space | text-autospace | text-kashida-space | text-justify | ime-mode | layout-grid | layout-grid-char | layout-grid-char-spacing | layout-grid-line |……
CSS 中文本和字体的属性值繁多,这里就不一一累述,请查阅 CSS2.0 样式表手册,或登录以下网址学习:
1.Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
W3C Recommendation 07 June 2011
http://www.w3.org/TR/2011/REC-CSS2-20110607/
2. 在线 CSS3.4.0 中文参考手册http://css.doyoe.com/
3.W3school 在线教程(包括 HTML 、 CSS 、 XHTML 和 XML ) http://www.w3school.com.cn/css/index.asp
![Page 23: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/23.jpg)
3.2.5 用 CSS 设置图像效果1. 设置图片边框
在 CSS 中,可以通过下面三个边框的属性来添加各种边框效果:• border-width : length /*边框宽度 */• border-color : color /*边框颜色 */• border-style : none | hidden | dotted | dashed | solid | double | groove | ridge |
inset | outset /*边框的线型 */
见例3-15。
2. 图文混排在 CSS 中主要通过设置图片的 float 属性来实现。 float 的取值有 3 个: none(不设置), right (图片在文字右侧)和 left (图片在文字左侧)。
见例3-16。
![Page 24: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/24.jpg)
3.2.6 CSS伪类和滤镜1. CSS伪类
在 CSS 中,伪类用于向某些选择器添加特殊的效果。 锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:a:link /*未被访问状态 */
a:visited /*已被访问状态 */
a:hover /*鼠标悬停状态 */
a:active /*活动状态 */
见例3-17。
2. CSS滤镜使用滤镜可以把可视化的效果添加到一个标准的 HTML 元素上,例如图片、文
本容器、以及其他一些对象。常用的 CSS滤镜有: Alpha:调整对象内容的透明度(整体透明度,线性渐变或放射渐变的透明度); Blru:制作对象内容的模糊效果; DropShadow: 制作对象的阴影效果; FlipH/V:水平 /垂直翻转对象内容; Glow :为对象的外边界增加光效。
![Page 25: 第 3 章 HTML 和 CSS](https://reader033.fdocuments.net/reader033/viewer/2022061423/56813113550346895d97641a/html5/thumbnails/25.jpg)
本章内容结束谢谢!