CSS font style attributes
table of Contents
Three, line-height line spacing (line height)
Four, text-align horizontal alignment
Five, text-indent the first line indent
Sixth, decorative text-decoration text
A, font attributes
font attributes to the font style for a comprehensive set.
The basic syntax:
selector {font: font-style font- weight font-size / line-height font-family;}
Font ligatures are ordered, the order can not be replaced, separated by spaces each attribute.
font-size, and font-family can not be omitted (can be omitted), or does not work.
[Sample Code]
<style>
h1 of {
font: 12px "Microsoft yahei";
}
</ style>
Two, color attribute
color defines the color of text, which embodiment has the following three values:
- 1, the value of a predefined color, such as red, green, blue and the like;
- "#" At the beginning 2, hexadecimal, such as # FF0000 (or # F00), # FF6600 (or # F60), # 29D794 like, if the same, then twenty-two may be abbreviated (three every two groups must be the same);
- 3, RGB codes, such as red can be expressed as rgb (255,0,0) or rgb (100%, 0%, 0%);
[Sample Code]
<style>
span{
color: #ff0000;
}
</style>
Three, line-height line spacing (line height)
line-height attribute is used to set the line spacing is the distance between the rows and lines, commonly known as the line height.
Common property value in pixels px, em and relative value in%, the most common practice is likewise px pixels .
In general, large spacing to about 7/8 pixels than the font size.
[Sample Code]
<style>
P {
font-size: 16px;
Line-height: 24px;
}
</ style>
Four, text-align horizontal alignment
Level text-align property is used to set the text are aligned with respect to align the align attributes html.
- left: Left (default)
- right: right alignment
- center: Align
[Sample Code]
<style>
h1 {
font: 12px "Microsoft yahei";
text-align = left: Center; / * Let h1 centered inside the text * /
}
</ style>
Five, text-indent the first line indent
attribute is used to set the text-indent indent text, numerical attribute values may be different units, em character width or multiples of percentage relative to the width of the browser window%, allows the use of a negative value is generally recommended by EM .
1em is the width of a word, a paragraph normal characters, characters 1em is equal to 1.
[Sample Code]
<style>
P {
font-size: 16px;
Line-height: 24px;
text-indent: 2em; / * paragraph indent first word line * /
}
</ style>
Sixth, decorative text-decoration text
text-decoration is typically used to modify the link decorative effect.
- none no-frills (default) - when using decorative canceled
- underline underline - Common
- blink blink
- overline overline
- line-through the through line (strikethrough)
[Sample Code]
<style>
div{
font-size: 40px;
text-decoration: underline;
}
</style>
[Mnemonic summary]
- Inclination: em tag and i → Cancel inclined font-style: normal; Add inclined font-style: italic;
- Bold: strong tags and b → Cancel bold font-weight: normal; or font-weight: 400; adding bold font-weight: bold; or font-weight: 700;
- Underline: u → labels ins and off underline text-decoration: none; underline text-decoration: underline;
- Strikethrough: s → and undelete del tag line text-decoration: none; strikethrough text-decoration: line-through;
