Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
2,55 MB
Nội dung
18 0672324091 ch13 6/13/02 10:32 AM Page 232
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
HOUR
14
Lists
Not all information is organized into paragraphs of text. Many types of Web
content are actually lists of information, including navigation menus, prod-
uct feature lists, glossaries, and step-by-step instructions. Because of the
way information is read on the Web, the use of lists can be one of the most
effective 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 lists
List Formatting
Before I discuss how CSS browsers display lists, I’ll define some terms that
will be important this hour.
19 0672324091 ch14 6/13/02 10:42 AM Page 233
Please 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 list
items. A list can be ordered, which means that the order in which the items are presented
is important, or it can be unordered, indicating that there isn’t any specific order to the
items or that order isn’t important. A third type of list is the definition list (also called a
dictionary list); these consist of pairs of shorter words and longer explanations.
Types of HTML Lists
Lists in HTML are usually indicated by appropriate list markup, which means a list tag
such 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, no
matter 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 each
list 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 14
19 0672324091 ch14 6/13/02 10:42 AM Page 234
Please 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 the
examples later this hour to illustrate how CSS can be used to style lists.
Lists 235
14
FIGURE 14.1
Four different lists
displayed by
Netscape 6.
LISTING 14.1 Continued
19 0672324091 ch14 6/13/02 10:42 AM Page 235
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Ordered (Numbered) Lists
Ordered lists are displayed by putting a number marker of some kind before the list
items. Usually number markers are ordinary numbers, such as 1, 2, 3, and so on, but later
in 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 for
each list item.
236 Hour 14
Users with visual disabilities often find ordered lists easier to navigate than
unordered lists because they have a better sense of context; the numbers
can be used to keep track of location in a list. Using ordered lists on your
page is very helpful to these users.
Unordered (Bulleted) Lists
An unordered list is commonly displayed with a bullet marker. This is a symbol placed
before each item of the list; it commonly looks like a solid circle. During this hour you’ll
learn 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 roster
of 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 list
isn’t ordered by the tallest or the shortest in the class. In most cases, the significance of a
list’s order depends on how the list is meant to be used. A list’s order may not matter in
one case but might in another.
To create an unordered list in HTML, you use the
<ul> element, and each bullet point
gets 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 Lists
Definition lists consist of pairs of content—a shorter term and a longer definition. The
term is displayed first, and then the definition is displayed on a new line with an indented
left 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 236
Please 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 be
anything 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 have
the 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 237
14
Sometimes Web developers use the <ol>, <ul>, or <dl> tags to create
indented texts or margins. Using structural tags, such as the list elements, for
presentational effects like margins reduces the separation of content from
presentation. To create margin effects, use the CSS properties in Hour 13,
“Borders and Boxes,” not list markup.
Changing List Type with display
Using the CSS display property, you can override the default presentation of a tag and
create 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—block
or 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 to
change the appearance of your HTML lists. Notice that I set margin-left values to
remove 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 237
Please 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 sheet
to the HTML lists from Listing 14.1. Because the type of list marker is not set, the
exact marker used will vary from browser to browser, depending on what the browser
chooses to use for a default; your browser may show some of the lists differently than
in Figure 14.2. To ensure consistency across browsers, you’ll want to set the list item
properties described later this hour whenever you change the display of an element
to list-item.
238 Hour 14
FIGURE 14.2
Displaying alternate
list formatting in
Netscape 6.
The list-style-type Property
The type of list marker can be changed by using the list-style-type property. This
property is used only on elements that have the display value of list-item,but it can
be set on any tag, and the value will be inherited by children that are list items. Most
commonly, it’s set on the <ol> or <ul> tags that enclose the <li> list items; this way you
can 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 for
Printing.” The default value for <ol> is decimal, and for <ul> and lists created using
display: list-item, the default is disc.
19 0672324091 ch14 6/13/02 10:42 AM Page 238
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
TABLE 14.1 Values for the list-style-type Property
Value Effect
circle A hollow circle bullet
decimal Decimal number markers (1, 2, 3, . . .)
decimal-leading-zero Decimal number markers with leading zeros (01, 02, 03, . . .)
disc A solid circle bullet
lower-alpha Lowercase alphanumeric markers (a, b, c, . . .)
lower-roman Lowercase roman numeral markers (i, ii, iii, . . .)
none Don’t display any marker before the list
square A square bullet
upper-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 box
There are two types of values: those that set bullet markers, and those that set number
markers. 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 rule
of thumb, you should use number markers only with ordered lists and bullet markers
only with unordered lists.
One list contained within another list is called a nested list. Most browsers will display
nested, unordered lists by changing the bullet type from
disc to circle and then to
square. Using list-style-type you can control the marker with appropriate descendant
rules. 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 239
14
continues
19 0672324091 ch14 6/13/02 10:42 AM Page 239
Please 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 14
FIGURE 14.3
Lists displayed
in Netscape 6.
Markers (bullet or number) are displayed with the same font characteristic
as the list item. If you want to change a property—for example, the
color—set the property on the list item, and then use a <span> or other
inline 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 like
these, which put the number in red:
ol { color: black; }
ol li { color: red; }
ol li span { color: black; }
LISTING 14.3 Continued
19 0672324091 ch14 6/13/02 10:42 AM Page 240
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
The list-style-image Property
You aren’t restricted to bullets that are circles or squares; you can actually use any
image you like by using the list-style-image property. Naturally, you’ll want to use
only small images, which can function as bullets, for this purpose; images that are too
large will overwhelm the text. As an approximate rule, you should use bullets that are
between 12 and 20 pixels in size.
I created a simple one-bullet image in a graphics program by first creating a 16-pixel by
16-pixel blank image, then drawing a black circle, and then adding a green plus sign in
the middle of it; this is shown in Figure 14.4.
Lists 241
14
FIGURE 14.4
Creating a simple
list bullet image.
To use this image as a bullet, I simply need to set the list-style-image property in a
rule, 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 that
I also set the
list-style-type property to circle; if the image can’t be loaded for any
reason, the circle will be displayed instead.
19 0672324091 ch14 12/3/02 12:18 PM Page 241
Please 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; inCSS 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. The
term is displayed first, and then the definition is displayed on a new line with an indented
left 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: