Review the background and text styles of CSS and css text styles

Review the background and text styles of CSS and css text styles

CSS background style:

①. Use keywords to set values: center, top, bottom, left, right, for example, background-position: top;

②. Use percentage to set the value, for example, background-position: 50%. This mode is complex. The default value of background-position is 0%, which is equivalent to top left; if you want to place an image at 2/3 in the horizontal direction and 1/3 in the vertical direction, you can declare it as follows:

body  {     background-image:url('img.gif');    background-repeat:no-repeat;    background-position:66% 33%;  }

③ Use the length value to set the value. The length value refers to the offset in the upper left corner of the element's padding area. The offset is the upper left corner of the image.

body  {     background-image:url('img.gif');    background-repeat:no-repeat;    background-position:150px 30px;  }

5. background Association (set whether the background image is fixed or scroll with the rest of the page): background-attachment attribute, default value: scroll; set the background image to fixed value: fixed; for example: background-attachment: fiexd;

CSSText style:

Text properties allow you to change the color, spacing, alignment style, decoration text, and indentation of text.

The text-indent attribute can also use negative values, but be careful when setting negative values for text-indent. If a negative value is set for a paragraph, some text in the first line may exceed the left border of the browser window. To avoid this problem, we recommend that you set another margin or some padding for negative indentation: p {text-indent:-5em; padding-left: 5em ;};

The text-indent attribute is expressed by percentage, which is the width of the percentage relative to the parent element of the indent element. In other words, if the indent value is set to 5%, the first line of the affected element is indented to 5% of the width of its parent element.

Note: The text-indent attribute can be inherited. Generally, text-indent can be applied to all block-level elements, but it cannot be applied to row elements, text-indent attributes cannot be applied to replacement elements such as images. However, if an image exists in the first line of a block-level element (such as a paragraph), it will move with the rest of the text in the line.

2. Text alignment:The text-align attribute is used to set the text alignment of an element.

        h1 {            text-align: left;        }        h2 {            text-align: center;        }        h3 {            text-align: right;        }        h4 {            text-align: justify;        }

3.Text Spacing:The letter-spacing attribute can change the standard spacing between texts. The default value is normal, which is equivalent to 0. The letter-spacing attribute accepts a positive or negative length value. If a positive length value is provided, the interval between words increases. Setting a negative value for letter-spacing will bring it closer:

        .positive {            letter-spacing: 5px;        }        .negative {            letter-spacing: -0.2em;        }

4.Spacing between rows:Use the line-height attribute to set the line spacing (Row height). The default value is normal. Set the percentage. Set the line spacing based on the percentage of the current font size. Set the number, the line spacing is equal to the number multiplied by the value of the current font size. The length is set to a fixed line spacing. The setting of inherit specifies that the value of the line-height attribute should be inherited from the parent element.

Line-height: 150%;/* the Line spacing is half of the current font */line-height: 2;/* if the current font is 12px, the text Line spacing is 24px */Line-height: 5px;/* use a fixed length */

Note: to ensure that the text size can be adjusted properly when the text size is set again, we recommend that you use a relatively flexible length unit, such as em and percentage.

5.Character conversion:Use the text-transform attribute to process the case of text. The default value is none. It is displayed as standard text without any conversion.

H2 {/* uppercase letters of each word in the text */text-transform: capitalize;} h3 {/* Only uppercase letters */text-transform: uppercase ;} h4 {/* No upper-case letters, only lower-case letters */text-transform: lowercase ;}

6.Text modifier:Use the text-decoration attribute to modify the text. The default value is none without any modification.

H1 {/* no modifier */text-decoration: none;} h2 {/* text underline */text-decoration: underline ;} h3 {/* underlined text */text-decoration: overline;} h4 {/* a line passing through the text */text-decoration: line-through ;} p {/* causes text to flash. IE and Chrome do not support "blink" attribute values. */Text-decoration: blink;

Author: laudong, daemon
Source: http://limits.cnblogs.com