CSS规范
css命名及书写规范
css命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
CSS书写规范
CSS命名规则页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。
关于CSS的命名我们采用骆驼式命名法。
骆驼式命名法：正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。
例如：mianNav footNav1.通用命名规则：1)所有ID或者class字母和数字之间用“_”连接，如: #col_1、#col_22)所有ID或者class两个单词之间的链接采用骆驼式命名法，如: mianNav、footNav3)页面主体框架布局命名：Lay_1、Lay_2 、Lay_34)栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N5)栏目标题块命名一律采用title。
元素标签采用:<h4> 如：<div class="tit"><h4>标题</h4></div>6)页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N7)页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N8)页面上按钮采用：btn_1、btn_2、btn_3、btn_N9)广告区域：ad_1,ad_2,ad_3,ad_N2.主框架命名规则：1)#header (页面头部)2)#main (页面主体)3)#footer (页面尾部)3.通用命名规则：主体：main外层：wrap功能条：funcBar主导航：mainNav子导航：subNav友情链接：friendLink 版权：copyright页眉：header页脚：footer标题：title主导航：mainNav子菜单：subMenu注释：note面包屑：breadcrumb 容器：container内容：content搜索：search登陆：Login当前状态：current页头：header标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content标签页：tab文章列表：list信息：msg提示技巧：tips栏目标题：title指南：guide服务：service热点：hot新闻：news下载：download注册：reg（register）状态：status按钮：btn投票：vote4.常用简写命名规则：bd：Bodyhd：Headerfnt：字体nav：导航tb：表格lnk：链接ml/mr：margin-left/margin-rightlst：列表pl / pr / pd：padding-left/-right/paddingcol：栏目frm：表单con：内容inf：信息lg：Logoinp：Inputft：Footerbtn：Buttonmore：更多fl /fr float:left/float:righttit 标题栏spr 空行t / d / mid / l / r：上 / 下 / 中 / 左 / 右bdr：边w：宽h：高1.频道私有CSS文件：针对网站频道不同风格所以各部分需要独自私有定义，但是通用布局不需要再重新设置，只需要设置私有部分。
css命名规范
css命名规范CSS（CascadingStyleSheets，层叠样式表）是一种用于定义网页外观的Web标准规范，广泛应用于万维网上的各种HTML文档。
在CSS的编写中应遵循良好的命名规范，这样可以保证CSS在不同的团队协作下编写、维护和管理起来更加顺畅，也有助于后期维护和修改。
CSS命名规范涉及到以下几个方面：一、标签命名标签命名（className idName）应采用简洁的、有意义的词汇，尽可能避免缩写，只使用小写字母和下划线，将空格替换为下划线。
标签名称也可以使用中划线，但无建议，仍建议使用下划线。
例如：class=wrapperid=page_main_body二、变量命名变量命名应采用有意义的、符合变量含义的单词，变量名称以字母或下划线开头，变量名可以是大写字母、小写字母，但尽量不要使用缩写，可以使用中划线。
例如：$page_main_body$page_sub_body三、CSS文件存放路径CSS文件一般存放在与功能相关的文件夹中，要求各文件夹名称明确清楚，其中新建CSS文件命名要尽量使用有意义的名称，可以采用中划线，也可以使用单词缩写。
例如：style/header.cssstyle/footer.cssstyle/common.css四、CSS属性和值命名CSS属性和值应采用小写字母，有些关键词会使用中划线。
常用的颜色可以使用英文（例如：red、blue、green），也可以使用十六进制的颜色代码（例如：#333333）。
例如：font-size: 12px;color: #333;border-width: 1px;五、CSS选择器命名CSS选择器应使用有意义的、符合元素类型含义的单词，有些属性可以直接使用英文单词，有些属性可以使用中划线表示，要尽量避免使用缩写。
例如：#id { }.class { }ul li { }六、CSS优先级CSS的优先级主要以特殊性和权重以及规则的数量来定义，值越高的优先级别越高，优先级越低的越容易被覆盖。
css命名规范
css命名规范CSS（层叠样式表）技术一直是Web开发者们进行前端开发的重要工具之一。
它可以为网页提供美观的外观，并且也可以提升网站的可用性。
在进行前端开发时，对于CSS文件定义和命名是一个非常重要的环节。
给CSS文件定义一个有意义的名字，可以帮助开发者理解文件的作用，以及里面定义的样式。
CSS文件的命名有不同的规范，这些规范的重要性不容忽视。
有意义的命名规范不仅可以帮助开发者在未来能够快速定位文件，而且也可以更加有效的维护网站的可读性。
下面将介绍几种常用的CSS命名规范。
1.写字母和数字组合：一种命名规范是使用最多的。
它非常简洁，便于区分。
通常使用小写字母和数字组合来命名CSS文件和样式，并且使用横线（-）做为连接符。
比如：style-sheet.css，button-style.css，footer-style.css等。
2. 使用驼峰式命名：峰式的命名法是一种英文单词的写法，它由单词的第一个字母小写开始，而每个单词的首字母都大写开始。
比如：styleSheet.css，buttonStyle.css，footerStyle.css等。
3. 使用短横线分隔：种命名方式使用了一个短横线将CSS文件和样式分隔，并且使用小写字母和数字组合命名CSS样式。
比如：style-sheet_button.css，style-sheet_footer.css等。
4. 使用下划线分隔：与前一种方式类似，这种方式也是使用小写字母和数字组合命名CSS样式，只是使用下划线（_）做为分隔符。
比如：style_sheet_button.css，style_sheet_footer.css等。
基本上，NASA等大型机构制定的CSS命名规范会以上述四种规范为主，有时会结合多种规范使用，以满足CSS文件的苛刻要求。
下面着重介绍一些常见的CSS命名规范。
1.名时尽量使用有意义的名称：命名时，尽量使用有意义的名称，而不是简单的数字或者字母。
CSS规范-根据W3C标准制定
由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTM l和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范：一、CSS文件及样式命名1、CSS文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。
为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用h eader，头部左边，可以用hea der_l eft或h eader_l,还有如果是列结构的可以这样——box _1of3(三列中的第一列)，box_2o f3 (三列中的第二列)、box _3of3(三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。
）容器：contai ner/box头部：header主导航：m ainNa v子导航：subNav顶导航：topNav网站标志：logo大广告：banner页面中部：m ainBo dy底部：footer菜单：menu菜单内容：m enuCo ntent子菜单：subMen u子菜单内容：subMen uCont ent搜索：search搜索关键字：keywor d搜索范围：range标签文字：tagTit le标签内容：tagCon tent当前标签：tagCur rent/curren tTag标题：title内容：conten t列表：list当前位置：curren tPath侧边栏：sideba r图标：icon注释：note登录：login注册：regist er列定义：column_1of3(三列中的第一列)column_2of3(三列中的第二列)column_3of3(三列中的第三列)二、id和cla ss的使用及区别我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>id一个页面只可以使用一次，class可以多次引用。
HTML,CSS编码规范
HTML、CSS编码规范1.基本原则* 遵循内容（HTML）、显示（CSS）、行为（JavaScript）分离的代码组织模式* 代码格式化，保持干净整洁2.HTML部分2.1.添加必须的utf-8的字符集，并且使用HTML5的简洁方式：<meta charset="utf-8" />2.2.遵循xhtml 1.0规则：1)所有标签必须小写2)标签属性必须使用成对引号（单引号或双引号）3)标签属性必须有值：<select><option selected="selected"></option></select><input type="checkbox" checked="checked" />4)特殊符号必须转义（&、<、>、©、»…）2.3.标签属性命名规范id：_连接符命名法“hello_world”class: -连接符命名法“hello-world”name：骆驼式命名法“helloWorld”1)表单元素的id必须加以下前缀label：lbltext：txtpassword：txttextarea：txtfile：txtradio：radcheckbox：chksubmit：btnreset：btnbutton：btnhidden：hid2)应使用统一的结构布局的元素id命名3)name命名一般用于表单元素，根据当前元素id属性值命名，去掉id属性值的前缀和所有连接符，使用骆骆式命名法命名，例如id=”txt_id_card”，那么name=”idCard”。
2.4.要合理使用标签，语义化结构1)标签合理嵌套a、span、strong、em、p、h1~h6等元素不能包含：div、ul、ol、dl、p2)避免多余的div、span、table标签，正确使用标签表现DOM结构，在文档去除css的情况下，仍然具有结构和可读性，以下是html标记的使用规范：p：文本段落；dl：定义列表，可包括标题和内容简介的列表；ul：无序列表；ol：有序列表；h1~h6：文章标题、内容区块标题，根据重要性由大到小区分，h1一个页面只出现一次；strong/em：强调文本；img：图像，必须加上alt属性，当图像无法显示时，可表示图像信息，背景和按钮使用css 处理，不使用img元素；3)合理化表单结构a)使用fieldset元素包裹相同类别的字段；b)使用legend元素表示字段类别名称；c)使用label表示字段文本，添加必要的for属性，以在点击字段文本时，文本框能获得焦点；d)文本框不使用size属性定义宽度，而使用css的width属性；e)要添加maxlength属性限制输入字符的长度。
css命名规范
css命名规范以CSS命名规范为标题，本文将介绍CSS命名规范的主要规则及其实践方法。
1.解CSS命名规范CSS命名规范旨在使CSS的命名结构可读性更强，可维护性更高，从而使CSS编码更轻松、高效。
当有一个明确的命名规范时，CSS代码也会更有组织，可以让他人更轻松地读懂，时也能够更轻松地调试、扩展现有的CSS代码。
CSS命名规范的精髓在于采用“短且易懂”的命名规则。
其含义通常能从简单的词汇中理解出来，在CSS中可以用更短的名称表示，以减少开发人员在编写样式时所需要记忆的命名空间。
2. CSS命名规范的主要规则CSS的命名规范规定，在生成类名时必须要遵循以下几个原则：（1）层级性：CSS的类名必须有层级性，可以根据文档的内容结构设计CSS的类名，以增强代码的可读性。
（2）效率：CSS的类名应该有一定的简写规则，避免重复，使开发人员可以更加轻松地记忆、使用。
（3）可读性：CSS的类名应该有简洁清晰的表意，使开发人员可以轻松地更改或定位某个HTML元素的CSS样式。
（4）标识：CSS的类名应该有一些“标识符”，使得命名更加明确，便于维护。
3.践CSS命名规范（1）使用层级性命名：CSS的类名要根据文档的内容结构设计，以便更有层次，让代码变得更具可读性，更容易维护。
如：.header-nav {list-style: none;padding: 0;margin: 0;}.header-nav li {float: left;margin-right: 10px;}.header-nav a {padding: 10px;color: #FFF;}（2）使用简写规则：在CSS类名中，应该避免过长的词汇，可以使用简写来代替，例如，使用“cont”表示“content”，使用“nav”表示“navigation”等，以减少开发人员在编写样式时所需要记忆的命名空间。
（3）使用可读性的类名：CSS的类名必须有简洁清晰的表意，以便开发人员可以轻松地更改或定位某个HTML元素的CSS样式。
CSS书写规范
CSS书写顺序1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等)CSS书写规范使用CSS缩写属性CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”简写命名很多用户都喜欢简写类名，但前提是要让人看懂你的命名才能简写哦！16进制颜色代码缩写有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
连字符CSS选择器命名规范1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢？∙输入的时候少按一个shift键；∙浏览器兼容问题（比如使用_tips的选择器命名，在IE6是无效的）能良好区分JavaScript变量命名（JS变量命名是用“_”）不要随意使用idid在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
为选择器添加状态前缀有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
CSS命名规范（规则）常用的CSS命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper 左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu 搜索：search友情链接：friendlink 页脚：footer版权：copyright滚动：scroll内容：content标签：tags文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guide服务：service注册：regsiter状态：status投票：vote合作伙伴：partner 注释的写法:/* Header */内容区/* End Header */id的命名:1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体佈局宽度：wrapper 左右中：left right center(2)导航导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：register搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标籤页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright注意事项::1.一律小写;2.尽量用英文;3.不加中槓和下划线;4.尽量不缩写，除非一看就明白的单词。
css 命名规范
css 命名规范CSS命名规范是一种约定俗成的标准，用于统一命名CSS类、ID、选择器等，以确保代码的一致性和可维护性。
以下是一个约1000字的CSS命名规范的例子：一、命名规则：1. 采用英文小写字母、数字或连字符（-），不使用大写字母、下划线（_）或其他特殊字符。
2. 以字母开头，不以数字开头。
3. 使用有意义的名称，避免使用缩写或简写。
命名应反映元素的功能或用途。
4. 使用短小、精准的名称，不使用冗长或复杂的名称。
二、选择器命名：1. 使用有意义的名称来定义选择器。
例如，使用类名来表示元素的特征或功能。
（例如：.header，.sidebar）2. 避免使用无意义或单一的选择器名称。
可以使用多个类名来表示一个元素的多个特征或功能。
（例如：.primary-button.button）3. 不要使用ID选择器来定义样式，ID选择器具有较高的优先级，会导致样式难以重用和维护。
三、类名命名：1. 使用小写字母或连字符来分隔单词。
例如：.nav-bar，.info-box。
2. 使用有意义的名称来描述元素的功能或用途。
例如：.card，.container。
3. 使用简洁明了的名称，不要出现冗长或复杂的类名。
4. 避免使用HTML标签名称作为类名，以免混淆和难以维护。
四、ID命名：1. 使用小写字母或连字符来分隔单词。
例如：#home-page，#top-header。
2. ID命名应尽量避免使用，因为ID具有较高的优先级且唯一性，会导致样式难以重用和维护。
五、样式规则：1. 使用短小、精确的样式规则名称，可以简洁明了地反映样式的用途或作用。
（例如：.bold，.highlight）2. 选择器和样式命名应保持一致性，以提高代码的可读性和维护性。
3. 避免使用内联样式，尽量使用外部CSS样式文件来管理样式规则，以便代码的复用和维护。
六、注释规范：1. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。
css命名规范
css命名规范CSS（CascadingStyleSheet）是一种用于定义网页表现形式的语言，它可以用来定义用户界面的外观。
在CSS中，我们需要使用有意义的命名来表示不同的元素，以便随后的维护和管理。
只有恰当的CSS命名规范，才能更好地将不同的元素区分开来，有效地保持管理CSS。
为了使得CSS命名能够更有意义，很多专业开发者都建议采用一定的CSS命名规范。
事实上，没有规范的CSS命名可能会导致混乱，从而影响网站的性能和可维护性。
首先，CSS命名规范要求有明确的命名空间，例如由“.class-name”和“#id-name组成的CSS类名和ID。
这样可以避免命名冲突，以及更有效地查找和追踪CSS的来源。
其次，为了使CSS代码更可读，CSS命名规范也应该遵守一定的结构，使其表示出类名的含义。
例如，为了表示导航菜单的宽度，可以使用“nav-menu-width”这样的命名。
同样，结构也可以帮助更有效地检索样式表中的CSS styles。
此外，CSS命名规范也应当更加关注性能和可扩展性。
CSS命名规范应该尽量保证CSS文件的简洁性，避免不必要的冗余或“拼写错误”。
同时，CSS命名规范也应当考虑到不同设备和浏览器对CSS命名的支持情况。
最后，现代CSS命名规范还强调模块化设计，即将网站的样式表分解为几个独立的CSS模块，每个模块都有自己的CSS文件。
这样可以有效地分离管理不同的CSS样式，并使模块之间的分享更加方便。
以上就是关于CSS命名规范的一些基本介绍，现在许多开发者都在尝试使用CSS命名规范，以提高网站的可维护性和性能。
此外，有许多不同的CSS命名规范，如 BEM，OOCSS SMACSS等，可以根据项目的需要来挑选和使用。
CSS前端规范
前端CSS 规范大全本文转载自标点符，文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。
一、文件规范1、文件均归档至约定的目录中（具体要求以豆瓣的CSS规范为例进行讲解）：所有的CSS分为两大类：通用类和业务类。
通用的CSS文件，放在如下目录中：∙基本样式库/css/core∙通用UI元素样式库/css/lib∙JS组件相关样式库/css/ui业务类的CSS是指和具体产品相关的文件，放在如下目录中：∙读书/css/book/∙电影/css/movie/∙音乐/css/music/∙社区/css/sns/∙小站/css/site/∙同城/css/location/∙电台/css/radio/外联CSS文件适用于全站级和产品级通用的大文件。
内联CSS文件适用于在一个或几个页面共用的CSS。
另外一对具体的CSS进行文档化的整理。
如：∙util-01 reset /css/core/reset.css∙util-02 通用模块容器/css/core/mod.css∙ui-01. 喜欢按钮/css/core/fav_btn.css∙ui-02. 视频/相册列表项/css/core/media_item.css∙ui-03. 评星/css/core/rating.css∙ui-04. 通用按钮/css/core/common_button.css∙ui-05. 分页/css/core/pagination.css∙ui-06. 推荐按钮/css/core/rec_btn.css∙ui-07. 老版对话框/css/core/old_dialog.css∙ui-08. 老版Tab /css/core/old_tab.css∙ui-09. 老版成员列表/css/core/old_userlist.css∙ui-10. 老版信息区/css/core/notify.css∙ui-11. 社区用户导航/css/core/profile_nav.css∙ui-12. 当前大社区导航/css/core/site_nav.css∙ui-13. 加载中/css/lib/loading.css2、文件引入可通过外联或内联方式引入link和style标签都应该放入head中，原则上，不允许在html上直接写样式。
css命名规范
css命名规范CSS（层叠样式表）命名规范是网页开发中的一种必不可少的知识。
它被广泛用于编写网页，是一种简单而又强大的工具，可以控制网页的外观和样式，使其看起来更加简洁实用。
首先，让我们先来看一下CSS命名规范究竟有哪些。
CSS命名规范主要分为三个方面：（1）结构命名。
结构命名是指针对HTML结构设定的CSS命名，也就是将标签结构体系化，命名规范要求简要、清晰明了、比较统一，方便大家统一管理和调用，使开发更加有序顺利。
（2）功能命名。
功能命名是指将CSS样式文件中的代码按其功能进行命名，这样可以使CSS文件更易于调用。
（3）定义命名。
定义命名指的是在CSS文件中定义某类样式及其相关属性时，设定的具体命名，它是CSS文件中主要体现CSS命名规范的地方。
要求名称简要、清晰，尽量要求通用性，方便在不同网页中调用。
其次，如何在实际开发中制定合理的命名规范，并使之有效执行呢？首先，尽量遵守一定的命名规则，比如给每个标签设置统一的命名，把结构命名和定义命名区分开来，不要把它们混在一起使用；功能命名中也要尽量保证每个命名都能够表达出它的实际意义，以便以后对它进行修改和替换。
其次，在定义一个新的元素时，不要只专注于属性，同时要考虑将它归入哪一类，以便便于管理和调用，让每一个元素都有其所属的定义命名和结构命名，这样可以让CSS文件的整体结构更加清晰、有条理。
再次，在CSS命名规范中，有一项很重要的是引用规则，一般情况下，CSS文件中使用的样式都应该是经过统一定义、以及充分考虑过其功能和结构的，而每一个元素命名时也应该遵守一定的引用规则，比如在引用类的时候，尽量使用类名加编号的方式，这样有利于管理。
最后，在实际开发中，CSS命名规范应该遵守一定的水平对齐原则，比如网页中使用的标签均应有一个专门的类名，这样可以有效避免CSS代码的混乱，使其具备更好的可读性和可维护性。
总而言之，要想使网页开发更加高效，CSS命名规范就显得至关重要，它不仅可以使开发更加轻松，还能让网页的样式更加简洁实用。
css命名规范
css命名规范随着现代网站的设计及开发的不断发展，CSS名规范也越来越重要。
CSS名规范是定义一种统一的编写 CSS 代码的标准，它为 CSS 发者提供了指导，让他们可以创建出更为可维护和可读的代码。
本文将探讨 CSS名规范的历史、目的、有用性以及它的作用。
历史CSS名规范是最早出现在 2001的 O’Reilly CSS码指南中的，这是一本关于 CSS码技术的参考书，其中提供了有关如何使用 CSS 建网页的基础技术指南。
它还提出了一下关于 CSS名规范的概念：1. 使用小写字母2.免使用数字和字母组合3. 使用有意义的名称4. 使用简洁的缩写随着时间的推移，有关 CSS名规范的讨论也变得越来越多，最近几年，CSS名规范更是风靡一时。
目的CSS名规范的目的是为了帮助开发者更容易掌握自己的 CSS 代码，从而提高开发效率和降低维护成本。
使用统一的命名有助于开发者快速定位 CSS 代码，也有助于合作者之间统一的编码标准，这样的话，即使在多人合作的情况下也能够保持代码的一致性和可读性。
有用性使用 CSS名规范有几种有用的优势：1.名统一：有助于维护者从代码中快速定位 CSS素，使用一致的名称可以极大地提高开发效率。
2.容易被多人理解：它提供了一种统一的语言，多人之间更容易协作，他们使用这种语言来表示他们的代码，使得代码可读性增强，也让多个开发者之间的交流变得更容易。
3.块化设计：使用统一的命名规范能够更好的体现HTML CSS 之间的关系，这样一来开发者可以更容易地构建出可维护的模块。
作用CSS名规范的作用有很多，它提供了一个统一的规范，从而使代码变得更加可读和可维护，使得开发者可以更快速地定位代码，同时也能够让代码有更好的可读性。
此外，使用正确的命名能够提高开发者之间的协作效率，并且也有助于代码的一致性，最后也能够让网页有更好的模块化设计。
结论CSS名规范的历史、目的、有用性以及它的作用已经清楚的探讨了。
CSS中的CSS命名规范有哪些
CSS中的CSS命名规范有哪些在网页设计和开发中，CSS（层叠样式表）是塑造页面样式和布局的关键工具。
而一个良好的 CSS 命名规范对于提高代码的可读性、可维护性和团队协作效率来说至关重要。
接下来，让我们详细探讨一下CSS 中的命名规范。
首先，我们来谈谈为什么需要命名规范。
想象一下，在一个大型的项目中，如果 CSS 类名和 ID 命名混乱、毫无规律，那么当需要修改样式或者查找特定元素的样式时，就会像在一团乱麻中寻找一根特定的线一样困难。
相反，遵循统一且有意义的命名规范，可以让开发者快速理解每个元素的用途和样式的作用范围，大大提高开发效率。
常见的命名方式有很多种，比如使用描述性的词汇。
这意味着类名和ID 应该能够清晰地传达元素的用途或特征。
比如，对于一个导航栏，我们可以命名为“navbar”；对于一个主要内容区域，可以命名为“maincontent”。
这样，当其他人看到这些名称时，就能立刻明白它们所代表的元素。
另外，采用驼峰命名法（CamelCase）或连字符分隔命名法（kebabcase）也是常见的选择。
驼峰命名法例如“headerTitle”，连字符分隔命名法如“headertitle”。
这两种方式各有优缺点，驼峰命名法在一些编程语言中比较常见，看起来相对简洁；而连字符分隔命名法更符合 CSS 的习惯，并且在一些情况下更易于阅读和区分单词。
在命名时，还需要注意避免过于通用的名称。
比如说“box”“container”这样的词汇，它们太过宽泛，不能准确地描述元素的具体用途。
应该尽量具体和明确，像“productdetailsbox”“articlecontainer”这样。
对于模块和组件的命名，要有一定的层次结构。
比如，如果有一个博客页面，其中包含文章列表和文章详情两个部分，可以将文章列表的样式命名为“blogarticlelist”，文章详情的样式命名为“blogarticledetail”。
css类名命名规则
css类名命名规则CSS类名命名规则在编写CSS样式表时，为了方便管理和维护，我们需要遵循一定的类名命名规则。
合理的类名命名可以提高代码的可读性和可维护性，同时也能够增强代码的可扩展性和复用性。
本文将介绍一些常见的CSS类名命名规则。
一、使用语义化的类名语义化的类名可以让开发者更好地理解代码的含义，减少歧义和误解。
我们应该尽量使用能够准确描述元素或组件功能的类名。
例如，如果我们要设置一个导航栏的样式，可以使用类名"nav"或"navbar"，而不是"header"或"top"。
二、使用有意义的单词或缩写类名应该使用能够清晰表达其含义的单词或缩写，避免使用无意义的字符或数字。
例如，如果我们要设置一个按钮的样式，可以使用类名"button"或"btn"，而不是"class1"或"btn1"。
三、避免使用过长的类名虽然我们要使用有意义的类名，但是也要避免过长的类名。
过长的类名不仅会增加代码的复杂度，还会增加错误的可能性。
一般来说，类名应该控制在2到3个单词之间，尽量简洁明了。
四、使用连字符分隔单词在类名中，我们应该使用连字符（-）来分隔单词，而不是下划线（_）或驼峰命名法。
连字符可以增加类名的可读性，使代码更易于理解。
例如，如果我们要设置一个列表项的样式，可以使用类名"list-item"，而不是"list_item"或"listItem"。
五、避免使用具体的元素名称作为类名为了增加代码的灵活性和复用性，我们应该避免使用具体的元素名称作为类名。
例如，不要使用类名"div"或"p"，而是使用描述性的类名，如"container"或"paragraph"。
css语法规则
css语法规则CSS语法规则CSS是一种用于网页设计的样式表语言，它可以为HTML文档添加样式和布局。
为了正确地使用CSS，我们需要遵循一些基本规则和语法。
下面是一个全面的、详细的CSS语法规则，以帮助您更好地掌握这门语言。
一、基本概念1. CSS指层叠样式表（Cascading Style Sheets）。
2. CSS样式定义了HTML元素的外观和布局。
3. CSS样式可以通过内部样式表、外部样式表或行内样式来定义。
4. CSS选择器用于选择要应用样式的HTML元素。
二、CSS语法1. CSS规则由选择器和声明块组成。
2. 选择器指定要应用样式的HTML元素。
3. 声明块包含一个或多个声明，每个声明由属性和值组成，属性与值之间使用冒号分隔，每个声明之间使用分号分隔。
4. 外部CSS文件必须以.css扩展名保存，并通过<link>标签在HTML 文档中引入。
5. 内部CSS可以在<head>标签中使用<style>标签来定义，并将其放置在<head>标签中间。
6. 行内CSS可以直接在HTML元素中使用style属性来定义。
三、CSS选择器1. 元素选择器：通过HTML元素名称来选择元素。
例如，p选择器会选择所有的段落元素。
2. ID选择器：通过HTML元素的ID属性来选择元素。
例如，#myid 选择器会选择ID为“myid”的元素。
3. 类选择器：通过HTML元素的class属性来选择元素。
例如，.myclass选择器会选择class为“myclass”的所有元素。
4. 属性选择器：通过HTML元素的属性来选择元素。
例如，[href]选择器会选择所有具有href属性的元素。
5. 伪类选择器：通过HTML元素的状态或位置来选择元素。
例如，:hover伪类可以在鼠标悬停在一个链接上时改变链接的颜色。
6. 组合选择器：将多个不同类型的CSS规则组合在一起，以便同时应用于一个或多个HTML元素。
css基本使用规则
css基本使用规则CSS基本使用规则如下：1. CSS样式需要放在style标签或CSS文件中，以便浏览器能够正确解析样式。
2. CSS使用"选择器-属性-值"的方式定义样式。
例如，使用选择器".class"和属性"color"，可以设置文字颜色为红色。
3. CSS样式中的属性和值要用英文半角冒号(:)分隔，属性值必须放在英文半角括号()中。
4. 不同属性之间要使用英文半角分号(;)隔开，例如设置多个文本属性可以这样写："font-size: 14px; color: red; line-height: 1.5;"5. CSS注释用"/*注释内容*/"表示。
6. 常用的单位有像素(px)、百分比(%)、em、rem等。
其中px表示像素，是绝对单位；百分比(%)表示相对于父元素的大小；em表示相对于当前元素的字体大小，rem表示相对于根元素(html)的字体大小。
7. CSS可以通过层叠、继承等方式实现样式控制。
在层叠中，后来的样式会覆盖先前的样式；在继承中，子元素会继承父元素的样式。
8. CSS样式有不同的取值范围，例如颜色值可以是具体的颜色名、RGB、RGBA、十六进制等。
可以通过查看文档或使用工具来了解不同属性的取值范围。
9. CSS可以通过选择器选择元素，常用的选择器有id选择器、class选择器、标签选择器、后代选择器、伪类选择器等。
10. 对于不同的浏览器，可能会存在不同的CSS实现和浏览器兼容性问题。
在实际应用中，需要综合考虑不同浏览器的特性和兼容性问题。
css规范文档
css规范⽂档CSS书写顺序*{/*显⽰属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*⽂字*/colorfontcontent/*边框背景为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来⽅便，哈哈。
*/ borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-position colorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：⼀．⽂件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css； 链接样式：link.css； 打印样式：print.css；主要的 master.css专栏 columns.css主题 themes.css主要的 master.css模块 module.css基本共⽤ base.css表单 forms.css补丁 mend.css ⼆．页⾯结构容器: container页头：header内容：content页⾯主体：main页尾：footer栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center 三．导航导航：nav主导航：mainbav⼦导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu⼦菜单：submenu摘要: summary四．功能标志：logo⼴告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加⼊：joinus状态：status按钮：btn滚动：scroll标签页：tab⽂章列表：list提⽰信息：msg当前的: current⼩技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyrightContainer div #container 容器Layout #layout 布局Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav ⼆级导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏Main div #main 页⾯主体Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输⼊框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap ⽹站地图List #list 列表Home page #homepage ⾸页Sub page subpage ⼆级页⾯⼦页⾯Toolbar #tool, #toolbar ⼯具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态Container div #container 容器Header or banner div #header 页头部分Main or global navigation div #mainNav 主导航Menu #menu 菜单Sub Menu #submenu ⼦菜单Left or right side columns #sidebarA, #sidebarB 左边栏或右边栏Main div #main 页⾯主体Content div #content 内容部分The main content area #contentMain 主要内容区域Footer div #footer 页脚部分Tag #tag 标签Message #msg #message 提⽰信息Tips #tips ⼩技巧Vote #vote 投票Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Sub-navigation list #subNav ⼆级导航Search input #searchInput 搜索输⼊框Search output #searchOutput 搜索输出和搜索结果相似Search #search 搜索Search results #searchResults 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #brandingLogo LOGOSite information #siteinfo ⽹站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加⼊我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Status #status 状态Products .products 产品Products prices .productsPrices 产品价格Products description .productsDescription 产品描述Products review .productsReview 产品评论Editor's review .editorReview 编辑评论New release .newsRelease 最新产品Publisher .publisher ⽣产商Screen shot .screenshot 缩略图FAQ .faqs 常见问题Keyword .keyword 关键词Blog .blog 博客Forum .forum 论坛五class的命名:(1)颜⾊:使⽤颜⾊的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体⼤⼩,直接使⽤"font+字体⼤⼩"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使⽤对齐⽬标的英⽂名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使⽤"类别+功能"的⽅式命名,如.barnews { }.barproduct { }/*=====主导航=====*/#mainMenu {width:100%;height:30px;background:url(images/mainMenu_bg.jpg) repeat-x;}#mainMenu ul li {float:left;line-height:30px;margin-right:1px;cursor:pointer;}/*=====主导航结束=====*/9、⿏标⼿势：在XHTML标准中，hand只被IE识别，当需要将⿏标⼿势转换为“⼿形”时，则将“hand”换为“pointer”，即“cursor:pointer;”10．注释书写规范1、⾏间注释：直接写于属性值后⾯，如：.search{border:1px solid #fff;/*定义搜索输⼊框边框*/background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/}2、整段注释：分别在开始及结束地⽅加⼊注释，如：/*=====搜索条=====*/.search {border:1px solid #fff;background:url(../images/icon.gif) no-repeat #333;}/*=====搜索条结束=====*/3．协助注释⾮作者维护时所加⼊的表⽰修改时间、修改⼈等标识信息。
css样式命名规范
Css样式命名规范命名的规范标准:1.将页面格局分为3个部分,第一个就是header头部,头部包括Logo,设为首页,加入收藏,联系我们等,还有一个导航,层次分明!!!中间的部分就是content,中间又可分为left ,center,right,还有foot!!!命名不要重复!2.在列表资讯类别中,栏目的标题一般用.title ,内容直接用.con,常见的错误:1.<p>中重复套用<div>2.底部栏目列表每行要限高3.在downinfo或者是newsinfo中内容部分用<div></div>来结束,不要用<dl></dl>4.在css中书写样式的时候,尽量不要出现三级命名. . .这样的命名,不利于程序的加载和浏览5.用<div></div>书写样式时,一定要给定氛围,包括长和宽,设定为overflow:hidden;6.图片的尺寸一定要给定范围,包括logo,幻灯片和广告图片,只让图片在规定的尺寸内等比例显示,不影响显示效果;7.在主页中列表栏目的高要限定,不然的话对整个格局有影响,不利于页面的美观效果,但是在分页中不要限定高度,因为内容不确定有多少8.在留言或订单页面,那种格局构架既可以使用<table></table>,同时也可以用<dl></dl>,没有一个明确的统一;除非是那种标准的表格界面使用table,其他的页面也可以用<dl></dl>,也可以用<table></table>;9.整个大的背景图片怎么调整每个背景的位置;用background:来处理;10.在页面中运用定位position:relitave时,二级导航会出现错误现象。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS规范
1.0版2009-10-10 Carter@
一、总则 (2)
1.1目的及效力 (2)
1.2 CSS书写原则 (2)
二、样式重置 (2)
2.1重置代码 (2)
2.2注意事项 (3)
三、CSS书写顺序 (3)
3.1样式 (3)
3.2注意事项 (3)
四、CSS Hack (4)
4.1样式 (4)
4.2书写顺序 (4)
4.3注意事项 (4)
按住CTRL并单击目录可直接定位
一、总则
1.1目的及效力
1.制订本规范的目的：使css样式表文件标准化，具有较高的可读性，便于后期自己或他人
阅读、修改，使之开发效率提高。
2.页面制作人员必须严格遵守此规范。
3.本规范应用于2009年11月1日以后制作的项目中，不溯及以往。
4.本规范随时根据需要修订，请注意版本号的变化。
当前为1.0版。
1.2 CSS样式书写总规范
1.普通企业网站样式表文件统一命名为“main.css”，对于门户型网站或大型企业网站根据
实际情况进行命名、细分。
2.由于页面采用utf-8编码所以必须在样式表文件顶部加上“@charset "utf-8";”。
3.书写样式时必须先进行样式重置。
4.书写样式时必须按照规定的顺序。
5.不同浏览器对于CSS解析认识不一样，为保证页面在各个浏览器下基本一致需要针对不
同浏览器去写不同的CSS。
6.书写样式时可以缩写的样式推荐使用缩写。
二、样式重置
2.1重置代码
/* 样式重置*/
body { margin:0; padding:0; font-size:12px; font-family:Arial,"宋体"; }
form,ul,li,p,h1,h2,h3,h4,h5,h6 { margin:0; padding:0; }
img { border:0; vertical-align:absbottom; }
ul,li { list-style-type:none; }
input, select, textarea { font-size:12px; font-family:Arial; vertical-align:absmiddle; } /* 常用功能样式*/
.clear { height:0px; font-size:0px; line-height:0px; overflow:hidden; clear:both; } .overflow { overflow:auto; }
.nobg { background:none!important; }
/* 默认文字链接样式*/
a { color:#333; text-decoration:none; }
a:hover { color:#285898; text-decoration:underline; }
2.2注意事项
1.尽量不要采用* { margin:0; padding:0; }
2.样式重置代码中已经包含常见情况，后期如有添加请按照CSS书写顺序添加。
三、CSS书写顺序
3.1样式
#样式名/.样式名{ display:block; float:; position:; z-index:; width:; height:; margin:; padding:; border:; background:; color:; font:（font-weight、font-size、line-height、font-family）; text-align:; text-decoration:; list-style:; overflow:; display:inline; *zoom:1; }
3.2注意事项
1.“｛”前后必须空格。
2.CSS属性必须以“;”结尾（最后一个属性也必须加“;”）,写完一个属性空一格。
方便
后期自己或他人查看、修改。
3.CSS样式书写顺序：布局；定位；尺寸；边界；补白；边框；背景；字体；文本；其他；
4.对于可以缩写的属性在实际项目中可以不采用缩写，但必须按照“上、右、下、左”的顺
序进行书写。
如margin-top:1px; margin-right:2px;……（“margin、padding属性”推荐使用缩写，方便后期修改。
）
5.“font”此属性为缩写，代表字体属性集合，实际项目中不要求缩写。
其内部包含：
font-weight、font-size、line-height、font-family等，书写顺序按照“（）”内。
对于没有列出字体属性（如：font-variant）在书写时在“font-family”后增加。
6.书写没有列出属性时根据备注第三项（CSS样式书写顺序）在其相应模块后增加。
7.“display:inline”原则为最后一个属性。
其他属性都在其前面增加。
如有“*zoom:1;”
则“*zoom:1;”为最后一个属性。
四、CSS Hack
4.1样式
#样式名/.样式名{
background:#000000; /* 全部支持*/
background/*\**/:#f00\9; /* 所有IE内核浏览器*/
background:#0000FF\0; /* IE8支持*/
* background:#FFFF00; /* IE7和IE6能识别,IE8和FF不能识别*/
_ background:#FF0000; /* IE6能识别，IE7、IE8和FF不能识别*/ }
4.2书写顺序
采用先Firefox后IE8再IE7其次才IE6的书写顺序。
4.3注意事项
1.目前只针对IE、Firefox，后期会逐步对其他浏览器（如：谷歌浏览器、Opera）写不
同Hack。
2.“\数字”目前只有9和0这两个数字可以使用。
“\9”IE6+都支持。
3.
4.
5.
6.
7.
（注：文档可能无法思考全面，请浏览后下载，供参考。
可复制、编制
，期待你的好评与关注）
8.
9.。