针对鸡西中小企业的网站建设,网页制作,网站优化(seo/sem),网站改版等业务定制最佳解决方案的工作室.QQ:331148(7*24H免费咨询)
本页定位

CSS你必须要懂得的经验

臭保安👮1.53kA+A-
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.哪怕简单的把marginpadding的值去掉,都归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;

盒尺寸

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

  1. property:value1; 表示所有边都是一个值value1;
  2. property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  3. property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  4. property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left

方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下:
margin:1em 0 2em 0.5em;

边框(border)

边框的属性如下:

  1. border-width:1px;
  2. border-style:solid;
  3. border-color:#000;

可以缩写为一句:border:1px solid #000;
语法是border:width style color;

背景(Backgrounds)

背景的属性如下:

  1. background-color:#f00;
  2. background-image:url(background.gif);
  3. background-repeat:no-repeat;
  4. background-attachment:fixed;
  5. background-position:0 0;

可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:

  1. color: transparent
  2. image: none
  3. repeat: repeat
  4. attachment: scroll
  5. position: 0% 0%

字体(fonts)

字体的属性如下:

  1. font-style:italic;
  2. font-variant:small-caps;
  3. font-weight:bold;
  4. font-size:1em;
  5. line-height:140%;
  6. 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的属性如下:

  1. list-style-type:square;
  2. list-style-position:inside;
  3. list-style-image:url(image.gif);

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

全部评论: 1
  • letian 赞(0)

    我先来这里逛,评论字数要十个

登录没有账号 切换注册

邮箱或名字

忘记密码 ?

用第三方帐号直接登录
注册已有账号 切换登录

请真实填写

注意:邮箱涉及账号安全,也是您在完善资料之前唯一的登陆凭证,请务必填写真实的常用邮箱