250 html and web design secrets phần 5 ppt

Linked style is then linked to as many documents as you want by using the link element within the headportion of the HTML or XHTML page:... Chapter 8: Style Tips for Type and Design 169

Trang 1

P1: FCH

WY021-07 WY021-Holzshlag-v2 May 25, 2004 16:40

156 Part II: HTML, XHTML, CSS and Accessibility

note For an interesting and very detailed article on empty elements, their history,and their quirks, see “Empty Elements in SGML, HTML, XML, and XHTML”

by Jukka Korpela, at www.cs.tut.fi/∼jkorpela/html/empty.html

Attributes

A minimized attribute is one that is represented only by the attribute name There’s

no associated value In HTML, familiar examples would include attributes such

In XHTML, the minimization of attributes is disallowed The attribute name isgiven a value of itself:

So, in all cases where you find a single-word attribute, you must give it a value ofitself for the attribute to be valid in XHTML

note During classes I often ask students to guess what the attribute value of aminimized attribute becomes in XHTML Many guess that the value is “true”,

which makes absolute sense The selected attribute is considered a Booleanattribute, and you can read more about their unique history and use atwww.w3.org/TR/REC-html40/intro/sgmltut.html

Chapter 6 examined character entities and their role in HTML Used for the display

of special characters in both HTML and XHTML, entities are also used in XHTML

to escape certain characters in scripts and URLs

The best example of this is the ampersand (&), which appears in JavaScript andalso in some URLs

Trang 2

Chapter 7: Moving Ahead with XHTML 157

Because the ampersand is considered reserved for use, the more rigid rules ofXHTML expect you to escape all inline instances of ampersands not related to aspecial character

Take the following URL, for example:

If this JavaScript appears as an embedded script, the ampersands must be escaped:

if (browser == "Microsoft Internet Explorer" &amp ;&

navigator.appVersion==version)

note Escaping characters in URLs or scripts will not affect the functions related toeither You do not need to do this for any external script.

For more information on entities in XHTML and other helpful XHTMLworkarounds, see www.simonstl.com/tips/archive/workarounds.html

Unlike HTML, where the alt attribute is a recommended inclusion for bility purposes, you can’t leave it out in XHTML

There are no exceptions to this rule, even if you leave the value empty:

However, since you can use CSS for effective spacing, spacer graphics are essary anyway

unnec-note Interestingly, while width and height might seem presentational, they areavailable for use in strict DTDs and XHTML 1.1, because having width and

height attributes present will assist with better graphic rendering in mostbrowsers

Trang 3

P1: FCH

Well-formedness is simply the proper nesting of elements It is important in HTML,although it’s not brought up too often as a discussion point until you begin to studyXHTML in earnest

What happens if you want to have something being both emphasized and strong

at the same time? Well, you can apply both elements to text The important issue

is that the elements nest properly

Figure 7-3: Improper nesting of elements along the horizontal axis

Figure 7-4: Improper nesting of elements along the vertical axis

Trang 4

One thing that markup authors moving to XHTML stumble over early on is how

to nest lists properly in XHTML

In HTML, you could leave off the closing </li> tag, and nest lists like this:

The results (shown in Figure 7-5) are a nested, unordered list

Figure 7-5: A nested unordered list created using HTML

Logic says if you’re closing all your nonempty elements in XHTML, you’d do this:

<ul>

<ul>

Trang 5

P1: FCH

But proper nesting rules in XHTML place the nested list inside a list item as part of

that item, not as a separate part of that list As a result, the correct listing procedure

in XHTML looks like this:

Of course, ordered lists (see Figure 7-6 for an example) follow the same practice

in XHTML, with nested ordering placed within the list item:

Figure 7-6: A nested ordered list created using XHTML

Trang 6

<li>Go to flower section</li>

<li>Go to produce section</li>

<li>Go to liquor section</li>

Figure 7-7 shows the results

Figure 7-7: A nested unordered list within a numbered list created using XHTML

Trang 7

P1: FCH

note CSS provides some terrific ways to style list bullets and numeric values SeeChapter 8, “Style Tips for Type and Design” to learn more.

As you’ve come to learn in these markup chapters, DOCTYPEs are required ponents of a valid HTML or XHTML document The DOCTYPE declaration hashistorically been passive, with no actual function until the document is passedthrough a validator and uses the declaration to determine which DTD to validatethe document against

com-Historically, many Web authors have not validated their documents, much less thored to standards, although, fortunately, that is a changing trend Understandingthe way the languages with which we work and how the browsers respond to them

au-is surely the road to long-term success and survival as a Web designer So knowingthis stuff is really important

