牛腩作業系統--CSS學習

king_eagle2015發表於2015-05-21
作業系統CSS

   牛腩系統對前臺介面的設計採用了DIV+CSS的方法：DIV是層疊樣式表中的位置和層次，是用來對HTML文件大塊內容提供結構和背景；CSS是動態改變介面樣式的好幫手。

【CSS是什麼】

        首先要先理解一下網頁文件構成元素：內容層、表現層和行為層。

        內容層用於向大眾傳達資訊，嵌入在定義語義和結構的HTML或XHTML標記內，形式有文字，圖片，聲音，動畫等；表現層則負責將內容如何呈現出來，牛腩系統是通過web頁面的形式展現；行為層設計與文件的實時使用者互動，由JavaScript處理這種任務。


CSS—Cascading Style sheet 層疊樣式表，是控制網頁文件的表現層一種推薦方式，使網頁樣式和內容完全分離。這樣可以讓樣式迴圈複用，減少程式碼量，同時可以降低儲存成本和頻寬，讓訪問者更快捷的進入網頁。總結一下，css結合HTML負責網頁前臺設計樣式，讓設計者更加容易維護，讓訪問者對未來發布的網頁更容易進入。

【基本內容】

        （1）@規則：對css解析器的指令和指導。
                  @charset規則用於指定外部樣式表的字元編碼，通常位於檔案第一行。
                  @import url（）；將一個樣式表匯入另一個樣式表。eg：@import url（“/css/main.css”）；
                  @page{} 為分頁媒介樣式表的頁box指定邊距值。
                  @namespace引用名稱空間，跟C/S中引用類似。
  
         （2）選擇符，匹配HTML或XML文件的一組元素。規則集=選擇符+宣告塊
                  1>通用選擇符：*{宣告塊}，可以匹配任意元素型別。
                  2>元素型別選擇符：某一特定元素型別匹配。eg：ul{宣告}
                  3>類選擇符：.classname{}
                  4>ID選擇符：#ID{}
                  5>屬性選擇符[href]{}
                  6>選擇符分組：td，th{宣告塊}   、#foo td,th{}  、#foo td,#foo th{}
                  7>後代選擇符：ul li{宣告塊}

          （3）偽類，類似HTML中的類，作為使用者與文件互動的結果。
                  ：link{} 應用於具有href的a元素，且連結未訪問
                  ：visited{}  應用於已訪問的href的a元素
                  ：active{宣告塊} 用於匹配正在啟用狀態的任何元素
                  ：hover{}用於丁點裝置已指定的元素，例如滑鼠懸停在元素上方
                  ：foucus{} 匹配鍵盤輸入焦點的任何元素
                  ：empty{} 匹配沒有子元素的元素
                  ：target{}文件URL紅片段標示符的目標
                  ：checked{}匹配像檢查框或單選按鈕這樣被選中或處於“開啟”狀態的元素

           以上是一些常見的CSS配置內容。

【box模型】

                                            
         CSS的box模型基本組成屬性：內容(content)、填充(padding)、邊框(border)、邊界(margin)
   
         之所以成為盒子結構，因為其外形像盒子一樣，內容是盒子中裝的東西，填充就像盒子中用於保護內容的東西，邊框是盒子本身，盒子的堆放要保留一些邊界，這樣利於盒子的存放。

        盒狀結構摒棄了以前對網頁設計時直接對圖片，文字的排版，每一個網頁的設計都是寫死的。盒狀結構將不同的內容塊組合在一起，隨時按照需要進行排版，大大方便了設計人員進行排版。

【總結】

        對於一項新內容的學習，通過對一個系統的操作可以讓我們馬上上手，但我們還應時刻保持全域性觀，站在全域性的角度對學習的內容做分析，這樣才能讓知識有條不紊。



相關文章