网页前端关于如何命名css样式

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:

页头:header  如:#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id区别及用法
登录条: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
常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u

1.CSS的 ID 的命名 也许你需要了解class与Id区别

外 套: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
DIV+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的重要的特殊的最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1h2h3h4标签使用)
、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。

DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。
2.CSS样式文件命名如下

主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css

也许你需要了解一下css引用到html方法

以上为DIV+CSS的命名规则总结,相信通过规范的CSS命名给你以后网站网页的维护带来方便。

zhoumeng 2012年11月21日 于 前端开拓者 发表

时间: 2024-10-01 07:10:11

网页前端关于如何命名css样式的相关文章

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

  H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度. 在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行.可以使用下面的方法,H标签就不会强制换行了.Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值.用该值

ASP.NET给前端动态添加修改 CSS样式JS 标题 关键字

有很多网站读者能换自己喜欢的样式,还有一些网站想多站点共享后端代码而只动前段样式,可以采用动态替换CSS样式和JS. 如果是webform 开发,可以用下列方法: 流程是首先从数据中或者xml读取数据,然后赋值给前端页面 HTML <meta> 标签添加 HtmlMeta mtdes = new HtmlMeta();//新建实例 mtdes.Name = "Description";//标签 mtdes.Content = this.Descriptionp;//内容 H

前端入门教程(五)CSS样式初见

一 什么是CSS CSS全称Cascading Style Sheet层叠样式表,是专用用来为HTML标签添加样式的. 样式指的是HTML标签的显示效果,比如换行.宽高.颜色等等 层叠属于CSS的三大特性之一,我们将在后续内容中介绍 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里 二 为何要用CSS 在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下 <!DOCTYPE html> <html> <head>

入门级前端菜鸟清除默认浏览器CSS样式

/** 清除内外边距 **/body, h1, h2, h3, h4, h5, h6, hr, p, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */th, td /* table elements 表格元素 */ { margin: 0; pa

web前端(7)—— 了解CSS样式,引入css样式的方式

CSS 在前面大概的介绍了css,从本片博文开始,会详细的介绍它,在最开始介绍web前端时,打开百度首页,当时我提出了一个问题,为什么百度首页的输入框可以放在正中间,就是由于有css的控制,我们可以打开浏览器的调试界面查看这个输入框的css样式: 图中我圈出来的左边html代码的就是html属性的键值对,然后圈出的右边位置就是css样式,然后右边那个窗口你还可以所谓的线上编辑,在最后点击一下,就可以编辑: 这个此时就暂且不提了,以后学到的时候再添加,然后那些已经有的也可以去掉,把选项框里的“√”

css 样式表集合

说到前端不得不说一下css样式 css样式是用来装饰我们的html让整个页面显得更丰富多彩,所以我们要熟悉各种css样式,本人搜集了一下 供大家参考一下 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.P

css样式书写的问题

经常遇到前端的朋友问及css样式书写的问题,结合自己实际的工作,自己总结了整理了一下,给大家分享: 一.顺序问题:显示属性-位置属性-元素自身属性-文本属性-其他属性 1.显示属性:z-index.display.list-style 2.位置属性:position.float 3.元素自身属性:width.height.margin.padding.border.border-radius.background 4.文本属性:color.font-size.font-weight.font-f

web的各种前端打印方法之CSS控制网页打印样式

来源:http://www.jb51.net/web/70358.html CSS控制网页打印样式: 使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措.如果你也有这种现象,那么我告诉你吧,在W3school查到CSS的midia的作用. midia 定义和用法: media 属性规定被链接文档将显示在什么设备上. media 属性用于为不同的媒介类型规定不同的样式. 原来用到media来指定css的媒体类型,它的

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")