推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > w3cschool编程狮 > html与css命名规范小结

html与css命名规范小结

w3cschool编程狮 2018-02-10

一、命名规则说明

    所有的命名最好都用小写。
    使用英文命名。
    给每一个表格和表单加上一个唯一的、结构标记id。
    给每个图片加上alt标签,优点在于图片发生错误时,alt可以体现给用户。

html与css命名规范小结

二、相对网页外层重要部分css样式命名

    wrap——用于最外层
    header——用于头部
    main——用于主题内容(中部)
    main-left——左侧布局
    main-right——右侧布局
    nav——网页菜单导航条
    content——用于网页中部主体
    footer——用于底部

css命名其他说明

    DIV+CSS命名小结:无论是使用“.”选择符号开头命名,还是使用“#”选择符号开头都无所谓,但我们最好遵循——主要的,重要的,特殊的,最外层的盒子用“#”选择符号开头命名,其他都用“.”选择符号开头命名,同时要考虑命名的css选择器在html中尽量不要重复使用调用。

三、类class的书写规范示例

    字体大小,直接使用"font+字体大小"作为名称,如:

    .font16px{ font-size:16px } ;
    .font18px{ font-size:18px } ;

    标题栏样式,使用"类别+功能"的方式命名,如:

    .barnews{ } ;
    .barproduct{ } ;

    省略0后边的单位,如:

    margin: 0 ;
    padding: 0 ;

四、标签属性命名规范

    id:—— 连接符命名法“hello-world”
    class:—— 连接符命名法“hello-world”
    name:—— 骆驼式命名法“helloWorld”

五、注意事项

    h1~h6:文章标题、内容区块标题,根据重要性由大到小区分,h1一个页面只出现一次。
    文本框不使用size属性定义宽度,而使用css的width属性。
    添加maxlength属性限制输入字符的长度。
    把id留给后台开发和JS使用,除此之外页面的page id(如首页的外层需要一个ID id=”page_index”),页面结构(header main footer)允许用id命名之外,其他禁止id使用在样式表CSS命名中,一律使用class命名。
    为了节省字节数以及文件大小,尽量使用属性的简写方式。
    如果颜色使用16进制色值,当6个数字两两相等时,使用缩写方式编写,比如:#996600缩写为#960

六、图片命名

    背景图片:bg001,bg002……
    一般图片:img001,img002……
    特定图片:如icon,logo按照具体情况命名。
    按钮图片:btn-submit,btn-cancel……
文章来源https://www.cnblogs.com/Wayne8016/p/8419392.html


版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《html与css命名规范小结》的版权归原作者「w3c技术教程」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注w3c技术教程微信公众号

w3c技术教程微信公众号:w3cschoolcn

w3c技术教程

手机扫描上方二维码即可关注w3c技术教程微信公众号

w3c技术教程最新文章

精品公众号随机推荐

上一篇 >>

Flink的日志配置