html与css命名规范小结
2018-06-24 02:15:59来源:未知 阅读 ()
一、命名规则说明
- 所有的命名最好都用小写
- 使用英文命名
- 给每一个表格和表单加上一个唯一的、结构标记id
- 给每个图片加上alt标签,优点在于图片发生错误时,alt可以体现给用户
二、相对网页外层重要部分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……
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash