樣式表類(lèi)型：
1.行內(nèi)樣式表
2.內(nèi)嵌樣式表
3.外部樣式表
常用樣式：
1.文本樣式
名稱(chēng) |
說(shuō)明 |
font-size |
字體大小 |
font-family |
字體類(lèi)型 |
font-style |
字體樣式 |
color |
設(shè)置或檢索文本的顏色 |
text-align |
文本對(duì)齊 |
2.背景樣式
名稱(chēng) |
說(shuō)明 |
background-color |
設(shè)置背景顏色 |
background-image |
設(shè)置背景圖像 |
background-repeat |
設(shè)置一個(gè)指定的圖像如何被重復(fù) |
3.組合屬性樣式
名稱(chēng) |
說(shuō)明 |
不帶下劃線的超鏈接樣式 |
A{color:blue;
text-decoration:none;}
A:hover{color:red;} |
細(xì)邊框樣式 |
.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'">免費(fèi)注冊(cè)</a>
當(dāng)鼠標(biāo)移動(dòng)到“免費(fèi)注冊(cè)”上方時(shí)，字體變?yōu)椋?4像素
當(dāng)鼠標(biāo)離開(kāi)“免費(fèi)注冊(cè)”時(shí)，字體變?yōu)椋?4像素
在CSS屬性中使用短橫線分隔其名稱(chēng)的屬性名，而在Style對(duì)象的屬性中為什么去掉了這個(gè)短橫線？譬如：在CSS中，屬性background-image、font-size、text-align中都有短橫線，
而它們對(duì)應(yīng)的Style對(duì)象的屬性：backgroundImage、borderColor、fontSize、textAlign都去掉了短橫線
其原因是：javascript的標(biāo)識(shí)符不能包含短橫線，并且若標(biāo)識(shí)符中包含多個(gè)單詞時(shí)，后面單詞的首字母要大寫(xiě)，如屬性名fontSize中的“S”字母必須是大寫(xiě)的
如：onmouseover="this.style.backgroundImage='url(images/back2.jpg)'"
通過(guò)className屬性改變樣式：
onmouseover="this.className='類(lèi)樣式名'"
注意：這里的className不能寫(xiě)成"class"
層的顯示/隱藏特效：
顯示屬性display
語(yǔ)法：Object.style.display="value";
value常用取值：
參數(shù)值 |
說(shuō)明 |
block |
默認(rèn)值。按塊顯示，換行顯示，用該值為對(duì)象之后添加新行 |
none |
不顯示，隱藏對(duì)象 |
inline |
按行顯示，和其他元素在同一行顯示 |
對(duì)比：
1.display指定區(qū)域是否在瀏覽器中顯示。設(shè)置為display:none 的對(duì)象根本就不會(huì)顯示，在頁(yè)面中放佛沒(méi)有該對(duì)象一樣。
2.visibility指定區(qū)域是否可見(jiàn)。設(shè)置為visibility:hidden 的對(duì)象扔占據(jù)著頁(yè)面的空間，只是該空間看上去是空的。
表單元素定位有兩種：
1.document.getElementByIdx_x_x_x_x("id").
2.document.Form名.表單元素名.
其他元素只有一種定位，即document.getElementByIdx_x_x_x_x("id")
常見(jiàn)錯(cuò)誤：
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)'"
//用單引號(hào)，注意fontSize,S大寫(xiě)
onmouseover="this.className='mouseOutStyle'" //不是class
document.getElementByIdx_x_x_x_x_x_x('id').style.display="none"; //style屬性下才有display屬性