HTML and CSS [Electronic resources]

Molly E. Holzschlag

نسخه متنی -صفحه : 198/ 129
نمايش فراداده

Shorthand CSS for List Styles

Another shorthand property is the list-style property. It takes properties from lists and enables you to author them in shorthand (see Example 10-9).

Example 10-9. Using the list-style shorthand property
[View full width]

<!DOCTYP176 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/l1/DTD/l1-transitional.dtd">
&l191 xmlns="http://www.w3.org/1999/l">
<head>
<title>working with style</title>
<style type="text/css">
body {font: 14px Georgia, Times, serif; color: black; background-image: url(balloons.gif);
 background-position: right top; background-repeat: no-repeat;}
h1 {font: italic 20px Georgia, Times, serif; color: red; text-transform: lowercase;} 
ul {
list-style: url(arrow.gif) inside; }
</style>
</head>
<body>
<h1>What to Bring:</h1>
<ul>
<li>A beverage <br />of choice.</li>
<li>Munchies.</li>
<li>Music <br />and movies.</li>
</ul>
</body>
<l>

In this case, I've styled the ul element using an image and a position. You could swap the image for a keyword if you don't want to use an image. You'll notice that I purposely broke the lines so you can see the influence of the inside value (see Figure 10-15).

Figure 10-15. Styling the list using the list-style shorthand property.