HTML常用於在網頁中顯示內容，當然，還可以是布局，但是比較不方便，所以，引進了CSS
CSS全稱Cascading Style Sheets，中文名：層疊樣式表
幫助文檔：CSS.chm
作用:布局和美化網頁
特點：
- 和HTML一樣，是一種標記語言，可以由瀏覽器直接執行
- 大小寫不敏感
- CSS文件是一個文本文件，后綴名為css
- 嵌套在HTML中使用
Css規則
- 語法
- CSS定義由選擇器（selector）、屬性（property）及屬性值（value）組成；
- 格式：selector{property:value;}
- 選擇器包括
- 類型選擇器：
- 定義：HTML標簽
- 使用：直接使用標簽
- 類型選擇器：
定義 使用
-
-
- class選擇器：
- 定義：標記名.類名 或 .類名
- 使用：class="類名"
- 標記名為html標簽，“標記名.類名”表示只有使用該標簽並class值為該類名時，才使用該選擇器；
- “.類名”表示只要class值為該類名，就會使用該選擇器
- class選擇器：
-
定義 使用
-
-
- id選擇器：
- 定義：標記名#id值 或 #id值
- 使用：id="id值"
- 標記名為html標簽，“標記名#id值”表示使用該標簽並id為該值時，才使用該選擇器
- “#id值”表示只要id為該值，就會使用該選擇器
- 同一頁面id值是唯一的（是的，如果同一頁面有兩個相同的id，樣式也能顯示出來，但是這樣有違邏輯，並且 將來使用js調用id時，會出現混亂）
- id選擇器：
-
定義 使用
-
-
- 包含選擇器：
- 多種選擇器的層次組合，選擇器用空格隔開，各選擇器由左到右，為包含關系
- 定義：各選擇器符組合，用空格隔開
- 使用：各選擇器嵌入使用
- 層數不限，但建議不要太多，影響維護和seo
- 包含選擇器：
-
定義 使用
-
-
- 群組選擇器：
- 同時定義多個選擇器為同一屬性
- 定義：各選擇器組合，用","分隔開
- 使用：各分隔符直接使用
- 群組選擇器：
-
定義 使用
-
-
- 偽元素選擇器：
- 對html元素不同狀態的一種定義方式
- 定義：標簽:偽元素
- 使用：該標簽的不同狀態使用不同屬性
- 偽元素選擇器：
-
定義 使用
-
- 屬性與屬性值用":"分隔開，多個屬性值用";"分隔
- 注釋
- 格式：/*.......*/
- 長度單位
- 相對單位（常用）
- px：像素
- em：相對於當前對象內文本的字體尺寸
- %：百分比
- 絕對單位（不常用）
- pt：點
- cm：厘米
- mm：毫米
- 相對單位（常用）
- 顏色單位和URL值
- 顏色：
- #rrggbb
- #rgb
- rgb(x,x,x)（不常用，瀏覽器不兼容）
- rgb(x%,x%,x%)（不常用，瀏覽器不兼容）
- URL
- 表示：url(address)
- 顏色：
HTML中使用CSS的方式
- 內聯樣式表
- 直接在標簽中使用
- 使用style屬性，嵌入css鍵值對
- 使用靈活，但失去了CSS的作用
- 內嵌樣式表
- 在<head>標簽中，使用<style>標簽
- 將要使用的CSS樣式寫在<style>標簽中
- <style type="text/css">css</style>或者<style>css</style>
- 外部鏈接樣式表
- 外部鏈接css文件，文件中直接輸入css內容
- 優點：
- 使用外接的css文件，瀏覽器帶有緩存功能，不用每次都下載
- 多個文件共享
- 使用<link>標簽引入HTML中，格式為<link type="text/css" rel="stylesheet" href="*.css" />
三種格式的優先級，就近原則：內聯式>內嵌式>外鏈式
內聯元素與塊級元素
- 內聯元素
- 標簽中的內容都在同一行，不會自動換行
- 不可設置寬和高
- 塊級元素
- 標簽中的內容會自動換行
- 可設置寬和高
CSS字體屬性
- 多屬性寫在同一行，用復合屬性<font>，順序必須為 [[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ],<font-size>和<font-family>為必選項。
- 單屬性分開寫
- <font-style>屬性：設置字體是否為斜體，默認值為normal；
- <font-variant>屬性：設置字體是否為小型的大寫字母，默認值為normal；
- <font-weight>屬性：設置字體粗細，默認值為normal；
- <font-size>屬性：設置字體大小，常用單位為"px"或"%"，默認值為normal；
- <font-family>屬性：設置字體，可設置多種字體，用“,”隔開，瀏覽器會按順序檢索是否存在該字體以顯示，字體名稱為中文時，要用單引號引起。默認值根據瀏覽器選擇。
- <font-stretch>屬性：設置字體寬度，默認值為normal；
CSS背景屬性
- 多屬性寫在一行，使用復合屬性<background>，屬性值為[ background-color ] || [ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]，其他參數不填時，默認無條件覆蓋。
- 單屬性分開寫
- <background-color>：設置背景色，默認為transparent；
- <background-image>：設置背景圖片，用"url()"設置圖片路徑；
- <background-repeat>：設置背景圖片填充效果，默認為repeat；
- <background-position>：設置背景圖片的填充位置，默認值為"0% 0%"，常用單位"%"和"px"。
小技巧：可設置一個區域的<weight>和<height>屬性，<background-repeat>屬性可填充該區域，如作為導航條等；<background-position>屬性可分別截取圖片一部分，分開現實，減少網頁加載時間。
CSS文本屬性
- <letter-spacing>：設置字符間距，允許使用負值，默認值為normal
- <word-spacing>：設置單詞間距，允許使用負值，默認值為normal
- <text-decoration>：向文本添加修飾，underline下划線，overline上划線，line-through刪除線
- <text-align>：水平對齊方式，centen居中，right右對齊，left左對齊
- <line-height>：設置對象行高，當行高與區域高度相同，文本垂直居中
- <text-indent>：設置文本縮進，單位可為em（字符）、px（像素）、%（百分比）
- <color>：設置字體顏色
CSS邊框屬性
- 多屬性合並寫，使用復合屬性<border>，屬性值順序為[ border-width ] || [ border-style ] || [ border-color ]
- <border-left>、<border-right>、<border-top>、<border-bottom>：設置左線、右線、上線、下線的屬性，屬性值順序為[ border-width ] || [ border-style ] || [ border-color ]
- 單屬性分開寫
- <border-style>：設置邊框樣式，常用dotted（點狀）、dashed（虛線）、solid（單實線）
- <border-width>：設置邊框寬度，不允許為負數，<border-style>屬性設為none，本屬性失去作用
- <border-color>：設置邊框顏色
CSS列表屬性
- <list-style-type>:設置列表項的標記為預設標記
- <list-style-image>：設置列表項的標記為自選標記，“url()”設置標記的地址
- <list-style-position>：設置表項在文本的位置，outside表示標記放置在文本以外，inside表示標記放置在文本以內
DIV+CSS頁面布局
- 優勢：
- 內容與布局分離
- 代碼簡潔，提高頁面瀏覽速度
- 易於維護和修改
- 提高搜索引擎對頁面的索引效率
- div和span
- div：塊級元素，會自動換行，能設置寬高
- span：內聯元素，不會自動換行，不能設置寬高
W3C盒子模型
- maigin：外補白（盒子四邊的外延申邊距）
- maigin：可使用1~4個參數來設置外補白大小
- maigin-top、maigin-right、maigin-bottom、maigin-left：分別設置盒子上、右、下、左外補白大小
- border：邊框
- border：可使用1~4個參數來設置邊框寬度
- border-top、border-right、border-bottom、border-left：分別設置盒子上、右、下、左邊框大小
- padding：內補白（盒子內容與邊框的距離）
- padding： 可使用1~4個參數設置內補白大小
- padding-top、padding-right、padding-bottom、padding-left：分別設置盒子上、右、下、左內補白大小
DIV定位
- position：設置定位方式，參數為static、absolute、relative、fixed
- absolute：絕對定位，位置相對於文檔流，會脫離文檔流
- relative：相對定位，位置相對於自己原來的位置，不會脫離文檔流
- fixed：固定定位，位置相對於瀏覽器窗口
- 綁定模式：父層使用"relative"定位，子層使用"absolute"定位，子層將於父層“綁定”，子層的位置不再相對於文檔流，而是相對於父層
- top：盒子與頂部的距離
- right：盒子與右邊的距離
- bottom：盒子與底部的距離
- left：盒子與左邊的距離
- z-index:設置層疊順序，默認以0開始，可為負數
- text-align：水平對齊方式，centen居中，right右對齊，left左對齊
- line-height：設置對象行高，當行高與區域高度相同，文本垂直居中
- float：設置對象為浮動效果
- 只會水平浮動，不會不會垂直浮動
- 會脫離文檔流
- 多個對象同時設置為浮動時，各對象並排顯示
- left：左浮動
- right：右浮動
- clear：清除浮動
- right：清除右浮動，對象右邊不能存在浮動對象
- left：清除左浮動，對象左邊不能存在浮動對象
- both：清除兩邊浮動，對象兩邊不能存在浮動對象
DIV的顯示
- display：設置元素顯示發方式
- block：以塊級元素方式顯示
- inline：以內聯元素方式顯示
- none：隱藏該元素，隱藏后，不占用位置
- visibility：設置嵌套關系的顯示
- inherit：顯示屬性與父層相同，父顯子顯，父隱子隱
- visible：無論父層是否顯示，子層依然顯示
- hidden：無論父層是否顯示，子層均隱藏且占用位置
- overflow：內容超出邊界時的顯示方式
- auto：自動處理，超出時顯示滾動條，未超出則不顯示
- scroll：始終顯示滾動條，無論是否超出
- visible：超出也直接顯示，不做處理
- hidden：超出部分隱藏，不顯示滾動條