不可不知的CSS小技巧

从个人博客上线那一刻起,或许我已经真正意义上的成为了一名IT“程序猿”了。才知道在互联网上学的东西还很多,只有每天不断的充实自己,才感觉不会被互联网淘汰。不知不觉中学习网页制作已经快半年了,下面是自己整理和总结的一些<strong>CSS的小技巧</strong>分享给大家<strong>:</strong>


<strong>一、表单部分</strong>


1.禁止textarea文本域的缩放


resize:none;


2.去除初始化textarea下拉条


overflow:auto;


3.如何让表单中的选项按钮,点击文字也能选中?


&lt;lable&gt;&lt;input type="radio" name="sex" value="女" checked="checked"/&gt;女&lt;/lable&gt;


4.如何让文本垂直对齐文本输入框


input{vertical-align:middle;}


5.如何做1像素细边框的table?


#test{border-collapse:collapse;border:1px solid #ddd;}


#test th,#test td{border:1px solid #ddd;}


&lt;table id="test"&gt;


&lt;tr&gt;&lt;th&gt;姓名&lt;/th&gt;&lt;td&gt;少年&lt;/td&gt;&lt;/tr&gt;


&lt;tr&gt;&lt;th&gt;年龄&lt;/th&gt;&lt;td&gt;20&lt;/td&gt;&lt;/tr&gt;


&lt;/table&gt;


<strong>二、其它部分</strong>


1.如何让单行文本在容器内垂直居中?


#test{height:25px;line-height:25px;}


2.如何让块级元素居中显示?


#test{width:900px;height:200px;margin:0 auto;}


3.如何清除图片下方出现几像素的空白间隙?


方法1:img{display:block;}  方法2: img{vertical-align:top;}


4.常见的链接样式


a:link - 普通的、未被访问的链接


a:visited - 用户已访问的链接


a:hover - 鼠标指针位于链接的上方


a:active - 链接被点击的时刻


当为链接的不同状态设置样式时,请按照以下次序规则:a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后


5.将一个容器设为透明


#test{


filter:alpha(opacity=50);


-moz-opacity:0.5;


-khtml-opacity: 0.5;


opacity: 0.5;


}


在这四行CSS语句中,第一行是IE专用的,第二行用于Firefox,第三行用于webkit核心的浏览器,第四行用于Opera。


6.CSS3阴影


外阴影:


.shadow {


-moz-box-shadow: 5px 5px 5px #ccc;


-webkit-box-shadow: 5px 5px 5px #ccc;


box-shadow: 5px 5px 5px #ccc;


}


内阴影:


.shadow {


-moz-box-shadow:inset 0 0 10px #000000;


-webkit-box-shadow:inset 0 0 10px #000000;


box-shadow:inset 0 0 10px #000000;


}


总结:实战才是检验理论的唯一标准。不去做,永远是不明白这其中的实现原理。