Css可以設置網頁的樣式,比如字體大小顏色等等。今天小編就來分享一下設置HTML網頁字體類型大小和顏色方法。
一、如圖，先在HTML網頁編寫一些測試的文字。
二、然后在網頁預覽文字初始的字體效果，顏色是黑色，大小比較小。
三、因為測試文字是在body標簽內的，所以我們要對body標簽設置css屬性就可以了。
四、如圖，我們可以用font-family來設置HTML網頁字體的類型，比如這里我設置為“華文楷體”。
五、再去看文字的變化效果，文字變成了華文楷體類型，比原先的好看多了。
六、然后color可以改變文字的顏色，比如我就設置它為red，意思表示的是紅顏色。
七、這樣，文字的顏色就會由黑色變成紅色了哦。
八、而font-size可以設置文字的大小，如圖所示，我設置成38px，表示38像素大小。
九、最后來看看，文字變得比原來大了很多。這樣我們就實現了設置HTML文字的類型，顏色及大小的目的。
在網頁設計中，一般常用的顏色代碼有兩種：顏色名、顏色值。在 html4.0標準中，只有16種顏色名被支持如red、yellow等，而顏色值是由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB），一般用于css中。工具原料：文本編輯器、瀏覽器。顏色名的用法：1、直接在html中使用color屬性即可使用，如下代碼This is some text!顏色值的用法1、直接在css代碼中使用color屬性即可，代碼如下：
This is some text!
2、運行效果如下：一、CSS選擇器有哪些
CSS中的選擇器很多，比如：ID選擇器，類選擇器，通配符選擇器，偽類選擇器等等，接下來主要介紹常用的幾個。
1.標簽選擇器
語法：標簽名{}，eg：h1{}//為所有的h1元素設置樣式。
2.ID選擇器
語法：#id名{}//id值唯一不能重復,eg:#top{}//為id為top的元素設置樣式。
3.類選擇器
語法：.class{},eg：.box{}//為所有的class值為box的元素設置樣式。
4.組選擇器
語法：選擇器1，選擇器2，選擇器N{},eg:#box1,.box2,p{}//為id為box1，class為box2和p的元素共同設置樣式。
5、通配符選擇器
語法：*{}，eg：*{font-size：16px}//將整個頁面字體大小設為16px。
6.后代選擇器
語法：選擇器1選擇器2{}，eg：p.aa{}//選中指定祖先元素p的指定后代.aa。
7.子元素選擇器
語法：父元素>子元素{},eg：p>.box{}//選中父元素p的指定子元素.box。注意與后代元素選擇器的區別
8.偽類選擇器
偽類可以用來表示一些特殊的狀態,如：
：link-未訪問過的超鏈接。
：visited-已訪問過的超鏈接。
：hover-鼠標經過的元素。
：active-正在點擊的元素。
eg：a:hover{color:red}//鼠標經過a標簽時，顏色變為紅色。
二、CSS選擇器的優先級順序
當同一屬性的不同值都作用到了同一個元素時，如果定義的屬性之間有沖突，那么應該用誰的值的，這個時候就涉及到CSS的優先級順序了。
1.在屬性后面使用!important會覆蓋頁面內任何位置定義的元素樣式。
2.作為style屬性寫在元素內的內部樣式
3.id選擇器
4.類選擇器
5.標簽選擇器
6.通配符選擇器
7.瀏覽器自定義或繼承的
基本選擇器
1.標簽選擇器：直接用元素的標簽來進行選擇
span { // 直接選擇span標簽
size:16px;
}
1
2
3
1
2
3
2.ID選擇器：通過設置id名字，進行精確的選擇，用#來定義
# div1 { //通過id名字來進行選擇
color:red;
}
<div id="div1">1</div>
1
2
3
4
1
2
3
4
3.類選擇器:通過類名來進行選擇，選擇范圍比id選擇器大，用’.'來定義
.div1 { //所有類名為div1的都被選擇了
color:red;
}
<div id="div1">1</div>
<div id="div1">1</div>
<div id="div1">1</div>
1
2
3
4
5
6
1
2
3
4
5
6
4.通配符選擇器：范圍更大，作用于所有標簽，用*來定義
不建議使用，對頁面加載負擔大
高級選擇器
1.后代選擇器：定義用空格隔開
div span { //選擇的是div標簽下的span標簽，當然后代顧名思義可以不止隔一代，可以隔多代進行選擇
color：red；
}
<div><span>1</span></div>
1
2
3
4
1
2
3
4
2.交集選擇器：與后代選擇器定義的不同是，沒有空格隔開，兩個元素緊挨著
span#a1 { //選擇的是兩個條件1.既是span標簽的 2.id名是a1的元素，兩個條件缺一不可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
3.并集選擇器：定義用逗號隔開
span，#a1 { //選擇的是1.是span標簽的 2.id名是a1的元素，兩個條件滿足一個即可
color：red；
}
<span id=“a1”>1</span>
<span >1</span>
1
2
3
4
5
1
2
3
4
5
4.偽類選擇器：
1.靜態偽類：點擊連接之前（link），點擊連接之后(visited)這樣的
2.動態偽類：鼠標移入（hover），點擊之后（focus）