A detailed introduction to the background and text of CSS styles

I. Background

1, background color with Background-color attribute, for example: body{background-color:red}

2, use the image to do the background with background-image properties, such as BODY{BACKGROUND-IMAGE:UL1 (23.jpg)

3, the background is repeated by the picture tile with the Backgroud-repeat property, Repeat-x or Repeat-y, respectively, for horizontal or vertical tiling,

No-repeat that allows tiling from any direction

For example: Body
{Background-image:url (23.jpg)
Background-repeat:repeat-x:)}

4, using the Background-position property to position the background, [position: Top, bottom, left, right, center, also can use

Percentage (50% 50%), Length value (50px 50px)]

For example: Body
{Background-image:url (23.jpg)
Background-position:center}

5, set the picture association properties with Background-attachment, for example, the following picture background does not scroll with the text scrolling

Body{background-image:url (23.jpg);
Background-repeat:no-repeat;
background-attachment:fixed;}

Second, the text

1, indent text with the Text-indent attribute, the most common is the first line of paragraph indentation, indentation value can also negative

For example: P{text-indent:-5em}, but set negative numbers easily beyond the left edge of the browser window, to pay special attention;

The Indent value unit can be a percent%, the length unit PX, the unit of measure em;

The Text-indent property can be inherited, for example:
P#outer {width:500px;}
P#inter {text-indent:10%}
p{width:200px;}
<p id= "outer" >
<p id= "Inter" > Some text.some text.some text.
<p>this is a pragramph</p>
</p>
</p>

2. Horizontal alignment with Text-align attribute (left, right, center, justity)

3, word-spacing can change the standard interval between words (words), the default value of normal and set a value of 0 is the same,

Word-spacing accepts positive length values and can accept negative length values

4, letter-spacing change the spacing between the characters and letters, the other same word-spacing, the default value of normal and the setting value of 0 is

Same, accept positive and negative length values

5. Text-transform handle the case of text (none, uppercase uppercase, lowercase lowercase, capitalize first letter uppercase

6, Text-decoration processing text decoration (none, underline, overline Dash, Line-through through line, blink flashing

7, deal with whitespace character White-space

Value Pre-line, whitespace: merge, line break: Reserved, wrap: Allow;
Value Normal, whitespace: merge, line break: Ignore, wrap: allow;
Value nowrap, whitespace: merge, line break: reserved, wrap: not allowed
Value Pre-wrap, whitespace: reserved, line break: Reserved, wrap: Allow

8. The Direction property affects the writing direction of the text in the block-level element, the orientation of the layout in the list, the orientation of the content to fill its text box horizontally, and the position of the last row in the justified element (with a value of two, ltr and RTK, where ltr is the default value, left to right direction)

9, Line-height set line height

This article on the CSS style of the background, text is a small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support topic.alibabacloud.com.