CSS應用基礎教程 4 顏色背景

2021-04-17 07:14:35 字數 4131 閱讀 9020

主 要 作 用

在前面的章節介紹完了宣告與應用的方法及 一些特性之後,從這章開始,便要正式進入

css的指令介紹了!本章有兩個介紹的主 題,第乙個部份介紹的是顏色與背景性質的

css,其主要的作用在於設定元素的前景 顏色、背景顏色與背景圖形等樣式設定的性質;而第二部份為您介紹的是用於控制擺放 元素位置的

css的指令。

顏 色 背 景 的 c s s 指 令

color 設定前景顏色

支 持:

ie3、ie4、nc4

適 用:

所有元素

可能值:

預設值:

視瀏覽器而定

繼承性:

有一般範例:span

同軸範例:

background-color 設定背景顏色

支 持:

ie4、nc4

適 用:

所有元素

可能值:

預設值:

transparent

繼承性:

無一般範例:body

同軸範例:

background-image 設定背景圖形

支 持:

ie4、nc4

適 用:

所有元素

可能值:

預設值:

transparent

繼承性:

無一般範例:

body

同軸範例:

background-repeat 設定背景重複

支 持:

ie4、nc4

適 用:

所有元素

可能值: repeat 重複背景圖形填滿頁面 repeat-x 水平方向重複背景圖形 repeat-y 垂直方向重複背景圖形 no-repeat 不重複顯示背景圖形

預設值:

repeat

繼承性:

無一般範例:body

同軸範例:

background-attachment 設定背景附著

支 持:

ie4、nc4

適 用:

所有元素

可能值: scroll 背景圖形隨著卷軸捲動 fixed 背景圖形隨著卷軸捲動(浮水印)

預設值:

scrool

繼承性:

無一般範例:body

同軸範例:

background-position 設定背景位置

支 持:

ie4、nc4

適 用:

區塊元素

可能值:

x% y% 圖形上x% y%的點對準元素的x% y%位置 x y 將圖形左上角置於元素左上角水平 x垂直 y之處 center 背景圖形置於** left 背景圖形對 左邊 right 背景圖形對 右邊 top 背景圖形對 頂部 bottom 背景圖形對 底部

預設值:

0% 0%

繼承性:

無一般範例:body

同軸範例:

background 綜合設定背景性質

支 持:

ie3、ie4、nc4

適 用:

所有元素

可能值: background-color 設定背景顏色 background-image 設定背景圖形 background-repeat 設定背景重複 background-attachment 設定背景附著 background-position 設定背景位置

預設值:

無繼承性:

無一般範例:

body

同軸範例:

位 置 擺 放 的 c s s 指 令

float 設定浮動性質(多用於文繞圖的情形)

支 持:

ie4、nc4

適 用:

區塊元素或圖形

可能值: left 元素靠左,文字圍繞其右 right 元素靠右,文字圍繞其左 none 以預設的方法顯示

預設值:

none

繼承性:

無一般範例:div

同軸範例:

clear 設定清除性質(設定是否允許浮動元素之存在)

支 持:

ie4適 用:

區塊元素或圖形

可能值: both 若兩邊有浮動元素,則該元素移至浮動元素下方 left 若左邊有浮動元素,則該元素移至浮動元素下方 right 若右邊有浮動元素,則該元素移至浮動元素下方 none 以預設的方法顯示

預設值:

none

繼承性:

無一般範例:div

同軸範例:

width 設定寬度

支 持:

ie4、nc4

適 用:

區塊元素或圖形

可能值:

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

height 設定高度

支 持:

ie4、nc4

適 用:

區塊元素或圖形

可能值:

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

position 設定位置

支 持:

ie4、nc4

適 用:

區塊元素

可能值: absolute 以父元素為基準,擺設在特定位置上 relative 以相鄰元素為基準,擺設在特定位置上 static 預設位置,以該元素於原始碼中位置而定

預設值:

absolute

繼承性:

無一般範例:div

同軸範例:

top 設定頂端位置

支 持:

ie4、nc4

適 用:

區塊元素

可能值:

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

left 設定左端位置

支 持:

ie4、nc4

適 用:

區塊元素

可能值:

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

clip 設定裁剪(設定某區域形狀及大小,區域外通透)

支 持:

ie4、nc4

適 用:

區塊元素

可能值: rect(top,right,bottom,left) 設定矩形之上右下左長度,會自動比對對邊長度

一般 寫法為rect(0,長度,長度,0)

不可以寫為rect(0,0,長度,長度)

四個數值皆可以"auto"代替 auto 以正常方式顯示

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

overflow 設定溢位處理(控制當元素內容超過該元素大小時的顯示方式)

支 持:

ie4適 用:

區塊元素

可能值: visible 元素將不會依所設訂大小顯示,而能看見所有內容 hidden 超過元素所設訂大小之部份將被隱藏不予顯示 scroll 如有必要出現卷軸可讓使用者看到全部的內容 auto 以預設的方式顯示

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

visibility 設定可視度

支 持:

ie4、nc4

適 用:

所有元素

可能值: visible 設定該元素顯示 hidden 設定該元素不顯示,但仍佔據空間 inherit 以父元素可視度決定

預設值:

inherit

繼承性:

無一般範例:div

同軸範例:

z-index 設定z軸引數(三度空間)

支 持:

ie4、nc4

適 用:

區塊元素

可能值:

十進位數值,數值大的元素會出現在數值小的元素的上方 auto 當元素位置重複時,原始碼中寫在後面元素會出現在寫在前面元素的上方

預設值:

auto

繼承性:

無一般範例:div

同軸範例:

CSS 基礎教程

1簡介 1 css 概述 1.1css 指層疊樣式表 1.2內容與表現分離 2 多重樣式將層疊為乙個 2.1優先權 2.1.1內聯樣式 在 html 元素內部 2.1.2內部樣式表 位於 head 標籤內部 2.1.3外部樣式表 2.1.4瀏覽器預設設定 2基礎語法 1 語法 1.1由兩個主要的部分...

css基礎 背景與顏色

顏色 color rrggbb 紅色 ff0000 綠色 00ff00 藍色 0000ff 00f黑色 000000 000白色 ffffff fff color rgb 255,0,0 紅色 rgb 255,0,0 綠色 rgb 0,255,0 藍色 rgb 0,0,255 黑色 rgb 0,0,...

CSS應用基礎教程 1 基本認識

概 論 css是 cascading style sheets 的簡稱,中文翻為 串接樣式表 也有人只翻為 樣式表 css用以作為網頁的排版與風格設計,在所謂的 新式網頁 裡 css不容置疑是相當重要的一環。css是以既有的基礎,用以彌補既存 規格裡的不足,也讓網頁的設計更為靈活。這份教學檔案就要來...