您的位置：首页 > Web前端 > CSS

CSS/HTML网页设计

2007-03-28 00:30 483 查看

第一部分 HTML 语法

第一章认识HTML
HTML的英文全名为HyperText Makeup Language,译为超文标记语言。

第二章 HTML的基本概念
文件注释标记
<TITLE>标记的使用
例：
<title>文件标题文字</title>

第三章文字版面的编辑

3-1 版面控制标记

3-1-1 取消文字换行标记<NOBR>
在不同大小的浏览器窗口中，每行所显示的方案及段落也将有所不同。若要取消方案因窗口大小而产生的换行，就可以使用<NOBR>标记。
例：
<nobr>
ＩＢＭＬｏｔｕｓ教育培训是一个系统工程。主要通过ＬＡＥＣ即ＩＢＭＬｏｔｕｓ授权教育中心，ＣＬＥＣ即ＣＬＥ教育中心、Ｎｏｔｅｓ大学等来为广大ＬｏｔｕｓＤｏｍｉｎｏ／Ｎｏｔｅｓ（包括相关知识管理产品）用户及爱好者进行系列培训，以更好服务社会。
</nobr>

3-1-2 换行标记<BR>
例：
清平调<BR>
云想衣裳花想容，<BR>
春风拂槛露华浓，<BR>

3-1-3 段落标记<P>
由<P>标记所标识的文字，代表同一个段落的文字。
例：
<P>文字</P>

3-1-4 保留原始排版方式标记<PRE>
要将HTML文件中的文字编排方式，通过浏览器显示时，保留原始的文件排版方式，只需在该文章前加入<PRE>标记，即可使浏览显示文件原始排版方式。
<PRE>
清平调
云想衣裳花想容，
春风拂槛露华浓，
</PRE>

3-1-5 水平分隔线标记<HR>
属性功能
size 水平线的粗细，以pixe1为单位表示。
width 水平线的宽度，以pixe1为单位表示。
Align 水平线的对齐方式
color 水平线的颜色
Noshade 不显示3D阴影

3-1-6 空格符号

3-1-7 居中对齐标记<CENTER>
<CENTER>
清平调<BR>
云想衣裳花想容，<BR>
春风拂槛露华浓，<BR>
</CENTER>

3-2 标题文字的建立
3-2-1 标题文字标记 <Hn>
格式：<H1>标题1</H1>
<H2>标题2</H2>
…
<H6>标题2</H6>

上标 <sup></sup>
下标 <sub></sub>

3-3-4 特殊符号的表示方法

---------------------------------
符号 HTML表示方法
---------------------------------
< <
---------------------------------
> >
---------------------------------
& &
---------------------------------
" "
---------------------------------

第五章表格的建立

5-2-3 内框宽度----cellspacing

5-2-4 表格内方案与框距离----cellpadding

5-4-4 行的文字水平对齐方式---ALIGN

5-4-5 行的文字垂直对齐方式---VALIGN

5-5-5 水平延伸单元格---COLSPAN

5-5-6 垂直延伸单元格---ROWSPAN

第七章建立超级链接

7-1 相对路径与绝对路径
“.” ---代表目前所在的目录
“..”---代表上一层目录
“/” ---用与链接路径中各目录名称

例：相对：./image/sea.gif = image/sea.gif
绝对：/ch7/image/sea.gif

7-3 超链接到其它位置的设置
7-3-1 通过http 协定
<HTML>
<HEAD>
<TITLE>透过http通讯协定连结</TITLE>
</HEAD>
<BODY Text=Navy>

按下<A href="http://www.railway.gov.tw">
查询火车时刻</A>超连结後，<P>
将连结到台湾铁路管理局。<P>

</BODY>
</HTML>

7-3-2 通过ftp 协定
<HTML>
<HEAD>
<TITLE>透过ftp通讯协定连结</TITLE>
</HEAD>
<BODY Text=Navy>

按下<A href="ftp://ftp.nsysu.edu.tw">
中山大学</A>超连结後，<P>
将连结到中山大学的FTP站。<P>

</BODY>
</HTML>

7-3-3 通过telnet链接
<HTML>
<HEAD>
<TITLE>透过Telnet通讯协定连结</TITLE>
</HEAD>
<BODY Text=Navy>

按下<A href="telnet://bbs.iie.ncku.edu.tw">
成大资工</A>超连结後，<P>
将透过telnet连结到成大资工的BBS站。<P>

