CSS

出自ProgWiki

CSS（Cascading Style Sheets），參照：『維基百科～CSS』

目錄 1 技術文件 1.1 CSS相容性 1.2 CSS Sprites 2 常用CSS語法 2.1 顯示相關CSS 2.2 字型相關CSS 2.3 文字段落相關CSS 2.4 定位相關CSS 2.5 CSS Box Model 3 其他 3.1 CSS framework 3.2 CSS Table 3.3 Reset CSS 3.4 其他應用範例 4 FAQ 4.1 CSS引用方法 4.1.1 Html 檔頭定義型 4.1.2 外部import型 4.1.3 外部Link型 4.1.4 使用JavaScript進行動態Include 4.2 Table內字數過長時，自動斷行 4.3 字太多時自動出現捲軸Bar 4.4 FireFox下cursor:hand沒有作用 4.5 以CSS自訂圓角框 4.6 其他

技術文件

• CSS - w3schools
• CSS - W3C
• Cascading Style Sheets - MSDN Library

• CSS Reference - MSDN Library

• CSS 語法教學
• CSS小教室

CSS相容性

• 參照：『維基百科～Comparison_of_layout_engines_(Cascading_Style_Sheets)』
• The Acid3 Test，參照：『維基百科～Acid3』
• CSS Compatibility and Internet Explorer - MSDN Library
• CSS contents and browser compatibility

CSS Sprites

• CSS Sprites - wowbox blog (網頁設計知識庫)
• 14 Rules for Faster-Loading Web Sites
• CSS Sprites: Image Slicing’s Kiss of Death
• High Performance Web Sites
• CSS Sprites generator
• 使用 CSS Sprites 設計網頁但不用 background-image 的技巧

常用CSS語法

顯示相關CSS

屬性	用途	設定值
display	顯示方式	display:none; (不顯示) display:block; (顯示為區塊模式,相鄰物件自動換行) display:inline; (顯示為並排模式,相鄰物件不自動換行)
visibility	可顯示	visibility:visible;（顯示） visibility:inherit（繼承） visibility:hidden（隱藏，但仍佔有空間，此與display:none不同）

字型相關CSS

屬性	用途	設定值
font-family	字型名稱	font-family:'細明體';
font-size	字型Size	font-size:13px;
font-weigh	字型粗細	font-weigh:800;
font-style	字型特徵	font-style:normal; (正常字型) font-style:italic; (斜體字)

文字段落相關CSS

屬性	用途	設定值
letter-spacing	字距	letter-spacing:3px;
line-height	列高	line-height:20px;（這個距離是包含字型的Size）
text-align	水平對齊	text-align:center; (水平對齊) text-align:left; (置左對齊) text-align:right; (置右對齊)

定位相關CSS

屬性	用途	設定值
position	定位方式
top	上
left	左
width	寬
width	高

CSS Box Model

• CSS Box model

屬性	用途	設定值
marign	常用於網頁排版時重疊或位移的調整, 數值可負	marign: 上 右 下 左; marign: -50px auto auto auto;
border-width	邊框的寬度
padding		padding: 上 右 下 左;

其他

CSS framework

• blueprintcss

CSS Table

• CSS Table Gallery

Reset CSS

Reset CSS是為了打消不同遊覽器在CSS的預設定義不同的差異，所以對於CSS做一致性的重新設定。

• 出處：成為 CSS 團隊的一員：CSS 團隊開發的最佳實踐

/*---RESET---*/ 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {    
     margin: 0;    
     padding: 0;    
     border: 0;    
     outline: 0;    
     font-weight: inherit;    
     font-style: inherit;    
     font-size: 100%;    
     font-family: inherit;    
     vertical-align: baseline; 
}

其他版本

• CSS Tools: Reset CSS
• YUI Reset CSS

其他應用範例

• css-tricks.com
• Dynamic Drive CSS Library

FAQ

CSS引用方法

Html 檔頭定義型

<style type="text/css">
/*<![CDATA[*/
a:link, a:visited {
	color: #c64934; text-decoration: none;
	font-weight: bold;
}
 
a:hover {
	color: #900;	text-decoration: none;
	font-weight: bold;
}
/*]]>*/
</style>

外部import型

<style type="text/css">
/*<![CDATA[*/
@import "檔名.css";
/*]]>*/
</style>

外部Link型

<link rel="stylesheet" type="text/css" href="檔名.css" />

使用JavaScript進行動態Include

主條目：IncludeFile.js

Table內字數過長時，自動斷行

• IE7與FireFox3通用(前2個為FireFox3用,後2個為IE7用)

<td style="white-space:-moz-pre-wrap; white-space:pre-wrap; word-wrap:break-word; word-break:break-all">...</td>

• IE 5.5以上用

• 參照：white-space Attribute | whiteSpace Property

*預設的自動斷行
<td style="white-space:normal">...</td>
*不斷行
<td style="white-space:nowrap">...</td>
*pre模式
<td style="white-space:pre">...</td>

• IE用(另一種)

<td style="word-wrap:break-word;word-break:break-all">...</td>

• FireFox用

<td style="white-space:-moz-pre-wrap;white-space:pre-wrap">...</td>

• 相關

• 完美解決網頁文字太長而導致破版的問題

字太多時自動出現捲軸Bar

• 參照：overflow Attribute | overflow Property

<pre style="overflow: auto;">...</pre>

FireFox下cursor:hand沒有作用

• 改用

cursor:pointer

以CSS自訂圓角框

使用div與b與css設定

• Spiffy Corners - Purely CSS Rounded Corners

使用div與css背景圖設定

• CSS and round corners: Borders with curves

CSS語法

• CSS3（天曉得有那個瀏覽器支援？）

border-radius : 5px;

• FireFox3 專用 CSS

-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;

• Safari 和 Chrome 專用 CSS

-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;

其它

• 25 Rounded Corners Techniques with CSS
• border-radius與圓角
• roundedcornr……CSS用的圓角圖產生器
• css-round-button……CSS用的圓角按鈕

其他

• CSS Hack - 解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！