CSS Text


CSS text attributes

CSS text attributes can define the appearance of text, such as text color, text indentation, text alignment, character spacing, decorative text, shadow effects.


CSS text color

The "color" property is used to set the text color.

example :
 P {color: # ff0000;}
 P {color: red;}

The height of the CSS text line

The "line-height" property is used to set the height of the text line.

The value is a length value or percentage consisting of a floating-point number and a unit identifier. If the attribute is not set, the default row height is used.

example :
p { line-height: 1.5em; }

CSS text indentation

The "text-indent" property is used to set the text indentation.

p { text-indent: 2em; }

The example shows that the first line indent two characters.

The value of the property can use a negative value,


CSS text alignment

"text-align" attribute used to set the text alignment, the possible values ​​are :

Value Description
left Default to left justified. For Hebrew and Arabic languages, text-align defaults to right
right Right justified
center Center alignment
justify Both ends are aligned
inherit Specifies that the value of the text-align attribute should be inherited from the parent element
p {text-align: center;}

CSS Character spacing

The "word-spacing" property is used to set the text color, which may have the following values :

Value Description
normal Defaults
Numeric A length value consisting of a floating-point number and a unit identifier, allowing a negative value
inherit Specifies that the value of the text-spacing property should be inherited from the parent element
p {word-spacing: 10px;}
Note

CSS defines "word" as a string of non-whitespace characters surrounded by some kind of whitespace character. According to this definition, means that the use of hieroglyphic language (such as Chinese characters) or non-Roman writing often can not specify the word interval.


CSS text decoration

The "text-decoration" attribute is used to set the text decoration effect, which may take the following values :

Value Description
none Default, no decoration
underline Underlined
line-through Through the line
overline On the line
blink Flashes
inherit Specifies that the value of the text-decoration property should be inherited from the parent element
p { text-decoration: line-through; }

CSS text shadow effect

"Word-shadow" attribute to set the text with three-dimensional shadow effect.
The syntax is:

text-shadow: {color} {length} {second length} {Working distance}; 
The parameters are as follows :
Value Description
Colour Specifies the color of the projection
Length Specifies the horizontal extension of the shadow, a length value consisting of a floating-point number and a unit identifier, which can be negative
Second length With the length, but the effect is the vertical direction
Working distance Specifies the action distance for the blur effect, a length value consisting of a floating-point number and a unit identifier, and can not be a negative value. If only the blur effect is required, set all the first two lengths to zero
	p {text-shadow: gray 1px 1px 3px;}
	

The example shows that the text shadow is gray, the projection extends right and down by 1 pixel, and the blur effect distance is 3 pixels.

Note

This property may not be supported by older versions of Internet Explorer




Copyright 2014-2017 by DeveloperTut.com. All Rights Reserved.
TwitterGoogle+Facebook