天天看點

CSS樣式表

1.樣式複用,友善網站的後期維護;

        2.實作頁面的精确控制,實作精美複雜頁面;

        3布局定位;

        4外觀美化;

  1 【三種使用CSS的方式】

     1、行内樣式表:直接在HTML開始标簽中使用style=""的方式引用;

                  特點:将CSS代碼與HTML代碼完全糅雜在一起,不符合W3C關于内容與表現分離的要求。不利于樣式複用;

               優先級:最高。

     2、内部樣式表: 在<head></head>中,使用<style type="text/css"></style>方式引用;

                  特點:将CSS代碼與HTML代碼分離,但是沒有徹底分離CSS檔案與HTML檔案,不利于多頁面複用樣式。

     3、外部樣式表:使用link标簽連結CSS檔案。 

        <link rel="stylesheet" type="text/css" href="css/01css.css" />

                 特點:實作了CSS與HTML的徹底分離,有利于樣式複用及後期維護。

         【通用選擇器】

                       1、寫法: *{}

                       2、作用: 選中頁面中的所有HTML标簽

                       3、優先級:最低!

          【标簽選擇器】

                       1、寫法: HTML标簽名{ }

                       2、作用: 選中所有對應的HTML标簽,并修改其樣。

         【類選擇器 class選擇器】

                     1、寫法: .選擇器名{}

                     2、調用: 在需要修改樣式的HTML标簽上,使用class="選擇器名"

                     3、優先級: 當作用于同一層時,class選擇器>标簽選擇器

                       .list{

                      color: blue;

                             }

          【ID選擇器】

                 1、寫法: #選擇器名{}

                 2、調用: 在需要修改樣式的HTML标簽上,使用id="選擇器名"

                 3、優先級:同一層時,id選擇器>class選擇器

                 4、ID選擇器是唯一的!同一頁面嚴禁出現同名ID!!!

                     #first{

                     color: green;

                                 }

         【後代選擇器】

                    1、寫法: 選擇器1 選擇器2 …… 選擇器N {}

                    2、生效規則: 選擇器2必須是選擇器1的【後代】……以此類推

          【子代選擇器】

                        1、寫法: 選擇器1>選擇器2>……>選擇器N{}

                        2、生效規則: 選擇器2必須是選擇器1的【直接子代】……

                         div>ul>li{

                                          }

           【交集選擇器】

                       1、寫法: 選擇器1選擇器2……選擇N{}

                      2、生效規則: 必須同時滿足所有選擇器,才會生效

                   li.list#first{

                                }

             【 并集選擇器】

                       1、寫法: 選擇器1,選擇器2,……,選擇N{}

                       2、生效規則: 滿足任意一個選擇器,均可生效

                       .list,#first{

                         color: darkslategray;

                                        }

          【選擇器命名規範】

                            1、隻能有字母、數字、下劃線組成;

                            2、開頭不能是數字。

          【選擇器優先級】

                         1、就近原則:近者優先。

                         2、當作用于同一層時:可有權重計算

                     權重劃分: 标簽選擇器 1'

本文轉自xsster51CTO部落格,原文連結:http://blog.51cto.com/12945177/1950811 ,如需轉載請自行聯系原作者