Another equally important but lesser known reason that the DOCTYPE declaration

is so significant has to do with a switching mechanism that’s been added to allcontemporary browsers to allow those browsers to identify documents that appear

to be standardized This allows them to render the documents more quickly andaccurately This becomes very important when you begin using CSS, especiallyfor layout

Studying the problem of CSS implementation in browsers, Tantek C¸ elik, a grammer for Microsoft who has been involved with browser development andstandards for some years now, recognized that no browser could afford to moveahead with more compliant and consistent technologies without allowing for rea-sonable backward compatibility

as a result

Compliance mode, on the other hand, is a streamlined standards-compliant

ren-dering engine, allowing for faster, more accurate, and more controlled renren-dering

DOC-mentioned earlier in this chapter There’s nothing wrong with those DOCTYPEs

in any technical sense, but there is something wrong with them in regards toDOCTYPE switching technology You must use some very specific DOCTYPEs to

Trang 8

kick the browser in question into Standards mode All of the DOCTYPEs in thischapter will do the trick

Here’s how the behavior breaks down:

Documents with older or Transitional DOCTYPEs, poorly formedDOCTYPES, or no DOCTYPE at all are displayed using Quirks mode,and will be interpreted with the legacy bugs and behaviors of version 4browsers

Documents with properly formed HTML Strict or XHTML DOCTYPEsare displayed using Compliance mode This mode follows W3Cspecifications for HTML, CSS, and other layout languages as closely aspossible

Of course, any browser (including Netscape 4) that came along before DOCTYPEswitching was conceived will act just as Quirks mode does In contrast, Opera 6and earlier does not bother with DOCTYPE switching, but those browsers workmore like standards mode does, because Opera has been purposely developedwith standards in mind

note For an excellent overview of DOCTYPE switching, read “DOCTYPE Switchingand Standards Compliance” by Matthias Gutfeldt The article describes the

