你可能不知道的CSS语法技巧.docx

1. 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这几个属性如果不做设定的话将默认为normal。2. 同时使用两个Class定义一般我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只要你愿意，可以同时把任意多个Class赋给某块内容。比如：.多个Class之间用空格分隔即可。当多个Class之间的属性发生重叠的时候，将根据各个Class在CSS定义文件中被定义的位置，后定义的Class属性自动覆盖之前定义的Class属性（而不是根据你在class=text side这里排列的顺序来进行覆盖）3. CSS border的缺省值通常我们定义border属性都会提供color,width,style这些属性。比如border: 3px solid #000。不过实际上必须要提供的属性只有style。如果你只写border: solid的话，其他的属性自动使用缺省值。border的缺省宽度是medium(大约3px-4px)，缺省的颜色是位于border里面的内容文字的颜色。如果这些缺省值可以满足你的要求，你完全可以省略这两项属性。4. 专门用于打印的CSS文档很多web页面都会提供一个打印链接，方便用户使用另一种适合打印界面的CSS。但实际上你完全可以为你的页面指定两个CSS文档link，这样浏览器会自动调用合适的CSS来用于显示或打印。比如：通过指定link的media属性，浏览器就能根据需要来调用特定的CSS文件来处理页面了。关于打印更多的建议，请参见Print Different,5. CSS中的内容垂直对齐用传统的table来实现垂直对齐很容易，只要用vertical-align: middle就可以让table的内容垂直居中。但这个属性在CSS里面却行不通。解决方法是把内容的行高设置成与内容块一样高。比如你的div高是32px，那就在你的CSS定义里面添加属性line-height: 32px;这样文字看上去就垂直居中于层里面了。不过这个方法只适用于单行文字，对于多行文字，似乎没有什么好方法。6. 让背景色能够垂直拉齐到底部CSS与传统的table来说另一个让人不爽的地方是它的垂直层的对齐。如果你的页面分为两列，其中一列比较长而另一列比较短，同时两列的背景色和页面总的背景色是不同的话，显示出来的效果就比较丑陋，不像table那样只要把td的高度设成100%就能够把每一列的高度拉到一样长。要解决这个问题似乎只能用一个取巧的办法，根据每列的宽度和背景色设置背景图片，让用户看上去似乎拉平了：bodybackground: url(blue-image.gif) 0 0 repeat-y7. block / inline 属性任何一个HTML元素都是block或者inline的。block元素的特性包括： 总是另起一行开始显示 height, line-height, top/bottom margin属性可以被设置 width缺省值是100%,除非你指定了另外的width值这一类的HTML元素包括, , , , 以及等。inline元素的特性包括： 直接跟在当前行的后面显示 height, line-height, top/bottom margin属性不能改变 width值就等于包含其中的文字/图片的宽度，并且这个值不能被改变这一类的HTML元素包括, , , , , 以及等。你可以通过设置元素属性display: inline或display: block来改变元素的以上特性。8. 设置页面的最小宽度CSS语法中很有用的一个属性是min-width。通过这个属性你可以设置任何元素的最小宽度。也就是说你也可以用这个来限制页面显示的最小宽度。但有个小问题是：IE浏览器无法为元素设置min-width，因此要让这个属性起作用，我们需要走点弯路。首先在后面插入一个：然后在CSS定义里面定义最小宽度为600px：#containermin-width: 600px;width:expression(document.body.clientWidth 600? 600px: auto );第一个属性是最小宽度定义的标准写法；第二个属性则是只有IE能够理解的javascript表达式。你也可以同时设定页面的最大最小宽度：#containermin-width: 600px;max-width: 1200px;width:expression(document.body.clientWidth 1200? 1200px : auto);9. Text-transform 属性这个属性可能也是CSS当中用的人不多但却很有用处的属性之一。其常见的可用值包括：text-transform: uppercase, text-transform: lowercase以及text-transform: capitalize。第一个将把所有的字母转化成大写；第二个将把所有字母转成小写；第三个则把每个单词的首字母转成大写。不过对于非英文网站来说，这个功能确实就没什么用了。10. IE中消失的文字和图片IE有个很莫名其妙的Bug：有时候文字或者背景图片死活显示不出来。如果你全选整个页面，会发现那些内容实际上还在那里，或者重