CSS初探

CSS簡介

 
CSS是Cascading Style Sheet的縮寫，它是一種用來表現HTML或
XML等檔案式樣的電腦語言，直譯過來是階層式樣式表，不過由於語言的差異，我覺得翻譯成“風格樣式表” 更合適，因為CSS的主要作用是美化、調整、布局網頁內容，更像是在定義網頁的風格。

    CSS內容

使用：首先需要先建立一個CSS，然後拖到想要引用的網頁的head中，表示將這兩個綁定到一起。

    標識：id class body。利用這些標識可以設定指定元素的樣式，如使用區塊層級元素div，在其內部定義id和class：<div id= "category" class="commonfrm">然後在CSS檔案中對category和commonfrm進行設定：

.commonfrm{    /* 公用架構*/    border:1px solid red;    float:left ;    }

和

#category{/*新聞類別架構*/ width: 150px; height :400px;    }

             該div及其它使用category或commonfrm的位置都將按已定義的樣式設定。

    標識之間的關係：它們的共同點是都可以對樣式進行設定，但是在對待同一個元素還是有區別的，在同一個元素中，class可以並列，但是id不可以，同時id和class可以並列。在css中，空格標識子級，逗號標識並列。

   標識的優先順序：三者的優先順序依次是：id>class>body。這可以理解為id是對一個指定的進行設定，而class是對一類進行設定，而body預設是對內部所有元素的設定，即有特殊有普通時，以特殊為準。

   容器：行內元素 區塊層級元素。

行內元素

    span（定義文本內區塊，單行）

    a（錨點）

    img（圖片）

    input（輸入框）

區塊層級元素

dir（目錄列表）

    div（常用區塊層級元素）
    dl（定義列表）
    h1（大標題）
    h2（副標題）
    h3（3級標題）
    h4（4級標題）
    h5（5級標題）
    h6（6級標題）
    hr（水平分隔線）
    ol（排序表單）
    p（段落）
    table（表格）
    ul（非排序列表）

常見使用組合

    <ol>

        <li>……</li>
        <li>……</li>
        <li>……</li>
    </ol>
表現為：
    1……
    2……
    3……
ul 無序列表，表現為li前面是大圓點而不是123
    <ul>
        <li>……</li>
        <li>……</li>
    </ul>

    更多css元素，可以下載CSS文檔流與區塊層級元素(block)、內嵌元素(inline)。

    CSS核心內容

   標準流：標準流是預設的排版順序，即按照body中的順序顯示。

   盒子模型：盒子模型，盒子模型實際上是為了方便理解記憶，將容器形象化的一個模型說明。即每個容器，自外向內都有外邊距margin、邊框border、內邊距padding。形象距離一下：有個木盒子，盒子裡面有塊糖，則盒子外面的部分可以稱之為外邊距，盒子本身的厚度可以稱之為邊框，而糖與盒子之間的距離可以稱之為內邊距。不管是內邊距、邊框還是外邊距都有方向之分，上下左右依次為top、buttom、left、right。例如定義某容器左邊框，則可以為

{/*木盒子左邊框參數*/ border-left:1px solid red;    }

   浮動：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：

    定位：相對 絕對。

相對定位：設定為相對定位的元素框會位移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。如果將
top 設定為 20px，那麼框將在原位置頂部下面 20 像素的地方。如果 left 設定為 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}

：

絕對位置：

#box_relative {  position: absolute;  left: 30px;  top: 20px;}

：

CSS個人總結

     
  剛剛接觸css，只是淺層次的瞭解。我覺得CSS作為一種語言也有其他語言的共性，比如可重用性：利用id或class、建立頁面範本使得重用性增強；將設計與網頁內容隔離，這點有點像分層。知識總有其內在的聯絡，找到這些關係，織成知識網，讓知識和這些語言一樣，達到可重用的效果。