CSS講解

今天我將一哈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>之間,你會看見不同效果,

並且實現圖片動態效果.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章