CSS权威指南：第2版

需积分: 1 94 浏览量更新于2024-07-22 收藏 4.13MB PDF 举报

"《Cascading Style Sheets: The Definitive Guide, 2nd Edition》是由Eric Meyer撰写的一本关于CSS的专业书籍，出版于2004年3月，ISBN号为0-596-00525-3，共528页。本书主要介绍了CSS2和CSS2.1规范，旨在帮助读者理解并掌握CSS在网页设计中的应用，特别是如何与HTML4.0结合使用。作者决定不包含CSS3的部分，因为当时CSS3的实现还不完整，而书中的内容更侧重于当下浏览器广泛支持的CSS级别。此外，书中去除了关于浏览器CSS支持的具体信息，这部分内容更适合在线更新和维护，以适应快速发展的网络标准。" 本书分为多个章节，深入讲解了CSS的核心概念和技术。第一章“CSS和文档”阐述了CSS如何拯救当时陷入困境的网页设计，并介绍了元素、display属性以及如何将CSS与XHTML结合使用。第二章“选择器”讲解了基本的选择器规则，如类和ID选择器，以及伪类和伪元素的概念。第三章“结构和级联”探讨了CSS中的特异性和继承机制，以及级联的工作原理。第四章“值和单位”涵盖了数字、百分比、颜色、长度单位和URL等基础知识。第五章“字体”详细讨论了字体家族、字体权重、大小、样式、变体以及字体匹配等。书中每个章节末尾都提供了小结，帮助读者巩固所学。通过这本书，读者不仅可以学习到CSS的基本语法和使用技巧，还能了解到CSS在实际项目中的应用策略，以及如何处理不同浏览器之间的兼容性问题，尤其是针对Internet Explorer系列浏览器的bug和限制。这是一本面向有一定HTML基础，希望深入学习CSS2和CSS2.1的读者的指南，尽管它没有涵盖CSS3的内容，但其对基础概念的详尽解释和实践案例，对于理解和应用早期CSS标准仍然具有很高的价值。随着CSS标准的不断演进，这本书仍然是一个很好的起点，帮助读者建立起坚实的CSS知识体系。

</style>

</head>

<body>

<h1>Waffles!</h1>

<p style="color: gray;">The most wonderful of all breakfast foods is

the waffle--a ridged and cratered slab of home-cooked, fluffy goodness

that makes every child's heart soar with joy. And they're so easy to make!

Just a simple waffle-maker and some batter, and you're ready for a morning

of aromatic ecstasy!

</p>

</body>

</html>

The above markup is shown in Figure 1-4.

Figure 1-4. A simple document

Now, let's examine the various ways this document connects to CSS.

1.4.1 The Tag

First, consider the use of the link tag:

The link tag is a little-regarded but nonetheless perfectly valid tag that has been hanging around the HTML specification for years just waiting to

be put to good use. Its basic purpose is to allow HTML authors to associate other documents with the document containing the link tag. CSS uses

it to link style sheets to the document; in Figure 1-5, a style sheet called sheet.css is linked to the document.

Figure 1-5. A representation of how external style sheets are applied to documents

These style sheets, which are not part of the HTML document but are still used by it, are referred to as external style sheets. This is because they're

style sheets that are external to the HTML document. (Go figure.)

In order to successfully load an external style sheet, link must be placed inside the head element but may not be placed inside any other

element, rather like title. This will cause the web browser to locate and load the style sheet and use whatever styles it contains to render the

HTML document in the manner shown in Figure 1-5.

And what is the format of an external style sheet? It's simply a list of rules, just like those we saw in the previous section and in the example XHTML

document, but in this case, the rules are saved into their own file. Just remember that no HTML or any other markup language can be included in the

style sheet—only style rules. Here are the contents of an external style sheet:

h1 {color: red;}

h2 {color: maroon; background: white;}

h3 {color: white; background: black;

font: medium Helvetica;}

That's all there is to it —no HTML tags or comments at all, just plain -and-simple style declarations. These are saved into a plain -text file and are

usually given an extension of .css, as in sheet1.css.

An external style sheet cannot contain any document markup at all, only CSS rules and comments. The presence of

markup in an external style sheet can cause some or all of it to be ignored.

The filename extension is not required, but some browsers won't recognize the file as containing a style sheet unless it actually ends with .css, even if

you do include the correct type of text/css in the link element. In fact , some web servers won't hand over a file as text/css unless

its filename ends with .css. So make sure you name your style sheets appropriately.

1.4.1.1 Attributes

For the rest of the link tag, the attributes and values are fairly straightforward. rel stands for "relation," and in this case, the relation is

stylesheet. type is always set to text/css. This value describes the type of data that is to be loaded using the link tag. That way,

the web browser knows that the style sheet is a CSS style sheet, a fact that will determine how the browser deals with the data it imports. After all,

there may be other style languages in the future, such as XSL, so it will be important to declare which language you're using.

Next, we find the href attribute. The value of this attribute is the URL of your style sheet. This URL can be either absolute or relative, depending

on what works for you. In our example, of course, the URL is relative. It could as easily have been something like

