广告合作
  • 今日头条

    今日头条

  • 百度一下

    百度一下,你就知道

  • 新浪网

    新浪网 - 提供新闻线索,重大新闻爆料

  • 搜狐

    搜狐

  • 豆瓣

    豆瓣

  • 百度贴吧

    百度贴吧——全球领先的中文社区

  • 首页 尚未审核订阅工具 订阅

    CSS书写规范和顺序

    来源:网络收集  点击:  时间:2024-05-05
    【导读】:
    一直以来,书写css都是率性所为,没有遵循一定的规范;俗话说:没有规矩,不成方圆。造成了代码可读性极差,导致了网站后期维护非常困难。方法/步骤1/7分步阅读

    万事都有一个顺序,先干什么,后干什么。那么css书写的顺序是什么呢?

    一、书写顺序:

    1、牢拒定位:其中有的属性为:position z-index left right top bottom clip

    2、尺寸:其中属性为:width height min-height max-height min-width

    max-width

    3、文字:其中属性有:color font-size letter-spacing, color- text-align等

    4、背景:其中属性有:background-image border等

    5、其他:一般有:animation, transition等

    2/7

    二、一些注意事项:

    1、能缩写的尽量缩写;

    例如:background-color:#333;background-image: url(skin/p_103x196_1.jpg);background-repeat: repeat-x;

    可以书写为:background:url(skin/p_103x196_1.jpg) repeat-x #333;

    3/7

    2、能少些尽量少写:

    例如:font-size:0.9em 可以写为:font-size:.9em;

    3、灰度值可以缩写的缩写:

    例如:color:#666666;可以写为:color:#666;

    4、在别人阅读代码可以看得多的情况下缩写:

    例如:navigation 可以写为 nav

    5、不建议使用“_”下划线来命名CSS选择器,因为:

    (1)、输入的时候少按一个shift键;

    (2)、浏览器兼容问题 (比如炼独使用_tips的选择器命名,在IE6是无效的)

    (3)、能良好区分JavaScript变量命名(JS变量命名是用“_”)

    4/7

    二、CSS命名规范(常用的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

    5/7

    三、css文件中注释的写法:

    注释的写法:

    /* Header */

    内容区

    /* End Header */

    6/7

    ID的命名:

    页面结构

    容器: container

    页头:header

    内容:content/container

    页面主体:main

    页尾:footer

    导航:nav

    侧栏:sidebar

    栏目:column

    页面外围控制整体佈局宽度:wrapper

    左右中:left right center

    7/7

    CSS样式表文件命名:

    主要的 master.css

    模块 module.css

    基本共用 base.css

    版面 layout.css

    主题 themes.css

    专栏 columns.css

    文字 font.css

    表单 forms.css

    补丁 mend.css

    打印 print.css

    CSSHTML5CSS3HTML
    本文关键词:

    版权声明:

    1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

    2、本站仅提供信息发布平台,不承担相关法律责任。

    3、若侵犯您的版权或隐私,请联系本站管理员删除。

    4、文章链接:http://www.1haoku.cn/art_680660.html

    相关资讯

    ©2019-2020 http://www.1haoku.cn/ 国ICP备20009186号05-05 09:00:02  耗时:0.026
    0.026s