haihongyuan.com
海量文库 文档专家
全站搜索:
您现在的位置:首页 > 小学教育 > 小学英语小学英语

2009 css lesson3 (1)

发布时间:2013-12-22 12:30:07  

为什么使用CSS?
? HTML

3.2 真的是特别糟糕!

? 最初的HTML绝没有打算要包含支持格式化文档的标签。

HTML标签原打算被用来定义文档的的内容。 <p>This is a paragraph</p> <h1>This is a heading</h1>

? 当诸如<font>这样的标签和color属性被加入HTML3.2的

规范当中,它开始成为开发者的一场噩梦。那些不得不将 字体和文字信息添加到每个简单的网页的站点,其开发过 程最终变成了漫长、昂贵和极其痛苦的过程。

1 网站设计技术 济南大学管理学院 信管系 杜培林

WEB和HTML普适性与浏览器之争
? 我们学到的知识是标准的HTML,html追求web普适性。 ? 浏览器之争 ? 网景(Netscape)公司1994年为了吸引用户,他们抛弃了

普适性,创建了一套只有Netscape能够识别的Html扩展 ,导致出现一些情况:使用网景的浏览器能够查看漂亮的 彩色文本、图片等页面,而使用其它任何浏览器都会得到 错误的、古怪的结果,甚至根本没有任何结果。
? 于是,人们喜欢这些扩展…… ? 1996年,微软也开始在WEB上圈出自己的区域,同样,为

了吸引用户,他们增加了只有微软的IE浏览器能够识别的 非标准扩展。
2 网站设计技术 济南大学管理学院 信管系 杜培林

能够打开页面并不意味着有相同的效果
? 据Web

Standard Project组织统计,在浏览器 之争的高潮时期,Web设计者要浪费高达25%的 时间来应付专有的标记,编写页面的多个版本来 满足每种浏览器,并且百不厌烦的向客户说明船 舰使用与所有浏览器的某些效果是不可能的---既 辛苦又是一团糟!
网等硬件上的差异?

? 软件浏览器之争如此,更何况手持设备和PDA上 ? web设计则要求让尽可能多的访问者以尽可能接近

与其的方式查看页面。
3 网站设计技术 济南大学管理学院 信管系 杜培林

该如何解决呢?
? 内容和格式分离---软件工程学 ? 吸收一些专有的标记进行标准化,取消一些类似

扩展。--HTML3.2
? HTML4.0和CSS
? XML和XHTML---同时具有HTML和XML两者有

点的语言称为XHTML

4 网站设计技术 济南大学管理学院 信管系 杜培林

HTML4.0 的优秀特性--CSS样式表
? 使用HTML4.0,所有的格式化都可以从HTML文

件中剥离,并植入一个独立的样式表。
? 因为HTML4.0中CSS将文档的表达与其结构分离

,我们从而得到了我们一直需要的东西:在不把 文档内容搞糟的情况下,对表现层进行完全的控 制。

5 网站设计技术 济南大学管理学院 信管系 杜培林

我们应该做些什么?
? 停止在HTML标签内部使用表现样式属性。

? 现在我们的《CSS

学习》,通过使用 CSS 来提 升工作效率!现在开始崭新的开发生涯!

6 网站设计技术 济南大学管理学院 信管系

杜培林

CSS 概述
? CSS指层叠样式表(Cascading

Style Sheets),层叠的意 思是:多重样式定义被层叠为一。

? CSS是标准的布局语言,用来控制元素的尺寸、颜色、排版。 ? CSS非常精确,功能强大,易于编写。 ? CSS由W3C发明,用来取代基于表格的布局、框架以及其他

非标准的表现方法。
? 样式(style)定义如何显示HTML元素;样式通常存储于样式表

中;外部样式表存储于CSS文件中。
? 外部样式表(External

Style Sheets)可以极大地提升你的工 作效率,并且可以极大地节约服务器的带宽。 站点更易维护,易用性更好。
网站设计技术 济南大学管理学院 信管系 杜培林 7

? 纯CSS的布局与XHTML的结合,可使表现与结构分离,并使

样式解决了一个普遍的问题
?

HTML标签原本被设计为用来定义文档内容。通过使用<h1>, <p>, <table>这样的标签,HTML当初被指望用来表达“这是 标题”、“这是段落”、“这是表格”之类的信息。而文档的 布局被期望由浏览器来完成,而不使用任何的格式化标签。 由于两种主要的浏览器(Netscape和Internet Explorer)不 断地将新的HTML标签和属性(比如字体标签和颜色属性)添 加到HTML规范之中,因此创建那些文档内容清晰地独立于文 档表现层的站点变得越来越困难。 为了解决这个问题,万维网联盟(W3C:The World Wide Web Consortium ),这个非营利的标准化联盟,肩负起了 HTML标准化的使命,并在HTML 4.0之外创造出STYLES(样 式)。 所有的主流浏览器均支持层叠样式表。
8 网站设计技术 济南大学管理学院 信管系 杜培林

?

?

?

样式表极大地提高了工作效率
? 样式表定义HTML元素如何被显示,诸如HTML

3.2的样式中的字体标签和颜色属性通常被保存在 外部的.css文件中。通过仅仅编辑一个简单的 CSS文档,外部样式表使你有能力同时改变站点 中所有页面布局的外观。 可以称得上WEB设计领域的一个突破。作为网站 开发者,你可以为每个HTML元素定义样式,并将 之应用于你希望的任意多的页面。为了进行全局 变换,只需简单地改变样式,然后网站中的所有 元素均会被自动地升级。
9 网站设计技术 济南大学管理学院 信管系 杜培林

? 由于允许同时控制多重页面的样式和布局,CSS

多重样式将层叠为一个 (1/2)
? 样式表允许样式信息以多种方式被规定。样式可

以被规定于单个的HTML元素中,在HTML页的头 元素中,或在一个外部的CSS文件中。甚至多重 的外部样式表可以在一个单一的HTML文档内部被 引用。

10 网站设计技术 济南大学管理学院 信管系 杜培林

多重样式将层叠为一个 (1/2)
? 层叠次序
?
?

当同一个HTML元素被不止一个

样式所定义时,哪个样式会被使用呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中 ,其中数字4拥有最高的优先权。 – 1.浏览器缺省设置 – 2.外部样式表 – 3.内部样式表(位于<head>标签内部) – 4.内联样式(在HTML元素内部)

?

因此,内联样式(在HTML元素内部)拥有最高的优先权,这意味着它 将优先于以下的样式声明:<head>标签中的样式声明,外部样式表中的 样式声明,或者浏览器中的样式声明(缺省值)。

11 网站设计技术 济南大学管理学院 信管系 杜培林

CSS 语法
? CSS

语法由三部分构成:选择器、属性和值:

selector {property: value;}
? 选择器

(selector) 通常是你希望定义的 HTML 元素或标 签,属性 (property) 是你希望改变的属性,并且每个属 性都有一个值。属性和值被冒号分开,并由花括号包围, 这样就组成了一个完整的样式声明(declaration): body {color: blue}

? 上面这行代码的作用是将

body 元素内的文字颜色定义为 蓝色。在上述例子中,body 是选择器,而包括在花括号 内的的部分是声明。声明依次由两部分构成:属性和值, color 为属性,blue 为值。
12 网站设计技术 济南大学管理学院 信管系 杜培林

值的不同写法和单位
? 除了英文单词

#ff0000:

red,我们还可以使用十六进制的颜色值

?p

