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

并且实现图片动态效果.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值