</BODY>
</HTML>

第八章窗口框架的建立
8-1-2 窗口框架的基本结构
框架的基本结构,主要是利用<Frameset>标记与<Frame>标记来定义。其中<Frameset>用于定义一个窗口框架组件，而<Frame>则用于定义框架中的子窗口组件。语法如下：

<frameset>
<frame>
<frame>
…
</frameset>

*注意：<frameset>不可包含在<BODY>标记中，否则<frameset>将无法使用。

8-2-1 窗口的水平分割---ROWS
<frameset rows="100,200,*">
<frame>
<frame>
…
</frameset>

<frameset rows="20%,50%,*">
<frame>
<frame>
…
</frameset>

8-2-2 窗口的垂直分割---COLS

例ch8_3.htm 数值设置
<HTML>
<Frameset cols="100, 180, *">
<Frame>
<Frame>
<Frame>
</Frameset>
</HTML>

例ch8_4.htm 百分比设置
<HTML>
<Frameset cols="30%, 30%,*">
<Frame>
<Frame>
<Frame>
</Frameset>
</HTML>

8-2-3 窗口框架的高级设计

例ch8_5.htm 建立嵌套窗口框架
<HTML>
<Frameset rows="30%,*">
<Frame>
<Frameset cols="60%,*">
<Frame>
<Frame>
</Frameset>
</Frameset>
</HTML>

8-2-5 框架的隐藏---FRAMEBORDER
<frameset frameborder=0 或 1>
0代表不显示框线，1代表显示框线，其默认值为1.
例ch8_9.htm 建立嵌套窗口框架
<HTML>
<Frameset cols="30%,40%,*" frameborder=0>
<Frame src="../ch8/ch8_7_1.htm">
<Frame src="../ch8/ch8_7_2.htm">
<Frame src="../ch8/ch8_7_3.htm">
</Frameset>
</HTML>

8-3 子窗口的设置
8-3-1 指定子窗口显示网页---SRC
<Frame src="../ch8/ch8_7_1.htm">

8-3-2 定义子窗口名称---NAME
<Frame name="子窗口名称">
例ch8_8.htm
<HTML>
<Frameset cols="30%,40%,*">
<Frame src="../ch8/ch8_7_1.htm" name="left">
<Frame src="../ch8/ch8_7_2.htm" name="center">
<Frame src="../ch8/ch8_7_3.htm" name="right">
</Frameset>
</HTML>

8-3-3 控制框架流动条---SCROLLING
例ch8_10.htm
<HTML>
<Frameset rows="60%, 30%,*">
<Frame Scrolling =yes>
<Frame Scrolling =no>
<Frame Scrolling =auto>
</Frameset>
</HTML>

8-3-4 子窗口大小的调整---NoResize
希望用户不能随意更改子窗口大小，可设置NoResize
<Frame NoResize src="../ch8/ch8_7_3.htm">

8-4 超链接TARGET属性与框架的应用
8-4-1 网页显示子窗口---TARGET属性
建立一个超链接，当用户单击此超链接时，将在名为main的子窗口中，显示ch8_7_1.htm,语法如下：
<a href="ch8_7_1.htm" target="main">第一个超链接</a>

例ch8_11.htm
<HTML>
<HEAD>
<TITLE>建构整个窗口的框架</TITLE>
</HEAD>
<Frameset cols="30%, *">
<Frame src="ch8_11_1.htm" name="menu">
<Frame src="ch8_7_1.htm" name="main">
</Frameset>
</HTML>

例ch8_11_1.htm
<HTML>
<HEAD>
<TITLE>ch8_12.htm子窗口显示的网页</TITLE>
</HEAD>
<BODY>
<P><A Href="ch8_7_1.htm" target="main">第一个超级链接</A></P>
<P><A Href="ch8_7_2.htm" target="main">第二个超级链接</A></P>
<P><A Href="ch8_7_3.htm" target="main">第三个超级链接</A></P>
</BODY>
</HTML>

设置在上一层框架显示网页
例： ch8_13.htm 和 ch8_13_1.htm、 ch8_13_2.htm 、ch8_13_3.htm 、ch8_13_4.htm

第九章 APPLET、网页动态更新与多媒体

9-1-1 在网页中引用Applet
Applet组件
<applet code="applet文件名" height=单位像素 width=单位像素>
<param name="属性名称" value="属性值">
<param name="属性名称" value="属性值">
……
</Applet>

