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

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

H OUR 14

Lists

Not 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 lists

List Formatting

Before I discuss how CSS browsers display lists, I’ll define some terms thatwill be important this hour

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 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 displayproperty value 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-itemvalue designates the element as a block ele-

list-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

<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>

L ISTING 14.1 Continued

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 tions for making a cake In both cases, the specific order of the list items is significant

instruc-Ordered lists in HTML are created by the <ol>element, which contains <li>tags foreach list item

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’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 roster

of students in a class Even though the class roster may have an order—usually 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

alphabet-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 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 indentedleft margin A definition list in HTML is created with the <dl>element, with several

<dt>and<dd>tags inside it

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 tions or descriptions of that text

explana-Unlike the <li>tags in the <ol>or<ul>elements, the <dt>and <dd> tags do not havethe property displayset to list-item Instead, they have the displayvalue of block,although the <dd>tag usually has an extra margin-leftvalue of 1.33em

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 displayproperty, 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—block

or inline—and in the case of the list-itemvalue, it sets aside space for a marker

Changing the display property doesn’t affect any other values, such as the inherent lefton<ol>or<dd>

margin-Examples of setting displayproperties can be seen in Listing 14.2, a style sheet tochange the appearance of your HTML lists Notice that I set margin-leftvalues toremove the left margins when changing the displayvalue to block, and I add margin- leftwhen setting display: list-item

L ISTING 14.2 Several Lists with Type Changed/* lists-14.2.css */

margin-left: 2em;

display: list-item; }

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, 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 than

in Figure 14.2 To ensure consistency across browsers, you’ll want to set the list itemproperties described later this hour whenever you change the displayof an element

tolist-item

F IGURE 14.2

Displaying alternate list formatting in Netscape 6.

The type of list marker can be changed by using the list-style-typeproperty Thisproperty is used only on elements that have the displayvalue of list-item, but it can

be 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-typeare shown in Table 14.1; additional ues allow for internationalization of list markers and are discussed in Hour 20, “CSS forPrinting.” The default value for <ol>isdecimal, and for <ul>and lists created usingdisplay: list-item, the default is disc

val-TABLE 14.1 Values for the list-style-typeProperty

Value Effect

disc A solid circle bullet

none Don’t display any marker before the list

There are two types of values: those that set bullet markers, and those that set numbermarkers It is possible to set a bullet list-style-typefor 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 markersonly 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 disctocircleand then to

square Using list-style-typeyou can control the marker with appropriate descendantrules Topical outlines created using <ol>tags can be styled as well, like the following:

A style sheet that changes list markers is shown in Listing 14.3

LISTING 14.3 Setting the list-style-typein CSS

#nav a { display: list-item;

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:

The list-style-image Property

You aren’t restricted to bullets that are circles or squares; you can actually use anyimage you like by using the list-style-imageproperty 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

14

F IGURE 14.4

Creating a simple list bullet image.

To use this image as a bullet, I simply need to set the list-style-imageproperty 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 that

I also set the list-style-typeproperty to circle; if the image can’t be loaded for anyreason, the circlewill be displayed instead

LISTING 14.4 Setting a list-style-image

/* This will inherit the list-style-image above */

#nav a { display: list-item;

Workaround for Netscape 4

Netscape 4 doesn’t use the list-style-image property, which makes it harder to use images as bullets You can get a similar effect using <img> and

an imported style sheet; Netscape 4 doesn’t understand @import either.

The list-style-position Property

When a bullet or number marker is placed, it’s normally located outside the main content

to the left of the list element’s box A virtual marker box is created; the box inherits the

text properties of the list item, although the background is always transparent

The browser determines the placement of this virtual marker box; as a Web developer, youcan’t affect the exact placement of the marker You can control one thing, though; you canmove the marker box inside the list element’s box, so it functions as an inline box instead

This is done by setting the list-style-positionproperty

Three values are possible for list-style-position:outside(the default),inside, and

inherit Any value set on a containing box will be inherited, so you can set it on <ol>

or<ul>selectors, and it will apply to list items within them

The effects of list-style-positionare 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

Here’s how you do it:

1 Make your list bullets the same color as the background color, using a

