A detailed list of CSS in Word

In Word, the list is also an element with very high frequency. In CSS, lists and list items are block-level elements. That is, a list will form a block box in which each list item will also form a separate block box. Therefore, all properties of a block box in a box model apply to lists and list items.

In addition, the list has 3 unique attributes, List-style-type, List-style-position, and List-style-image, that define the style of the list bullet, the position of the bullet, and the picture of the bullet.

Lists can be nested with each other, and a list of types can be nested with any type of list. A list of table items can also be cross-defined with any HTML element (such as paragraphs, pictures, links, and so on).

In Word, you can often see a list of things that intersect paragraphs, pictures, tables, and so on. In fact, a list is more common than other elements, and a purely list is rare. Such as:

1. <p> List of List-style-type, list-style-position ... The picture used by the bullet. </p><ul>   <li>list-style-type Properties </li>   <ol>      <p> The List-style-type property is used to set list bullets, with:</p>      <li>disc default values, solid circles </li>      <li>decimal       numbers 1, 2, 3, 4, 5</li>      <li>lower-alpha lowercase English letters A, B, C, D, e</li>      <li>lower-roman lowercase roman numerals Ⅰ, Ⅱ, Ⅲ, Ⅳ, ⅴ</li>    </ol>    <li>list-style-position Properties </li>    <li>list-style-image Properties </li><ul>

In the above code, in the UL nested ol, in OL, the paragraph element p is also cross-defined with the list item Li element. This is a very simple example of how to apply a style to a list.

Due to different browsers, the default style of the list may be different. So, to be consistent across all browsers, first clear the default style for the list, such as margins, padding, list bullets, and so on.

1. Ul,ol {    margin:0;    padding:0;}

By default, the List-style-position property value of the list is outside, and the bullets do not occupy the space of the container. When the margin or padding of the list element is 0 o'clock, the bullet is outside the container and the bullet cannot be aligned with the paragraph text. So, as needed, you can set the List-style-position property to inside.

In addition, Chinese has a writing habit, that is, the first line of paragraph indentation two characters. To align a list with a paragraph, the list item also indents the first line by two characters.

1. UL Li, ol li {   text-indent:2em;   List-style-position:inside;}

Because the default list bullet is too simple and the selection is small, it simply doesn't meet the needs of most users. In this respect, CSS provides a picture substitution technique that can be used to replace the default list item symbol with a page-style image.

When you replace the default list item symbol, the HTML code does not need to be modified, just use the List-style-image property to define the URL of the picture. This is also the embodiment of the advantages of CSS. Here, for unordered tables, use square.png as bullets, and ordered lists use the default numerical bullets.

1. UL {   list-style-image:url (img/square.png);} OL {   list-style-type:decimal;}

The above code seems to be fine, and it works under Chrome, but in all versions of IE and opera, the inner ol still use square.png as bullets. The reason is that because the List-style-image attribute is inherited, the inner-layer list inherits the List-style-image property of the outer list.

So, if you want to replace the default list bullet with a picture, you also set the List-style property to none when you clear the default style for the list.

1. OL {   list-style-type:decimal;   List-style-image:none;}

After this processing, the list we define is similar to the list in Word and behaves consistently across all browsers. The result of the run 11‑13 is as follows:

Figure 11-13 List Styles

Although using List-style-image is easy to achieve, it is not possible to precisely control the position of a picture because the list is formatted primarily by the browser rather than by the designer. As you can see, pictures and text are difficult to align correctly. Also, under different browsers, the distance between pictures and text varies.

However, it is not only the List-style-image property that implements the ability to replace bullets with pictures. As described earlier, CSS considers any element on the page to be a box, and most of the public properties of the box model apply to lists, including background properties. So, this time the background can come in handy, you can use the background to replace the list-style-image, and then through the Background-position attribute, to precisely control the position of the bullets.

To use the background as a bullet, you first reset the List-style-type property to none. Otherwise, the bullets and background will appear at the same time.

1. UL  {   list-style-type:none;}

Then, define a background image for the LI element of the list and set it to uneven. To prevent the text in the Li from overwriting the background image, you need to set the appropriate left margin for Li to make room for the picture. The position of the background image is precisely controlled by the Background-position property, so that the background image and text are correctly aligned.

1. UL  li {   margin-left:2em;   background-position:0 6px;   Background-repeat:no-repeat;   Background-image:url (img/square.png); }

By adjusting the position of the picture, bullets and text can be aligned correctly and behave consistently across all browsers, significantly better than using the List-style-image property directly (space-constrained), which is the benefit of using a background image.