DIV CSS 字體顏色\css color知識實例講解
在DIV+CSS網頁中控制字體顏色的CSS單詞為color:+顏色值。這裡ThinkCSS詳細為大家介紹CSS 字體顏色color的運用(div color)CSS顏色。
- 目錄
-
- CSS字體顏色color基礎
- CSS字體顏色控制實例
- CSS超鏈接的字體顏色控制
1、CSS字體顏色color基礎 - TOP
在HTML控制字體顏色color="#0000FF"，實例：
<font color="#0000FF">我的顏色為藍色#0000FF</font>
示圖：
說明：根據以上實例可知道原始的html字體顏色控制使用<font color="#0000FF"></font>,而color為顏色、#0000FF則是對於顏色編碼值
在CSS 字體顏色(CSS color)控制，則為color:+顏色編碼值如：color:#F00;
2、CSS字體顏色控制實例 - TOP
CSS代碼：.thinkcss{ color:#F00;}
HTML代碼：<div class="thinkcss">我的顏色 CSS控制為紅色#F00</div>
示圖：
說明：根據以上示例說明通過CSS控制字體顏色代碼為color:+顏色編碼值
此實例完整的DIV+CSS代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>ThinkCSS對CSS顏色實例演示</title>
<style>
.thinkcss{ color:#F00;}
/* #F00為紅色 www.thinkcss.com示例 */
</style>
</head>
<body>
<font color="#0000FF">我的顏色為藍色#0000FF</font>
<br /><br />
<div class="thinkcss">我的顏色 CSS控制為紅色#F00</div>
</body>
</html>
以上為完整的CSS 字體顏色實例，包括了原始的HTML控制字體顏色和DIV CSS控制字體顏色。
3、CSS超鏈接的字體顏色控制 - TOP
首先我們認識下CSS 超鏈接基礎
a:active是超級鏈接的初始狀態
a:hover是把鼠標放上去時的狀況
a:link是鼠標點擊時
a:visited是訪問過後的情況
這幾個CSS樣式一般情況下是默認的。
那CSS控制超鏈接的字體顏色CSS color是怎麼實現的呢？
很簡單和上面第2點的實例相同，唯一區別在於設置他們的對象為超鏈接A標簽CSS樣式。
實例：
Css代碼：
a{ color:#00F}/* 帶超鏈接字體為藍色 */
a:hover{ color:#F00;}/* 鼠標放到超鏈接字上字體顏色為紅色 */
對應html內容
我是<a href="http://www.thinkcss.com">DIV CSS教程</a>實例關於超鏈接字體顏色
演示結果是“DIV CSS教程”這個被超鏈接的文本鼠標經過時候字體顏色為紅色，鼠標未經過或鼠標未放到此超鏈接文字內容上時字體顏色為藍色。
此完整DIV CSS代碼（包括1、2的實例代碼）：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>ThinkCSS對CSS顏色實例演示</title>
<style>
.thinkcss{ color:#F00;}
/* #F00為紅色 www.thinkcss.com示例 */
a{ color:#00F}/* 帶超鏈接字體為藍色 */
a:hover{ color:#F00;}/* 鼠標放到超鏈接字上字體顏色為紅色 */
</style>
</head>
<body>
<font color="#0000FF">我的顏色為藍色#0000FF</font>
<br /><br />
<div class="thinkcss">我的顏色 CSS控制為紅色#F00</div>
<br />
<br />
我是<a href="http://www.thinkcss.com">DIV CSS教程</a>實例關於超鏈接字體顏色
</body>
</html>
這裡就不再演示截圖，大家可以拷貝以上代碼，自己親自實踐實踐掌握DIV CSS 字體顏色CSS color知識點。
更詳細CSS 超鏈接知識可進入css鏈接知識文章教程：http://www.thinkcss.com/shili/57.shtml
相關推薦閱讀：
div字體顏色