css基礎

css指層疊樣式表 (Cascading Style Sheets)，樣式定義如何顯示 HTML 元素，樣式通常存儲在樣式表中
css常用屬性
    背景：
        background-color:background:transparent; /*透視背景*/
        background-p_w_picpath : url(/p_w_picpath/bg.gif); /*背景圖片*/
        background-repeat : repeat; /*重複排列-網頁默認*/
        background-repeat : no-repeat; /*不重複排列*/
        background-repeat : repeat-x; /*在x軸重複排列*/
        background-repeat : repeat-y; /*在y軸重複排列*/
            背景位置
            background-position : % %; /*背景圖片x與y軸的位置*/
            background-position : top; /*向上對齊*/
            background-position : buttom; /*向下對齊*/
            background-position : left; /*向左對齊*/
            background-position : right; /*向右對齊*/
            background-position : center; /*居中對齊*/


    文本：    text、word、direction（文本操作：通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。）
       text-indent(縮進文本)  text-indent: em;
       text-align（水平對齊）    text-align:center
       word-spacing（字間隔）  word-spacing: px;
       text-decoration（文本裝飾）text-decoration: none
       direction（文本方向）     direction:rtl;

    框模型：背景應用於由內容和內邊距、邊框組成的區域。
        padding（內邊距）
        padding-top:px; /*上邊框留空白*/
        padding-right:px; /*右邊框留空白*/
        padding-bottom:px; /*下邊框留空白*/
        padding-left:px; /*左邊框留空白

       margin（外邊距）
       margin-top:px; /*上邊界*/
       margin-right:px; /*右邊界值*/
       margin-bottom:px; /*下邊界值*/
       margin-left:px; /*左邊界值*/


        border（邊框）可設置值：寬度，樣式，顏色
            框線位置
            border-top : px solid border-bottom : px solid border-left : px solid border-right : px solid 框線樣式
            solid /*實線框*/
            dotted /*虛線框*/
            double /*雙線框*/

    CSS文字屬性：
        color : font-family : 宋體,sans-serif; /*文字字體*/
        font-size : pt; /*文字大小*/

        文字對齊
            text-align:right; /*文字右對齊*/
            text-align:left; /*文字左對齊*/
            text-align:center; /*文字居中對齊*/
            text-align:justify; /*文字分散對齊*/
        vertical-align屬性
            vertical-align:top; /*垂直向上對齊*/
            vertical-align:bottom; /*垂直向下對齊*/
            vertical-align:middle; /*垂直居中對齊*/
            vertical-align:text-top; /*文字垂直向上對齊*/
            vertical-align:text-bottom; /*文字垂直向下對齊*/

    定位：
        position   把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
        top          定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
        right     定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
        bottom    定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
        left      定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
        overflow   設置當元素的內容溢出其區域時發生的事情。
        clip      設置元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
        vertical-align 設置元素的垂直對齊方式。
        z-index       設置元素的堆疊順序。

        相對定位：注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
            position: relative;
              left: px;
              top: px;
            }

        絕對定位：絕對定位使元素的位置與文檔流無關，因此不佔據空間。
            position: absolute;
              left: px;
              top: px;
            }

    選擇器
        元素選擇器
            爲某個 HTML 元素，比如 p、h1、em、a設置樣式
            html {color:black;}
            h1 {color:blue;}
            h2 {color:silver;}

        選擇器分組
            h2 元素和段落都有灰色。
            h2, p {color:gray;}

        類選擇器
            類選擇器允許以一種獨立於文檔元素的方式來指定樣式。
            該選擇器可以單獨使用，也可以與其他元素結合使用。
            .important {color:red;}
            只有段落顯示爲紅色文本：
            p.important {color:red;}
            假設 爲 important 的所有元素都是粗體，而 爲 warning 的所有元素爲斜體，中同時包含 important 和
             warning 的所有元素還有一個銀色的背景 。就可以寫作：
            .important {font-weight:bold;}
            .warning {font-style:italic;}
            .important.warning {background:silver;}

        ID選擇器
        屬性選擇器
        a[href] {color:red;}