收藏CSS经典.doc

收藏CSS经典技巧之一/article.asp?id=885一、CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight:bold;font-style:italic;font-varient:small-caps;font-size:1em;line-height:1.5em;font-family:verdana,sans-serif但也可以把它们全部写到一行上去：font:bolditalicsmall-caps1em/1.5emverdana,sans-serif真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight,font-style,以及font-varient，他们会使用缺省值，这点要记上。二、同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：.同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。三、CSSborder的缺省值通常可以设定边界的颜色，宽度和风格，如：border:3pxsolid#000这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。四、CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：第1行就是显示，第2行是打印，注意其中的media属性。但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用display:none这个命令来关掉一些装饰图片，再关掉一些导航按钮。五、图片替换技巧一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。比如你想整个卖东西的图标，你就用了这个图片：这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：Buywidgets但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：h1background:url(widget-image.gif)no-repeat;height:imageheighttext-indent:-2000px注意把imageheight换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。六、CSSbox模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：#boxwidth:100px;border:5px;padding:20px这样调用它：.这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。但用CSS也可以达到同样的目的，让它们显示效果一致。#boxwidth:150px#boxdivborder:5px;padding:20px这样调用：.这样，不管什么浏览器，宽度都是150点了。七、块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：#contentwidth:700px;margin:0auto你会使用来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：bodytext-align:center#contenttext-align:left;width:700px;margin:0auto这会把网页内容都居中，所以在Content中又加入了text-align:left。八、用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元vertical-align:middle就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。CSS方法是什么呢？对了，把这些文字的行高设为2em：line-height:2em，这就可以了。九、CSS在容器内定位CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：#containerposition:relative这样容器内所有的元素都会相对定位，可以这样用：.如果想定位到距左30点，距上5点，可以这样：#navigationposition:absolute;left:30px;top:5px当然，你还可以这样：margin:5px0030px注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。十、直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：#navigationbackground:blue;width:150px较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。bodybackground:url(blue-image.gif)00repeat-y此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。收藏CSS经典技巧之二Author:52css Data:2008-10-27字体大小: 小 中 大 RSS订阅 | 上一篇 | 下一篇我们接着52CSS.com昨天的内容，继续介绍CSS经典技巧。收藏CSS经典技巧之一/article.asp?id=884十一、Block和inline元素对比所有的HTML元素都属于block和inline之一。block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度,和是块元素的例子。相反地，inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。,和是inline元素的例子。用codeclass=inlinedisplay:inline或display:block命令就可以改变一个元素的这一特性。什么时候需要改变这一属性呢？让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度（对导航条特别有用）；控制inline元素的高度；无须设定宽度即可为一个块元素设定与文字同宽的背景色。十二、再来一个box黑客方法之所以有这么多box黑客方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。要想让IE5等同其他浏览器保持一致，可以用CSS的方法：padding:2em;border:1emsolidgreen;width:20em;width/*/:/*/14em;第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。十三、页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到标签下，然后为div指定一个id：然后CSS这样设计：#containermin-width:600px;width:expression(document.body.clientWidth600?600px:auto);第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。同样的办法也可以为IE实现最大宽度：#containermin-width:600px;max-width:1200px;width:expression(document.body.clientWidth1200?”1200px“:”auto);十四、IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：.boxwidth:80px;height:35px;htmlbody.boxwidth:auto;height:auto;min-width:80px;min-height:35px;所有的浏览器都可以使用第一个box设置，但IE不认得第2段设置，因为其中用到了子选择器命令。第2个设置更特殊些，所以它会覆盖掉第1个设置。十五、字体变形命令text-transform命令很有用，它有3个值：text-transform:uppercase,text-transform:lowercase和text-transform:capitalize。第1个会把文字变成全大写，第2个变成全小写，第3个变成首字母大写。这对拼音文字非常有用，即使输入时有大小写错误，在网页上也看不到。十六、IE中图片文字消失的问题有时会遇到文字或背景图突然消失的问题，刷新一下又出现了，这在靠近漂浮元素时更容易发生（注：没见过）。此时，可以为消失的元素设定：position:relative，如果不行，再考虑为这些元素指定一个宽度试试。十七、不可见文字不论因为何种原因希望某些网页文字不在浏览器中显示，比如为了打印或为了小屏幕而让某些文字不显示，都可以用display:none。这非常简单，但有时对某些人这有点没用，他们能去掉这个控制，这时就要用到：position:absolute;left:-9000px。这实际上是把文字指定在页面以外显示。十八、为手持设备设计专门的CSS也就是手机/PDA等小屏幕用户，可以专门设计一个CSS来让网页显示更舒服些。为此，可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是：也可以阅读专门的手持设备可用性。十九、3D效果的按钮以前要想制作带有3D效果，并且点击下去还会变化的按钮，就得用图片替换的方法，现在CSS就可以了：adisplay:block;border:1pxsolid;border-color:#aaa#000#000#aaa;width:8em;background:#fc0;a:hoverposition:relative;top:1px;left:1px;border-color:#000#aaa#aaa#000;至于效果，还可以自己调整了。二十、在不同页面上使用同样的导航代码许多网页上都有导航菜单，当进入某页时，菜单上相应这一项就应该变灰，而其他页亮起来。一般要实现这个效果，需要写程序或专门为每一页做设计，现在靠CSS就可以实现这个效果。首先，在导航代码中使用CSS类：HomeAboutusContactus然后分别为每一页的Body指定一个id，和上面类同名。如。然后设计CSS如下：#home.home,#about.about,#about.aboutcommandsforhighlightednavigationgohere这里，当id设为home时，.home就会起作用，也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。 Article Provenance: InternetArticle Tags: CSS经典技巧CSS经典技巧 CSS技巧CSS技巧 评论: 4 | 查看次数: 3234 1zz0434 2008-11-10 05:38 PM第二十条.我觉得有点不是很实用.如果是动态程序呢.他只调用一个index.php?id=*像这样你第二十条就加不上了.永远只是.home.spark269 2008-10-30 09:54 AM然后为div指定一个类：然后CSS这样设计：#containermin-width:600px;width:expression(document.body.clientWidth600?600px:auto);好像应该是吧。hoho.笔误笔误啊收藏CSS经典技巧之三Author:52css Data:2008-10-29字体大小: 小 中 大 RSS订阅 | 上一篇 | 下一篇在前几天52CSS.com的文章中，我们向大家介绍了一些CSS经典技巧，其实这些东西对大家的学习是非常有用的，如果你知道这些技巧，就当是复习，如果对此技巧还不怎么了解，可以动手编码做一些测试和试验，相信你一定会有收获的。CSS技巧其实有很多，有的是创造性的，而有些只为培养一个高效率的习惯。而无论怎么说，这都是有益的东西。对于CSS布局的学习，只有勤动手，才能进步的更快。收藏CSS经典技巧之一/article.asp?id=884收藏CSS经典技巧之二/article.asp?id=885今天向大家介绍另外五条非常重要的技巧，可能有重复，大家多多理解这些知识一定有收益。一、图像替换文本Example Source Code #headerh1adisplay:block;text-indent:-9999em;background:(images/logo.png)no-repeat00;height:87px;width:250px;overflow:hidden;看得懂这个吗？我看到很多们都LOGO都只是用图片代替，而没有链接。其他，只需要更简单的方法，利用图像替换文本的方法，显示LOGO，并拥有链接。各个值的功能display:block;a的默认状态是inline的，需要让它变成块状的，才可能定义高度和宽度，以适应LOGO的宽高。另外的一个功能是，让链接在text-indent后，在原区域可点击。text-indent:-9999em;-难道你想删除logo中的文字?这样应该是你的最后选择。因为这不符合语议标记，所以，也对搜索引擎不友好。而这个值就是让你的字体缩进到看不到的地方。让你不用删除文字。其他的不用讲了吧二、display:inline-block;在写sofisheddaily的CSS时，在顶站定日期的空间，就用了display:inline-block;顾名思义，就是在内联情况也的块状，可以设定高度宽度。在GR看到一篇share讲了说到了跨浏览器显示这个显示display:inline-block的方法：Example Source Code .element-classdisplay:-moz-inline-stack;/Firefoxonlycodedisplay:inline-block;/somestandardbrowserszoom:1;/IEonly*display:inline;/OnlyIEknowthiscode(CSSHack)好处是什么？好处就是不用使用float，在一行中显示设定宽高的元素。不过，上面提到的跨浏览器，貌似我在IE下依然可以显示，难道是IEtester的问题？三、用line-height文字垂直居中你可能知道用text-align来让文字水平剧中，不过，却找不到更直接的方法来让元素垂直居。这里，或许你可以利用一下line-height。比如你要在导航中让文字简直居中于导航，可能会想到用padding和margin，不过，这时，烦人的IE可能会给你制造出麻烦，所以，用line-height吧，这是一个更简单的方法：上面