網頁設計 經典技術CSS語法手冊 五 顏色和背景屬性

2022-05-26 09:24:02 字數 1421 閱讀 1654

css語法手冊(五)顏色和背景屬性

1、color

功能:設定前景或元素的顏色。

數值:使用顏色關鍵字或rgb值。

例子:文字顏色(關鍵字)

文字顏色(#rrggbb)

文字顏色[rgb(rr,gg,bb)]

文字顏色[rgb(r%,g%,b%)]

2、background-color

功能:設定頁面或頁面元素的背景顏色。

數值:顏色 - 可用顏色名或rgb值

transparent - 透明,使頁面背景為預設背景。

例子:背景顏色

3、background-image

功能:定義背景圖形。

數值:none - 不用圖形作背景

url - 提供圖形檔案的url位址

說明:也可以包括background-color屬性以便在找不到圖形時代用

例子: 圖形背景

4、background-repeat

功能:控制圖形背景是否重複排列。

數值:repeat - 垂直和水平重複,預設值

repeat-x - 水平重複

repeat-y - 垂直重複

no-repeat - 不重複

說明:這個屬性和 background-image 和 background-position 屬性一起使用。

例子: 水平重複排列

5、background-attachment

功能:指定元素的背景是隨元素一起滾動還是固定在頁面某個位置上。

數值:scroll - 隨元素一起滾動

fixed - 固定

說明:預設值是 scroll,這個屬性和 background-image 屬性一起使用。

6、background-position

功能:用於在空間中定位元素背景

數值:長度 - 相對或絕對單位設定元素框邊緣的起點,並給出單位下的座標。

百分比 - 用百分比表示框邊緣上瀏覽器開始放圖的位置。可以重複這個值也提供垂直和水平起點

垂直位置 - 設定豎直方向的起點,關鍵字為 top, center, bottom

水平位置 - 設定水平方向的起點,關鍵字 left, center, right

例如:top left, left top和0% 0% 都表示圖形左上角從元素框左上角開始

例子:body

這個語句將 body 基本類設定為背景圖形在頁面上居中顯示。

7、background

功能:簡寫屬性,可以設定所有背景屬性。

數值:background-attachment

background-color

background-image

background-position

background-repeat

有關上述數值的細節,見各個屬性部分。

網頁設計 經典技術網頁排版CSS教學 二

的應用方法 接下來要為您介紹的是將所建立的樣式表應用在網頁上的四種基本方法。一 使用style屬性 將style屬性直接加在個別的元件標籤裡。元件 標籤 style 性質 屬性 1 設定值1 性質 屬性 2 設定值2 例如 這種用法的優點是可靈巧應用樣式於各標籤中,但是缺點則是沒有整篇檔案的 統一性...

網頁設計師從入門到精通CSS選擇符詳解

一 型別選擇符 什麼是型別選擇符?指以網頁中已有的標籤型別作為名稱的行徑符。body是網頁中的乙個標籤型別,div,p,span都是。如下 body div p span 二 群組選擇符 對於xhmtl物件,可以對一組同時進行了相同的樣式指派。使用逗號對選擇符進行了分隔,這樣書寫的優點在於同樣的樣式...

資訊科技「網頁超連結」教學設計

一 教材分析 本次教學設計是選自佛山市 資訊科技 編委會編寫的 資訊科技 初中版第二冊第三單元第六課 網頁超連結 教材目的是讓學生熟悉超連結的功能,能熟練操作文字超連結的方法,初步掌握 超連結的方法,能利用 超連結 的功能實現簡單的互動,內容量比較多,但是希望通過學生自主 學習,讓基礎好的學生能全面...