腳本化css

html文檔的視覺顯示包含不少變量：字體、顏色、間距等。css標準列舉了這些變量。咱們稱之爲樣式屬性。css定義了這些屬性以指定字體、顏色、外邊距、邊框、背景、圖片、文本對齊方式、元素尺寸和元素位置。爲了定義HTml元素的視覺表現，規定了這些CSS屬性的值。

當瀏覽器廠商實現非標準css屬性時，他們用將屬性名前加了一個廠商前綴，firefox使用-moz-，chrome使用-webkit-，而ie使用-ms-，他們甚至用這種方式來實現未來會實現標準化的屬性。有個例子是border-radius，它用來指定元素的圓角，（在firefox3和safari 4中使用了前綴，後面的版本都去掉了前綴，ie9也支持沒有前綴的border-radius，可是在ie8中即便有前綴也不支持）

在不一樣的瀏覽器中有不一樣名字的css屬性一塊兒工做，你可能發現爲一個屬性定義一個類方式比較好

.radius10{
  border-radius:10px;/*現代瀏覽器*/
  -moz-border-radius:10px;/*firefox 3.x*/
    -webkit-border-radius:10px;/*safari 3.2和4*/
}

css的position屬性：

static元素的默認屬性，指定元素按照常規的文檔內容流進行定位，靜態定位的元素不能使用top、left和相似其餘屬性定位

欲對文檔元素使用css定位技術，必將其postion屬性設置爲除此以外的其餘3個屬性

absolute該值指定元素是相對於包含它的元素進行定位。相對於全部其餘的元素，絕對定位的元素是獨立定位的，它不是靜態定位的元素中文檔流的一部分，它的定位要麼是相對於最近的定位祖先元素，要麼是相對於文檔自己。

fixed

該值指定元素是相對於瀏覽器窗口進行定位的。固定定位的元素老是顯示在那裏，不會隨着文檔其餘部分而滾動。相似絕對定位的元素，固定定位的元素和全部其餘元素是獨立的，它不是文檔流的一部分。大多數現代瀏覽器支持固定定位，除了ie6

relative

當position屬性設置爲relative，元素按照常規的文檔流進行佈局，它的定位相對於在它文檔流中的位置進行調整。系統保留着元素咋正常文檔流中的空間，不會由於要填充空間而將其各邊合攏，也不會將元素重新的位置推開。

一旦設置了元素的position屬性爲除了static之外的值，就能夠經過元素的left、top、right和bottom屬性的一些組合指定元素的位置。最經常使用的定位技術是使用left和top屬性指定元素的左邊緣到容器（一般是文檔自己）左邊緣的距離，元素的上邊緣到容器上邊緣的距離

若是元素使用絕對定位，它的top和left屬性應該解釋爲它相對於其position屬性設置爲除static值之外的祖先元素。若是絕對定位的元素沒有定位過的祖先，則它的top和left屬性使用文檔座標進行度量-就是相對於文檔左上角的便宜量。若是你想相對於一個屬於常規文檔流中的容器絕對定位一個元素，則將容器的position指定爲ralative，top和left指定0px。這就讓容器變成了動態定位，但它仍留在文檔流中原來的位置。任何絕對定位元素的子元素都相對於容器進行定位

定位一個元素讓其右，上邊緣相對於窗口右，上邊緣各10像素，而且不隨文檔的滾動而滾動，可使用以下樣式

positon:fixed;right10px;top:10px;

除了定位元素之外，css容許指定它們的尺寸，這一般經過指定width和height樣式屬性的值完成

另一種指定元素的寬度的方法是同時指定left和right屬性，一樣，經過指定top和bottom屬性來指定元素的高度。可是若是同時指定left，right和width，那麼width屬性將覆蓋right的屬性；若是元素的高度重複限定，height屬性優先於bottom屬性，不必給每一個動態元素指定尺寸，某些元素（如圖片）具備固有尺寸。而 且，對包含文本或其餘流式內容的動態元素一般指定想要的寬度就夠了，讓元素內容佈局來自動決定它的高度。

css容許指定元素的位置和尺寸爲其容器元素（或瀏覽器窗口）的百分比

第三個維度：z-index

屬性定義了第三個維度：它容許指定元素的堆疊次序，並指示兩個或多個重疊元素中的哪個應該繪製在其餘的上面。z-index默認爲0，能夠是正或負的整數，當兩個或多個元素重疊在一塊兒時，他們是按照從低到高的z-index順序繪製的，若是重疊元素的z-index值同樣，他們按照在文檔中出現的順序繪製，也即最後一個重疊的元素顯示在上面

