原文: CSS Tricks for Custom Bullets

Cascading Style Sheets (CSS) give Web developers precise control over a page’s typography and layout. One secret weapon of CSS-based designs is the background property, which adds images and color to the background of any element on a Web page.

It opens up a creative toolbox for styling links, bulleted lists, and more. Unlike HTML, which automatically tiles background images horizontally and vertically—sometimes resulting in a frightening pattern—CSS gives designers precise control over the placement and tiling of background images. For example, you can choose to have a graphic appear only once, tile vertically, or stay put on screen even when the viewer scrolls through the page.

Some background on background

The background property is really four different properties. Here’s the long way to express them:

body {
background-image: url(images/watermark .gif);
background-repeat: no-repeat;
background-position: center top;
background-color: #FFCC00;
}

URL The background-image property tells the browser to look for a file (in this case, watermark.gif) on the Internet, with the file path (images/ ) to that graphic. This is the only property required in order to place an image in the background.

Note that, unlike HTML, the CSS code doesn’t use quotation marks in its path to the image. Although they’re permissible, Internet Explorer 5 on the Mac can’t find the image if it’s enclosed within quotation marks.

Tiling The background-repeat property controls how or whether a graphic tiles. If you want the graphic to appear only once, you use background-repeat: no-repeat. To tile a graphic vertically—a great way to add an interesting, graphical sidebar to a page—replace no-repeat with repeat-y. To tile a graphic horizontally, use repeat-x. If you exclude this property, the image will tile vertically and horizontally.

A Bullet to Call Your Own With CSS, you can use images as custom bullets.

Position The background-position property lets you define where the graphic appears on the page. This property contains two values separated by a space. The first value controls the horizontal position: left, center, or right. The second value controls the vertical position: top, center, or bottom. CSS also lets you use pixel values to define position. For instance, if you want to place a graphic exactly 20 pixels from the left edge and 100 pixels from the top of the page, you type background-position: 20px 100px.

Color The background-color property lets you add a color to your page or to another page element such as a paragraph, a sidebar, or a banner.

Taking a Shortcut You’ll frequently use all of these properties together—which could mean a lot of typing. Thankfully, there’s a shortcut that collapses the four properties into a single property. For example, you can rewrite the previous example as:

