檢視 CSS 的原始碼

'''CSS'''（Cascading Style Sheets），{{wikipedia|CSS}}

==技術文件==
*[http://www.w3schools.com/css/default.asp CSS - w3schools]
*[http://www.w3.org/Style/CSS/ CSS - W3C]
*[http://msdn.microsoft.com/en-us/library/ms531209.aspx Cascading Style Sheets] - MSDN Library
*[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Reference] - MDN
*[http://css.1keydata.com/tw/ CSS 語法教學]
*[http://www.web66.com.tw/web66/_file/1794/upload/designdesc/dd_css07.html CSS小教室]

===CSS相容性===
*{{wikipedia|Comparison_of_layout_engines_(Cascading_Style_Sheets)|lang=en}}
*[http://acid3.acidtests.org/ The Acid3 Test]，{{wikipedia|Acid3|lang=en}}
*[http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx CSS Compatibility and Internet Explorer] - MSDN Library
*[http://www.quirksmode.org/css/contents.html CSS contents and browser compatibility]

===CSS Sprites===
*[http://www.wowbox.com.tw/blog/article.asp?id=2148 CSS Sprites - wowbox blog (網頁設計知識庫)]
*[http://stevesouders.com/examples/rules.php 14 Rules for Faster-Loading Web Sites]
*[http://www.alistapart.com/articles/sprites CSS Sprites: Image Slicing’s Kiss of Death]
*[http://www.oreilly.com/catalog/9780596529307/index.html High Performance Web Sites]
*[http://csssprites.com/ CSS Sprites generator]
*[http://blog.miniasp.com/post/2008/12/CSS-Spriting-without-using-background-image.aspx 使用 CSS Sprites 設計網頁但不用 background-image 的技巧]

==常用CSS語法==
===顯示相關CSS===
{| class="wikitable"
!屬性!!用途!!設定值
|-
|display||顯示方式||
display:none; (不顯示) <hr/>
display:block; (顯示為區塊模式,相鄰物件自動換行) <hr/>
display:inline; (顯示為並排模式,相鄰物件不自動換行)
|-
|visibility||可顯示||
visibility:visible;（顯示）<hr/>
visibility:inherit（繼承）<hr/>
visibility:hidden（隱藏，但仍佔有空間，此與display:none不同）
|-
|}
===字型相關CSS===
{| class="wikitable"
!屬性!!用途!!設定值
|-
|font-family||字型名稱||font-family:'細明體';
|-
|font-size||字型Size||font-size:13px;
|-
|font-weigh||字型粗細||font-weigh:800;
|-
|font-style||字型特徵||
font-style:normal; (正常字型)<hr/>
font-style:italic; (斜體字)
|-
|}

===文字段落相關CSS===
{| class="wikitable"
!屬性!!用途!!設定值
|-
|letter-spacing||字距||letter-spacing:3px;
|-
|line-height||列高||line-height:20px;（這個距離是包含字型的Size）
|-
|text-align||水平對齊||
text-align:center; (水平對齊)<hr/>
text-align:left; (置左對齊)<hr/>
text-align:right; (置右對齊)
|-
|vertical-align||垂直對齊||
vertical-align:top;(置頂對齊)<hr/>
vertical-align:middle;(置中對齊)<hr/>
vertical-align:bottom;(置下對齊)
|-
|}

===定位相關CSS===
{| class="wikitable"
!屬性!!用途!!設定值
|-
|position||定位方式||
|-
|top||上||
|-
|left||左||
|-
|width||寬||
|-
|width||高||
|-
|}
===CSS Box Model===
*[http://www.w3.org/TR/CSS2/box.html CSS Box model]
{| class="wikitable"
|-
!屬性!!用途!!設定值
|-
|marign||常用於網頁排版時重疊或位移的調整, 數值可負 ||marign: 上 右 下 左;<hr>marign: -50px auto auto auto;
|-
|border-width||邊框的寬度||
|-
|padding|| ||padding: 上 右 下 左;
|-
|}
===旋轉、傾斜、縮放===
*[http://www.w3schools.com/css3/css3_2dtransforms.asp CSS3 2D Transforms]
{| class="wikitable"
|-
!用途!!屬性
|-
|旋轉||
 .rotate90  { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg);  }
|-
|傾斜||
 .skewX10 { -webkit-transform: skewX(10deg); -moz-transform: skewX(10deg); -o-transform: skewX(10deg);  }
 .skewX30 { -webkit-transform: skewX(30deg); -moz-transform: skewX(30deg); -o-transform: skewX(30deg);  }
 .skewY20 { -webkit-transform: skewY(20deg); -moz-transform: skewY(20deg); -o-transform: skewY(20deg);  }
|-
|縮放||
 .scale02  { -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2);  }
 .scaleX2  { -webkit-transform: scaleX(2); -moz-transform: scaleX(2); -o-transform: scaleX(2);  }
 .scaleY15 { -webkit-transform: scaleY(1.5); -moz-transform: scaleY(1.5); -o-transform: scaleY(1.5);  }
|-
|}
===排版用（多欄位）===
*[http://www.w3schools.com/css3/css3_multiple_columns.aspCSS3 Multiple Columns]

==其他==
===CSS framework===
{{wikipedia|CSS_frameworks|lang=en}}
*[http://getclank.com/ Clank]
*[http://www.columnal.com/ Columnal]
*[[Bootstrap]]
*[[Blueprint]]
*[http://gumbyframework.com/ Gumby]
*[http://imperavi.com/kube/ Kube]
*[http://purecss.io/ Pure]
*[http://semantic-ui.com/ Semantic UI]
*[http://daneden.github.io/Toast Toast]
*[http://www.yaml.de/ YAML]

===CSS Table===
*[http://icant.co.uk/csstablegallery/index.php CSS Table Gallery]
===按鈕特效===
*[http://ianlunn.github.io/Hover/ Hover.css]
===Reset CSS===
;Reset CSS是為了打消不同遊覽器在CSS的預設定義不同的差異，所以對於CSS做一致性的重新設定。
*出處：[http://msdn.microsoft.com/zh-tw/scriptjunkie/ff679957.aspx 成為 CSS 團隊的一員：CSS 團隊開發的最佳實踐]
<source lang="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; 
}
</source>

;其他版本
*[http://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS]
*[http://developer.yahoo.com/yui/reset/ YUI Reset CSS]
*[http://necolas.github.io/normalize.css/ Normalize.css: Make browsers render all elements more consistently.]

===其他應用範例===
*[http://css-tricks.com/downloads/css-stuff/ css-tricks.com]
*[http://www.dynamicdrive.com/style/ Dynamic Drive CSS Library]

==FAQ==
===CSS引用方法===
====Html 檔頭定義型====
<source lang="html4strict">
<style type="text/css">
/*<![CDATA[*/
a {
    font-weight: bold;
}
a:link, a:visited {
    color: #c64934;
    text-decoration: none;
}

a:hover {
    color: #900;
    text-decoration: underline;
}
/*]]>*/
</style>
</source>

====外部import型====
<source lang="html4strict">
<style type="text/css">
/*<![CDATA[*/
@import "檔名.css";
/*]]>*/
</style>
</source>

====外部Link型====
<source lang="html4strict">
<link rel="stylesheet" type="text/css" href="檔名.css" />
</source>

====使用JavaScript進行動態Include====
{{main|IncludeFile.js}}

===Table內字數過長時，自動斷行===
* IE7與FireFox3通用(前2個為FireFox3用,後2個為IE7用)
<source lang="html4strict">
<td style="white-space:-moz-pre-wrap; white-space:pre-wrap; word-wrap:break-word; word-break:break-all">...</td>
</source>
* IE 5.5以上用
:*參照：[http://msdn.microsoft.com/en-us/library/ms531182(VS.85).aspx white-space Attribute | whiteSpace Property]
<source lang="html4strict">
*預設的自動斷行
<td style="white-space:normal">...</td>
*不斷行
<td style="white-space:nowrap">...</td>
*pre模式
<td style="white-space:pre">...</td>
</source>
*IE用(另一種)
<source lang="html4strict">
<td style="word-wrap:break-word;word-break:break-all">...</td>
</source>
*FireFox用
<source lang="html4strict">
<td style="white-space:-moz-pre-wrap;white-space:pre-wrap">...</td>
</source>
*相關
:* [http://blog.miniasp.com/post/2008/06/Perfect-Solution-for-word-warp-cross-browser.aspx 完美解決網頁文字太長而導致破版的問題]

===字太多時自動出現捲軸Bar===
*參照：[http://msdn.microsoft.com/en-us/library/ms530824.aspx overflow Attribute | overflow Property]
<source lang="html4strict">
<pre style="overflow: auto;">...</pre>
</source>

===FireFox下cursor:hand沒有作用===
* 改用
 cursor:pointer

===以CSS自訂圓角框===
*透過PIE.htc使用（IE適用）
*[http://css3pie.com/documentation/getting-started/ CSS3 PIE]

;使用div與b與css設定
* [http://www.spiffycorners.com Spiffy Corners - Purely CSS Rounded Corners]

;使用div與css背景圖設定
* [http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml 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;

;其它
*[http://www.devwebpro.com/25-rounded-corners-techniques-with-css/ 25 Rounded Corners Techniques with CSS]
*[http://www.wowbox.com.tw/blog/article.asp?id=3148 border-radius與圓角]
*[http://www.roundedcornr.com/ roundedcornr]……CSS用的圓角圖產生器
*[http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php css-round-button]……CSS用的圓角按鈕

===影子效果===
*文字陰影
**參照:（IE限定）{{msdn|ms532985|DropShadow Filter}}
<pre>
 .text-shadow {
	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color='#000000', Positive='true');
	text-shadow: #000000 3px 3px 2px;
 }
</pre>
*區塊陰影
**參照:[http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ Drop shadow with CSS for all web browsers]
<pre>
 .box-shadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
 }
</pre>

===半透明===
*以50%的半透明為例
<pre>
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE8*/
   filter:alpha(opacity=50);  /*IE5、IE5.5、IE6、IE7*/
   opacity: .5;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
</pre>

===色彩漸層底色===
*[http://ie.microsoft.com/testdrive/Graphics/CSSGradientBackgroundMaker/Default.html CSS Gradient Background Maker]

===CSS Hooks===
*[http://api.jquery.com/jQuery.cssHooks/ jQuery.cssHooks]

===最小高度與最小寬度===
*[https://ithelp.ithome.com.tw/questions/10000649 解決IE6不支援css min-width與min-height]
<source lang="css">
.height100px {
min-height:100px;
height: auto !important;
height: 100px;
}

.width100px {
min-width:100px;
width: auto !important;
width: 100px;
}
</source>

===隨瀏覽器的解析度自動切換要載入那一個CSS檔===
*[http://adapt.960.gs/ Adapt.js - Adaptive CSS]

===以變數化簡CSS3的定義===
*[http://code.tutsplus.com/tutorials/quick-tip-never-type-a-vendor-prefix-again--net-17589 Quick Tip: Never Type a Vendor Prefix Again]

===排版時相關===
*[http://blog.darkthread.net/post-2014-11-01-inline-block-redundant-space.aspx 【笨問題】Inline-Block元素多出來的間隙 - 黑暗執行緒]
*[http://blog.darkthread.net/post-2014-11-02-css-clear-float.aspx TIPS-清除CSS float設定 - 黑暗執行緒]
*[http://blog.mukispace.com/pseudo-elements-10-examples/ 那些 CSS 偽元素可以幫你做的 10 個效果 - MUKI space*]

===修正排版問題===
* 如果發現次行的內容被接到右邊，但找不到原因的話，就用
<source lang="css">
 <div style="clear:both"></div>
</source>

===其他===
*[http://sofree.cc/ie6-ie7-ie8-firefox-css-hack/ CSS Hack - 解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！]


[[Category:W3C]]
[[Category:CSS]]
[[Category:樣式表語言]]