例ch9_1.htm
<HTML>
<HEAD>
<TITLE>Applet组件的使用</TITLE>
</HEAD>

<BODY>
<CENTER><FONT COLOR=BLUE SIZE=5>Applet组件的使用</FONT>
<BR><HR><BR>
<Applet code="signboard.class" height=40 width=700>
<param name="message" value="大家好！我是于欣芸, 欢迎光临我的网站">
<param name="msecond" value="200">
<param name="bgcolor" value="red">
<param name="fontcolor" value="white">
<param name="fontsize" value="30">
</Applet>
</CENTER>
</BODY>
</HTML>
--------
|程序说明|
--------
------------------------------------------------------------------------------------------
| 参数名称 | 说明 |
------------------------------------------------------------------------------------------
| message | 显示于Applet组件的信息 |
-------------------------------------------------------------------------------------------
| msecond | 指定Applet组件显示信息的延迟 |
-------------------------------------------------------------------------------------------
| bgcolor | Applet组件的背景颜色。可使用的颜色设置值有white/black/blue/cyan/darkGray|
| | gray/green/lightGray/magenta/orange/pink/red/yellow |
-------------------------------------------------------------------------------------------
| fontcolor | Applet组件中显示文字颜色。可使用的颜色设置值有white/black/blue/cyan/ |
| | darkGray/gray/green/lightGray/magenta/orange/pink/red/yellow |
-------------------------------------------------------------------------------------------
| fontsize | Applet组件的显示文字大小。 |
-------------------------------------------------------------------------------------------

9-2 网页动态更新
按指定的几秒后，自动更新所显示的网页网址。语法如下：
<META http-equiv="refresh" content="秒数; URL=文件名称或网址">
*注：<META>标记必须放在<HEAD>标记中

9-3 多媒体网页

9-3-1 多媒体网页的制作简介

9-3-2 音乐文件的播放（.au .mid .wav）
例：ch9_4.htm
<HTML>
<HEAD>
<TITLE>网页音乐的播放</TITLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER>
<FONT COLOR=BLUE SIZE=5>
网页音乐的播放</FONT>
<BR><HR><BR>
当您单击
<A HREF="sweet.wav">甜美音乐</A> 
时，将自动打开Windows Media Player窗口并播放音乐
</CENTER>
</BODY>
</HTML>

9-3-3 影像文件的播放(.mov .mpg .avi)
例：ch9_5.htm
<HTML>
<HEAD>
<TITLE>网页电影的放映</TITLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER>
<FONT COLOR=BLUE SIZE=5>
网页电影的放映</FONT>
<BR><HR><BR>
当您单击
<A HREF="traffic.avi">本市交通</A>
时，将自动打开Windows Media Player窗口并播放短片
</CENTER>
</BODY>
</HTML>

---------------
|将影像嵌入网页|
----------------
要直接将影像嵌入网页，您可以利用<EMBED>标记，语法如下：
<EMBED SRC="影像文件的名称" WIDTH=像素 HEIGHT=像素 AUTOSTART=true（自动播放）/no LOOP=true（无限制重复播放，直到您离开网页或单击播放网页中的停止按纽）/no（仅播放一次）>
例：ch9_6.htm
<HTML>
<HEAD>
<TITLE>自动播放网页电影</TITLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER>
<FONT COLOR=BLUE SIZE=5>
自动播放网页电影</FONT>
<BR><HR><BR>

<EMBED SRC="traffic.avi" WIDTH=300 HEIGHT=300
AUTOSTART=TRUE LOOP=TRUE>
</CENTER>
</BODY>
</HTML>

9-3-4 音乐文件的播放
将音乐嵌入网页
方法同上
例：ch9_7.htm
<HTML>
<HEAD>
<TITLE>播放网页背景音乐</TITLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER>
<FONT COLOR=BLUE SIZE=5>
播放网页背景音乐</FONT>
<BR><HR><BR>
<EMBED SRC="sweet.wav" WIDTH=200 HEIGHT=200
AUTOSTART=TRUE LOOP=TRUE>（不限次数自动播放）
</CENTER>
</BODY>
</HTML>

9-3-5 网页背景音乐的播放
利用<bgsound>标记，语法如下：
<bgsound src="音乐文件名称" loop=次数>
*Loop属性
若设为infinite时，音乐将循环播放，直到网页关闭为止。