technical details regarding the switching technology and provides additionalresources (http://gutfeldt.ch/matthias/articles/doctypeswitch.html)

in Blocks

If you’re using XHTML 1.0 Strict or XHTML 1.1, you can’t have any widowedinline elements This means that any inline element must appear within a block.Listing 7-4 shows a valid XHTML 1.0 Transitional document with an image (which

is an inline element) marked up on a line by itself This is allowed in HTML andXHTML Transitional

Listing 7-4: Valid transitional document with a widowed inline element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>block and inline elements in XHTML</title>

Trang 9

P1: FCH

Listing 7-5: Proper management of inline elements in XHTML 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<head>

<title>block and inline elements in XHTML</title>

In XHTML 1.0 Strict and 1.1, the name attribute is replaced with the id attribute

In the past, you might have had the following:

But in XHTML 1.0 Strict and XHTML 1.1, you must use id instead:

In most cases, using id doesn’t change the function However, because somebrowsers do not properly identify or interpret id, when you need to ensure back-ward compatibility, use a Transitional XHTML DTD and include both, as in thefollowing:

note The id attribute becomes very important when using CSS See Chapter 9,“Laying Out Pages with CSS” for details.

Trang 10

However, people sometimes turn their JavaScript off If you don’t want to useJavaScript for any reason, your only alternative is to use a Transitional DTD andthe target attribute

Summary

The last two chapters have covered more about HTML and XHTML than the vastmajority of working Web designers could tell you Hopefully, you’ve found someclarification, insight, or suggestions that will assist you in understanding the why

as well as the how of writing markup

If you’vefound the last couple of chapters a bit on the technical or dry side, fear not.CSS is up next, so you’ll get a chance to learn more about how to add great designand presentation options to your well-formed, valid, and structured documents

Trang 11

P1: FCH

166

Trang 12

8

Style Tips for

Type and Design

Secrets in This Chapter

#122: When to Use Linked Style 168

#123: When to Use Embedded Style 169

#124: When to Use Inline Styles 170

#125: Importing Style 170

#126: Understand the Cascade 171

#127: Work with Inheritance 171

#128: Be Aware of Specificity 173

#129: Creating Multiple Link Styles 174

#130: Link Effects 177

#131: CSS Borders and Border Styles 179

#132: Gaining Space with Padding 181

#133: Understanding Type Sizing Options in CSS 182

#134: Type Effects 182

#135: Styling Lists with CSS 186

#136: Using Lists for Vertical Navigation 188

#137: Using Lists for Horizontal Navigation 190

#138: Spice Up Forms 191

#139: Add Visual Effects to Data Tables 193

#140: Using Background Graphics in CSS 195

#141: Image Replacement Techniques 196

#142: CSS-Based Text Mouseovers 198

#143: Text and Image Mouseovers 201

#144: Dynamic CSS Menus 202

#145: Rounded Tabs 205

#146: Sliding Doors 205

#147: Cool Rules 207

Trang 13

P1: GIG

168 Part II: HTML, XHTML, CSS, and Accessibility

Cascading Style Sheets (CSS) have become an area of extreme focus in cent years, largely due to the fact that browser support for most CSS is nowwidespread CSS helps you eliminate presentational markup from your HTML orXHTML, add visual intrigue and effects to your designs, and aids designers byimproving workflow

re-This chapter focuses on sharing the best techniques to address the integration ofCSS with HTML or XHTML documents, improve the way you style text, and useCSS to style your designs

Learning CSS

The secrets in this chapter assume at least a basic knowledge of CSS While comers to CSS can certainly use many of the techniques described here, it wouldbehoove anyone interested in contemporary Web design and development to learnthe concepts within the language itself Along with many excellent books, a variety

new-of Web sites and tutorials are available, almost always for free, that will help youlearn the theory

note Appendix C, “Helpful Reading, Web Sites, and Resources” provides numeroushelpful sites, articles, and courses available to learn CSS.

Also, many of the techniques described in this chapter (and subsequently in ter 9, “Laying Out Pages with CSS’’)are inspired directly by the people who createdthe techniques In many cases, I’ve provided you with actual listings and descrip-tions of a given technique However, where the techniques were published fairlyrecently, or have many variations, I’ve provided an explanation of the techniques,screen shots, and link information to the locations where you can learn the tech-niques directly from their creators

As discussed in Chapter 7, style and scripting is ideally moved to an externaldocument The reasons for this are practical: You can easily integrate that stylesheet or script with one or one million documents, and you can do so in one line ofcode instead of embedding the style or script in every single document This way,you can quickly change style or scripts and update the documents automatically,

as well as reduce the final page weight of your document What’s more, browserswill cache your linked style, making the information immediately applicable toall pages that use it, speeding up the loading of the page and providing a moreseamless user experience

A linked style sheet is external to documents It contains the style rules with noHTML markup and is saved with an extension of css Linked style is then linked

to as many documents as you want by using the link element within the headportion of the HTML or XHTML page:

media="all" />

Trang 14

Chapter 8: Style Tips for Type and Design 169

Linked style sheets are very powerful because of their capability to control somany documents at once, making the management of documents far less time-consuming and frustrating (Figure 8-1)

Figure 8-1: A linked style sheet’s relationship to Web documents

An embedded style sheet is a style sheet that appears in the document head withinthe style element:

p { border: 1px dashed black;

}

</style>

Embedded sheets govern that document only (see Figure 8-2)

Figure 8-2: Embedded style within a document

Embedded style sheets override other style sheet types with the exception of line and user styles Although they are extremely useful and clutter a documentless than inline styles do, they should still be used sparingly Linked styles are farmore efficient—with embedded styles you have to update all the individual pages

Trang 15

in-P1: GIG

that contain them, reducing the efficiency gained by using linked styles You willsee embedded style used throughout this chapter, but that’s because using em-bedded styles enables me to show all that’s going on in one listing rather thanseveral

tip When working on CSS ideas, I start using an embedded style sheet so I don’thave to switch between documents each time I add or take away a style After

I’m finished, I remove the embedded style and link to the style information Icreated

Inline style is added to an individual element using the style attribute, as in thefollowing example:

<p style=”border: 1px dashed black;”>This paragraph will have a 1 pixel black, dashed border around it.</p>

Inline style is powerful in that it overrides other styles It can be very useful forquick fixes or in those cases where you want to style something only once.However, relying on inline style results in the cluttering up of your documents.Documents become less accessible because various user agents might not recog-nize inline styles, and the wide range of devices that are emerging might also havedifficulty recognizing inline style What’s more, you can’t tap into the documentmanagement aspects of CSS if you rely too heavily on inline style So it’s best toreserve inline style for occasional, specific use

An imported style sheet is an external sheet that uses the @import property within

an embedded style sheet to import the styles instead of being linked directly to apage:

Trang 16

information that those browsers read improperly This technique is described indetail in Chapter 9, “Laying Out Pages with CSS.”

The cascade in style sheets is a hierarchy of application It appears in several

places—you already read about how inline styles will override embedded styles,and both will override linked styles So, if you have an inline style for a paragraph,

an embedded style for a paragraph, and a linked style for a paragraph, the inlinestyles take precedence over the embedded styles, which take precedence over the

linked styles This is referred to as conflict resolution, and the cascade is one means

of resolving such conflicts

note Additional style information that doesn’t conflict from one style sheet type toanother is also applied to the selector in question.

Another area where the cascade appears is in the ordering of multiple style sheetswithin a document For example, say you have three style sheets linked to yourdocument:

The rules of the cascade say that whichever is last in the list is the style that will

be applied Say you have a style rule for a paragraph that is different in each ofthese sheets The styles in molly3.css will be the style that is applied

People run into trouble with this a lot because there may be conflicting stylerules in a given sheet, so the cascade resolves the conflict using this applicationhierarchy

If you’re struggling to figure out why your h2 element isn’t turning blue, the reasonmight be because that style is in conflict with another h2 style that appears in astyle sheet that takes precedence within the hierarchy

Inheritance is the relationship of parent elements to child elements In CSS, most

properties are inherited, but some are not So, if you’re finding conflicts in yourCSS designs, be sure to look at how the styles for a parent element might beinfluencing the style of its children or grandchildren

This harkens back to the tree structure discussed in Chapter 6 If you have a structured document, finding these types of conflicts is easy, and avoiding themaltogether is easier still

Trang 17

well-P1: GIG

Listing 8-1 shows a document with inheritance at work

Listing 8-1: Inheritance within a simple document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

font-size: 16px;

background-color: #ccc;

color: #000;

} h1 { font-size: 22px;

color: #999;

} h2 { font-size: 18px;

}