<span> within your <li> , and using appropriate color rules.

2 Add an <img> tag before each <span> that loads your bullet image;

give each tag a class of bullet

3 Create a style sheet named advanced.css (or anything else you like) and add rules with list-style-image for non-Netscape 4 browsers, plus the following: bullet { display: none; }.

4 Put a line at the start of your style sheet to import the advanced style sheet: @import url ( “advanced.css” ).

For an example of this workaround in action, see http://www.cssin24hours.com/

14/workaround-14.1.html on the Web It’s not a perfect match for image , but it gets the point across.

list-style-continues

border: 1px solid black; margin: 2px; }

The repositioned markers are shown in Figure 14.6

F IGURE 14.6

List positioning

in Netscape 6.

Like other shorthand properties, the list-styleproperty lets you set multiple CSS erties at once A list-stylerule is written like the following:

prop-selector { list-style: type position image; }

The values for type, position, andimage can appear in any order; any values that aren’tspecified are set to their default values For example, to set the image to greenplus.gif,the bullet type to square, and the position to inside, you can use the following rule:

ul li { list-style: url(“greenplus.gif”) square inside;

}

L ISTING 14.5 Continued

HTML defines three types of lists: ordered lists, unordered lists, and definition lists

Ordered and unordered lists contain list-itemelements, which are a special type of

blockcontent

Any HTML element with the CSS property display set to list-item—including<li>

tags, thanks to browsers’ default style sheets—will generate a virtual marker box Thismarker box contains a marker of some kind; ordered lists have number markers, andunordered lists have bullets

The type of marker can be set using the list-style-typeproperty; a variety of numberschemes and bullet types are available Bullet images can also be used with the list-style- imageproperty The location of the marker box is set with the list-style-locationprop-erty All of these properties can be set at once using the list-styleshorthand property

Browser Support Report Card

CSS Feature Grade Notes

Changing list type with display A

Q&A

Q How do I set styles on definition lists? You’ve mostly talked about <ol> and

<ul> , not <dl>

A That’s because from the CSS perspective, definition lists aren’t lists at all! They’re

simplyblockcontent, not list-itemelements That means that you can just createstyle rules for <dl>,<dt>, and<dd>normally, as you would for any block elements Ipersonally like to do the following:

dt { font-weight: bold; }

Q How do I set the starting values for ordered lists using CSS?

A Unfortunately, you can’t set those with CSS In order to set specific number values

for ordered lists, you’ll need to use the HTML startattribute on the <ol>element

or the valueattribute on <li> Both of these values are deprecated in HTML 4.01,which means you can’t use them in Strict HTML documents

14

The workshop contains quiz questions and activities to help reinforce what you’ve learned

in this hour If you get stuck, the answers to the quiz can be found after the questions

Quiz

1 Which of these rules will make an ordered list count in lowercase letters?

(a.) ol { list-style-type: alphabet; }

ol li span { color: red; }

3 You want your bullet list items to be marked by a graphic,bullet01.jpg, whichlooks like a small box You also want the graphic to be placed inside the list item’sdisplay box How do you write this using the list-styleshorthand property?

3 Here’s one way to write such a rule:

ul { list-style: square inside url(“bullet01.jpg”); }

H OUR 15

Styling Tables

Tables in HTML are a staple of Web development and are used for thing from schedules and calendars to page layout Although CSS offers theability to replace tables for visual design of the page, it’s a more commonscenario to find tables and CSS styles used together for best effect

every-In this hour, you will learn

• What the HTML table model is, and how it is used with CSS

• How tables are laid out on the screen

• What the layers of a table are, and how CSS rules can be used toaffect cells in those layers

• How the borders, padding, and spacing of table cells can be affected

In Hours 16, “Page Layout in CSS,” and 17, “Advanced CSS Layout,” I’ll tell you howyou can eliminate tables entirely from your Web designs and use pure CSS for the posi-tioning of page elements In this hour, I’m going to assume that you are using tableseither for data or layout; the properties here can be used for either The examples givenare for data tables but apply equally well to layout tables.

Warning for Netscape 4

Netscape 4 recognizes none of the CSS properties related to table markup that are described in this hour.

