您好!欢迎您光临CSS应用笔记_汕头港湾! 棋牌 I 论坛 I 企业建站 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页工具>>>CSS应用笔记
CSS应用笔记
发表日期:2010/4/28 23:16:00 出处:http://www.gxblk.com/ 作者:黑马 发布人:pilots 已被访问 763

说明:这是一篇在编写CSS时随手记下的笔记,章法零乱,内容不系统。作为心得,希望对同好者有些启发,更希望能得到高手的指点。笔记可能会在一段时间内有更新。

# 什么叫css、它能做什么?

如果把网页比作人,那么,css就是人的包括服饰在内的所谓“门面”。css就是那么一种东西:它叫层叠样式表,是一组样式的集合,用以控制网页不同元素的样式。奇妙的是,同一个层叠样式表可以用于不同的页面,它改变了,被它控制的所有页面的外观样式都会跟着改变。

#用什么来编写css文件?

有专门的软件,有不少还是“所见即所得”的,不过使用任何文本编辑器(如Windows的记事本、写字板)都可以编写css文件,保存时选择文件类型为所有文件,在文件名给出后缀名(.css)即可。

#css代码重用的实现

对于需求外观大致相同的网页集合,建议都使用同一个css文件,理由是代码重用可以节省很多资源,比如,客户端在一个网络周期内一般不会重新下载相同的样式文件(最简单的试验方法是上传新修改的css文件后再访问网站,你会发现新的样式表不发生作用,你得刷新一下才行);再比如,大大减少制作和维护网页(基于外观方面)的工作量。同类网页尽量使用同一个css文件是一个好习惯,也是实现css代码高效使用的方式。

# 横向居中的div

只需设置好margin值即可:(margin: auto;)。不少人建议设置成:(margin: 0 auto;)。经比较,在各主流浏览器中,要不要0没有区别。一般地,默认的margin值除了body{}外,不设置的话都为0。

# 纵向滚动条在新旧IE版本间的问题

当页面高度不足无需出现纵向滚动条时,IE8右边的垂直滚动条会自动隐藏,IE7及以下版本则出现不可用的灰色的滚动条。纵向滚动要将影响网页的布局,因为它有宽度,占据一定的横向位置。如果确实追求完美,在确实不需要纵向滚动条的情况下,应该设置一下而不是让IE沉默处理。

# 分隔标签

hr少用为妙,因为,IE8、Firefox、Opera等浏览器已经对它产生“歧视”了:不论如何设置,hr都不能在这 些浏览环境下成 为一条标准的分隔线。

# 分隔用的div

用div分隔上、下或左、右的区域是修饰布局细节的一个重要手段(至少算得上简单和快捷)。为了兼容各方浏览器,精确地定义高度和宽度还不够,还需要设置字体为最小(比如0px),这是因为低版本的IE会将任意一个div(哪怕高度为0px)视为占据正常行高的“行”,只有字体大小为很小,所作的高度设置才被认可。

用div模拟hr时最好设置其高度为零像素,然后用一个像素的border-top或border-bottom来虚拟hr效果。记住:设置它的字体大小为零像素、设置好它的宽度和位置。

# 表格的异用

表格优于div的地方其实不少,这里谈两点体会:其一,它的高度自适应能力兼容性极好。借用此特性,在难以驾驭高度的div(比如应该有一个固定的高度值,但今后还应该随内容的增多而动态撑高),嵌套一个表格,定义这个表格的高度就好,一方面它能固定div的高度,另一方面,当表格里的内容增多时,表格自动增设,从而把它外层的div撑开。其二,显示数据表或需要规则排版的内容,用表格比用div更容易实现。

# word-wrap能不能用

word-wrap是个极好的东东,当其值为bread-word,一行里若存在由连续不断的字母和数字组成的字串,到达最右边界时文字会自动折行(会破坏单词但保持容器不被顶开从而保持整体排版的一致性)。遗憾的是,word-wrap在W3C CSS2检验机制中不通过。用不用它看你要标准还是要效果了。

# 嵌入式使用style

层叠样式表不可能规划全部的细节,偶尔或常常在页面代码里的某些细节处使用style是无可厚非的,反正嵌入式使用CSS是合法的。需要记住的是,在style中编写CSS代码,基于CSS的规范和习惯要保持。

# div的垂直居中

这是一个让人头疼的问题,不过也不是毫无办法。比如,可以设定padding-top的值来实现,不过要记得把div的height减去padding-top的值,否则在低版本的IE显示效果会发生问题。针对单行文字的垂直居中,设置同高的line-height能够很理想地实现垂直居中问题,不过对图片无效,针对图片还是应该考虑padding-top的好。如果不厌恶表格,那么,嵌套一个固定高度的表格则是解决div垂直居中的最佳办法。

# 链接(<a>)标签的背景色

通常,我们总会设置链接标签的前景色(color),别忘了顺带设置它的背景色(background-color),除非你对W3C CSS校验毫不在乎。W3C CSS规范的标准里头,凡设置了前景色,必定设置背景色,反之亦然。这对链接标签太苛刻,因为,链接标签可能用于不同背景色的区域里。解决的方法之一是,设置多组链接样式,或设置一个固定的链接样式,然后在其他的细节再用style方式单独处理。

# div的高度设置

确保div的高度是静止不变的,设置其高度值是明智之举,这样可以避免很多意外的发生(比如该div的背景色(图)和border的设置生效,但如何div的高度可能是动态变化的,设置了固定高度则不会随内容的变化而发生互动现象,它永远是一个固定高度。定义一个类可加入一个固定高度值,也可使之发生互动,但是仍然有瓿问题:这个类不一定兼容于旧版本的IE。

#clear的使用

上下div组合排版,每一个div都使用了“margin: auto”,为什么下一个div仍可能出现被扯到上一个div的右下方?这大概是因为上一个div使用了嵌套,里面还有诸多个div,且它们实际占据的高度或宽度不足以占据上一个主div预期的值。这时我们在下一个div使用“clear: both”就能解决问题,clear的意思是清除浮云,可选的值有left、right或both,左、右或两边不允许有浮云对象,这样它就乖乖地回复到预期位置。

 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:推荐十首经过临床证实的纯美音乐《夜》

下篇文章:重温久违熟悉的旋律 中华艺术瑰宝《梨园戏语》 320Kbps/mp3

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

汕头港湾(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:491341756 联系人:常青树

琼icp备09005167