css - 語法說明

作者：小角落..│2008-02-03 15:40:00│巴幣：0│人氣：2644

本文引用自此

本文引用自此

如果這篇看的一點都不懂的話，請看css - 超級新手教學
如果找不到自己想要的，請看css - 導引 (看圖說故事)
想要找小細部的設定，請看css - 各區塊分類解說圖(2009/4/13)
(不過這要20元喔!!不想花錢的可以看巴哈提供的分類區塊解說圖)

這裡是其他大大的css教學css - 巴哈css教學網
色碼表、上傳空間、螢幕檢色器css - 好用軟體+好文推薦

這是要方便我自己看的..不然總是改來改去一頭霧水><
藍色部分為可貼在CSS內的,
褐色部分為,可以貼CSS內的其他屬性

＊註解即/*我是註解*/

　　『我是註解』這四個字,程式不會執行,便於自己編輯的時候使用

＊顏色

　　#FFCCFF 網頁色碼(通常有六碼,若是像左方那樣兩兩相同,可改成#fcf三碼,前面一定要加『#』)
　　red　　　英文色碼(英文的,前面不用加『#』)
　　可參考..色碼表
　　若要使圖片不顯示(透明)可寫成background:none;或是
　　filter:Alpha(opacity=70,finishOpacity=1,style=0);/*半透明*/
　　　或是 filter:Alpha(opacity=70);

　　　　position: relative;/*加上這個語法，文字內容就不會跟著透明*/

＊背景

　　background-image:url(http://); /*圖片連結位置*/
　　background-attachment:fixed; /*圖片位置要固定*/
　　background-repeat:no-repeat; /*圖片是否要重複顯示*/
　　background-position:right; /*圖片對齊格式*/
　　width:400px; /*文字區塊的寬度*/
　　height：20px;/*文字區塊的高度*/

★合起來的寫法↓
　　a. background:url(http://) no-repeat 5% 20% fixed #000; (請看最下面說明)
　　b. background:url(http://) no-repeat fixed left top #000;
　　　﹥圖片不重複..圖片固定..靠左邊..靠上面..圖片以外 , 其他地方填滿黑色
　　　　( 每個指令之間須有『半形空格』)

★background: url() no-repeat right ; /*背景圖片網址*/
　background-position: down;

　綠色部分是主設定
　紅色部分是輔助設定
　效果是綠＞紅

　說明:
　　如果背景不用圖片,可改成background-color:#FFF; 填上純顏色,但是兩個語法不能同時使用。

　　background-attachment（背景附著）：在這裡你可以決定背景圖片的位置。
　　　　scroll：隨著捲軸捲動　　　　　　fixed：固定不動
　　　　inherit：繼承之前的設定

　　background-repeat(背景重複)：看看背景圖片是不是要重複顯示。
　　　　repeat：重複顯示　　　　　repeat-x：只在X軸重複顯示
　　　　no-repeat：不重複顯示　　 repeat-y：只在Y軸重複顯示
　　
　　background-position(背景位置)：決定背景要置中、靠左、靠右的設定。
　　　　left：靠左對齊　　　　　center：置中對齊　　　　　　　right：靠右對齊　　　　　
　　　　top：向上對齊　　　　　middle：置中對齊　　　　　　bottom：向下對齊　　
　　　　inherit：傳統繼承(預設)

＊邊框

　　border-top:#FFF 1px dashed;/*邊框上面顏色寬度樣式*/
　　border-right:#FFF 1px dashed;/*邊框右邊*/
　　border-bottom:#FFF 1px dashed;/*邊框下面*/
　　border-left:#FFF 1px dashed;/*邊框左邊*/

　　邊框樣式屬性有：
　　　　dotted：點狀線　　　dashed：虛線　　　solid：實線　　　outset:凸起狀
　　　　double：雙實線　　　groove：溝道狀　　ridge：山脊狀　　inset：凹陷狀

　　當四邊都一樣時，可寫成
　　　　 border: 1px dashed #fff; /* 邊框寬度樣式顏色 */

＊文字

　　color: #006699; /*文字顏色*/
　　font-family:"Times New Roman"; /*文字字型*/
　　font-size: 12pt; /*文字大小*/
　　font-style: normal; /*文字樣式*/
　　line-height: 1.5px; /*文字行高*/
　　font-weight: bold; /*文字粗細(bold粗　　none細)*/
　　text-align: center; /* 文字對齊方式（水平）(left左.center中.right右) */
　　vertical-align: top; /* 文字對齊方式（垂直)*/
　　text-decoration: underline;/*文字加底線(none無底線.underline有底線)*/
　　padding-left:275px;/*文字距離左邊275px*/
　　padding-top:35px;/*文字距離上方35px*/

＊捲軸

　　body{
　　　scrollbar-face-color: #fff; /*設定軸面顏色*/
　　　scrollbar-highlight-color:#fff; /*設定軸面三角左邊顏色*/
　　　scrollbar-shadow-color: #fff; /*設定軸面三角右邊顏色*/
　　　scrollbar-3dlight-color: #fff; /*設定左立體邊顏色*/
　　　scrollbar-darkshadow-color: #fff; /*設定右立體面顏色*/
　　　scrollbar-arrow-color: #fff; /*設定箭頭的顏色*/
　　　scrollbar-track-color: #fff; /*設定軸軌的顏色*/
　　　}

＊背景補充說明
﹥background:url(http://) no-repeat 5% 20%;　　
　　5% -- 圖片與左邊距離左右全部的5%..
　　20% -- 圖片與上面距離上下全部的20%
　　與background-position:right; 有點像,只是可以較微調

舉例:橘色的框是限定的表格大小,
就是說..你上方的主圖..已經被『無形的table』限制住了,
即使設定100% , 也不可能跑到網頁最右邊去..
↓0% 0%,在最左邊