注意，z-index只對兄弟元素（例如，同一個容器的子元素）應用堆疊效果。若是兩個元素不是兄弟元素之間的重疊，那麼設置它們的z-index屬性沒法決定哪個顯示在上面，想反，必須設置這個兩個重疊元素的兄弟容器的z-index屬性來達到目的。

非定位元素（例如，默認使用positon：static定位）老是以防止重疊的方式進行佈局，所以z-index屬性不會應用到他們上面。儘管如此，他們默認的z-index值爲0，這意味這z-index爲正值的定位元素顯示常規文檔流的上面，而z-index爲負值的定位元素顯示在常規文檔流的下面

定位實例：文本陰影

css3規範包含一個text-shadow屬性以在文本下產生陰影效果。許多如今的瀏覽器都支持效果，可是能夠用css定位屬性實現相似的效果，只要重複數次這段文本

須要投射陰影的文本包裹在相對定位的<span>標籤中，不用設置其餘定位屬性，因此文本顯示在其正常的位置上。陰影惟一個絕對定位的span中，它包含在上面那個相對定位的span中，這樣z-index屬性確保陰影在其文本的下面。

css容許指定元素周圍的邊框、外邊距和內邊距。元素的邊框是一個圍繞（或部分圍繞）元素繪製的矩形（或者css3中的圓形矩形）。屬性還容許指定邊框的樣式、顏色和厚度

在css3種，能夠經過border-radius屬性指定圓形邊框的全部角，也能夠用更明確的屬性名設置單獨的圓角。例如

bordder-top-right-radus:50px;

外邊距提供了常規文檔中（可能有邊框的）元素和它的鄰居之間的視覺空間。內邊距保持元素內容和它的邊框在視覺上分離。

若是元素內沒有邊框，內邊距每每也是沒有必要的。若是元素是動態定位的，而不是常規文檔流的一部分，他的外邊距就可有可無了

css盒模型

下面顯示了一個絕對定位的元素嵌套在一個定位的容器元素中。容器和包含的元素有邊框和內邊距。圖例說明了指定容器元素每條邊的內邊距和邊框寬度的css屬性。注意外邊距屬性並無顯示：外邊距和絕對定位的元素無關。

其餘重要的信息。首先，width和height只指定了元素區域的尺寸，它不包含元素的內邊距或邊框（或外邊距）所須要的任何額外空間。爲了肯定有邊框元素在屏幕上的全尺寸，必須把元素的寬度加上左右兩邊的內邊距和左右兩個邊框寬度，把元素的高度加上上下兩邊的內邊距和上下兩個邊框寬度。

其次 left和top屬性指定了從容器邊框內側到定位元素邊框外側的距離，這些屬性不是從容器內容區域的左上角開始度量的，而是從容器內邊距的左上角開始的，一樣，right和bottom屬性是從容器內邊距的右下角開始度量的

標準css盒模型規定width和height樣式屬性給定內容區域的尺寸，而且不包含內邊距和邊框。能夠稱此盒模型爲內容盒模型

在老版的IE裏和新版的CSS中都有一些例外，在IE6以前和當IE6~8在怪異模式下顯示一個頁面時（頁面中缺乏<!DOCTYPE>或者有一個不夠嚴格的doctype時），width和height屬性確實包含內邊距和邊框寬度的。

ie的行爲是一個BUG，可是IE的非標準模型一般也頗有用。認識到這一點，css3引進了box-sizing屬性，默認值是content-box，它指定了上面描述的標準的盒模型。若是替換爲box-sizing：border-box，瀏覽器將會爲那個元素應用ie的盒模型，即width和height屬性將包含邊框的內邊距。當想以百分比形式爲元素設置整體尺寸，又想以像素單位指定邊框和內邊距時，邊框盒模型特別有用

<div style="box-sizing:border-box;width:50%;padding:10px;border:solid black 2px;">

box-sizing屬性在當今全部的瀏覽器中都支持，可是還麼有不帶前綴通用的實現。在chrome和safari中，使用-webkit-box-sizing。在firefox中，使用-moz-box-sizing。在opera和ie8及其更高版本中。可使用不帶前綴的box-sizing

邊框盒模型在將來css3中的一個可選方案是使用盒子尺寸的計算值：

<div style="width:calc(50%-12px)";padding:10px;border:solid black 2px;>

在ie9中支持使用calc計算css的值，在firefox 4爲-moz-calc（）。

isibility和display屬性之間的差異能夠從它們對使用靜態和相對定位的元素的影響中看到。對於一個常規佈局流中的元素，設置visibility屬性爲hidden使得元素不可見，可是在文檔佈局中仍然保留了它的空間。相似的元素能夠重複隱藏和顯示而不影響文檔佈局，可是若是元素的display屬性設置爲none，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，就當它歷來不存在

