CSS規則組成 CSS控制文字外觀 CSS如何基於Box Model 7.1CSS簡介     CSS規則：
        1.選擇器：指定宣告應用於哪個或那些元素（不同元素之間用逗號隔開）
        2.宣告：控制元素顯示方式的一個或多個屬性（屬性：值；若沒有最後的分號，則之後內容會被忽略）
7.1.1一個基本示例     CSS註釋：/*  註釋內容  */     pt：代表點（類似於px，用於文字）
    如果要指定class特性為某個特定值的元素，就需要在class特性的前面加上“ . ”
7.1.2繼承     某元素的屬性，會被它的子元素繼承
    更加特定的樣式規則，在特定的元素內，會取代繼承性
7.2新增CSS規則的位置     外部樣式表：將CSS放在單獨的資料夾內
    內部樣式表：將CSS寫在文件頭的的<style>中
    內聯樣式規則：將CSS寫在元素的特性style中
7.2.1<link>元素     描述兩個文件之間的關係，<link>元素總是空元素。附帶特性：
    1.rel：必須，指定包含連結的文件和連結到的文件之間的關係，樣式表是stylesheet     2.type：指定連結文件的MIME型別，CSS MIME型別是text/css     3.href：指定連結文件的url
    4.hreflang：用於編寫特定資源的語言
    5.media：指定文件使用的輸出裝置，如取值screen（表示筆記本或者桌上型電腦）
7.2.2<style>元素 7.2.3外部樣式表的優點     可作用多個頁面，不需重複載入    
7.3CSS屬性      7.4控制文字     控制文字外觀屬性分類：
        直接影響字型及其外觀的屬性：    
            font：通過該屬性將下列多個屬性組合到一起
            font-family：指定使用字型類別
            font-size：指定字型大小
            font-weight：指定字型是否加粗，及加粗程度
            font-style：指定字型正常、斜體還是傾斜的 
font-variant：指定字型正常、小型大寫字母             font-stretch：指定字型中實際字型寬度（還為被主流瀏覽器支援）             font-size-adjust：修改字型字元尺寸縱橫比（還為被主流瀏覽器支援）         對文字具有相同效果，但是與使用字型無關的屬性
7.4.1font-family屬性     指定元素內部文字使用的字型
    字型列表中的每個字型使用逗號隔開。若字型名中包含空格，則將該名用在雙引號內
7.4.2font-size屬性     指定字型的大小，經常用畫素為單位，還可以使用的單位：     長度：px    em    ex    pt    in    cm     pc    mm
    絕對大小：xx-small    x-small    small    medium    large    x-large    xx-large
    相對大小：smaller    larger
    百分比：包含該文字元素的比列計算得出
7.4.3font-weight屬性     控制字型加粗程度，取值：
    normal    bold（常用）    bolder    lighter    100    200    ...    900
7.4.4font-style屬性     字型傾斜顯示，取值：normal    italic    oblique
7.4.5font-variant屬性     和字母大小寫相關，取值：normal、small-caps（將小寫字元大寫，並且字型大小和小寫字母一樣）
7.4.6font-stretch屬性     還為被主流瀏覽器支援
7.4.7font-size-adjust屬性     還未被主流瀏覽器支援
7.5文字格式化     color：指定文字顏色     text-align：指定文字在包含元素內的水平對齊方式
    vertical-align：指定文字在包含元素內的垂直對齊方式
    text-decoration：指定文字上劃線、刪除線、下劃線或者閃爍     text-indent：指定文字相對於左邊框的縮排距離
    text-transform：指定文字內容全部大寫、全部小說、首字母大寫
    text-shadow：指定文字具有陰影（IE8不支援）
    letter-spacing：控制單詞的字母間距
    word-spacing：控制每個字型之間的空間量
    white-space：指定空白摺疊、保留、或不換行
    direction：指定文字方向（累死dir特性）
7.5.1color屬性     指定文字顏色
7.5.2text-align屬性     文字水平對齊方式，取值：left、center、right、justify（兩端對齊） 7.5.3vertical-align屬性     文字垂直對齊方式
7.5.4text-decoraction屬性     overline：上劃線     line-through：刪除線     underline：下劃線     blink：建立閃速文字
7.5.5text-indent屬性     屬性元素內，文字第一行 7.5.6text-shadow屬性     IE8還不支援    
7.5.7text-transform屬性     指定元素內容的大小寫，取值
    none：不發生變化
    capitalize：每個單詞的首字母大寫
    uppercase：全部轉化為大寫
    lowercase：全部轉化為小寫
7.5.8letter-spacing屬性     控制單詞字母間的距離
    無間距：字型的字母之間有正常的間距
    用normal可以取消字間距
7.5.9word-spacing屬性     設定單詞之間的距離
7.5.10white-space屬性     normal：遵循常規空白摺疊規則     pre：保留空白
    nowrap：只有遇到<br />文字才會換行
7.5.11direction屬性     ltr：文字方向從左到右
    rtl：文字方向從右到左
    inherit：繼續父元素文字方向
7.6文字偽類     改變文字的第一個字母或者第一行，通常與<p>組合使用 7.6.1first-letter偽類 7.6.2first-line偽類 7.7選擇器     如何將樣式規則用到元素上
7.7.1通用選擇器     通用選擇器是一個星號，eg：*{}
7.7.2型別選擇器     型別選擇器匹配以逗號隔開的元素列表所隔開的所有元素，eg：h1, h2{}
7.7.3類選擇器     類選擇器可以將一條規則附帶於class特性的一個或多個元素，class特性也可以附帶由空格隔開的幾個值，eg：
        .xxclass{}：任何class特性都可以附帶
        p.xxclass{}：只有<p>附帶該特性，才會起效果
