CSS不得不知的技巧小结

梦飞扬从日常网站制作中总结的经验,如果能很好的运用这些css技巧,让css充分发挥效率,对于网页设计来说又进了一大步。下面是总结的一些css使用技巧以及一些兼容方案和缩写方法,希望高手能得以补充。

1、使用css缩写

要习惯使用css缩写,这样不仅减少css文件的大小,还有利于阅读以及维护,让服务器加载起来也快速。

2、一定要定义单位,除非是0

忘记定义单位是CSS新手普遍发生的错误。在用table的过程中你可以只写width=”100″,但是在CSS中,你必须给一 个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以 外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。

3、要注意区分大小写

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

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

4、一定要使用Reset

不同浏览器默认值不同,因此一定要使用reset,统一下,你可以使用Eric Meyer Reset、YUI Reset 等,或者你自己定制的reset.哪怕简单的把margin和padding的值去掉,都归0.最好不要使用一下这种方式。
* {margin:0;padding:0;}

5、不需要重复定义可继承的值

CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直 接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。

6、按字母顺序

很多人都有自己的组织方式,我是按照字母顺序组织的,或许你可以尝试一下。

7、用正确的顺序指定连接的样式

当你用CSS来定义链接的多个状态样式时,要注意它们书写的顺序,正确的顺序是::link :visited :hover :active。抽取第一个字母是”LVHA”,你可以记忆成”LoVe HAte”(喜欢讨厌)。为什么这么定义,可以参考Eric Meyer的《Link Specificity》。

如果你的用户需要用键盘来控制,需要知道当前链接的焦点,你还可以定义:focus属性。:focus属性的效 果也取决与你书写的位置,如果你希望聚焦元素显示:hover效果,你就把:focus写在:hover前面;如果你希望 聚焦效果替代:hover效果,你就把:focus放在:hover后面。

常用css缩写语法总结

使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

颜色

16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸

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

property:value1; 表示所有边都是一个值value1;
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
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-size和font-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);
展开评论