正文

css样式2005-05-01 15:29:00

【评论】 【打印】 【字体: 】 本文链接:http://blog.pfan.cn/caige/818.html

分享到:

1、让背景图案静止不动     当网页不能在一屏全部显示时,我们往往借助于水平滚动条和竖直滚动条来浏览屏幕以外的内容,移动滚动条时一般图象和文字是一起移动的,那么我们有没有办法使背景图象不随文字一起“滚动”呢?利用CSS就可以实现这样的目的,我们只要把下面这段源代码直接放在网页的与标签之间就可以了,其中bg.jpg就是网页中的背景图象,大家可以把它换成自己需要的背景图象:     〈style type="text/css"〉   〈!--    BODY { background: purple url(bg.jpg);      background-repeat:repeat-y;      background-attachment:fixed      } --〉 〈/style〉 2、让网页自动进行“首行缩进”     用DreamWeaver来设计网页的用户知道,在DreamWeaver中输入空格不是那么的方便,我们可以利用css来设计“首行缩进”功能来弥补这个缺憾。打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),在该对话框的“Block”标签下的“text-indent”属性定义设置项中来设置“首行缩进”功能,在这里要注意的是,所谓“首行”是指每段内容的第一行,也就是直接按回车键就形成了一个新的段落。缩进最好以“em”(字符)为单位,比如:汉字编排要求每段开始缩进两个汉字,设置好的CSS如下所示:     〈style type="text/css"〉   〈!--   .style1 { text-indent: 2em}   --〉   〈/style〉    3、巧用css来设定文字的背景     在DreamWeaver中,如果我们需要给文字加上不同的背景颜色时,操作上很简单,只要用鼠标单击属性面板上的文字颜色按钮,从弹出的颜色设置栏中选择需要的颜色就可以了。但如果我们要给部分文字加不同的背景色,该怎么操作呢?由于DreamWeaver3中没有这方面的功能,但我们可以巧妙利用css来实现这样的目的。具体操作过程是,首先我们可以先做一个定义背景色的CSS,例如给这个css命名为bjstyle,接着在网页中选中需要设置颜色的文字,然后在工具栏中单击一下“bjstyle”就行了。下面就是一个定义颜色背景的CSS的源代码:     〈style type="text/css"〉   〈!--   .bjstyle { background: #cc00bb}   --〉   〈/style〉 4、给指定内容加边框     在DreamWeaver中,我们可以利用CSS强大的定义功能来给某部分内容加边框,定义时首先打开DreamWeaver的设计界面,在该界面中找到CSS的属性定义对话框(Style Definition for .style1),该对话框的“Border”设置项就是用来定义指定内容边框线的,其中“top”、“bottom”、“left”、“right”设置栏是分别用来定义指定内容四周边框线的粗细和颜色的,这些设置项设置好后还需要在下面的“Style”中定义线型,否则我们将看不到定义的边框线,因为css默认的线型是“none”。下面是一个定义了上边框为:蓝色细线;左边框为:绿色中粗线的CSS源代码:     〈style type="text/css"〉   〈!--   .style1 { border: solid; border-width: thin 0px 0px medium; border-color: #0000FF black black #00FF00}   --〉   〈/style〉 5、给选中文字加背景图像     在DreamWeaver中,我们同样可以给指定文字加上背景图象,其操作过程与给指定文字加背景色操作类似,只不过是把选择背景颜色换成选择加载的背景图象就是了。其具体操作过程是,首先我们可以先做一个定义背景色的CSS,例如给这个css命名为txstyle,接着在网页中选中需要设置颜色的文字,然后在工具栏中单击一下“txstyle”就行了。下面就是一个定义背景图象的CSS的源代码(其中test.gif就是所加载的背景图象):     〈style type="text/css"〉   〈!--   .txbgstyle { background-image: url(test.gif)}   --〉   〈/style〉

阅读(2718) | 评论(0)


版权声明:编程爱好者网站为此博客服务提供商,如本文牵涉到版权问题,编程爱好者网站不承担相关责任,如有版权问题请直接与本文作者联系解决。谢谢!

评论

暂无评论
您需要登录后才能评论,请 登录 或者 注册