1. 首頁 > 生活 > >

html文本顏色如何設置 html給字體設置顏色

小知識



文章插圖
html文本顏色如何設置 html給字體設置顏色

文章插圖
一、CSS的起源
當web開發還是一項新技術的時候，無論定義網頁內容還是定義網頁樣式，都是使用的HTML語言，HTML的內容和樣式沒有區分開，如古老的HTML樣式：
<H3 COLOR=RED><CENTER>樣式</CENTER></H3>其中color表示顏色，center讓文字居中，不是目前規范的書寫形式，而且舊的HTML標簽都是大寫的，web開發人員還需要來回切換大小寫，所以很多人認識到了這種開發方式并不理想 。
Web開發人員想開發一種新的語言，把表示樣式的代碼從HTML中分離出來，并且創建一種規則來定義HTML標簽要顯示成什么樣子，這門語言叫做CSS，CSS是用來描述HTML標簽應該如何顯示的一個代碼 。如：
<h3>樣式</h3> 用CSS可以讓h3標簽顯示成綠色，讓h3字體在大一點，讓h3有一個下劃線，可以統一字體的顯示樣式等 。
CSS樣式
二、CSS的工作方式
CSS的全稱叫做 Cascading Style Sheets 級聯樣式表，CSS的工作方式依賴于”選擇器”可以選擇HTML標簽，并且修改這些標簽的樣子 。
選擇器的類型有：
1、類型選擇器：不帶尖括號的標簽名，最簡單的選擇器
類型選擇器
定義了一個P標簽，如果想在CSS中選擇這個標簽，首先寫上字母P，然后選擇要定的屬性如text-decoration，并設置這個屬性的屬性值為underline下劃線，在瀏覽器中這個段落就會顯示下劃線 。
類型選擇器
使用選擇器的時候我們必須要遵守選擇器的特殊語法規則：
選擇器名字后面是一個開始的大括號，屬性和屬性值中間是冒號，屬性值后面是分號，這里面任何一部分都不能丟掉，否則CSS無法正常工作，并且要注意標點符號全部是英文半角的，最后在所有的屬性列表后面是一個結束的大括號，大括號的作用就是可以在里面寫很多屬性，如圖：
類型選擇器
顯示結果為帶下劃線的紅色字體段落：
類型選擇器
在CSS中使用標簽名選擇標簽的時候，類型選擇器會作用在所有同名標簽中 。所以這里只定義額一CSS樣式，它會作用在所有的P標簽中 。
2、派生選擇器
可以讓CSS標簽作用在很小的范圍內，如下圖，只讓CSS作用在li標簽中，所以選擇ul標簽中的li標簽即可 。
派生選擇器
3、偽類選擇器
1）在原有選擇器的基礎上添加一個限定條件，當某種情況發生時在選擇這個標簽 。如下圖，首先定義個a的類型選擇器，讓頁面中所有的超鏈接下劃線都不顯示，然后通過派生選擇器控制鼠標的動作，當鼠標移上去的時候，超鏈接文字顯示下劃線并顯示為深藍色 。
偽類選擇器
偽類選擇器
這條規則只有當鼠標放到超鏈接上停留的時候才會被應用，因此當某種情況發生時候偽類選擇器才會被應用在某個標簽上 。
a的偽類選擇器一共有四種：
:link 未被訪問的鏈接的樣式；和a標簽相同時，并且同時存在的時候會覆蓋a標簽
:hover 鼠標移動到超鏈接上的時候
:active 選擇器用于活動鏈接，被選定的超鏈接 。
:visited 已被訪問的超鏈接，
注釋：在 CSS 定義中，:hover 必須位于 :link 和 :visited 之后（如果存在的話），這樣樣式才能生效 。
2）使用偽類選擇器縮小選擇范圍
:first-child 縮小標簽的選擇范圍，如圖：
如果一個標簽后面還接了一個子標簽，在子標簽后面冒號：first-child，說明這里只選擇了子標簽中的第一個標簽，可以看到瀏覽器中有序列表中的第一個li子元素”北京”顏色為紫色 。
偽類選擇器
偽類選擇器
CSS樣式
三、CSS樣式表放在什么地方
【html文本顏色如何設置 html給字體設置顏色】在head標簽中添加style子標簽，在style標簽里寫一個屬性type=”text/css”，這樣瀏覽器就知道當頁面顯示出來的時候，需要把style中的CSS代碼應用到HTML中，因此可以在style標簽中創建CSS規則 。