「CSS」修訂間的差異

出自ProgWiki
跳至導覽 跳至搜尋
（未顯示同一使用者於中間所作的 3 次修訂）
行 128： 行 128：
 
==其他==
 
==其他==
 
===CSS framework===
 
===CSS framework===
−
{{wikipedia|CSS_frameworks|lang=en}}
+
{{wikipedia|CSS_framework|lang=en}}
−
*[http://getclank.com/ Clank]
+
*[https://bulma.io/documentation/overview/start/ Bulma]
−
*[http://www.columnal.com/ Columnal]
+
*[https://github.com/Wolfr/clank Clank]
 
*[[Bootstrap]]
 
*[[Bootstrap]]
 
*[[Blueprint]]
 
*[[Blueprint]]
−
*[http://gumbyframework.com/ Gumby]
+
*[https://github.com/GumbyFramework/Gumby Gumby]
−
*[http://imperavi.com/kube/ Kube]
+
*[https://kube7.imperavi.com/ Kube]
 
*[http://purecss.io/ Pure]
 
*[http://purecss.io/ Pure]
 
*[http://semantic-ui.com/ Semantic UI]
 
*[http://semantic-ui.com/ Semantic UI]
 +
*[https://tailwindcss.com/ Tailwind CSS]
 
*[http://daneden.github.io/Toast Toast]
 
*[http://daneden.github.io/Toast Toast]
 
*[http://www.yaml.de/ YAML]
 
*[http://www.yaml.de/ YAML]

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

其他

取自「https://www.player.idv.tw/prog/index.php?title=CSS&oldid=16259」