几个有用的Css技巧

39次阅读

1. 关于 background 的写法

DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}

1）您可以看到 background 的第一个定义是一个颜色值这表示在背景图片失效的时候颜色将起作用。

2）url 括号中的引号是没有必要的，我们可以不写引号

2. 关于 Border 的写法，如果您想定义 div 的四个边的颜色不同，而粗度和样式都一样，您可以这样写：

DIV.special{border:1px solid; border-color:color1 color2 color3 color4}

四种颜色一次是上，右，下，左的颜色

3. 为了兼容所有的浏览器都可以显示半透明效果的写法

.tranparent{

   filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);

   -moz-opacity:0.5;

   -kHTML-opacity:0.5;

   opacity: 50%;

   position:absolute;/* 注意必须是 absolute 的 */

   top:100px;

   left:100px;

}

4. _height,_width 的作用

使用_height 解决 float 的 div 不闭合的问题，您可以将_height 属性去掉就可以开到效果了。

#wrap{border:6px #ccc solid; overflow:auto; _height:1%;}

.column_left{float:left; width:20%; padding:10px;}

.column_right{float:right; width:75%; padding:10px; border-left:6px #eee solid;}

<div id="wrap">

<div class="column_left">

  <h1>Float left</h1>

</div>

<div class="column_right">

  <h1>Float right</h1>

</div>

</div>

5. 使用 min-height min-width 解决 div，或者 span 的固定高度问题

有时候我们需要设定某个元素固定高度，但是在 firefox 或者 opera 下面只设置高度，在内容不够多的时候，达不到预想的效果，这时候我们可以使用 min-height

6. 使用!important 改变样式的优先级

所谓的样式优先级是指，浏览器在应用样式时总是根据就近原则来应用样式，假定我们在一个页面中有三处都有对某个元素的定义，一处是在外部的 CSS 文件中，一处是在文件的 head 标签中定义内联 css，另一处是在这个元素的标签内，那么根据就近原则此元素最终使用的样式是在标签内定义的样式，如果我们需要打破这种规则我们就可以使用!important 指令

a.test{color:red!important}

这样即使在 A 元素内定义了 color 也不会应用，而是应用上面的定义

7. 使用 media 指令引入两种 CSS：打印版本的 css 和屏幕显示的 css

<link type="text/CSS" rel="stylesheet" href="url " media="screen" charset="utf-8" />

<link type="text/CSS" rel="stylesheet" href="url" media="print" charset="utf-8" />

8. > 符号（目前 ie 不支持）

我们可以使用 DIV A 的方式来定义所有在 div 里面的所有 A 标签的样式，包括 div 下面的 span 中的 div；如果我们只想定义 DIV 下面一级子节点的 A 标签我们可以使用 “>” 符号，例如：

DIV>A{color:red}

现在只有是 DIV 的直接子节点 A 标签的颜色是红色

9．:first-child :last-child 在非 ie 的浏览器下面可以通过这两个指示符，取到父元素的第一个元素或者最后一个元素

13. CSS 的 class 可以有多个值，我们只需要将多个值用空格隔开就可以了

14. 颜色的缩写我们可以将 #ff0033 缩写成#f03