Tài liệu Sams Teach Yourself CSS in 24 Hours- P6 docx

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

Thông tin tài liệu

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

18 0672324091 ch13 6/13/02 10:32 AM Page 232Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.HOUR14ListsNot all information is organized into paragraphs of text. Many types of Webcontent are actually lists of information, including navigation menus, prod-uct feature lists, glossaries, and step-by-step instructions. Because of theway information is read on the Web, the use of lists can be one of the mosteffective and direct methods of conveying information to an audience.Styling lists well can also enhance their usefulness.In this hour, you’ll learn•How lists are formatted in CSS• What the different types of lists are, and how they’re coded in HTML•How other elements can be displayed as lists•Which CSS properties change the shape and appearance of bullets•How to set the counting methods of numbered listsList FormattingBefore I discuss how CSS browsers display lists, I’ll define some terms thatwill be important this hour.19 0672324091 ch14 6/13/02 10:42 AM Page 233Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.A list is just a set of information that has been organized into discrete pieces called listitems. A list can be ordered, which means that the order in which the items are presentedis important, or it can be unordered, indicating that there isn’t any specific order to theitems or that order isn’t important. A third type of list is the definition list (also called adictionary list); these consist of pairs of shorter words and longer explanations.Types of HTML ListsLists in HTML are usually indicated by appropriate list markup, which means a list tagsuch as <ol>, <ul>,or<dl> and then list items marked up with <li>,or<dt> and <dd>for definition lists. It’s also possible to create a list using non–list tags, such as <div> or<a>, and convert them into lists using CSS.Within a CSS context, an element is a list item if it has the display property value list-item. When that value is set, the element is treated as an <li> tag by the browser, nomatter what the tag really is. The list-item value designates the element as a block ele-ment, except that it also allows for a list marker. A list marker is a symbol before eachlist item that indicates it’s a list.In Listing 14.1, you can see each of the three types of HTML lists, along with a fourth“list” done without using HTML list markup.LISTING 14.1 Four Lists in HTML<! lists-14.1.html ><html><head><title>List-O-Rama</title></head><body><table border=”0” width=”100%”><tr><td valign=”top” width=”50%”><h2>Ordered List: Tallest Mountains</h2><ol><li>Everest</li> <li>K2</li><li>Kangchenjunga</li> <li>Lhotse</li><li>Makalu</li> <li>Cho Oyu</li><li>Dhaulagiri</li></ol</td><td valign=”top” width=”50%”><h2>Unordered List: Flavors of Soda</h2><ul><li>Peach</li><li>Berry:<ul><li>Raspberry</li><li>Blackberry</li><li>Boysenberry</li></ul></li><li>Orange</li> <li>Kiwi</li></ul></td>234 Hour 1419 0672324091 ch14 6/13/02 10:42 AM Page 234Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.</tr><tr><td valign=”top” width=”50%”><h2>Definition List: Common Abbreviations</h2><dl> <! definition list ><dt>CSS</dt> <dd>Cascading Style Sheets</dd><dt>HTML</dt> <dd>Hypertext Markup Language</dd><dt>W3C</dt> <dd>World Wide Web Consortium</dd></dl></td><td valign=”top” width=”50%”><h2>Non-List: Links</h2><div id=”nav”> <! not done with list markup ><a href=”/”>Home</a><a href=”info/”>Info</a><a href=”shop/”>Shop</a><a href=”map/”>Map</a><a href=”contact/”>Contact</a></div></td></tr></table></body></html>The four lists are shown in a browser in Figure 14.1; this HTML file will be used in theexamples later this hour to illustrate how CSS can be used to style lists.Lists 23514FIGURE 14.1Four different lists displayed by Netscape 6.LISTING 14.1 Continued19 0672324091 ch14 6/13/02 10:42 AM Page 235Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.Ordered (Numbered) ListsOrdered lists are displayed by putting a number marker of some kind before the listitems. Usually number markers are ordinary numbers, such as 1, 2, 3, and so on, but laterin this hour you’ll learn to change those to other counting methods.Examples of ordered lists include the top ten best-seller list at a bookstore or a set of instruc-tions for making a cake. In both cases, the specific order of the list items is significant.Ordered lists in HTML are created by the <ol> element, which contains <li> tags foreach list item.236 Hour 14Users with visual disabilities often find ordered lists easier to navigate thanunordered lists because they have a better sense of context; the numberscan be used to keep track of location in a list. Using ordered lists on yourpage is very helpful to these users.Unordered (Bulleted) ListsAn unordered list is commonly displayed with a bullet marker. This is a symbol placedbefore each item of the list; it commonly looks like a solid circle. During this hour you’lllearn how to change the list bullet to other shapes or replace it with an image.Unordered list examples include a list of toppings you could order on a pizza or a rosterof students in a class. Even though the class roster may have an order—usually alphabet-ical by last name—the order probably isn’t significant; it’s arbitrary. For example, the listisn’t ordered by the tallest or the shortest in the class. In most cases, the significance of alist’s order depends on how the list is meant to be used. A list’s order may not matter inone case but might in another.To create an unordered list in HTML, you use the <ul> element, and each bullet pointgets an <li> tag. There are two other HTML tags that create bulleted lists, <dir> and<menu>,but these are deprecated in HTML 4, which means that you should use the <ul>tag instead, as newer browsers may not support the deprecated tags.Definition ListsDefinition lists consist of pairs of content—a shorter term and a longer definition. Theterm is displayed first, and then the definition is displayed on a new line with an indentedleft margin. A definition list in HTML is created with the <dl> element, with several<dt> and <dd> tags inside it.19 0672324091 ch14 6/13/02 10:42 AM Page 236Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.A definition list doesn’t have to be a glossary; although that’s a common use, it could beanything from a listing of features in a car to a menu of desserts that describes each treat.A definition list can be used whenever you have pairs of shorter text and longer explana-tions or descriptions of that text.Unlike the <li> tags in the <ol> or <ul> elements, the <dt> and <dd> tags do not havethe property display set to list-item. Instead, they have the display value of block,although the <dd> tag usually has an extra margin-left value of 1.33em.Lists 23714Sometimes Web developers use the <ol>, <ul>, or <dl> tags to createindented texts or margins. Using structural tags, such as the list elements, forpresentational effects like margins reduces the separation of content frompresentation. To create margin effects, use the CSS properties in Hour 13,“Borders and Boxes,” not list markup.Changing List Type with displayUsing the CSS display property, you can override the default presentation of a tag andcreate a list from non–list elements or change a list into a nonlist.If you change the value of the display property, it changes only how it’s presented—blockor inline—and in the case of the list-item value, it sets aside space for a marker.Changing the display property doesn’t affect any other values, such as the inherent margin-left on <ol> or <dd>.Examples of setting display properties can be seen in Listing 14.2, a style sheet tochange the appearance of your HTML lists. Notice that I set margin-left values toremove the left margins when changing the display value to block, and I add margin-left when setting display: list-item.LISTING 14.2 Several Lists with Type Changed/* lists-14.2.css */ul li { display: inline; }ol { margin-left: 0px; }ol li { display: block; }dd { display: list-item;margin-left: 0px; }div#nav a { text-decoration: none;margin-left: 2em;display: list-item; }19 0672324091 ch14 6/13/02 10:42 AM Page 237Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.The effects of this style sheet can be seen in Figure 14.2, which applies the style sheetto the HTML lists from Listing 14.1. Because the type of list marker is not set, theexact marker used will vary from browser to browser, depending on what the browserchooses to use for a default; your browser may show some of the lists differently thanin Figure 14.2. To ensure consistency across browsers, you’ll want to set the list itemproperties described later this hour whenever you change the display of an elementto list-item.238 Hour 14FIGURE 14.2Displaying alternatelist formatting inNetscape 6.The list-style-type PropertyThe type of list marker can be changed by using the list-style-type property. Thisproperty is used only on elements that have the display value of list-item,but it canbe set on any tag, and the value will be inherited by children that are list items. Mostcommonly, it’s set on the <ol> or <ul> tags that enclose the <li> list items; this way youcan set different styles for each list.The most common values for list-style-type are shown in Table 14.1; additional val-ues allow for internationalization of list markers and are discussed in Hour 20, “CSS forPrinting.” The default value for <ol> is decimal, and for <ul> and lists created usingdisplay: list-item, the default is disc.19 0672324091 ch14 6/13/02 10:42 AM Page 238Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.TABLE 14.1 Values for the list-style-type PropertyValue Effectcircle A hollow circle bulletdecimal Decimal number markers (1, 2, 3, . . .)decimal-leading-zero Decimal number markers with leading zeros (01, 02, 03, . . .)disc A solid circle bulletlower-alpha Lowercase alphanumeric markers (a, b, c, . . .)lower-roman Lowercase roman numeral markers (i, ii, iii, . . .)none Don’t display any marker before the listsquare A square bulletupper-alpha Uppercase alphanumeric markers (A, B, C, . . .)upper-roman Uppercase roman numeral markers (I, II, III, . . .)inherit Use the value of list-style-type from the containing boxThere are two types of values: those that set bullet markers, and those that set numbermarkers. It is possible to set a bullet list-style-type for ordered lists or to set a num-ber marker on unordered lists, but generally speaking, this should be avoided. As a ruleof thumb, you should use number markers only with ordered lists and bullet markersonly with unordered lists.One list contained within another list is called a nested list. Most browsers will displaynested, unordered lists by changing the bullet type from disc to circle and then tosquare. Using list-style-type you can control the marker with appropriate descendantrules. Topical outlines created using <ol> tags can be styled as well, like the following:ol { list-style-type: upper-roman; }ol ol { list-style-type: upper-alpha; }ol ol ol { list-style-type: decimal; }ol ol ol ol { list-style-type: lower-alpha; }ol ol ol ol ol { list-style-type: lower-roman; }A style sheet that changes list markers is shown in Listing 14.3.LISTING 14.3 Setting the list-style-type in CSS/* lists-14.3.css */ol { list-style-type: upper-roman; }ul { list-style-type: square; }ul ul { list-style-type: circle; }Lists 23914continues19 0672324091 ch14 6/13/02 10:42 AM Page 239Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.#nav a { display: list-item;margin-left: 2em;list-style-type: square; }The results of applying this style sheet to your sample lists can be seen in Figure 14.3.240 Hour 14FIGURE 14.3Lists displayed in Netscape 6.Markers (bullet or number) are displayed with the same font characteristicas the list item. If you want to change a property—for example, thecolor—set the property on the list item, and then use a <span> or otherinline element to change the text, like the following:<ol><li><span>Noam Chomsky</span></li></ol>To change the color of the list marker but not the list text, write rules likethese, which put the number in red:ol { color: black; }ol li { color: red; }ol li span { color: black; }LISTING 14.3 Continued19 0672324091 ch14 6/13/02 10:42 AM Page 240Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.The list-style-image PropertyYou aren’t restricted to bullets that are circles or squares; you can actually use anyimage you like by using the list-style-image property. Naturally, you’ll want to useonly small images, which can function as bullets, for this purpose; images that are toolarge will overwhelm the text. As an approximate rule, you should use bullets that arebetween 12 and 20 pixels in size.I created a simple one-bullet image in a graphics program by first creating a 16-pixel by16-pixel blank image, then drawing a black circle, and then adding a green plus sign inthe middle of it; this is shown in Figure 14.4.Lists 24114FIGURE 14.4Creating a simple list bullet image.To use this image as a bullet, I simply need to set the list-style-image property in arule, as in the following:selector { list-style-image: url(“graphic”);An example of a style sheet that uses bullet images is shown in Listing 14.4. Notice thatI also set the list-style-type property to circle; if the image can’t be loaded for anyreason, the circle will be displayed instead.19 0672324091 ch14 12/3/02 12:18 PM Page 241Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.[...]... vertical cell-spacing, respectively inherit Uses the value(s) for border-spacing set on the containing box Styling Tables Warning for Internet Explorer Current versions of Internet Explorer for Macintosh and Windows do not support the border-spacing property Listing 15.5 is a style sheet that you can apply to your schedule from Listing 15.1; it displays the cells with a horizontal spacing of 0.45em and... CSS cascading order is followed Warning for Netscape 6, Internet Explorer (Mac) Neither Netscape 6 nor Internet Explorer on Macintosh supports the margincollapse property An example of collapsed borders is shown in Listing 15.4 This table has different border values for and elements in the table heading and body LISTING 15.4 Style Sheet to Collapse Borders between Cells /* schedule-15.4 .css. .. but have evolved to serve as a rudimentary page-layout sublanguage within HTML 248 Hour 15 In Hours 16, “Page Layout in CSS, ” and 17, “Advanced CSS Layout,” I’ll tell you how you can eliminate tables entirely from your Web designs and use pure CSS for the positioning of page elements In this hour, I’m going to assume that you are using tables either for data or layout; the properties here can be used... An example of a data table built using table row groups can be seen in Listing 15.1; this is an HTML file that contains a weekly listing of scheduled events In fact, it’s my current schedule, as I’m writing this book; you can assume that all other time is taken up with either writing or sleeping, and often with very little of the latter! Styling Tables LISTING 15.1 249 A Simple HTML Table in Figure 15.7 FIGURE 15.7 The effects of applying the columnar style sheet as shown in Internet Explorer Applying... a distinct box, with a background surrounding each one For example, a table meant to look like a telephone keypad would use separated borders In HTML, the spacing between cells is set by the cellspacing attribute; in CSS the same effect is accomplished by the border-spacing property The border-spacing property sets the distance between the outer edge of adjacent cells in other words, the spacing between... margins and padding to suit taste • Design several list bullet graphics for your Web pages, and add these using the liststyle-image property Which kinds of bullets are best at capturing the user’s attention? • Create a navigation bar in a layout table that consists of links changed to list items using display Add two list bullets—one for unvisited links, one for visited links HOUR 15 Styling Tables... schedule from Listing 15.1 can be seen in Figure 15.6; notice that the widths of the table and the caption are the same FIGURE 15.6 The caption displayed after the table in Netscape 6 Styling Columns As noted before, each cell in a table is part of a column in addition to being in a row Cascading Style Sheets can be used to affect the presentation of columns, but only within certain parameters If you... containing box will be inherited, so you can set it on or selectors, and it will apply to list items within them The effects of list-style-position are clarified in Listing 14.5 by adding border properties to make the list item display boxes clear LISTING 14.5 Setting the Position of the List Bullet or Number /* lists-14.5 .css */ ol { list-style-type: upper-roman; list-style-position: inside;... { text-align: right; } tbody td { text-align: center; } Applying this style sheet to the HTML file from Listing 15.1 gives the effects shown in Figure 15.8 Note that you also have aligned the table itself in the center, using the margin-left and margin-right values of auto FIGURE 15.8 Aligning cells horizontally in Opera 6 Styling Tables In addition to the normal left, right, center, and justify values . longer definition. Theterm is displayed first, and then the definition is displayed on a new line with an indentedleft margin. A definition list in HTML. margin-left when setting display: list-item.LISTING 14.2 Several Lists with Type Changed/* lists-14.2 .css */ul li { display: inline; }ol { margin-left:
- Xem thêm -

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

Mục lục

Xem thêm

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