常用CSS的各種屬性整理

2009021311:06

 

CSS文字設定屬性

標籤 語法
font-family
(字型)
font-family:華康少女文字W6;

其他如標楷體,新細明體...等。

font-size
(文字大小)
font-size:20px; 以像素單位代表

或 :small(medium、large)或 :300%。

font-style
(文字形式)
font-style:italic或 font-style:normal。
font-weight
(文字粗細)
font-weight:700; 由 (100~900)

或 bold (normal)或 :bolder(lighter)一級粗或細。

font(家族總管):上面所介紹所有font語法,我們可以用它來一次設定完畢。
原寫法:{font-family:華康少女文字W6;font-size:20px;font-style:italic}
總管寫法:{font:華康少女文字W6 20px italic},在不同的設定間加一個空白鍵。
letter-spacing
(字間距)
letter-spacing:30px;
line-height
(字行距)
line-height:40px[px、em、%、in...]
em為設定一列底線到另一列底線的高度。
text-indent
(首行縮排)
text-indent:40px;只有第一行會縮排,其他是一般情況。
margin-left或 right
(左或右側縮排)
margin-left:70px;  距離左邊的邊界70px
text-decoration
(文字底線)
text-decoration:underline或設定為none(不加線)、underline(加底線)、line-through(加橫線)、overline(加頂線)。
text-align
(文字對齊)
text-align:center或 設定為left(靠左)、center(置中)、right(靠右)。
text-transform
(字母大小寫)
text-transform:capitalize;

或 設定為none(一般)、capitalize(單字的第一個字母大寫)、uppercase(轉成大寫)、lowercase(轉成小寫)。

color
(設定文字的顏色)
可以使用色碼或英文顏色字母

color:#000000或 :black(跟html一樣)。

CSS背景設定屬性

標籤 語法
background-color
(背景顏色)
由網頁色碼設定background-color:#000000;

或 由英文色名稱設定background-color:black

任何一個被定義的元件 (例如超連結、文字、表格等),也可以有自己的背景顏色
例如:<font style="background-color:red">加菲貓部落格</font>
結果:加菲貓部落格
background-image
(背景圖片)
background-image:url(背景圖網址)每個元件可設背景圖片
background-position
(背景圖片位置)
Background-position:75% 25%;

(基準點是元件的左上角,第一個參數是指定X方向,第二個指定Y方向)或 75px 25px或 right top[X方向可指定為left(0%)、center(50%)、right(100%),Y方向可以指定為top(0%)、center(50%)、bottom(100%)]

background-repeat
(背景的重複)
background-repeat:repeat;

