求助html怎么單獨(dú)更改某個(gè)字體顏色？

時(shí)間：2024-01-14 07:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2024-01-14 07:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

求助html怎么單獨(dú)更改某個(gè)字體顏色？：根據(jù)上面問(wèn)題的闡述主要有兩點(diǎn)：

1. 在哪兒改變字體的顏色（內(nèi)容的樣式）。
2. 怎么改變字體的樣式（內(nèi)容的樣式）。

（一）理解html和css的關(guān)系和區(qū)別

回答以上兩點(diǎn)問(wèn)題之前很有必要對(duì)html和css的相關(guān)知識(shí)點(diǎn)做一些九點(diǎn)多簡(jiǎn)單的闡述和說(shuō)明，html和css都是前端非?；A(chǔ)的知識(shí)點(diǎn)，兩者相互配合能夠做出很多非常好的呈現(xiàn)效果。html是超文本標(biāo)記語(yǔ)言，主要就是一些標(biāo)簽，比如h1到h6這些標(biāo)題啊標(biāo)簽，段落標(biāo)簽p,列表標(biāo)簽ul li,表格標(biāo)簽th和td等等。這些標(biāo)簽的作用主要就是存放內(nèi)容。內(nèi)容必須要放在標(biāo)簽中才能夠通過(guò)瀏覽器渲染出來(lái)。這個(gè)時(shí)候在瀏覽器中渲染出來(lái)寫樣式效果都是html標(biāo)簽中默認(rèn)的效果（通常都是無(wú)樣式效果的）。這個(gè)時(shí)候頁(yè)面的內(nèi)容就像一個(gè)剛出生的小孩，只有具體的基本肢體骨架和身體結(jié)構(gòu)，赤裸裸的展示在世人眼前，沒(méi)有任何的修飾效果。

這個(gè)時(shí)候要想讓這個(gè)孩子看上去美觀得體一些，那么父母就要給他買一些漂亮的衣物穿上，讓他以不同的，非常得體、非常漂亮的的效果呈現(xiàn)在世人眼前。而在前端的頁(yè)面布局中，css就是起到這樣一個(gè)效果，給由html標(biāo)簽搭建起來(lái)的網(wǎng)頁(yè)骨架，穿上各種漂亮的衣服。漂漂亮亮的呈現(xiàn)給屏幕前的用戶瀏覽使用。

由此可見(jiàn)，要改變本題中文字的顏色，也就是改變html標(biāo)簽中的內(nèi)容的樣式效果，就需要使用到css層疊樣式表。根據(jù)以上對(duì)html和css關(guān)系的闡述,應(yīng)該明白，css的作用對(duì)象時(shí)html標(biāo)簽。就像衣服是穿在人身上的，如果這個(gè)人不存在了，那么衣服所作用的對(duì)象也就不存在了，那么衣服也就沒(méi)有存在的必要了。同理，如果有個(gè)人不穿衣服，赤裸的走在大街上，也是很不雅的，不得體的。所以要做出一個(gè)非常完美的網(wǎng)頁(yè)效果，html和css就是相輔相成，缺一不可的了。

（二）html標(biāo)簽和css怎么關(guān)聯(lián)呢（在哪兒改變內(nèi)容樣式以及怎么改變內(nèi)容樣式）。

都說(shuō)了html和css相輔相成，那么他們之間怎么關(guān)聯(lián)呢，又怎么個(gè)html這個(gè)身體骨架穿上css這件華麗的外衣呢。要想給html中加入css樣式，就要再html中引入css的樣式。主要有三種引入樣式的方式，分別是：內(nèi)聯(lián)樣式、內(nèi)部樣式和外部樣式。

1、內(nèi)聯(lián)樣式

這種方式主要是在html標(biāo)簽的內(nèi)部加入css的樣式，但是需要借助于style=“”來(lái)實(shí)現(xiàn)，雙引號(hào)中寫css的樣式屬性。比如，講一個(gè)div標(biāo)簽中的文字顏色改成紅色，代碼如下：

<div style="color:red ;">大獎(jiǎng)東去浪淘盡</div>當(dāng)有多個(gè)樣式屬性同時(shí)使用的時(shí)候，每個(gè)樣式屬性之間用英文狀態(tài)下的分號(hào)隔開(kāi)，否則不會(huì)有效果。比如：

<div style="color:red ; width: 200px; height: 50px; background:purple">大獎(jiǎng)東去浪淘盡</div>這種方式非常的簡(jiǎn)單，不需要另外的選擇器就可以實(shí)現(xiàn)，但是在實(shí)際的開(kāi)發(fā)中不建議使用這種方式。因?yàn)楫?dāng)代碼內(nèi)容很多的時(shí)候，整個(gè)頁(yè)面會(huì)非常的凌亂，css代碼和html代碼的耦合性比較的大。不易于后期代碼的維護(hù)。

2、內(nèi)部樣式

這種樣式是在html頁(yè)面內(nèi)，由一對(duì)style標(biāo)簽來(lái)實(shí)現(xiàn)，所有的css樣式代碼都是放在style標(biāo)簽里面的，但是要借助于選擇器來(lái)實(shí)現(xiàn)。比如：要改變ul li中的樣式。如下：

html代碼

<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>css代碼

<style> li { list-style: none; width: 20px; height: 100px; border: solid 1px blue; } </style>這里對(duì)li設(shè)置的所有樣式都是放在<style></style>這對(duì)標(biāo)簽里面的。在一定程度上降低了與html標(biāo)簽的耦合性。代碼量不是很大的時(shí)候可以使用這種方式。在設(shè)置樣式的時(shí)候，li就是一個(gè)選擇器（元素選擇器），在前端的技術(shù)中，選擇器有很多種，后面會(huì)詳細(xì)分析。

3、外部樣式

這種引用CSS樣式的方式是最常見(jiàn)的了，也是比較推薦大家去使用的，最大限度的降低了css代碼和html代碼之間的耦合度。后期維護(hù)非常的方面。是將css的樣式代碼單獨(dú)放在一個(gè)css文件中，然后在html文件中使用<link rel="stylesheet" href="">引入。href=""中放的是css文件的路徑。比如：在html的同一文件夾下建一個(gè)css文件，并將css文件映入到html文件中。

而所有的樣式屬性就是放在這個(gè)css文件中的

html中的代碼

結(jié)果顯示