Friday 23rd of February 2018 10:57:32 AM
Background color:
Foreground color:
<OL> <LI>Item the first <LI CLASS="off">Item the second <LI>Item the third <LI CLASS="off">Item the fourth <LI>Item the fifth </OL>
Figure 7-80

Figure 7-80. Switching off list-item markers

list-style-type is inherited, so if you want to have different styles of bullet in nested lists, you'll need to floated image has a right margin of 5 pixels (5px ). You would expect the document to be rendered very much as shown in Figure 8-39.

Figure 8-39

Figure 8-39. Expected floating behavior

Nothing unusual there, of course, but Figure 8-40 shows what happens when we set the first paragraph to have a background.

Figure 8-40

Figure 8-40. Backgrounds and floated elements

5.4.2. Font Variations

In addition to sizes and styles, fonts can also have variants. CSS offers a way to address one very common variant.

font-variant

Figure 8-36

Figure 8-36. If there isn't room, floats get pushed to a new line

8. A floating element must be placed as high as possible.

Subject to the restrictions introduced by the previous seven rules, of course. Historically, browsers aligned the top of a floated element with the top of the line box after the one in which the image's tag appears. Rule 8, however, implies that its top should be even with the top of the same line box as that in which itsthe document. In other words, if an image is floated up into aprevious paragraph, it may simply overwrite whatever was alreadythere. On the other hand, the user agent may handle the situation byflowing content around the float, even though doing so isn'trequired behavior. Either way, it's probably a bad idea tocount on a particular behavior, which makes the utility of negativemargins on floats rather limited. Hanging floats are probably fairlysafe, but trying to push an element upward on the page is generally abad idea.

font that has been declared to be italic may switch from being italic to oblique depending on the actual size of the font. The display of Times on a Macintosh, for example, is as shown in
Figure 5-27, and the only difference there is a single point in size.

Figure 5-27

Figure 5-27. Same font, same style, different sizes

There isn't much that can be done about this, unfortunately, save better font handling by operating systems. Usually, the italic and oblique fonts look exactly the same in web browsers.centering the element within its parent, as you can see from Figure 8-14:

P {width: 100px; margin-left: auto; margin-right: auto;}
Figure 8-14

Figure 8-14. Setting an explicit width

This is the correct way to center block-level elements, as a matter of fact. text-align is supposed to apply to only the inline content of a block-level element, so setting an element to have a text-align of center shouldn't center it. Instead, you should declare:

and oblique fonts look exactly the same in web browsers.

Still, font-style can be useful. For example, itis a common typographic convention that a block quote should beitalicized, but that any specially emphasized text within the quoteshould be upright. In order to employ this effect, shown in Figure 5-28, you would use these styles: