1、用到的基本概念:
內(nèi)嵌樣式(inline Style) :是寫在Tag里面的,內(nèi)嵌樣式只對所有的Tag有效。
eg:<P style="font-size:20pt; color:red">這個Style定義<p></p>里面的文字是20pt字體,字體顏色是紅色。</p>
內(nèi)部樣式(internal Style Sheet):是寫在HTML的<head></head>里面的,內(nèi)部樣式只對所在的網(wǎng)頁有效。
<HTML>
<HEAD>
<STYLE type="text/css">
H1.mylayout {border-width:1; border:solid; text-align:center; color:red}
</STYLE>
</HEAD>
<BODY>
<H1 class="mylayout"> 這個標題使用了Style。</H1>
<H1>這個標題沒有使用Style。</H1>
</BODY>
</HTML>
外部樣式表(External Style Sheet):如果很多網(wǎng)頁需要用到同樣的樣式(Styles),將樣式(Styles)寫在一個以.css為后綴的CSS文件里,然后在每個需要用到這些樣式(Styles)的網(wǎng)頁里引用這個CSS文件。
<HEAD>
<link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css">
</HEAD>
CSS第一個字母,是Cascading,意為串聯(lián)。它是指不同來源的樣式(Styles)可以合在一起,形成一種樣式。
樣式(Styles)的優(yōu)先級依次是內(nèi)嵌(inline), 內(nèi)部(internal), 外部(external), 瀏覽器缺省(browser default)。
假設(shè)內(nèi)嵌(Inline)樣式中有font-size:30pt, 而內(nèi)部(Internal)樣式中有font-size:12pt,那么內(nèi)嵌(Inline)式樣式就會覆 蓋內(nèi)部(Internal)樣式。
2、currentStyle 代表了在全局樣式表、內(nèi)嵌樣式和
this);" target="_blank">HTML 標簽屬性中指定的對象格式和樣式。
Style為內(nèi)嵌樣式。
style 標準的樣式!可能是由style屬性指定的!
runtimeStyle 運行時的樣式!如果與style的屬性重疊,將覆蓋style的屬性!
currentStyle 指 style 和 runtimeStyle 的結(jié)合!
當指定了runtimeStyle,那么當前顯示的樣式以runtimeStyle為準,如果取消了runtimeStyle,那么當前顯示樣式就恢復(fù)到currentStyle的樣式。
<script>
function yangshi(){
//alert(document.getElementsByName("a")[0].value);
//alert(document.getElementsByName("b")[0].currentStyle);
alert("The td object currentStyle.width is " + oTd.currentStyle.width +
"\nThe td object style.width is " + oTd.style.width +
"\nThe td object style.textAlign is " + oTd.style.textAlign +
"\nThe td object currentStyle.textAlign is " +oTd.currentStyle.textAlign +
"\nThe td object style.font is " + oTd.style.fontSize +
"\nThe td object currentStyle.font is " + oTd.currentStyle.fontSize);
}
function runStyle(){
p1.style.backgroundColor = "red";
p1.runtimeStyle.color = "blue";
p1.runtimeStyle.backgroundColor = "green";
alert("000style=="+p1.style.backgroundColor);
alert("aaastyle=="+p1.style.color); //沒有數(shù)據(jù)
alert("111runtime=="+p1.runtimeStyle.backgroundColor); //沒有數(shù)據(jù)
alert("222runtime=="+p1.runtimeStyle.color);
alert("333currentStyle=="+p1.currentStyle.backgroundColor); //顯示green,說明runtime優(yōu)先級高
alert("444currentStyle=="+p1.currentStyle.color);
}
</script>
</head>
<body>
<input type="button" name="qq" value="Style" onclick="yangshi()">
<table border="1">
<tr>
<td width="1100" style="font-size:100px;text-align:right" id="oTd">text</td>
</tr>
</table>
<p id="p1">pppp</p><input type="button" name="ww" value="runtime" onclick="runStyle()" >
</body>
如對本文有疑問,請?zhí)峤坏浇涣髡搲?,廣大熱心網(wǎng)友會為你解答??! 點擊進入論壇