發新話題

CSS語法手冊

CSS語法手冊

(一)字體屬性
核心提示:1、font-family 功能:用於改變HTML標誌或元素的字體,你可設置一個可用字體清單。瀏覽器由前向後選用字體。語法:{font-family:字體1,字體2、... ,字體n}例子: 1、font-family 功能用於改變HTML標誌或元素的字體,你可設置一個可用字體清單。瀏覽器由前向後選用字體。
語法:{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




TOP

(二)文本屬性
引用:
核心提示:1、letter-spacing 功能:控制文本元素字母間的間距,所設置的距離適用於整個元素。數值:normal - 正常間距,將字符間的間距復位為所有字體和字號的正常間距。長度 - 設置字間距長度,正值表示加進父元素中繼承的正常長度,負值則減去正常長度。在數字後指定度量單位如下:mm、cm、i
1、letter-spacing

功能:控制文本元素字母間的間距,所設置的距離適用於整個元素。
數值
normal - 正常間距,將字符間的間距復位為所有字體和字號的正常間距。
長度 - 設置字間距長度,正值表示加進父元素中繼承的正常長度,負值則減去正常長度。在數字後指定度量單位如下:mm、cm、in、pt(點數)、px(象素)、pc(pica)、ex(小寫字母x的高度)、em(大寫字母M的寬度)。
例子

Letter-Spacing2、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

TOP

(三)文本填充,邊框,邊界和位置屬性(一)
引用:
核心提示:一、框填充屬性 1、padding-bottompadding-leftpadding-toppadding-right功能:每個容器都有邊框,這些屬性設置邊框與框內元素間的距離。數值:長度 - 設置相對或絕對值。在數字後指定度量單位如下:mm、cm、in、pt、px、pc、ex、em
一、框填充屬性

1、padding-bottom
padding-left
padding-top
padding-right

功能:每個容器都有邊框,這些屬性設置邊框與框內元素間的距離。
數值
長度 - 設置相對或絕對值。在數字後指定度量單位如下:mm、cm、in、pt、px、pc、ex、em。em 和 ex 設置產生相對於父字體的字體尺寸。
百分比 - 以父元素的百分比設置邊框。
說明:填充值不能使用負值,但可以是小數。
訪客無法瀏覽此圖片或連結,請先 註冊登入會員

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


TOP

(四)文本填充,邊框,邊界和位置屬性(二)
引用:
核心提示:三、框邊界屬性 margin-leftmargin-rightmargin-top功能:這四個屬性用來設置元素與其相鄰元素間的距離,可以用長度或相對於其父文本的寬度的百分比來定義,也可以自動處理。數值:長度 - 設置元素相應邊與框邊緣之間的相對或絕對距離,有效單位為:mm、cm、in、px、
三、框邊界屬性 1、margin-bottom
margin-left
margin-right
margin-top
功能:這四個屬性用來設置元素與其相鄰元素間的距離,可以用長度或相對於其父文本的寬度的百分比來定義,也可以自動處理。
數值
長度 - 設置元素相應邊與框邊緣之間的相對或絕對距離,有效單位為:mm、cm、in、px、pt、pica,ex、em ...
百分比 - 以父元素寬度的百分比設置邊界尺寸。
auto - 自動,這個設置取訪客無法瀏覽此圖片或連結,請先 註冊登入會員 的預設邊界。
訪客無法瀏覽此圖片或連結,請先 註冊登入會員
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 - 元素兩邊都不允許放置浮動元素

TOP

(五)顏色和背景屬性
引用:
核心提示:1、color 功能:設置前景或元素的顏色。數值:使用顏色關鍵字或RGB值。例子:文本顏色(關鍵字)文本顏色(#rrggbb)文本顏色[rgb(rr,gg,bb)]文本顏色[rgb(r%,g%,b%)]功能:設置頁面或頁面元素的背景顏色。數值:顏色 - 可用顏色名或RGB值transparent -
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 {background-image:url(logo.gif); background-position:50% 50%}
這個語句將 Body 基本類設置為背景圖形在頁面上居中顯示。
7、background
功能:簡寫屬性,可以設置所有背景屬性。
數值
background-attachment
background-color
background-image
background-position
background-repeat
有關上述數值的細節,見各個屬性部分。

TOP

(六)分類屬性
引用:
核心提示:1、display 功能:改變元素的顯示值,可以將元素類型線上,塊和清單項目相互變換。數值:none - 不顯示元素block - 塊顯示,在元素前後設置分行符inline - 刪除元素前後的分行符,使其併入其它元素流中list-item - 將元素設置為清單中的一行說明:可用 display 屬性
1、display 功能:改變元素的顯示值,可以將元素類型線上,塊和清單項目相互變換。
數值
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

TOP

發新話題

本站所有圖文均屬網友發表,僅代表作者的觀點與本站無關,如有侵權請通知版主會盡快刪除。