书写css的规范! 好文!值!.docx

css书写顺序,书写规范,命名规范写了这么长时间的css样式的自我反省:为什么我写的样式复用性这么差为什么我写的代码改动起来连自己都不想看他一眼总结起来就是:人懒还不动脑!人懒又不动脑总是不好的，我们不能全占了吧,所以为了change 自我, 我决定开启学霸模式，重新认识css! -贺文榜第一块 ：css的书写顺序: 1位置属性：position, top right z-index ,display,float 2,大小 ：width height,padding,margin 3,文字系列：font,line-height,letter-spacing,color,text-align 4,背景： background,border 5,其他: animation,transition .standard position:absolute; top:2px; right:4px; z-index:2; display:inline-block; float:left; width:750px; height:200px; padding:15px; margin:15px; font:italic small-caps bold 12px/1.5em arial,verdana; letter-spacing:2px; /字间距 color: #f4f5f9; text-align:center; background:#ccc url(./images/1.jpg) no-repeat srcoll 75px 0; /右移动75x border:1px solid #ccc; animation:hwb 5s ease-in 1s 3; transition:all 5s ease-in .5s; 小插曲:font 和background合并写法font:italic small-caps bold 12px/1.5em arial,verdana;等效于：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;line-height:1.5em;font-family:arial,verdana;顺序：font-style | font-variant | font-weight | font-size | line-height | font-family 背景图片： /content/?id=4987 /详细介绍了background属性 background-color属性：设置背景颜色。 background-image属性：设置背景图片。 background-repeat属性：是否重复背景图片。 background-attachment属性：设置背景图片是否随页面滚动。 background-position属性：指定背景图片的位置。 第二块:接下来说书写css书写规范： 1.使用css缩写属性 margin:1px auto 2px; 2.简写命名 .nav 3.16进制颜色代码缩写 color:#fff; 4.连字符css选择器命名规范 is-close 优点我知道的:1:输入的时候少按一个shift键；2:能良好区分JavaScript变量命名（JS变量命名是用“_”） 5.不要随意使用id（ID优先级高于class优先级）第三块:常用的css命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签：tags文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service注册：regsiter状态：status投票：vote合作伙伴：partner注释的写法:/* Header */内容区/* End Header */Id的命名:1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：register搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标籤页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright注意事项:1.一律小写;2.尽量用英文;3.不加中槓和下划线;4.尽量不缩写，除非一看就明白的单词。CSS样式表文件命名