CSS 介紹
1.css是什麼
css指的是層疊樣式表 1.樣式定義如何顯示HTML元素 2.樣式通常儲存在樣式表中 3.把樣式添加到HTML 4.0 中，是為了解決内容與表現分離的問題 4.外部樣式可以極大提高工作效率 5.外部樣式儲存在CSS檔案中 6.多個樣式可疊層為一
2. css作用
1.樣式表解決html的内容與表現的分離 2. 使用樣式表極大的提高工作效率 3.提高樣式代碼的複用性
3.CSS書寫規則
基本文法 CSS主要有兩部分組成： 1.選擇器 ：為了确定要改變樣式的HTML元素 2.一條或者多條聲明： 每一條聲明由一個屬性和一個值組成，使用花括号來包圍聲明，屬性之前使用冒号分開 如圖：
u 值的機關
書寫注意事項：
1. 如果值為若幹單詞，則要給值加引号
2. 多個聲明之間用分号分開
3.css對大小寫不銘感，如果涉及到與html文檔一起使用時，class與id名稱對大小寫銘感
導入CSS的幾種方式
内聯樣式表
要使用内聯樣式，需要在相關的标簽内使用（style）屬性。Style屬性可以包含任何CSS屬性
例如
<div style=”border:1px solid black”>這是一個DIV</div> 注意：使用這種方式，它将内容與顯示混合在一起，損失了樣式表的優勢。一般情況下，這種方式隻有在一個标簽上隻應用一次樣式時候才用。
内部樣式表
使用<style>标簽在html文檔的<head>中定義樣式表
例如
<div style="color: red; font-size: 100px;">你好css</div> 文法：
1.使用style标簽進行css的引入
2.屬性的寫法： 屬性 : 屬性值
3.多個屬性之前使用分号隔開
注意：這種方式隻适用于一個頁面
外部樣式表
優勢：可以在多個頁面中使用同一個樣式表。可以在html頁面上使用<link>标簽來導入外部樣式表
例如
浏覽器會從mystyle.css檔案中讀取樣式，并對頁面上的html進行修飾呢。
外部樣式表，應該以css為字尾來儲存，可以使用任意文本編輯器對css檔案進行編輯
mystyle.css檔案内容：
文法：1.建立css檔案，将css屬性解除安裝css檔案中
2.在head中用link标簽進行引入 <link rel="stylesheet" type="text/css" href="css檔案位址" target="_blank" rel="external nofollow" > rel:代表要引入的檔案與HTML的關系 type : 告知浏覽器使用css解析器去解析 href:css 檔案的位址
@import導入
這種方式也是外部導入：
使用方式如下：
關于@import與引用外部樣式表的差別：
1.@import 這種方式隻有firefox支援，而ie不支援
2.@import這種方式導入css，會在整個頁面加載之後才會加載樣式。網絡不好，會閃一下。
使用外部樣式表會先裝載樣式表，這樣看到的就是有樣式修飾的頁面。
3.@import不支援通過javascript修改樣式，而link支援、
優先級：
内聯樣式表 > 内部樣式表 > 外部樣式表
CSS選擇器
css選擇器主要是用于選擇需要添加樣式的HTML元素
1. id 選擇器
id選擇器使用#引用，它引用的是id屬性中的值
<html> <head> <meta charset="utf-8" /> <style type="text/css"> #d{ border: 3px ; color: red; } </style> </head> <body> <div id="d">王虎</div> </body> </html> 2.類選擇器
類選擇器使用時，需要在類名前加一個點号（.）
<html> <head> <meta charset="utf-8" /> <style type="text/css"> .d{ border: 10px ; color: red; } </style> </head> <body> <div class="d">王虎</div> </body> </html> 3.元素選擇器
文檔中的元素就是選擇器
<html> <head> <meta charset="utf-8" /> <style type="text/css"> div{ border: 10px ; color: blue; } </style> </head> <body> <div >王虎</div> </body> </html> 4.屬性選擇器
如果需要選擇某個屬性的元素，而不論屬性是什麼，可以使用屬性選擇器
<html> <head> <meta charset="utf-8" /> <style type="text/css"> input[type="text"]{ border-left-style: none; border-right-style: none; border-top-style: none; border-bottom-style:solid ; } </style> </head> <body> <input type="text" name="username" value="請輸入你的姓名"/> <br /> <input type="password" name="password" /> </body> </html> 5.僞類
css僞類用于向某些選擇器添加特殊效果
在支援css的浏覽器中，連結的不同狀态都可以不同的方式顯示，這些狀态包括：
活動狀态，已被通路狀态，未被通路狀态，和滑鼠懸念狀态。
css屬性
字型
css字型屬性定義文本的字型系列，大小，加粗，風格（如斜體）和變形（如小型大寫字母）
常用屬性：
font ： 簡寫屬性，作用是把所有針對字型的屬性設定在一個聲明中。
font-family ： 定義字型系列
font-size ： 定義字型的尺寸
font-style ： 定義字型風格
文本
css文本屬性可定義文本的外觀。通過文本屬性，你可以修改文本的顔色，字型間距，對齊文本，裝飾文本，對文本進行縮進，等等
常用屬性
color ; 定義文本顔色
text-align ： 定義文本對齊方式
letter-spacing ： 定義字元間隔
word-spacing：定義字間隔
背景
css允許應用純色作為背景，也允許使用背景圖像建立相當複雜的效果。css在這方面的能力在html之上。
常用屬性：
background ： 簡寫屬性，作用是将背景屬性設定在一個聲明中
background- color : 定義背景的顔色
background-image：定義背景圖檔
background-position：定義背景圖檔的起始位置
background-repeat： 定義别進圖檔如何重複
尺寸
css尺寸屬性允許你控制元素的高度和寬度
常用熟悉： width設定寬度 height設定高度
清單
css屬性允許你放置，改變清單項标志，或者将圖像作為清單标志
常用屬性：
list-style ： 簡寫屬性。用于把所有用于清單的屬性設定于一個聲明中
list-style-image： 定義清單項标志位圖像
list-style-position： 定位清單項的位置
list-style-type ： 定義清單項标志的類型
表格
css 表格屬性可以極大幫助你極大地改善表格的外觀
常用屬性：
border- collapse:定義是否把表格邊框合并單一的邊框
border - spacing：定義分隔單元格邊框的距離
caption - side ：定義表格标題的位置
輪廓
輪廓是繪制與元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用
css outline 屬性規定元素輪廓的樣式。顔色和寬度
常用屬性：
outline ： 在一個聲明中設定所有的輪廓屬性
outline-color ： 定義輪廓的顔色
outline- style ： 定義輪廓的樣式
outline-width： 定義輪廓的寬度
定位
css定位屬性允許你對元素進行定位
允許你定義元素相框相對于其正常位置應該出現的位置，或者相對于父元素，另一個元素甚至浏覽器視窗本身的位置
css有三種基本的定位機制：普通流，浮動， 和局對定位
常用屬性：
position：把元素放置到一個靜态的，相對的，絕對的，或者固定的位置中
top：定義了定位元素的上外邊距邊界與其包含塊上邊界之間的偏移量
right ：定義了元素右外邊距邊界與其包含塊左邊界之間的偏移
left : 定義了定位元素左邊距邊界與其包含塊左邊邊界之間的偏移
bottom ： 定義了定位元素下邊距邊界與其包含塊下邊界之間的偏移
分類
css分類屬性允許如何顯示元素，設定圖像顯示于另一進制素中的何處，相對于其正常位置來定位元素，使用絕對值來定位元素，以及元素的可見度
常用屬性：
clear ： 設定一個元素的側面是否允許其它的浮動元素
float ： 定義元素在哪個方向浮動
cursor ： 當指向某元素之上時顯示的指針類型
display ： 定義是否 和 如何顯示元素
visibility： 定義元素是否可見或者不可見
CSS框模型
CSS框模型（Box Model）規定了元素處理元素内容，内邊距，邊框，和外邊距的方式
CSS框模型概述
元素框的最内部分是實際的内容，直接包圍内容的是内邊距。内邊距呈現了元素的背景。内邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，是以不會遮擋其後的任何元素。
邊框
元素的邊框是圍繞元素内容和内邊距的一條或多條線
CSS border允許你規定元素邊框的樣式，寬度和顔色
常用屬性：
border ： 簡寫屬性，用于把針對四個邊的屬性設定在一個聲明。
border-color 定義元素邊框中可見部分的顔色，或為四個邊分别設定顔色
border-style ： 用于定義所有邊框的樣式，或者單獨為各個邊框設定樣式
border-width ： 用于為元素的所有邊框設定寬度，或者單獨為各個邊框設定寬度
border-top ： 用于把上邊框的所有屬性設定到一個聲明中
border-right ： 用于把右邊框的所有屬性設定到一個聲明中
border-bottom： 用于把下邊框的所有屬性設定到一個聲明中border-left： 用于把左邊框的所有屬性設定到一個聲明中
外邊距
圍繞在元素邊框的空白區域是外邊距。設定外邊距會在元素外建立額外的“空白”
設定外邊距的最簡單的的方法就是使用margin屬性，這個屬性接受任何長度機關，百分比甚至負值
margin-top 定義元素的上邊距
margin-right 定義元素的右邊距
margin-bottom 定義元素的下邊距
margin-left定義元素的左邊距
内邊距
元素的内邊距在邊框和内容之間。控制該區域的屬性是padding屬性
常用屬性：
padding- top 定義元素的上内邊距
padding- right 定義元素的右内邊距
padding-bottom 定義元素的下内邊距
padding-left 定義元素的左内邊距
![CSS3學習手冊CSS3學習手冊[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)