7.7.4id選擇器     id選擇器與類選擇器類似，不過將前面的“ . ”替換成“ # ”
7.7.5子選擇器     子選擇器匹配的是另一個元素的直接子元素，用連結符“ > ”連線，IE從IE7開始支援，eg：td>b{}
7.7.6派生選擇器     匹配另一個元素的派生元素（指定元素內巢狀的元素），連結符空格，eg：table b{}
7.7.7相鄰兄弟選擇器     匹配指定元素的相鄰兄弟元素型別，連結符“ + ”，IE從IE7開始支援，eg：h1+p{}
7.7.8通用兄弟選擇器     指定匹配元素的任何兄弟元素型別，即使他們不是直接的先後關係，連結符“ ~ ”，IE從IE7開始支援，eg：h1~p{}
7.7.9使用子選擇器和相鄰兄弟選擇器降低標記中類的依賴性 7.7.10特徵選擇器     特徵選擇器可以使用元素附帶的特性及特性的值，IE從IE7開始支援，eg：
     7.8長度 7.8.1相對單位
    1.px
    2.em：相當於當前字型的高度，在文件不同部分，字型高度可能不一樣，所以em單位也具有不用高度
    3.ex：小寫字母x的高度，所以和字型大小及字型型別有關 7.8.2絕對單位     pt    pc    in    cm    mm
7.8.3百分比 7.9box model簡介     決定如何在瀏覽器視窗中放置元素         border：每個框都有一個邊框，即使看不見
    margin：框邊緣和相鄰框之間的距離（頁邊距）
    padding：框的內容和邊框之間的距離（內邊距）
    頁邊距：假設有兩個相鄰的邊框，頁邊距為0，那麼這兩個框將會接粗在一起，它們的框比其他的線粗；若頁邊距不為0，垂直方向上顯示的頁邊距是範圍較大（相等）的頁邊距，水平方向為兩個頁邊距和
7.9.1演示框架模型示例     塊級元素（從新行開始）：塊級元素周圍的框佔據瀏覽器的全部寬度或包含它元素的全部寬度
    內聯元素：本身的寬度
7.9.2邊框屬性     1.border-color：指示邊框顏色
        border-top-color：改變上邊框顏色
        border-right-color：改變右邊框顏色
        border-bottom-color：改變下邊框顏色
        border-left-color：改變左邊框顏色     2.border-style：指示邊框線的樣式，實線、虛線、或雙線等等
        border-top- style：改變上邊框樣式
        border-right-style：改變右邊框樣式         border-bottom-style：改變下邊框樣式         border-left-style：改變左邊框樣式，取值：         none：內有邊框，等同於border-width:0
        soild：邊框是單條實線
        dotted：邊框是一系列點         dashed：邊框是一系列短線         double：邊框是兩條實線         groove：邊框看上去如同雕刻進網頁中
        ridge：和groove效果相反
        inset：邊框看上去如同嵌入網頁中
        outset：邊框看上去如同位於畫布之外
        hidden：用以解決邊框衝突，和none效果一樣
    3.border-width：指示邊框寬度，通常使用畫素指定單位，不能使用百分比，除了相對單位和絕對單位，還可以是：thin、medium、thick         border-top- width：改變上邊框寬度         border-right-width：改變右邊框寬度         border-bottom-width：改變下邊框寬度         border-left-width：改變左邊框寬度     4.使用極簡主義表示邊框相關屬性
        border：可以同時指定邊框的寬度、樣式、顏色，eg：p{border:4px solid red;}，各個值之間不能有內容，用空格連線：
        border-top：改變上邊框相關屬性         border-right：改變右邊框相關屬性         border-bottom：改變下邊框相關屬性         border-left：改變左邊框相關屬性 7.9.3padding屬性     指定元素的內容和邊框之間的空間量，預設情況下該屬性不會繼承，只有設定成inherit才會繼承，單位可以使相對、絕對或者百分比：
    padding-top：改變上邊框內邊距     padding-right：改變右邊框內邊距     padding-bottom：改變下邊框內邊距     padding-left：改變左邊框內邊距 7.9.4margin屬性     控制框之間的距離，垂直方向取值複雜，單位及繼承和padding一樣：
    margin-top：改變上邊框頁邊距     margin-right：改變右邊框頁邊距     margin-bottom：改變下邊框頁邊距     margin-left：改變左邊框頁邊距 7.9.5框的範圍（7個屬性）     1.height和width屬性
        設定框的高度和寬度
    2.line-height屬性
        重要的屬性，設定行高度
    3.max-width和min-width屬性
        設定框的最大和最小寬度，不允許為負值，IE7開始支援
    4.max-height和min-height屬性
        設定框的最大和最下高度，不允許為負值，IE7開始支援
   6.overflow屬性
        hidden：溢位內容被隱藏
        scroll：為框設定滾動條
7.9.6IE框模型的bug     IE：框寬度 = 內容寬度 + 內邊距     W3C： 框寬度 = 內容寬度     使用！DOCTYPE可以解決此bug
7.10本章小結     主要講了：字型（5）、文字（10）、文字偽類（2）、box model（3*3 + 7）個屬性，選擇器（7）和長度