Tài liệu Sams Teach Yourself CSS in 24 Hours- P3 pdf

50 606 0
  • Loading ...
1/50 trang

Thông tin tài liệu

Ngày đăng: 21/01/2014, 16:20

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. Forexample:h1 { color: blue; }This selects all <h1> tags and specifies that they’re the color blue. Type selectors are theeasiest to use because they’re so straightforward, but they’re also very limited. What ifyou want only some of the <h1> tags to be blue and others to be green? That’s whenyou’d use class and id selectors.82 Hour 5Although I said type selectors had to be HTML tags, I must admit that’s onlyhalf true. They actually have to be any sort of legitimate element for thelanguage 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 notXML or XHTML) lets you leave out certain tag declarations entirely, such as the<body> element. The opening and closing tags are implied. If you have a rulebased on body, such as ‘body { font-family: Arial; }’, a CSS-compliantbrowser will still apply your font to the implied <body> even though no tagsare 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 toidentify specific tags as being part of a certain set you’ve defined.Using class and id SelectorsYou can combine class selectors (or even id selectors) with <div> 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 oneach <div> tag.09 0672324091 ch05 6/13/02 10:39 AM Page 82Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.LISTING 5.1 HTML Sections Set via <div> and class<! imgtip-5.1.html ><! Accessibility tips for images ><! By Kynn Bartlett, kynn@kynn.com ><html><head><title>Image Accessibility</title><link type=”text/css” rel=”stylesheet”media=”screen” href=”tips-5.2.css”></head><body><div class=”nav”><a href=”http://access.idyllmtn.com”>access.idyllmtn.com</a>&middot;<a href=”http://access.idyllmtn.com/tips/”>Tips</a>&middot;<! this page’s short title >Images</div><div class=”header”><h1>Image Accessibility</h1><h2>Making your graphics accessible</h2></div><div class=”tips”><p>Here’s some helpful tips on making your graphicalcontent accessible to users who can’t see images:</p><ul><li>Always include an <tt>alt</tt> attribute on your<tt>&lt;img&gt;</tt> tag.</li><li>The <tt>alt</tt> attribute should contain a shortreplacement for the graphic, in text. If the imageitself has text, list that in <tt>alt</tt>.</li><li>If the image is purely decorative and doesn’t conveyany additional information, use <tt>alt=””</tt>.</li><li>If there is more information in the graphic than youcan convey in a short <tt>alt</tt> attribute, suchas the information in a graph or chart, then usethe <tt>longdesc</tt> attribute to give the URL ofa page which describes the graphic in text.</li></ul></div><div class=”footer”><hr><address>Copyright &copy; 2002 by Kynn Bartlett</address>Selectors 835continues09 0672324091 ch05 6/13/02 10:39 AM Page 83Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.</div></body></html>As you can see, you linked in an external style sheet, tips-5.2.css,using a <link> 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 */{color: green;background-color: white;font-family: “Times New Roman”, serif;}The effect of applying these styles is shown in Figure 5.1. You’ll notice that I’ve usedbackground colors to make two of the <div> sections visible; in practice, this can be asomewhat unattractive effect; some of my examples are written simply to illustrate aprinciple rather than to be aesthetically appealing, especially in the limited black, white,and gray shades available in this book.84 Hour 5LISTING 5.1 Continued09 0672324091 ch05 6/13/02 10:39 AM Page 84Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.The Universal SelectorIn addition to type, class, and id selectors, CSS also defines a universal selector. Theuniversal selector applies to all tags and content within a page and is represented by anasterisk (*). Here’s an example of a universal selector rule:* { color: blue; }Selectors 855FIGURE 5.1Netscape 6 displayssectional styles set by<div> and class.Workaround for Netscape 4 and Internet ExplorerThe 4.0 versions of both Netscape and Internet Explorer do not support theuniversal selector. For this reason, you’ll probably want to write your univer-sal selectors to also include the <body> tag, like this:*, body { font-family: Arial; }If you’re writing a rule that uses the universal selector and there’s something else to thatrule, such as a class selector, you can leave out the asterisk. In fact, the general way ofwriting class selectors is just a special case of the universal selector with the asteriskomitted. The following two declarations are identical:09 0672324091 ch05 6/13/02 10:39 AM Page 85Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.*.there { color: green; }.there { color: green; }You may wonder why there’s a need for a universal selector; as you’ve seen before, youcan affect the style of an entire page by using a selector of the <body> tag. It’s importantto understand that the universal selector sets the style on all elements and doesn’t just setan inherited default. What do I mean? Consider the following style sheet:* { color: green; }h1 { color: blue; }Let’s assume you’ll link that to an HTML file that includes this:<h1>This is <em>very</em> important</h1>What color will the word “very” be? It will be green and in the middle of a blue headlinebecause the universal rule says everything has the color green explicitly set, just as ifthere were a rule for every possible element, readingelement { color: green; }In practice, you’d probably want the color of the <em> to inherit from the <h1>’s style, soyou need to be very careful about when and where you use a universal selector. You’lllearn more about inheritance in Hour 7, “Cascading and Inheritance.”Combining Simple SelectorsTo get the most utility out of your CSS rules, you’ll want to write combined rules.You’ve already learned a little about grouping selectors together; now you’ll see how youcan use descendant selectors as well.Grouping SelectorsAs you learned in Hour 2, you can combine rules by listing the selectors together, sepa-rating them by commas. You can combine any sort of selectors in this way, such as in thefollowing rule:/* Anything that is sorta heading-like is in Arial;only odd headings are maroon and the rest are green */h1, h2, h3, h4, h5, h6, .heading, .standout, #headline{ font-family: Arial; }h1, h3, h5, dt, .heading, .standout, #headline{ font-color: maroon; }h2, h4, h6{ font-color: green; }You could have written the same set of rules in this manner:/* Anything that is sorta heading-like is in Arial;only odd headings are maroon, and the rest are green */86 Hour 509 0672324091 ch05 6/13/02 10:39 AM Page 86Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.h1, h3, h5, dt, .heading, .standout, #headline{ font-family: Arial;font-color: maroon; }h2, h4, h6{ font-family: Arial;font-color: green; }Writing it the first way makes it easier to change the font color if you need to; the declara-tion font-family: Arial; appears only one place in your document. The way you groupyour rules can improve the ease with which you can modify them. Note, though, thatthere’s a drawback to this approach, as well; to change how one type of selector is ren-dered (say, anything in the standout class), you’ll need to edit several rules. There are nohard-and-fast guidelines, therefore, about how you can group your rules in modules; asyou gain experience with CSS, you’ll form your own methods for style rules grouping.Descendant SelectorsOne of the most useful ways to group selectors together is to use a descendant selector.A descendant, in HTML and XML, is an element that’s completely contained withinanother element’s content. As an example, the <h2> is a descendant of the <div>, and the<em> of the <h1>,in Listing 5.3. The <em> is also a descendant of the <div>,as it’s con-tained by both the <div> and the <h1>.LISTING 5.3 Descendants in HTML<! babe-5.3.html ><! By Kynn Bartlett kynn@kynn.com ><html><head><title>Best Family Movie Ever</title><link type=”text/css” rel=”stylesheet”href=”babe-5.4.css”><style type=”text/css”></style></head><body><div class=”header”><h1>Movie Review: <cite>Babe</cite></h1><p>Mini-Review by Joe Moviefan</p></div><div class=”opinion”><h2>The Best Family Movie <em>Ever</em></h2><p>The movie <cite>Babe</cite> was the best familymovie ever produced! This great movie featuredSelectors 875continues09 0672324091 ch05 6/13/02 10:39 AM Page 87Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.talking animals, a cantankerous old man, andsubtle-yet-Oscar-winning special effects whocould ask for more? The clever writing andhumorous touches make this all-ages movie greatfor children while still very enjoyable byadults. Feel like a kid again see<cite>Babe</cite>!</p></div><hr><div class=”footer”><p>Copyright &copy; 2002 by<a href=”mailto:joe@kynn.com”>Joe Moviefan</a></p></div></body></html>Descendant selectors define rules based on where a given tag appears within the page bycombining together simple selectors, separated by spaces. For example, here’s a rule tochange the color of all <cite> tags contained within paragraphs:p cite { color: white; background-color: black; }You’ll notice that I listed the outside tag first and then the inside. If you did it the otherway around, you wouldn’t match anything because there are no cite tags that containparagraph tags.If you add this rule to the <style> element of your HTML page from Listing 5.3, youget the effect shown in Figure 5.2. Notice that the <cite> within the <h1> is not styledby this rule, just the <cite> inside the <p> element.It’s important to keep in mind that a descendant selector means any descendant, not justan immediate child. A descendant could be an element inside an element inside an ele-ment. This allows us to make rules that apply to any descendant element, no matter howdeeply it’s nested.You can combine section styles (set via class and <div>) with element-based type selec-tors, as well; for example, the following code changes the font face of <p> tags withinthe header section but modifies no others:.header p { font-family: “Courier New”, monospace; }The effects of this rule are shown in Figure 5.3.88 Hour 5LISTING 5.3 Continued09 0672324091 ch05 6/13/02 10:39 AM Page 88Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Selectors 895FIGURE 5.2Netscape 6 displaysthe second <cite>with your chosen style.Header paragraphFIGURE 5.3Changing the headerparagraph font style, asshown in Netscape 6.09 0672324091 ch05 6/13/02 10:39 AM Page 89Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.A more complete style sheet that demonstrates how to set a number of different combined selec-tors is listed in Listing 5.4. Figure 5.4 shows how Listing 5.3 looks with this style sheet applied.LISTING 5.4 A Variety of Selectors in a Single Style Sheet/* babe-5.4.css: Style sheet for Babe review *//* Written by Kynn Bartlett <kynn@kynn.com> */body{font-family: Arial, sans-serif;color: black;background-color: white;}.header h1{font-family: Verdana, sans-serif;color: fuchsia;}.header p{font-family: “Courier New”, monospace;color: teal;font-size: larger;}.header cite{color: purple;}.opinion h2{color: white;background-color: navy;font-family: Arial, sans-serif;}em{font-size: larger;}p cite{color: white;background-color: black;}90 Hour 509 0672324091 ch05 6/13/02 10:39 AM Page 90Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Pseudo-classes and Pseudo-elementsIn addition to type selectors and class selectors, CSS also allows pseudo-class andpseudo-element selectors.A pseudo-class selector is a selector based on a set of predefined qualities that an HTMLelement can possess. These qualities function in practice similar to a class attribute onthe element, so in CSS terms, they are called pseudo-classes. No actual class attributesexist in the markup that correspond to these pseudo-classes; instead, they represent someSelectors 915Body TextFooterOpinionHeader.footer{font-family: “Times New Roman”, serif;font-size: small;}.footer a{color: green;}FIGURE 5.4Displaying variousselectors in Netscape 6.LISTING 5.4 Continued09 0672324091 ch05 6/13/02 10:39 AM Page 91Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.[...]... can think of these boxes as containers that hold other boxes or that hold text values Each box in the CSS box model is held within by another box, except for the box corresponding to the root node in our tree The outer box is called the containing box A block-containing box can hold other block boxes or inline boxes; an inline-containing box can hold only inline boxes In Figure 6.3, you can see the tree... display: block Grade and inline Notes A- A few quirks; see Hour 11, “Styling Links” Basic margins A Basic borders A Basic padding A The CSS Box Model 113 Everything described in this hour should be reasonably safe to use; specific quirks for margin, border, and padding are described in Hour 13 Q&A Q What kind of element is a table cell? Is that block or inline? A It’s neither inline nor block The display... { margin: 1em; } Margins are always transparent, meaning that whatever background color is set on the containing box will shine through There’s one more thing you need to know about margins, and that’s collapsing margins The vertical margins—those above and below the element—do something called collapsing, which means that only the largest value of the margins between two elements is used Margins will... The margin, border, padding, and content of a box 6 margin border padding this is the content padding border margin 110 Hour 6 You’ll learn more about the margin, border, and padding properties in Hour 13, “Borders and Boxes”; this hour is a general introduction to the box model, and we’ll get into more detail about other property values later in the book The margin Property The margin is an invisible... constrained in some way (by other The CSS Box Model 105 block elements, by CSS properties, or by HTML markup), they’ll stretch across the whole page One thing you’ll notice when you start using CSS is that your headers ( and friends) go all the way across! Set the background-color property on an and you’ll see how big it really is Inline An inline element doesn’t begin and end lines; instead,... is contained within the flow of the text Examples of inline tags include , , , , , and Inline elements flow one after another in a line, with no line breaks, horizontally across the page until the end of the available space is used up; then they just continue where they left off on the next line down The display Property You can change the type of an element by using the... need to Certain CSS properties can be set only on block or inline elements; for example, the text-indent property (which you’ll learn about in Hour 12, “Alignment and Spacing”) applies only to block elements Block A block element is one that is intended to be displayed as a distinct block of content, starting and ending with a new line Besides the tag, other block elements in HTML include ,... style sheet and also has its own embedded CSS rules within a element in the Such a page is listed in Listing 7.2 LISTING 7.2 An HTML Page with Tips on Color Use Accessibility of Color Cascading and Inheritance 117 LISTING 7.2 Continued yahoo { background-color: silver; color:... borders (and margins and padding) around inline elements as well as block elements; this sets a thin black border around tags: i { border: 1px solid black; } The padding Property The space surrounding the content is the padding; this could be thought of as whitespace because there’s nothing in it (no content or border), but keep in mind that it doesn’t have to be white The padding is always the... and display Web pages • How to set margins, borders, and padding on a box Displaying Content in CSS The content of a Web page is the information encoded within the HTML page, found between the opening and closing tags of the HTML markup These tags define the structure of the content, a framework that gives meaning to the content For example, consider the following HTML: 104 Hour 6 This is the tricky . because<a> is the only visible linking element in HTML. Here’s an example CSS rule using :link:a:link { color: red; }Visited links are those that the user. 5.4Displaying variousselectors in Netscape 6.LISTING 5.4 Continued09 0672 3240 91 ch05 6/13/02 10:39 AM Page 91Please purchase PDF Split-Merge on www.verypdf.com
- Xem thêm -

Xem thêm: Tài liệu Sams Teach Yourself CSS in 24 Hours- P3 pdf, Tài liệu Sams Teach Yourself CSS in 24 Hours- P3 pdf, Tài liệu Sams Teach Yourself CSS in 24 Hours- P3 pdf

Mục lục

Xem thêm

Gợi ý tài liệu liên quan cho bạn