例：ch9_8.htm
<HTML>
<HEAD>
<TITLE>利用<BGSOUND>标签播放背景音乐</TITLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER>
<FONT COLOR=BLUE SIZE=5>
利用"BGSOUND"标签播放背景音乐</FONT>
<BR><HR><BR>
设置播放2次背景音乐后，就停止播放
<BGSOUND SRC="sweet.wav" LOOP=2>
</CENTER>
</BODY>
</HTML>

第二部分 CSS样式表

第十章认识CSS

10-1 CSS的简介

10-1-1 什么是CSS
CSS——CSS的英文全名是Cascading Style Sheet,译为层叠样式表。

10-1-2

第十一章样式表的定义与使用

11-1 直接定义标记的STYLE属性
例：ch11_1.htm
<HTML>
<HEAD>
<TITLE>使用时直接定义STYLE属性</TITLE>
</HEAD>

<BODY>
<FONT>
<P><H1 STYLE="FONT-FAMILY:楷体; COLOR:RED">
此行文字将被定义为红色楷体的字体</H1></P>
<P><H1>此行文字并不会被STYLE属性所定义</H2></P>
</BODY>
</FONT>
</HTML>

11-2 定义内部样式表
11-2-1 在HTML文件内定义样式表
<STYLE TYPE="TEXT/CSS">

</STYLE>
----------------------------------------------
程序说明
*
避免因浏览器不支持CSS语言，而导致错误。加上标记后，不支持CSS的浏览器，会自动略过此段内容。
*选择符1…选择符N
可以使用HTML标记的名称，所有HTML标记都可以作为CSS选择符。
*/*……*/
CSS注释符号

例：ch11_.htm
<HTML>
<HEAD>
<TITLE>自定义内部样式表</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY>
<FONT>
<P><H1>此行文字为红色楷体的字体</H1>
<P><H2>此行文字为蓝色华文隶书的字体</H2>
</BODY>
</FONT>
</HTML>

组合选择符
==========
<STYLE TYPE="TEXT/CSS">

</STYLE>
----------------------------------------------------------------------
程序说明
好处在于减少样式表的空间和重复设置的麻烦。
例：ch11_21.htm
<STYLE TYPE="TEXT/CSS">

</STYLE>

11-2-2 利用CLASS类选择符定义样式
<STYLE TYPE="TEXT/CSS">

</STYLE>

或者

<STYLE TYPE="TEXT/CSS">

</STYLE>
--------------------------------------------------
程序说明
o *.A1…*.AN
A1…AN为定义的类选择符名称。其适用范围是整个HTML文件中所有由CLASS类选择符所引用的设置。*符号也可以用HTML内的标记替代（标记1…标记N），范例如：Font.A1；此外*符号，在设置时也可以省略。
o 标记1.A1…标记N.AN
标记1…标记N为HTML的标记名称，即前面提过的*符号，也可以用HTML内的标记替代。

例：ch11_3.htm
<HTML>
<HEAD>
<TITLE>CLASS定义样式类的使用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY>
<FONT>
<P CLASS=A1>此行文字为红色楷体的字体</P>
<P><H1 CLASS=A1>此行文字为浏览器默认的字体样式</H1></P>
<P><H1 CLASS=A2>此行文字为蓝色华文隶书的字体样式</H1></P>
</BODY>
</FONT>
</HTML>

11-2-3 利用ID选择符定义样式
class与ID选择符定义样式的区别在于定义样式名称前的符号。用CLASS定义时为“*.样式名称”；若为ID定义时为“#样式名称”

<STYLE TYPE="TEXT/CSS">

</STYLE>

或者

<STYLE TYPE="TEXT/CSS">

</STYLE>

例：ch11_4.htm
<HTML>
<HEAD>
<TITLE>CLASS定义样式类的使用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY>
<FONT>
<P ID=A1>此行文字为红色楷体的字体</P>
<P><H1 ID=A1>此行文字为浏览器默认的字体样式</H1></P>
<P><H1 ID=A2>此行文字为蓝色华文隶书的字体样式</H1></P>
</BODY>
</FONT>
</HTML>

11-3 CSS的继承概念

11-3-1 CSS的继承性质
例：ch11_6.htm
<HTML>
<HEAD>
<TITLE>CSS的继承性质</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER CLASS=TEXT>
欢迎光临<I>位元文化</I>欢迎光临
<BR><BR>
<IMG SRC="logo.gif">
</CENTER>
</BODY>
</FONT>
</HTML>

11-3-2 上下文选择符
根据上下文选择符之间的关系，决定在该网页上显示哪一种样式。

H1 {COLOR:RED}
EM {COLOR:GREEN}
若想将上述两浏览器的设置组合成字号为1级、斜体的蓝色字，则可写成如下的语名：

H1 EM {COLOR:BLUE}

使用：
<H1><EM>文件内容</EM></H1>

例：ch11_7.htm
<HTML>
<HEAD>
<TITLE>上下文选择符的使用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY>
<FONT>
<P><H1>此行为文字大小1级的红色字体</H1>
<P><EM>此行为文字为绿色的斜体字体</EM>
<P><H1><EM>此行为文字大小1级的蓝色斜体字体</EM></H1>
</BODY>
</FONT>
</HTML>

组合上下文选择符的使用
例：ch11_8.htm
<HTML>
<HEAD>
<TITLE>上下文选择符的使用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY>
<FONT>
<P><I>此行文字为红色斜体字</I>
<P><H1><U>此行为文字大小1级的加下划线红色字体</U></H1>
<P><H2><EM>此行为文字大小2级的红色斜体字体</H2></EM>
</BODY>
</FONT>
</HTML>

11-4 外部样式表

11-4-1 嵌入外部样式表

CSS文件内容：
CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
I {COLOR:GREEN; FONT-SIZE=50pt}
IMG {HEIGHT:100; WEIGHT:160}
-------------------------------------------------------------
下面的语法，是将CSS文件嵌入HTML文件
<STYLE TYPE="TEXT/CSS">

</STYLE>

例：ch11_9.htm
<HTML>
<HEAD>
<TITLE>嵌入外部样式表</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER CLASS=TEXT>
欢迎光临<I>位元文化</I>欢迎光临
</CENTER><BR><BR>
<CENTER>
<IMG SRC="logo.gif">
</CENTER>
</BODY>
</FONT>
</HTML>
--------------------
|ch11_1.css文件内容|
--------------------
CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
I {COLOR:GREEN; FONT-SIZE=50pt}
IMG {HEIGHT:100; WEIGHT:160}

11-4-2 连接外部样式表
除了以嵌入外部样式表的方式达到在HTML文件中引样式表的目的外，您还可以使用连接的方式，使用外部样式表。而连接样式表简单来说，当浏览器读取到HTML文件内有设置格式的标记时，将会向所连接的外部样式表索取样式，语法如下：
<LINK TYPE="TEXT/CSS" REL=STYLESHEET HREF="ch11_1.css">

例：ch11_10.htm
<HTML>
<HEAD>
<TITLE>连接外部样式表</TITLE>

<LINK TYPE="TEXT/CSS" REL=STYLESHEET HREF="ch11_1.css">

</HEAD>

<BODY BGCOLOR=LIGHTYELLOW>
<CENTER CLASS=TEXT>
欢迎光临<I>位元文化</I>欢迎光临
</CENTER><BR><BR>
<CENTER>
<IMG SRC="logo.gif">
</CENTER>
</BODY>
</FONT>
</HTML>
--------------------
|ch11_1.CSS文件内容|
--------------------
CENTER.TEXT {FONT-FAMILY:楷体; COLOR:RED; FONT-SIZE:25pt}
I {COLOR:GREEN; FONT-SIZE=50pt}
IMG {HEIGHT:100; WEIGHT:160}

第十二章文字与排版样式的使用

12-1 长度、百分比单位的介绍

12-2 文字样式属性的介绍

12-2-1 font-family 字体设置属性

font-family:字体一,字体二，…
上述语法定义使用好几种不同的字体，并用（,）隔开。当浏览器找不到字体一时，将使用字体二替代，以此类推。
font-family:楷体,幼园,华文细黑

例：ch12_1.htm
<HTML>
<HEAD>
<TITLE>font-family属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>font-family字体属性的应用</FONT>
<P>
智者不失人，亦不失言。 —孔子
</P>
</CENTER>
</BODY>
</HTML>

12-2-2 font-style 字体效果属性

font-style：normal|italic(斜体)|oblique（歪斜体）
（注：|表示或的意思）
例：ch12_3.htm
<HTML>
<HEAD>
<TITLE>font-style属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>font-style字体效果属性的应用</FONT>
<P>
惟仁者能好人，能恶人。　－孔子
</P>
</CENTER>
</BODY>
</HTML>

