第 3 章 HTML 和 CSS

第3章 HTML和CSS 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

本章学习内容 • HTML的文档结构 • 常见HTML标记的作用与应用 • 基本CSS选择器的用法 • CSS的实现方式 • 使用CSS进行样式设计主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

具体要求 • 掌握HTML中标记的使用方法 • 会用HTML的标记设置颜色、文本格式和列表 • 理解表格、框架、表单的作用 • 掌握CSS样式表的结构 • 掌握在网页中添加CSS的方法主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心

3.1 HTML语言基础 3.1.1 HTML简介 • HTML全称为Hypertext Markup Language（超文件标记语言）。 • HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。 HTML中的一些基本概念： 1．标记 1）单标记：<标记> 2）双标记：<标记>…内容…</标记> 2．标记属性：<标记属性1=“” 属性2=“” …> 3．注释语句：

3.1.2 HTML的文档结构和语法规则 1.HTML的文档结构 • <title> • <base> • <link> • <meta> • <script> • <style> <html> <head> …… </head> <body> …… </body> </html> 文档的头部标记 HTML文档标记文档的主体标记

2.HTML的语法规则 <body> <b><i>这行文字以粗斜体显示</b></i>  </body> <body> <b><i>这行文字以粗斜体显示</i></b>  </body> <font color=”#000000” face=”宋体”>网页设计与网站建设</font>  <font color=”#000000” face=”宋体”> 网页设计与网站建设 </font> 

3.1.3 文本格式标记 1. 段落和换行标记 HTML文件中的换行、回车符和空格在显示效果中是无效的。见例3-1 对例3-1进行段落排版。

2.标题和水平居中标记 在HTML中设定了6个标题标记，从<h1>到<h6>来分别显示不同级别的标题， <h1>标题的字号最大，<h6>最小。见例3-2所示。

3.文字列表标记 文字列表的主要作用是使图文信息有序地编列，使其条理化，并以列表的样式显示出来。见例3-3所示。

4.段落缩进标记 见例3-4所示。

3.1.4 表格标记 简单的 HTML 表格由 table标记以及一个或多个 th、tr或 td 标记组成。基本表格见例3-5所示。表格的行、列合并，见例3-6所示。

3.1.5 图像和多媒体标记 1. 图像标记图像在网页中是非常重要的元素，HTML语言提供了<img>标记来处理图像的显示，下面介绍插入图像的格式： <imgsrc=”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>

3.1.6 超链接标记 超链接标记链接标记链接文本链接地址 <a href=“http://www.artech.cn/study/index.htm”>我的网页</a> 结束标记 1.文字链接 <a href=“link-URL”>链接文字</a> 2.图像链接 <a href=“link-URL”><imgsrc=“链接图片地址”></img></a> 3.电子邮件链接 <a href=“mailto:E-mail地址”>链接邮箱</a> 网页中插入超链接，见例3-8所示。

3.1.7 框架标记 框架主要包括两个部分，一个是框架集<frameset>，另一个就是框架<frame>。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。而框架则是指在网页上定义的一个显示区域。该标记放在框架集标记之间。框架集的应用见例3-9。框架集框架1 框架2 框架3

3.2 CSS基础 3.2.1 CSS概述 CSS（Cascading Style Sheet），译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它的引入弥补了传统HTML的几个缺陷： • 维护困难。 • 标记不足。 • 网页文件过于臃肿。 • 定位困难。

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 标记选择器

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。

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 时也要写百分比符号。

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。

2）导入式 导入样式表与链接样式表的功能基本相同，只是语法和运作方式上略有区别： <head> <style type=“text/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的标记需要格式时才以链接的方式引入。

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。

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 ：为对象的外边界增加光效。

本章内容结束 谢谢！

第 3 章 HTML 和 CSS