CSS样式表命名
在CSS样式表中,id和class是两个常用的属性,它们在命名规则上有着明显的区别。
首先,我们来看一下id的命名规则。id主要用于单个元素的样式定义,且一个id只能被一个元素使用。常见的命名规则包括:
- 页头:header
- 登录条:loginBar
- 标志:logo
- 侧栏:sideBar
- 广告:banner
- 导航:nav
- 子导航:subNav
- 菜单:menu
- 子菜单:subMenu
- 搜索:search
- 滚动:scroll
- 页面主体:main
- 内容:content
- 标签页:tab
- 文章列表:list
- 提示信息:msg
- 小技巧:tips
- 栏目标题:title
- 加入:joinus
- 指南:guild
- 服务:service
- 热点:hot
- 新闻:news
- 下载:download
- 注册:register
- 状态:status
- 按钮:btn
- 投票:vote
- 合作伙伴:partner
- 友链:friendLink
- 页脚:footer
- 版权:copyRight
在实际应用中,id命名可能会使用大小写和下划线来区分,例如:主导航可命名为MainNav,如果有多个主要导航,可以使用MainNav_1,MainNav_2等命名。有时也可以使用“类型+变量名称”的规则,如将红色字体定义为.f_red {}(f代表font,即字体缩写)。
接着,我们来看一下class的命名规则。class用于多个元素的样式定义,且一个class可以被多个元素使用。常见的命名规则包括:
- 外套:wrap
- 主导航:mainNav
- 子导航:subnav
- 整个页面:content
- 页眉:header
- 页脚:footer
- 商标:label
- 标题:title
- 主导航:mainNav(globalNav)
- 边导航:sidebar
- 左导航:leftsideBar
- 右导航:rightsideBar
- 旗帜:logo
- 标语:banner
- 菜单内容:menu1Content
- 菜单容量:menuContainer
- 子菜单:submenu
- 边导航图标:sidebarIcon
- 注释:note
- 面包屑:breadCrumb(即页面所处位置导航提示)
- 容器:container
- 内容:content
- 搜索:search
- 登陆:login
- 功能区:shop(如购物车,收银台)
- 当前的:current
当然,div+css样式表的id和class的命名并不局限于上述规则,可以根据具体情况进行调整。使用通俗易懂、容易理解的命名方式更为重要。如果您有更优秀的div+css样式表的id和class命名规则,欢迎在评论区留言,共同探讨。
扩展资料
CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
多重随机标签