CSS text formatLOGIN

CSS text format

Text Color

The color property is used to set the color of text.

Colors are most often specified via CSS:

A hexadecimal value - such as "#FF0000"

An RGB value - "RGB (255,0,0 )"

The name of the color - such as "red"

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>多些书卷气 少些书生气</h1>
<p>人有书卷气,气质美如兰。有书卷气的人,身上有那么一股淡淡的书香,透着墨的芬芳,留着砚的韵味,带着纸的气息。
千百年来,那一缕缕飘逸的书香,把一批批文人志士熏陶和浸润得文雅儒雅、优雅高雅。</p>
<p class="ex">漫步历史长廊,洋溢书卷气的人不胜枚举</p>
</body>
</html>

of the text Alignment

#The text alignment property is used to set the horizontal alignment of text.

Text can be centered or aligned to the left or right, justified on both ends.

When text-align is set to "justify", each line is expanded to have equal width, and the left and right margins are Alignment (such as magazines and newspapers).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align 实例</h1>
<p class="date">xxxx 年 x 月 xx号</p>
<p class="main">有一个年轻人去买碗,来到店里他顺手拿起一只碗,然后依次与其它碗轻轻碰击,碗与碗之间相碰时立即发出沉闷、浑浊的声响,他失望地摇摇头。
然后去试下一只碗。。。他几乎挑遍了店里所有的碗,竟然没有一只满意的,就连老板捧出的自认为是店里碗中精品也被他摇着头失望地放回去了。</p>
<p><b>注意:</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>
</html>

Text decoration

The text-decoration property is used to set or delete text decoration.

From a design perspective, the text-decoration attribute is mainly used to remove the underline of the link:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
a {text-decoration:none;}
</style>
</head>
<body>
<p>链接到: <a href="#">php.cn</a></p>
</body>
</html>

You can also decorate the text like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>好好学习</h1>
<h2>原价¥30</h2>
<h3>现价¥10</h3>

</body>
</html>

Text conversion

Text conversion properties are used to specify uppercase and lowercase letters in a text.

can be used to make all words uppercase or lowercase, or to capitalize the first letter of each word.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</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>

Text indent

The text indent property is used to specify the indent of the first line of text.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style>
p {text-indent:30px;}
</style>
</head>
<body>
<p>无疑的,这些人都在做着一个相同的动作:玩手机。
令人感到讽刺的是,尽管电视的广告里不断地重复着“不做低头族,出行更安全”的提醒,可这些聚精会神的“低头族们”压根就当没听见似的,
继续旁若无人地玩着手机不把自已的生命当回事儿。有些用微信在聊天,有些在玩手游,有些在看影视剧,有些打电话等等。</p>
</body>
</html>

All CSS text properties.


#Properties                                                                                                                                                                                                                      ion ​ ​ ​ ​ ​ ​ ​ Set the text direction.

letter-spacing                                                                                                                                                  oration Add to text Modification


text-indent Indent the first line of text in the element

text-shadow Set the text shadow

text-transform Control the letters in the element

unicode-bidi Set or return whether the text is rewritten

vertical-align Set the vertical alignment of the element

white-space Set the processing method of white space in the element

word-spacing Set word spacing

Next Section

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} </style> </head> <body> <h1>好好学习</h1> <h2>原价¥30</h2> <h3>现价¥10</h3> </body> </html>
submitReset Code
ChapterCourseware