css基礎

層疊樣式表單CSS(Cascading Style Sheets),簡稱樣式表。

CSS主要的優點

     1.通過單個樣式表控制多個文檔的佈局

     2.更精確的佈局控制

     3.爲不同的媒體媒體類型採取不同的佈局

CSS語句的格式

      1.選擇符:通常是用戶希望定義的HTML元素或標籤或者是屬性,並且每個屬性都有一個值。屬性和值被冒號分開,並由花括號包圍。

          如:b{color:blue}a是選擇符,花括號是聲明,聲明一次由2部分構成:屬性color和值green.

          需要注意的問題:

               a.當屬性的值遇到多個單詞時候,值必須加上引號。

               b.如果需要對一個選擇符指定多個屬性時,使用分號隔開

               c.用/*註釋內容0*/

               d.樣式的繼承:嵌套在HTML標籤中HTML標籤,都會自動繼承外層標籤設置的樣式規則。

           CSS選擇符:

           1.HTML選擇符:以html標籤作爲選擇符

                如:p{font-size:12;color:blue}

                      h1{text-align:right;color:blue}

              包含選擇符是指用空格隔開的兩個或多個單一選擇符組成的字符串。

                如:div p{color:blue;font-size:15}

            *包含選擇符的優先權比單一選擇符優先權高

           2.CLASS選擇符:使用HTML標籤的class屬性設置值的選擇符,有2種:關聯class選擇符和獨立class選擇符,以一個點號定義。

                 a.關聯選擇符:可以爲同一個元素定義不同的樣式

                    如:

                          p.warning{color:red}

                          p.normal{color:blue}

                          <p class="warning">這是warning</p>

                          <p class="normal">這是normal</p>

                  b.獨立選擇符:可以爲不同的元素定義相同的樣式

           3.ID選擇符:定義一個特定的html標籤,一個網頁只能有一個標籤使用某一個ID屬性值,用“#”來定義

                     如:

                         <style type="text/css">

                          #title{text-align:right;color:blue}

                          </style>

                          <div id="title">hello</div>

               IDselector只能爲單個的html標籤設置樣式,因此具有一定的侷限性,但是ID屬性在javaScript得到廣泛的應用。

           優先級:id>class>html

css設置方式

           1.內聯樣式:靈活,簡單方便

           2.嵌入樣式:一個樣式可以在一個頁面多次應用

           3.外部樣式:需要有一個外部的樣式文件.css,可以爲多個網頁所共同引用,即減少代碼,又可以做到統一頁面風格

           僞元素選擇符:是指爲一個html元素的各種狀態和部分內容定義樣式的一種方式。

            如:a:hover{color:blue}鼠標點到哪里哪里就發生變化。

            四種超鏈接標籤的僞元素的含義

                1.a:active 表示超鏈接選中的狀態 

                2.a:hover 表示鼠標移動到超鏈接上的狀態

                3.a:link 表示超鏈接的正常狀態

                4.a:visited 訪問過的超鏈接的狀態

我們一般用CSS僞元素與CSS類配合使用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章