css對於顏色和文字屬性的控制

原文：

本教程主要介紹css的基礎知識,將逐個講解css的各個屬www.cppcns.com性,過程可能比較枯燥,但會盡力多舉例說明.

css語法

例:用web developer的css檢視功能檢視jorux.com首頁的css檔案,可以看到以下**:

body

是不是有點複雜,現在我們沒有必要細究以上**,先簡化以上**為:

body

這便是基本css語法結構:

引用css:css檔案的作用就在於控制html檔案的表現,而從html檔案中引用css檔案的方法大致有三種:外聯(external),嵌入(in-line)和內聯(internal),這裡限於篇幅以及應用頻度,只介紹外聯方法.

例:同樣打程式設計客棧開jorux.com的主頁,點選firefox工具欄–>檢視–>頁面源**,在可以看到以下**:

eltvggtuhmreen" />

herf後的位址即為本**css的位址,這裡應用的位址為絕對位址,而在本地除錯時一般用相對位址,將在後文說明.建立本地除錯的檔案結構:如下圖所示建立名為local的資料夾,以及其子資料夾style和image,分別用於存放css檔案和檔案,在local資料夾的根目錄下建立html檔案index.htm,在style資料夾的根目錄下建立css檔案style.css:

用文字編輯器開啟index.htm,寫入以下**:

my first homepage

程式設計客棧; _fcks**edurl=""style/style.css"" media="screen" />

程式設計客棧gt;

然後開啟style.css,輸入以下**:

body

用firefox開啟index.htm,如果你看到example1的效果,那麼恭喜你,乙個基本的本地除錯環境建立了.

下面開始逐個介紹css屬性

顏色(color)

css能夠控制的顏色主要包括文字顏色,邊框顏色等,對於背景顏色和邊框顏色會在以後說明,在這主要解釋文字顏色的表現.

在如上所示style.css的選擇器h1中,文字顏色的屬性是用color表示的,h1的顏色的屬性值為#ff0000(乙個#加上十六進製制值),簡寫為#f00. 我們甚至可以用英文單詞red表示屬性值: color: red; 效果是一樣的. 顏色的其他屬性值還有rgb值,在css中不太常用,這裡就不再敘述.

例:檢視jorux.com首頁的css檔案,可以看到以下**:

a a:hover

在選擇器a中,文字顏色的屬性值為#545454, 即存在超級鏈結的文字顏色為#545454; 而a:hover為偽類選擇器(表現依賴於瀏覽器的狀態), 它的屬性值為#919191, 即滑鼠在超級鏈結上懸停時文字的顏色. 你可以用colorzilla驗證本站首頁的標題文字顏色.

文字(text)

css控制的文字屬性主要包括以下四個: text-indent, text-align, text-decoration, text-transform;

1. text-align:

屬性text-align指文字的對齊方式,其有向左,向右,居中對齊以及自動適應四種對齊方式:

text-align: left;

text-align: right;

text-align: center;

text-align: justify;

例:檢視jorux.com首頁的css檔案,可以看到以下**:

body

在選擇器body中宣告屬性text-align為left,可以避免在其他需要文字左對齊的選擇器中重複宣告.

2. text-indent:

屬性text-indent指段落首行的縮排, 既然是段落的屬性,一般用於選擇器p(段落)中,**如下:

p 本站的段落縮排為0, 所以在css檔案中能找到text-indent: 0;,不宣告即此屬性,即預設為0.

3. text-decoration:

屬性text-decoration為文字修飾, 其包括下劃線, 上劃線, 中劃線和無四種修飾方式, **如下:

text-decoration: none;

text-decoration: underline;

text-decoration: overline;

text-decoration: line-through;

在這就不例舉具體的下劃線, 上劃線, 中劃線的例子, 相信大家很容易想像的到它的效果. 需要強調的是屬性值none, 如果你檢視本站css的話, 可以看到所有屬性text-decoration的值均為none. 這是因為目前的瀏覽器對於選擇器a(即超級鏈結), 預設text-decoration屬性值為underline. 這就會使很多你不希望出現的下劃線大量湧現, 而且由於無法約束下劃線的粗細, 以及瀏覽器之間的差異, 甚至會出現各種粗細, 不同瀏覽器顯示不同的下劃線.

例:你可以看到本站文章內的超級鏈結的文字修飾是點劃線, 這個效果不是屬性text-decoration所能實現的, 其需要下邊框屬性的支援, 將會在邊框屬性時說明. 實現方法如下(請檢視本站css**):

1.在全域性宣告中將選擇器a的text-decoration屬性值設為none, **如下:

a 2.為使文章正文部分的超級鏈結顯示藍色點劃線的效果,**如下(讀者目前只需了解,目前暫不說明):

.post_body a

4. text-transform:

這個屬性可能大家不太熟悉, 因為這個屬性是只為英文服務的, 用於轉換字母大小寫之用. 其包括首字母大寫, 大寫, 小寫和無變化四種屬性值, **如下:

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

例:如果你再本站留過言, 而且用的是英文名的話, 你就會發現無論你輸入的姓名是有沒有將首字母大寫, 顯示評論者姓名時首字母均被轉化為大寫, 檢視本站css**如下:

.comment_author

本文標題: css對於顏色和文字屬性的控制

本文位址:

css對於顏色和文字屬性的控制

CSS字型屬性和文字屬性

認識css和文字屬性

CSS的字型屬性和文字屬性

css對於顏色和文字屬性的控制

CSS字型屬性和文字屬性

認識css和文字屬性

CSS的字型屬性和文字屬性

相關推薦