CSS樣式屬性

2022-12-09 18:21:03 字數 4885 閱讀 3406

1、字型屬性(type)

font-family(使用什麼字型)

font-style(字型的樣式,是否斜體):normal/italic/oblique

font-variant(字型大小寫):normal/small-caps

font-weight(字型的粗細):normal/bold/bolder/lithter

font-size(字型的大小):absolute-size/relative-size/length/percentage

2、顏色和背景屬性(backgroud)

color(定義前景色,例如:p)

background-color(定義背景色)

background-image(定義背景**)

background-repeat(背景圖案重複方式):repeat-x/repeat-y/no-repeat

background-attachment(設定滾動):scroll(滾動)/fixe(固定的)

background-position(背景圖案的初始位置):percentage/length/top/left/right/bottom

3、文字屬性:(block)

定義間距:

word-spacing(單詞之間的距離)

letter-spacing(字母之間的距離)

text-decoration(定義文字的裝飾):nore/underline/overline/line-through/blink

vertical-align(元素在垂直方向的位置):baseline(基線)/sub/super/top/text-top/middle/bottom/text-bottom

text-transform(使文字轉換為其它方式):capitalize(大寫)/uppercase(首字母大寫)/lowercase(小寫)/none

text-align(文字的對齊):left/right/center/justify

text-indent(文字的首行縮排)length/percentage

line-height(文字的行高):normal/numbet/lenggth/percentage(百分比)

定義超連結:

a:link (未訪問過的狀態)

a:visited (訪問過的狀態)

a:hover (滑鼠啟用的狀態)

4、塊屬性(block)

邊距屬性:

margin-top(設定頂邊距)

margin-right(設定右邊距)

margin-bottom(設定底邊距)

margin-left(設定左邊距)

填充距屬性:

padding-top設定頂端真充距)

padding-right設定頂端真充距)

padding-bottom設定頂端真充距)

padding-left設定頂端真充距)

5、邊框屬性(border)

border-top-width(頂端邊框寬度)

border-right-width(右端邊框寬度)

border-bottom-width(底端邊框寬度)

border-left-width(d左邊框寬度)

border-width(一次定義邊框寬度)

border-color(設定邊框顏色)

border-style(設定邊框樣式)

border-top(一次定義頂端各種屬性)

border-right(一次定義右端各種屬性)

border-bottom(一次定義底端各種屬性)

border-left(一次定義左端各種屬性)

**混排:

width(定義寬度屬性)

height(定義高度屬性)

float(文字環繞在乙個元素的四周)

clear(定義某一邊是否有環繞)

6、專案符號和編號(list)

display(定義是否顯示)

white-space(怎樣處理空白部分):normal/pre/nowrap

list-style-type(在列表前加專案符號)disc(圓點)/circle(圈)/square(方形)

/decimal(阿拉伯數字)/lower-roman(小寫羅馬數字)/upper-roman(大寫羅馬數字)/lower-alpha(小寫英文本母)/upper-alpha(大寫英文本母)/nore

list-style-tyle(在列表前加圖案):/none

list-style-position(決定列表項中第二行的起邕位置)

list-style(一次性定義所有屬性)

7、定位(positioning) 即層屬性

type:設定物件的定位方式。

有三種方式:absolute(絕對定位)、relative(相對定位)、static(無特殊定位)。相對應的css屬性是」position」。

visibility:設定物件定位層的最初顯示狀態。有三種狀態:

inherit(繼承父層的顯示屬性)、visible(物件可視)、hidden隱藏物件。相對應的css屬性是」visibility」。

z-index:設定物件的層疊順序。編號較大的層會顯示在編號較小的層上邊。變數值可以是正值也可以是負值。相對應的css屬性是」z-index」。

overflow:設定如果層的內容超出了層的大小時如何處理。有四種處理方式:

visible,增加層的大小,從而將層的所有內容顯示出來;hidden,保持層的大小不變,將超出層的內容剪裁掉;scroll,總是顯示滾動;auto,只有在內容超出層的邊界時才顯示滾動條。相對應的css屬性是」overflow」。 placement:

設定物件定位層的位置和大小。可以分別設定left(左邊定位)、top(頂部定位)、width(寬)、height(高)。相對應的css屬性分別是」left; top; width; height」。

clip:定義定位層的可視區域。區域外的部分為不可視區,為透明的。

