Hello everyone , I am an IT sharer, known as Pippi. In this article, we will talk about CSS text styles.
1. Text color Color
The color attribute is used to set the color of the text.
Color is passed through CSS Most frequently specified:
- Ten Hexadecimal value - such as "#FF0000".
- An RGB value - "RGB(255,0,0)".
- The name of the color - such as "red".
The text color of a web page refers to the selection within the body:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> < ;title>item</title> <style> body { color: blue; } h1 { color: #00ff00; } h2 { color: rgb(255, 0, 0); }</style> </ head> <body> <h2>hello world</h2> <h1>welcome to CaoZhou</h1> </body></html>
Note: For W3C Standard CSS: If you define a color property, you must also define a background-color property.
2. Attributes
1 . text-align text alignment
Text alignment property is used to set the horizontal alignment of text.
Text can be centered or Align to left or right, align ends.
When text-align When set to "justify", each line is expanded to equal width and the left and right margins are aligned (like magazines and newspapers).
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ; h1 { text-align: center; } p.date { text-align: right; } p.main { text-align: justify; }</style> </head> <body> <p class ="date">March 14, 2015</p> <p class="main"> Once upon a time, there was a scholar who made an appointment with his fiancée to get married on a certain day of a certain year and month. On that day, the fiancée married someone else. The scholar was hit hard and could not afford to fall ill. At this time, a visiting monk passed by and took out a mirror from his arms and asked the scholar to look at it. The scholar saw the vast sea and a murdered woman lying naked on the beach. A person passed by, took a look, shook his head, and left. Another person passed by, took off his clothes, covered the woman's body, and left. Another person passed by, went over, dug a hole, and carefully buried the body. The monk explained that the female corpse on the beach was your fiancée’s previous life. You were the second person who passed by and gave him a piece of clothing. She falls in love with you in this life just to repay your love. But the person she ultimately wanted to repay her whole life was the person who buried her in the end, and that person was her current husband. The scholar has a great enlightenment and recovers from his illness. </p> <p><b>Note: </b> Resize your browser window to see how "justify" works. </p> </body></html>
2. text-decorationText decoration
text-decoration attribute is used to set or delete text decoration.
From a design perspective Look at the text-decoration attribute, which is mainly used to remove the underline of the link:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ; .none {} .del { text-decoration: none; }</style> </head> <body> <p>original</p> <a href="#" class ="none">wwwwwwwwwwwwwwwwww</a> <p>Remove the underline</p> <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a> </body></ html>
can also be decorated like this Text:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> < ;title>item</title> <style> h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }</style> </ head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> </body></ html>Note: It is not recommended to highlight text that is not a link, as this often confuses users.
3. text-transformText conversion
text-transformThe text-transform attribute is used to specify uppercase and lowercase letters in a text.
- uppercase :Convert to all uppercase.
- lowercase: Convert to all lowercase.
- capitalize: Capitalize the first letter of each word.
<!DOCTYPE html><html> <head> <meta charset="utf-8"> < meta name="viewport" content="width=640, user-scalable=no"> <title>item</title> <style> p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; }</style> </head> <body> <p class="uppercase">This is some text.</ p> <p class="lowercase">This is some text.</p> <p class="capitalize">This is some text.</p> </body></ html>
4. text-indentText indent
text-indent The text indent attribute is used to specify the indentation of the first line of text.
p {text-indent:50px;}5. letter-spacing settings Character spacing
Increase or decrease the space between characters.
<style> h1 { letter-spacing:2px;} h2 { letter-spacing:-3px;}</style>
6. line-height sets the line height
Specifies the space between lines in a paragraph.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> < ;title>item</title> <style> p.small { line-height: 70%; } p.big { line-height: 200%; }</style> </head> <body> ; <p> This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%. <br> </p> <p class="small"> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> </p> <p class="big"> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height. <br> </p> </body></html>
7. word-spacing Set word spacing
Adds white space between words in a paragraph.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> < ;title>item</title> <style type="text/css"> p { word-spacing: 30px; }</style> </head> <body> <p> This is some text. This is some text. </p> </body></html>
8. vertical-align sets the element to vertical center
Sets the vertical alignment of the text image.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> < ;title>item</title> <style> img{ width: 200px; height: 100px; } img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } </style> </head> <body> <p>An <img src="img/logo.png" /> image with a default alignment.</p> <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p> <p>An <img class="bottom" src="img /logo.png" /> image with a text-bottom alignment.</p> </body></html>
9. text-shadow Set text shadow
Set text shadow.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> < ;title>item</title> <style> h1{ text-shadow: 2px 2px #FF0000; }</style> </head> <body> <h1>Text-shadow effect</h1> ; </body></html>
3. Summary
This article mainly introduces how to operate CSS text style in practical applications, and changes the text by explaining the corresponding attributes in the text. Manifestations. Using the display of rich renderings, you can see the operation effect more intuitively and understand it better. Using Html language, the code structure is clearer and can help you learn better.
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/yi-pian-wen-zhang-dai-ni-liao-jie-CSS-wen-ben-yang-shi.html
支付宝扫一扫 
评论列表（196条）
测试