1. Indent
The text-indent property, the first line of all elements can be indented by a given length, even if the length can be negative
There are three types of property values:
length defines a fixed indent. Default: 0
% defines an indent based on a percentage of the parent element's width
inherit specifies that the value of the text-indent attribute should be inherited from the parent element
[Note: 1. IE does not support attribute value inherit (inherit) in any version; 2. does not support inline elements]
2. Horizontal alignment
Value description| left | Arranges text to the left. Default: Determined by the browser. |
| right | Arranges text to the right. |
| center | Arrange the text to the center. |
| justify | To achieve justified text effect. |
| inherit | Specifies that the value of the text-align attribute should be inherited from the parent element. |
text-algin:justify In justified text, the left and right ends of the text line are placed on the inner border of the parent element. Then, adjust the spacing between words and letters so that the lines are exactly the same length. Justified text is common in the printing world
The specific usage scenarios and precautions I made a summary in the following article http://570109268.iteye.com/blog/2409915
3. Word Spacing
The word-spacing property can change the standard spacing between words (words), and its default value of normal is the same as setting the value to 0.
Accepts a positive or negative length value: if a positive length value is provided, the word spacing increases; a negative value for word-spacing will make it closer
4. Letter spacing
Possible values for the letter-spacing attribute include all lengths, and the default keyword is normal (this is the same as letter-spacing:0). Entering a length value increases or decreases the spacing between letters by the specified amount
[Difference] between letter-spacing and word-spacing: Letter spacing modifies the spacing between characters or letters
【Applicable scene】
The letter-spacing attribute is used for the spacing between Chinese characters in paragraphs and English letters, and the word-spacing attribute is used for the spacing between words in English paragraphs.
5. Character conversion
The text-transform property handles the case of the text. This property has 4 values:
none (do not modify), uppercase (uppercase), lowercase (lowercase), capitalize (write the first letter of the answer)
<style type="text/css">
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
<p class="uppercase">This is some text in a paragraph.</p>
<p class="lowercase">This is some text in a paragraph.</p>
<p class="capitalize">This is some text in a paragraph.</p>
【benefit】
① Just write a simple rule to complete this modification without modifying the h1 element itself;
② If you decide later to switch all upper and lower case back to the original case, you can make changes more easily
6. Text decoration (underline, overline, through line)
text-decoration has 5 values:
none (no behavior), underline (underline), overlay (overline), line-through (through the line), blink (blink)
【Effect】
①underline will underline the element, just like the U element in HTML;
②overline has the opposite effect, it will draw an overline at the top of the text;
③The value line-through draws a through line in the middle of the text, which is equivalent to the S and strike elements in HTML
④blink will make the text blink, similar to the controversial blink mark supported by Netscape
7. Handle whitespace (newline/no newline)
The white-space attribute affects the user agent's handling of whitespace, newlines, and tab characters in the source document
Using this property, you can influence how the browser handles whitespace between words and lines of text
Value description| normal | default. Whitespace is ignored by browsers. |
| pre | White space is preserved by the browser. It behaves like the <pre> tag in HTML. |
| nowrap | The text does not wrap, the text continues on the same line until it encounters a <br> tag. |
| pre-wrap | Whitespace sequences are preserved, but line breaks occur normally. |
| pre-line | Combine whitespace sequences, but preserve newlines. |
| inherit | Specifies that the value of the white-space attribute should be inherited from the parent element. |
8. Text Orientation
If it is an English book, it will be read from left to right, from top to bottom, which is the flow direction of English. However, this is not the case for all languages. Ancient Chinese is to read from right to left, of course, including Hebrew and Arabic. CSS2 introduced a property to describe its directionality
direction property:
Affects the writing direction of text in block-level elements, the direction of column layout in tables, the direction in which content fills its element box horizontally, and the position of the last line in justified elements
【Note:】
For inline elements, the direction attribute is only applied if the unicode-bidi attribute is set to embed or bidi-override
The direction property has two values: ltr and rtl. In most cases, the default is ltr, which displays left-to-right text. If displaying right-to-left text, the value rtl should be used
9. Fonts
① Font Family/Declaration
font-family specifies the font family of the element, and can store multiple font names as a "fallback" system. If the browser does not support the first font, it will try the next one. That is, the value of the font-family attribute is a precedence list of font family names or/and class family names for an element, and the browser will use the first value it recognizes
【2 font series】
Specified family name: the name of the specific font, for example: "times", "courier", "arial (Courier)"
Common font family names: eg: "serif", "sans-serif", "cursive", "fantasy", "monospace"
Note: Using a particular font family (Geneva) is entirely dependent on whether that font family is available on the user's machine; this property does not indicate any font download. Therefore, it is strongly recommended to use a generic font family name as a fallback
[font name with single quotation marks]
Quotes in the font-family declaration are only required if the font name has one or more spaces in it (such as New York), or if the font name includes symbols such as # or $
Either single or double quotes are acceptable. However, if you put a font-family attribute in the HTML style attribute, you need to use the kind of quotes that are not used by the attribute itself:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">Font declaration in quotes</p>
②The font is slanted
The font-style property is most commonly used to specify italic text. This property has three values: normal (normal), italic (italic), oblique (italic)
[The difference between italic and oblique]: Web browsers behave the same
③ Font deformation (small capital letters)
The font-variant property sets the small caps font to display the text, all lowercase letters are converted to uppercase, but all letters in small caps have a smaller font size compared to the rest of the text
font-variant property value: normal default value; small-caps small capital letters
④Font weight
The font-weight property sets the weight of the text
Value description| normal | Defaults. Defines standard characters. |
| bold | Define bold characters. |
| bolder | Define thicker characters. |
| lighter | Define finer characters. |
|
Define thick to thin characters. 400 is equivalent to normal, and 700 is equivalent to bold. |
| inherit | Specifies that the font weight should be inherited from the parent element. |
⑤ Font size
font-size value can be absolute or relative
【Absolute value】
Sets text to a specified size; does not allow users to resize text in all browsers (bad for usability); absolute size is useful when determining the physical size of the output
【relative value】
Sets the size relative to surrounding elements; allows the user to resize the text in the browser
【Note】If you do not specify the font size, the default size of normal text (such as paragraph) is 16 pixels (16px=1em)
Next, compare px (pixels) and em:
①px：
Full control over text size by setting the text size in pixels;
②em：
Set the text size by em, 1em is equal to the current font size. If an element's font-size is 16 pixels, then 1em is equal to 16 pixels for that element. When setting the font size, the value of em changes relative to the font size of the parent element
The default text size in browsers is 16 pixels. So the default size of 1em is 16px
Pixels can be converted to em using this formula: pixels/16=em
(Note: 16 is equal to the default font size of the parent element. Assuming that the font-size of the parent element is 20px, the formula needs to be changed to: pixels/20=em)
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
【em优点】
使用 em 单位，可以在所有浏览器中调整文本大小
【问题】
不幸的是，在 IE 中仍存在问题；在重设文本大小时，会比正常的尺寸更大或更小
【方案】
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
这样在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小