Sams Teach Yourself CSS in 24 Hours- P6

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST

Báo xấu

88
lượt xem 10
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Sams Teach Yourself CSS in 24 Hours- P6: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers as well as some minor ones have increased support for Cascading Style Sheets in the latest versions. Web developers are aware of CSS and the vital role they play in designing great Web pages, and presumably you’ve got some idea of how important they are if you’ve bought this book.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Sams Teach Yourself CSS in 24 Hours- P6

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.
234 Hour 14 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 , , or and then list items marked up with , or and for definition lists. It’s also possible to create a list using non–list tags, such as or , 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 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 List-O-Rama Ordered List: Tallest Mountains Everest K2 Kangchenjunga Lhotse Makalu Cho Oyu Dhaulagiri
Lists 235 LISTING 14.1 Continued Definition List: Common Abbreviations CSS Cascading Style Sheets HTML Hypertext Markup Language W3C World Wide Web Consortium Non-List: Links Home Info Shop Map Contact 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. FIGURE 14.1 Four different lists displayed by Netscape 6. 14
236 Hour 14 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 element, which contains tags for each 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’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 element, and each bullet point gets an tag. There are two other HTML tags that create bulleted lists, and , but these are deprecated in HTML 4, which means that you should use the 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 element, with several and tags inside it.
Lists 237 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 tags in the or elements, the and tags do not have the property display set to list-item. Instead, they have the display value of block, although the tag usually has an extra margin-left value of 1.33em. Sometimes Web developers use the , , or 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 or . 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; 14 margin-left: 0px; } div#nav a { text-decoration: none; margin-left: 2em; display: list-item; }
238 Hour 14 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. 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 or tags that enclose the 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 is decimal, and for and lists created using display: list-item, the default is disc.
Lists 239 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 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 */ 14 ol { list-style-type: upper-roman; } ul { list-style-type: square; } ul ul { list-style-type: circle; } continues
240 Hour 14 LISTING 14.3 Continued #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. 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 or other inline element to change the text, like the following: Noam Chomsky 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; }
Lists 241 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. 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. 14
242 Hour 14 LISTING 14.4 Setting a list-style-image /* lists-14.4.css */ ol { list-style-type: upper-roman; } ul { list-style-type: square; list-style-image: url(“greenplus.gif”); } ul ul { list-style-type: circle; } /* This will inherit the list-style-image above */ #nav a { display: list-item; margin-left: 2em; list-style-type: square; list-style-image: url(“greenplus.gif”); } Applying this style sheet to the sample lists gives the results in Figure 14.5. FIGURE 14.5 Bullet lists displayed in Netscape 6. 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 and an imported style sheet; Netscape 4 doesn’t understand @import either.
Lists 243 Here’s how you do it: 1. Make your list bullets the same color as the background color, using a within your , and using appropriate color rules. 2. Add an tag before each 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 list-style- image, but it gets the point across. 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, you can’t affect the exact placement of the marker. You can control one thing, though; you can move 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-position property. 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 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; } 14 li { border: 1px solid black; margin: 2px; } ul { list-style-type: square; list-style-image: url(“greenplus.gif”); list-style-position: outside; } continues
244 Hour 14 LISTING 14.5 Continued ul ul { list-style-type: circle; list-style-position: inside; } #nav a { display: list-item; list-style-position: inside; list-style-type: square; list-style-image: url(“greenplus.gif”); border: 1px solid black; margin: 2px; } The repositioned markers are shown in Figure 14.6. FIGURE 14.6 List positioning in Netscape 6. The list-style Shorthand Property Like other shorthand properties, the list-style property lets you set multiple CSS prop- erties at once. A list-style rule is written like the following: selector { list-style: type position image; } The values for type, position, and image can appear in any order; any values that aren’t specified 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; }
Lists 245 Summary HTML defines three types of lists: ordered lists, unordered lists, and definition lists. Ordered and unordered lists contain list-item elements, which are a special type of block content. Any HTML element with the CSS property display set to list-item—including tags, thanks to browsers’ default style sheets—will generate a virtual marker box. This marker box contains a marker of some kind; ordered lists have number markers, and unordered lists have bullets. The type of marker can be set using the list-style-type property; a variety of number schemes and bullet types are available. Bullet images can also be used with the list-style- image property. The location of the marker box is set with the list-style-location prop- erty. All of these properties can be set at once using the list-style shorthand property. Browser Support Report Card CSS Feature Grade Notes Changing list type with display A list-style-type A list-style-image B+ Workaround required for Netscape 4 list-style-position B Not supported by Netscape 4 list-style B Q&A Q How do I set styles on definition lists? You’ve mostly talked about and , not . A That’s because from the CSS perspective, definition lists aren’t lists at all! They’re simply block content, not list-item elements. That means that you can just create style rules for , , and normally, as you would for any block elements. I personally 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 start attribute on the element 14 or the value attribute on . Both of these values are deprecated in HTML 4.01, which means you can’t use them in Strict HTML documents.
246 Hour 14 Workshop 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; } (b.) ol { list-style-type: lower-case; } (c.) ol { list-style-type: lower-letters; } (d.) ol { list-style-type: lower-alpha; } 2. Assuming the following style rules, what color will the numbers before a list item be? ol { color: green; } ol li { color: blue; } li { color: black; } ol li span { color: red; } 3. You want your bullet list items to be marked by a graphic, bullet01.jpg, which looks like a small box. You also want the graphic to be placed inside the list item’s display box. How do you write this using the list-style shorthand property? Answers 1. The correct answer is (d.); the lower-alpha value starts counts list items with (a.), (b.), (c.), and so on. 2. The numbers will be the same color as the ; in this case, that color is blue. (If you think it’s black, you’re forgetting that the second rule is more specific than the first in cascade order.) 3. Here’s one way to write such a rule: ul { list-style: square inside url(“bullet01.jpg”); } Activity Some projects you can undertake to investigate list styles on your own include the following: • Build an outline using and list-style-type properties. Adjust the margins and padding to suit taste. • Design several list bullet graphics for your Web pages, and add these using the list- style-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 Tables in HTML are a staple of Web development and are used for every- thing from schedules and calendars to page layout. Although CSS offers the ability to replace tables for visual design of the page, it’s a more common scenario to find tables and CSS styles used together for best effect. 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 to affect cells in those layers • How the borders, padding, and spacing of table cells can be affected by CSS • How to use other CSS properties with table layout Table Formatting Tables are ubiquitous on the Web and constitute the primary way of visually formatting output; they were intended originally for pure data 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 posi- tioning 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 for either. The examples given are 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 Web development 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 expla- nation will be a review for you. An HTML table is defined by the element. Within the opening and closing tags of the can be found a number of table rows, designated by the tag. Each row is composed of one or more table cells. A table cell can either be table data, , or a table header, . Table headers are generally assumed to convey some sort of infor- mation about the corresponding table data cells; at least, if the markup is used properly, this will be true. More complex tables can be built by grouping table rows into groups, using the , , and elements. Each of these tags defines a container that holds one or more table rows and identifies them as a group. The tag is used to designate table header rows; if a printed table spans more than one sheet of paper, the should be repeated on the top of each page. The is the complement of the table header rows; it is a group of rows that serves as a footer and should also be repeated if the table spans multiple pages. Table body sections, marked with tags, group together related rows; a table can have one or more 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 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 249 LISTING 15.1 A Simple HTML Table 15 Weekly Schedule My Schedule Mon Tue Wed Thu Fri Morning Class Class Afternoon Gym Gym Evening Online Gaming Writers Group Class
250 Hour 15 This sample table also contains a tag; the caption is used to provide a label for the table. You could have specified table columns, as well, by using the and tags, but for now, this table will serve as an effective example for your table- 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 default styling. Borders typically aren’t drawn between cells or around the table; table data cells are 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 shows the default styles Netscape 6 uses to display a table. FIGURE 15.1 Schedule table with default HTML styling in Netscape 6. CSS Table Layout The Cascading Style Sheets model for tables is based on the HTML model; CSS was specifically built to be compatible with HTML as used on the Web. Style sheets can be used in conjunction with HTML markup to style and present columns and rows of infor- mation or to lay out the whole page on the screen.
Styling Tables 251 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 15 17 you’ll learn how you can use CSS positioning properties to create power- ful and flexible layouts without using 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 Internationalization.” The link between the HTML and CSS table models is the display property in CSS. Each table tag corresponds to a value for display; the default style sheet within a CSS- based browser specifies how each item should be shown to the user. The list of additional display values is shown in Table 15.1. TABLE 15.1 Table-related Values for the display Property Value Effect inline-table As ; displayed as an inline box table As ; displayed as a block box table-caption As ; displayed before, after, or beside the table table-cell As or ; an individual table cell table-column As ; not displayed but can be used for formatting table-column-group As ; not displayed but can be used for formatting table-footer-group As ; designates a group of footer rows table-header-group As ; designates a group of header rows table-row As ; a row of table cells table-row-group As ; designates a group of rows Because these values are built into the browser, you won’t ever actually need to change the display property to work with tables, but it is useful to know how CSS considers each. For example, CSS classifies and as the same type of display property. Table cells in CSS are treated as block boxes; they can contain inline or block content and are contained by table-row block boxes. Table rows and groups of table rows are used primarily for grouping. Usually, styles can’t be applied to them directly, although properties that are inherited can be set on rows or groups of rows and will apply to cells ( or ) within those rows.