本 章 C S S 的 主 要 作 用
🎼 S的指令介紹了!本章有兩個介紹的主題,第一個部份介紹的是顏色與背景性質的CSS,其主要的作用在於設定元素的前景顏色、背景顏色與背景圖形等樣式設定的性質;而第二部會為您介紹的是用來控制擺放元素位置的CSS的指令。
顏色背景的C S S 指令
4CCCE顏色使用的相關說明預設值:視瀏覽器而定繼承性:有一般範例:SPAN { color : BLUE }同軸範例:
background-color 設定背景顏色支援:IE4、 NC4適用:所有元素可能值:設定顏色,請參考第一章顏色所使用的相關說明transparent將父元素(顏色或圖案)的背景透明化預設值:transparent繼承性:無一般範例: BODY { background-color : BLUE }同軸範例:background-image 設定背景圖形支援:IE4、NC4適用:所有元素可能值:< ;url>設定圖檔URL,請參考第一章URL表示的相關說明none不使用背景圖案預設值:transparent繼承性:無一般範例:BODY { background-image : URL("http://yourweb /path/file_name") }同軸範例:background-repeat 設定背景重複支援:IE4、NC4適用:所有元素可能值:repeat重複背景圖形填滿頁面repeat-x水平方向重複背景圖形repeat-y垂直方向重複背景圖形no-repeat不重複顯示背景圖形預設值:repeat繼承性:無一般範例: BODY { background-repeat : repeat- x }同軸範例:background-attachment 設定背景附著支援:IE4、NC4適用:所有元素可能值:scroll背景圖形隨著捲軸捲動fixed背景圖形隨著捲軸捲動(浮水印)預設值:scrool繼承性:無一般範例:BODY { background-attachment : fixed }同軸範例:background-position 設定背景位置支援:IE4、NC4適用:區塊元素 可能值: X% Y%圖形上X% Y%的點對準元素的X% Y %位置 X Y將圖形左上角置於元素左上角水平X垂直Y之處center背景圖形置於中央left背景圖形對左邊right背景圖形對右邊top背景圖形對頂部bottom背景圖形對底部預設值:0% 0%繼承性:無一般範例:BODY { background- position : 100% 50% }同軸範例:background 綜合設定背景性質支援:IE3、IE4、NC4可能適用:所有元素-color設定背景顏色background-image設定背景圖形background-repeat設定背景重複background-attachment設定背景附著background-position設定背景位置預設值:無繼承性:無一般範例:BODY { BLUE url (image/gif) repeat-x fixed center }同軸範例:
float 設定浮動性質(多用於文繞圖的情形)支援:IE4、NC4適用:區塊元素或圖形可能值:left元素靠左,文字圍繞其右right元素靠右,文字圍繞其左none預設的方法顯示預設值:none繼承性:無一般範例:DIV { float : right }同軸範例:
clear 設定清除性質(設定是否允許浮動元素之存在)支援:IE4適用:區塊元素或圖形可能值:both若兩邊有浮動元素,則該元素移至浮動元素下方left若左邊有浮動元素,則該元素移至浮動元素下方right若右邊有浮動元素,則元素移至浮動元素下方none以預設的方法顯示預設值:none繼承性:無一般範例:DIV { clear : right }同軸範例:
width設定寬度支援:IE4、NC4適用:區塊元素或圖形可能值:
長度單位,請參考第一章基本單位的相關說明百分比,以父元素寬度為基準auto以固定比例自動變化大小預設值:auto繼承:無一般範例:DIV { width : 300pt }同軸範例:height 設定高度支援:IE4、NC4適用:區塊元素或圖形可能值:
長度單位,請參考第一章基本單位的相關說明百分比,以父元素寬度為基準auto以固定比例自動變化大小預設值:auto繼承性:無一般範例:DIV { height : 300pt }同軸範例:position 設定位置支援:IE4、NC4適用:區塊元素可能值:absolute以父元素為基準,擺設在特定位置上relative相鄰元素為基準,擺設在特定位置上static預設位置,以該元素於原始碼中位置而定預設值:absolute繼承:無一般範例:DIV { position : static }同軸範例:
top 設定頂端位置支援:IE4、NC4適用:區塊元素可能值:
長度單位,請參考第一章基本單位的相關說明百分比,以父元素寬度為基準auto以正常方式顯示預設值:auto繼承性:無一般範例:DIV { top : 30pt }同軸範例:left 設定左端位置支援:IE4、NC4適用:區塊元素可能值:
長度單位,請參考第一章基本單位的相關說明百分比,以父元素寬度為基準auto以正常方式顯示預設值:auto繼承性:無一般範例:DIV { left : 30pt }同軸範例:clip 設定裁切(設定某區域形狀及大小,區域外通透)支援:IE4、NC4適用:區塊元素元素可能值:rect(top,right,bottom,left)設定矩形之上右下左長度,會自動比對對邊長度一般寫法為rect(0,長度,長度,0)不可以寫成rect(0 ,0,長度,長度)四個數值皆可"auto"取代auto以正常方式顯示預設值:auto繼承性:無一般範例:DIV { clip : rect(0,100px,50px,0) }同軸範例:
overflow 設定溢位處理(控制當元素內容超過該元素大小時的顯示方式)支援:IE4適用:區塊元素 可能值: visible元素將不會依所設訂大小顯示,而能看見所有內容hidden超過元素所設訂大小之部將被隱藏不予顯示scroll如有必要出現捲軸可讓使用者看到全部的內容auto以預設的方式顯示預設值:auto繼承:無一般範例:DIV { overflow : scroll }同軸範例:
visibility 設定可視度支援:IE4、NC4適用:所有元素可能值:visible設定此元素顯示hidden設定此元素不顯示,但仍佔據空間inherit以父元素視覺度決定預設值:inherit繼承性:無一般範例:DIV { visibility : hidden }同軸範例:
z-index 設定Z軸參數(三度空間)支援:IE4、NC4適用:區塊元素可能值:
十進位數值,數值大的元素元素會出現在數值小的元素的上方auto當元素位置重複時,原始碼中寫在後面元素會出現在寫在前面元素的上方預設值:auto繼承性:無一般範例:DIV { z-index : 3 }同軸範例: 以上就是第四章顏色背景的CSS的內容,更多相關內容請關注PHP中文網(www.php.cn)!