今天我將一哈CSS吧!雖然它不能算是一門編程語言
不過它卻是很獨特的解釋性語言 主要用於網頁編程 結合於HTML和JavaScript突出它的靈活性!
它的代碼主要嵌在<head></head>之間!前面要加上<style>後面是</style>結尾,當然也可以寫成
<style type="css/text">
<!--
.layer{
position:absolute;
top:10px;
left:50px;
width:100px;
height:100px;
z-index:2;
}
-->
</style>
它同JavaScript的語法結構很像,我們來比較一哈子!
<script language="javascript" type="javascript/text">(也可以寫成<script>)
<!--
var i;
for (i=0;i<100;i++)
{
alert("你好嗎");
}
-->
</script>
讓我們總體的看一哈 他們在HTML中的位置關係和用法
<html>
<head>
<title>測試CSS和JavaScript的用法</title>
<style type="css/text">
<!--
.layer{
position:absolute;
top:10px;
left:50px;
width:100px;
height:100px;
z-index:2;
}
-->
</style>
<script language="javascript" type="javascript/text">(也可以寫成<script>)
<!--
var i;
for (i=0;i<100;i++)
{
alert("你好嗎");
}
-->
</script>
</head>
<body>
......
</body>
</html>
不過在HTML中的用法體現它們的共通性
而且有時候HTML語言可以和CSS語言進行交流比如說會用到JavaScript腳本語言進行觸發性的
舉個例子:
<a href="#" οnclick="this.className='layer'">點這裏</a>
上面只是舉個例子,看下面這個真實的例子:
比如說
//加載1.gif這幅圖片,並設置JavaScript腳本鼠標經過圖片後觸發的事件layer
<img src="1.gif" onMouseOver="this.className="layer">點這裏
將這一句放在<body></body>之間;
<style type="CSS/TEXT">
<!--
//當你的鼠標放在剛纔加載圖片上會看見圖片過濾的效果
.layer{
filter:alpha(opacity=100,finshopacity=0,style=3);
}
-->
</style>
將這一句放在<head></head>之間,你會看見不同效果,
並且實現圖片動態效果.