CSS指層疊樣式表 拓颓，控制如何顯示HTML元素
為什么要用css控制樣式？而不直接用屬性呢孕惜？
同樣是設(shè)置文本的顏色，元素用的是text屬性晨炕，元素用的是color屬性衫画，而元素根本就沒有用于單獨設(shè)置字體顏色的屬性。這意味編程人員實現(xiàn)不同元素里的相同樣式瓮栗，卻要通過不同的屬性值削罩，這樣是很難記住的，所以把樣式抽離出來费奸。
內(nèi)聯(lián)樣式：style屬性
內(nèi)部樣式：在style標簽里寫
外部樣式：外部寫CSS文件弥激，引入html中（常使用，多個html可能用同個樣式愿阐，可復(fù)用秆撮，效率高）
引入外部樣式表
<link rel="stylesheet"?type="text/css" href="文件名" />（rel表示樣式表）
CSS初始化
? ? ? ? 相同元素，在不同瀏覽器下换况，顯示效果不同职辨，通過CSS強制讓所有元素的屬性值都一樣，使得各瀏覽器顯示結(jié)果相同（各大網(wǎng)站有不同初始化模板戈二，可查）
css具有層疊性
? ? ? ? ?當一個Web頁面使用多個樣式表舒裤，多個樣式表中的樣式可層疊為一個。在多個樣式表之間所定義的樣式?jīng)]有沖突的時候觉吭，瀏覽器會顯示所有的樣式腾供。假如一個html同時有內(nèi)聯(lián)樣式，內(nèi)部樣式鲜滩，外部樣式的時候而且都對同一個樣式進行了設(shè)置伴鳖，執(zhí)行循序是先執(zhí)行外部樣式，然后是內(nèi)部樣式徙硅，最后是內(nèi)聯(lián)樣式榜聂。也就是說內(nèi)聯(lián)樣式可以覆蓋內(nèi)部樣式，內(nèi)部樣式又可以覆蓋外部樣式
基礎(chǔ)語法：選擇器+聲明
?選擇器：決定哪些元素使用這些規(guī)則
?聲明：由一個或者多個屬性/值對組成嗓蘑，用于設(shè)置元素的外觀表現(xiàn)须肆。
h2{color:orange;background-color:silver;}h2是選擇器匿乃，大括號里的是聲明
聲明通過屬性：屬性值 進行樣式聲明，每對屬性/值應(yīng)該使用分號與下一對屬性/值分開
選擇器
1.派生選擇器： ? 元素1元素2 {} ? ? (元素2是元素1里的元素)
2.類選擇器元素定義加上class屬性 通過.類名{}控制樣式豌汇，
3.id選擇器： 元素定義的時候加上id元素屬性通過#id值{}控制樣式幢炸，
4.元素選擇器：元素名{}不常用
5.屬性選擇器：
(1)[title] { }
(2)屬性和值選擇器 ：[title=W3School]設(shè)置所有title="W3School"的元素樣式
包含指定值的屬性[title~=hello] { color:red;}設(shè)置所有title值里面有hello的元素樣式
[lang|=en] { color:red; }表示只要這個屬性中有l(wèi)ang這個值，這個屬性所屬元素就被設(shè)置樣式
當沒有類和id時拒贱，使用它與元素選擇器結(jié)合進行選擇
注:id宛徊，類選擇器常結(jié)合派生選擇器一起使用
6.選擇器分組：選擇器可以聲明為以逗號隔開的元素列表，從而實現(xiàn)選擇器分組逻澳，以便于將一些相同的規(guī)則作用于多個元素闸天。
例：#id值，.className{}對id=id值和class=className的元素同時設(shè)置樣式
7.偽類選擇器
CSS 偽類用于向某些選擇器添加特殊的效果
這四種效果的順序不可變,可以和選擇器聯(lián)用
focus偽類：在元素獲得焦點時向元素添加特殊的樣式赡盘，該偽類應(yīng)用于有焦點的元素号枕。例如文檔中一個有文本輸入焦點的輸入框，其中出現(xiàn)了文本輸入光標陨享；也就是說葱淳，在用戶開始鍵入時，文本會輸入到這個輸入框抛姑。
input:focus
{
color:red;
font-size:20pt;
}
在這個例子中赞厕，當用戶激活文本框，并開始鍵入時定硝，文本框中的文本會顯示為紅色皿桑，且字體大小為20px
單位
px 像素
em 當前大小的幾倍 2em ?2倍
百分比 ，整個網(wǎng)頁的百分比大小顯示
內(nèi)聯(lián)與塊轉(zhuǎn)化
display:block; ?內(nèi)聯(lián)--》塊
display:inline; ? 塊--》內(nèi)聯(lián)
CSS盒模型(塊狀)
? ? ? ? 在 CSS 中蔬啡，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度诲侮。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸箱蟆，但是會增加元素框的總尺寸沟绪。
none表示什么都沒有 ?transparent表示透明顏色
一、邊框
border: 寬 形狀 顏色
border-style/border-width/border-color
border/border-top/border-right/border-bottom/border-left
border-radius:[ <length>|<percentage>]{1,4} ? ?設(shè)置邊框的四角是平滑的
用長度或者百分比設(shè)置半徑空猜，可單獨設(shè)置一邊
border-image:<border-image-source>||<border-image-slice> ?用圖像做邊框
利用邊框畫三角形：邊框足夠大绽慈，盒子大小為1PX，一邊有顏色辈毯，其它為透明
二坝疼、外邊距margin：塊與塊之間的距離
margin:10px 20px 20px 20px ?順時針分配
margin: auto auto居中
單邊控制外邊距：margin-top/margin-left/margin-right/margin-bottom
優(yōu)先上左的距離
三、內(nèi)邊距（若不設(shè)置谆沃，文字能撐滿整個盒子）
padding: 上 ?右 下 左
顏色為盒子的顏色
實際的空間（布局空間６坌住）=margin+border+padding+內(nèi)容區(qū)域
margin合并現(xiàn)象
? ? ? ? 當兩個垂直外邊距相遇時，它們將形成一個外邊距管毙，這個外邊距并非簡單相加腿椎，而是等于兩個發(fā)生合并的外邊距的高度中的較大者桌硫。
注釋：請注意夭咬，如果不設(shè)置 div 的內(nèi)邊距和邊框啃炸，那么內(nèi)部 div 的上外邊距將與外部 div 的上外邊距合并
CSS樣式
尺寸
CSS尺寸屬性用來控制元素的高度和寬度：
height屬性(min-height/max-height)：用于設(shè)置元素的高度，即元素內(nèi)容區(qū)的高度卓舵，在內(nèi)容區(qū)外面可以增加內(nèi)邊距南用、邊框和外邊距；
width屬性(min-width/max-width)：用于設(shè)置元素的寬度掏湾，即元素內(nèi)容區(qū)的寬度裹虫，在內(nèi)容區(qū)外面可以增加內(nèi)邊距、邊框和外邊距融击。
overflow屬性規(guī)定當內(nèi)容溢出元素框時如何處理筑公，可能的取值為：
visible：內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外尊浪，為默認值
hidden：隱藏溢出內(nèi)容（內(nèi)容還存在只是隱藏了）
scroll：溢出內(nèi)容以滾動條形式顯示
auto：如果內(nèi)容被修剪匣屡，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容
背景
background-color 屬性
如果您希望背景色從元素中的文本向外少有延伸，只需增加一些內(nèi)邊距：
p {background-color: gray; padding: 20px;}
background-image：url("文件名")
background-size：對背景圖片大小修改拇涤，100%圖片鋪滿div
background-position:水平 垂直
小div捣作，大圖片，可通過位置改變得到想要的部分圖片
background-repeat : ?背景圖的鋪開方式（鋪開大小鹅士，是否重復(fù)等）
background-attachment：背景圖片是滾動還是固定（默認滾動）?scroll滾動 ??fixed固定
background-clip:顏色從什么位置開始顯示（盒模型的什么位置）
background-origin:圖片從什么位置顯示（盒模型的什么位置）
顏色
color：字體顏色
opacity： <number>指定透明度 ?[0.0-1.0]
16進制 ? #2567
十進制 rgb（12,23,45）
顏色名稱
字體 font
font-style 文字類型（normal - 文本正常顯示italic - 文本斜體顯示 ?oblique - 文本傾斜顯示）
font-weight 文字粗細
font-size 文字大小 ?（默認16像素(16px=1em)?inherit 大小和父類一樣）
font-variant 是否轉(zhuǎn)為小寫的大寫字體
font-family 字體（可設(shè)置首選券躁，次選字體）
文本 text
text-align文字對齊方式
text-indent 塊級元素（段落）縮進
word-spacing?改變字（單詞）之間的標準間隔
letter-spacing ?字母間隔修改的是字符或字母之間的間隔
text-transform 文本轉(zhuǎn)換大小寫
line-height ?行高
white-space 對文字間空白字符處理（默認不識別空白符）
word-wrap ?normal可溢出 ?break-word 內(nèi)容在邊界內(nèi)換行
一個塊可能有很多行，當一個塊狀元素的高和行高相同掉盅，文字在塊中居中
text-decoration 文本裝飾
none
underline ?下劃線
overline ?上劃線
line-through?貫穿線
blink ?閃線
應(yīng)用：可以手動去除超鏈接的下劃線
列表也拜；list
list-style-type：標記的形狀
list-style-image : url(xxx.gif) ?標志圖片
list-style-position標記在文本內(nèi)還是文本外
表格
table, th, td?{border: 1px solid blue;} 設(shè)置表格邊框
table ??{width:100%;} ??th{height:50px;} ?設(shè)置表格的高度和寬度
border-collapse 屬性設(shè)置是否將表格邊框折疊為單一邊框：
text-align:水平對齊方式
vertical-align:垂直對齊方式
padding內(nèi)邊距
表格顏色可以通過邊框顏色，背景顏色趾痘，文本顏色設(shè)置
empty-cells：當表格無內(nèi)容時慢哈，是否顯示表格邊框
border-spacing ：單元格左右間距離 ?單元格上下間距離
? ? ?(border-collapse屬性為separate值的情況下，也稱為邊框分離模式)
定位
CSS 有三種基本的定位機制：普通流定位扼脐、浮動和絕對定位
普通流定位（相對）和絕對定位
Position定位
position：relative|absolute
relative相對定位岸军，相對原來位置，會和其他塊一起移動
absolut絕對定位瓦侮，相對父元素定位艰赞，不影響其它塊（left表示距離父元素的左邊多少像素）
top/rigt/left/bottom：Xpx
Z-index：當兩元素重疊，Z-index大的在上邊
clip：修剪尺寸 ?clip:rect(0px 50px 200px 0px)；
visibility:visible|hidden ? ?元素是否可見（不可見的元素也占空間乖杠，主要用于想讓內(nèi)容不顯示典鸡，卻又不想把內(nèi)容刪除）
浮動定位
float:left ?盡量往左浮
float:right ? 盡量往右浮
清除浮動 ? clear:left/right/both; ? ? ? ?不和浮動在一行
如果框窄，浮動的東西會被擠到下邊
