我总结的 css样式表的使用技巧【一】

Posted on 2009-06-02 14:53  bet520的博客  阅读(718)  评论(0)    收藏  举报
这篇文章总结了我在使用CSS布局方法以来所有的技巧和兼容方案,我会重点解释一些新手容易犯的错误,我希望吧这些小技巧,或者说是一些应该注意的地方和大家分享。如果你已经是CSS高手,这些经验技巧可能已经都知道,如果你有更多的,希望可以帮我补充

 

 .使用css缩写

 

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。

 

css缩写的主要规则如下:

 

 颜色

 

 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:

 

#000000可以缩写为#000;#336699可以缩写为#369;

 

 盒尺寸

 

通常有下面四种书写方法:

 

 property:value1; 表示所有边都是一个值value1

 

property:value1 value2; 表示topbottom的值是value1,rightleft的值是value2

 

property:value1 value2 value3; 表示top的值是value1rightleft的值是value2bottom的值是value3

 

property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

 

方便的记忆方法是顺时针,上右下左。具体应用在marginpadding的例子如下:

 

margin:1em 0 2em 0.5em;

 

 

 

边框(border)

 

边框的属性如下:

 

 

 

border-width:1px;

 

border-style:solid;

 

border-color:#000;

 

可以缩写为一句:border:1px solid #000;

 

语法是border:width style color;

 

背景(Backgrounds)

 

背景的属性如下:

 

background-color:#f00;

 

background-image:url(background.gif);

 

background-repeat:no-repeat;

 

background-attachment:fixed;

 

background-position:0 0;

 

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;

 

语法是background:color image repeat attachment position;

 

你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

 

color: transparent

 

image: none

 

repeat: repeat

 

attachment: scroll

 

position: 0% 0%

 

字体(fonts)

 

字体的属性如下:

 

font-style:italic;

 

font-variant:small-caps;

 

font-weight:bold;

 

font-size:1em;

 

line-height:140%;

 

font-family:"Lucida Grande",sans-serif;

 

可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

 

注意,如果你缩写字体定义,至少要定义font-sizefont-family两个值。

 

列表(lists)

 

取消默认的圆点和序号可以这样写list-style:none;,

 

list的属性如下:

 

list-style-type:square;

 

list-style-position:inside;

 

list-style-image:url(image.gif);

 

可以缩写为一句:list-style:square inside url(image.gif);

 

.明确定义单位,除非值为0

 

HTML中你可以只写width="100",但是在CSS中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,不要在数值和单位之间加空格。

 

.区分大小写

 

当在XHTML中使用CSSCSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。

 

classid的值在HTMLXHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。

 

.取消classid前的元素限定

 

当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas s可以在页面中多次使用。你限定某个元素毫无意义。例如:

 

div#content { /* declarations */ }

 

fieldset.details { /* declarations */ }

 

可以写成

 

#content { /* declarations */ }

 

.details { /* declarations */ }

 

这样可以节省一些字节。

 

 

 第一讲到此结束,谢谢大家!