CSS text
We will not describe the attributes in the above table one by one. We will only describe some commonly used attributes, mainly for everyone to learn and practice at the same time. You can test other content yourself, and you can also view the specific content of each attribute on w3c.
Example 1 color color
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>查看颜色</p> <h1>标题查看颜色</h1> </body> </html>
style.css
body{
color: aqua;
}Run result :
You can see that we set the color for the body, but the p tag and h1 tag also show the color set by the body. The font color indicates that the two tags inherit the font color of the body.
Example 2 text-align
text-align is a basic attribute that affects the relationship between lines of text in an element. alignment. The first 3 values are fairly straightforward, but the 4th and 5th are a little more complicated.
The values left, right, and center cause the text in the element to be left-aligned, right-aligned, and centered respectively.
Western languages are read from left to right, and the default value of all text-align is left. The text is aligned on the left border and jagged on the right border (called "left-to-right" text). index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>php中文网</p> </body> </html>
style.css
body{
color: red;
text-align: center;
}Run results:
##Example 3 text-indent
Indent text Indent the first line of a paragraph on a Web page. This is one of the most commonly used text formatting effects. CSS provides the text-indent property, which can conveniently implement text indentation. By using the text-indent attribute, the first line of all elements can be indented by a given length, even a negative value. The most common use of this attribute is to indent the first line of a paragraph. The following rule will indent the first line of all paragraphs by 5 em:p {text-indent: 5em;}The code in the index.html below is: <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>If you don’t add any css modification at this time. The displayed effect is: Add the following indentation to our style.css code to indent the three words "Lab Building" by 2 bytes.
h3{
text-indent: 5em;
}Running results: 
word spacing
word-spacing attribute is OK Change the standard spacing between characters (words). Its default value normal is the same as setting it to 0. The word-spacing attribute accepts a positive or negative length value. If a positive length value is provided, the spacing between words increases. Setting a negative value for word-spacing will bring it closer:<html> <body> <h1 style="word-spacing:15px;">设置中文字符间距</h1> <h1 style="word-spacing:15px;">this is a test</h1> </body> </html>
Letter spacing
The difference between the letter-spacing attribute and word-spacing is that letter spacing modifies the spacing between characters or letters.
Like the word-spacing attribute, the possible values for the letter-spacing attribute include all lengths. The default keyword is normal (which is the same as letter-spacing:0). The entered length value will increase or decrease the space between letters by the specified amount:
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>Character conversion
## The #text-transform property handles the case of text. This attribute has 4 values:- none
- uppercase
- lowercase
- capitalize
h1 {text-transform: uppercase}The benefits of using text-transform are twofold. First, just write a simple rule to accomplish this modification without modifying the h1 element itself. Secondly, if you later decide to switch all case back to the original case, it will be easier to complete the modification. Text Decoration
Next, we discuss the text-decoration attribute, which is a very interesting attribute that provides a lot of interesting the behavior of. text-decoration has 5 values:- none
- underline
- overline
- line-through
- blink ## As expected, underline will Elements are underlined, just like the U element in HTML. overline does the exact opposite and draws an overline at the top of the text. The value line-through draws a through line in the middle of the text, equivalent to the S and strike elements in HTML. blink causes text to blink, similar to the much-maligned blink tag supported by Netscape.
The value none turns off all decorations originally applied to an element. Usually, plain text is the default look, but not always. For example, links are underlined by default. If you wish to remove the underline from a hyperlink, you can use the following CSS to do so:
a {text-decoration: none;}Note: If you explicitly use such a rule to remove the underline of the link, then the only visual difference between the anchor and the normal text is the color (at least this is the default, but there is no complete guarantee that the color will be the same) the difference).
You can also combine multiple decorations in one rule. If you want all hyperlinks to be both underlined and overlined, the rule is as follows:
a:link a:visited {text-decoration: underline overline;}However, it should be noted that if two different decorations match the same element, the value of the winning rule will be exactly Replace another value. Please consider the following rules:
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}For the given rules, all h2 elements with class stickyn have only one throughline decoration, and no underline or overline, because the text-decoration value will be replaced instead of Accumulate.
Handling White Space
The white-space attribute affects the user agent's handling of spaces, newlines, and tab characters in the source document.
By using this attribute, you can affect the way the browser handles whitespace between words and between lines of text. To some extent, default XHTML processing already handles whitespace: it merges all whitespace characters into a single space. So given the following markup, when displayed in a web browser, only a single space will be displayed between each word, and newlines in the element will be ignored:
<p>This paragraph has many spaces in it.</p>
This default can be set explicitly with the following statement Behavior:
p {white-space: normal;}The above rule tells the browser to do what it normally would: discard extra whitespace. If this value is given, newline characters (carriage returns) are converted to spaces, and sequences of multiple spaces on a line are converted to a single space.
Text direction
If you read a book in English, you will read it from left to right, top to bottom, that is English flow direction. However, this is not the case for all languages. We know that ancient Chinese is read from right to left, and of course Hebrew and Arabic are read from right to left. CSS2 introduced a property to describe its directionality. The
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 will only be applied when the unicode-bidi attribute is set to embed or bidi-override.
The direction attribute has two values: ltr and rtl. In most cases, the default is ltr, which displays text from left to right. If displaying right-to-left text, the value rtl should be used.
Next Section