[repeat(一般貼的滿滿的狀況)、repeat-x(只往x方向貼滿)、repeat-y(往Y方向貼滿)、no-repeat(不重複貼,也就是只有一張小圖)

background-attachment
(背景是否固定)
background-attachment:scroll;

指定為scroll(一般效果)、fixed(固定不動)。

background(background家族總管)上面所介紹的所有background語法,我們可以用它來一次設定完畢。
原寫法: {background-color:red;background-repeat:repeat}
總管寫法:{background:red repeat}在不同的設定間加一個空白鍵

 

 

CSS超連結設定屬性

標籤 語法
超連結除了可以用前面所介紹的語法設定外,也可以套用這些特效。
text-decoration
(底線的樣式)
text-decoration:underline; (加底線)

none(不加底線)、overline(包含上下線)。

cursor
(滑鼠指標的樣式)
cursor:auto;(自動)

crosshair(十字)、default(箭頭)、hand(手型)、move(移動)、text(文字)、wait(等待)、help(幫助)。

或使用游標圖式樣

cursor : url(滑鼠游標圖片網址);

a:link
(超連結的樣式)
a:link {cursor:help;text-decoration:underline}
a:visited
(瀏覽過後超連結的樣式)
a:visited {cursor:help;text-decoration:underline}
a:hover
(滑鼠移至上方時超連結的樣式)
a:hover {cursor:help;text-decoration:underline}
a:active
(設定點下超連結時的樣式)
a:active {cursor:help;text-decoration:underline}

 

CSS框線設定屬性

標籤 語法
在css語法中,若配合區塊設定,任何一個元件都可以顯示出框線,同時框線的變化,也更顯得細膩而多樣化。
border-top-width
(設定框線的寬度及式樣粗細)
tborder-top-width:thintop;為上面,

可以換成bottom、left、right,分別設定上面、下面、左邊、右邊框線的寬度。thin可以換成thin(細框)、medium(一般)、thick(粗框)。

border-top-width:5px;與上面的設定類似,直接用數值指定框線的寬度。

top 一樣可以換成bottom、left、right。

四邊框線的寬度,全部設成一樣的話,直接用border-width:?px;就可以了。

border-top-color
(設定框線顏色)
border-top-color:#ff0000;
border-top-color:red;
border-top-color:rgb(128,255,255);

#ff0000(色碼)是用16進位法設定顏色,red是直接指定顏色名稱,rgb(128,255,255)是利用 rgb顏色命名法。
top可以換成bottom、left、right,分別設定上面、下面、左邊、右邊的框線顏色。

四邊框線的顏色,全部設成一樣的話,直接用border-color:就可以了,設定值與上述說明相同。

border-top-style
(設定框線樣式)
border-top-style:none;

框線樣式常用的設定值有none、dotted、dashed、solid、double、groove、ridge、inset、outset。
top可以換成bottom、left、right,分別設定上面、下面、左邊、右邊的框線樣式。
四邊框線的樣式,全部設成一樣的話,直接用border-style:就可以了,設定值與上述說明相同。
 

 

CSS區塊位置設定屬性

 

標籤 語法
在css語法中,區塊的座標位置,要定義一個座標,就一定要有基準點,這個
設定就是為了定義基準點。
 
position
(絕對性)
position:absolute;

absolute(絕對)、relative(相對),絕對的意思是,基準點位於網頁的最左上角,相對的意思,基準點位於上一個被定義區塊的最左上角。

position-top
(上端位置)

position-left
(左側位置)

 

position-top:100px;

指定區塊的最上端位置距離基準點100px距離。以基準點為準,正值代表在基準點的下方,負值代表上方,值越大離基準點越遠。例如 top:-50px 就表示在基準點上方50像素的位置。

position-left:100px;

指定區塊的最左側位置距離基準點100px距離。以基準點為準,正值代表在基準點的右方,負值代表左方,值越大離基準點越遠。例如 left:-80px 就表示在基準點左方80像素的位置。

z-index
(垂直螢幕高度)
z-index:100px;

指定區塊垂直螢幕的高度100px,沒有單位,數字越大位置越高,例如 z-index:200比z-index:50高,有了這個語法,就可以產生立體感了。
 

visibility
(設定顯示與否)
visibility:visible;

設定是否將定義的區塊顯示出來,可以套用visible(顯示)、hidden(隱藏,但仍然佔據畫面空間)。

overflow
(設定是否產生捲軸)
overflow:auto;

當區塊中的元件比我們設定的區塊還大時,就產生是否產生捲軸的問題,可以套用auto(當元件大於區塊時,自動產生捲軸)、scroll (不論元件大小,一律產生捲軸)、hidden(不論元件大小,一律不產生捲軸,所以超出區塊的部份就會隱藏不顯示)、visible(若元件大於區塊,則區塊自動撐大)。

margin
(設定區塊與外界之間隔)
margin:3px 4px 2px 5px;
margin-top:3px;
margin-right:4px;
margin-bottom:2px;
margin-left:5px;

margin:3px 4px 2px 5px;
可以一次設定四個邊與外界之間的留白大小,依序是上、右、下、左。
如果只想設定其中一邊,語法如下:
margin-top:3px;
margin-right:4px;
margin-bottom:2px;
margin-left:5px;

padding
(設定元件與區塊邊的間隔留白)
padding:3px 4px 2px 5px;
padding-top:3px;
padding-right:4px;
padding-bottom:2px;
padding-left:5px;

padding:3px 4px 2px 5px;
可以一次設定四個方向留白大小,依序是上、右、下、左。
如果只想設定其中一個方向,語法如下:
padding-top:3px;
padding-right:4px;
padding-bottom:2px;
padding-left:5px;