常用CSS的各種屬性整理
星期三, 12月 17th, 2008CSS文字設定屬性
| 標籤 | 語法 |
| 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顏色命名法。 四邊框線的顏色，全部設成一樣的話，直接用border-color:就可以了，設定值與上述說明相同。 |
| border-top-style (設定框線樣式) |
border-top-style:none;
框線樣式常用的設定值有none、dotted、dashed、solid、double、groove、ridge、inset、outset。 |
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; |
| padding (設定元件與區塊邊的間隔留白) |
padding:3px 4px 2px 5px; padding-top:3px; padding-right:4px; padding-bottom:2px; padding-left:5px; padding:3px 4px 2px 5px; |