http://www.meyerweb.com/sheet1.css.

You can use a style sheet in more than one medium by providing a comma-separated list of the media in which it applies. Thus, for example, you can

use a linked style sheet in both screen and projection media:

media="screen, projection" />

Note that there can be more than one linked style sheet associated with a document. In these cases, only those link tags with a rel of

stylesheet will be used in the initial display of the document. Thus, if you wanted to link two style sheets named basic.css and splash.css, it

would look like this:

This will cause the browser to load both style sheets, combine the rules from each, and apply them all to the document. (We'll see exactly how the

sheets are combined in Chapter 3, but for now, let's just accept that they're combined.) For example:

<p class="a1">This paragraph will be gray only if styles from the

stylesheet 'sheet-a.css' are applied.</p>

<p class="b1">This paragraph will be gray only if styles from the

stylesheet 'sheet-b.css' are applied.</p>

The one attribute not in your example markup, but could be, is the title attribute. This attribute is not often used, but it could become important

in the future and, if used improperly, can have unexpected effects. Why? We will explore that in the next section.

1.4.1.2 Alternate style sheets

It's also possible to define alternate style sheets. These are defined by making the value of the rel attribute alternate stylesheet and

are used in document presentation only if they are selected by the user.

Should a browser be able to use alternate style sheets, it will use the values of the link elements' title attributes to generate a list of style

alternatives. So you could write the following:

href="sheet1.css" title="Default" />

href="bigtext.css" title="Big Text" />

href="zany.css" title="Crazy colors!" />

Users could then pick the style they want to use, and the browser would switch from the first one (labeled "Default" in this case) to whichever the user

picked. Figure 1-6 shows one way in which this selection mechanism is accomplished.

Figure 1-6. A browser offering alternate style sheet selection

Alternate style sheets are supported in most Gecko-based browsers like Mozilla and Netscape 6+, and in Opera 7.

They can be supported in Internet Explorer through the use of JavaScript but are not natively supported by those

browsers.

It is also possible to group alternate style sheets together by giving them the same title value. Thus, you make it possible for the user to pick a

different presentation for your site in both screen and print media. For example:

href="sheet1.css" title="Default" media="screen" />

href="print-sheet1.css" title="Default" media="print" />

href="bigtext.css" title="Big Text" media="screen" />

href="print-bigtext.css" title="Big Text" media="print" />

If a user selects "Big Text" from the alternate style sheet selection mechanism in a conforming user agent, then bigtext.css will be used to style the

document in the screen medium, and print-bigtext.css will be used in the print medium. Neither sheet1.css nor print-sheet1.css will be used in any

medium.

Why is that? Because if you give a link with a rel of stylesheet a title, then you are designating that style sheet as a preferred style

sheet. This means that its use is preferred to alternate style sheets, and it will be used when the document is first displayed. Once you select an

alternate style sheet, however, the preferred style sheet will not be used.

Furthermore, if you designate a number of style sheets as preferred, then all but one of them will be ignored. Consider:

href="sheet1.css" title="Default layout" />

href="sheet2.css" title="Default text sizes" />

href="sheet3.css" title="Default colors" />

All three link elements now refer to preferred style sheets, thanks to the presence of a title attribute on all three, but only one of them will

actually be used in that manner. The other two will be ignored completely. Which two? There's no way to be certain, as neither HTML nor XHTML

provide a method of determining which preferred style sheets should be ignored or which should be used.

If you simply don't give a stylesheet a title, then it becomes a persistent style sheet and is always used in the display of the document.

Often, this is exactly what an author wants.

1.4.2 The style Element

The style element, which is a new element in HTML, is the most common way to define a style sheet, since it appears in the document itself:

style should always use the attribute type; in the case of a CSS document, the correct value is "text/css", just as it was with the link

element.

The style element should always start with <style type="text/css">, as shown in the preceding example. This is followed by

one or more styles and is finished with a closing </style> tag. It is also possible to give the style element a media attribute, with the

same allowed values as previously discussed for linked style sheets.

The styles between the opening and closing style tags are referred to as the document style sheet or the embedded style sheet since this style sheet

is embedded within the document. It will contain many of the styles that will apply to the document, but it can also contain multiple links to external

style sheets using the @import directive.

剩余340页未读，继续阅读

Hope_11

粉丝: 0
资源: 2

CSS权威指南：第2版

guida-javascript-moderno：Guida alla creazione di un progetto Javascript Moderno

Guida_Giganti

guida:贵达物流小程序

las-guida-pratica:通过LAS考试的实用指南

Forexguida.com La guida al forex in italiano-crx插件

lg-modellointeroperabilita-docs：Linee guida sul modello diinteroperabilità2018

openpa_bootstrapitalia:符合CMS EzPublish标准的线型guida Design Italia

guida_nft:Arte＆Diritto al tempo dei不可替代令牌

softpython-it:Guida introduttiva alla pulizia e analisi dati con Python 3

bootstrap-italia：Bootstrap Italiaèun tema Bootstrap 4 Cone alle linee guida di design per i servizi web della PA

最新资源