关于CSS样式命名问题

css|问题

商 标:  label
标 题:  title
主导航:  mainbav(globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current
报头:   masthead
摘要, 概要  summary或general
左边的浮动照图片 photoleft
右边的浮动图片 photoright
标题   title
条目底端    entrybottom
更多    extended或.more
容器背景 containerbg
服务   service
服务链接   servicelink
线   line
文本   text
右边   rightside
版权   copyright
新闻   news
书皮   wrapper
介绍      intro-part1
专栏   column
路径   pathways
片断   section
模块   module
上导航   subnav
2.另外在编辑样式表时可用的注释可这样写:

<-- Footer -->
内容区
<-- End Footer -->

3.样式文件命名

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

4.样式表中的注示
实例一
/* GLOBAL --------------------------- */
/* LINKS --------------------------- */
/* FORMS --------------------------- */
/* IDS --------------------------- */
/* HEADER --------------------------- */
/* COLUMN 1 --------------------------- */
/* COLUMN 2 --------------------------- */
/* CLASSES --------------------------- */

实例二

HTML

<!--START: Header -->
<!--END: Header -->
<!--START: Content -->
<!--START: Main Navigation -->
<!--END: Main Navigation -->
<!--START: Search -->
<!--END: Search -->
<!--START: Submenu Navigation -->
<!--END: Submenu Navigation -->
<!--START: Left Column -->
<!--END: Left Column -->
<!--START: Left Column -->
<!--END: Right Column -->
<!--END: Content -->
<!-- START: Crazyegg code -->
<!-- END: Crazyegg code -->
<!--END: Body -->
<!-- 1159340743 -->

CSS

/********************** Site General Tag *************************/
/********************** Navigation Tag *************************/
/********************** Right Content Tag *************************/
/********************** Left Content Tag *************************/
/********************** Comments Tag *************************/
/********************** Header Tag *************************/
/********************** Form Tag *************************/
/********************** MOS Tag *************************/
/********************** Sub Navigation Tag *************************/
/************************ Resources Tag ***************************/
/********************** Sitemap Tag **********************/
/********************** Footer Tag *************************/

实例三(网易)

CSS
#UrsLogin
#LogoNav
#Column
#Content1
#bNav
#Copyright
#UrsLogin
#LogoNav
#SearchArea
#ChannelArea
#HotNews
#NewsCenter
.keyword
#MallArea
#city
#aboutus

HTML

<!-- 通栏1 Start -->
<!-- 通栏1 End --><!-- 第1屏 Start-->
<!-- 最新消息 Start -->
<!-- 最新消息 End --><!--产品导航 Start -->
<!-- 产品导航 End--><!-- 搜索 Start -->
<!-- 搜索 End --><!-- 第1屏小Logo Start-->
<!-- 第1屏小Logo End--><!-- 无线推荐 Start -->
<!-- 铃声搜索 -->
<!-- 铃声搜索 End --><!-- 精彩推荐 --><!-- 左边内容 -->
<!-- 右边内容 -->
<!-- 精彩推荐 END-->
<!-- 无线推荐 End -->
略……………………

时间: 2024-10-27 12:57:28

关于CSS样式命名问题的相关文章

网页制作技巧:关于CSS样式命名问题

css|技巧|网页|问题 商 标: label标 题: title主导航: mainbav(globalnav)顶导航: topnav边导航: sidebar左导航: leftsidebar右导航: rightsidebar旗 志: logo标 语: banner菜单内容1: menu1 content菜单容量: menu container子菜单: submenu边导航图标:sidebarIcon注释: note面包屑: breadcrumb(即页面所处位置导航提示)容器: container

css样式命名规范

命名一直是个让我头痛的问题,特别是那些看上去差不多的模块,所以就得想办法啦,我总结了下面的方法,虽然还在试验中.希望对大家有帮助.欢迎大家提出改进的意见.具体如下:要注意的内容:一,命名所选用的单词应选择不过于具体表示某一状态(如颜色.字号大小等)的单词,以避免当状态改变时名称失去意义.二,样式类名由以字母开头的小写字母(a-z).数字(0-9).下划线(_).减号(-)组成.ID名称由不以数字开头的小写字母(a-z).数字(0-9).下划线(_)组成.可使用类似下面的规则:[模块前缀|类型|作

有利于SEO优化的DIV+CSS的命名规则小结

核心提示:有利于SEO优化的DIV+CSS的命名规则小结 一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 2.CSS样式命名规范 本人建议:用字母._号工.-号.数字组成,必须以字母开头,不能为纯数字.为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块的,这样就节省了查找样式的时间,例如:

网页制作 谈谈CSS样式表的命名规范

css|规范|网页|样式表 最近和一程序员合作项目.弄的我头都大了~埋怨我的CSS命名看不懂~得按照他的来.结果我打开他的页面,看了看,从头第一个开始就是contentCommon,下面全部是content****. 我说明了我的理由,过了半会,似乎是接受了,却突然来一句:"不要用H标签嘛!还有不要用UL来定义导航等".对于很多合作过的程序员,大多都是这样,命名规范大多是自成一派.对于制作标准更是视而不见.抱着只照顾IE正常浏览的态度叫嚣着"让FIREFOX和SAFARI见鬼

CSS样式表技巧总结

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

css选择器命名规则:差异及可能产生的问题

文章简介:W3C CSS2.1的 4.1.3 节中提到:标识符(包括选择器中的元素名,类和ID)只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上,再加连字号(-)和下划线(_):它们不能以 数字,或一个连字号后跟数字为开头.它们还可以包含转义字符加任何ISO 10646字符作为一个数 操作系统版本:Windows 7 浏览器版本:IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器

CSS布局命名规范

CSS布局命名规范 说明:均为class,需要扩展,则在当前命名内以"_"(下划线)后缀自定名称.我习惯称列表页为list,新闻列表则为newslist,图片列表为piclist,内容页为view,/**/整体大框架:#wrapper大框架内:#inwrapper/////////////////////////////////////////////////////////////////////////////////////////////////////////顶部及banne

CSS样式表:详细介绍IE7新支持的选择器

css|样式表 现在IE7已经推出一段时间并且渗透到用户当中,不用等太久我们就可以在页面上使用更高级的CSS.两个最有用的项目将是 Child子和Adjacent Sibling相邻兄弟选择符.现在已是时候使用它们制作网页,并且更深入研究它们. 注意,选择器包括现行的符号,">","+"和空格(后代选择符),涉及到子选择器,相邻兄弟选择器,后代选择器,统称为选择符. 一个较好的方法 在我们研究选择符之前,弄清楚他们的不同和为什么它们是好东西的原因是个不错的主意

CSS样式编写的简明指南

  代码如下: [selector]{ [property]:[value]; [<- Declaration ->] } < p>[选择器]{   [属性]:[值]; [<- 声明 ->] } 编写 CSS 样式时,我习惯遵守这些规则: class 名称以连字符(-)连接,除了下文提到的 BEM 命名法; 缩进 4 空格; 声明拆分成多行; 声明以相关性顺序排列,而非字母顺序; 有前缀的声明适当缩进,从而对齐其值; 缩进样式集从而反映 DOM; 保留最后一条声明结尾的