12-2-3 font-variant 文字变体属性
利用 small-caps属性值，可以将中文字字体转换为较小的中文字体；而小写的英文字体将转换为大写且字体较小的英文字。

font-variant:normal|small-caps

例：ch12_4.htm
<HTML>
<HEAD>
<TITLE>font-variant属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>font-variant文字变体属性的应用</FONT>
<BR><BR>
It is never too late to mend. 亡羊补牢，犹未晚矣。

<P>
It is never too late to mend. 亡羊补牢，犹未晚矣。

</CENTER>
</BODY>
</HTML>

12-2-4 font-weight 字体粗细属性

font-variant:normal|bold|bolder|lighter|100-900
--------------------------------------------------------
设置值 | 说明 |
--------------------------------------------------------
Normal |浏览器默认的字体为7，字体粗细约为400 |
--------------------------------------------------------
bold |粗体，字体粗细约为700 |
--------------------------------------------------------
bolder |粗体再加粗，字体粗细约为900 |
--------------------------------------------------------
lighter |比默认字体还细 |
--------------------------------------------------------
100-900 |共有九个层次（100、200…，900），数字 |
|越小字体越细，数字越大字体越粗。 |
--------------------------------------------------------

例：ch12_5.htm
<HTML>
<HEAD>
<TITLE>font-weight属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>font-weight属性的应用</FONT>
<TABLE BORDER=7>
<TR>
<TD ID=weight-lighter>lighter</TD>
<TD ID=weight-nor>normal</TD>
<TD ID=weight-bold>bold</TD>
<TD ID=weight-bolder>bolder</TD>
</TR>
<TR>
<TD ID=weight-1>字体粗细为100</TD><TD ID=weight-4>字体粗细为400</TD>
<TD ID=weight-5>字体粗细为500</TD><TD ID=weight-8>字体粗细为800</TD>
</TR>
<TR>
<TD ID=weight-2>字体粗细为200</TD><TD></TD>
<TD ID=weight-6>字体粗细为600</TD><TD ID=weight-9>字体粗细为900</TD>
</TR>
<TR>
<TD ID=weight-3>字体粗细为300</TD><TD></TD>
<TD ID=weight-7>字体粗细为700</TD><TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>

12-2-5 font-size 文字大小属性

font-size:绝对大小|相对大小

绝对大小：以pt为单位。见例：ch12_6.htm
相对大小：利用%或者em。见例：ch12_7.htm

例：ch12_6.htm
<HTML>
<HEAD>
<TITLE>设置font-size文字大小属性以绝对方式的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>设置font-size属性以绝对方式的应用</FONT>
</CENTER>
<UL>
<LI ID=pt>文字大小设置为30点
<LI ID=xx-s>文字大小设置为xx-small
<LI ID=x-s>文字大小设置为x-small
<LI ID=s>文字大小设置为small
<LI ID=med>文字大小设置为medium
<LI ID=l>文字大小设置为large
<LI ID=x-l>文字大小设置为x-large
<LI ID=xx-l>文字大小设置为xx-large
</UL>
</BODY>
</HTML>

例：ch12_7.htm
<HTML>
<HEAD>
<TITLE>设置font-size文字大小属性以相对方式的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>设置font-size属性以相对方式的应用</FONT>
</CENTER>
<UL ID=pt>

<LI>font-size设为12pt，即文字大小为12点
<LI ID=percent>font-size设为150%，即文字大小为12pt*150%=18pt
<LI ID=em>font-size设为2em，即文字大小为12pt*2=24pt
<LI ID=larger>font-size设为larger，即文字大小＞12pt
<LI ID=smaller>font-size设为smaller，即文字大小＜12pt
</UL>
</BODY>
</HTML>

12-2-7 text-decoration 文字效果属性

例：ch12_9.htm
<HTML>
<HEAD>
<TITLE>text-decoration属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>text-decoration文字效果属性的应用</FONT>
</CENTER>
<UL>
<LI ID=under>求学问并无捷径 "此行文字加下划线"<P>
<LI ID=over>求学问并无捷径 "此行文字上加顶线"<P>
<LI ID=through>求学问并无捷径 "此行文字中间加上删除线"
<UL>
</BODY>
</HTML>

