[ plurk css ] 更新～常用CSS清單－金羽銀華

繼五月份發出的 [ 噗版大變身 ] 建立好用的資源庫與工具=變身基礎功常練勤更新這篇文章後，

終於，再次整理過一遍自己常用的CSS。

每隔一段時日根據自己的需要，整理一遍、更新一遍，這樣使用上將更為順手、便利～

SAMPLE GOOD

是我最新版的「基本款」噗版基礎，將這段時日許多新的嘗試、設計風格，放在裡面，

這篇就將常用的CSS項目，新整理過的，放上來，有需要的朋友請參考囉～ ^ ^ +

/*常用CSS清單*/
/*Organize by Be Myself Inc. M6*/

各項目以「;」區隔
加強優先：在項目最後加上"重要"「!important;」

背景
寫一起
background:#000 url(http://) center top no-repeat;
/*背景底色，圖片網址，圖片置中靠上對齊、不重複*/
background-attachment:fixed ;   /*浮水印固定背景*/
background-position: 40% 40%; /*x軸40% y軸40%的地方固定*/
background:none !important; /*去除背景*/

分開寫
background-color:#000; /*背景底色*/
background-image : url(http://); /*背景圖*/
background-position:left top; /*靠左上對齊*/
background-repeat:no-repeat; /*不重複*/
background-repeat:repeat; /*重複*/
background-repeat:repeat-x; /*水平重複排列*/
background-repeat:repeat-y; /*垂直重複排列*/

位置
top:0px; /*距離上方*/
left:0px; /*距離左側*/
overflow:hidden; /*超出隱藏*/
overflow:auto; /*溢出內容自動顯示捲軸*/
overflow:no; /*不顯示捲軸*/
position:relative; /*相對位置*/
position:absolute; /*絕對位置*/
vertical-align:middle !important; /*水平位置對齊中間*/

框線
寫一起
border:1px solid #111 !important; /*四邊套用一樣框線*/
border:0 !important; /*去除框線*/

分開寫
寬度
border-width:1px;
樣式
border-style:solid; /*直線*/
border-style:dotted; /*點線*/
border-style:dashed; /*虛線*/
border-style:double; /*雙線*/
顏色
border-color:#111;

四邊套用不同樣式
border-top: px solid #;
border-right: px solid #;
border-bottom: px solid #;
border-left: px solid #;

邊界
寫一起
margin:0 !important; /*四邊為0*/
margin:0 auto; /*上下0左右自動調整*/

分開寫
margin-top:0px;
margin-right:12px;
margin-bottom:0px;
margin-left:12px;

間距
寫一起
padding:2px; /*四邊間距*/
padding:3px 5px; /*上下3左右5*/

分開寫
padding-top:3px;
padding-right:5px;
padding-left:5px;
padding-bottom:3px;

寬高
width:0px; /*寬度*/
height:0px; /*高度*/

min-width:200px; /*最小寬度*/
min-height:321px; /*最小高度*/
max-width:auto; /*最大寬度*/
max-height:auto; /*最大高度*/

文字
color:#222; /*顏色*/
font-size:11px; /*字元大小*/
font-family: "Meiryo", Helvetica, Helvetica Neue, Tahoma, Arial; /*字型*/
font-weight: regular;   /*常態*/
font-weight:bold; /*粗體*/
font-style: normal; /*標準*/
font-style: italic; /*斜體*/
line-height:180%; /*行距*/
letter-spacing:0.02em;   /*字元間距*/
text-decoration:underline; /*底線*/
text-decoration:none !important; /*去除底線*/
text-transform:normal; /*常態*/
text-transform: uppercase;   /*大寫*/
text-shadow:0px 0px 5px #ddd; /*陰影*/
text-align:center; /*置中對齊*/
text-align: left;    /*靠左對齊*/

a {text-decoration:none;outline:0 !important;} /*消除連結虛線框*/
a:focus {-moz-outline-style:none;}

a,a:link,a:visited, a:active {}   /*連結樣式*/
a:hover {} /*滑鼠移至效果*/

圓角
寫法一
-moz-border-radius: 0px 0px 2px 2px;   /*上右下左*/
-khtml-border-radius: 0px 0px 2px 2px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;

寫法二
-moz-border-radius:5px !important;
-webkit-border-radius:5px !important;
-khtml-border-radius:5px !important;
border-radius:5px !important;

透明度
filter:alpha(opacity=0) !important;opacity:0 !important;zoom:1;
/*透明度設0，隱藏起來*/
filter:alpha(opacity=70);opacity:0.7;zoom:1;    /*透明度70*/

外框陰影效果
-moz-box-shadow:0 1px 0 #000 !important;
-webkit-box-shadow:0 1px 0 #000 !important;
box-shadow:0 1px 0 #000 !important;

游標
cursor:pointer; /*指示*/
cursor:move;   /*移動*/
cursor:crosshair !important; /*十字*/