熟悉css部分文法屬性

CSS文法手冊（一）字型屬性 

 

1、font-family

功能：用於改變HTML標誌或元素的字型，你可設定一個可用字型清單。瀏覽器由前向後選用字型。powered by 25175.net

文法：{font-family:字型1,字型2, ... ,字型n}

例子：

 

字型

2、font-style

功能：使文本顯示為扁斜體或斜體等表示強調 。

數值：

normal - 正常

italic - 斜體

oblique - 偏斜體

例子：

 

Normal

Italic

Oblique 

3、font-variant

功能：用於在正常與小型大寫字母字型間切換。

數值：normal - 如果該標誌繼承父元素的 small-caps 設定，則關鍵字 normal 將 font-variant 設定為正常字型。

small-caps - 把小寫字母顯示為字型較小的大寫字母。 

例子：

 

FONT-VARIANT 

4、font-weight

功能：用於設定字型灰階，產生字型的深，淺版本。

數值：

正常灰階 - normal

相對灰階 - bold, bolder, light, lighter

梯度灰階 - 取值如下：100, 200, 300, 400(相當於normal), 500, 600, 700(相當於bold), 800, 900。

例子：

 

字型灰階 

5、font-size

功能：用各種度量單位控制文本字型大小。

數值：有四種數值方式

絕對尺寸- 用具體字型大小表定義字型大小，可以取下列數值之一：xx - small, x-small, small, medium, large, x-large, xx-large。不同字型有不同的數值。

相對尺寸 - larger, smaller，產生的尺寸是相對於父容器字型大小而言的。

長度 - 用毫米(mm)，厘米(cm)，英寸(in)，點數(pt)，象素(px)，pica(pc)，ex(小寫字母x的高度)或em(字型高度)作為度量單位。

百分比 - 相對於其父元素字型大小的百分比。

例子：字型大小

 

6、font

功能：簡寫屬性，提供了對字型所有屬性進行設定的快捷方法。

文法：{font:字型屬性1 字型屬性2 ... 字型屬性n}

數值：字型屬性值為前面已列出的值，此外還可以設定行間距屬性 line-height(見文字屬性)，內容的順序為：font-style; font-variant; font-weight; font-size; line-height; font-family。可省略部分屬性，屬性值間用空格分開。

例子：

 

FONT 

 

CSS文法手冊（二）文字屬性

 

 

1、letter-spacing

功能：控制文本元素字母間的間距，所設定的距離適用於整個元素。powered by 25175.net

數值：

normal - 正常間距，將字元間的間距複位為所有字型和字型大小的正常間距。

長度 - 設定字間距長度，正值表示加進父元素中繼承的正常長度，負值則減去正常長度。在數字後指定度量單位如下：mm, cm, in, pt(點數), px(象素), pc(pica), ex(小寫字母x的高度), em(大寫字母M的寬度)。

例子：

 

Letter-Spacing

2、line-height

功能：設定元素中文本的行間距。

數值：

normal - 正常高度，通常為字型尺寸的 1-1.2倍，這是預設設定。

數字 - 設定元素中毎行文本的距離為字型尺寸乘以這個數字。例如字型尺寸為10點，設定line-height為2，則間距20點。

長度 - 用標準度量單位設定間距，有些是絕對的，有些是相對的，詳見letter-spacing中的説明。

百分比 - 也字型尺寸的百分比設定間距。 

 

例子： 這是第一行。

這是第二行。

這是第三行。 

3、text-align

功能：在元素框中水平對齊文本。

數值：

left - 靠左對齊

right - 靠右對齊

center - 置中

justify - 均勻分布， 產生等長的行 

例子：

 

對左

置中

對右

4、text-decoration

功能：文本修飾，用於控制文本元素所用的效果，特別適用於引人注意的說明，警告等文字效果。

數值：

none - 無文本修飾，預設設定。

underline - 底線。

overline - 上劃線。

line-through - 刪除線。

blink - 閃爍。

同一語句中可以組合多個關鍵字。

例子：

 

underline 

overline 

5、text-indent

功能：文本縮排，用於段落的第一行縮排上。

數值：

長度 - 設定首行縮排的尺寸為指定度量單位，有些單位是相對的，有些則是絕對的，祥見 letter-spacing 屬性的說明部分。

百分比 - 以行長的百分比設定首行縮排量。

例子：

 

文本縮排，用於段落的第一行縮排上。

6、text-transform

功能：設定一個或幾個元素的大寫標準。

數值：

none - 不改變文本的大寫小寫。