{ color: #ff0000; } CSS 的缩写形式: RGB 值:

? 为了节约字节,我们可以使用

?p

{ color: #f00; }

? 我们还可以通过两种方法是用 ?p

{ color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); } RGB 百分比时,即使当值为0时也要写百 分比符号。但是在其他的情况下就不需要这么做了。比如 说,当尺寸为 0 像素时,0 之后不需要使用 px 单位。
网站设计技术 济南大学管理学院 信管系 杜培林

? 请注意,当使用

13

记得写引号
? 提示:如果值为若干单词,则要给值加引号: ?p

{font-family: "sans serif";}

14 网站设计技术 济南大学管理学院 信管系 杜培林

多重声明:
?

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下 面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是 不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号 。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这 么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错 的可能性。就像这样: p {text-align:center;color:red;} 你应该在每行描述只写一个属性,以使得样式定义的可读性更强,就 像这样:

? ?

?

p { text-align: center;

color: black; font-family: arial; }
15 网站设计技术 济南大学管理学院 信管

系 杜培林

空格和大小写敏感
? 大多数样式表包含不止一条规则,而大多数规则

包含不止一个声明。多重声明和空格的使用使得 样式表更容易被编辑:
? body

{ color: #000; background: #fff; margin: 0; padding: 0; font-family: Georgia, Palatino, serif; } CSS 在浏览器的工作效果 ,同样,与 XHTML 不同,CSS 对大小写不敏 感。不过存在一个例外:如果涉及到与HTML文档 一起工作的话,class 和 id 名称对大小写是敏感 的。
16 网站设计技术 济南大学管理学院 信管系 杜培林

? 是否包含空格不会影响

选择器的分组
? 你可以对选择器进行分组,这样,被分组的选择

器就可以分享相同的声明。用逗号将需要分组的 选择器分开。在下面的例子中,我们对所有的标 题元素进行了分组。所有的标题元素都是绿色的 。
? h1,h2,h2,h3,h5,h6

{ color: green }

17 网站设计技术 济南大学管理学院 信管系 杜培林

继承及其问题
? ?

根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作 。看看下面这条规则: body { font-family: Verdana, sans-serif; } 根据上面这条规则, 站点的 body 元素将使用Verdana字体(假如访问者的系统中存在的 话)。

?

通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥 有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。 不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体 ,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是 这样的。 但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时 候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不 支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。 IE/Windows 直到 IE6 还存在相关的问题,在表格内字体样式会被 忽略。我们又该如何是好呢?
18 网站设计技术 济南大学管理学院 信管系 杜培林

?

友善地对待Netscape 4
? 幸运地是,你可以通过使用我们成为

"Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承 的问题。 { font-family: Verdana, sans-serif; } p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sansserif; } 4.0 浏览器无法理解继承,不过他们可以理解组 选择器。这么做虽然会浪费一些用户的带宽,但是如果需 要对 Netscape 4 用户进行支持,就不得不这么做。

? body

19 网站设计技术 济南大学管理学院 信管系 杜培林

继承是一个诅咒吗?
? 如果你不希望

"Verdana, sans-serif" 字体被所有的子元 素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对p的特殊规则,这样它就会 摆脱父元素的规则: { font-fam

ily: Verdana, sans-serif; } td, ul, ol, ul, li, dl, dt, dd { font-family: Verdana, sansserif; } p { font-family: Times, "Times New Roman", serif; }

? body

20 网站设计技术 济南大学管理学院 信管系 杜培林

CSS 派生选择器
? 通过依据元素在其位置的上下文关系来定义样式,你可以

使标记更加简洁。
?在

CSS1 中,通过这种方式来应用规则的选择器被称为上 下文选择器(contextual selectors),这是由于他们依赖于 上下文关系来应用或者避免某项规则。在 CSS2 中,他们 被称为派生选择器,但是无论你如何称呼它们,它们的作 用都是相同的。 的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

? 派生选择器允许你根据文档的上下文关系来确定某个标签

21 网站设计技术 济南大学管理学院 信管系 杜培林

例子
? 比方说,你希望列表中的 ? li

strong 元素变为斜体字,而不 是通常的粗体字,可以这样定义一个派生选择器: strong { font-style: italic; font-weight: normal; } <strong> 的红色代码的上下文关系:

? 请注意标记为

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以 这个规则对我不起作用</strong></p>
<ol> <li><strong>我是斜体字。这是因为strong元素位于li元素内。 </strong></li> <li>我是正常的字体。</li> </ol>
? 在上面的例子中,只有

li 元素中的 strong 元素的样式为 斜体字,无需为 strong 元素定义特别的 class 或 id,代 码更加简洁。
22 网站设计技术 济南大学管理学院 信管系 杜培林

再看看下面的 CSS 规则:
? strong

{ color: red; }

h2 { color: red; }
h2 strong { color: blue; }
? 下面是它施加影响的

HTML:

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>

<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>
? 另:h1{color:red;background:yellow;}
23 网站设计技术 济南大学管理学院 信管系 杜培林

24 网站设计技术 济南大学管理学院 信管系 杜培林

CSS 语法
? CSS

样式语法由三部分构成:选择器、属性和值:

selector {property: value;}
? 选择器

(selector) 通常是你希望定义的 HTML 元素或标 签,属性 (property) 是你希望改变的属性,并且每个属 性都有一个值。属性和值被冒号分开,并由花括号包围, 这样就组成了一个完整的样式声明(declaration): body {color: blue}

? 上面这行代码的作用是将

body 元素内的文字颜色定义为 蓝色。在上述例子中,body 是选择器,而包括在花括号 内的的部分是声明。声明依次由两部分构成:属性和值, color 为属性,blue 为值。
25 网站设计技术 济南大学管理学院 信管系 杜培林

4 examples
?P

{ text-align: ce

nter; color: black; font-family: arial; }

? h1,h2,h2,h3,h5,h6 ? strong

{ color: green; }

{ color: red; }

h2 { color: red; }

h2 strong { color: blue; }
?p

{font-family: "sans serif";}
26 网站设计技术 济南大学管理学院 信管系 杜培林

级联式样式表的语法格式
?

级联式样式表的语法格式一般为: – <STYLE TYPE=text/CSS> – 样式标记名1 – {{样式规则1} – ......
– – –

样式标记名n {样式规则n} </STYLE>

?
?

或者<标记STYLE=样式规则>
text/css属性值所表示的是级联式样式表,而非text/Javascript 形式的动态样式表(Javascript样式表)。
27 网站设计技术 济南大学管理学院 信管系 杜培林

级联式样式表的例子2
?

<HTML>

?
? ? ?

?
? ? ?

?
? ? ?

?

<HEAD><TITLE>CSS样式</TITLE> <STYLE type="text/css"> <!-H3{ font-family:arial; font-size:12pt; font-style:normal; color:blue; } --> </STYLE></HEAD> <BODY> <H3>CSS样式文本!arial,12pt,normal,blue!</H3> </BODY></HTML>
28 网站设计技术 济南大学管理学院 信管系 杜培林

级联式样式表的例子1
?

<STYLE TYPE=TEXT/CSS> P

{FONT-SIZE:24;
FONT-WEIGHT:BOLD; MARGIN-LEFT:50px; COLOR:RED} H1 {COLOR:YELLOW; FONT-SIZE:36; BACKGROUND:OLIVE; WORD-SPACING:21Pt;}

</STYLE><!--结束样式表定义-->
<P>该段文字应用P样式</P><!--应用P样式--> <H1>该段文字应用H1样式</H1><!--应用H1样式-->
?

说明:定义了两种具体的样式标记。
– –

<P>标记样式设定了这样的规则:字体大小为24,字体样式为粗体,左边距为50px,整个段落 范围内的文字颜色为红色。 标题标记<H1>设定了这样的样式规则:文字颜色为红色,字体大小为36,标题背景为橄榄色, 字间距为21pt。 29 网站设计技术 济南大学管理学院 信管系 杜培林

第二种格式样式表例子
?

直接在标记内应用属性STYLE,其中的样式规则和第一种一样:

?
?

属性名1:属性值l;……属性名n:属性值n
例如: <BODY> 我爱编程<!--这是正常文字--> <!-- 下面标记<P>应用标记的样式属性直接定义标记的样式,在样式表定义中使 用了字体大小样式(FONT-SIZE)、颜色样式(COLOR)字体修饰样式( FONT-STYLE)。其中样式属性的样式值要用引号引起来-->

<P STYLE=FONT-SIZE:24;COLOR:NAVY;FONTSTYLE:ITALIC;></P>
</BODY>
?

这样就设置<P>标记的样式为:段落内字体大小为24,颜色为深蓝色,字体为斜体 。
30 网站设计技术 济南大学管理学院 信管系 杜培林

CSS的注释
? ? ?

CSS的注释 对于任何编码添加注释都是非常有用处的。注释用来说明所写代码的含义,因此对于其 他用户读懂这些代码是很有作用的。 CSS用C/C++的标记进行注释的,“/*”放在注释的开始处,“*/”在结束处。下例说 明如何进行

注释: <HEAD> <TITLE>CSS例子</TITLE> <STYLE TYPE="text/css"> H1 { font-size: x-large; color: red } H2 { font-size: large; color: blue } </STYLE> </HEAD> 养成注释的习惯,不仅对别人而且对自己都有好处。用户可以在CSS中插入注释来说明 用户代码的意思,注释有利于用户或别人以后编辑和更改代码时理解代码的含义。例如 ,当把一个格式页提交用户使用,经过很长时间,用户又需要重新修改格式页时,可能 作者已经忘记代码的准确含义。注释可以为用户记起定义、记起特殊格式页的重点及技 巧的细节。在浏览器中,注释是不显示的。
31 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ? ? ? ? ?

/*这是一个CSS的定义*/

级联式样式表的例子2
? ? ? ? ? ? ? ? ? ? ? ? ? ?

<HTML>

<HEAD><TITLE>CSS样式</TITLE>
<STYLE type="text/css"> <!-H3{ font-family:arial; font-size:12pt; font-style:normal; color:blue;/* CSS样式文本!arial,12pt,normal,blue */ } -->

</STYLE></HEAD>
<BODY> <H3>CSS样式文本!arial,12pt,normal,blue!</H3> </BODY></HTML>

32 网站设计技术 济南大学管理学院 信管系 杜培林

CSS 单位
? ?

长度单位 一个长度的值由可选的正号" + "或负号" - "、接着的一个数字、还有标明单位的两 个字母组成。在一个长度的值之中是没有空格的,例如,1.3 em就不是一个有效 的长度的值,但1.3em就是有效的。一个为零的长度不需要两个字母的单位声明。 无论是相对值还是绝对值长度,CSS1都支持。相对值单位确定一个相对于另一长 度属性的长度,因为它能更好地适应不同的媒体,所以是首选的。以下是有效的相 对单位:

?

? ? ? ? ? ? ? ?

em (em,元素的字体的高度)
ex (x-height,字母 "x" 的高度) px (像素,相对于屏幕的分辨率) 绝对长度单位视输出介质而定,所以逊色于相对单位。以下是有效的绝对单位:

in (英寸,1英寸=2.54厘米)
cm (厘米,1厘米=10毫米) mm (毫米) pt (点,1点=1/72英寸)

?

pc (帕,1帕=12点,打字机字型尺寸单位 )
网站设计技术 济南大学管理学院 信管系 杜培林

33

对字号的控制
? ?

利用HTML你只能<FONT SIZE=X?>设定7种字号 。 使用font-size 属性,你可以对文字的尺寸进行无限的控制。 确定这的3种基本方法:

? ?

Points, Ems, Pixels, 及其它单位

样式表可以识别许多种确定一种要素尺寸的不同单位:
第1种, points: P { font-size: 16pt }

?

这条代码告诉浏览器以16 points(点)的尺寸显示<P>。

?

Points是确定文字尺寸非常好的单位,因为它在所有的浏览器和操作 平台上都适用。你唯一需要留意的就是在缺省设置下,PC机中显示的 字要比MAC机中显示的大一些。 如果这一点对你来说很重

要的话,你可以利用javascript识别不同人所 使用的操作平台,然后根据不同的平台链接相应的CSS文件。
34 网站设计技术 济南大学管理学院 信管系 杜培林

?

以上语句采用CSS font-size属性制作。
下一个单位,EM: P { font-size: 20pt } B { font-size: 1.5em }

?

?

em 是和point相同的距离单位。在样式表中,em指母体要素的尺寸。

所以,在上例中,所有包含在<P>中的<B>的文字的尺寸将是30points( 因为<B>中的找是母体字号(20pt)的1.5倍。

35 网站设计技术 济南大学管理学院 信管系 杜培林

?

下一个单位,pixels: P { font-size: 20px } 从网页设计的角度来说,pixel(象素)是一个非常熟悉的单位,它最 大的优点就在于所有的操作平台都支持pixel单位(而对于其它的单位 来说,PC机的文字总是显得比MAC机中大一些。 而其不利之处在于,当你使用pixels单位时,网页的屏幕显示不稳定, 字体时大时小,甚至有时根本不显示,而points 单位则没有这种问题.

?

?
? ?

其它单位:如果上述单位仍然不符合你的要求,请试试这些单位:
in (英寸) cm (厘米)

?
? ?

mm (毫米)
pc ( 1帕=12点,打字机字型尺寸单位打字机字型尺寸单位) ex (x-height)
36 网站设计技术 济南大学管理学院 信管系 杜培林

关键字
?
? ? ?

如果你不喜欢使用这些单位,你还可以选择以关键字说明文字尺寸,例:
P { font-size: large } 有7种关键字,相对应于font-size中所用的数字参数: xx-small

?
? ? ? ? ? ?

x-small
small medium large x-large xx-large 利用这些参数,Web浏览器可以自由决定每一种关键字所适合的尺寸。例 如:在Netscape Communicator中x-large的尺寸为28points,而在IE 4 (windows及MAC)中为24points,而在Win 95下的IE 3中为18points。 此外,还有两种相对尺寸关键字:smaller 和larger
37 网站设计技术 济南大学管理学院 信管系 杜培林

? 两种相对尺寸关键字: ? smaller ? larger
?

smaller参数告诉浏览器将当前文字在关键字规格基础上“缩小一级” ,例如,如果large字号的文字应用smaller参数,则其字号变成了 midium尺寸。larger参数的作用类似。 (注意:IE 3不支持smaller或larger参数。)

38 网站设计技术 济南大学管理学院 信管系 杜培林

比例参数
? 比例参数 ? 设定文字尺寸的第3种办法就是使用比例参数,例: ?P

{ font-size: 15pt } B { font-size: 300% } 寸为<P>尺寸设定值的3倍,即45 points。比例参数常用于 从母体要素继承的参数值。

? 这些规则的含义为:使所有包含在<P>中的的<B>文字的尺

? 浏览器对比例参数比较挑剔,所以你必须经常测试。

39 网站设计技术 济南大学管理学院 信管系 杜培林


随意调整文字的尺寸
?

有了这么多的选择是不是很让人高兴呢?由于有了font-size属性,我 们能够随意调整文字的尺寸,如同以下的例子所示:(每一个字母i都 比前一个大5pt)

40 网站设计技术 济南大学管理学院 信管系 杜培林

百分比单位
? 一个百分比值由可选的正号"+"或负号"-"、接着

的一个数字,还有百分号"%"。在一个百分比值之 中是没有空格的。
? 百分比值是相对于其它数值,同样地用于定义每

个属性。最经常使用的百分比值是相对于元素的 字体大小。

41 网站设计技术 济南大学管理学院 信管系 杜培林

颜色单位
?

颜色值是一个关键字或一个RGB格式的数字。

?

Windows VGA(视频图像阵列)形成了16各关键字: aqua,black, blue ,fuchsia,gray,green, lime,maroon,navy,olive, purple, red,silver,teal,white,and yellow。
RGB颜色可以有四种形式: #rrggbb (如,#00cc00) #rgb (如,#0c0) rgb(x,x,x) x是一个介乎0到255之间的整数 (如,rgb(0,204,0)) rgb(y%,y%,y%) y是一个介乎0.0到100.0之间的整数 (如, rgb(0%,80%,0%)) 上述的例子指定同一颜色。
42 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ? ?

?

统一资源管理URLs
?

一个URL值的格式为 : url(统一资源管理,因特网的地址) 。URL可以 选择用单引号( ' )或者双引号( " ),并且,在URL之前或之后可以包含 空格。 在URL中的括弧,逗号,空格,单引号,或双引号必须避开反斜杠。 不完整的URLs被理解为样式表的源代码,而不是HTML源代码。

?

?

注意: Netscape Navigator 4.x 会错误地将不完整的URLs理解为相关 的HTML源代码。注意到这个错误后,网页制作者应该在可能的地方 使用完整的URLs。
例如: BODY { background: url(stripe.gif) } BODY { background: url(http://www.htmlhelp.com/stripe.gif) } BODY { background: url( stripe.gif ) } BODY { background: url("stripe.gif") } BODY { background: url(\"Ulalume\".png) } /* quotes in URL escaped */
43 网站设计技术 济南大学管理学院 信管系 杜培林

? ?

44 网站设计技术 济南大学管理学院 信管系 杜培林

3种选择符
?

CSS中主要有3种选择符: – 超文本标记选择符(HTML selector) 任何HTML元素都可以是一个选择符; 选择符仅仅是指向需要特别样式元素。 例如:P{text:3em}中选择符是<P>, A{color:red}中选择符是<A> – 类选择符(class selector) 单一选择符能有不同的CLASS(类),因而允许同一元素有不同的样式; 每个选择符只允许有一层类。如:font.html.proprietary无效; 类的声明也可以是无须相关的元素.note{font_size:small},其意义是: 名为note的类可以被任何元素使用。 – ID选择符(ID selector) 可以为页面内的所有的标记定义一个ID,在C

SS中的选择符可以根据 ID个别地定义每个元素的样式属性; 这种选择符应该尽量少用,因为它具有一定的局限性; 一个ID选择符的指定要有指示符“#”在定义前面; 例如,ID选择符定于如下:#indent3em{text-indent:3em} 45 – <P ID=indent3em>文本缩进3em</P>
网站设计技术 济南大学管理学院 信管系 杜培林

CSS样式表的定义需掌握
? 1.通过HTML标记定义 ? 2.使用class定义样式表 ? 3.用id属性定义样式表

? 4.

虚类

46 网站设计技术 济南大学管理学院 信管系 杜培林

HTML标记符selector
? HTML标记符是最典型的selector类型,网页设计

者可以为某个或某些具体的HTML元素应用样式定 义。如: BODY{color:black}
? 如果属性的值是多个单词组成的,必须在值前加

上双引号。如果需要对一个selector指定多个属性 时,应使用分号将所有的属性和值分开。

47 网站设计技术 济南大学管理学院 信管系 杜培林

具有上下文关系的HTML标记符 selector
? 如果需要为位于某个标记符内的标记符设置特定

的样式规则,则应将selector指定为具有上下文关 系的HTML标记符。例如,如果只想使位于H1标 记符内的A标记符具有特定的属性,则应使用以下 格式:
? H1

A{color:blue}

? 注意H1和A之间以空格分隔。

48 网站设计技术 济南大学管理学院 信管系 杜培林

包含selector
? 可以单独对某种元素包含关系定义的样式表,元

素1里包含元素2,这种方式只对在元素1里的元素 2定义,对单独的元素1或元素2无定义,例如:
? TABLE

A{font-size:10px}

? 使用上规则后,在表格内的链接改变了样式,文

字大小为10像素,而表格外的链接的文字仍为默 认大小。

49 网站设计技术 济南大学管理学院 信管系 杜培林

用户定义的类selector
? 可以使用类(class)来为单一HTML标记符创建

多个样式。要想将一个类包括到样式定义中,可 将一个句点和一个类名称添加到selector后,如下 所示:
? selector.classname

{property:value;……}

? 可以使用任何名称命名类,但通常使用具体含义

的名称。

50 网站设计技术 济南大学管理学院 信管系 杜培林

标题自动级别
?

<html><head><title>css word</title>

?
? ?

<style type="text/css">
P.first {color: green } P.second {color: purple }

?
? ? ? ? ? ?

P.third {color: gray }
</style> </head> <body> <P CLASS=first>The first paragraph, with a class name of "first."</P> <P CLASS=second>The second paragraph, with a class name of "second."</P> <P CLASS=third>The third paragraph, with a class name of "third."</P> </body></html>
网站设计技术 济南大学管理学院 信管系 杜培林 51

? ? ? ? ?

<html><head><title>css word</title> <style> P.first {font-size: 16pt; font-w

eight:900;color: green} P.second {font-size: 14pt; font-weight:700;color: purple} P.third {font-size: 12pt; font-weight:500;color: gray}

?
? ? ? ? ?

</style>
</head> <body> <P CLASS=first>The first paragraph, with a class name of "first."</P> <P CLASS=second>The second paragraph, with a class name of "second."</P> <P CLASS=third>The third paragraph, with a class name of "third."</P> </body></html>
52 网站设计技术 济南大学管理学院 信管系 杜培林

? 你可以给类别起任何一种名字,但不要忘了在样

式表规则中类别名称前加一个句号(即英文中的 . )

? 你还可以生成不加任何HTML标签的分类: ? .first

{ color: green }

? 这种方式更加灵活,因为现在我们可以将

CLASS=first用于任何HTML标签,并应用到网 页<BODY>中,而设定的文字将以绿色显示。
53 网站设计技术 济南大学管理学院 信管系 杜培林

用户定义的ID selector
? 当网页设计者想在整个网页或几个页面上多处以相同样式

显示标记符时,除了使用类定义一个通用类样式以外,还 可以使用ID定义样式。ID选择符的应用和类选择符类似 ,只要把CLASS换成ID即可。
? 要将一个ID样式包括在样式定义中,应用一个#号作为ID

名称的前缀,如下所示:
?

#IDname{property:value……} 性。

? 定义了ID样式后,需要在引用该样式的标记符内使用id属

54 网站设计技术 济南大学管理学院 信管系 杜培林

<html><head><title>css word</title> <style type="text/css"> #first {color: green } P#second {color: purple } P#first {color: red } </style> </head><body> <h1 ID="first">ID选择器#first在h1中测试</h1>

<h2 ID="first">ID选择器#first在h1中测试</h2>
<font color=blue ID="first">ID选择器#first在h1中测试 </font> <p ID="first">ID选择器#first在p中测试</p> <p ID="second">ID选择器#second在p中测试</p> </body></html>
55 网站设计技术 济南大学管理学院 信管系 杜培林

虚类selector
? 虚类可以看作是一种特殊的类选择符,是能被支

持CSS的浏览器自动识别的特殊选择符。它最大 的用处就是可以在不同状态下定义不同的样式超 链接效果。
? 将虚类和类组合起来用,就可以在同一个页面中

做几组不同类型的链接效果了。所谓不同类型超 链接,是指访问过的(A:visited)、未访问过的 (A:link)、激活的(A:active)以及鼠标指针悬 停于其上(A:hover)的这4种状态的超链接。
56 网站设计技术 济南大学管理学院 信管系 杜培林

Link css
?

<html><title>link css</title><head><style type="text/css">

?

/*定义伪(虚)类元素(a:),大括号内定义了前景色属性和文本装饰属性, hover加上‘font-size’属性目的是让鼠标激活链接时改变字体*/
a:visited {color: #0000FF; text-decoration: none} a:link {font-family: "楷体_GB23

12"; font-size: 19pt; color: #0000FF;text-decoration: none} a:hover{font-family: "宋体"; font-size: 12pt; color: #003333;backgroundcolor: #808080; text-decoration:overline} </style> </head><body> <a href="http://www.sohu.com">使用链接</a></p> </body></html>
57 网站设计技术 济南大学管理学院 信管系 杜培林

? ?

?

? ? ? ?

表2-1
标记 Bgcolor 说明

html设置背景景色和文字颜色

设置网页背景颜色

Text
Link Alink Vlink Backgrou nd ImageUR L #

设置网页非可链接文字的颜色
设置网页可链接文字的颜色 设置网页正被点击的可链接文字的颜色 设置网页已经点击的可链接文字的颜色 设置网页背景图案 设置网页背景图案的URL地址
代表颜色RGB值(格式为rrggbb)。它是用16进制的红-绿-蓝( red-green-blue,RGB)值来表示。各种常见的颜色的RGB值如 表9-2所示。
text=# link=# alink=# vlink=# background=”imageURL”>
58 网站设计技术 济南大学管理学院 信管系 杜培林

?<BODY

bgcolor=#

样式表的层叠性selector
? 层叠性,即继承性,样式表的继承规则是外部的

元素样式会保留下来继承给这个元素所包含的其 他元素。
? 不同的选择符定义相同的元素时,要考虑到不同

的选择符之间的优先级。ID选择符,类选择符和 HTML标记选择符,因为ID选择符是最后加在元 素上的,所以优先级最高,其次是类选择符。如 果想超越这三者之间的关系,可以在定义样式时 加上!important,来提升样式表的优先权。
59 网站设计技术 济南大学管理学院 信管系 杜培林

内部样式表
? 当单个文档需要特殊的样式时,就应该使用内部样式表。

你可以使用 <style> 标签在头部分定义内部样式表,就像 这样:

? <head>

? <style
? ? ?

type="text/css">

hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </head>
60 网站设计技术 济南大学管理学院 信管系 杜培林

? </style>

内联样式
? 要使用内联样式,你需要在相关的标签内使用样式(style

)属性。Style 属性可以包含任何 CSS 属性。本例展示 如何改变段落的颜色和左边距:

<p style="color: sienna; margin-left: 20px">

This is a paragraph
</p>
? 又如:<P

Style=”color:blue; font-size:10px”>中为教

育</P>;
? 由于要将表现和内容混杂在一起,内联样式会损失掉样式

表的许多优势。请慎用这个方法,例如当样式需要只被应 用于某个元素一次时。
网站设计技术 济南大学管理学院 信管系 杜培林

61

引用外部样式表中的样式信息
?

在STYLE标记符中定义样式对于单独网页的格式设置和维护很有 效,但如果在一个大网站中,为每个页面都定义类似的样式,显然 又是效率不高的,这时最好的办法就是将重复在多个网页中使

用的 样式放在外部样式表文件中,然后通过链接的方式引用其中的样式 。链接式样式的优点很明显,网页设计者可以在一个链接的CSS文 件上作修改,然后所有引用它的网页都会自动更新。 引用链接外部样式表中的样式信息又称为“外部引用”。外部引用 又可以分为链入外部样式表和导入外部样式表两类。 链入外部样式表是把样式表保存为一个样式表文件,然后在页面 中用LINK标记符链接到这个样式表文件,这个LINK标记符必须放 到页面的HEAD区内。 导入外部样式表是指在内部样式表的STYLE里导入一个外部样式 表,导入时用@import。 导入外部样式表输入方式比链入外部样式表更有优势,实质上它相 当于存在内部样式表中。
网站设计技术 济南大学管理学院 信管系 杜培林

?

?

?

?

62

如何插入样式表
?

当读到一个样式表,浏览器会根据它来格式化文件。插入样式表的方 法有三种: (内部和局部样式表已讲过) 外部样式表 当样式需要被应用于很多页面时,外部样式表将是理想的选择。在使 用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的 外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在(文 档的)头部:

? ?

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
?

浏览器会从文件 mystyle.css 中读到样式声明,并根据它来格式文档 。
63 网站设计技术 济南大学管理学院 信管系 杜培林

外部样式表
? 外部样式表可以被编写于任何的文本编辑器。文件不能包

含任何的 html代码。样式表应该被保存为以 css 为扩展 名的文件。下面是一个样式表文件的例子:

? hr

{color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} 不要在 属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅能工作于 IE6,但是在 Mozilla/Firefox 或 Netscape 中却无法正 常工作。

64 网站设计技术 济南大学管理学院 信管系 杜培林

CSS样式表的种类小结
?

从样式表插入的形式来看可以分为三种:


内联式样式表:利用现有的HTML标记,把特殊的样式加入 到那些由标记控制的信息中,例如<P Style=”color:blue; font-size:10px”>中为教育</P>;
嵌入式样式表(内部样式表):和JavaScript一样可以嵌入到 HTML文件的头部中去,使用<style>和</style>容器装载; 外部式样式表:一种保存在外部的样式表文件,外部文件以 .CSS为扩展名,例如“<link rel=stylesheet href=“mainsheet.css” type=“test/css”>”. 另外一种为导入外部样式表,即是指在内部样式表的STYLE 里导入一个外部样式表,导入时用@import。

– –

65

网站设计技术 济南大学管理学院 信管系 杜培林

多重样式
?

如果某些属性在不同的样式表中被同样的选择器定义,那么属 性值将从更具体的样式表中被继承过来。 例如,外部样式表拥有针对 h3 选择器的三个属性: h3{ color: red; text-align: left; font-size: 8pt; }

? ? ? ? ?

而内部样式表拥有针对 h3 选择器的两个属性:
h3 { text-align: right; font-size: 20pt; } 假如拥有内部样式表的这个页面同时与外部样式表链接,那么 它得到的样式是: color: red; text-align: right; font-size: 20pt; 即颜色属性将被继承于外部样式表,而文字排列(textalignment)和字体尺寸(font-size)会被内部样式表中的规 则取代
网站设计技术 济南大学管理学院 信管系 杜培林

? ?

66

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

<html><head><title>CSS综合应用示例</title> <style type="text/css">h2 {font-family:"隶书";color:#ff8800} p{color:black;background-color:yellow;font-size:12pt;} a:visited {color: #0000FF; text-decoration: none} a:link {font-family: "宋体"; font-size: 9pt; color: #0000FF;textdecoration: none} a:hover {font-family: "宋体"; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none}

example

h3{font-family:"宋体";color:blue;font-style:italic;} .text {font-family: "宋体"; font-size: 10pt; color: red} </style></head><body topmargin=4 > <h2>这是一个CSS样式文件综合示例!</h2> <span class="text">这行文字应是红色的。</span> <p>这一段的底色应是黄色。</p> <h3>这行文字由css中的样式控制,应是斜体、蓝色。</h3> <a href="a.htm">超链接</a><br><br> <div style="font-size:14pt;color:darkred;">CSS样式使用有四种方式 :<br>链接、引入、嵌入和局部引用</div></body></html>
网站设计技术 济南大学管理学院 信管系 杜培林

67

display

68 网站设计技术 济南大学管理学院 信管系 杜培林

A Good Practical Example(1/3)
? 文件名为s1.css的内容只是下面两行代码:

? h2 ?p

{font-family:"隶书";color:#ff8800}

{color:black;background-color:yellow;fontsize:12pt;}

69 网站设计技术 济南大学管理学院 信管系 杜培林

A Good Practical Example(2/3)
? 文件名为s2.css的内容只是下面两行代码:

? h3

{font-family:"宋体";color:blue;font-style:italic;} {font-family: "宋体"; font-size: 10pt; color:

? .text

red}

70 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ?

文件名为cssexample.htm的内容是下列代码:

A Good Practical Example(3/3)

<html><head><title>CSS综合应用示例</title> <link rel=stylesheet type="text/css" href="s1.css"> <style type="text/css">

?
? ? ?

a:visited {color: #0000FF; text-decoration: none}
a:link {font-family: "宋体"; font-size: 9pt; color: #0000FF; text-decoration: none} a:hover

{font-family: "宋体"; font-size: 12pt; color: #003333; background-color: #FFCC99; text-decoration: none}

?
? ? ? ? ? ? ? ? ?

@import URL("s2.css");
</style></head> <body topmargin=4 > <h2>这是一个CSS样式文件综合示例!</h2>

<span class="text">这行文字应是红色的。</span>
<p>这一段的底色应是黄色。</p> <h3>这行文字由s2.css中的样式控制,应是斜体、蓝色。</h3> <a href="a.htm">超链接</a><br><br> <div style="font-size:14pt;color:darkred;">CSS样式使用有四种方式:<br> 链接、引入、嵌入和局部引用</div></body></html>
网站设计技术 济南大学管理学院 信管系 杜培林 71

CSS属性
?CSS属性分类
? CSS属性分为包括字体、颜色和背景、文本、

边框、用户界面、表和视觉效果。

72 网站设计技术 济南大学管理学院 信管系 杜培林

CSS属性 一、字体属性
? 字体属性用于控制网页中的文本的字符显示方式

,例如控制文字的大小、粗细以及使用的字体等 。CSS中的字体属性包括字体族科(font-family )、字体风格(font-style)、字体变形(fontvariant)、字体加粗(font-weight)、字体大 小(font-size)五个属性。其中字体族科和字体 大小属性是比较常用的。

73 网站设计技术 济南大学管理学院 信管系 杜培林

字体族科属性(font-family)
?

字体族科属性相当于HTML中FONT标记符的face属性,用于设定文字 的字体,当所设定的字体在用户端没有时会用浏览器默认的字体代替。

?

该样式允许指定多种字体供选择,用逗号进行分隔即可。在客户端会根 据字体指定的优先级(先后顺序)寻找字体予以显示。比如:

font-family:华文行楷,楷体-GB2312,宋体
语法:font-family : 字体名称 参数:字体名称按优先顺序排列,以逗号隔开。如果字体名称包含空格,则应使用 引号括起。 说明:用font-family属性可控制显示字体。不同的操作系统,其字体名是不同的。 对于Windows系统,其字体名就如Word中的“字体”列表中所列出的字体名称。 示例:

body { font-family: "gill sans", "new baskerville", serif } h2 { color: red; margin: 10px; font-family: 华文新魏, 楷体_GB2312 }

74 网站设计技术 济南大学管理学院 信管系 杜培林

字体风格属性(font-style)
? 字体风格属性的值有三种:普通(normal),斜体(italic

)和倾斜(oblique),默认值为normal。


字体风格(font-style)
– 语法:font-style

: italic | oblique | normal

– 参数:italic为斜体。对于没有斜体变量的特殊字体,将应用
– 说明:将文本字体设置为斜体。 – 示例:h3

oblique。normal为正常的字体,声明此值将取消之前设置。 { font-style: italic }

75 网站设计技术 济南大学管理学院 信管系 杜培林

字体变形属

性(font-variant)
? 字体变形属性有普通(normal)和小型大写字母

(small-caps)两个值,默认值为normal。当使 用small-caps属性时,文字一律转换为大写字母 ,并且都会以一种大小介于普通小写字母和大写 字母之间的字体显示。

76 网站设计技术 济南大学管理学院 信管系 杜培林

字体加粗属性(font-weight)
?

字体加粗属性,也叫字重,用于设定字体的粗细,跟HTML中的B标记符效果相 似。它的取值可以是以下值中的一个:normal、bold、bolder、lighter、 100、200、300、400、500、600、700、800、900,默认值为normal, 表示正常粗细;bold表示粗体。也可以使用数值,范围为100至900,对应从 最细到最粗。normal相当于400,bold相当于700。如果使用bolder或lighter ,则表示相对于上一级元素中的字体更粗或更细。 – 字重(font-weight) 语法:font-weight : bold | number | normal 参数: bold为粗体,相当于number为700,也相当于b标记的作用。 number取值100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900。normal为正常的字体,相当于number为400,声明此值将取消之 前设置。 说明:设置文本字体的粗细。作用由用户端系统安装的字体的特定字体 变量映射决定,系统选择最近的匹配。也就是说,用户可能看不到不同 值之间的差异。

示例:P { font-weight: bold }
h1 { font-weight:800 }
?

77 网站设计技术 济南大学管理学院 信管系 杜培林

字体大小属性(font-size)
? ?

字体大小属性用来定义字体的大小。
可以使用的值包括绝对大小、相对大小、长度、百分比,其中使用长 度时单位又分为绝对单位[磅(pt)、毫米(mm)、厘米(cm)、帕 (pc)、英寸(in)]和相对单位[像素(px)、em]。


字号(font-size)
语法:font-size : 绝对尺寸 | 相对尺寸 | 百分数 参数:
– – –

绝对尺寸根据对象字体进行调节。可选xx-small |x-small| small | medium | large | x-large | xx-large 相对尺寸是相对于父对象中字体尺寸进行相对调节。 百分数取值是基于父对象中字体的尺寸。

示例:所有包含在<p>中<b>的文字的尺寸将是30points,因为<b>中的字号是相 对于<p>的字号(20pt)的1.5倍。
– – –

p { font-size: 20pt }
b { font-size: 1.5em } h3 { font-size: 20px }
网站设计技术 济南大学管理学院 信管系 杜培林 78

字体属性小结
?

字体格式属性确定格式化文本在 Web 浏览器中将如何显示 。可设置首选字体系列、字体大小和颜色,以及文本是否显 示为粗体、斜体或带下划线。可将字体格式设置属性添加到 在外部 CSS 样式表中定义的 CSS 样式规则,或添加到 Web 页<HEAD>部分的<STYLE>块中定义的 CSS 样 式规则。 若要将样式规则应用于 Web 页的<BODY>节中的

某个特 定 HTML 元素,需要将 CLASS 或 ID 属性添加到其值为 所需 CSS 样式规则选择器的元素的开始标记中。也可将 CSS 字体属性直接添加到支持 STYLE 属性的 HTML 元 素中。

?

?
?

注意:如果定义了BODY{}样式,则该页上所有未由内联样 式格式化的文本都将以指定样式显示。
下页表中列出了CSS样式中的可设置的字体属性。
79 网站设计技术 济南大学管理学院 信管系 杜培林

表2-3 字体属性 属性 font-family 属性含义 使用什么字 体 定义字体的 大小 定义字体的 粗细 字体是否用 小体大写 字体是否斜体
网站设计技术

属性值 所有的字体

font-size
font-weight fontvariant font-style

<绝对大小> | <相对大小> | <长度> | <百分比>absolute-size|relativesize|length|percentage normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal (普通)| small-caps(小型大写字 母) normal(普通) | italic(斜体) | oblique( 倾斜)

80

济南大学管理学院 信管系 杜培林

? 说明:字体大小属性其中: ?

<绝对大小>的允许值: | x-small | small | medium | large | xlarge | xx-large 需要谨慎 地考虑到其适应不同浏览环境时的弱点。对于一个用户 来说,绝对长度的字体很有可能会很大,或很小。 | smaller

? xx-small

? 绝对长度(使用的单位为pt-像素和in-英寸)

? <相对大小>的允许值: ? larger ? <长度> ? <百分比>是指与父元素的百分比关系
网站设计技术 济南大学管理学院 信管系 杜培林 81

?

<p style=“font-style:italic;font-variant:small-caps;fontweight: bold;font-size:36pt;font-family: GiltzyCurl”>Leaf</p> 其实字体属性中还一个“font”属性,可以实现简便定义。我们来看下 面这段代码: <p style=“font:italic small-caps bold 36pt,GlitzyCurl”>Leaf</p> 此代码产生的效果与上面等同。 但需要注意的是:如果您用<font>属性直接定义,一定要注意属性值 的排放顺序。 它的排放规则是按照“font-style”、“fontvariant”、“font-weight”、“font-size”、“font-family”的顺序 ,其中没有定义的以默认值显示。 其实我们习惯上还是不用FONT属性来统一定义,因为分开来定义的 代码虽然很长,但是看上去很直观,让人一看就知道定义的内容是什 么。
82 网站设计技术 济南大学管理学院 信管系 杜培林

?

?

?

?

<html><head><title>字体样式测试</title></head>

?
? ? ? ? ? ?

<body>
1<p style="font-family:lucida console">www.ujn.edu.cn</p> 2<p style="font-style:italic">www.ujn.edu.cn</p> 3<p style="font-style:oblique;font-weight:bold;fontsize:24pt"> www.ujn.edu.cn</p> 4<p style="font-style:oblique;font-weight:bold;fontsize:24pt;font-variant:small-caps">www.ujn.edu.cn</p> 5<p style="font:italic small-caps bold 36pt,Glitzy

Curl">www.ujn.edu. cn</p> </body></html>
83 网站设计技术 济南大学管理学院 信管系 杜培林

? 在上例中,第一行只是采用了“font-family”属性,这

行 代 码 定 义 了 “ www.whpu.edu.cn” 将 以 “ lucida console”的字体显示;第二行font-family为默认值, 而是定义了“font-style”属性为“italic”斜体;第三 行font-family为默认值,font-style为“oblique”, 另外还定义了“font-weight”属性为“bold”,“fontsize”属性为24pt(缺省情况下为absolute size绝对大 小); 第 四行只 是 在第三行 定义的基 础上又增 添了 “font-variant”属性为“small-caps”(小体大写)。 在指定的小体大写字体不存在的时候,CSS将用大写字 母代替所有的小写字母。
84 网站设计技术 济南大学管理学院 信管系 杜培林

? 值得注意的是:“font-variant”属性值“small-caps”



字体(font)

语法:font : font-style || font-variant || font-weight || font-size || line-height || font-family
参数:声明方式请参阅各参数对应的属性。

说明:设置对象中的文本特性。本属性是复合属性。声明方式参 数必须按照语法中的排列顺序。每个参数仅允许有一个值。忽略 时将使用其参数对应的独立属性的默认值。
示例:将<li>文字设置为尺寸12points,行高度16points,字型 采用宋体。使用字体属性时,必须设定字号和字型,但可以选择 是否设定行高度。设定的顺序必须严格按照语法中的顺序。

85 网站设计技术 济南大学管理学院 信管系 杜培林

?

<html><head><title>字体属性示例</title>

?
? ? ? ? ? ? ? ?

<style><!—
.s1{font-family:”黑体”;font-size:x-large;font-style:italic} .s2{font-size:large} .s3{font-variant:small-caps} .s4{font-weight:bolder} --> </style></head> <body> <p class="s1">生活最沉重的负担,不是工作,而是——无聊。 </p> <p class="s2">我需要工作,工作就是我的生活。</p> <p class="s3">life means struggle。</p> <p class="s4">学者贵于行之,而不贵于知之。</p> </body></html>
网站设计技术 济南大学管理学院 信管系 杜培林 86

? ? ? ?

二、文本属性
? 文字间隔属性(word-spacing) ? 文字间隔属性定义一个附加在文字(单词)之间的间隔数

量。该值必须符合长度格式,允许使用负值。
? 需要特别说明的是,该属性是针对英文单词的间隔,而不

是中文的文字间隔,中文的文字间隔应该用下面讲到的 letter-spacing。同时在中文版的IE浏览器中也不支持该 属性。

87 网站设计技术 济南大学管理学院 信管系 杜培林

字母间隔属性(letter-spacing)
? 字母间隔属性定义一个附加在字符之间的间隔数

量(间距)。它的取值可以是normal或具体的长 度值(该值必须符合长度格式),

也可以是负值 。默认值为normal,表示浏览器根据最佳状态调 整字符间距。一个设为0的值会阻止显示文字时的 间隔调整。

88 网站设计技术 济南大学管理学院 信管系 杜培林

纵向排列属性(vertical-align)
? 纵向排列属性可以用来定义一个内部元素的纵向

位置,相对于它的上级元素或者相对于元素行。
? 该值可以是一个相对于元素行高属性的百分比,

它会在上级基线上增高元素基线的指定数量。允 许使用负值,也可以是一个关键字。该属性对于 图像设置特别有用。

89 网站设计技术 济南大学管理学院 信管系 杜培林

文本排列属性(text-align)
? 指定了所选元素的对齐方式(类似于HTML标记符

的align属性),取值可以是:left 、right、 center、,分别表示左对齐、右对齐、居中对齐 和两端对齐。此属性的默认值依浏览器的类型而 定。若浏览器不支持justify属性。则使用左对齐 或者右对齐代替。

align vt. 1. 把...排列(成一行),排成直线 2. 使结盟;使密切合作 3. 【物】匹配;调准,校直
网站设计技术 济南大学管理学院 信管系 杜培林

90

文本缩进属性(text-indent)
? 文本缩进属性可以应用于块级元素(P,H1等)

,以定义该块级元素第一行可以接受的缩进数量 。该值必须是一个长度或者百分比。若为百分比 则视上级元素的宽度而定。该属性常用于段落的 缩进。此属性的默认值是0,表示无缩进。

91 网站设计技术 济南大学管理学院 信管系 杜培林

文字修饰属性(text-decoration)
?

文字修饰属性可以对特定选项的文本进行修饰,它的取值为:none、 underline、overline、line-through、blink,默认值为none,表示不加 任何修饰。underline表示添加下划线;overline表示添加上划线;linethrough表示添加删除线;blink表示添加闪烁效果。 另外IE浏览器并不支持文字修饰属性值blink(闪烁)。


?

文字修饰(text-decoration)
语法:text-decoration : underline || blink || overline || line-through | none 参数:underline为下划线,blink为闪烁,overline为上划线,line-through为 贯穿线,none为无装饰。 说明:设置对象中文本的修饰。对象a、u、ins的文字修饰默认值为underline 。对象strike、s、del的默认值是line-through。如果应用的对象不是文本, 则此属性不起作用。 示例:div { text-decoration : underline overline; }h1 { text-decoration : underline; }
网站设计技术 济南大学管理学院 信管系 杜培林

92

行高属性 (line-height)
? 行高属性决定了相邻行之间的间距。其取值可以

是数字、长度或百分比,默认值是normal。当以 数字指定值时,行高就是当前字体高度与该数字 相乘的倍数。如果指定具体的长度值,则行高为 该

值。如果用百分比指定行高,则行高为当前字 体高度与该百分比相乘。该属性不允许使用负值 。

93 网站设计技术 济南大学管理学院 信管系 杜培林

文本转换属性(text-transform)
? ?

文本转换属性,也叫文字变形,用于转换文本,取值为:capitalize 、uppercase、lowercase、none,默认值是none表示使用原始值。 capitalize值表示所选元素中文本的每个单词的首字母以大写显示; uppercase值表示所有的文本都以大写显示;lowercase值表示所有文 本都以小写显示。 – 文字变形(text-transform) 语法:text-transform: uppercase | lowercase | capitalize | none 参数:uppercase使所有字母大写显示,lowercase使所有字母小 写显示,capitalize使每个单词的第1个字母大写显示,none使所 有继承的文字变形参数被忽略,文字将以原来的形式显示。 说明:设置字母的大小写。 示例:h1 { text-transform: uppercase } b { text-transform: capitalize }
94 网站设计技术 济南大学管理学院 信管系 杜培林

? 文本属性 – – – – – – –

letter-spacing属性:字符间距; line-height属性:相邻行之间的间距; text-align属性:所选元素的对齐方式; text-decoration属性:对特定选项的文本进行修饰; text-indent属性:对特定选项的文本进行首行缩进; vertical-align属性:所选元素的垂直对齐方式; text-transform属性:用于文本转换。

95 网站设计技术 济南大学管理学院 信管系 杜培林

文本属性小结

96 网站设计技术 济南大学管理学院 信管系 杜培林

?

说明:在垂直对齐的属性值的说明如下:

?
? ? ? ? ?

baseline(使元素和上级元素的基线对齐)
middle(纵向对齐元素基线加上上级元素的x-高度——字母" x " 的高度——的一半的中点) sub(下标) super(上标) text-top(使元素和上级元素的字体向上对齐) text-bottom(使元素和上级元素的字体向下对齐)

?
? ?

影响相对于元素行的位置的关键字有
top(使元素和行中最高的元素向上对齐) bottom(使元素和行中最低的元素向下对齐)
97 网站设计技术 济南大学管理学院 信管系 杜培林

? <html><head><title>文本样式测试</title></head> ? <body> ? <p

style="letter-spacing:1em;textalign:justify;text-indent:4em;line-height:17pt">

? 济南大学WEB服务器的域名为:www.ujn.edu.cn;</p> ? </body></html>

98 网站设计技术 济南大学管理学院 信管系 杜培林

<html><head><title>文本属性示例</title><style> <!—

.s1{letter-spacing:10px}
.s2{line-height:400%} .s3{text-align:center} .s4{text-decoration:underline overline}/*同时显示下划线和上划线*/ .s5{text-indent:75cm} .s6{text-transform:uppercase} <p class="s1">Success</p> --></style></head><body>

<p class="s2">伟大人物最明

显的标志,就是他坚强的意志。</p>
<p class="s3" >天才就是耐心。</p> <p class="s4">人思考越多,话越少。</p> <p class="s5">有许多人是用青春的幸福作为成功的代价的。</p> <p class="s6">Idleness makes the wit rut.</p></body></html>

99 网站设计技术 济南大学管理学院 信管系 杜培林

100 网站设计技术 济南大学管理学院 信管系 杜培林

说明
?

上图我们看到经过文本属性处理的文本字与字之间多了间距, 行与行之间多了行高,对齐方式变成了两端对齐,并且段首又 多缩进了两格。这是怎样实现的呢?很简单,只是在html中加 了如下的代码: <p style="letter-spacing:1em;text-align:justify;textindent:4em;line-height:17pt">济南大学是一所省属综合性大 学,实行省、市共建,以省为主的管理体制。学校以本科教育 为主,积极发展研究生教育,具有学士、硕士学位授予权,面 向全国招生和就业。中国科学院院士、材料学家蒋民华教授任 学校名誉校长。</p>

?

<!--letter-spacing设置了字间距为1em,其中1em为一个长度 单位;text-align设置了对齐方式为两端对齐;indent设置了缩 进格为4em;line-height设置了行高为17pt-->
101 网站设计技术 济南大学管理学院 信管系 杜培林

102 网站设计技术 济南大学管理学院 信管系 杜培林

三、颜色与背景属性
?
?

1.background属性
background属性是一个组合属性,可用于同时设置 background-color、background- image、back2roundattachment、background-position、background-repeat等 背景属性。 2.background-color属性 用于设置HTML元素的背景颜色。此属性的默认值是 transparent,表示没有任何颜色,此时上级元素的背景可以在 子元素中显示出来。 3.background-image属性 用于设置HTML元素的背景图案,取值为url或none。默认值为 none,即没有背景图案。该属性相当于HTML中BODY标签的 background属性,只是它可以定义更多元素的背景图像。
网站设计技术 济南大学管理学院 信管系 杜培林

? ?

? ?

103

?

4.background-attachment属性

?

用于控制背景图像是否随内容一起滚动,取值为scroll、fixed。默认 值为scroll,表示背景图案随着内容一起滚动;fixed表示背景图案静 止,而内容可以滚动。
5.background-position属性 用于指定背景图案相对于关联区域左上角的位置。该属性通常指定由 空格隔开的两个值。 6.background-repeat属性

? ?

?

?

表示当使用背景图案时,背景图案是否重复显示。取值可以是: repeat表示在水平方向和垂直方向都重复,即像铺地板一样将背景图 案平铺;repeat-x表示在水平方向上平铺;repeat-y表示在垂直方 向上平铺;no-repeat表示不平铺,即只显示一幅背景图案。
104 网站设计技术

济南大学管理学院 信管系 杜培林

? 2.

颜色和背景

? 背景属性通过更改颜色或包含图像来控制背景。如果采

用图像作为 Web 页的背景,也可指定其位置和平铺 属性。通过组合使用这两种属性,可确定背景图像在页 面上的位置以及图像显示的频率。表2-4中列出了CSS 的颜色和背景属性。

105 网站设计技术 济南大学管理学院 信管系 杜培林

表2-4 CSS的颜色和背景属性

106 网站设计技术 济南大学管理学院 信管系 杜培林

举例子
? <html><title>link ? </head><body ? <p

css</title><head>

style="backgroundcolor=yellow;background-image:url(top.jpg);"> style=backgroundcolor:rgb(204,82,28);color:green;

? >Leaf</p></body></html>

107 网站设计技术 济南大学管理学院 信管系 杜培林

四、布局属性(自学)
? 1.边框属性 ? 所有网页上的元素都有边框,只是大部分缺省没有显示出

来。CSS边框属性设置包括三项:边框颜色(color)、边 框样式(style)和边框宽度(width),而边框又包括四 个方向:上(top)、下(bottom)、左(1eft)和右( right)。将边框设置和方向组合起来,则构成了多种属性 。如:border-bottom、border-bottom-color、 border-bottom-style、border-bottom-width、 border-right-color、border-right-style、borderright-width等等。

108 网站设计技术 济南大学管理学院 信管系 杜培林

? 2.边界属性 ? CSS边界属性包括边界margin、下边界margin-bottom、

左边界margin-left、右边界margin- right以及上边界 margin-top。

? margin-left、margin-fight、margin-top和margin-

bottom属性可以分别用来设置左、右、上、下边界的宽度 ,它们的取值可以是长度、百分比或auto。 界的宽度。

? margin属性可以同时指定上、右、下、左(以此顺序)边

109 网站设计技术 济南大学管理学院 信管系 杜培林

? 3.填充属性
? CSS填充属性包括填充padding、左填充padding-left、

右填充padding-right、上填充padding-top以及下填充 padding-bottom。
? padding-left、padding-right、padding-top和padding-

bottom这四个属性用于设置左、右、上、下填充区的宽度 ,取值可以是长度和百分数。 的宽度。

? padding属性用于同时指定上、右、下、左四个方向填充

110 网站设计技术 济南大学管理学院 信管系 杜培林

? 4、浮动属性 ? CSS浮动属性包括float和clear。float属性可以将元素的

内容浮动到页面左边缘或右边缘,该属性的取值为:none 、left、right,默认值为none。clear属性指定了元素是 否允许浮动元素在它旁边,取值可以是:none、left、 right、both,默认值为none,表示允许浮动元素在其旁 边;left表示跳过左边的浮动元素;right表示跳过右边的 浮动元素,both表示跳过所有的浮动

元素。

111 网站设计技术 济南大学管理学院 信管系 杜培林

五、定位和显示属性
? 1.定位属性和宽高属性 ? CSS定位属性包括position、top、bottom、left、right

和z-index,宽、高属性包括width和height。
? position属性用来规定元素怎样在Web页上定位,它的取

值为:static(默认值)、relative或absolute。
? top和left属性用来规定某个元素与其他元素之间的距离。 ? width和height属性可以控制元素的宽度和高度,此时

position属性必须指定为absolute。

112 网站设计技术 济南大学管理学院 信管系 杜培林

? 2.显示属性 ? 在CSS中,有两个属性可以控制元素的显示和隐藏,即

display属性和visibility属性。

? display属性确定一个元素是否应绘制在页面上,它的取值

有多个,但在一般的浏览器中,只有一个none值可以使用 。
? visibility属性有时也被分类为定位属性,用来控制定位的

元素是否可见,取值包括:visible(可见)、hidden(隐 藏)和inherit(继承),默认值为inherit。

113 网站设计技术 济南大学管理学院 信管系 杜培林

六、鼠标属性
? CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形

状。通常情况下,鼠标呈指向左上方的箭头,而当鼠标移 到超链接上时呈手的形状。有了鼠标样式属性,用户就可 以随意地设定鼠标的形状。
? CSS的鼠标样式是通过cursor样式表属性定义的,格式为


? cursor:属性值
? 用CSS来改变鼠标的属性,就是当鼠标移动到不同的元素对

象上面时,让鼠标以不同的形状、图案显示。

114 网站设计技术 济南大学管理学院 信管系 杜培林

?

在CSS当中,这种样式是通过“cursor”属性来实现的。Cursor属 性有很多的属性值,详细列表如下: 属性值 Auto Crossshai r Default Hand Help Move E-resize Ne-resize Nw-resize n-resize Se-resize Sw-resize s-resize text wait
网站设计技术

说明 自动,根据默认状态自行改变 十字线光标。 默认光标,通常为箭头光标。 手型光标。 “帮助”光标,它是箭头和问号的组合。 移动 箭头朝右方。 箭头朝右上方。 箭头朝左上方。 箭头朝上方。 箭头朝右下方。 箭头朝左下方。 箭头朝下方。 文本“I”型 等待
济南大学管理学院 信管系 杜培林

115

?

下面来看一段鼠标指针在不同文字对象对应于不同显示的代码:

?
? ?

<html><head><title>changemouse</title></head><body>
<h1 style="font-family:文鼎新艺体简">鼠标效果</h1> <p style="font-family:行书体;font-size:16pt;color:red">请把鼠标移到 相应的位置观看效果。</p> <div style="font-family:行书体;font-size:24pt;color:green;"> <p><span style="cursor:hand">手的形状</span><br> <span style="cursor:move">移动</span><br>

? ? ?

?
? ?

<span style="cursor:ne-resize">反方向</span><br>
<span style="cursor:wait">等待</span><br> <span style="cursor:help">求助</span></p></div></body></html>
116 网站设计技术 济南大学管理学院 信管系 杜培林

七、列表样式属性(略,自学)
? 列表样式属性用于设置页面中的列表格式。CSS中的列表

样式属性包括:list-style、list-style-type、liststyle-image以及list-style-position。
? list-style-type属性用于设置项目符号和编号样式,取值

为:disc(默认值,实心黑点)、circle(空心圆圈)、 square(方块)、decimal(十进制数1,2,3等)、 lower-roman(小罗马数字)、upper-roman(大罗马数 字)、lower-alpha(小写字母)、upper--alpha(大写 字母)和none(无)。

117 网站设计技术 济南大学管理学院 信管系 杜培林

八、CSS滤镜
? 滤镜(filter)是CSS的一种扩充,也叫CSS过滤器效果

。使用这种技术只用几句代码就可以把类似于Photoshop 中的滤镜效果添加到图片、文本等HTML元素上。
? filter样式表的属性定义为:

? filter:过滤器名称(参数)
? 过滤器是CSS的一种扩充,它能够将特定的效果应用于文

本容器、图片或其他对象。
? 例如,可以创建阴影效果、模糊效果、翻转效果等。

118 网站设计技术 济南大学管理学院 信管系 杜培林

119 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

<html><head><title> shadow</title> <style>/*开始设置CSS样式*/ <!-.shadow{position:absolute;top:20;width:300; filter:shadow(color=#cc66ff,direction=225);}

/*定义Shadow类的样式,绝对定位,Shadow属性,阴影颜色、投影方向*/
.dropshadow{position:absolute;top:180;width:300; filter:dropshadow(color=#cc66ff,offx=10,offy=10,positive=1);} /*设置Dropshadow类的样式,样式与Shadow类相似, 不同的是滤镜用了

Dropshadow属性,设置X轴和Y轴的偏移量*/
--> </style></head><body> <div class="shadow"><!--区域内为Shadow类--> <p style="font-family:bailey;font-size:48pt;

font-weight:bold;color:#FF9900;">
Hongen Online</p><!--定义字体名称、大小、粗细、前景色--> </div> <div class="dropshadow"><!--区域内为Dropshadow类--> <p style="font-family:bailey;font-size:48pt;fontweight:bold;color:#FF9900;"> Hongen Online</p><!--定义字体样式与Shadow类的一样--> </div></body></html>
网站设计技术 济南大学管理学院 信管系 杜培林 120

121 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ? ? ?

<html><head><title> mask filter </title> <style>/*设置CSS样式开始*/ <!-div{position:absolute;top:20;left:40; filter:mask(color:#666699);} /*定义DIV区域的样式,绝对定位,mask属性的color参数值指定用什么 颜色遮住对象*/ p{font-family

:bailey;font-size:72pt; font-weight:bold;color:#FF9900;} /*定义P区域内的样式,字体名称、大小、粗细、前景色*/ --> </style> </head><body><div> <p> yellow leaves </p>

? ? ? ? ? ?

?

</div> <br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>原图: yellow leaves </p></body></html>
122 网站设计技术 济南大学管理学院 信管系 杜培林

?

123 网站设计技术 济南大学管理学院 信管系 杜培林

CSS属性单位
? 长度单位 – – – – – – – –

cm:厘米 em:当前字体中m字母的宽度 ex:当前字体中x字母的高度 in:英寸 mm:毫米 pc:皮卡,1皮卡=12点 pt:点,1pt=1/72英寸 px:像素
124 网站设计技术 济南大学管理学院 信管系 杜培林

CSS的长度单位
? ?

1. 长度单位 一个长度的值由可选的正号“+”或负号“-”、接着的一个数字、还有标明单位的两个字母 组成。在一个长度的值之中是没有空格的,例如,1.3em就不是一个有效的长度的值,但1.3em 就是有效的。一个为零的长度不需要两个字母的单位声明。 无论是相对值还是绝对值长度,CSS1都支持。相对值单位确定一个相对于另一长度属性的长度 ,因为它能更好地适应不同的媒体,所以是首选的。以下是有效的相对单位: em(em,元素的字体的高度) ex(x-height,字母 “x‖ 的高度) px(像素,相对于屏幕的分辨率) 绝对长度单位视输出介质而定,所以逊色于相对单位。以下是有效的绝对单位: in(英寸,1英寸=2.54厘米) cm(厘米,1厘米=10毫米) mm(米) pt(点,1点=1/72英寸) pc(帕,1帕=12点) 125 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ? ? ? ? ? ? ?

?

百分比单位

?

一个百分比值由可选的正号“+”或负号“-”、接着的一个数字, 还有百分号“%”。在一个百分比值之中是没有空格的。
百分比值是相对于其它数值,同样地用于定义每个属性。最经常使用 的百分比值是相对于元素的字体大小。 颜色单位 – 颜色名:直接使用标准色彩名称 – #RRGGBB:使用两位十六进制表示颜色中的红、绿、蓝含量; – #RGB:使用一位十六进制表示颜色中的红、绿、蓝含量; – #RGB(RRR,GGG,BBB):使用10进制的数表是颜色的红绿蓝的含 量,其中RRR,GGG,BBB都是0~255的十进制数; – RGB (RRR%,GGG%,BBB%):使用百分比表示颜色的红绿蓝含量。
126 网站设计技术 济南大学管理学院 信管系 杜培林

?

?

CSS的颜色单位
? ? ?

颜色单位 颜色值是一个关键字或一个RGB格式的数字。 Windows VGA(视频图像阵列)形成了16个关键字: aqua,black,blue, fuchsia,gray,green, lime,maroon,navy,olive, purple,red ,silver,teal,white,and yellow。 RGB颜色可以

有四种形式: #rrggbb(如,#00cc00) #rgb(如,#0c0) rgb(x,x,x),其中x是一个介乎0到255之间的整数(如,rgb(0,204,0 )) rgb(y%,y%,y%)y 是 一 个 介 乎 0 . 0 到 1 0 0 . 0 之 间 的 整 数 ( 如 , rgb( 0%,80%,0%)) 上述的例子指定同一颜色。
127 网站设计技术 济南大学管理学院 信管系 杜培林

? ? ? ?

?

?

Css之二维定位属性用法(补充1/2)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

<html> <head><title>二维定位属性用法</title> <style type="text/css"> p { font-size:12pt; color:green; } div.block1 { position:absolute; top:80; left:120; width:200;height:200; background-color:#ddeeff; } img.pos1 { position:relative; top:20; left:20; width:80;height:80; } div.block2 { position:absolute; top:80; left:420; width:200;height:200; background-color:#ddeeff; } img.pos2 { position:absolute; top:20; left:20; width:80;height:80; } </style></head> <body> <div class="block1"><img class="pos1" src="images\img1.gif"><br> <p>这是一幅鲜花图象。</p></div> <div class="block2"><img class="pos2" src="images\img1.gif"><br> <p>这是一幅鲜花图象。</p></div> </body></html>

128 济南大学管理学院 信管系 杜培林

网站设计技术

129 网站设计技术 济南大学管理学院 信管系 杜培林

Css之三维定位属性用法
? ?

<html> <head><title>三维定位属性用法</title>

?
? ? ? ? ?

?
? ? ? ? ?

?
? ? ? ? ? ? ? ? ?

<style type="text/css"> span { font-size:18pt;} span.level2 { position:absolute; z-index:2; left:100;top:100; color:red;} span.level1 { position:absolute; z-index:1; left:101;top:101; color:green;} span.level0 { position:absolute; z-index:0; left:102;top:102; color:yellow;} p.lev1 { position:absolute; top:200;left:150; z-index:2; font-size:34pt;color:blue;} p.lev2 { position:relative; top:202 ;left:150; z-index:-2; font-size:28pt;color:darkred; } </style> </head> <body> <span class="level2">三维定位属性用法。</span> <span class="level1">三维定位属性用法。</span> <span class="level0">三维定位属性用法。</span> <p class="lev1">文字的重叠显示</p> <p class="lev2">文字的重叠显示</p> </body> </html>

130

网站设计技术

济南大学管理学院 信管系 杜培林

Css之三维定位属性用法(补充2/2)待修正
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

<html> <head><title>三维定位属性用法</title> <style type="text/css"> span { font-size:18pt;} span.level2 { position:absolute; z-index:2; left:100;top:100; color:red;} span.level1 { position:absolute; z-index:1; left:101;top:101; color:green;} span.level0 { position:absolute; z-index:0; left:102;top:102; color:yellow;} p.lev1 { position:absolute; top:200;left:150; z-index:2; font-size:34pt;color:blue;} p.lev2 { position:relative; top:202 ;left:150; z-index:

-2; font-size:28pt;color:darkred; } </style> </head> <body> <span class="level2"><img class="level2" src="images\img1.gif">三维定位属性用法。</span> <span class="level1"><img class="level1" src="images\img1.gif">三维定位属性用法。</span> <span class="level0"><img class="level0" src="images\img1.gif">三维定位属性用法。</span> <p class="lev1"><img class="lev1" src="images\img1.gif">文字的重叠显示</p> <p class="lev2"><img class="lev2" src="images\img1.gif">文字的重叠显示</p> </body> </html>

131

网站设计技术

济南大学管理学院 信管系 杜培林

在Dreamweaver 中使用CSS样式
?

1 CSS样式面板

?

选择“窗口”|“CSS样式”命令可以打开“CSS样式”面板,如图所 示。

新建一个CSS样式表

重新定义HTML标签

设置页面背景颜色

设置链接颜色 应用CSS样式
132

网站设计技术

济南大学管理学院 信管系 杜培林

?

CSS样式建好之后,接下来就是要把它应用到文档中去。对于自定义 的样式,需要将新样式应用到相应的对象上,而重新定义的HTML标 签样式是不需要应用的,只要选择相应的标签样式就能自动应用新样 式。 应用CSS样式的方法如下:

?

?

将插入点移到需要套用样式的文本段落中,单击CSS样式面板上的 CSS样式,则插入点所在的段落的文字就应用了新样式。

133 网站设计技术 济南大学管理学院 信管系 杜培林

?

修改样式

?

若要修改CSS样式,首先打开CSS样式面板“编辑样式”视窗,这时 所有的CSS样式(包括自定义的CSS样式和重新定义HTML标签)都 出现在面板上。然后采用如下两种方法之一,打开样式定义对话框进 行编辑修改。 (1)在CSS样式面板上双击该样式名。
(2)选中要修改的CSS样式,单击CSS样式面板右下角的编辑样式按 钮 。

?
?

134 网站设计技术 济南大学管理学院 信管系 杜培林

链接外部CSS样式表
?

链接一个外部样式表的操作步骤如下:

?
?

(1)选择“窗口”|―CSS样式”命令,打开CSS样式面板。
(2)单击该面板上的“附加样式表”按钮,或单击该面板顶部右边的 三角按钮,从弹出的菜单中选择“附加样式表”命令,出现“链接外 部样式表”对话框。 (3)在该对话框中选择“添加为”“链接”,并在“文件/URL‖文本 框中输入外部样式表文件名,或单击“浏览”按钮选择外部样式表文 件(外部样式表文件必须以.css为扩展名),单击“确定”按钮。

?

135 网站设计技术 济南大学管理学院 信管系 杜培林

一个网页制作者希望视其语言而定,用不同的颜色显示 代码: font.html{color:red} font.css{color:blue}
? ? ? ? ?

<html>
<head> <title>试验选择符的效果</title> <style> font.html{color:red}

?
? ? ? ? ? ?

? ?

font.css{color:blue}
</style> </head> <body>

<p><font class=html>这里是html类的效果</font></p>
<p><font class=css>这里是css类的效果</font></p> <p>这里是没有使用类的效果,理解了类选择符的意义了吗?</p> </body> </html> 136 网站设计技术 济南大学管理学院 信管系 杜培林

137 网站设计技术 济南大学管理学院 信管系 杜培林

附:blink
blink vi. 1. 眨眼睛;眯着眼看[(+at)] 2. 闪亮,闪烁 The light blinked through darkness. 灯光在黑暗中闪烁不停。 3. 视若无睹;惊愕地看[(+at)] The girl blinked at the height of the basketball player. 这女孩对那个篮球运动员的身 高感到惊讶。 vt. 1. 眨(眼睛);眨眼睛挤掉(眼泪等 ) Little Tom blinked his eyes in surprise. 小汤姆惊奇地眨着眼睛。 2. 使闪烁,使闪光
网站设计技术

3. 对...视而不见;躲避 It is no use blinking the fact that inflation keeps getting worse. 不能无视通货膨胀日益恶化这 一事实。 4. 以闪光信号表示 n.[C] 1. 眨眼睛,一瞥 2. 一瞬间 The boy disappeared around the corner in a blink of an eye. 一眨眼,这男孩就在拐角处不见 了。 3. 闪光

138 济南大学管理学院 信管系 杜培林

CSS样式表组成
? CSS的定义由三部分构成:选择符selector、属性

property和属性值value。其基本格式如下:

? ?

selector{property l:value l;property 2:value 2;……}

其中selector(选择符)表示需要应用样式的内容, property表示由CSS标准定义的样式属性,value表示样式 属性的值。

139 网站设计技术 济南大学管理学院 信管系 杜培林

级联式样式表(CSS)
HTML 文档提供 美观而一致的外观。通过将许多Web页链接到同一个 外部样式表,就可以为整个 Web 站点定义一致的外 观和感受。 大多数的CSS样式属性。使用CSS样式定义HTML页和 Web窗体中元素和文本的外观和位置。可将style属性 以内联方式添加到许多HTML元素上,还可将CSS样式 嵌入到<STYLE>块中或存储在外部级联式样式表( .css)文件中。
140 网站设计技术 济南大学管理学院 信管系 杜培林

? 级联式样式表(CSS)样式有助于为

? 任何支持HTML4.0或更高版本的Web浏览器都会支持

样式表概述
? 样式表由一些具体的样式属性所组成的,如颜色属性、位

置属性或者文本属性等,并由这些样式属性来精确、详细 地格式化文档的显示
? 样式表中可以用位置属性,控制元素在页面中的具体位置 ? 样式表可以添加相关的样式属性来描述指定的样式,所以

这就使得样式表的应用极其灵活、多样。还可以使不同的 页面达到比较一致的显示效果。
? 样式表由<STYLE>标记及其属性来实现的,使用标记或

者属性可以指定任意的样式属性来组成样式表。

141 网站设计技术 济南大学管

理学院 信管系 杜培林

样式规则
? 样式表主要是通过把各种样式属性按照要求组合到一起,

形成对指定元素的样式修饰。
? 放在一起的样式属性就构成了样式规则,他们规定了指定

元素在页面中的显示样式。
? 样式规则的格式为: ? 属性名1:属性值1:属性名2:属性值2;……属性名n:属

性值n
? 属性名和属性值之间使用冒号,不同的属性之间使用分号

。最后一个属性值后可以不加分号。所有的属性都用{ }包 含起来。
142 网站设计技术 济南大学管理学院 信管系 杜培林

定义CSS
?

级联式样式表(CSS)包含应用于HTML文档中元素的样式定义。 CSS样式定义元素的显示方式以及在页中放置元素的位置。可以创 建一个通用规则,只要Web浏览器遇到一个元素实例,或是一个分 配给某个样式 CLASS的元素,该规则就立刻应用属性,而不是将 属性逐个分配给页中的每个元素。

?

CSS 样式可以通过内联方式放置在单个 HTML 元素内,也可以 在 Web 页 HEAD 部分的 <STYLE> 块内加以分组,或从单独 的 CSS 样式表文件中导入。同一个外部样式表文件可链接到很 多 Web 页,从而使整个 Web 站点具有统一的外观。
级联式样式表主要分为内部级联和外部级联。 内部级联是指在HTML文档代码中直接使用样式标记或者样式属 性来描述元素的样式, 外部级联是指通过引用在HTML文档以外建立的样式表来描述文 档元素。
143 网站设计技术 济南大学管理学院 信管系 杜培林

? ?

?

CSS样式的定义
? 样式定义的基本结构:

Selector{property1:value1;property2:value2,……}
? Selector:也称为选择符、选择器,表示需要应用样式的

内容;
? Property:表示由CSS标准定义的样式属性,即希望修改

的属性,如color属性;
? Value:表示样式属性的值,即希望赋予property的值,

如color=red。
? 举例:A{color:red}

144 网站设计技术 济南大学管理学院 信管系 杜培林

id方法与class方法的使用
<HTML><HEAD><TITLE>id方法与class方法的使用与区别!</TITLE> <STYLE type="text/css"> <!-.classstyle{font-family:"黑体"; font-size:14pt;

color:blue}
#idstyle{font-family:"隶书"; font-size:20pt; color:green}

--> </STYLE> </HEAD><BODY>
<P class="classstyle" align=center>使用class方法定义P</P> <CENTER><FONT id="idstyle">使用id方法定义FONT!</FONT> </BODY></HTML>
145 网站设计技术 济南大学管理学院 信管系 杜培林

图: id和class的使用和区别

146 网站设计技术 济南大学管理学院 信管系 杜培林

在 STYLE 块内定义 CSS 样式规则
? ?

1. 在 STYLE 块内定义 CSS 样式规则 每个 CSS 样式规则都有两个主要部分:选择器(如 H1)和声明 (如 color:red)。声明包括属性(color) 和属性

的值(red) 。例如一条说明“将 <H1></H1> 标记内包含的所有文本设置为 居中,并采用红色字体颜色”的简单 CSS 样式规则可以写成: H1 {text-align:center; color:red;} CSS 样式规则可以在 HTML 文档 <HEAD> 部分的 <STYLE> 块内定 义。以下是一个示例(运行结果如图2-14所示),它定义了一条 CSS 样式规则,并将该规则应用到 Web 页上的所有 <H1> 元素: < HTML><HEAD><TITLE>HTML Example</TITLE> 4.0 CSS Element Style

? ?

? ? ? ?

<STYLE color:red;}
</STYLE>

TYPE="text/css">

H1

{text-align:center;

</HEAD><BODY>

?
?

<H1>This text is centered and red</H1>
</BODY></HTML> 网站设计技术
济南大学管理学院 信管系 杜培林

147

例子说明
?

在上面 Web 页的例子中,任何出现在 <H1></H1> 标记内的文本都将居中并显示为 红色。因此,每当文档中出现 <H1> 标记时,不再需要重复地重新分配这些样式属 性。另外,如果想更改 <H1></H1> 标记内所有文本的颜色(或任何其他属性),则 只需简单地编辑一条样式规则即可。

148 网站设计技术 济南大学管理学院 信管系 杜培林

CSS 样式规则的优先级
2. CSS 样式规则的优先级 CSS 样式规则从一定意义上讲是“级联”的,即全局样式规则会一直应用于 HTML 元素,直到有局部样式规则将其取代为止。一般而言,局部样式规则的优先级高于 通用样式规则。举例来说,在某 Web 页的 STYLE 块内定义的样式,可为该页修改 外部 CSS 样式表中定义的 Web 站点样式。同样,在该页的单个 HTML 标记内定义 的行内样式,可为单行修改在其他地方为同一元素定义的任何样式。 在局部样式应用于 HTML 元素之后,全局样式规则中不与局部 CSS 样式规则冲突 的部分继续应用于这些元素。在上例中,控制 <H1> 标记中文本的局部 CSS 样式 替换 Web 浏览器针对 <H1> 文本的某些全局样式规则(使 <H1> 文本居中并显示 为红色),但局部 CSS 样式并不更改其他全局样式规则(所有 <H1> 文本继续以 较大字体和粗体样式显示)。全局样式规则和局部样式规则都按照该顺序应用,其 结果是该页中的所有 <H1> 文本都以较大字体、加粗、居中且红色的样式显示。

? ?

?

149 网站设计技术 济南大学管理学院 信管系 杜培林

将 HTML 元素分配给 CSS 样式 CLASS
? ?

3. 将 HTML 元素分配给 CSS 样式 CLASS 每当文本出现在分配给特定 CLASS 的 HTML 标记中时,就会自动应用 CSS 样式。 在 <STYLE> 块中,CLASS 样式规则的选择器以一个句点开始。例如: . head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;} 若要以内联方式应用这种类型的样式,请向支持内联样式的标记添加 CLASS 属性 :

?

?

? ?

<DIV CLASS="head2">

为 CLASS 属性值输入的字符串,应与该页所应用样式规则的选择器相匹配。以 下是一个页示例,它定义和应用了名为 head2 的 CSS 样式 CLASS:

150 网站设计技术 济南大学管理学院 信管系 杜培林

css例子1
? ? ? ?

<HTML> <HEAD> <TITLE>HTML 4.0 CSS Style Class Example</TITLE> <meta content="Internet Explorer 5.0" name="vs_targetSchema">

?
? ? ?

<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:9pt;} A:link {color:blue; text-decoration:none} A:active {color:red; text-decoration:none}

?
? ? ?

A:visited {color:green; text-decoration:none}
.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; fontstyle:italic;} </STYLE> <LINK REL=stylesheet Type="text/css" HREF="mystyles.css">

?
? ?

</HEAD>
<BODY> <DIV CLASS="head2">This text is centered, large, red <SPAN style="color:green; font-style:normal; text-decoration:underline;">and green</SPAN>, bold, and italic</DIV>

? ?

</BODY>
</HTML> 网站设计技术 济南大学管理学院 信管系 杜培林 151

说明
?

CLASS head2 的所有样式规则都应用于 <DIV> 中所包含的文本。由于在 <BODY> 中的一个标记内定义的内联样式的优先级高于 <HEAD> 中定义的 <STYLE> 块样式,因此文本“and green‖将以绿色、不加粗且带下划线的样式显 示。

152 网站设计技术 济南大学管理学院 信管系 杜培林

外部 CSS 样式表
? ? ? ?

4. 外部 CSS 样式表 外部 CSS 样式表文档是只包含样式规则、以 .css 为扩展名的纯文

网站设计技术 济南大学管理学院 信管系 杜培林

id 选择器
? id ? id

选择器可以为标有特定 id 的 HTML 元素指定特定的 样式。 选择器以 "#" 来定义。 id 选择器,第一个可以定义元素的颜色为红 色,第二个定义元素的颜色为绿色: {color:red;} #green {color:green;} 下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。 id="red">这个段落是红色。</p> <p id="green">这 个段落是绿色。</p>

? 下面的两个 ? #red

? <p

?

注意:id 属性只能在每个 HTML 文档中出现一次。
网站设计技术 济南大学管理学院 信管系 杜培林

156

id 选择器和派生选择器
?

在现代布局中,id 选择器常常被用来建立派生选择器。

?

#sidebar p { font-style: italic;
text-align: right; margin-top: 0.5em; }

?

上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元 素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他 块级元素。它甚至可以是一个内联元素,比如 <em></em> 或者 <span></span>,不过这样的用法是非法的,因为不可以在内联元素 <span> 中嵌入 <p>

157 网站设计技术 济南大学管理学院 信管系 杜培林

一个选择器,多种用法
? 即使被标注为 ? #sidebar

sidebar 的元素只能在文档中出现一次,这 个 id 选择器作为派生选择器也可以被使用很多次: p { font-style: italic; text-align: right; margin-top: 0.5em; }

?

#sidebar h2 { font-size: 1em; font-weight: normal; font-style: italic; margin: 0; line-height: 1.5; text-align: right; }
p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了 不同的特殊的处理。
网站设计技术 济南大学管理学院 信管系 杜培林

? 在这里,与页面中的其他

158

单独的选择器
? id

选择器即使不被用来创建派生选择器,它也可以独立发 挥作用: padding: 10px; }

#sidebar { border: 1px dotted #000;
? 根据这条规则,id

为 sidebar 的元素将拥有一个像素宽 的黑色点状边框,同时其周围会有 10 个像素宽的填充( padding,内部空白)。老板本的 Windows/IE 浏览器也 能会忽略这条规则,除非你特别地定义这个选择器所属的 元素:

div#sidebar { border: 1px dotted #000;

padding: 10px; }
网站设计技术 济南大学管理学院 信管系 杜培林

159

在 CSS 中,类选择器以一个点号显示:
? .center

{text-align: center} center 类的 HTML 元素均

? 在上面的例子中,所有拥有

为居中。
? 在下面的HTML代码中,h1 ? <h1

和 p 元素都有 center 类。 这意味着两者都将遵守 “.center” 选择器中的规则。 class="center">

This heading wil

l be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
? 注意:不要使用数字起始类名!它无法在

Firefox 中起作用。
网站设计技术

Mozilla 或
160

济南大学管理学院 信管系 杜培林

和 id 一样,class 也可被用作派生选择器:
?

.fancy td { color: #f60; background: #666; }

?

在上面这个例子中,类名为 fancy 的更大的元素内部的表格单元都会以 灰色背景显示橙色文字。(名为 fancy 的更大的元素可能是一个表格或 者一个 div)
元素也可以基于它们的类而被选择:

?

?
? ?

td.fancy { color: #f60; background: #666; }
在上面的例子中,类名为 fancy 的表格单元将是带有灰色背景的橙色。 <td class="fancy"> 你可以将类 fancy 分配给任何一个表格元素任意多 的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些 没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点 值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然, 任何其他被标注为 fancy 的元素也不会这条规则的影响。这都是由于我 们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元 (即使用 td 元素来选择 fancy 类)。
161 网站设计技术 济南大学管理学院 信管系 杜培林

review last week's lessons
162 网站设计技术 济南大学管理学院 信管系 杜培林


上一篇:b.let's laern
下一篇:6B期中考试卷
网站首页网站地图 站长统计
All rights reserved Powered by 海文库
copyright ©right 2010-2011。
文档资料库内容来自网络,如有侵犯请联系客服。zhit326@126.com