Instance learning: Styles for defining and in a Web page with CSS

css| Web page

Originally, I intend to write the article on the theme of this article, but recently in the Sina blog group to see this article, I do not have much effort, reproduced here, I hope to help.

Li {list-style-image:url (images/disc.gif);}

This style definition for Li is to use a picture for a list item instead of a small dot that is displayed. Of course, you can also display other effects, see the following definition in detail:

CSS definition of the effect of a list item

*list-style-type:circle (You can change the style you want); List Item Style

Disc:css1 Solid Circle

Circle:css1 Hollow Circle

Square:css1 Solid Square

Decimal:css1 Arabic numerals

Lower-roman:css1 Lowercase Roman Numerals

Upper-roman:css1 Capital Roman Numerals

Lower-alpha:css1 lowercase English Letter

Upper-alpha:css1 Capital English alphabet

NONE:CSS1 does not use bullets

Armenian:css2 the traditional Armenian numbers

Cjk-ideographic:css2 the plain ideographic figure

Georgian:css2 the traditional George number

LOWER-GREEK:CSS2 Basic Greek lowercase letters

Hebrew:css2 the traditional Hebrew numbers

Hiragana:css2 Japanese plain Kana character

Hiragana-iroha:css2 Japanese Hiragana Order

Katakana:css2 Japanese piece Kana character

Katakana-iroha:css2 Japanese Katakana Number

Lower-latin:css2 Lowercase Latin alphabet

Upper-latin:css2 Capital Letter Latin

*list-style-image:url (images/disc.gif); Use image disc.gif instead of list item display

*list-style-position:outside | Inside

Outside: List item tag is placed outside the text and the wrapping text is not aligned to the mark

Inside: List item tag is placed within the text and the wrapping text is aligned according to the mark

hr{border:1px dashed #86BCD4; height:1;}

In the HTML code, there are also special levels of HR, which can be defined in style management to change its default display effect:

CSS definition of horizontal bar effect

border-bottom-style:dotted;

border-left-style:dotted;

border-right-style:dotted; border-top-style:dotted;

Height:1;

width:100%;

Align:left;

Color: #86BCD4;

Shade:no;

Horizontal bar Dashed effect definition

border:1px dashed #86BCD4; Height:1;