12-2-8 text-transform 文字转换属性
例：ch12_10.htm
<HTML>
<HEAD>
<TITLE>text-transform属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>text-transform文字转换属性的应用</FONT>
</CENTER>
<UL>
<LI ID=capit>there is no royal road to learing.<P>

<LI ID=upper>there is no royal road to learing.<P>

<LI ID=lower>THERE IS NO ROYAL ROAD TO LEARING.

<UL>
</BODY>
</HTML>

12-3 排版样式属性的介绍

12-3-1 text-indent 首行缩进属性

例：ch12_11.htm
<HTML>
<HEAD>
<TITLE>text-indent属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>text-indent首行缩进属性的应用</FONT>
</CENTER>
<P ID=indent-1>"首行缩进25pt"。For every meal you take, should think it's not
easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
</P>
<P ID=indent-2>"首行缩进5em"。For every meal you take, should think it's not
easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
</P>
<P ID=indent-3>"首行缩进3cm"。For every meal you take, should think it's not
easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
</P>
<P ID=indent-4>"首行缩进30%"。For every meal you take, should think it's not
easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
</P>
</BODY>
</HTML>

首行凸出的应用

例：ch12_12.htm
<HTML>
<HEAD>
<TITLE>text-indent属性的首行凸出的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>text-indent首行凸出属性的应用</FONT>
</CENTER>
<P ID=indent-1>"首行凸出20pt，整段缩进30pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.
一粥一饭，当思来处不易，请惜福哦！
</P>
<P ID=indent-2>"首行凸出2em，整段缩进5em"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.
一粥一饭，当思来处不易，请惜福哦！
</P>
<P ID=indent-3>"首行凸出1cm，整段缩进3cm"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！
</P>
<P ID=indent-4>"首行凸出10%，整段缩进30%"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！
</P>
</BODY>
</HTML>

12-3-2 letter-spacing 字符间距属性

例：ch12_13.htm
<HTML>
<HEAD>
<TITLE>letter-spacing属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>letter-spacing字符间距属性的应用</FONT>
</CENTER>
<P ID=letter-1>"字符间距为5pt"。For every meal you take, should think it's not
easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
</P>

<P ID=letter-2>"字符间距为-1pt"。For every meal you take, should think it's not
easy to get.Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！
</P>
</BODY>
</HTML>

12-3-3 line-height 行距属性
例：ch12_14.htm
<HTML>
<HEAD>
<TITLE>line-height属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>line-height行距属性的应用</FONT>
</CENTER>
<UL>
<LI ID=line-1>"此段落字符为12pt，行距为18pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！

<p>
<LI ID=line-2>"此段落字符为14pt，行距为21pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！

<p>
<LI ID=line-3>"此段落字符为16pt，行距为24pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！

</UL>
</BODY>
</HTML>

行距属性应用二
例：ch12_15.htm
<HTML>
<HEAD>
<TITLE>line-height属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>line-height行距属性的应用</FONT>
</CENTER>
<UL>
<LI ID=line-1>"此段落字符为14pt，行距为21pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！

<p>
<LI ID=line-2>"此段落字符为14pt，行距为21pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！

<p>
<LI ID=line-3>"此段落字符为14pt，行距为21pt"。For every meal you take,
should think it's not easy to get.Do appreciate blessings.　
一粥一饭，当思来处不易，请惜福哦！

</UL>
</BODY>
</HTML>

12-3-4 text-align 水平对齐属性的应用
例：ch12_16.htm
<HTML>
<HEAD>
<TITLE>text-align水平对齐属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>text-align水平对齐属性的应用</FONT>
</CENTER>
<UL>
<LI ID=left>无用之用是为大用 -庄子<P>

<LI ID=right>无用之用是为大用 -庄子<P>

<LI ID=center>无用之用是为大用 -庄子<p>

<LI ID=justify>For every meal you take, should think it's not easy to get.
Do appreciate blessings.　一粥一饭，当思来处不易，请惜福哦！

<UL>
</BODY>
</HTML>

12-3-5 vertical-align 垂直对齐属性

例：ch12_17.htm
<HTML>
<HEAD>
<TITLE>vertical-align垂直对齐属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>

<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>vertical-align垂直对齐属性的应用</FONT>
<TABLE BORDER=2 HEIGHT=400>
<TR BGCOLOR=LIGHTGREEN>
<TD>设置vertical-align属性</TD><TD>显示结果</TD>
<TD>设置vertical-align属性</TD><TD>显示结果</TD></TR>

