Through several properties provided by CSS, various text styles can be defined very easily and effectively, such as color, alignment, spacing, decoration, transformation, etc.
Commonly used text attributes include: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, etc. These properties give you precise control over the visual appearance of characters, words, spaces, and so on.
Let's take a closer look at how to set these text properties for elements.
1.text-align text alignment
The text-align attribute is used to set the horizontal alignment of text in an element. The optional values of the attribute are as follows:
Example:
<!DOCTYPEhtml><html><head><style>p{border:1pxsolidblack;/*In order to more intuitively reflect the alignment of the text, here is a border set for the p tag*/}.text1{text-align: left;}.text2{text-align:right;}.text3{text-align:center;}</style></head><body><pclass=text1>Left aligned</p><pclass=text2> Align right</p><pclass=text3>Align center</p></body></html>The results displayed are as follows:
2. text-decoration
The text-decoration attribute is used to set or delete text decoration. The most common method is to use the text-decoration attribute to remove the default underline of the <a> tag. Of course, you can also use the text-decoration attribute to add some decoration to the text in the element where needed to achieve a highlighting effect.
Optional values for the text-decoration attribute are as follows:
Example:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>text-decoration</title><style>h1.under{text-decoration:underline;}h1.over{text-decoration:overline ;}p.line{text-decoration:line-through;}p.blink{text-decoration:blink;}a.none{text-decoration:none;}p.underover{text-decoration:underlineoverline;}</ style></head><body><h1class=under>Underline</h1><pclass=line>Strikethrough</p><pclass=blink>Flashing effect, but the browser will not display it</p><h1class =over>Underline</h1><p>This is a <aclass=nonehref=#>link</a>. By default, the link is underlined. Here we remove it. </p><pclass=underover>Overline and underline</p></body></html>The results displayed are as follows:
3.text-transform
The text-transform attribute is used to control the case of English letters in the text. Through this attribute, you can uniformly change the English letters in the text to lowercase letters, uppercase letters, or capitalized first letters without modifying the original text.
4.text-indent
The text-indent attribute is used to add the first line indentation effect to the text in the element. The optional values of the attribute are as follows:
5.line-height line height
This property affects the layout of the line box. When applied to a block-level element, it defines the minimum distance between baselines in that element rather than the maximum distance.
The calculated difference between line-height and font-size (line spacing) is divided into two halves and added to the top and bottom of a line of text content. The smallest box that can contain this content is a line box.
Example:
<!DOCTYPEhtml><html><head><style>p.small{line-height:0.8;}p.big{line-height:200%;}</style></head><body><p> This is the default standard row height<br>This is the default standard row height<br>This is the default standard row height<br></p><pclass=small>Use numbers to define a smaller row height<br> >Use numbers to define a smaller row height<br>Use numbers to define a smaller row height<br></p><pclass=big>Use percentages to define a larger row height<br>Use percentages Use the form to define a larger row height<br>Use the form of percentage to define a larger row height<br></p></body></html>The results displayed are as follows:
6.letter-spacing
The spacing between text. The value can be negative. The default value is normal. All browsers support the letter-spacing attribute.
Example:
<!DOCTYPEhtml><html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gbk2312/><title>letter-spacing attribute of css</title><style>*{margin:0; padding:0;}body{width:1000px;margin:200pxauto;}p{font-size:18px;}.p01{letter-spacing:2px;}.p02{letter-spacing:10px}</style></ head><body><pclass=p01>css text spacing test text! </p><pclass=p02>css text spacing test text! </p></body></html>The results displayed are as follows:
7.word-spacing
The word-spacing attribute is used to set the spacing between words, but it is invalid for Chinese. The optional values of the attribute are as follows:
8.text-shadow text shadow
text-shadow adds a shadow to text. You can add multiple shadows to text and decoration. The shadow values are separated by commas. Each shadow value consists of the element's offset in the X and Y directions, the blur radius, and the color value.
9.vertical-align
The vertical-align attribute sets the vertical alignment of an element.
The vertical-align attribute in CSS can only be used for inline elements and displaced elements (such as images and form input boxes). This attribute is not inherited.
First, let’s look at a picture. The top line, middle line, and baseline of the text. The baseline is the lower edge of the letter x.
Concepts such as baseline, bottom line, top line, and middle line are mentioned. What do they mean?
(1) Top line: the upper edge of Chinese characters;
(2) Center line: the line running through the middle of the lowercase English letter x;
(3) Baseline: the lower edge of the lowercase letter x;
(4) Bottom line: the lower edge of Chinese characters;
(5) Content area: refers to the area wrapped by the bottom line and the top line;
(6) Line height: It includes the content area and the blank area that is symmetrically expanded based on the content area. We call it the line height, which can also be considered as the distance between the baselines of adjacent text lines;
(7) Line spacing: refers to the distance between adjacent text lines between the bottom line of the previous text line and the top line of the next text line;
(8) Inline box: It is a concept in the browser rendering model and cannot be displayed, but it does exist and its height is the same as the line height;
(9) Line box: A similar concept to the inner box of the same line. The line box refers to a virtual rectangular box of this line and is also a concept in the browser rendering mode. The height of the line box is equal to the largest value of the inline box among all elements in this line (the inline box with the largest line height value is used as the benchmark, and other inline boxes are aligned to the benchmark using their own alignment methods, and the height of the line box is finally calculated).
10.white-space handles whitespace characters
The following table summarizes the behavior of the white-space attribute:
11.direction text direction