|
√ Google adsense申请技巧 √ 本站核心代理域名注册主机业务
√ 快速发布你的买卖域名买卖网站信息
√ 1元注册 cn域名
√ 站长每日新闻导读 √ ·推荐万网空间¥120元 150m √ 站长网:站长必上的网站 √ 网站联盟大全 √ 本站代理万网域名55空间120元 |
随着互联网经济的不断发展,互联网上的专业网站、公众服务网站以及企业门户的数量都在飞速的增长,各网站的信息量也呈爆炸性增长的趋势。面对这些庞大的信息量,我们对网页中每一个栏目的增删,都会是一个很复杂的过程。为了提高网页的维护更新效率,我们可以使用样式表,来仅仅改变一个文件,就能达到同时改变几百个网页的外观,而其个性化的表现未受任何损失。为了能充分用好样式表的强大性和灵活性,笔者就怎样有效使用样式表,来谈谈自己的一些心得体会。
1、在一个网页中同时调用CSS的多种引入方式
在HTML中引入CSS的方式很多,例如直接插入式,使用 链接外部样式表,使用CSS"@import"导入样式表以及在内部元素中使用"STYLE"标记来定义样式表等。有网友询问,这些引入方式能不能同时在一个网页中被调用,它们之间会不会产生混乱?其实,我们大可不必这么担心,这就是它为什么称之为“层叠样式表”的原因,浏览器在处理网页中的样式表是按照一定的顺序来处理的,首先检查页面中是否有直接插入式CSS,如果存在就先执行它,针对本句的其它CSS就不去管它了;接着检查网页源代码中的"STYLE"标记,有就执行了;接下来再依次检查执行"@import"导入的内部样式表和 链接的外部样式表。因此,我们完全可以在一个网页中同时调用CSS的多种引入方式。
2、快速创建CSS外连式文件
对于一个初接触CSS的网页设计人员来讲,要用写字板之类的编辑器,去创建一个CSS外连式文件是相当困难的。由于Dreamweaver对CSS支持的很好,用它来帮助就轻松多了。具体可以这样操作:首先在纸上写好在网站的网页中可能要用到的格名称,然后在Dreamweaver的编辑窗中调出CSS面板,一个一个地定义,并在一个空白页上适当地写一点相关内容,边定义边试用,效果不满意,立即修改;全部定义好后,再用记事本创建一个空的CSS外连式文件,把在〈head〉与〈/head〉之间的那段定义好的CSS复制到CSS文件中去,就大功告成了。
3、让背景图案静止不动
当网页不能在一屏全部显示时,我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容,移动滚动条时一般图象和文字是一起移动的,那么我们有没有办法使背景图象不随文字一起“滚动”呢?利用CSS就可以实现这样的目的,我们只要把下面这段源代码直接放在网页的与标签之间就可以了,其中bg.jpg就是网页中的背景图象,大家可以把它换成自己需要的背景图象:
Example Source Code
Example Source Code
Example Source Code [
Example Source Code
7、用样式表来控制超级链接的颜色
如果你仔细研究一下超级链接,你就会发现,浏览器处理超级链接的默认方式是,对于目前还没有访问过的超级链接是用蓝色且带有下划线的文字来显示的,对于已经访问过的超级链接则是用深紫色且带有深紫色的下划线的文字来显示的。这些默认的设置颜色看得时间,可能就产生厌倦之感,并且很有可能与自己网页的背景颜色不协调。因此我们完全可以按照自己的视觉要求,来自由更改超级链接的显示颜色,让它更能体现自己的风格。下面笔者就来介绍一段修改超级链接显示颜色的源代码,代码如下:
我们可以把这段源代码添加在HTML文件的……之间,它可以对对本网页中的任何一个超级链接都起作用,其中这段代码中的:
A:link {text-decoration: none; color:blue}是说明了超级链接还没有被访问,它没有下划线,颜色为蓝色。
A:visited { color:red; text-decoration:line-through }说明了超级链接被访问后,它的颜色变成了红色,有了一根删除线。
A:active { color:white; text-decoration:underline }说明超级链接处于活动状态的时候,它的颜色变成了白色,有了下划线。
A:hover {text-decoration:none;color:#FF0000;background-color:black}说明鼠标移动到超级链接后,它没有下划线,文字颜色变成了黄色,背景颜色是黑色。
根据上面的解释,我们可以把超级链接在各种状态下的显示颜色修改成自己喜欢的那种,以便能更好地展示自己的个性。
〈style type="text/css"〉
〈!--
.style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}
--〉
〈/style〉