PROGRAMMING THE WORLD WIDE WEB Chapter 3 Cascading Style Sheets

来源：互联网发布：福建顶点软件怎么样编辑：程序博客网时间：2024/04/28 16:00

Chapter 3 Cascading Style
Sheets
• Cascading style sheets are a relatively
recent development of the W3C, finally
providing Web authors a powerful and
flexible way to control the presentation
details of documents. This chapter
introduces the concept of a style sheet
and explains how it fits into the philosophy
and structure of HTML.

Chapter 3 Cascading Style
Sheets
3.1 Introduction
3.2 Levels of Style Sheets
3.3 Style Specification Formats
3.4 Style Classes
3.5 Properties and Property Values
3.6 Color
3.7 The <span> and <div> Tags
3.8 Summary
3.9 Review Questions
3.10 Exercises

3.1 Introduction
• Many HTML tags have presentation properties.
Browsers use default values for these properties
if the tags do not specify values.
• Some of what style sheets do can be
accompshed with tag attributes and font style
and font size tags, such as <big>.
• The first style sheet specification for use in
HTML documents, dubbed Cascading Style
Sheets (CSS1), was developed in 1996 by W3C.
In mid-1998, the second standard, CSS2,
appeared.
• CSS3 is now under development.

3.1 Introduction
• Perhaps the most important thing about
style sheets is that they provide a method
of imposing consistency on the style of
Web pages.
• HTML style sheets are called cascading
style sheets because they can be defined
at three different levels to specify the style
of a document.

3.2 Levels of Style Sheets
• The three levels of style sheets, in order
from lowest level to highest level, are
– Inne style sheets apply to the content of a
single tag
– document-level style sheets apply to the
whole body of a document
– and external style sheets can apply to the
bodies of any number of documents

3.2 Levels of Style Sheets
• Inne style sheets have precedence over
document style sheets, which have precedence
over external style sheets.
• Inne style specifications appear within a tag
and apply only to the content of that tag.
• Document-level style specifications appear in
the document head section and apply to the
entire body of the document.
• In many cases, it is desirable to have a style
sheet apply to more than one document. This is
the purpose of external style sheets.

3.2 Levels of Style Sheets
• External style sheets are not part of any of
the documents to which they apply. They
are stored separately and are specified in
all documents that are to use them.
• External style sheets are written as text
files with the MIME type
text/css. They
can be stored on any computer on the
Internet. The browser fetches external
style sheets just as it fetches documents.

3.2 Levels of Style Sheets
• The <nk> tag is used to specify external style
sheets.
• Within <nk>, the rel attribute is used to specify
the relationship of the nked-to document to the
document in which the nk appears.
• The href
attribute is used to specify the URL of
the style sheet document, as in this example:
<nk rel = stylesheet type = "text/css"
href ="http://www.cs.usc.edu/styles/wbook.css ">
</nk>

3.2 Levels of Style Sheets
• The nk to an external style sheet must
appear in the head of the document .

3.3 Style Specification
Formats
• The format of a style specification
depends on the level of style sheet.
• Inne style specifications appear as values
of the style attribute of a tag, the general
form of which is this:
style = "property_1: value_1; property_2:
value_2; ...; property_n: value_n"
• The scope of an inne style specification is
restricted to the content of the tag in which
it appears.

3.3 Style Specification
Formats
• Document style specifications appear as the
content of a <style> tag within the header of a
document, although the format of the
specification is quite different from that of inne
style sheets.
• The general form of the content of a <style> tag
is this:
<style type = "text/css">

</style>

3.3 Style Specification
Formats
• Each style rule in a rule st has two parts:
– a selector, which indicates the tag or tags
affected by the rule,
– and a st of property-value pairs.
• the form of a style rule is as follows:
tag_name_st
{property_1: value_1;
property_2: value_2; ...;
property_n
:
value_n
}

3.3 Style Specification
Formats
• Normally, a style property appes to all tag
occurrences in the scope of the style sheet.
• The scope of an inne style sheet is the
content of the tag.
• For document style sheets, the scope is
the body of the document.
• For external style sheets, the scope is the
bodies of all documents that use it.

3.4 Style Classes
• Style classes can be used to allow
different occurrences of the same tag to
use different style specifications from a
document or external style sheet.
• A style class is defined in a <style> tag by
giving it a name, which is attached to the
tag's name with a period.
• For example:
p. normal {property-value st}
p. special {property-value st}

3.4 Style Classes
<p class = "normal">
A paragraph of text that we want to be
presented in 'normal' presentation style
</p>
<p class = "special">
A paragraph of text that we want to be
presented in 'special' presentation style
</p>

3.4 Style Classes
• Sometimes you want a class of style
specifications that apply to the content of more
than one tag. This can be done using a generic
class, which is defined without a tag name in its
name. In place of the tag name, you use the
name of the generic class, which must begin
with a period—for example3:
.itac {font-style: itac}
• Now, in the body of a document you could have
these nes:
<h3 class = "itac"> Chapter 3 </h3>
<p class = "itac">
</p>

