CSS你必须要懂得的经验
学习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);
letian 赞(0)
我先来这里逛,评论字数要十个