CSS文本樣式實(shí)際應(yīng)用中應(yīng)該如何操作?
大家好,我是IT共享者,人稱皮皮。這篇文章我們來(lái)講講CSS的文本樣式。
一、文本顏色Color
顏色屬性被用來(lái)設(shè)置文字的顏色。
顏色是通過(guò)CSS最經(jīng)常的指定:
十六進(jìn)制值 - 如"#FF0000"。
一個(gè)RGB值 - "RGB(255,0,0)"。
顏色的名稱 - 如"紅"。
一個(gè)網(wǎng)頁(yè)的文本顏色是指在主體內(nèi)的選擇:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>項(xiàng)目</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>
注:對(duì)于W3C標(biāo)準(zhǔn)的CSS:如果你定義了顏色屬性,你還必須定義背景色屬性。
二、屬性
1. text-align 文本的對(duì)齊方式
文本排列屬性是用來(lái)設(shè)置文本的水平對(duì)齊方式。
文本可居中或?qū)R到左或右,兩端對(duì)齊。
當(dāng)text-align設(shè)置為"justify",每一行被展開為寬度相等,左,右外邊距是對(duì)齊(如雜志和報(bào)紙)。
<!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">2015 年 3 月 14 號(hào)</p> <p class="main"> 從前有個(gè)書生,和未婚妻約好在某年某月某日結(jié)婚。到那一天,未婚妻卻嫁給了別人。書生受此打擊, 一病不起。 這時(shí),路過(guò)一游方僧人,從懷里摸出一面鏡子叫書生看。書生看到茫茫大海,一名遇害的女子一絲不掛地躺在海灘上。路過(guò)一人, 看一眼,搖搖頭,走了。又路過(guò)一人,將衣服脫下,給女尸蓋上,走了。再路過(guò)一人,過(guò)去,挖個(gè)坑,小心翼翼把尸體掩埋了。 僧人解釋道, 那具海灘上的女尸,就是你未婚妻的前世。你是第二個(gè)路過(guò)的人,曾給過(guò)他一件衣服。她今生和你相戀,只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人,是最后那個(gè)把她掩埋的人,那人就是他現(xiàn)在的丈夫。書生大悟,病愈。
</p> <p><b>注意:</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p> </body>
</html>
2. text-decoration文本修飾
text-decoration 屬性用來(lái)設(shè)置或刪除文本的裝飾。
從設(shè)計(jì)的角度看 text-decoration屬性主要是用來(lái)刪除鏈接的下劃線:
<!doctype html><html lang="en">
<head> <meta charset="UTF-8"> <title>Document</title> <style> .none {}
.del { text-decoration: none; }</style> </head>
<body> <p>原來(lái)的樣子</p> <a href="#" class="none">wwwwwwwwwwwwwwwwww</a> <p>去掉下劃線</p> <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a> </body>
</html>
也可以這樣裝飾文字:
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>項(xiàng)目</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>
注:不建議強(qiáng)調(diào)指出不是鏈接的文本,因?yàn)檫@常常混淆用戶。
3. text-transform文本轉(zhuǎn)換
text-transform文本轉(zhuǎn)換屬性是用來(lái)指定在一個(gè)文本中的大寫和小寫字母。
uppercase:轉(zhuǎn)換為全部大寫。
lowercase:轉(zhuǎn)換為全部小寫。
capitalize :每個(gè)單詞的首字母大寫。
<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=640, user-scalable=no"> <title>項(xiàng)目</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>

發(fā)表評(píng)論
請(qǐng)輸入評(píng)論內(nèi)容...
請(qǐng)輸入評(píng)論/評(píng)論長(zhǎng)度6~500個(gè)字
最新活動(dòng)更多
-
7月8日立即報(bào)名>> 【在線會(huì)議】英飛凌新一代智能照明方案賦能綠色建筑與工業(yè)互聯(lián)
-
7月22-29日立即報(bào)名>> 【線下論壇】第三屆安富利汽車生態(tài)圈峰會(huì)
-
7.30-8.1火熱報(bào)名中>> 全數(shù)會(huì)2025(第六屆)機(jī)器人及智能工廠展
-
7月31日免費(fèi)預(yù)約>> OFweek 2025具身智能機(jī)器人產(chǎn)業(yè)技術(shù)創(chuàng)新應(yīng)用論壇
-
免費(fèi)參會(huì)立即報(bào)名>> 7月30日- 8月1日 2025全數(shù)會(huì)工業(yè)芯片與傳感儀表展
-
即日-2025.8.1立即下載>> 《2024智能制造產(chǎn)業(yè)高端化、智能化、綠色化發(fā)展藍(lán)皮書》
推薦專題
- 1 AI 眼鏡讓百萬(wàn) APP「集體失業(yè)」?
- 2 豆包前負(fù)責(zé)人喬木出軌BP后續(xù):均被辭退
- 3 一文看懂視覺語(yǔ)言動(dòng)作模型(VLA)及其應(yīng)用
- 4 “支付+”時(shí)代,支付即生態(tài) | 2025中國(guó)跨境支付十大趨勢(shì)
- 5 中國(guó)最具實(shí)力AI公司TOP10
- 6 特斯拉Robotaxi上路,馬斯克端上畫了十年的餅
- 7 深圳跑出40億超級(jí)隱形冠軍:賣機(jī)器人年入6.1億,港股上市
- 8 張勇等人退出阿里合伙人
- 9 “AI六小虎”到了下一個(gè)賽點(diǎn)
- 10 AI的夏天:第四范式VS云從科技VS地平線機(jī)器人