p { background-color: #fff;

Trang 18

Figure 8-3: Inheritance at work

Although cascade and inheritance are commonly known aspects of CSS and youhave probably had some experience with them, one issue that is documented less

but is incredibly important in CSS is specificity.

Specificity is the weight or importance of a given element and is calculated in afairly complex way

note See www.w3.org/TR/REC-CSS2/cascade.html#specified-valuefor the actual logic used to calculate specificity If an element is higher in

specificity due to these calculations, the style associated with that element iswhat will be applied

A clear example of this is that elements with a class selector will have a higherspecificity than a class that can be used anywhere Listing 8-2 shows this inaction

Listing 8-2: Specificity test

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(continued)

Trang 19

P1: GIG

font-weight: bold;

} a.mylinkclass { color: #333;

<p class="mylinkclass">This text is light gray and bold.</p>

</body>

</html>

Understanding that specificity is a part of conflict resolution in CSS means thatyou’ll be better able to figure out why a given style might be appearing (or notappearing) within your document (see Figure 8-4)

One of the earliest supported yet still most highly sought after features in CSS isthe ability to have multiple styled links within a given document Designers lovethis because they can create link colors and styles of any number and any kindwithout having to rely on scripting and graphics

To create multiple link styles, combine a class with each of the pseudo class tors used to define links Those pseudo classes include the following:

selec- a:link

a:visited

a:hover

a:active

Trang 20

Figure 8-4: Specificity resolves conflict by assigning the rule with the highest

specificity to the selector

Each of these pseudo classes corresponds to a specific state of the link

Link is the normal state

Visited is the state of the link after it’s been followed

Hover is the state as the mouse or pointing device hovers over the link

Active is the state when the mouse is clicked on the link

note To work properly, your pseudo classes must follow the specific order: link,visited, hover, active (LVHA) Many people remember this using the

mnemonic “LoVeHAte.”

Listing 8-3 shows a scenario in which I have created two classes: leftnav andrightnav, and added them to my pseudo class selectors to create two differentstyles of links for the same page

Listing 8-3: Multiple link styles in a document

Trang 21

P1: GIG

text-decoration: none;

} a.leftnav:visited { color: purple;

} a.leftnav:hover { color: orange;

} a.leftnav:active { color: blue;

} a.rightnav:link { color: #999;

font-weight: bold;

} a.rightnav:visited { color: purple;

} a.rightnav:hover { color: blue;

} a.rightnav:active { color: red;

Trang 22

While I’ve placed both links in the main body for demonstration purposes, the linkswould be used for left and right navigation, respectively You can create as manylink classes as you like, depending upon your needs In Figure 8-5, you can seethe results of the two different link styles

Figure 8-5: Multiple link styles with CSS

As you saw in the last secret, the :hover pseudo class is used with links to allowfor a hover color as the mouse passes over the link

It’s become conventional to use this to create special effects, such as having

an elegant color change upon mouse over, as demonstrated in the followingcode:

a:link { color: blue;

} a:visited { color: purple;

} a:hover { color: orange;

}

Định dạng
Số trang	44
Dung lượng	2,55 MB