<TR>
<TD>vertical-align:sub</TD>
<TD>C+O<FONT ID=sub>2</FONT>-->CO<FONT ID=sub>2</FONT></TD>

<TD>vertical-align:super</TD>
<TD>a<FONT ID=sup>2</FONT>+b<FONT ID=sup>2</FONT>
=c<FONT ID=sup>2</FONT></TD>

</TR>

<TR>
<TD ID=top>vertical-align:top</TD>
<TD ID=top><IMG SRC="logo.gif"></TD>

<TD ID=t-top>vertical-align:text-top</TD>
<TD ID=t-top><IMG SRC="logo.gif"></TD>

</TR>

<TR>
<TD ID=mid>vertical-align:middle</TD>
<TD ID=mid><IMG SRC="logo.gif"></TD>

<TD ID=base>vertical-align:baseline</TD>
<TD ID=base><IMG SRC="logo.gif"></TD>

</TR>

<TR>
<TD ID=bot>vertical-align:bottom</TD>
<TD ID=bot><IMG SRC="logo.gif"></TD>

<TD ID=t-bot>vertical-align:text-bottom</TD>
<TD ID=t-bot><IMG SRC="logo.gif"></TD>

</TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

第十三章背景与颜色的使用

13-1 设置颜色方法

13-1-4 实例应用
例：ch13_1.htm

<HTML>
<HEAD>
<TITLE>在CSS内设置颜色</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>在CSS内设置颜色的方法</FONT>
<TABLE BORDER=7 WIDTH=80%>
<TR><TD COLOR=RED SIZE=20>在CSS内设置颜色的方法</TD>
<TD>语法</TD><TD>显示的文字均为红色</TD></TR>
<TR><TD>以十六进制数(#rrggbb)表示</TD><TD>color:#ff0000</TD>
<TD ID=co-1>患难见知己 </TD></TR>
<TR><TD>以十六进制数(#rgb)表示</TD><TD>color:#f00</TD>
<TD ID=co-2>患难见知己</TD></TR>
<TR><TD>rgb函数以整数方法表示</TD><TD>color:rgb(255,0,0)</TD>
<TD ID=co-3>患难见知己</TD></TR>
<TR><TD>rgb函数以百分比方法表示</TD>
<TD>color:rgb(100%,0%,0%)</TD><TD ID=co-4>患难见知已</TD></TR>
<TR><TD>以颜色名称表示</TD><TD>color:red</TD>
<TD ID=co-5>患难见知己</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

13-2 背景颜色与背景图片的设置

13-2-1 background-color 背景颜色属性
background-color:<color>|transparent
---------------------------------------------------
设置值 | 说明
---------------------------------------------------
<color> |
---------------------------------------------------
transparent |表透明的意思
---------------------------------------------------

例：ch13_2.htm
<HTML>
<HEAD>
<TITLE>background-color背景颜色属性的应用</TITLE>
<STYLE TYPE="TEXT/CSS">

</STYLE>
</HEAD>
<BODY BGCOLOR=lightyellow>
<CENTER>
<FONT SIZE=5 COLOR=RED>background-color背景颜色属性的应用</FONT>
<TABLE BORDER=7 WIDTH=80%>
<TR><TD COLOR=RED SIZE=20>设置背景颜色的方法</TD>
<TD>语法</TD></TR>
<TR ID=bc-1><TD>以透明方式显示</TD>
<TD>background-color:transparent</TD></TR>
<TR ID=bc-2><TD>以十六进制数(#rrggbb)表示</TD>
<TD>background-color:#00ffff</TD></TR>
<TR ID=bc-3><TD>rgb函数以整数方法表示</TD>
<TD>background-color:rgb(0,250,0)</TD></TR>
<TR ID=bc-4><TD>rgb函数以百分比方法表示</TD>
<TD>background-color:rgb(70%,50%,0%)</TR>
<TR ID=bc-5><TD>以颜色名称表示</TD>
<TD>background-color:red</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

13-2-2 background-image 背景图片的应用

background-image:<url>|none

---------------------------------------------------
设置值 | 说明
---------------------------------------------------
<url> | 图文件的位置与名称
---------------------------------------------------
none |不加载图片
---------------------------------------------------

语法：background-image:url(fish.gif)

13-3 background-repear 背景

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航