不可不知的CSS小技巧

一、表单部分

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">1.</span>禁止textarea文本域的缩放

 resize:none;

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">2.</span>去除初始化textarea下拉条

overflow:auto;

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">3.</span>如何让表单中的选项按钮，点击文字也能选中？

<lable><input type="radio" name="sex" value="女" checked="checked"/>女</lable>

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">4</span>.如何让文本垂直对齐文本输入框

input{vertical-align:middle;}

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">5.</span>如何做1像素细边框的table？

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

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

<table id="test">

<tr><th>姓名</th><td>少年</td></tr>

<tr><th>年龄</th><td>20</td></tr>

</table>

二、其它部分

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">1.</span>如何让单行文本在容器内垂直居中？

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

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">2.</span>如何让块级元素居中显示？

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

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">3.</span>如何清除图片下方出现几像素的空白间隙？

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

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">4.</span>常见的链接样式

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

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

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

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

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

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">5.</span>将一个容器设为透明

#test{

　　　　filter:alpha(opacity=50);

　　　　-moz-opacity:0.5;

　　　　-khtml-opacity: 0.5;

　　　　opacity: 0.5;

　　}

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

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">6.</span>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;

　　}

<span style="margin: 0px; padding: 0px; color: rgb(255, 0, 0);">总结：</span>实战才是检验理论的唯一标准。不去做，永远是不明白这其中的实现原理。

您可能感兴趣的文章：
photoshop文字排版技巧心得教程
网页制作——CSS的常用技巧放送
高手进阶性教程 CSS的常规使用技巧
你不知道的CSS使用技巧
CameraRaw五个优化技巧分享一览
你未必知道的10个CSS技巧
Illustrator吸管工具使用技巧分享
photoshop基础常用对齐技巧心得分享一览
网站重构 CSS样式表的优化与技巧
CSS的优化与技巧