webrebuild.org第四届年会——金秋四城联动

邀您参加“裸奔”

在你对CSS华丽的效果着迷时,别忘了在华丽外表下面,最原始的文字。

邀您参与每年4月9号的“CSS裸奔节”,详情请登陆webrebuild.org

[原]CSS书写顺序

Ghost 发表于 [2007-05-15 14:09]

整理了一下自己写CSS时的顺序,跟大家分享下。

下表顺序为从上到下,从左到右:
========================
display || visibility
list-style : list-style-type || list-style-position || list-style-image
position
top || right || bottom || left
z-index
clear
float

width
max-width || min-width
height
max-height || min-height
overflow || clip
margin : margin-top || margin-right || margin-bottom || margin-left
padding : padding-top || padding-right || padding-bottom || padding-left
outline : outline-color || outline-style || outline-width
border
background : background-color || background-image || background-repeat || background-attachment || background-position

color
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font : caption | icon | menu | message-box | small-caption | status-bar
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
========================

文章地址:http://www.cssforest.org/blog/index.php?id=38

[原]CSS书写顺序》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.

文章被分类到:CSS


评论也精彩

  1. 邵其 在 997 日 之前 说:

    呵呵 小第不才 outline是设置什么的啊?经常看你写的东西!交流下吧!

  2. Ghost 在 996 日 之前 说:

    设置或检索对象外的线条轮廓。外轮廓(outline)画在边框(border)外面,并且不一定是矩形。
    呵呵,一时多手写上去的,现在好像还没浏览器支持。

  3. 土人 在 956 日 之前 说:

    这些缩写的顺序不按鬼哥的顺序都不行了呵呵。

  4. Ghost 在 956 日 之前 说:

    上面还说outline没浏览器支持,其实IE是可以用来去掉链接虚框的:a{outline:none;}

  5. 风往南吹 在 567 日 之前 说:

    @ghost a{outline:none;}IE7及其以下版本并不支持 FF2.0以上支持

  6. goochin 在 267 日 之前 说:

    应该跟个人习惯有关系的…而习惯往往受知识来源和工作环境影响

  7. hong 在 212 日 之前 说:

    我的写法:

    从本质到表象,顺时针,从外到内,从上到下
    /* 1、本质:清理外部clear,显不显示display,是否可见visibility,什么状态overflow,什么位置position,在哪float…. */
    clear: value; display: value; visibility: value; overflow: value; position: value; float: value; list-style: value; ….
    /* 2、自身:多宽width,多高height,行高line-height,对外margin,对内padding…. */
    width: value; height: value; line-height: value; margin: value; padding: value; ….
    /* 3、修饰:字体font,颜色color,文本text,边框border,背景background…. */ font: value; color: value; text: value; border: value; background: value; ….

  8. hong 在 193 日 之前 说:

    Mozilla的和我的思路一样,有个科学的好习惯是很好的,不单纯是技术的问题,是做事的态度。

欢迎发表评论
  1. 请不要发表跟文章无关的评论,内容或站点如指向非个人博客地址的以发广告对待!
  2. 为抵制垃圾评论,留言需要先预览再点击提交。
  3. 评论支持textile语法,查看 textile帮助
  4. 还可以使用QQWeb输入法