CSS使用小技巧

阿凡达 · *发表于* 2013-7-16 18:01:29

　　1.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: bold italic small-caps 1em/1.5em verdana,sans-serif;
　　只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。
　　2. 同时使用两个类
　　一般只能给一个元素设定一个类(Class)，但这并不意味着不能用两个。事实上，你可以这样：
　　
…

　　同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
　　补充：对于一个ID，不能这样写
…
也不能这样写

　　3. CSS border的缺省值
　　通常可以设定边界的颜色，宽度和风格，如：
　　border: 3px solid #000
　　这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。
　　如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素;缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。
　　4. CSS用于文档打印
　　许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
　　也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
　　
　　
　　第1行就是显示，第2行是打印，注意其中的media属性。
　　但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。
　　5. 图片替换技巧
　　一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。
　　比如你想整个卖东西的图标，你就用了这个图片：
　　

　　这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
　　
Buy widgets

　　但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：
　　h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
　　注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
　　6. CSS box模型的另一种调整技巧
　　这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：
　　#box { width: 100px; border: 5px; padding: 20px }
　　这样调用它：
　　
…

　　这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。
　　但用CSS也可以达到同样的目的，让它们显示效果一致。
　　#box { width: 150px } #box div { border: 5px; padding: 20px }
　　这样调用：
　　
…

　　这样，不管什么浏览器，宽度都是150点了。
　　7. 块元素居中对齐
　　如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
　　#content { width: 700px; margin: 0 auto }
　　你会使用
来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

　　body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
　　这会把网页内容都居中，所以在Content中又加入了:text-align: left 。
　　8. 用CSS来处理垂直对齐
　　垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
　　CSS方法是什么呢?对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。
　　9. CSS在容器内定位
　　CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
　　#container { position: relative }
　　这样容器内所有的元素都会相对定位，可以这样用：
　　
…

　　如果想定位到距左30点，距上5点，可以这样：
　　#navigation { position: absolute; left: 30px; top: 5px }
　　当然，你还可以这样：
　　margin: 5px 0 0 30px
　　注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。
　　10. 直通到屏幕底部的背景色
　　在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：
　　#navigation { background: blue; width: 150px }
　　较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢?
　　不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
　　body { background: url(blue-image.gif) 0 0 repeat-y }
　　此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

pangio · *发表于* 2014-10-23 08:03:08

宝贝..你来了...

ffuip · *发表于* 2014-10-23 08:22:44

晕在我帖里面找偶像啊??

apgckwmm · *发表于* 2014-10-23 08:34:57

晕倒`````不要造我的谣言哦~~小心我打你pp~~嘿嘿~~~~

inhidgehila · *发表于* 2014-10-23 08:58:23

因删贴不及时所产生的任何法律（书法，基本法，劳动法，婚姻法，输入法，国际法，今日说法，与台湾关系法及文中涉及或可能涉及以及未及之法，各地治安管理条例）纠纷或责任本人概不负责。

*发表于* 2015-6-2 14:54:51

苍天之下，厚土之上，竟有如此奇人异士、文人墨客！讥讽于谈笑间，笑骂于无形中，层次之高，境界之深，非我等所能匹及，偶像啊！

*发表于* 2015-6-2 15:01:04

命不能争，运可以造，弱者认命，强者抗命，能者求命，智者造命。

*发表于* 2015-6-2 15:02:47

我帮不了你

*发表于* 2015-6-2 15:21:01

我的我的忘记了呵呵

*发表于* 2015-6-2 15:21:36

综上所述，恳请各位官员请勿动用武装力量请勿跨村、跨镇、跨市、跨省、跨国、跨洲、跨星球、跨银河系追捕。确因不抓不足以平民愤，或不抓就领不到薪水养家户口的公职人员，建议携带工作证

wwdu926a · *发表于* 2017-4-11 10:55:50

你这样的表现，就只配这几个字：窝囊废

wwzcdenleclv · *发表于* 2017-4-11 10:58:13

系统居然怀疑我灌水，我身边又没有水龙头。哦…明白了，身上有一个……

gevaemaidovef · *发表于* 2017-4-11 10:59:13

这个得知互动技术交流论坛很不错

alapScady · *发表于* 2017-4-11 11:01:18

我在顶贴~！~

Acropozelan · *发表于* 2017-4-11 11:01:36

呵呵放心如我算错你以后来砸我的帖子呵呵

CSS使用小技巧

回复|共 14 个

回复

浏览过的版块

快捷导航