CSS使用技巧

这几天总结了一些CSS使用过程的技巧,列举一些留作纪念。其中包括图片的居中显示,不同类别的选择器定义问题以及多class的综合定义。这些在设计过程中经常会遇见而且比较难解决的情况。其中比较多问到的是图片的居中,其他问题比较少见,不过却非常实用。

图片居中:

CSS代码:
div{
 height:300px;
 width:400px;
 border:1px solid #666;
 text-align:center;
 vertical-align:middle;
 display:table-cell;
 font-size:300px;}

img{vertical-align:middle;}

Html代码:
<div><img src="pic.gif" /></div>

说明:通过display的table-cell属性和font-size的控制来控制图片居中,代码还需要优化,图片的现实效果并没有达到完美的角度,不同的浏览器之间还是存在区别待遇。

还有一个就是选择控制:

CSS代码:
.d1.d2{background-color:#999;}

Html代码:
<div class="d1 d2">灰色背景</div>

中间没有逗号分开的情况下代表,需要两个属性同时存在的时候显示效果。

选择器控制:

CSS代码:
*[title]{font-weight:bold;}
input[type="button"]{background-color:#FF0000;}
input[type="submit"]{background-color:#0000FF;}

Html代码:
我的<span title="标记">标题加粗</span>部分
<input type="button" value="button" />
<input type="submit" value="submit" />

以上代码解决了不同的type以及具体定义的样式,显示的效果是:所有存在title标注的内容都显示加粗效果。input的类型是button的背景显示红色;input的类型是submit的背景显示蓝色。这个方法可以扩展应用到非常多的地方,设计人员可以根据自己的需求自由控制。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注