HTML Table Model

The way HTML browsers display tables should be familiar to anyone who has done Webdevelopment work Tables are employed not only for displaying columns of tabular data,but also for graphically laying out entire pages on the screen

To do any serious Web development, you’ll need to know how tables are used in HTML.This same knowledge will serve you well in CSS because the CSS table model is based

on the HTML table model Hopefully, you’ve worked with tables before, and this nation will be a review for you

expla-An HTML table is defined by the <table>element Within the opening and closing tags

of the <table>can be found a number of table rows, designated by the <tr>tag Eachrow is composed of one or more table cells A table cell can either be table data,<td>, or

a table header,<th> Table headers are generally assumed to convey some sort of mation about the corresponding table data cells; at least, if the markup is used properly,this will be true

infor-More complex tables can be built by grouping table rows into groups, using the <thead>,

<tbody>, and<tfoot>elements Each of these tags defines a container that holds one ormore table rows and identifies them as a group The <thead>tag is used to designatetable header rows; if a printed table spans more than one sheet of paper, the <thead>should be repeated on the top of each page The <tfoot>is the complement of the tableheader rows; it is a group of rows that serves as a footer and should also be repeated ifthe table spans multiple pages Table body sections, marked with <tbody>tags, grouptogether related rows; a table can have one or more <tbody>sections

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 currentschedule, as I’m writing this book; you can assume that all other time is taken up witheither writing or sleeping, and often with very little of the latter!

LISTING 15.1 A Simple HTML Table

This sample table also contains a <caption>tag; the caption is used to provide a labelfor the table You could have specified table columns, as well, by using the <colgroup>

and<col>tags, but for now, this table will serve as an effective example for your related style properties Later in this hour, I’ll cover columns and column groups.Because an HTML browser understands the table markup, it can display it with defaultstyling Borders typically aren’t drawn between cells or around the table; table data cellsare left-justified in normal text; table header cells are center-justified and set in bold font;and captions are centered over the table This can be seen in Figure 15.1, which showsthe default styles Netscape 6 uses to display a table

The link between the HTML and CSS table models is the displayproperty in CSS.

Each table tag corresponds to a value for display; the default style sheet within a based browser specifies how each item should be shown to the user The list of additional

CSS-displayvalues is shown in Table 15.1

TABLE 15.1 Table-related Values for the displayProperty

Value Effect

Because these values are built into the browser, you won’t ever actually need to changethedisplayproperty to work with tables, but it is useful to know how CSS considerseach For example, CSS classifies <td>and<th>as the same type of displayproperty

Table cells in CSS are treated as block boxes; they can contain inline or block contentand are contained by table-rowblock boxes Table rows and groups of table rows areused primarily for grouping Usually, styles can’t be applied to them directly, althoughproperties that are inherited can be set on rows or groups of rows and will apply to cells(<td>or<th>) within those rows

15

Just because you can do something, that doesn’t mean you always should.

HTML tables were not originally designed for page layout; in Hours 16 and

17 you’ll learn how you can use CSS positioning properties to create ful and flexible layouts without using <table> tags You may still want to use layout tables for backwards-compatibility with older browsers, but you should also be aware that tables, as a visual way of conveying information, may sometimes leave behind people who have vision-related disabilities For more on users with disabilities, see Hour 21, “Accessibility and

power-Internationalization.”

In general, applying styles to table cells is straightforward and follows all of the normalrules of the cascade and inheritance; nearly any CSS properties can be set on table cells.There are a few exceptions, however, and so before you go on, I’ll spend some timelooking at how CSS styles interact with HTML tables.

Layers and Inheritance

One key way in which tables differ from other block boxes is the introduction of tablelayers into the inheritance method Each cell is considered to be a descendant of severalother layers of markup, as shown on Table 15.2

TABLE 15.2 Table Layers, in Order from Most Specific to Most General

The most surprising thing about table layers is that they exist even if the actual tags

do not! For example, all cells are part of a row group, even if there are no <thead>,

<tbody>, or<tfoot>tags in the document It is assumed that there is an unstated,invisible <tbody>surrounding all table rows that aren’t already within a row group.Likewise, all cells are part of columns and column groups

