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>之间,你会看见不同效果,

并且实现图片动态效果.

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