可以理解為在定位層上放乙個矩形遮罩的效果。相對應的css屬性是」clip」。

8、擴充套件(extensions)

pagebreak:在列印的時候強迫在樣式控制的物件前後換頁。

before:設定物件前出現的頁分割符。設定為always時,始終在物件之前插入頁分割符。相對應的css屬性是」page-break-before」。

after:設定物件後出現的頁分割符。設定為always時,始終在物件之後插入頁分割符。相對應的css屬性是」'>。

注意:以上ie5僅支援always值和空白值(null)。

cursor:當滑鼠滑過樣式控制的物件時改變滑鼠形狀。可以設定為hand(手型)、crosshair(「十」型)、text (「i」型)、wait(等待)、default(預設)、help(幫助)、e-resize(東箭頭)、ne-resize(東北箭頭)、n-resize(北箭頭)、nw-resize(西北箭頭)、w-resize(西箭頭)、sw-resize(西南箭頭)、s-resize(南箭頭)、se-resize(東南箭頭)和auto(自動)。

css濾鏡屬性

filter:在樣式中加上濾鏡特效。由於此屬性內容比較多,我們將到下一章單獨對濾鏡介紹。

設定透明度

alpha(opacity=?, finishopacity=?, style=?

, startx=?, starty=?, finishx=?

, finishy=?)

opacity:透明度級別,範圍是0-100,0代表完全透明,100代表完全不透明。finishopacity:

設定漸變的透明效果時,用來指定結束時的透明度,範圍也是0 到 100。style:設定漸變透明的樣式,值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。

startx和starty:代表漸變透明效果的開始x和y座標。 finishx和finishy:

代表漸變透明效果結束x和y 的座標。

影象之間的淡入和淡出的效果

blendtrans(duration=?) duration:淡入或淡出的時間。注意:這個濾鏡必須配合js建立**序列,才能做出**間效果。

建立模糊效果

blur(add=?, direction=?, strength=?

) add:是否單方向模糊,此引數是乙個布林值,true(非0)或false(0)。 direction:

設定模糊的方向,其中0度代表垂直向上,然後每45度為乙個單位。 strength:代表模糊的象素值。

把指定的顏色設定為透明

chroma(color=?) color:是指要設定為透明的顏色。

建立陰影效果

dropshadow(color=?, offx=?, offy=?

, positive=?) color:指定陰影的顏色。

offx:指定陰影相對於元素在水平方向偏移量,整數。 offy:

指定陰影相對於元素在垂直方向偏移量,整數。 positive:是乙個布林值,值為true(非0)時,表示為建立**影;為false(0),表示為建立內陰影。

將元素水平反轉

將元素垂直反轉

建立外發光效效果

glow(color=?, strength=?)

color:是指定發光的顏色。

strength:光的強度,可以是1到255之間的任何整數,數字越大,發光的範圍就越大。

去掉影象的色彩,顯示為黑白圖象

10.  invert:反轉圖象的顏色,產生類似底片的效果

11.  light:放置光源的效果,可以用來模擬光源在物體上的投影效果注意:此效果需要用js設定光的位置和強度。

12.  mask:建立透明遮罩

mask(color=?) color:設定底色,讓物件遮住底色的部分透明。

13.  revealtrans:建立切換效果

revealtrans(duration=?, transition=?)

CSS浮動屬性Float詳解

什麼是浮動?浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中,文字可以按照需要圍繞 一般把這種方式稱為 文字環繞 這是乙個例子 在排版軟體裡面,存放文字的盒子可以被設定為允許 混排,或者無視它。無視 混排將會允許文字出現在 的上面,就像它甚至不會在那裡一樣。這就是 ...

css基本樣式的總結

css樣式表中最常用屬性總結 最常用的是紅色 color 設定文字顏色有以下幾種方法 rrggbb rgb rgb 255,255,255 rgb 100 100 100 以h1為例子 h1h1 h1h1h1 background color 設定背景顏色body background image ...

CSS樣式基礎知識

form表單 標籤實現表單的建立,其他表單要放在這裡面 在有便是其中乙個.標籤屬性 action 當使用者按 提交 按鈕後,將資訊傳送到伺服器,如果為空,預設提交到本頁。method 通常使用post安全 元素的屬性 單選按鈕 用於一組相互排斥的組,每個單選按鈕控制項應具有相同的name值,使用者一...