Sams Teach Yourself CSS in 24 Hours- P6

Sams Teach Yourself CSS in 24 Hours- P6: Times have changed, thankfully, since those Dark Ages of CSS. All major browsers aswell as some minor ones have increased support for Cascading Style Sheets in the latestversions. Web developers are aware of CSS and the vital role they play in designing greatWeb pages, and presumably you’ve got some idea of how important they are if you’vebought this book.
Nội dung trích xuất từ tài liệu:
Sams Teach Yourself CSS in 24 Hours- P6HOUR 14Lists 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 listsList 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 235LISTING 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.1Four different listsdisplayed byNetscape 6. 14236 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 ...