capitalize - 元素中毎個單詞的第一個字母用大寫。

uppercase - 將所有文本設定為大寫。

lowercase - 將所有文本設定為小寫。

例子：

 

a text-transform example.

a text-transform example.

a text-transform example.

7、vertical-align

功能：垂直對齊。

數值：

baseline - 對準兩個元素的小寫字母基準線。

sub - 下標。

super - 上標。

top - 頂部對齊。

text-top - 文本頂對齊。

middle - 中線對齊。

bottom - 底線對齊。

text-bottom - 字母底線對齊。

百分比 - 將線上元素基準線在父元素基準線基礎上升降一定的百分比，和元素的 line-height 屬性群組合使用。

例子：

 

a1x2

8、word-spacing 

功能：控制文本中元素單詞間的間距。設定的間距適用於整個元素，不能在某個單詞間插入更大或更小的間距。

數值：

normal - 正常間距。

長度 - 如果長度為正，則加進從父元素繼承的正常長度，如果是負值，則減去。

例子：

 

A Word Spacing Example

CSS文法手冊（三）文本填充，邊框，邊界和位置屬性（一）

 

 

一、框填充屬性powered by 25175.net

1、padding-bottom

padding-left

padding-top

padding-right

功能：毎個容器都有邊框，這些屬性設定邊框與框內元素間的距離。

數值：

長度 - 設定相對或絕對值。在數字後指定度量單位如下：mm, cm, in, pt, px, pc, ex, em。em 和 ex 設定產生相對於父字型的字型尺寸。

百分比 - 以父元素的百分比設定邊框。

說明：填儲值不能使用負值，但可以是小數。

[url=article.asp?typeid=]CSS[/url]yu/01/01.htm" target=_blank>例子

2、padding

功能：是個簡寫屬性，用於設定上，下，左，右各個方向邊框和內容元素的間距。

數值：同前。

說明：用單一值可以讓毎邊等距填充；如果用兩個值，則第一個值用於上下填充，第二個值用於左右填充；如果用三個值，則賦於上邊填充，左右填充和下邊填充；如果用四個值，則分別用於上，右，下，左填充。可以混合數實值型別。

例子

二、框邊框屬性

1、border-top

border-bottom

border-right

border-left

 

功能：這四個屬性都是簡寫屬性，分別設定上，下，右，左的邊框屬性。預設情況下，邊框沒有樣式設定。

數值：共有三個邊框屬性

border-width: 取值為 thin, medium, thick或指定長度。

border-style: 設定用於修飾邊框的底紋。可以設定下列樣式：none, dotted,doshed, solid, double, groove, ridge, inset, outset。

border-color: 設定邊框顏色。

例子

2、border-top-width

border-bottom-width

border-right=width

border-left-width 

功能：分別設定各個邊框的厚度。

數值：

thin - 細邊框。

medium - 中等線寬。

thick - 粗線。

長度 - 用相對或絕對單位設定邊框寬度。

例子

3、border-width

功能：簡寫屬性，可同時設定四個邊框的寬度。

數值：

thin - 細邊框。

medium - 中等線寬。

thick - 粗線。

長度 - 用相對或絕對單位設定邊框寬度。

說明：見 padding 說明。

例子：

 

邊框屬性

4、border-color

功能：簡寫屬性，設定四個邊框的顏色值。

數值：可以用顏色名或RGB值。如果指定單個顏色，則四個邊框都顯示為這個顏色；如果指定兩個顏色，則順序為上下，左右；如果指定三種顏色，則順序為上，左右，下；如果指定四種顏色，則順序為上，右，下，左。

說明：顏色名如下

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, pURPle, red, silver, teal, white, yellow.

對於RGB值，可用三種方法指定

#rrggbb; rgb(r,g,b); rgb(r%,g%,b%)

例子：

 

邊框顏色

5、border-style

功能：用於顯示邊框和指定邊框樣式。

數值：

none - 不顯示邊框，為預設值

dotted - 點線

dashed - 虛線

solid - 實線

double - 雙線

groove - 3D陷入線

ridge - 3D山脊狀線

inset - 使頁面有沉入感

outset - 使頁面有浮出感

說明：並非所有瀏覽器都能顯示ridge, inset, outset 之類的樣式，有些瀏覽器將所有邊框都繪製成實線。

 

 

Example1

Example2

6、border

功能：簡寫屬性，設定所有邊框屬性。

數值：

border-width - 取值 thin, medium, thick 或指定長度。

border-style - 取值 none, dotted, dashed, solid, double, groove, ridge, inset, outset

