1. 程式人生 > >CSS常用屬性(筆記)

CSS常用屬性(筆記)

#Note {

    color: green;  /*設定字型顏色*/
    background-color: red; /*設定背景顏色*/
    font-size: 50px; /*設定字型大小*/
    font-style: oblique;  /*使文字傾斜*/
    font-weight: bold;  /*字型加粗*/
    font-family: '幼圓';  /*設定字型樣式*/
    font: italic bold 16px/20px arial;  /*font的綜合使用,分別代表設定 斜體/加粗/大小/行高/樣式*/
    letter-spacing: 10px; /*字元間距,中文一個字當成一個英文字元*/
    word-spacing: 20px;  /* 單詞之間的間距,中文中間有空格的情況下會當作一個單詞來處理 */
    white-space: pre/nowrap;   /*預格式化,按文件的書寫格式保留空格,空行原樣顯示/不換行顯示*/
    line-height:19px;  /*設定行高*/
    text-align: center; /*設定文字水平居中對齊*/
    text-indent: 2em;  /*設定首行縮排,只能用於塊級元素*/
    text-decoration:none/underline/overline/line-through;  /* 去掉下劃線/下劃線/上劃線/刪除線 */


    border-style: dashed/double/dotted/solid;  /* 設定邊框樣式 單虛線/雙實線/點狀線/單實線 */
    border-width: 10px;  /* 邊框寬度 */
    border-color: purple;  /* 邊框顏色 */
    border-top-color: green; /* 設定邊框頭部樣式,物以類聚以此類推 top/bottom/left/right */
    border: 1px double green;  /* 統一設定,邊框的寬度,邊框的樣式,邊框的顏色 */
    border-collapse: collapse;  /*讓邊框摺疊*/ 
    outline-style: none; /* 去掉輪廓  連結有虛線 和 文字框有藍色邊框*/
    padding: 20px;  /* 將內邊距設定為上下左右均為20px 以此類推 top/bottom/left/right */
    margin: 100px;  /* 上下左右分別是100px 以此類推 top/bottom/left/right*/
    margin: 0 auto;  /* 外邊距讓盒子居中,水平方向  上下邊距為0 左右自動計算居中*/
    margin: 0; padding: 0;  /* 設定內外邊距為0 預設網站起初都會設定這個選項*/
    float: right/left/none;  /* 向右/向左/不/浮動 */
    overflow: hidden;  /* 把溢位的隱藏掉 使父元素具有包裹性 */
    overflow: visible/hidden/auto/scroll;  /*內容不會被修剪/溢位部分內容會被修剪/在需要時產生滾動條/終有滾動條*/
    clear: left/right/both;  /* 清除左側/右側/兩側/浮動 */
    position: static/relative/absolute/fixed;  /*自動定位/相對定位/絕對定位/固定定位*/
    z-index: 100; /* 層次劃分 */
    list-style: none; /* 去掉列表預設樣式 */
    
    
    display: none; /*隱藏層*/
    display: block;  /* 顯示層 */
    display: inline-block  /* 設定為塊級元素 */
    display:none/inline/block/inline-block;

    /*  display值的解釋:
    none:此元素不被顯示,在文件中被移除.
    block:此元素按塊級元素顯示:前後帶換行符,自己站=佔一行. 內聯元素  ==> 塊元素
    inline:此元素按內聯元素顯示:一個挨著一個.  塊元素  ==>  內聯元素
    inline-block:按行內標籤進行排版,但是可以設定寬高,而且高度可以影響行高 */
    

    background: #ccc url(../image/2.png) no-repeat scroll 0 -1709px;  /* backkgorund合寫的順序:背景顏色/背景圖地址/平鋪設定/背景圖滾動/背景圖位置 */
    background-color: #cda/transparent;  /* 設定背景色/透明色 */
    background-image: url(../img/a.png);  /* 設定背景圖片,優先順序要高於背景色 */
    background-repeat: repeat-x/repeat-y/repeat/no-repeat/inherit;  /*設定背景圖片是否重複/橫向重複/縱向重複/橫向縱向都重複/不重複/繼承父類的方式*/
    background-position: left/right/top/bottom/center;  /*設定背景影象的開始位置*/
    background-position: left bottom;  /*設定圖片左邊和底部對齊*/
    background-position: 60% 50%; /*以xy軸的起始點為0%,來確定位置*/
    background-position: -500px 0; /*以xy軸座標,以圖片的左上角為點,-500px 0 就是左上角的座標*/
    background-attachment: scroll/fixed; /*設定背景圖是否固定 fixed背景圖固定/scroll隨著文字內容滾動 預設值*/
    vertical-align: middle; /* 設定行內塊對齊方式(使用display-inline-block進行對齊小圖示時使用) */
    border-radius: 50%/100px;  /*邊框圓角設定 兩種表現形式:百分比和畫素*/

}