3.5 Properties and Property
Values
• Fifty-three different properties exist in six
categories,
– fonts
– colors and back-grounds
– Text
– boxes and layouts
– sts
– tags

3.5.1 PROPERTY VALUE
FORMS
• Keyword property values are used when
there are few possible values and they are
predefined—for example underne and
small.
• Keyword values are not case-sensitive.

3.5.1 PROPERTY VALUE
FORMS
• Length values are specified with numbers, most of which
are integral.
• Length property values must be followed immediately by
a two-character abbreviation of a unit name.
– px
for pixels
– in
for inches
– cm
for centimeters
– mm
for milmeters
– pt
for points
– pc
for picas
• There are also two relative length values,
– em
, which is the height of the letter m,
– and x-height
, which is the height of the letter x.

3.5.1 PROPERTY VALUE
FORMS
• Percentage values are used to provide a
measure that is relative to the previously
used measure. Percentage values are
numbers that are followed immediately by
percent signs.
• URL property values use a form that is
different from references to URLs in nks.
The general form of these is as follows:
url(protocol: / /server/pathname)

3.5.1 PROPERTY VALUE
FORMS
• Color property values can be specified as
– color names
white
– six-digit hexadecimal numbers: Hexadecimal
numbers must be preceded with pound signs
(#), as in #FFFFFF
.
– RGB form. RGB form is just the word rgb,
followed by a parenthesized st of three
numbers, which specify the level of the three
colors red, green, and blue.
rgb(255,255,255)

3.5.1 PROPERTY VALUE
FORMS
• Property values are inherited by all tags
nested in the tag in which the values are
specified.

3.5.2 FONT PROPERTIES
• The font properties are certainly among
the most useful of the style sheet
properties.
• This creates the need for text in many
different fonts, font styles, and font sizes.
• The font-family
property is used to
specify a st of font names. The browser
will use the first font in the st that it
supports.
font-family: Arial, Helvetica, Courier

3.5.2 FONT PROPERTIES
• If a font name has more than one word, the
whole name should be demited by single
quotes
font-family: 'Times New Roman‘
• The font-size
property does what its name
impes.
font-size: 10pt
• Many relative font-size
values exist, namely xxsmall,
x-small, medium, large, x-large, and xxlarge.

3.5.2 FONT PROPERTIES
• The font-style
property is most commonly
used to specify itac
font-style: itac
• The font-weight
property is used to
specify the degree of boldness:
font-weight: bold
• The values normal, bolder, and ghter can
also be specified.

3.5.2 FONT PROPERTIES
• If more than one font property must be
specified, the values can be stated in a st
as the value of the font property.
font: bold l4pt 'Times New Roman' Palatino
• The order in which the property values are
given in a font value st is important. The
font style and weight must be first,
followed by font size
, and finally the st of
font names
. Only the font size and the
font family are required in the font st.

3.5.2 FONT PROPERTIES
• Example ch3_1.html

3.5.3 ST PROPERTIES
• Two presentation details of sts often are
specified in HTML documents: the shape
of the bullets that precede the items in an
unordered st and the sequencing values
that precede the items in ordered sts.
• The st-style-type property of an
unordered st can be set to disc, circle,
square, or none.
ul {st-style-type = "square"}
• Example bullets1.html bulltets2.html

3.5.3 ST PROPERTIES
• Example sequence_types.html
• Table 3.2
Lowercase ⅰ,ⅱ,ⅲ,ⅳ
Roman numerals
lower-roman
Uppercase Ⅰ,Ⅱ,Ⅲ,Ⅳ
Roman numerals
upper-roman
lower-alpha Lowercase letters a,b,c,d
upper-alpha Uppercase letters A,B,C,D
decimal Arabic numerals 1,2,3,4
Property Value Sequence Type First Four Values

3.5.4 AGNMENT OF TEXT
• The text-agn property, for which the possible
keyword values are left, center, right, and justify,
is used to arrange text horizontally.
p {text-agn: right}
• The default value for text-agn is left.
• The float property, which is often set for images
and tables, is used to specify that text should
flow around the floating element.
• The possible values for float are left, right, and
none, which is the default.
• Example float.html

3.5.5 MARGINS
• The margins around an HTML element
can be set with the margin properties
margin-left, margin-right, margin-top, and
margin-bottom.
• The margin properties are set in the
<img/> tag.
<img src = "C210.JPG" style = "float: right;
margin-left: 0.35in;
margin-bottom: 0.35in" />

3.6 Color
• Color is not a simple issue for Web
documents, for two reasons.
– First, the document may be displayed on
monitors of widely varying capabities.
– Second, the document may be rendered by
browsers that have different capabities to
deal with colors.

3.6 Color
• Three levels of collections of colors might be
used by an HTML document.
– The smallest useful set of colors includes only those
that are guaranteed to be correctly displayable by all
browsers on all color monitors. Table 3.3 (Page 80)
– A larger set of colors called the Web Palette includes
216 colors.
– When the mitations of older browsers and monitors
are not a consideration, 24-bit (or six hexadecimaldigit)
numbers can be used to specify any one of 16
milon colors.

3.6 Color
<table border = "5px">
<tr>
<th style = "color:red"> Apple </th>
<th style = "color:orange"> Orange </th>
<th style = "color: orange"> Screwdriver</th>
</tr>
</table>
<p style = "font-size; 24; colors blue; background-color:
red">
To really make it stand out, use a red background! </p>

3.7 The <span> and <div>
Tags
• In many situations, you'll want to apply
special font properties to less than a whole
paragraph of text. For example, it is often
useful to have a word or phrase in a ne
appear in a different font size or color. The
<span> tag is designed for just this
purpose. Unke most other tags, there is
no default layout for the content of <span>.

3.7 The <span> and <div>
Tags
<p>
It sure is fun to be in <span> total </span> control
of text
</p>
<p>
It sure is fun to be in
<span style = "font-size: 24; font-family: Ariel; color:
red">
total </span> control of text </p>

3.7 The <span> and <div>
Tags
• As with <span>, there is no imped layout
for the content of the <div> tag, so its
primary use is to specify presentation
details to a section or division of a
document.

3.8 Summary
• CSS
• style class
• Several different properties are related to
fonts
• st-style-type
• text-agn property
• color capabities of cents' browsers and
monitors
• The <span> tag and <div> tag

3.10 Exercises
• Page 84
• 1-5

3.2 CSS的基本结构
• 3.2.2分类和情景选择－－2情景选择
• 若想让所有加粗显示的文字都以红色显示，
但条件只有当这些加粗显示的文字出现在通
常的段落文字内时。这就需要使用“情景选
择”来实现。
• 带情景标识符的样式表规则的格式如下：
情景标识符　标识符｛属性：属性值｝
例3.2.2_1.HTM

3.3 将CSS加入网页
• 将样式表加入网页的方法
– 将样式表嵌入到HTML文件的文档头中
– 将一个外部样式表链接到HTML文件上
– 将一个外部样式表输入到HTML文件中
– 将样式表加入到HTML文件行中

3.3 将CSS加入网页
• 3.3.1把样式表嵌入到文档头
• 前面已经使用的方法：基本格式如下：
<html>
<style type=“text/css”>

</style>
<head>

3.3 将CSS加入网页
• 3.3.1把样式表嵌入到文档头
• type=“text/css”设定采用MIME类型，这样一
样，不支持CSS的浏览器可以忽略样式表。
注释符（）更为重要，有些低版本
的浏览器，即使在设定了type=“text/css”属
性时也不能忽略样式表而继续执行下面的命
令，而且不会显示样式表的代码，使用注释
标识符则可以避免发生这种情况。
例3.6

3.3 将CSS加入网页
• 3.3.2　链接到样式表
• 可以将多个HTML文件都链接到一个样式表
文件。这个外部的文件将设定所有网页的规
则。如果改变样式表文件中的某一细节，所
有网页都会随之改变。特别适用于维护大的
站点。基本格式如下：
<head>
<title></title>
<nk REL=stylesheet HREF=“*.css”
type=“text/css”>
</head>
例3.3.2.htm

3.3 将CSS加入网页
• 3.3.2　链接到样式表
• <nk>标签放置在HTML文档的头部。可选
的TYPE属性用于指定媒体类型－－text/css
是一个层叠样式表，允许浏览器忽略它们不
支持的样式表类型。为CSS文件配置服务
器，从而将text/css当作Content-type内容发
送出去。

3.3 将CSS加入网页
• 3.3.3　输入样式表
• 输入外部样式表的方法同链接到外部样式表文件
类似，不同之处在于链接法不能同其他方法结合
使用，但输入法则可以。
<html>
<style type=“text/css”>
 </style>

3.3 将CSS加入网页
• 3.3.3　输入样式表
• 可以使用@import url(…)引入多个样式表
• 其他的CSS规则应该仍然包括在标识符
<style>和</style>中，但所有的@import声
明必须放在样式式表的开始部分
• 在两者冲突的情况下，后写入的规则将有更
高的优先级。
• 被输入的样式表的顺序对于它们怎样层叠是
很重要的。最后一个输入的样式表中的对样
式的指定将得到实现。
例3.3.3.htm

3.3 将CSS加入网页
• 3.3.4　在行内加入样式
• 除了以上介绍的方法之外，还可以在HTML
代码行中加入样式规则，而无需在HTML头
部加入样式表代码。
• 样式的定义使用style属性。style属性可以应
用于除了basefont、param和script外的任意
body元素（包括body本身）。
例3.3.4.htm

伪类及伪对象
• Sample 3.1.htm
• Sample FirstLetter.htm