border-color - 可用顏色名或RGB值。

說明：與其它簡寫屬性不同的是，每個設定只能取一個值，這個屬性均勻作用於框的各邊。

例子：

 

This Is A Example 

 

CSS文法手冊（四）文本填充，邊框，邊界和位置屬性（二）

 

三、框邊界屬性

1、margin-bottompowered by 25175.net

margin-left

margin-right

margin-top

功能：這四個屬性用來設定元素與其相鄰元素間的距離，可以用長度或相對於其父文本的寬度的百分比來定義，也可以自動處理。

數值：

長度 - 設定元素相應邊與框邊緣之間的相對或絕對距離，有效單位為：mm, cm, in, px, pt, pica,ex, em ...

百分比 - 以父元素寬度的百分比設定邊界尺寸。

auto - 自動，這個設定取瀏覽器的預設邊界。

[url=article.asp?typeid=]CSS[/url]yu/02/01.htm">例子

2、margin

功能：簡寫屬性，用於設置元素的所有邊界。這是用於描述元素的內容的邊緣到框邊緣的距離的。這個區總是透明的，可以看到下面的頁面背景。

數值：

長度 - 同前

百分比 - 以父元素寬度的百分比設定邊界尺寸。

auto - 自動，這個設定取瀏覽器的預設邊界。

例子

 

四、框位置屬性

1、height

功能：設定元素高度，瀏覽器按照這個高度調整圖形。

數值：

長度 - mm, cm, px, pt, .....

auto - 自動。

2、width

功能：設定元素寬度，瀏覽器按照這個寬度調整圖形。

數值：

長度 - mm, cm, in, px, pt, ......

百分比 - 將圖形尺寸設定為父元素寬度的百分比。

auto - 自動調整

3、float

功能：用於在普通元素流布置規則以外放上元素。

數值：

none - 無改動。

left - 將其它元素內容放到浮動元素右邊。

right - 將其它元素內容放到浮動元素左邊。

4、clear

功能：用於允許或禁止指定元素旁邊放置其它元素(通常是線形).

數值：

none - 無限制。

left - 將元素放在左邊浮動元素下面

right - 將元素放在右邊浮動元素下面

both - 元素兩邊都不允許放置浮動元素

 

CSS文法手冊（五）顏色和背景屬性

 

1、color

功能：設定前景或元素的顏色。powered by 25175.net

數值：使用顏色關鍵字或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 {background-image:url(logo.gif); background-position:50% 50%}

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

7、background

功能：簡寫屬性，可以設定所有背景屬性。

數值：

background-attachment

background-color

background-image

background-position

background-repeat

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

 

CSS文法手冊（六）分類屬性

 

 

1、display

功能：改變元素的顯示值，可以將元素類型線上，塊和清單項目相互變換。powered by 25175.net

數值：

none - 不顯示元素

block - 塊顯示，在元素前後設定分行符

inline - 刪除元素前後的分行符，使其併入其它元素流中

list-item - 將元素設定為清單中的一行

說明：可用 display 屬性值產生插入標題和補加清單或讓圖形變成線上顯示。 

2、white-space

功能：控制元素內的空白。

數值：

normal - 不改變，保持預設值，在瀏覽器頁面長度處換行。

pre - 要求文檔顯示中採用原始碼中的格式。

nowarp - 不讓訪問者在元素內換行。

3、list-style-type

功能：指定清單所用的強調符或編號類型

數值：

none - 無強調符

disc - 碟形強調符(實心圓)

circle - 圓形強調符(空心圓)

square - 方形強調符(實心)

decimal - 十進位數強調符

lower-roman - 小寫羅馬字強調符

upper-roman - 大寫羅馬字強調符

lower-alpha - 小寫字母強調符

upper-alpha - 大寫字母強調符

例子： 

 

item1 

item2 

item3 

4、list-style-image

功能：用於將清單中標準強調符換成所選的圖形

數值：

無圖形

url - 圖形URL地址

例子： 

 

item1 

item2 

item3 

5、list-style-position

功能：用於設定強調符的縮排或伸排，這個屬性可以讓強調符突出於清單以外或與清單項目對齊。

數值：

inside - 縮排，將強調符與清單項目內容左邊界對齊

outside - 伸排，強調符突出到清單項目內容左邊界以外

 

6、list-style 

功能：簡寫屬性，將所有清單屬性放在一條語句中。

數值：

list-style-type

list-style-position

list-style-image

這些值的細節見各個屬性部分。

例子： 

 

item1 

item2 

item3