今天我将一哈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>之间,你会看见不同效果,
并且实现图片动态效果.