「CSS」修訂間的差異

出自ProgWiki
跳至導覽 跳至搜尋
 
(未顯示同一使用者於中間所作的 27 次修訂)
行 4: 行 4:
 
*[http://www.w3schools.com/css/default.asp CSS - w3schools]
 
*[http://www.w3schools.com/css/default.asp CSS - w3schools]
 
*[http://www.w3.org/Style/CSS/ CSS - W3C]
 
*[http://www.w3.org/Style/CSS/ CSS - W3C]
*[http://msdn.microsoft.com/en-us/library/ms531205.aspx Cascading Style Sheets] - MSDN Library
+
*[http://msdn.microsoft.com/en-us/library/ms531209.aspx Cascading Style Sheets] - MSDN Library
:*[http://msdn2.microsoft.com/en-us/library/ms531209.aspx CSS Reference] - MSDN Library
+
*[https://developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Reference] - MDN
 
*[http://css.1keydata.com/tw/ CSS 語法教學]
 
*[http://css.1keydata.com/tw/ CSS 語法教學]
 
*[http://www.web66.com.tw/web66/_file/1794/upload/designdesc/dd_css07.html CSS小教室]
 
*[http://www.web66.com.tw/web66/_file/1794/upload/designdesc/dd_css07.html CSS小教室]
行 21: 行 21:
 
*[http://www.oreilly.com/catalog/9780596529307/index.html High Performance Web Sites]
 
*[http://www.oreilly.com/catalog/9780596529307/index.html High Performance Web Sites]
 
*[http://csssprites.com/ CSS Sprites generator]
 
*[http://csssprites.com/ CSS Sprites generator]
*[http://blog.miniasp.com/post/2008/12/CSS-Spriting-without-using-background-image.aspx 使用 CSS Sprites 設計網頁但不用 background-image 的技巧]  
+
*[http://blog.miniasp.com/post/2008/12/CSS-Spriting-without-using-background-image.aspx 使用 CSS Sprites 設計網頁但不用 background-image 的技巧]
  
 
==常用CSS語法==
 
==常用CSS語法==
行 103: 行 103:
 
|-
 
|-
 
|}
 
|}
 +
===旋轉、傾斜、縮放===
 +
*[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===
 
===CSS framework===
* [http://code.google.com/p/blueprintcss/ blueprintcss]
+
{{wikipedia|CSS_framework|lang=en}}
 +
*[https://bulma.io/documentation/overview/start/ Bulma]
 +
*[https://github.com/Wolfr/clank Clank]
 +
*[[Bootstrap]]
 +
*[[Blueprint]]
 +
*[https://github.com/GumbyFramework/Gumby Gumby]
 +
*[https://kube7.imperavi.com/ Kube]
 +
*[http://purecss.io/ Pure]
 +
*[http://semantic-ui.com/ Semantic UI]
 +
*[https://tailwindcss.com/ Tailwind CSS]
 +
*[http://daneden.github.io/Toast Toast]
 +
*[http://www.yaml.de/ YAML]
 +
 
 
===CSS Table===
 
===CSS Table===
* [http://icant.co.uk/csstablegallery/index.php CSS Table Gallery]
+
*[http://icant.co.uk/csstablegallery/index.php CSS Table Gallery]
 +
===按鈕特效===
 +
*[http://ianlunn.github.io/Hover/ Hover.css]
 
===Reset CSS===
 
===Reset CSS===
 
;Reset CSS是為了打消不同遊覽器在CSS的預設定義不同的差異,所以對於CSS做一致性的重新設定。
 
;Reset CSS是為了打消不同遊覽器在CSS的預設定義不同的差異,所以對於CSS做一致性的重新設定。
行 128: 行 164:
  
 
;其他版本
 
;其他版本
* [http://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS]
+
*[http://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS]
* [http://developer.yahoo.com/yui/reset/ YUI 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.]
  
 
===其他應用範例===
 
===其他應用範例===
行 241: 行 278:
 
*[http://www.roundedcornr.com/ roundedcornr]……CSS用的圓角圖產生器
 
*[http://www.roundedcornr.com/ roundedcornr]……CSS用的圓角圖產生器
 
*[http://www.hedgerwow.com/360/dhtml/css-round-button/demo.php css-round-button]……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>
  
 
===半透明===
 
===半透明===
行 255: 行 315:
 
===CSS Hooks===
 
===CSS Hooks===
 
*[http://api.jquery.com/jQuery.cssHooks/ jQuery.cssHooks]
 
*[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>
  
 
===其他===
 
===其他===
行 260: 行 353:
  
  
[[Category:W3C相關]]
+
[[Category:W3C]]
 +
[[Category:CSS]]
 +
[[Category:樣式表語言]]

於 2021年12月25日 (六) 14:34 的最新修訂

CSS(Cascading Style Sheets),參照:『維基百科~CSS

技術文件

CSS相容性

CSS Sprites

常用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; (置右對齊)

vertical-align 垂直對齊 vertical-align:top;(置頂對齊)
vertical-align:middle;(置中對齊)

vertical-align:bottom;(置下對齊)

定位相關CSS

屬性 用途 設定值
position 定位方式
top
left
width
width

CSS Box Model

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

旋轉、傾斜、縮放

用途 屬性
旋轉
.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);  }

排版用(多欄位)

其他

CSS framework

參照:『維基百科~CSS_framework

CSS Table

按鈕特效

Reset CSS

Reset 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; 
}
其他版本

其他應用範例

FAQ

CSS引用方法

Html 檔頭定義型

<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>

外部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以上用
*預設的自動斷行
<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

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

FireFox下cursor:hand沒有作用

  • 改用
cursor:pointer

以CSS自訂圓角框

  • 透過PIE.htc使用(IE適用)
  • CSS3 PIE
使用div與b與css設定
使用div與css背景圖設定
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;
其它

影子效果

 .text-shadow {
	filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color='#000000', Positive='true');
	text-shadow: #000000 3px 3px 2px;
 }
 .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');
 }

半透明

  • 以50%的半透明為例
   -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*/

色彩漸層底色

CSS Hooks

最小高度與最小寬度

.height100px {
min-height:100px;
height: auto !important;
height: 100px;
}
 
.width100px {
min-width:100px;
width: auto !important;
width: 100px;
}

隨瀏覽器的解析度自動切換要載入那一個CSS檔

以變數化簡CSS3的定義

排版時相關

修正排版問題

  • 如果發現次行的內容被接到右邊,但找不到原因的話,就用
 <div style="clear:both"></div>

其他