body {background: #FFCC00 url(images/ watermark.gif) center top no-repeat}

When you use this shortcut, the order of the properties is important. They should always be listed in this order: color, path to graphic, horizontal placement, vertical placement, and tiling options.

Personalize bullets

One interesting way to use the background property is to alter the appearance of traditional HTML. Tired of the black circles and squares that set off lists on your Web pages? Why not remove those boring bullets and provide your own graphics (see “A Bullet to Call Your Own”)?

Start by redefining the ul, or unordered list, tag, which controls lists. In your CSS document, type:

ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

Been There Show your readers where they’ve been by marking visited links with a check mark.

This gives you a clean slate and eliminates any indentations a browser might apply to the list.

Now you’re ready to add your bullets. (If you don’t have any handy, click here for free bullet images.) For this example, I’ll assume that I have an image called mybullet.gif in the same directory as the CSS file.

In HTML, each item in a list is represented by the li tag. To change its appearance, add this to the style sheet :

li { background: url(mybullet.gif) left center no-repeat }

Now, whenever an li tag pops up, the browser will place the image at the left edge of the list item. To more accurately position the bullet, you can replace left center with pixel values.

At this point, the text for each list item will appear directly over the bullet. To insert a little breathing room, simply add padding to the left side of the li item. For example, if the graphic is 10 pixels wide, 15 pixels of padding should suffice. If the list items are stacked too close together, increase the top or bottom margins. Your final rule would look like this:

li {
background: url(mybullet.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}

Check off list items

HTML lets you change the color of links on a page once the link has been clicked on. CSS, however, lets you do much more. For example, say your Web site has a series of pages covering a particular task—things to do before migrating to Tiger, for example. You want to provide an obvious way to indicate which pages have already been read. Sure, you could change the color of visited links, but to provide an unambiguous visual cue, why not use check marks? With the CSS background property, you can (see “Been There”).

This trick relies on using what, in CSS-speak, is called a pseudo-class. There are four pseudo-classes related to links. They are a:link, a:visited, a:hover, and a:active. Each indicates a different state of a link. In this example, we’re interested in a:visited, since it applies to visited links. Start by beautifying all the links a little—type:

a {
text-decoration: none;
color: #333;
padding-right: 13px;
}

This optional step removes the underline from each link (those underlines can clutter a design). defines the color of links, and adds a little padding on the right edge of the link (to accommodate the check-mark graphic).

Next, create a new rule for visited links:

a:visited { background: url(checkmark .gif) right center no-repeat }

In this case, the check marks will be on the right of the links, but you could just as easily add space to the left of links instead, by changing right to left in this rule.

Get creative

Since you can add background images to any HTML element—a paragraph, a headline, or an item controlled by a div tag—it’s easy to create complex pages that have multiple images placed throughout them.

译文: 定义式列表的CSS窍门

通过CSS可以非常准确地设计网页的样式和排版。运用CSS来设计网站有一个秘密武器，那就是背景属性。通过背景属性可以给网页的任何元素添加图像和颜色。

它可以打开一个工具箱，用来定义链接，定义列表，还有其它许多功能。与HTML不同，HTML是自动地将背景图像水平居中－－有时会突然形成难看的样式－－而利用CSS，设计者可以精确地把握背景图像的设置和排版。比如，你可以决定让一个图像只闪现一次，或者垂直居中，甚至即使用户不断地翻看页面，也可以让图像一直停留在屏幕上。

背景中的背景

背景属性包括4个不同的属性。虽然解释起来比较麻烦，但是我还是想与大家一起分享：
body {
background-image: url(images/watermark .gif);
background-repeat: no-repeat;
background-position: center top;
background-color: #FFCC00;
}

URL  背景图像属性提示浏览者通过文件路径(images/ )去找包含图表的文件（比如watermark.gif）。这是在背景上设置图像的必备属性。

这点与HTML不同，图像文件路径的CSS代码没有引号。尽管可以使用，但是如果加了引号，Mac中的Internet Explorer 5是无法找到图像的。

Tiling  背景重复属性可以设置图像。如果你只想让图表显示一次，可以使用背景重复属性：no-repeat（只显示单个背景图片）。如果你想要图表处于垂直位置－这样可以给页面添加一个有趣的工具条－你需要运用repeat-y（背景图片纵向重复连续显示）。如果你想要图表处于横向位置，你应该使用repeat-x（背景图片横向重复连续显示）。如果你没有使用背景属性，那么图像就会垂直居中。

Position  背景位置属性可以用来设置图像出现在网页中的位置。这个属性包含2个功能。第一个功能可以控制水平位置：左，中，右。另一个功能可以控制纵向位置：上，中，下。利用CSS还可以在指定位置设置像素值。比如，你想给在图表的左边设置20象素，在页面的顶部设置100象素，那么你只要在背景位置属性里输入：20px 100px.就可以了。

Color 背景颜色属性可以给网页或者其它部分（比如文章段落，工具条或者标语）添加颜色。

Taking a Shortcut（小窍门） 你经常会把这些属性一起来使用，那样就要输入很多文字。幸运的是，有一个小窍门可以把这4个属性合并到一个属性里。比如，你可以重写前面的例子：
body {background: #FFCC00 url(images/ watermark.gif) center top no-repeat}

当你使用这个小窍门的时候，要注意把握这些属性的次序。他们是这样排列的：颜色，图像路径，横向设置，纵向设置和tiling 选项。

自定义列表

有一个有趣的方法，使用背景属性来改变传HTML的外观。早已经厌烦了千篇一律的黑色圆形和方形标记了吧？干嘛不甩掉那些枯燥的标记，去创建属于你自己的标记列表呢？

先从重新定义ul（或者无序表单，标签）开始。在CSS文档里输入：
ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}

这样你可以得到一个干净的表单。然后你可以添加标记。（如果你没有参考资料，你可以在这里找到很多免费的标记图像。比如，在与CSS文件相同的目录中，有一张mybullet.gif的图片。

在HTML，表单上的每个项目都被标记为li 标签。如果想要改变外观，就在表单上添加以下内容：
li { background: url(mybullet.gif) left center no-repeat }

现在，无论li标签什么时候出现，浏览者都会把图像设置到列表项目的左端。如果想要标记的位置更精确，你可以通过设置象素来设置。

这样，每个表单项目的文本会直接出现在标记旁。如果想留一点空隙的话，就在项目li的左边添加一些内容。比如，表单的宽度设为10象素，那么内容填充设置为15象素比较合适。如果表单项目设置地太过紧密，那么增加顶部或者底部的margin就可以了。最后应该是这样的：
li {
background: url(mybullet.gif) left center no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}





核对表单项目
使用HTML可以改变被点击链接的颜色。而使用CSS，你可以做的更多。比如，你想要通过一个明显的标志来显示哪些页面已经阅读。当然，你可以改变被点击链接的颜色，但是如果需要的是一个明显的提示，为什么不试试复选标记呢？通过CSS背景属性，你就能够看到（哪些页面已经阅读）。



有一个小秘诀， CSS专业术语叫做CSS伪类。在链接方面有4个伪类。分别为：a:link, a:visited, a:hover, 和a:active。分别代表链接的不同状态。在这个例子中，我们选择a:visited，因为它适用于被点击的链接。开始修饰链接吧：
a {
text-decoration: none;
color: #333;
padding-right: 13px;
}

这一步可以去掉链接的下划线（那些看上去比较混乱的）。设置链接的颜色，在链接的右侧添加一些内容。（来适应复选标记表单）。

接下来，给被点击的链接创建一个新规则：
a:visited { background: url(checkmark .gif) right center no-repeat }

这样，复选标记就会出现在链接的右侧。你也可以地在链接左侧添加一些间隔，这样就可以从左侧切换到右侧。

发挥创造力
现在你能够给HTML的任何元素添加背景图像啦――段落，标题，或者div标签里的项目。快点利用这些方法去创造一个拥有多重图像的丰富页面吧，会很容易哦。