CSS樣式表
? 1.CSS概念
? ? ? ? ? ? CSS是Cascading Style Sheet的縮寫，中文為層疊樣式表，用于將樣式信息和網(wǎng)頁內(nèi)容分離的語言；
CSS 樣式由若干條樣式規(guī)則組成，每一條樣式規(guī)則都由三部分組成：選擇符（selector），屬性（properties）和屬性的取值（value）
例如：seletor{property:value }? !!!選擇符區(qū)分大小寫，多個屬性在一起時用；隔開
? 2.顏色的不同寫法和單位
? ? ? ? ? ? 英文（red）
? ? ? ? ? ? 十六禁制（#ff0000）
? ? ? ? ? ? CSS顏色縮寫（#f00）
? ? ? ? ? ? RGB百分比（rgb（100%,0%,%0））? ！?。∈褂胷gb值即使值為0也要寫百分比符號，其他情況則不需要
? ? 是否包含空格不會影響CSS的使用，CSS對大小寫不敏感(!!!!!!!如果和HTML文檔一起工作，class和id名稱則對大小寫敏感)
? 3.內(nèi)聯(lián)樣式
? ? ? ? ? ? 內(nèi)聯(lián)樣式是將樣式代碼直接內(nèi)聯(lián)到標記內(nèi)，以Style語句作為屬性值，例如：
<table style="border-collapse:collapse">
? 4.內(nèi)部樣式表
? ? ? ? ? ? 使用<style>標記將一段CSS代碼嵌入到HTML文檔頭部中，也就是<head></head>之間；例如：
<head>
<style type="text/css">
hr{color:sienna;}
p{margin-left:20px;}
bodyP{background-image:url("image/back40.gif");}
</style>
</head>
? 5.外部樣式表
? ? ? ? ? 把上面的樣式定義單獨放入一個文本文件，這就是樣式表文件，后綴為CSS，在使用時將其導入到文檔中來：
? <head>
? <link rel="stylesheet" type="text/css" href="mystyle.css">
? </head>
? link 放在head標記之間，rel type屬性表明這是一個樣式文件，href指定了樣式文件的路徑
? ? ? 多重樣式：
? ? ? ? ? 內(nèi)聯(lián)樣式優(yōu)先級>內(nèi)部樣式表優(yōu)先級>外部樣式表優(yōu)先級
? 6.選擇符
? ? ? ? ? 選擇符是指樣式作用的對象（元素的標記（標記選擇符），元素的id（id選擇符），元素的類class（類選擇符），元素屬性（屬性選擇符），元素狀態(tài)（偽類選擇符））?
6.1標記選擇符：
? 是指HTML中的元素的標記名稱，定義的樣式將對其起作用，作用范圍是文檔內(nèi)所使用該標記的所有元素，改變的是該元素的默認顯示格式
6.2類選擇符：
是指元素的類（ｃｌａｓｓ）為該類元素定義樣式，定義類選擇符時，需要在類的名稱前加.；例如，為段落標記定義兩個類來表示不同的樣式：
? ? ? ? ? p.red(color:red)
? ? ? ? ? p.green{coloe:green}
? p為段落標記，red,green為定義的類的名稱，{}內(nèi)為樣式定義；將上面兩個樣式應用到不同的段落中時，只需要在<P>標記中指定class屬性即可；例如：
? <p class="red">紅色</p>
? <p class="green">綠色</p>
? 上述定義的類選擇符只使用于一種標記，如果把在.之前的標記省略，則可以應用在任意標記上預先定義好的類樣式
6.3id選擇符
? 根據(jù)元素的id來設計元素的樣式，由于id不可重復，所以只能對一個元素起作用，id選擇符類似于類選擇符，不同的是id選擇符是#開頭，例如：
? ? ? ? ? #red{color:red;}
? ? ? ? ? #green{color:green;}
? ? ? ? ? <p id="red">紅色</p> .
? ? ? ? ? <p id="green">綠色</p> ?
? 類選擇符可以給任意數(shù)量的標記定義樣式，而id選擇符在頁面的標記中只能使用一次
? （?。。?！id選擇符對給定標記的應用的優(yōu)先級大于類選擇符）
? ? ? ? 6.4屬性選擇符
? ? ? ? ? 是對帶有指定屬性的HTML元素設置樣式，而不僅僅限制于class和id屬性，下面例子為title屬性的所有屬性設置樣式:
? ? ? ? ? [title]{color:red;}
? ? ? ? 6.5偽類選擇符
? ? ? ? ? 可以看成一種特殊的類選擇符，能被CSS的瀏覽器自動識別的特殊選擇符，偽類選擇符以“:”開頭，例如（ 元素的不同狀態(tài) ：link ,:visited,:active;:hover;
? ? ? ? ? ? 具有鍵盤輸入的焦點元素：focu 第一個子元素：first-child ? ）
? ? ? ? ? 偽類選擇符最大的作用是可以對鏈接的不同狀態(tài)定義不同的樣式效果；偽類選擇符定義的樣式常應用在錨標記<a>上,即錨的偽類選擇符，
? ? ? ? ? 它表示動態(tài)鏈接的4中不同狀態(tài)：未訪問的鏈接(link)，已訪問的鏈接(visited)，激活鏈接(active)和鼠標停留在鏈接上(hover)
? ? ? ? ? a:link{color:#FF0000;text-decoration:none}
a:visited{color:#FF0000;text-decoration:none}
? ? ? ? ? ? a:active{color:#FF0000;text-decoration:none}
a:hover{color:#FF0000;text-decoration:none}
p:first-child{font-weight:bold}
input:focus{background-color:yellow;}
? ? 7.選擇符的分組和通配符*
? ? ? ? ? ? 分組的選擇權(quán)可以分享相同的聲明
? ? ? ? ? ? 通配符*指為所有元素設置默認格式，下面的代碼為文檔中所有元素的外邊距，內(nèi)邊距和邊框都設置為0
*{margin：0；padding：0；border：0；}
8.派生選擇符
? ? ? ? HTML的標記之間有一定的層次關(guān)系，標記之間形成一個樹形層次結(jié)構(gòu)，CSS根據(jù)元素在上下文關(guān)系來確定樣式，這樣可以使標記
更加簡潔
? ? 9.選擇器之間的繼承和層疊
? ? ? ? HTML中的標記都是包含關(guān)系，從而可以形成樹形結(jié)構(gòu)，所以子標記可以繼承父標記的一些樣式
層疊是對同一個元素或者web頁面應用樣式的能力，指多種樣式給共同作用于同一元素
選擇符沖突時，誰的優(yōu)先級高應用誰的樣式； id選擇符>類選擇符>標記選擇符
10.框模型
? ? ? ? 框模型 （Box Model），簡稱盒子模型。是元素描述和DIV 和CSS布局的核心；
框從內(nèi)到外依次是：外邊距(margin)，邊框(border)，內(nèi)邊距(padding)，內(nèi)容區(qū)(content)
10.1寬高屬性
? ? width 和height指的是content區(qū)域的寬和高，而不是整個盒子的寬和高
盒子的寬=width+2*border+2*border+2*margin
10.2邊框?qū)傩?/p>
? ? ? ? ? ? ? ? margin用來設置外邊距，邊框外面的空距，例如：
? ? ? ? ? ? ? ? h1{margin：10px 0px 26px 5px;} 順序是從上外邊框（top）圍著元素順時間旋轉(zhuǎn)，即top right bottom left,如果左右，上下對稱，則可設置為h1{margin：10px，15px}
? ? ? ? ? ? 10.3內(nèi)邊框?qū)傩?/p>
? ? ? ? ? ? ? ? padding是設置元素內(nèi)容到元素邊框的距離，用法和margin類似；
? ? ? ? ? ? 10.4邊框?qū)傩?/p>
? ? ? ? ? ? ? ? 用來設定一個元素的邊線（包括線寬border-width,線型 border-style,線色border-color）,四條邊可以單獨設置，
名稱s采用三元組形式，如border-top-style? border-top-width border-top-color?
10.5背景屬性
? ? ? ? ? ? ? ? background指的是content和padding區(qū)域，可以設置顏色或者圖片背景
? ? 11.定位和浮動
? ? ? ? ? ? 定位（positioning）屬性可以對元素進行定位，包括定位坐標類型position屬性，定位坐標(left,top.right,bottom),文本流屬性float屬性等
? ? ? ? ? ? 11.1一切皆為框
? ? ? ? ? ? ? ? div,h1,p元素通常被稱為塊級元素，這些元素顯示為一塊內(nèi)容，即“塊框”，與之相反，span和strong等元素則稱為“行內(nèi)元素”
? ? ? ? ? ? ? ? 這是因為他們的內(nèi)容顯示在行內(nèi)，即行內(nèi)框
? ? ? ? ? ? ? ? 可以使用“塊區(qū)”面板中的顯示(display)屬性改變生成的框的類型，通過將display屬性設置為block，可以讓行內(nèi)元素（例如<a>）表現(xiàn)得像塊級元素
? ? ? ? ? ? ? ? 還可以將display設置為none讓生成的元素沒有框
? ? ? ? ? ? 11.2CSS定位機制
? ? ? ? ? ? ? ? CSS有三種基本的定位機制：普通流，浮動和絕對定位，除非專門指定，否則所有框都在普通流中定位（也就是說普通流中的元素的位置由元素在（x）HTML中的位置決定
? ? ? ? ? ? 11.3定位屬性
? ? ? ? ? ? ? ? 定位屬性包括定位類型（position）, 定位坐標(left,top.right,bottom)，溢出處理（flowover）,層疊屬性（z-index）和垂直對齊方式（vertical-align）
? ? ? ? ? ? ? ? 11.3.1 positon指定的定位做別的類型，有以下幾種：
? ? ? ? ? ? ? ? 1.static:默認次序，即文本流順序，從左到右，由上到下，這時指定的定位坐標無效
? ? ? ? ? ? ? ? 2.relative:相對坐標，相對于原來的位置，需要設定左上角的偏移量(left,top)
? ? ? ? ? ? ? ? 3.absolute:絕對坐標，元素顯示在父容器指定的絕對坐標上，此時將忽略其他對象的存在，可能會覆蓋掉其他對象
? ? ? ? ? ? ? ? 4.fixed:固定坐標，瀏覽器窗口坐標，固定在瀏覽器窗口的某一位置，不隨頁面的滾動而移動（例如網(wǎng)頁的小廣告）
5.inherit:繼承父容器的position
? ? 11.3.2 層疊屬性（z-index）:控制層（盒子）在Z軸上的排列次序，為整數(shù)，值越大越靠近上面，該屬性只對position設置為absolute或者relative有效
? ? ? ? ? ? ? ? 11.3.3 可見性屬性（visibility）:控制顯示或者隱藏，可取visible,hiddden.collapse和inherit等?
? ? ? ? ? ? ? ? 11.3.4 溢出處理(flowover);當文本流超出框的時候如何處理，可以隱藏(hidden)，也可以讓溢出部分可見(visible)，或者自動擴充容器（auto） ,還可以出現(xiàn)滾動條（scroll）
? ? 11.4 浮動與清理
? ? ? ? ? ? ? ? 11.4.1 浮動
? ? ? ? ? ? ? ? ? ? ? 浮動是指浮動的框可以向左或者向右移動，直到它的外邊緣碰到包含框或者另一個浮動框為止
? ? ? ? ? ? ? ? ? ? ? 浮動框不在文檔的普通流里，不占位置
? ? ? ? ? ? ? ? 11.4.2 行框與清理
? ? ? ? ? ? ? ? ? ? ? 普通的行框占一行，不允許旁邊出現(xiàn)其他元素
? ? ? ? ? ? ? ? ? ? ? ? 要想阻止行框圍繞浮動框，則需要對框使用clear屬性，clear屬性的值可以是left,right,both或者none,它表示框的哪一條邊不應該挨著浮動框 ?
12.DIV＋CSS網(wǎng)頁布局
12.1 <div>標記是“無名框”標記，是HTML文檔定義層的標記，又稱層（塊）標記
? ? ? ? ? ? ? ? 12.2? ? DIV＋CSS網(wǎng)頁布局是一個典型應用，網(wǎng)頁主要由三部分組成：結(jié)構(gòu)，表現(xiàn)和行為
? ? ? ? 結(jié)構(gòu)主要包括DIV在內(nèi)的一系列XHTML標記
表現(xiàn)主要包括CSS層次樣式表
行為主要包括對象模型（如W3C DOM）等
