Đang tải... (xem toàn văn)
So, you're the proud new owner of a Frammas And you've been enjoying its many wonders and capabilities for some months now Suddenly, your Frammas stops functioning It won't fram and it won't mas It just lies there on the table staring balefully up at you, accusing you of some 85 Licensed to siowchen@darke.biz Chapter 5: Splashing Around a Bit of Color unspeakable offense which has caused it to lose its very identity.
What you now?
You fix it, that's what!
You must be very careful when approaching an apparently dead Frammas These little toys like to 'play dead' and can startle you with a sudden 'resurrection.' Poke at the Frammas with a stick at least two meters long to be sure it really is dead.
Before you begin to attempt to fix your Frammas, we highly recommend that you disconnect it from its power source.
It is entirely possible to electrocute yourself if you fail to follow our instructions to the letter This can result in your sudden death, leaving the poor Frammas orphaned Please be careful.
OK, now we're ready to go into the actual repair process.
As you can see, I’ve identified two classes: caution and danger I used classes, rather than identifiers, because it’s quite likely that I’ll have more than one in stance of each of these kinds of notes in a document, and identifiers are limited to one usage per page Here are the CSS definitions of the two classes: File: frammas.css (excerpt) caution { text-align: center; font-weight: bold; background-color: gray; color: black; margin-left: 25%; margin-right: 25%; border: 1px solid red; } danger { text-align: center; font-size: 1.2em; 86 Licensed to siowchen@darke.biz Coloring Alternate Rows and Adding Cell Borders in Data Tables font-weight: bold; background-color: red; color: white; margin-left: 25%; margin-right: 25%; border: 3px solid red; } There’s nothing new here Each class defines a background and text color com bination that’s designed to attract attention Each is positioned so that it stands out from the page As you can see from this example, when we use CSS, the HTML code becomes much easier to read and maintain than it would be if we used nested tables to accomplish the same task Coloring Alternate Rows and Adding Cell Borders in Data Tables While we’re learning how to avoid the use of tables for page layout purposes, we must remain appreciative of the situations in which tables are a perfectly legitimate tool Displaying tabular data is a task that should still be entrusted to HTML tables However, we can make what might otherwise be fairly ordinary tables into more readable and attractive page elements with the help of a little CSS Figure 5.4 shows an admittedly stark example of a table presented in HTML Obviously, few of us would publish a web page with such a sparse table design, but it serves as a good starting point for this discussion Figure 5.4 A starkly ordinary table design 87 Licensed to siowchen@darke.biz Chapter 5: Splashing Around a Bit of Color Among this table’s problems are its complete lack of borders, and the fact that it’s hard to keep your place within the table rows as you read its contents We can address both issues with some simple CSS magic.6 Below is the HTML for a modified version of the above page; as you can see, I’ve defined a couple of trivial CSS rules here This is a case in which an external style sheet is probably overkill, though it may still constitute good design practice File: table.html (excerpt) Coloring Rows in a Table odd { background-color: lightgrey; } even { background-color: white; } table { border: 1px solid black; border-spacing: 0; } td { padding: 4px 6px; border: 1px solid black; } Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Actually, this example is somewhat contrived For historical reasons, web browsers will display tables with a one-pixel border by default, so Figure 5.4 actually represents a table that has had its default borders removed, either with CSS or through the now-deprecated (but common) practice of setting the border attribute of the table to 88 Licensed to siowchen@darke.biz Coloring Alternate Rows and Adding Cell Borders in Data Tables Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 I’ve simply defined two classes, odd and even, in an embedded style sheet, then labeled alternate rows of the table to correspond to those styles I’ve also defined a basic style rule that surrounds the table in a one-pixel black border Each cell also has a one-pixel border applied; the net result is a two-pixel line between and around every table cell The results of our markup are shown in Figure 5.5 Obviously, this display is much more readable, and while it isn’t a final solution, it gives us a much more pleasant starting point from which to begin additional work on the table 89 Licensed to siowchen@darke.biz Chapter 5: Splashing Around a Bit of Color Figure 5.5 Coloring table rows alternately, and adding cell borders, with CSS rules With some of the less frequently used aspects of table definitions in HTML, such as header (th and thead) and grouped columns (colgroup), you can create some professional-looking and eminently readable tables of data We’ll work on a more complete and complex data table in the final chapter of this book Background Images By now, you should feel fairly comfortable assigning background colors to elements using the background-color property, so let’s move on to assigning background images, which is done with the background-image property and the url function, as this markup shows: body { background-color: white; color: black; background-image: url(fish.jpg); } The url function can be used to specify any image file, similar to the way you’d use the img element’s src attribute If you define a graphic as the background for a page—as we have in the example above—that graphic will repeat, or tile, itself to fill up the entire browser viewport As you scroll through the document, the image will also scroll along This is the normal behavior of backgrounds, as Figure 5.6 illustrates 90 Licensed to siowchen@darke.biz Background Images Figure 5.6 Normal background image behavior Always Specify a Background Color with a Background Image Whenever you specify a background image which will appear underneath other content, you should specify an appropriate background color This color will display while the image is loading, and will appear for site users who have disabled images in their browsers However, you can use CSS to change both the tiling and scrolling characteristics of images You can define the graphic so that, rather than tiling, it simply appears once, wherever you position it More interestingly, you can instruct the back ground graphic to remain in place while other objects that are placed on top of it, including text, effectively scroll over it 91 Licensed to siowchen@darke.biz Chapter 5: Splashing Around a Bit of Color Figure 5.7 Fixed background image displaying behind unscrolled text Figure 5.7 and Figure 5.8 show this effect as clearly as it can be shown on a “dead” page Figure 5.7 shows how the page looks before any scrolling takes place You can see that the picture of our happy fisherman is positioned in the lower right of the page In Figure 5.8, the numbered list has scrolled down several items, but as you can see, the fisherman image that serves as the background for this text remains firmly fixed in place Here’s the CSS rule that produces the fixed background effect demonstrated in Figure 5.7 and Figure 5.8: body { background-color: #30293f; color: white; background-image: url(fisherman.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } 92 Licensed to siowchen@darke.biz Background Images Figure 5.8 Scrolled text leaving fixed background image in place The background-repeat: no-repeat declaration stops the background image from tiling Whenever this declaration is used in conjunction with a backgroundimage declaration, only one instance of the image will appear in the background Other values that background-repeat can take on are repeat, which is the default value, and repeat-x and repeat-y, which repeat the image horizontally and vertically respectively The background-attachment property controls whether or not the background image scrolls with the content By default, it’s set to scroll, but it can also be set to fixed to achieve the effect we see with our fisherman image Finally, the background-position: right bottom declaration puts the image in the bottom-right corner of the browser window This property usually takes two keyword values: the first value controls the horizontal position and can be left, center, or right; the second value controls the vertical position, which can be top, center, or bottom The default value of the background position property is left top You can use a percentage, instead of these keywords, for either value In that case, the first value determines the image’s horizontal position, where 0% places the image right up against the left edge of the browser window, and 100% places 93 Licensed to siowchen@darke.biz Chapter 5: Splashing Around a Bit of Color it on the right edge Accordingly, the second value determines the image’s vertical position: 0% indicates the top of the window, and 100% indicates the bottom of the browser window These values aren’t limited to 0% or 100%—you can make use of any value in between For example, the following declaration would put your background image in the lower-right quarter of your background, but it wouldn’t be flush against the corner of the browser window background-position: 80% 80%; As you can see, CSS gives us a lot of control over background images! All of these properties can be set using the background shortcut property, which is covered in Appendix C Summary This chapter discussed how to use CSS rules to apply color to web pages After considering who controls the colors a web page ultimately displays—designer or user—we learned how to specify colors in CSS We then pondered the questions of color selection and combination, specifically considering the ways in which these decisions impact on colorblind users The chapter then focused on some practical applications of color: setting body color, dealing with transparency, and using color to make tables easier to read and elements like warnings and cautions more eye-catching and effective Finally, we discussed how CSS can be used to add background images to your document and took a tour of the properties that can be used to exert a great deal of control over them In Chapter 6, we’ll start looking at how we can spruce up our site even more by using different fonts and applying effects to them 94 Licensed to siowchen@darke.biz Working with Fonts This chapter examines the question of how to use fonts properly in CSS-based web page design After an explanation of how CSS deals with fonts, I’ll offer some guidelines on choosing font families and sizes for your page designs How CSS Deals with Fonts With the emergence of CSS, the HTML font element was deprecated in favor of using style sheets, which provide a greater degree of control in a more manage able format CSS provides great flexibility in our work with fonts While HTML limits you to working with only seven standard font sizes, CSS allows you to specify font sizes in a number of different ways, providing a nearly unlimited range of sizes In addition, CSS formalizes the ability to define a fallback, or default, font that can be used if none of the fonts you specify in a style rule are available on users’ machines This capability existed with the deprecated tag in HTML, but the list of defaults was never officially standardized With CSS, we also get the ability to change the weight of fonts (e.g bold or normal), alter their styles (e.g italic or oblique), and even to declare a font to display in small caps Licensed to siowchen@darke.biz Chapter 6: Working with Fonts The CSS properties you’ll work with in this chapter include: ❑ font-family ❑ font-size ❑ font-style ❑ font-variant ❑ font-weight ❑ font (shorthand property) The font-family Property A font family is simply a collection of fonts The members of a font family vary only by features such as weight and orientation For example, the font family Times contains fonts named Times Bold and Times Italic, both of which are based on the font Times Roman The issue of applying font families to web pages is tangled up with the question of using supported and/or unsupported fonts—a question to which an entire section of this chapter is devoted Here, I’ll cover font families briefly, but we’ll explore the subject in much greater detail later in this chapter You can use the font-family property to assign a list of specific and generic font families to any HTML block or element Usually, we supply a list of specific fonts—separated from one another by commas—and end the list with a generic font that is to be used if none of the specified fonts are available Here’s how that looks: font-family: Helvetica, Arial, sans-serif; Font families are used in the order in which we list them in the rule In the above example, the browser will look to see if the user has Helvetica installed If so, the text affected by this style rule will be shown in Helvetica If Helvetica isn’t present on the user’s system, the browser will look for the next font, Arial If it finds Arial, it uses it If it doesn’t find Arial, the browser uses whatever is defined as the browser’s default sans-serif font 96 Licensed to siowchen@darke.biz Generic Fonts Generic Fonts It’s worth pausing here to discuss how the browser gets its default sans-serif font, and other generic font settings Every browser with CSS support has preset defaults for the following generic font families: ❑ serif ❑ sans-serif ❑ monospace ❑ cursive ❑ fantasy When the browser encounters one of these generic font families, it will match it with an appropriate font For example, a browser running on Windows may substitute Times New Roman for serif, Arial for sans-serif, Courier New for monospace, and so on In serif fonts, such as Times New Roman, a small decoration or tail is added to the ends of many of the strokes that comprise each letter, helping to define those strokes Sans-serif fonts, such as Arial, have no such decorations Typically, the strokes of a sans-serif font are straight and of uniform width In monospace fonts, each letter of the alphabet is as wide as all the others, much like the effect that old typewriters used to create A cursive font is intended to mimic the connectedcharacter style of handwriting A fantasy font is a more decorative or fancy style of font Artistic views differ over which fonts look better on a web page Many people believe that serif fonts are easier to read because the small extenders along the bottoms of the letters give the eye something to follow as users read across a line Others argue that a sans-serif font is easier to read on a computer monitor Un fortunately, a discussion of these issues is beyond the scope of this book Figure 6.1 shows a sample of each of the three most popular generic font families As you can see, they’re quite different from one another 97 Licensed to siowchen@darke.biz Chapter 6: Working with Fonts Figure 6.1 Samples of serif, sans-serif, and monospace fonts The user may be able to change these default fonts through preference settings in the browser If that’s the case, then all bets are off Under such circumstances, the generic specification of sans-serif can’t even guarantee that a sans-serif font will be used If the user has overridden the default value for sans-serif to display a monospaced font, for example, they will see monospaced text wherever a font-family: sans-serif; declaration takes effect Regardless of how the browser arrives at its default setting for a generic font, that font will be used only when other fonts that appear before it in a list are not available If the name of a font family that you want to specify contains embedded spaces, you’ll need to enclose that family name in quotation marks, as shown here: font-family: "New Century Schoolbook", Baskerville, serif; Note that, while you’ll usually want to include fonts of the same type (serif, sans-serif, monospaced, etc.) in your list, it’s not mandatory that you so You can legally specify, for example, a list of specific font families that includes a sans-serif family, a serif family, and uses monospace as the default I’m not sure why you’d want to this, but it is possible What is fantasy? It’s a good question, but one that doesn’t have an easy answer The current CSS Recommendations don’t describe what any of these generic font families should look like, other than providing a simple example That’s not really a problem for serif, sans-serif, monospace, or to a lesser extent, cursive, all of which are self-describing, but fantasy is described 98 Licensed to siowchen@darke.biz ... practice File: table .html (excerpt) Coloring... begins the same way: Page Title... for the HTML 4.0 standard: The equivalent DOCTYPE for the newer XHTML 1.0 standard is: