- 浏览: 1308184 次
文章分类
最新评论
PROGRAMMING THE WORLD WIDE WEB Chapter 3 Cascading Style Sheets
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.
©
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.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 .
©
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.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">
<!--
rule_st
-->
</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.
©
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.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>
©
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.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" />
©
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.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>
©
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.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.
©
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.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
©
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.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”>
<!--
@import url(*.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
相关推荐
world wide web万维网英文课件:ch03-Cascading Style Sheets.ppt
Cascading Style Sheets: Designing for the Web, Third Edition By Håkon Wium Lie, Bert Bos ............................................... Publisher: Addison Wesley Professional Pub Date: April...
CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常...
CSS——Cascading Style Sheets 层叠样式表 作用 定义了HTML元素怎样去显示 一般存储在样式表中 也可以存储在外部样式文件.css文件中
packed, step-by-step format, this comprehensive introduction clearly shows you how to combine CSS with HTML, XHTML, or XML to create rich, aesthetically compelling web designs.
Professional CSS Cascading Style Sheets for Web Design
Cascading Style Sheets 2.0 Programmer's Reference by Eric Meyer
packed, step-by-step format, this comprehensive introduction clearly shows you how to combine CSS with HTML, XHTML, or XML to create rich, aesthetically compelling web designs.
当初一帮技术人员想出HTML,主要侧重于定义内容,比如表示一个段落,表示标题,而并没有过多设计HTML的排版和界面效果。 随着Internet的迅猛发展,HTML被广泛应用,上网的人们当然希望网页做得漂亮些,...直到CSS出现。
Cascading Style Sheets for Web Design Second Edition
Cascading Style Sheets for Web Design Second Edition Psrt2
Beginning CSS: Cascading Style Sheets for Web Design, Second Edition
Håkon Wium Lie关于样式的著作
This comprehensive introduction clearly shows you how to combine Cascading Style Sheets (CSS) with HTML, XHTML, or XML to create rich, aesthetically compelling web designs. It follows a browser-...
Cascading Style Sheet 2.0 Handbook - Rainer's DHTML Library.chm_样式表中文手册
层叠样式表 (Cascading Style Sheets) CSS可以用来为网页创建样式表,通过样式表可以对网页进行装饰。 所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。 而css就可以分别为网页的各个...
Cascading Style Sheet 样式表中文手册 需要做网页的朋友们可以下来看看
本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式滤镜的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识,仅简单介绍,恕不赘述。 本手册以浏览器的事实标准—— Internet ...
Cascading Style Sheet 2.0 中文手册 Cascading Style Sheet 2.0 中文手册 Cascading Style Sheet 2.0 中文手册Cascading Style Sheet 2.0 中文手册
DHTMLET - Cascading Style Sheet 2.0 中文手册