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

2022-09-25 22:06:12 字數 3028 閱讀 2841

原文:

本教程主要介紹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

h1

用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字型屬性和文字屬性

字型屬性 font size px 字型的大小 font weight 400 700 bold,表示加粗 400 lighter,不加粗 font family 字型 font style 字型為斜體或者正常字型字型的復合語法 選擇器文字屬性 color 文字顏色 text algin under...

認識css和文字屬性

認識css 1.格式 style type text css 標籤名稱 style 2.注意點 1.style標籤必須寫在head標籤的開始標籤和結束標籤之間 也就是必須和title標籤是兄弟關係 2.style標籤中的type屬性其實可以不用寫,預設就是type text css 3.設定樣式時必...

CSS的字型屬性和文字屬性

字型屬性用於定義字型系列 大小 粗細 和文字樣式 如斜體 屬性表示 備註font size 字型大小一定要跟上單位px font family 字型盡量使用系統預設字型,一般情況下,如果多個單詞組成的字型,要加引號。各種字型必須用英文逗號隔開。font weight 字型粗細 加粗 700或者bol...