樣式表類型：
1.行內樣式表
2.內嵌樣式表
3.外部樣式表
常用樣式：
1.文本樣式
名稱 |
說明 |
font-size |
字體大小 |
font-family |
字體類型 |
font-style |
字體樣式 |
color |
設置或檢索文本的顏色 |
text-align |
文本對齊 |
2.背景樣式
名稱 |
說明 |
background-color |
設置背景顏色 |
background-image |
設置背景圖像 |
background-repeat |
設置一個指定的圖像如何被重復 |
3.組合屬性樣式
名稱 |
說明 |
不帶下劃線的超鏈接樣式 |
A{color:blue;
text-decoration:none;}
A:hover{color:red;} |
細邊框樣式 |
.boxBorder{border-width:1px;
border-style:solid;} |
圖片按鈕樣式 |
.picButton{background-image:url(images/back2.jpg);
border:0px;
margin:0px; 圖片不顯示解決方案
padding:0px;
height:23px; width:82px;
和圖片大小一致
font-size:14px;} |
改變字體大小的樣式特效：
<a href="#" onmouseover="this.style.fontSize='24px'"
onmouseout="this.style.fontSize='14px'">免費注冊</a>
當鼠標移動到“免費注冊”上方時，字體變為：24像素
當鼠標離開“免費注冊”時，字體變為：14像素
在CSS屬性中使用短橫線分隔其名稱的屬性名，而在Style對象的屬性中為什么去掉了這個短橫線？譬如：在CSS中，屬性background-image、font-size、text-align中都有短橫線，
而它們對應的Style對象的屬性：backgroundImage、borderColor、fontSize、textAlign都去掉了短橫線
其原因是：javascript的標識符不能包含短橫線，并且若標識符中包含多個單詞時，后面單詞的首字母要大寫，如屬性名fontSize中的“S”字母必須是大寫的
如：onmouseover="this.style.backgroundImage='url(images/back2.jpg)'"
通過className屬性改變樣式：
onmouseover="this.className='類樣式名'"
注意：這里的className不能寫成"class"
層的顯示/隱藏特效：
顯示屬性display
語法：Object.style.display="value";
value常用取值：
參數值 |
說明 |
block |
默認值。按塊顯示，換行顯示，用該值為對象之后添加新行 |
none |
不顯示，隱藏對象 |
inline |
按行顯示，和其他元素在同一行顯示 |
對比：
1.display指定區域是否在瀏覽器中顯示。設置為display:none 的對象根本就不會顯示，在頁面中放佛沒有該對象一樣。
2.visibility指定區域是否可見。設置為visibility:hidden 的對象扔占據著頁面的空間，只是該空間看上去是空的。
表單元素定位有兩種：
1.document.getElementByIdx_x_x_x_x("id").
2.document.Form名.表單元素名.
其他元素只有一種定位，即document.getElementByIdx_x_x_x_x("id")
常見錯誤：
onmouseover="this.style.fontSize='14px'"
onmouseover="document.getElementByIdx_x_x_x_x_x_x('id').style.fontSize='14px'"
onmouseover="this.style.backgroundImage='url(images/back2.jpg)'"
//用單引號，注意fontSize,S大寫
onmouseover="this.className='mouseOutStyle'" //不是class
document.getElementByIdx_x_x_x_x_x_x('id').style.display="none"; //style屬性下才有display屬性