CSS Style Two

CSS text styles

• Text-align: Setting the alignment of text

Value:

Left justified

Right: Align to the left

Center: Center Alignment

• Text-indent: Sets the first line indent of text

???? For example, the font is set to 12px, the first line indents another word, and 24px.

• Text-decoration: Setting decorative lines for text

???????? Value:

???????? None does not set the text decoration line

???????? Underline: Set Underline

???????? Overline: Underline

???????? Line-through: Medium Dash

• Text-transform: (mainly used in English text)

???? Value:

Capitalize: Capitalize the initial letter

Uppercase: Convert all letters to uppercase

Lowercase: Convert all letters to lowercase

• Letter-spacing: If it is a Chinese character, set the spacing between the word and the word

???????????????? If it is English text, set the spacing between letters and letters

• Word-spacing: Set Word spacing (main application English)
• Line-height: Set the line height of the text

Structure code:

Example 2:

Style code:

Structure code:

CSS List styles

List-style: Setting the symbol type for a list

Value:

Do not set symbols

None

Bullets for unordered lists:

Square: Solid block

Circle: Hollow Origin

Disc Solid Origin Point

Bulleted bullets with sequence list

Decimal???????????????? Arabic numerals

Lower-alpha???????????? lowercase letters

Upper-alpha???????????? Capital

Lower-roman???????? Lowercase Roman Numerals

Upper-roman???????? Uppercase Roman Numerals

?

List-style-position: Location of bullets

???????? Inside (inside the LI tag)

???????? Outside (outside of the LI tag)

?

List-style-image: Representing bullets with a background image

???????? Writing rules: List-style-image:url (path URL for background image)

Abbreviated form: List-style:square inside URL (arrow.gif);

?

Example 1:

Style code:

Structure code:

CSS background style

Background-color: Set background color: Red #ff0000, RGB (100,120,200)

Background-image:url (path URL for background image)

Background-repeat:

No-repeat: Uneven Shop

Repeat:x axis and y-axis tiling

Repeat-x: Tiling on the X-axis

Repeat-y: Tiling on the y-axis

Background-position: Set the position of the picture;

???? In numerical notation, X PX,YPX writes only one of the values that are not set in the other direction, as it has been set.

Word notation:

???? X direction: Left center right,

???? Y-axis direction: Top (Top aligned) center (center) Bottom (bottom)

???? Percent notation: 50%,50%

Background-position:left Center;

Set picture x-axis to align Left

Set the y-axis of the picture to align Center

Code:

?

CSS Style Two