Thông tin tài liệu
144 Part III: Taking Precise Control Over Web Pages and Styles External style sheets An external style sheet holds all your style rules in a separate text document that you can reference from any HTML file on your site. You must maintain a separate style sheet file, but an external style sheet offers benefits for over- all site maintenance. If your site’s pages use the same style sheet, you can change any formatting characteristic on all pages with a change to the style sheet. We recommend using external style sheets on your sites. Linking To reference an external style sheet, use the link element in the Web page header, like this: <html> <head> <title>External Style Sheet Example</title> <link rel=”stylesheet” type=”text/css” href=”styles.css” /> <head> <body> <! Document content goes here > </body> </html> Use inline styles carefully You can attach individual style rules, called an inline style, to individual elements in an HTML docu- ment. An inline style rule attached to an element looks like this: <p style=”color: green;”>Green text.</p> Adding style rules to an element isn’t really the best approach. We generally recommend that you choose either internal or (preferably) external style sheets for your rules instead of attaching the rules to individual elements in your document. Here are a few reasons: ✓ Your style rules get mixed up in the page and are hard to find. ✓ You must place the entire rule in the value of the style attribute, which makes complex rules hard to write and edit. ✓ You lose all the benefits that come with grouping selectors and reusing style rules in external style sheets. 16_9780470916599-ch09.indd 14416_9780470916599-ch09.indd 144 11/30/10 12:25 AM11/30/10 12:25 AM 145 Chapter 9: Introducing Cascading Style Sheets The href attribute in the <link> element can take either ✓ A relative link (a style sheet on your own site) ✓ An absolute link (a style sheet that doesn’t reside on your own site) Usually, you shouldn’t use a style sheet that doesn’t reside on your Web site because you want control of your site’s look and feel. To quickly add style to your Web page (or to experiment to see how brows- ers handle different styles), use an absolute URL to point to one of the W3C’s Core Style sheets. Read more about them at www.w3.org/StyleSheets/ Core. Chapter 6 covers the difference between relative and absolute links. Importing The @import statement instructs the browser to load an external style sheet and use its styles. You use it within the <style> element but before any of the individual style rules, like so: <style> @import “http://www.somesite.edu/stylesheet.css”; </style> Style rules in an imported style sheet take precedence over any rules that come before the @import statement. So, if you have multiple external style sheets referenced with more than one @import statement on your page, rules apply from the later style sheets (the ones farther down the page). Understanding the Cascade Multiple style sheets can affect page elements and build upon each other. It’s like inheriting styles within a Web page. This is the cascading part of CSS. Take this real-world example of a Web site for a university English depart- ment. The English department is part of the School of Humanities, which is one school in the university. Each of these entities — the university, the school, and the English department — has its own style sheet. 1. The university’s style sheet provides style rules for all pages in the site. 2. The school’s style sheet links to the university’s style sheet (using an @import statement), and adds more style rules specific to the look the school wants for its own site. 16_9780470916599-ch09.indd 14516_9780470916599-ch09.indd 145 11/30/10 12:25 AM11/30/10 12:25 AM 146 Part III: Taking Precise Control Over Web Pages and Styles 3. The English department’s style sheet links to the school’s style sheet. Thus, the department’s pages both have their own style rules and inherit the style rules from both the school’s and the university’s style sheets. But what if multiple style sheets define rules for the same element? What if, for example, all three style sheets specify a rule for the h1 element? In that case, the nearest rule to the page or element you’re working on wins: ✓ If an h1 rule exists on the department’s style sheet, it takes precedence over the school and university h1 styles. ✓ If an individual page within the department applies a style rule to h1 in a <style> tag, that rule applies. 16_9780470916599-ch09.indd 14616_9780470916599-ch09.indd 146 11/30/10 12:25 AM11/30/10 12:25 AM Chapter 10 Using Cascading Style Sheets In This Chapter ▶ Getting a handle on using CSS ▶ Positioning objects on a page ▶ Creating font rules ▶ Creating style sheets for print ▶ Understanding aural style sheets U nderstanding the structure and syntax of CSS is easy. Learning about the properties that CSS can apply to (X)HTML documents takes a little more time and effort, though. However, where the learning curve really gets interesting is when it comes to learning how to use CSS to take a plain or ordinary Web page and kick it up a notch. This chapter deals with how to put CSS to work, rather than focusing on its structure and inner workings. If you need a refresher of CSS style rules and properties, read Chapter 9 (a high-level overview of CSS and how it works). Then you can return to this chapter and put CSS into action. Now it’s time to make a page and give it some style! To use CSS efficiently, follow these general guidelines: ✓ When you test how a page looks, use internal styles so you can tweak to your heart’s delight. (This chapter shows internal style sheets, but Chapter 9 covers internal and external style sheets in greater detail.) ✓ When your test page looks just right, move those internal styles to an external sheet, and then apply them throughout your site, or to as many pages in that site as make sense. 17_9780470916599-ch10.indd 14717_9780470916599-ch10.indd 147 11/30/10 12:25 AM11/30/10 12:25 AM 148 Part III: Taking Precise Control Over Web Pages and Styles Managing Layout and Positioning You can use CSS to lay out your pages so that images and blocks of text ✓ Appear exactly where you want them to ✓ Fit exactly within the amount of space you want them to occupy After you create styles within a document, you can create an external style sheet to apply the same styles to any page. Listing 10-1 shows a Web page without any defined styles. This basic page is shown in Figure 10-1. Listing 10-1: A Fairly Dull Page <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en ” > <head> <title> Pixel’s Page </title> <meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1” /> </head> <body> <h1> I’m Pixel the Cat. Welcome to my page. </h1> <div id=”navBar”> <p> Links of interest: </p> <p><a href=”http://www.google.com/”> Google </a></p> <p><a href=”http://www.amazon.com/”> Amazon </a></p> <p><a href=”http://www.bing.com/”> Bing </a></p> </div> <img src=”/images/pixel1.jpg” alt=”The Cat” width=”320” height=”240” id=”theCat” /> </body> </html> Creating links for your Web pages is covered in detail in Chapter 6. There, you’ll find everything you need to know about creating great links. For ques- tions regarding Cascading Style Sheets and the power they can bring to your Web site content, turn to Chapter 9. The cat looks great, but the page certainly doesn’t show off his possibilities. The addition of some styles improves this page immensely. Here’s how! 17_9780470916599-ch10.indd 14817_9780470916599-ch10.indd 148 11/30/10 12:25 AM11/30/10 12:25 AM 149 Chapter 10: Using Cascading Style Sheets Figure 10-1: This style-free page doesn’t maximize this cat’s possibilities. Visual layouts Instead of the links appearing above the image, as they do in Figure 10-1, we want them on the left, a typical location for navigation tools. The following markup floats the text for the search site links to the left of the image (see Figure 10-2): <style type=”text/css”> #navBar { background-color: #CCC; border-bottom: #999; border-left: #999; border-width: 0 0 thin thin; border-style: none none groove groove; display: block; float: left; margin: 0 0 0 10px; padding: 0 10px 0 10px; width: 107px; line-height: 0.2em; } </style> 17_9780470916599-ch10.indd 14917_9780470916599-ch10.indd 149 11/30/10 12:25 AM11/30/10 12:25 AM 150 Part III: Taking Precise Control Over Web Pages and Styles Figure 10-2: The navigation bar now looks more like standard left-hand navigation. In the preceding rules, we ✓ Added a <style> element ✓ Defined the navBar id inside the <style> element ✓ Used the navBar id to instruct the content to float to the left of images, which causes them to appear in the same part of the page to the left, rather than above the graphic This rule says that anything on the page that belongs to the navBar id (as shown in Figure 10-2) should display with ✓ A light-gray background ✓ A thin, grooved-line border at bottom and left, in a darker gray ✓ No top or right border ✓ A block that floats to the left (so everything else on the page moves right, as with the image in Figure 10-2) ✓ A left margin of 10 pixels (px) ✓ Padding at top and bottom of 10px each ✓ A navbar area 100px wide 17_9780470916599-ch10.indd 15017_9780470916599-ch10.indd 150 11/30/10 12:25 AM11/30/10 12:25 AM 151 Chapter 10: Using Cascading Style Sheets You’ll note that we also set the line-height at 0.2em. This ensures that menu line entries are compact, without too much white space between individual elements. Note that several properties in the declaration, called shorthand properties, take multiple values, such as margin and padding. Shorthand properties col- lect values from multiple related CSS properties (such as margin-height, margin-width, and so forth). See our online materials for a complete list. Those values correspond to settings for the top, right, bottom, and left edges of the navbar’s box. margin creates an empty zone around the box, and padding defines the space between the edges or borders of the box and the content inside the box. Here are the rules that explain how to associate values with properties that deal with margins, borders, padding, and so forth: ✓ If all the sides have the same value, a single value works. ✓ If any side is different from the others, every side needs a separate value. It’s okay to set some or all of these values to 0 (zero) as you see fit; this can often help to ensure that pages display consistently across a wider range of browsers (and browser versions). To remember what’s what, think of the edges of an element box in clock- wise order, starting with the top edge: top, right, bottom, and then left. Notice that we define margins and padding using px (pixels) rather than pt (points) or em (default character m’s width) as our unit of measure. This is a deliberate departure from best practices that we recommend elsewhere in this book (Chapter 11). That’s because margins and padding usually involve small increments or values and because those things relate very strongly to individual actual displays within specific browsers. Experiment with these values to get them just right, and be sure to check them on as many different browsers and platforms as you can to ensure that visitors to your Web site see what you intended. Positioning CSS provides several ways to specify exactly where an element should appear on a page. These controls use various kinds of positioning based on the relationships between an element’s box and its parent element’s box to help page designers put page elements where they want them to go. The kinds of properties involved are discussed in the following sections. Location You can control the horizontal and vertical locations of an image. However, when you use absolute positioning with any page element, you specify exactly where that element must sit, relative to the upper-left corner of the 17_9780470916599-ch10.indd 15117_9780470916599-ch10.indd 151 11/30/10 12:25 AM11/30/10 12:25 AM 152 Part III: Taking Precise Control Over Web Pages and Styles browser window. Thus, instead of letting it be drawn automatically to the right of the navigation bar, you can place an image down and to the left, as in Figure 10-3. But absolutely positioned items always percolate to the top layer when items overlap, which is why Pixel’s picture shows up on top. We change this default order later in the chapter. #theCat {position: absolute; top: 120px; left: 107px;} Figure 10-3: The image is more striking in this location. You might be wondering why the navbar rule (defined in the listing in the earlier section, “Visual layouts”) and the theCat rule (in the code snip- pet immediately preceding Figure 10-3) both start with a pound symbol (also known as a hash mark or octothorpe). That’s because the pound symbol applies to an id attribute. You use a period to start a class rule, and it will apply to every instance of that class wherever it appears on a page. Thus, although you can apply either a class or an id to specific elements, the difference between these two is that a class can be used repeatedly. Comparatively, an id can appear only once on a page. You can’t have anything else on the page that uses theCat as its id. The differ- ence, quite simply, is that a class lets you refer to every instance of some (X)HTML element with a single reference, but an id can address only a single instance for an element. Overlapping Two objects can be assigned to the same position in a Web page. Although this may sound like a problem, overlap can produce interesting design 17_9780470916599-ch10.indd 15217_9780470916599-ch10.indd 152 11/30/10 12:25 AM11/30/10 12:25 AM Downloa d f r o m W o w ! e B o o k < w w w.woweb o o k . c o m > 153 Chapter 10: Using Cascading Style Sheets effects — as you’ll see with our navbar and photo in code and screenshots that follow. When overlap occurs, the browser must determine the display order and which objects to show and which ones to hide. Using z-index, added to any rule, tells CSS how you want any object stacked over and under other objects that occupy the same space on the page: ✓ Lower numbers move down the stack. ✓ Higher numbers move up the stack. ✓ The default value for z-index is auto, which means it’s the same as for its parent element. Giving theCat a z-index value of -1 automatically puts it behind everything else on the page (as shown in Figure 10-4) for which the z-index isn’t set (see the HTML source for Figure 10-4 on the book’s Web site for the details). Figure 10-4: The cat is peeking out from behind the navigation bar. Changing Fonts for Visual Interest and Better Readability You can make a page more interesting by replacing old, boring, default fonts. Start by specifying a generic body font as well as setting some other default rules, such as background color and text color. 17_9780470916599-ch10.indd 15317_9780470916599-ch10.indd 153 11/30/10 12:25 AM11/30/10 12:25 AM [...]... shooting Figure 10 -5, the HTML used for our screen capture includes an additional tweak for Internet Explorer (IE) That’s because a bug in Internet Explorer for Windows that doesn’t occur in other browsers causes heading (h1) text to get truncated at the top (Try the source (X )HTML for Figure 10 -5 17_978047091 659 9-ch10.indd 154 11/30/10 12: 25 AM Chapter 10: Using Cascading Style Sheets 155 in IE to see... :link defines formatting for links that haven’t been visited ✓ :visited defines formatting for links that have been visited ✓ :focus defines formatting for links that are selected by the keyboard (for example, by using the Tab key) and are about to be activated by using the Enter key ✓ :hover defines formatting for links when the mouse cursor hovers over them ✓ :active defines formatting for links when... example in Listing 10-2 uses these options for paged media styles: ✓ Make the output black text on a white background ✓ Replace sans serif fonts with serif fonts Listing 10-2: Adding a Print Style Sheet This... options for formatting text (such as defining line height, font weight, and text alignment) and for converting text to uppercase or lowercase characters (X )HTML still includes various formatting elements, such as , , , , and ; however, all remaining formatting elements, such as , are deprecated That is, they’re no longer recommended for use (although they still work, and most... you: 17_978047091 659 9-ch10.indd 157 11/30/10 12: 25 AM 158 Part III: Taking Precise Control Over Web Pages and Styles ✓ Use the tag All CSS- capable browsers understand the link tag ✓ Use the tag with the @import keyword Only newer browsers understand the and @import combination See Chapter 9 for more on these two methods Sometimes style sheets can get complicated and long That’s... monitor, and limited bandwidth) print For paged, opaque material and for documents viewed onscreen but in Print Preview mode projection For projected presentations, such as projectors or transparencies screen For color computer screens Tty For media that use a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities Tv 17_978047091 659 9-ch10.indd 158 ... 11/30/10 12: 25 AM 168 Part III: Taking Precise Control Over Web Pages and Styles 17_978047091 659 9-ch10.indd 168 11/30/10 12: 25 AM Chapter 11 Getting Creative with Colors and Fonts In This Chapter ▶ Using CSS to define text formatting ▶ Working with page colors and backgrounds ▶ Changing font display ▶ Adding text treatments B efore style sheets came along, Web designers had to rely on HTML markup to... helpful Using CSS with Multimedia You can specify how you want your Web pages to look or behave on different media types depending on the medium Table 10-1 lists all the media types and their uses Table 10-1 Recognized Media Types Media Type All Suitable for all devices aural For speech synthesizers braille For Braille tactile-feedback devices embossed For paged Braille printers handheld For handheld devices... backgrounds, colors, fonts, and text sizes on Web pages With style sheets on the scene, however, designers could separate style information from content — meaning they could use Cascading Style Sheets (CSS) to control font, color, and other style information Why bother? Simple When you use CSS, you get the following: ✓ Better control when updating or editing formatting information ✓ No more HTML documents cluttered... Luckily, we can turn underlines off with CSS, but we still want the hyperlinks to look like hyperlinks, so we tell CSS to 17_978047091 659 9-ch10.indd 155 11/30/10 12: 25 AM 156 Part III: Taking Precise Control Over Web Pages and Styles ✓ Make links bold ✓ Make underlines appear when the cursor is over a link ✓ Show links in specific colors Figure 10-6: Declaring a rule for h1 makes it appear just how we like . truncated at the top. (Try the source (X )HTML for Figure 10 -5 17_978047091 659 9-ch10.indd 154 17_978047091 659 9-ch10.indd 154 11/30/10 12: 25 AM11/30/10 12: 25 AM 155 Chapter 10: Using Cascading Style. hyperlinks, so we tell CSS to 17_978047091 659 9-ch10.indd 155 17_978047091 659 9-ch10.indd 155 11/30/10 12: 25 AM11/30/10 12: 25 AM 156 Part III: Taking Precise Control Over Web Pages and Styles ✓ Make. Page <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR /xhtml1 /DTD /xhtml1 -transitional.dtd”> < ;html xmlns=”http://www.w3.org/1999 /xhtml lang=”en” xml:lang=”en ” > <head>
Ngày đăng: 14/08/2014, 12:20
Xem thêm: html xhtml and css for dummies 7th edition phần 5 ppsx, html xhtml and css for dummies 7th edition phần 5 ppsx
