基礎系列（2）--- css1

css組成

1 css語法組成
2    選擇器 和 聲明 （多個聲明用分號隔開）
3        聲明包括 屬性和屬性值(多個屬性值用空格隔開)
4 
5    語法：
6        選擇器{
7            屬性: 屬性值;
8            屬性: 屬性值1 屬性值2;
9        }

 css樣式表

1.內部樣式表
    一般放在head標籤內

2.外部樣式表
    a: <link rel="stylesheet" href="url" type="text/css">
        rel:鏈接css和html
        href: css樣式表的路徑
        type: 定義文檔類型，h5一般省略不寫
    b. <style>
            @import url("")
       </style>
       一般不用這種方式

3.內聯樣式表（行內樣式表）

link 和 @import區別
    （1）本質差異： link屬於html語言,@import是css定義的方式
    （2）加載順序： link導入的css是和結構一塊兒加載，@import是結構加載完再執行的
    （3）兼容： link無兼容問題，@import 低版本IE不兼容
    （4）js控制DOM樣式的區別

權重關係

內聯樣式表 > 內部樣式表 和 外部樣式表（具體權重看在html中的順序，後面覆蓋前面的相同屬性）

內聯樣式表只做用在當前元素上

css選擇器

1.類型選擇符（標籤選擇符）

html中全部標籤均可以直接對元素選擇
特色：對頁面中全部當前類型元素有效
應用：清除某個元素默認樣式、統一某個元素樣式

2.id選擇符

 特色：id名字在一個頁面中惟一
 應用：用來劃分網頁外圍結構！

3.類選擇符

特色：一個元素能夠有多個class名稱
應用：能夠定義一類樣式

4.包含選擇符

    語法：符元素選擇符  子元素選擇符{css語法}（中間用空格隔開）

5.羣組選擇符

    語法： 選擇符1，選擇符2， 選擇符3{css語法} （中間用逗號隔開）

6.僞類選擇符

a:link、a:visited、a:hover（經常使用）、a:active

7.通配符

 *

選擇符權重

內聯樣式表  >  id  >  class、僞類  >  標籤 

 (1000)     (100)      (10)         (1)

包含選擇符權重等於各個權重之和

羣組選擇符權重各自不變

 命名規範

1.不能是關鍵字
2.字母開頭，後面可接 字母、數字、下劃線、連字符

連字符：
  box-left    box-right    box-center
下劃線
 box_left    box_right    box_center
駝峯式
 boxLeft    boxRight    boxCenter