visibility和display屬性對絕對和固定定位的元素的影響是等價的，由於這些元素都不是文檔佈局的一部分。然而，在隱藏和現實定位元素時通常首先visibilty屬性。

若是沒有爲元素指定背景顏色或圖像，它的背景一般是透明的，理解這點很是重要。默認狀況下不是全部的元素都是透明的，例如，具備透明背景的表單元素看起來不透明，而且元素（如button）有默認的背景顏色。用background-color屬性能夠覆蓋默認顏色。若是強烈要求能夠將其顯示設置爲"transparent"。

到目前爲止所討論的透明度實際上是非此即彼的：元素的背景不是全透明就是全不透明的。指定元素（內容的前景和背景）爲半透明也是可能的，用css3的opacity屬性來處理，改屬性值是0-1之間的數字。1表明100%不透明（默認值），而0表明0%不透明（或100%透明）。opacity屬性在當今全部的瀏覽器中都支持，除了iE,IE提供相似的可選方式：IE特有的filter屬性。讓元素75%不透明，可使用如下css樣式：

opactiy：.75;

filter:alpha（opacity=75）；

overflow屬性容許指定當內容超出元素邊框時該如何顯示，而clip屬性確切的指定了應該顯示元素的哪一個部分，它無論元素是否溢出。在建立元素漸進顯示的腳本效果時候該屬性特別有用

clip屬性的值指定了元素的裁剪區域，在css2中，裁剪區域是矩形的，不過clip屬性的語法預留了開放的可能，該標準未來的版本將支持除了矩形之外其餘形狀的裁剪。

rect（top right bottom left）

相對於元素邊框的左上角，top 、right、bottom、left 4個值指定了裁剪矩形的邊界

style="clip:rect(0px 100px 100px 0px)"

注意，圓括號中的4個值是長度，必須包含明確的單位，如px表明像素，不準使用百分比。能夠指定負值，讓裁剪區域超出爲元素指定的邊框尺寸。也能夠爲任何4個值使用auto關鍵字來指定裁剪區域的邊緣就是元素的對應邊緣。例如，用style屬性指定只顯示元素最左邊的100像素：

sytle="clip:rect(auto 100px auto auto);"

注意，值之間沒有逗號，裁剪區域從上邊緣開始順時針設置。將clip設置爲auto來停用裁剪功能

 

腳本話css最直截了當的方法是更改單獨的文檔元素的style屬性。相似大多數HTML屬性，style也是元素對象的屬性，它能夠在javascript中操做。可是style屬性不一樣尋常：它的值不是字符串，而是一個CSSStyleDelcaration對象。該對象的javascript屬性表明了HTML代碼中經過style指定的css屬性。

若是一個css屬性名包含一個或多個連字符，CSSStyleDeclatation屬性名的格式應該是移除連字符，將每一個連字符後面緊接着的字母大寫，若是當一個css屬性（如float屬性）在javascript中對應的名字是保留字時，在以前加css前綴來建立合法的cssstyledeclaration名字。

使用CSSStyleDeclatation對象的style屬性時，記住全部的值都應該是字符串，並且，記住全部的定位屬性都須要包含單位

有時，發現做爲單個字符串來設置或查詢元素的內聯樣式反而比做爲CSSStyleDeclatation對象更加簡單，爲此，可使用元素的getAttribute和setAttribute方法或CSSStyleDeclatation對象的cssText屬性來實現

//二者均可以設置e的樣式屬性爲字符串s

e.setAttribute("style",s);

e.style.cssText=s;

//二者均可以查詢元素的內聯樣式

s=e.getAttribute("style");

s=e.style.cssText;

查詢計算出的樣式

用瀏覽器窗口對象的getComputedStyle（）方法來得到一個元素的計算樣式。此方法的第一參數就是要獲取其計算樣式的元素，第二個參數也是必需的，一般是null或空字符串，但它也能夠是命名CSS僞對象的字符串。如：before ：after ：first-line或者：first-letter。

getcomputedStyle方法的返回值是一個CSSStyleDeclatation對象，它表明了應用在指定元素（或僞對象）上的全部樣式。表示計算樣式的CSSStyleDeclatation對象和表示內聯樣式的對象之間有一些重要的區別：

一、計算樣式的屬性是隻讀的

二、計算樣式的值是絕對值

三、不計算複合屬性，它們只基於最基礎的屬性。

四、計算樣式的cssText未定義

 設置和清除元素的className屬性來爲元素添加和移除「attention」類：

function grabAttention(e){

e.className="attention";

}

function releaseAttention(e){e.className="";}

上面的函數假設className屬性只指定零個或一個類名，若是有多個類名就沒法工做了。若是元素已經有一個類了，爲該元素調用grabAttention函數將覆蓋已存在的類。