《
CSS的常用技巧介绍》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334332013.htm
--> [
网站建设之]CSS的常用技能先容
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。
还有background，border等等.
1. 关于background的写法
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1）你可以看到background的第一个定义是一个颜色值这表现在背景图片生效的时候颜色将起作用。
2）url括号中的引号是不必要的，我们可以不写引号
2. 关于Border的写法，如果您想定义div的四个边的颜色不同，而粗度和款式都一样,CSS的小技巧，您可以这样写：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四种颜色一次是上，右，下，左的颜色
颜色雷同就合并成：
DIV.special{border:1px solid color4}
2. 同时使用两个Class定义
正常我们只会给内容块指定一个Class，但这并不代表我们只能指定一个。实际上只要你乐意，可以同时把任意多个Class赋给某块内容。比如：
<p class="text side">...</p>
,css的好习惯; 多个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文档
,CSS的”弹出式“图像浏览器; 良多web页面都会供给一个打印链接，便利用户应用另一种合适打印界面的CSS。但实际上你完整能够为你的页面指定两个CSS文档link，这样阅读器会主动调用适合的CSS来用于显示或打印。比方：
<link type="text/css" rel="stylesheet" href="stylesheet,CSS特殊性概念知识普及.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
,CSS特殊性概念 样式规则的次序; 通过指定link的media属性，浏览器就能根据需要来调用特定的CSS文件来处置页面了。对于打印更多的倡议，请参见 Print Different,
5. CSS中的内容垂直对齐
用传统的table来实现垂直对齐很轻易，只有用 vertical-align: middle 就可以让table的内容垂直居中。但这个属性在CSS里面却行不通。
解决方法是把内容的行高设置成与内容块一样高。比如你的div高是32px，那就在你的CSS定义里面增加属性 line-height: 32px; 这样文字看上去就垂直居中于层里面了。不过这个办法只实用于单行文字，对于多行文字，好像没有什么好方式。
6. 让背景色可以垂直拉齐到底部
CSS与传统的table来说另一个让人不爽的处所是它的垂直层的对齐。如果你的页面分为两列,CSS滤镜效果之雷达屏幕，其中一列比较长而另一列比拟短，同时两列的背景色和页面总的背景色是不同的话，显示出来的后果就比较丑恶，不像table那样只要把td的高度设成100%就能够把每一列的高度拉到一样长。
要解决这个问题仿佛只能用一个取巧的措施，依据每列的宽度跟背风景设置背景图片，让用户看上去好像拉平了：
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
7. block / inline 属性
任何一个HTML元素都是block或者inline的。
block元素的特征包含：
老是另起一行开端显示
height,CSS滤镜效果之英雄救美, line-height, top/bottom margin属性可以被设置
width缺省值是100%,除非你指定了另外的width值
这一类的HTML元素包括<div>, <p>,CSS滤镜效果之发光的文字;, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括：
直接跟在当前行的后面显示
height, line-height, top/bottom margin属性不能改变
width值就即是包括其中的文字/图片的宽度，并且这个值不能被改变
这一类的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通过设置元素属性display: inline 或 display: block来转变元素的以上特性。
8. 设置页面的最小宽度
CSS语法中很有用的一个属性是 min-width 。通过这个属性你可以设置任何元素的最小宽度。也就是说你也可以用这个来限度页面显示的最小宽度。
但有个小问题是：IE浏览器无奈为<body>元素设置min-width，因而要让这个属性起作用，咱们需要走点弯路。
首先在<body>后面插入一个<div>：
<body>
<div class="container">
而后在CSS定义里面定义最小宽度为600px：
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px",CSS清除浮动的应用 位置影响IE和Chrom浏览器的错位;: "auto" );
}
第一个属性是最小宽度定义的尺度写法；第二个属性则是只有IE可能懂得的javascript表白式。
你也可以同时设定页面的最大最小宽度：
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
9. Text-transform 属性
这个属性可能也是CSS当顶用的人未几但却很有用途的属性之一。其常见的可用值包括：text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一个将把所有的字母转化成大写；第二个将把所有字母转成小写；第三个则把每个单词的首字母转成大写。不过对非英文网站来说，这个功效确切就没什么用了。
10. IE中消逝的文字和图片
IE有个很莫名其妙的Bug：有时候文字或者背景图片逝世活显示不出来。假如你全选全部页面,CSS清除浮动的三个方法，会发明那些内容实际上还在那里，或者从新刷新一下页面显示就畸形了。
通常来说这个问题都产生在那些跟在浮动元素后面显示的文字或背景图片身上。要解决这个问题，可以尝尝给你的那些消散的元素加上position: relative 属性。如果还不行，再试试设置一下width属性。个别来说这样做之后问题就解决了。
11. 色彩的缩写
我们可以将#ff0033缩写成#f03
17. 封闭输入法状态
使用户只能输入英文状况下的字符，相似输入密码
input {ime-mode: disabled ; }
Tag：CSS 技巧 CSS 技巧
(责任编辑：网站建设)
CSS的常用技巧介绍相关文章