When considering the appearance of a table cell, you need to take into account theeffects of these table layers For example, the background-colorproperty is normallytransparent unless otherwise specified This means that the background of the containingbox of the <table>will be visible If background-coloris set on a <tbody>, that will bethe cell’s background color, unless the property is set on a <tr>or a table cell, which aremore specific, according to the table layers model

Automatic and Fixed Layouts

The browser usually automatically determines the dimensions of the table’s box and of thebox sizes of each cell within it Browsers generally follow the same method of calculatingthe size, but this is not a requirement, and in fact the CSS Level 2 specification allows

browsers to use whatever method they like to size a table and its cells This is called an

automatic layout.

However, in many cases you will want more control over the dimensions of the table At

those times, you’ll want to use a fixed layout, one where the width and cells of the table

are specified in the CSS rules To tell the browser you’re working with a fixed layout, usethetable-layoutproperty Values for table-layoutare shown in Table 15.3; thedefault is auto This property can be set only on table elements

TABLE 15.3 Values for the table-layoutProperty

Value Effect

auto Lets the browser determine the dimensions of the table and table cells

Once you have informed the browser that you’re using a fixed layout, you then need todefine the widths of each column You do this by setting the widthproperty on the tableand on each table cell The value of the widthproperty can be either a measurement,such as 300pxor6em, or a percentage value

L ISTING 15.2 Style Sheet with Fixed Layout/* schedule-15.2.css */

table { table-layout: fixed;

width: 90%; }

td, th { width: 15%;

border: 2px solid silver; }

Table Borders, Padding, and Spacing

Like other block display boxes in CSS, table cells can be surrounded by borders and canhave internal padding Unlike other block boxes, though, a table cell never has a margin

on any side

The appearance of a table cell’s borders is affected by several properties that determinewhich cells display borders and how adjacent borders interact with each other

Displaying or Hiding Empty Cells

If you looked carefully at Figure 15.2, you might have noticed something unusual: Onlycells that contained content had borders drawn around them This can be an effective way

of presenting information in some circumstances, but in others you are going to want aborder drawn around all table cells, even those that are empty You can control the dis-play of borders around table cells by using the empty-cellsproperty

F IGURE 15.2

Netscape 6 displays a schedule with a fixed layout.

Applying this style sheet to your schedule table from Listing 15.1 gives us the effectsshown in Figure 15.2 The primary advantage of a fixed layout is that it displays fasterbecause the browser doesn’t have to calculate the column widths

Theempty-cellsproperty can be set only on table elements, and the valid values forthis property are shown in Table 15.4 The default is hide, which means borders aren’tshown for empty cells.

TABLE 15.4 Values for the empty-cellsProperty

Value Effect

hide Doesn’t display borders for empty cells

show Displays appropriate borders for empty cells

By setting empty-cellstoshow, you are telling the browser that if a cell is empty, it can goahead and apply whatever borderstyle would be used if the cell contained content If there

is no applicable border to use, the cell won’t be displayed Setting only the empty-cells

property without the appropriate border properties (or the border shorthandproperty) isineffective

Listing 15.3 contains rules for several styles of borders, along with an empty-cells: show

declaration on the table

LISTING 15.3 Turning on Borders around Empty Cells via the empty-cellsProperty

td { border: 0.10em solid gray; }

In Figure 15.3, you can see the results of applying this style sheet to Listing 15.1; a bordersurrounds all table cells, in contrast to Figure 15.2

15

Collapsing Borders

Within CSS you can have two options for how you want table cell borders to be handled:They can either collapse or remain separate You can choose which of these two displaymodels to use by setting a value for border-collapseon your <table>element; appro-priate values are shown in Table 15.5

TABLE 15.5 Values for the border-collapseProperty

Value Effect

In the collapsed border model, two cells that are adjacent, horizontally or vertically,

share a single, common border line between them There is no space between the cells;one ends where the other begins You’d use this to produce a clean, simple table presen-tation where the cells aren’t separated within distinct boxes This is a style choice you’dmake based on how you envision the final look of the table

F IGURE 15.3

Empty cells become visible, as shown by Netscape 6.