CSS Learning Tutorial: Understanding text attributes that will be used in CSS style sheets

css| Tutorial | style sheet

Text: CSS control text attributes mainly include the following four: Text-indent, Text-align, Text-decoration, Text-transform;

1. Text-align: Property text-align refers to the alignment of the text, which has left, right, center alignment, and automatically adapts to the four alignment methods:

Text-align:left;
Text-align:right;
Text-align:center;
text-align:justify;

Example: CSS code:

Body {
Font:normal 12px/1.5 Georgia, Sans-serif;
Text-align:left;
Background: #444 URL (images/bodybg.jpg) repeat-y;
}

Declaring a property text-align to left in the selector body avoids repeating the declaration in other selectors that require text to be aligned to the right.

2. Text-indent: Property text-indent refers to the indentation of the first line of a paragraph, since it is the property of a paragraph, generally used in selector p (paragraph), the code is as follows:

p {
text-indent:26px;
}

This site's paragraph indentation is 0, so in the CSS file can find text-indent:0, not declared that this property, that is, the default is 0.

3. Text-decoration: Property text-decoration for text decoration, which includes underscores, underscores, dashes, and no four cosmetic methods, the following code:

Text-decoration:none;
Text-decoration:underline;
Text-decoration:overline;
Text-decoration:line-through;

In this case do not give a specific underline, underlined, underlined examples, I believe you can easily imagine the effect of it. Need to emphasize is the attribute value none, if you look at this site CSS, you can see all the properties text-decoration values are none. This is because the current browser for selector A (that is, hyperlink), the default Text-decoration property value is underline. This will make a lot of you do not want to appear in a large number of underscores, and because of the inability to constrain the thickness of the underline, as well as the differences between browsers, and even a variety of weights, different browsers display different underscores.

Example: You can see the text decoration of the hyperlinks in this site article is dotted, this effect is not a property text-decoration can be achieved, it needs the support of the next border properties, will be described in the border properties. The implementation method is as follows:

1. Set the Text-decoration property value of selector A to none in the global declaration, and the Code is as follows:

A
Color: #545454;
Text-decoration:none;
}

2. To make the hyperlink in the body part of the article display the blue dotted line, the code is as follows:

. Post_body a{
Color: #0061CA;
padding:0;
border-bottom:1px dotted #0061CA;
}

4. Text-transform: This property may not be familiar to you, because this property is only for English-language services, used to convert the case of letters. It includes first-letter caps, uppercase, lowercase, and unchanged four property values, the following code:

Text-transform:capitalize;
Text-transform:uppercase;
Text-transform:lowercase;
Text-transform:none;

Example: The CSS code that converts the first letter to uppercase is as follows:

. comment_author {
Text-transform:capitalize;
}