CSS (3) text (text)

First, CSS text format

1. Text Color

The Color property is used to set the color of the text. Colors are most often specified by CSS: Hexadecimal values-such as "#ff0000"; an RGB value-"RGB (255,0,0)"; Name of the color-such as "Red"

The background color of a Web page refers to the selection within the body:

body {color:blue;}

h1 {color: #00ff00;}

H2 {Color:rgb (255,0,0);}

2. Alignment of text

Text arrangement properties are used to set the horizontal alignment of text. Text can be centered or aligned to the left or right, justified. When Text-align is set to "justify", each line is expanded to equal width, left, and right margin are aligned (such as magazines and newspapers).

<! DOCTYPE html>


3. Text Decoration
The Text-decoration property is used to set or remove decorations for text. From a design point of view, the Text-decoration property is primarily used to remove the underline of a link:
a {text-decoration:none;}
You can also decorate text like this:
h1 {Text-decoration:overline;}
h2 {Text-decoration:line-through;}
h3 {Text-decoration:underline;}
Remark we do not recommend highlighting text that is not linked, because this often confuses the user.
4. Text conversion
Text conversion properties are used to specify uppercase and lowercase letters in a text. Can be used to turn all words into uppercase or lowercase letters, or capitalize the first letter of each word.
<! DOCTYPE html>

5. Indent text
The text indent property is used to specify the indentation of the first line of text. p {text-indent:50px;}
6. Text direction/writing direction
The Direction property specifies the text direction/writing direction. LTR: Default, Text direction from left to right. RTL: Text direction from right to left. Inherit: Specifies that the value of the direction property should be inherited from the parent element.
<! DOCTYPE html>


7. Character Spacing
The Letter-spacing property increases or decreases whitespace between characters (character spacing).
<! DOCTYPE html>


8, Row High
Line-height sets the row height in percent. Normal: Default. Set a reasonable line spacing. Number: Set the numbers, which are multiplied by the current font size to set the line spacing. Length: Sets the fixed line spacing. %: The percent line spacing based on the current font size. Inherit: Specifies that the value of the Line-height property should be inherited from the parent element.
<! DOCTYPE html>


9. Vertical alignment
The Vertical-align property sets the vertical alignment of an element.
Baseline: Default. element is placed on the baseline of the parent element.
Sub: subscript for vertical aligned.
Super: Superscript of vertical aligned aligned
Top: Aligns the top of the element to the top of the highest element in the row
Text-top: Aligns the top of the element with the top of the parent element's font
Middle: Places this element in the middle of the parent element.
Bottom: Aligns the top of the element to the top of the lowest element in the row.
Text-bottom: Aligns the bottom of the element with the bottom of the parent element's font.
%: Use the percent value of the "Line-height" property to arrange this element. Negative values are allowed.
Inherit: Specifies that the value of the Vertical-align property should be inherited from the parent element.
10, the Blank processing method
The White-space property specifies how whitespace within an element is handled.
Normal: Default. The blank will be ignored by the browser.
Pre: The blank will be reserved by the browser. It behaves like a <pre> tag in HTML.
NoWrap: Text does not wrap, text continues on the same line until the <br> tag is encountered.
Pre-wrap: Preserves a sequence of whitespace characters, but wraps normally.
Pre-line: Merges a sequence of whitespace characters, but preserves newline characters.
Inherit: Specifies that the value of the White-space property should be inherited from the parent element.
11. Word Spacing
The Word-spacing property increases or decreases the whitespace between words.
<! DOCTYPE html>


Second, CSS3 text effect
1. Shadow text
The Text-shadow property is applied to the shadow text. Syntax Text-shadow:h-shadow v-shadow blur color; Note: The Text-shadow property joins one or more shadow text. The property is a shadow, separated by commas for each 2 or 3 length value specified and an optional color value. The length of the time lapse is 0.
H-shadow: Required. The position of the horizontal shadow. Negative values are allowed.
V-shadow: Required. The position of the vertical shadow. Negative values are allowed.
Blur: Optional. Blur the distance.
Color: Optional. The color of the shadow.
<! DOCTYPE html>

 
2. Automatic line Wrapping
The Word-wrap property allows for long content to be wrapped automatically. Word-wrap:normal|break-word;
Normal: line breaks only on allowed hyphenation points (the browser keeps the default processing).
Break-word: Wraps inside a long word or URL address.
<! DOCTYPE html>


If there is no word-wrap:break-word;
3, the Alignment method
The Text-justify property specifies the justification for text alignment set to "justify". This property specifies how the justified alignment and spacing should be aligned. Grammar text-justify:auto|inter-word|inter-ideograph|inter-cluster| Distribute|kashida|trim;
Auto: The browser decides to align the line algorithm.
None: Disables snapping to lines.
Inter-word: Increases/decreases the spacing between words.
Inter-ideograph: Use ideographic text to align content.
Inter-cluster: Only content that does not contain internal word breaks (such as Asian languages) is aligned.
Distribute: Similar to the newspaper layout, except in the East Asian language, the last line is not aligned.
Kashida: Aligns the contents by stretching the characters.
4. Text Overflow
The Text-overflow property specifies what should happen when the text overflows the element that contains it. Grammatical text-overflow:clip|ellipsis|string;
Clip: Trim text.
Ellipsis: Displays the ellipsis to represent the trimmed text.
String: Uses the given string to represent the trimmed text.
<! DOCTYPE html>


CSS (3) text (text)