仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 700|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来一发CSS款式表利用的技能

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:17:59 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。
<P>
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就是网页中的背景图像,人人能够把它换成本人必要的背景图像:
〈styletype="text/css"〉
  〈!--
   BODY{background:purpleurl(bg.jpg);
     background-repeat:repeat-y;
     background-attachment:fixed
     }
--〉
〈/style〉
4、让网页主动举行“首行缩进”
用DreamWeaver来计划网页的用户晓得,在DreamWeaver中输出空格不是那末的便利,我们能够使用css来计划“首行缩进”功效来填补这个缺憾。翻开DreamWeaver的计划界面,在该界面中找到CSS的属性界说对话框(StyleDefinitionfor.style1),在该对话框的“Block”标签下的“text-indent”属性界说设置项中来设置“首行缩进”功效,在这里要注重的是,所谓“首行”是指每段内容的第一行,也就是间接按回车键就构成了一个新的段落。缩进最好以“em”(字符)为单元,好比:汉字编排请求每段入手下手缩进两个汉字,设置好的CSS以下所示:
〈styletype="text/css"〉
  〈!--
  .style1{text-indent:2em}
  --〉
  〈/style〉
5、巧用css来设定笔墨的背景
在DreamWeaver中,假如我们必要给笔墨加上分歧的背景色彩时,操纵上很复杂,只需用鼠标单击属性面板上的笔墨色彩按钮,从弹出的色彩设置栏当选择必要的色彩就能够了。但假如我们要给部分笔墨加分歧的背景致,该怎样操纵呢?因为DreamWeaver3中没有这方面的功效,但我们能够奇妙使用css来完成如许的目标。详细操纵历程是,起首我们能够先做一个界说背景致的CSS,比方给这个css定名为bjstyle,接着在网页当选中必要设置色彩的笔墨,然后在工具栏中单击一下“bjstyle”就好了。上面就是一个界说色彩背景的CSS的源代码:
〈styletype="text/css"〉
  〈!--
  .bjstyle{background:#cc00bb}
  --〉
  〈/style〉
6、给指定内容加边框
在DreamWeaver中,我们能够使用CSS壮大的界说功效来给某部份内容加边框,界说时起首翻开DreamWeaver的计划界面,在该界面中找到CSS的属性界说对话框(StyleDefinitionfor.style1),该对话框的“Border”设置项就是用来界说指定内容边框线的,个中“top”、“bottom”、“left”、“right”设置栏是分离用来界说指定内容周围边框线的粗细和色彩的,这些设置项设置好后还必要鄙人面的“Style”中界说线型,不然我们将看不到界说的边框线,由于css默许的线型是“none”。上面是一个界说了上边框为:蓝色细线;右边框为:绿色中粗线的CSS源代码:
〈styletype="text/css"〉
  〈!--
  .style1{border:solid;border-width:thin0px0pxmedium;border-color:#0000FFblackblack#00FF00}
  --〉
  〈/style〉
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}申明鼠标挪动到超等链接后,它没有下划线,笔墨色彩酿成了黄色,背景色彩是玄色。
依据下面的注释,我们能够把超等链接在各类形态下的显现色彩修正成本人喜好的那种,以便能更好地展现本人的本性。
8、给选中笔墨加背景图象
在DreamWeaver中,我们一样能够给指定笔墨加上背景图像,其操纵历程与给指定笔墨加背景致操纵相似,只不外是把选择背景色彩换成选择加载的背景图像就是了。其详细操纵历程是,起首我们能够先做一个界说背景致的CSS,比方给这个css定名为txstyle,接着在网页当选中必要设置色彩的笔墨,然后在工具栏中单击一下“txstyle”就好了。上面就是一个界说背景图像的CSS的源代码(个中test.gif就是所加载的背景图像):
〈styletype="text/css"〉
  〈!--
  .txbgstyle{background-image:url(test.gif)}
  --〉
  〈/style〉



如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。
活着的死人 该用户已被删除
沙发
发表于 2015-1-18 06:01:51 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
乐观 该用户已被删除
板凳
 楼主| 发表于 2015-1-23 17:43:53 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
admin 该用户已被删除
地板
发表于 2015-1-31 19:48:42 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
因胸联盟 该用户已被删除
5#
发表于 2015-2-7 00:33:52 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后,很快就了解了还不太清楚的内容和并不了解的知识(像布局表格、绘制布局单元格等)。
冷月葬花魂 该用户已被删除
6#
发表于 2015-2-19 08:20:59 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
小妖女 该用户已被删除
7#
发表于 2015-3-13 03:09:50 | 只看该作者
每天上网看着那样多的网页,于是我才下定决心选择了网页制作这一门课程,目的就是希望以后能够做出一个完美的网页来。
金色的骷髅 该用户已被删除
8#
发表于 2015-3-20 11:23:38 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-15 09:32

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表