CSS Text(文本)屬性可定義文本的外觀,比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等。
用的最多的就是文本顏色,color屬性用於定義文本的顏色。語法如下:
div { span>
color:red;
}
顏色的表現形式有:
預定義的顏色值: red、green、pink等
十六進制: #FF0000、#FF6600、#29D794等
RGB代碼: rgb (255,0,0)或rgb(100%,0%,0%)等
看下效果:
對應的代碼為:
<!< /span>DOCTYPE html>
< span>html lang="en">
< span>head>
< span>meta charset="UTF-8">
< span>meta http-equiv="X-UA-Compatible" content="IE= edge">
< span>meta name="viewport" content="width=device-width, initial- scale=1.0">
< span>title>Document</title>
< span>style>
div {
color: blue;
}
</< /span>style>
</< /span>head>
< span>body>
< span>div>人保說的是還有7次洗車,5次還是3次道路救援啥的</div>
</< /span>body>
</< /span>html>
所有div對應的都為藍色。
使用第二種方法,16進制顏色來表示,先看下效果:
對應代碼為:
<!< /span>DOCTYPE html>
< span>html lang="en">
< span>head>
< span>meta charset="UTF-8">
< span>meta http-equiv="X-UA-Compatible" content="IE= edge">
< span>meta name="viewport" content="width=device-width, initial- scale=1.0">
< span>title>Document</title>
< span>style>
/* div {
color: blue;
} */< /span>
div {
color: #FF0000;
}
</< /span>style>
</< /span>head>
< span>body>
< span>div>人保說的是還有7次洗車,5次還是3次道路救援啥的</div>
</< /span>body>
</< /span>html>
最後使用第三種方法,看下效果:
對應的代碼為:
<!< /span>DOCTYPE html>
< span>html lang="en">
< span>head>
< span>meta charset="UTF-8">
< span>meta http-equiv="X-UA-Compatible" content="IE= edge">
< span>meta name="viewport" content="width=device-width, initial- scale=1.0">
< span>title>Document</title>
< span>style>
/* div {
color: blue;
} */< /span>
/* div {
color: #FF0000 ;
} */< /span>
div {
color: rgb(255, 193, 100);
}
</< /span>style>
</< /span>head>
< span>body>
< span>div>人保說的是還有7次洗車,5次還是3次道路救援啥的</div>
</< /span>body>
</< /span>html>
rgb竟然是red 、green、blue,也是今天才知道的。
今天就先到這裡了,中午休息~
文章為用戶上傳,僅供非商業瀏覽。發布者:Lomu,轉轉請註明出處: https://www.daogebangong.com/zh-Hant/articles/detail/Test%20and%20development%20full%20stackHTML%2012%20css%20font%20color%20attribute.html
评论列表(196条)
测试