主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 第3章 HTML和CSS 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心
主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 本章学习内容 HTML的文档结构 常见HTML标记的作用与应用 基本CSS选择器的用法 CSS的实现方式 使用CSS进行样式设计 3 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心
主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心 具体要求 掌握HTML中标记的使用方法 会用HTML的标记设置颜色、文本格式和列表 理解表格、框架、表单的作用 掌握CSS样式表的结构 掌握在网页中添加CSS的方法 4 主讲：陶建平 E-mail：alextao777@163.com 华中科技大学网络与计算中心
3.1 HTML语言基础 3.1.1 HTML简介 HTML中的一些基本概念： 1．标记 HTML全称为Hypertext Markup Language（超文件标记语言）。 HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。 HTML中的一些基本概念： 1．标记 1）单标记：<标记> 2）双标记：<标记>…内容…</标记> 2．标记属性：<标记 属性1=“” 属性2=“” …> 3．注释语句：<!--注释文字-->
3.1.2 HTML的文档结构和语法规则 <html> <head> …… </head> <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. 段落和换行标记 见例3-1 对例3-1进行段落排版。 HTML文件中的换行、回车符和空格在显示效果中是无效的。 见例3-1 对例3-1进行段落排版。 使用格式 作 用 段落标记 <p>…文字内容…</p> 设置文章段落的开始和结束。 换行标记 …文字内容…<br> 或…文字内容…<br/> 另起一行显示文字。 空 格 一个半角空格，多个空格需多次使用。
2.标题和水平居中标记 在HTML中设定了6个标题标记，从<h1>到<h6>来分别显示不同级别的标题， 使用格式 作 用 标题格式标记 <hn>…文字内容…</hn> 定义文章内章节标题的显示格式。 水平居中标记 <center>…文字内容…</center> 显示文字水平居中。
3.文字列表标记 文字列表的主要作用是使图文信息有序地编列，使其条理化，并以列表的样式 显示出来。 见例3-3所示。 使用格式 作 用 作 用 无序列表标记 <ul> <li>列表项</li> …… </ul> 无序列表，小的列表项使用<li></li>标记，放置在<ul></ul>标记中间。 有序列表标记 <ol> </ol> 有序列表，用法类似无序列表。
4.段落缩进标记 见例3-4所示。 使用格式 作用 段落缩进标记 <blockquote> …文字内容… 实现文字的段落缩进，多次缩进可以叠加使用缩进标记。
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> 表格标题
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>
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所示。
3.1.7 框架标记 框架主要包括两个部分，一个是框架集<frameset>，另一个就是框架<frame>。框架集定义了在一个窗口中显示的框架数、框架的尺寸、载入到框架的网页等。 而框架则是指在网页上定义的一个显示区域。该标记放在框架集标记之间。 框架集的应用见例3-9。 框架集 框架1 框架2 框架3
3.2 CSS基础 3.2.1 CSS概述 它的引入弥补了传统HTML的几个缺陷： CSS（Cascading Style Sheet），译为层叠样式表，它是用于控制网页样式并允 许将样式信息与网页内容分离的一种标记性语言。 它的引入弥补了传统HTML的几个缺陷： 维护困难。 标记不足。 网页文件过于臃肿。 定位困难。
h1 { color:blue; font-size:14px} 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 标记选择器
.class { text-align: center; font-family: arial; } 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属性值的书写规则： 值的不同写法和单位： p { color:#ff0000; } p { color:rgb(255,0,0); } 除了英文单词 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.内嵌样式 2. 内部样式表(Internal Style Sheet) 内嵌样式是直接在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。
4. 各种方式的优先级 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的标记需要格式时才以链接的方式引入。
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
3.2.5 用CSS设置图像效果 1. 设置图片边框 2. 图文混排 在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伪类 2. CSS滤镜 在CSS中，伪类用于向某些选择器添加特殊的效果。 锚伪类 a:link /*未被访问状态*/ a:visited /*已被访问状态*/ a:hover /*鼠标悬停状态*/ a:active /*活动状态*/ 见例3-17。 2. CSS滤镜 使用滤镜可以把可视化的效果添加到一个标准的HTML元素上，例如图片、文 本容器、以及其他一些对象。常用的CSS滤镜有： Alpha：调整对象内容的透明度（整体透明度，线性渐变或放射渐变的透明度）； Blru：制作对象内容的模糊效果； DropShadow： 制作对象的阴影效果； FlipH/V：水平/垂直翻转对象内容； Glow ：为对象的外边界增加光效。
本章内容结束 谢谢！