15th Chapter Text Style (bottom)

Chapter VI CSS text Styles [ bottom ]

Learning Essentials:

1. Text Summary

2. Text Style

3. Text Control

This chapter mainly discusses CSS Text style in HTML5, changing the font size, type, and orientation of text with text style settings .

A Text summary

let's focus on what CSS Text Style The content of some of the settings, style sheet is as follows

Property Name Description CSS version
Text-decoration decorative text appears in various dashes. 1
Text-transform converts the English text to uppercase and lowercase. 1
Text-shadow Adding a shadow to Text 3
Text-align Set the text alignment 1,3
Blank handling in White-space typesetting 1
Letter-spacing set the spacing between letters 1
Word-spacing set the spacing between words 1
Line-height Set Line height 1
Word-wrap Control Segment Word 3
Text-indent to set the indent of the first line of text 1

Two Text Style
There are three types of CSS text styles: text decoration, English case conversion, and text shading.
1.text-decoration
p {
Text-decoration:underline;
}
Explanation: The setting text appears underlined. The property values are the following table:
Value Description
None let the text that itself has the underlined decoration cancel out
Underline let the bottom of the text appear an underscore
Overline let the text appear on the head with an underscore
Line-through let a strikethrough appear in the middle of the text
Blink let the text flicker, basically does not support the

Cancel a hyperlink that is already underlined
A
Text-decoration:none;
}

2.text-transform
p {
Text-transform:uppercase;
}
Explanation: Set the English text to case.
Value Description
None restores the value of the converted case to the default state
Capitalize capitalize the first letter of the English word
Uppercase convert English to uppercase
lowercase convert English to lowercase letters

3.text-shadow
p {
text-shadow:5px 5px 3px Black;
}
Explanation: Add a shadow to the text. Where four values, first value: horizontal offset; second value: Vertical offset;
Three values: Shadow Blur (optional), fourth value: Shadow color (optional).
Three Text control
The CSS text style also has a set of styles for accessing and controlling the shape of the text.
1.text-align
p {
Text-align:center;
}
Explanation: Specifies how text is aligned.
Value Description
Left-Justified, default
Right aligns
Center Center alignment
Justify Content Justification
Start to leave text at the beginning of the boundary
End to leave the text at the end of the boundary

Start and end belong to the new features of CSS3, but currently ie and opera are not supported.
2.white-space
p {
White-space:nowrap;
}
Explanation: Handle blank layout.
Value Description
Normal default value, white space character compressed, text wrap
NoWrap blank character is compressed, text does not wrap
The pre-whitespace character is preserved and newline characters are wrapped.
Pre-line whitespace characters are compressed and text wraps or breaks in line with newline characters
Pre-wrap whitespace characters are preserved and text wraps or breaks in line with newline characters

3.letter-spacing
p {
letter-spacing:4px;
}
Explanation: Sets the spacing between text.
Value Description
Normal Set default spacing
Length values such as: "Number" + "px"

4.word-spacing
p {
word-spacing:14px;
}
Explanation: Set the spacing between English lists.
Value Description
Normal Set default spacing
Length values such as: "Number" + "px"

5.line-height
p {
line-height:200%;
}
Explanation: Sets the height of the paragraph line.
Value Description
Normal Set default spacing
Length values such as: "Number" + "px"
Values such as:
% Example: 200%

6.word-wrap
p {
Word-wrap:break-word;
}
Explanation: Let the long English word break.
Value Description
The normal word keeps on opening
Break-word Breaking words

7.text-indent
p {
text-indent:20px;
}
Explanation: Sets the indentation for the first line of text.
Value Description
Normal Set default spacing
Length values such as: "Number" + "px"

Example

<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>css text style [Bottom]</title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>

<p> I am HTML5, I am HTML5, I am html5sdlkfjsdlkfjsldkfjlksdjflksdjflksdjflksdjflksdjflksdfjlksdfjlk, I am HTML5, I am HTML5 , I am HTML5, I am HTML5, I am HTML5, I am HTML5, I am HTML5, I am HTML5, I am html5,</p>

<!--<a href= "http://baidu.com" > Baidu </a>--

</body>

@charset "Utf-8";

p {
font-size:50px;
Background:silver;

/*text-decoration:underline;*/
/*text-decoration:overline;*/
/*text-decoration:line-through;*/
/*text-decoration:blink;*/

/*text-transform:uppercase;*/
/*text-transform:lowercase;*/
/*text-transform:capitalize;*/

/*text-shadow:5px 5px 3px red;*/

/*text-align:left;*/
/*text-align:right;*/
/*text-align:center;*/

/*text-align:justify;*/
/*text-align:start;*/
/*text-align:end;*/

/*white-space:nowrap;*/
/*white-space:pre;*/
/*white-space:pre-line;*/
/*white-space:pre-wrap;*/

/*letter-spacing:5px;*/
/*word-spacing:15px;*/

/*line-height:1.5;*/

Word-wrap:break-word;
text-indent:50px;
}

/*a {
Text-decoration:none;
}*/

15th Chapter Text Style (bottom)