鸡西网站建设制作优化设计
本页定位
在线咨询

分享HTML和CSS的规范命名

假装绅士🎩1个月前532A+A-

鸡西网近期将会在保留现有CSS内容的情况下,增加一些新的CSS内容。因鸡西网还有很多页面没有添加,其中包括业务范围的网站设计、网站建设、域名注册等等。需要有大量的CSS来支持。

在这段时间与HTML5和CSS3的接触中学到了很多以前没有经历过的内容,在测试某些CSS样式时,总是会遇到如何命名的问题,搞的很是不够规范。就想着找到个关于HTML和CSS比较规范又比较易懂、通用的命名的写法。如果以后所有网站都能遵循这种写法,相信在对百度收录上也会有很大的提高,自己看着也顺眼了,一目了然。推荐广告网站制作者和站长们使用这种规范命名方法,具体命名方法如下。

HTML标签命名

页头:header如:div#header{属性:属性值;}或div.header{属性:属性值;}
登录条:loginBar、标志:logo、侧栏:sideBar、广告:banner、导航:nav、子导航:subNav、菜单:menu、子菜单:subMenu、搜索:search、滚动:scroll、页面主体:main、内容:content、标签页:tab、文章列表:list、提示信息:msg、小技巧:tips、栏目标题:title、加入:joinus、指南:guild、服务:service、热点:hot、新闻:news、下载:download、注册:regsiter、状态:status、按钮:btn、投票:vote、合作伙伴:partner、友情链接:friendLink、页脚:footer、版权:copyRight

常用配合标签:divh1h2h3h4spanembstrongfontu

CSS标签命名

外 套:wrap、主导航:mainNav、子导航:subnav、页 脚:footer、整个页面:content、页 眉:header、版 权:copyRight、商 标:label、标 题:title、主导航:mainNav(globalNav)、顶导航:topnav、边导航:sidebar、左导航:leftsideBar、右导航:rightsideBar、旗 志:logo 标 语:banner、菜单内容1:menu1Content、菜单容量:menuContainer、子菜单:submenu、边导航图标:sidebarIcon、注释:note、面包屑:breadCrumb(即页面所处位置导航提示)、容器:container、内容:content、搜索:search、登陆:login、功能区:shop(如购物车,收银台)、当前:current

HTML+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。
鸡西网在日后建站中最常用的主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它大可根据自己需要选择性使用。

CSS样式表文件命名

主要样式 master.css或style.css
布局样式 layout.css
专栏样式 columns.css
文字样式 font.css
打印样式 print.css
主题样式 themes.css

其实在大多情况下,基本都只用一个style.css文件就够了。除非有特别需要区分文件的时候,例如在不同设备或者不同样式选择上,多分类的CSS文件会更便于切换一些。

好了,以上就是鸡西网整理的关于HTML+CSS的规范命名的方法,感谢大家对鸡西网的支持。

相关推荐
全部评论: 0
登录没有账号 切换注册

忘记密码 ?

注册已有账号 切换登录