Sams Teach Yourself CSS in 24 Hours- P3

Sams Teach Yourself CSS in 24 Hours- P3: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers aswell as some minor ones have increased support for Cascading Style Sheets in the latestversions. Web developers are aware of CSS and the vital role they play in designing greatWeb pages, and presumably you’ve got some idea of how important they are if you’vebought this book.
Nội dung trích xuất từ tài liệu:
Sams Teach Yourself CSS in 24 Hours- P382 Hour 5 So far you have learned how to create CSS rules using simple selectors—type selectors based on the HTML tag and class or id selectors based on attributes in the HTML. A type selector is simply the name of an HTML tag minus the angle brackets. For example: h1 { color: blue; } This selects all tags and specifies that they’re the color blue. Type selectors are the easiest to use because they’re so straightforward, but they’re also very limited. What if you want only some of the tags to be blue and others to be green? That’s when you’d use class and id selectors. Although I said type selectors had to be HTML tags, I must admit that’s only half true. They actually have to be any sort of legitimate element for the language you’re styling; this is how you can use CSS with XML, for example. And in fact, you don’t have to have the actual tag present! HTML (but not XML or XHTML) lets you leave out certain tag declarations entirely, such as the element. The opening and closing tags are implied. If you have a rule based on body, such as ‘body { font-family: Arial; }’, a CSS-compliant browser will still apply your font to the implied even though no tags are present. In Hour 4, “Using CSS with HTML,” you learned how you can set class and id selec- tors in your rules based on HTML attributes of class and id, such as #here { font-size: large; } .there { color: green; } An id selector uniquely identifies part of a page, whereas a class selector allows you to identify specific tags as being part of a certain set you’ve defined. Using class and id Selectors You can combine class selectors (or even id selectors) with tags to desig- nate specific sections of a page that should receive special styling. For example, consider the HTML page shown in Listing 5.1, which has a class attribute set on each tag. Selectors 83LISTING 5.1 HTML Sections Set via and class Image Accessibility access.idyllmtn.com · Tips · Images Image Accessibility Making your graphics accessible Here’s some helpful tips on making your graphical content accessible to users who can’t see images: Always include an alt attribute on your tag. 5 The alt attribute should contain a short replacement for the graphic, in text. If the image itself has text, list that in alt. If the image is purely decorative and doesn’t convey any additional information, use alt=””. If there is more information in the graphic than you can convey in a short alt attribute, such as the information in a graph or chart, then use the longdesc attribute to give the URL of a page which describes the graphic in text. Copyright © 2002 by Kynn Bartlett continues84 Hour 5 LISTING 5.1 Continued As you can see, you linked in an external style sheet, tips-5.2.css, using a tag. That style sheet defines a style for each section of the page; your sections are “nav,” “header,” “tips,” and “footer.” The style sheet is shown in Listing 5.2. LISTING 5.2 Sectional Styles Using Classes /* tips-5.2.css */ /* By Kynn Bartlett, kynn@kynn.com */ .nav /* Navigation bar */ { font-family: Verdana, sans-serif; } .header /* Top heading of the page */ { color: white; background-color: maroon; font-family: Verdana, sans-serif; } .tips /* A list of tips for accessibility */ { color: white; background-color: gray; font-family: Arial, sans-serif; } .footer /* Bottom of the page */ ...