1. 程式人生 > >第二天.css 樣式

第二天.css 樣式

css基礎選擇器

    標籤選擇器

    類選擇器

    多類名選擇器

    ID選擇器

    萬用字元選擇器

    

1.當既存在外部樣式,又存在內部樣式時,根據css樣式排列順序,位於較後面的若存在相同的定義樣式,會替換前面的樣式。如行內樣式,會替換外部樣式。

2.若存在多類選擇器,也只與css樣式的排列順序有關,與類選擇器中類的書寫順序無關。

3.ID 選擇器只能使用一次,class選擇器可以使用多次

eg:

<html>

     <head>

           <style>

                .firstStyle{

                      font-size: 50px;

                      }

               .secondStyle {

                    font-size :100px;

                    color:yellow;

                    }

          </style>

     </head>

    <body>

                <div  class="secondStyle   firstStyle">白居易</div>

    </body>

</html>

2.更改字型

font-weight:bold=700; 加粗;/normal 正常=400    數字沒有單位

font-size:20px  數字要帶px單位

<em></em> 加強標籤  傾斜文字自動變色  加強      <i></i> 也有此作用

font-style:normal 讓斜體變正常

font-family: 字型

字型聯合設定

排列順序:font-style/ font-weight/ font-size/ line-height(行高  行與行之間的距離)/ font-family 

字型連寫   必不可少屬性font-size;font-family;

font: 20px  "微軟";

h1 {

text-align:center  (裡面的文字居中對齊   而不是h1,h1是個盒子)

}

text-indent: 2em 首行縮排兩個字元

text-decoration: none/ underline 是否加線   

<s>現價 199</s>  在內容中間產生一天橫線。

取消橫線即設定  s {

        text-decoration:none;

}

del 標籤與 s 標籤有相同的作用。

u、ins標籤 給文字 新增下劃線:text-decoration:underline

3.複合選擇器

子代選擇器  各個標籤用空格隔開(子代中標籤的樣式)

div ul  li{

}

後代選擇器   >

div ul>li

交集選擇器

div.class {

}

eg: div.red  red 為一個class

並集選擇器 ,

eg: a,span {

}

連結偽類選擇器(:)

lvha 的順序定義

未訪問時的文字格式   a:link {

}

訪問時的文字格式  a:visited {

}

懸浮時的文字格式  a:hover {

}

點選時的文字格式 a:active {

}

 

span,em,i {

}