CSS设计(代码)规范
css书写规则
css书写规则Div+css命名规范Css的命名是区分大小写的，建议全部使用小写。
下面总结一下最好的命名准则，好的命名不仅有利于维护人员阅读对搜索搜索引擎优化(seo)有很大的好处。
其中对代码的优化是一个很关键的步骤。
为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则，并做了些补充：1.1. div+css命名规范页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:msg小技巧:tips栏目标题:title友情链接:friendLink页脚:footer加入:joinus指南:guild服务:service热点:hot新闻:news下载:download注册:regsiter状态:status按钮:btn投票:vote合作伙伴:partner版权:copyRight产品管理1.2. CSS的Id命名规范外套:wrap主导航:mainNav子导航:subnav页脚:footer整个页面:content页眉:header页脚:footer商标:label标题:title主导航:mainNav(globalNav)顶导航:topnav边导航:sidebar左导航:leftsideBar右导航:rightsideBar旗志:logo标语:banner菜单内容1:menu1Content菜单容量:menuContainer子菜单:submenu边导航图标:sidebarIcon注释:note面包屑:breadCrumb(即页面所处位置导航提示) 容器:container内容:content搜索:search登陆:login功能区:shop(如购物车，收银台)当前的：current1.3. css样式文件命名主要的:master.css布局版面:layout.css专栏:columns.css文字:font.css打印样式:print.css主题:themes.css通用：basic.css上面的命名规范很直观，即使程序人员不添加注释，我们也会很清楚的知道是什么意思。
阿里前端开发规范
阿里前端开发规范阿里前端开发规范包括代码、命名、HTML、CSS、JavaScript、图片方面的规范。
1. 代码规范：- 使用四个空格缩进，不使用制表符。
- 代码行长度不超过80个字符。
- 使用驼峰命名法，变量和函数名用小写开头，构造函数用大写开头。
- 使用严格相等运算符（===和!==）替代宽松相等运算符（==和!=）。
- 在条件表达式中，使用括号来提高可读性。
- 避免在循环中使用等号赋值（例如，for (var i = 0; i < array.length; i++)）。
- 避免使用eval()函数。
2. 命名规范：- 文件名应该全部小写，可以包含破折号（-）或下划线（_）。
- 文件夹名应该全部小写，可以包含破折号（-）或下划线（_）。
- CSS文件名应该以.css结尾。
- JavaScript文件名应该以.js结尾。
3. HTML规范：- 使用两个空格缩进，不使用制表符。
- 使用双引号而不是单引号作为属性值的引号。
- 在自定义属性中使用小写字母和破折号（-）。
- 为所有非自闭合标签使用闭合标签。
- 避免在HTML标签中使用行内样式。
4. CSS规范：- 使用两个空格缩进，不使用制表符。
- 使用小写字母和破折号（-）作为选择器和属性名的命名方式。
- 为每个选择器之间使用空行分隔。
- 使用简写属性来减少代码量。
- 使用预处理器（如Less或Sass）来编写CSS。
5. JavaScript规范：- 使用两个空格缩进，不使用制表符。
- 使用分号作为语句的结束符号。
- 避免使用全局变量。
- 避免使用with语句。
- 使用模块化的开发方式，避免全局作用域污染。
6. 图片规范：- 使用有意义的命名来描述图片内容。
- 使用适当的格式和压缩技术来减小图片文件大小。
- 将页面上的图片引用写成相对路径。
以上是阿里前端开发规范的一些主要内容。
在实际开发中，遵循这些规范可以提高代码的可读性和可维护性，使团队成员之间更容易协同工作。
六、CSS入门
六、CSS⼊门CSS核⼼基础CSS样式规则选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}CSS代码结构中的特点CSS样式中的选择器严格区分⼤⼩写，属性和值不区分⼤⼩写，按照书写习惯⼀般将“选择器、属性和值”都采⽤⼩写的⽅式。
多个属性之间必须⽤英⽂状态下的分号隔开，最后⼀个属性后的分号可以省略，但是，为了便于增加新样式最好保留。
如果属性的值由多个单词组成且中间包含空格，则必须为这个属性值加上英⽂状态下的引号。
在编写CSS代码时，为了提⾼代码的可读性，通常会加上CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后的空格可有可⽆。
属性和属性值之间不允许出现空格，否则浏览器会报错引⼊CSS样式表优先级：如果三种样式同时控制我们的内容：⾏内优先级最⾼外部样式，内部样式：谁离着内容近，谁优先级⾼1、⾏内式⾏内式也称为内联样式，是通过标记的style属性来设置元素的样式<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标记名>style是标记的属性，实际上任何HTML标记都拥有style属性，⽤来设置⾏内式。
其中属性和值的书写规范与CSS样式规则相同，⾏内式只对其所在的标记及嵌套在其中的⼦标记起作⽤。
2、内嵌式内嵌式是将CSS代码集中写在HTML⽂档的<head>头部标记中，并且⽤<style>标记定义<style>标记定义，其基本语法格式如下：<head><style type="text/css">选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</style></head><style>标记⼀般位于<head>标记中<title>标记之后，也可以把他放在HTML⽂档的任何地⽅。
Less编码规范
Less编码规范Less 编码规范⼀、代码书写规范1.代码格式1.1 ⽂件[建议]：采⽤ UTF-8 编码，在 CSS 代码头部顶格使⽤：@charset "utf-8";1.2 缩进[强制]：⽤两个空格来代替制表符（tab） -- 这是唯⼀能保证在所有环境下获得⼀致展现的⽅法。
1.3 规则声明块[强制]：为了获得更准确的错误报告，每条声明都应该独占⼀⾏。
[强制]：在规则声明块的左⼤括号 { 前加⼀个空格。
[强制]：在样式属性的冒号 : 后⾯加上⼀个空格，前⾯不加空格。
[强制]：在每条样式后⾯都以分号 ; 结尾。
[强制]：规则声明块的右⼤括号 } 独占⼀⾏。
[强制]：每个规则声明间⽤空⾏分隔。
[强制]：所有最外层引号使⽤单引号 ‘ 。
[强制]：当⼀个属性有多个属性值时，以逗号 , 分隔，每个逗号后添加⼀个空格，当单个属性值过长时，每个属性值独占⼀⾏完整⽰例如下：.g-footer,.g-header {position: relative;}.g-content {background: linear-gradient(135deg,deeppink25%,transparent25%) -50px0,linear-gradient(225deg,deeppink25%,transparent25%) -50px0,linear-gradient(315deg,deeppink25%,transparent25%),linear-gradient(45deg,deeppink25%,transparent25%);}.g-content::before {content: '';}2.语法2.1 class命名[强制]：class命名只能出现⼩写英⽂和破折号 -连接，不允许下划线_ 和驼峰命名法。
(例: anole-btn)原因如下：1.-符合英⽂语义化，- 标识连⼦符，_是强调符号；2._underline 选择器命名，在IE6中⽆效；3.驼峰和都不利于SEO搜索引擎检索切词，驼峰⽆法切成单词，⾕歌会切漏关键词；4.输⼊的时候少按⼀个shift键，且Google、Yahoo、淘宝、⾖瓣在他们的新CSS代码规范中推荐使⽤ -作为className分隔符。
实习三 CSS基本语法
实习三CSS基本语法一、实验目的1. 了解XHTML；2. 掌握在网页中引用CSS 的方法；3. 掌握CSS 的基本语法规则；4. 掌握CSS 的常用选择器；5. 掌握使用Dreamweaver 定义CSS 的方法。
二、实验内容1. CSS 的引入和基本选择器应用；2. 利用CSS 对网页进行控制；3. 利用W3school 网站进行CSS 的练习。
三、实验步骤1.CSS 的引入和基本选择器应用；(1)内嵌样式表将定义的样式以<Style type=”text/css”>样式定义<Style>形式插入到文档的Head区，此种方法样式将影响当前整个页面。
建立网页Css1.htm，代码如下：<html><head><title>Css 技术的应用一</title><Style type=”text/css”>H1{color:red; Font-family:”华文行揩”,”宋体”;}Body{color:black;Font-size:9pt;}.fnt{color:blue;Font-family:”隶书”; Font-size:14pt;}</style></head><body><h1>这是标题一</h1>这是正文…..<p class=fnt>这是使用Fnt 类后的效果</body></html>(2) 行内样式将定义的样式以标记的属性形式插入，如：<P Style=”color:blue”>,此种方法样式只影响当前标记所影响的区域。
建立网页Css2.htm，代码如下：-8-<html><head><title>Css 技术的应用一</title><Style type=”text/css”>H1{color:red; Font-family:”华文行揩”,”宋体”;}Body{color:black;Font-size:9pt;}.fnt{color:blue;Font-family:”隶书”; Font-size:14pt;}</style></head><body><h1>这是标题一</h1>这是正文…..<p class=fnt>这是使用Fnt 类后的效果<p style=”color:tea;font-size:30”>这是中效果只使用于此段….</body></html>(3) 外部样式表将所有样式的信息存放在一个单独的文件中（扩展名为Css），然后用<LINK>把它链接到每个HTML 页面中。
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样式。
HTML／CSS代码开发规范文档
HTML/CSS代码开发规范文档目录1、前言 (3)2、HTML编码规范 (3)2-1HTML标记的关闭规范 (3)2-2HTML文件头基本标记 (3)2-2HTML正文代码标记元素 (4)2-3HTML标记的缩进规范 (5)3、HTML文件引入CSS样式代码和Javascript代码规范 (5)3-1引入css样式代码规范 (5)3-2引入Javascript代码规范 (6)4、HTML注释标签<!--和--> (7)5、CSS编码规范 (7)5-1 CSS编码要求 (7)5-2 CSS样式表规范 (7)5-3 CSS命名规范 (8)5-4样式文件命名 (9)5-5样式文件布局 (10)6、CSS常规书写规范及方法 (10)6-1文件调用方法: (10)6-2 CSS结构化书写 (10)6.2.1派生选择器： (10)6.2.2辅助图片用背影图处理： (11)6.2.3结构与样式分离： (11)6.2.4文档的结构化书写 (11)6-3 HACK CSS书写规范 (12)6.3.1 IE6、IE7、Firefox之间的兼容写法 (12)6.3.2屏蔽IE浏览器 (13)6.3.3清除浮动 (13)6.3.4鼠标手势 (14)7、CSS性代码缩写 (14)7.1不同类有相同属性及属性值的缩写 (14)7.2同一属性的缩写 (15)7.3内外侧边框的缩写 (15)7.4颜色值的缩写 (17)8、CSS注释书规范 (17)8.1行间注释 (17)8.2整段注释 (17)1、前言本编程规范适用于需要编写HTML/CSS代码的网页程序开发人员。
本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。
2、HTML编码规范HTML是一种标记语言, HTML没有任何真正的编程语言中的循环或是流程控制语句。
然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局,增强可读性，而使其易懂和易于维护。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
UI设计（代码）规范一．目录结构与命名规则（1）目录结构规范1、目录建立的原则：以最少的层次提供最清晰简洁的页面结构。
2、根目录一般只存放index.htm以及其他系统必须的文件3、在根目录中应该按照系统的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用来放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。
根目录下的images用于存放各页面都要使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片4、所有JS,ASP,PHP等脚本存放在根目录下的scripts目录5、所有CGI程序存放在根目录下的cgi-bin目录6、所有CSS文件存放在根目录下style目录7、每个语言版本存放于独立的目录。
例如：简体中文gb8、所有flash, avi, ram, quicktime 等多媒体文件存放在根目录下的media目录9、temp 子目录放客户提供的各种文字图片等等原始资料，以时间为名称开设目录，将客户陆续提供的资料归类整理。
（2）文件和目录命名规范1、文件命名的原则：以最少的字母达到最容易理解的意义。
2、每一个目录中包含的缺省html 文件，文件名统一用index.htm3、文件名称统一用小写的英文字母、数字和下划线的组合，不得包含汉字、空格和特殊字符4、尽量按单词的英语翻译为名称。
例如：feedback(信息反馈)，aboutus(关于我们) 不到万不得已不要以拼音作为目录名称5、多个同类型文件使用英文字母加数字命名，字母和数字之间用_分隔。
例如：news_01.htm。
注意，数字位数与文件个数成正比，不够的用0补齐。
例如共有200条新闻，其中第18条命名为news_018.htm（3）图片的命名规范1、名称分为头尾两两部分，用下划线隔开。
2、头部分表示此图片的大类性质。
例如：放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner ；标志性的图片我们取名为：logo ；在页面上位置不固定并且带有链接的小图片我们取名为button ；在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu ；装饰用的照片我们取名：pic ；不带链接表示标题的图片我们取名：title 依照此原则类推。
3、尾部分用来表示图片的具体含义，用英文字母表示。
例如：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg.（4）css的命名规范1，全局定义/*{}（大括号）内为空时，除ul元素外，其他均自己定义*/body,ul,ol,p,span,dd,dt,h1,h2,h3,h4,h5,h6{ margin:0px; padding:0px;}/*初始化元素的内联及外联*/div{ overflow:hidden}body,body a{ color:#000; font:Arial, Helvetica, sans-serif 12px; text-decoration:none}body a:link{ text-decoration:none;}body a:hover{}body a:visited{}/*全局文字属性结束*/ol,li{ list-style:none;}/*如需居内则为list-style:inside*/p{ text-indent:2em}/*首行缩进两字符宽度，无需更改，使用时可按“<p class="xxx"></p>”设置进一步样式*//**************************以上均为全局属性,一般无需修改**************************************/2，hx样式，如颜色不同请自行增加,根据实际情况进行简写h1{ font:"宋体" 16px bold; line-height:30px; text-align:center; border-bottom:1px dashed #ccc;}/*设置默认H1样式*/h2{ font:"宋体" 14px bold; line-height:26px; text-align:left; border-bottom:1px solid #ccc}h3{}h5{}h4{}3，/*新闻列表/.fontnews{}.fontnews li{}.fontnews li a{}.fontnews li a:hover{}/*例：.fontnews{}.fontnews li{ height:14px; padding:4px 0px; border-bottom:1px dashed #ccc;}.fontnews li a{ text-decoration:none; font:12px; color:#000;}.fontnews li a:hover{ color:#ff0000}*/4，图片列表.piclist{}.piclist div{}/*图片列表*//*例：.piclist{ overflow:hidden; padding:10px;}/*piclist全局.piclist div{ padding-right:10px; overflow:hidden; float:left;}/*使用嵌套思维，piclist下的所有div的属性，如有不同，请用#+ID号来区别，此方法可解决IE6下piclist无法解析高度的情况。
不需任何hack.piclist a{ color:#cc0000; line-height:22px; font-weight:bold; font-size:12px;}/*piclist下文字a及链接属性简单版。
.piclist a:hover{ color:#000; }/文字及链接鼠标状态*/5，页码列表.fontview{}/*view页*//*例.fontview{ padding:10px; line-height:26px; font:14px; color:#555; text-decoration:none;}*/6，通用型01，浮动与内联.gm{}.gmfl{ float:left;}/*左浮动*/.gmfr{ float:right;}/*右浮动*/.gmpadding10px{ padding:10px;}/* 内联10px*/.gmflpadding10px{ padding:10px; float:left}/*内联10px并左浮动*/.gmfrpadding10px{ padding:10px; float:right}/*内联10px并右浮动*//************************************************************/02，图片定义.img{}例:.img{ padding:2px; border:2px solid #ccc; background:#fff;}内联2px,背景白色,直线边框粗1px;03，select/表单/下拉等.select{}.input{}/*输入文本框*/.search{}/*搜索*/.insearch{}/*搜索内*/.searchselect{}/*搜索条*/.serachbuttom{}/*搜索按钮*/04，table.listbox{}/*表格整体框架*/.listbox-table{}/*表格的宽度*/.listbox-header{}/*表格头部文字样式*/.listbox-entry{}/*表格正文文字样式*//********************table*********************/05，清除浮动项clear{ clear:both;}.clearleft{ clear:left}.clearright{ clear:right}7，开始布局layout设置#wrapper{}/*整体大框架*/#inwrapper{}/*大框架内*/.top{}/*顶部及banner*/.intop{}/*顶部及banner内*/.logo{}/*logo*/.inlogo{}/*logo内*/.banner{}/*banner*/.menu{}/*导航：*/.inmenu{}/*导航内*/.Menuul{}/**/.Menuul li{}/**/.Menuul li a{}/**/.inmenu_xiala{}/*下拉菜单*/.Inmenu_xialaul{}/**/.Inmenu_xialaul li{}/**/.Inmenu_xialaul li a{}/**/.mainWrapper{}/*主体内容*/.inmainwrapper{}/*主体内容内*/.sideleft{}/*左侧拦*/.insideleft{}/*左侧内*/.sideright{}/*右侧栏*/.insideright{}/*右侧内*/.sidecenter{}/*中间*/.insidecenter{}/*中间内*/.foot{}/*底部*/.infoot{}/*底部内*//*注:一些简单便捷的方法.虽然ID具有唯一性,但如果把clear或gm设置成#ID的形式,那么同class标签来限制DIV的普通样式,ID来实现一些小的而又有很多DIV都有的属性,比如padding,clear,margin等.*/二．代码常规书写规范和方法我们应该有一个脚本整体风格一致的概念，意思是一个月后和一个月前的你写的脚本风格保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致，因为我们不可能永远孤立的开发，你随时都有可能和三个月前的自己合作（你的客户要求改版），亦或不同开发人员之间的合作。
1. Html 文件的通用模板：<html><!--Generator: Sub Design Studio ( )Creation Data: 2000-8-1Original Author: eastline--><head><title> 文档标题</title><meta http-equiv="content-type" content="text/html; charset=gb2312"><meta name="author" content="eastline">其他meta 标记<link rel="stylesheet" type="text/css" href="style/style.css">样式表定义客户端javascript 函数定义及初始化操作</head><body bgcolor="#ffffff">……</body>补充：为了保证网站能够与下一代的web 语言xml 标准兼容，所有的HTML 标签的属性都要用单引号或者双引号括起，即我们应该写<a href=”url”> 而不是<a href=url>.2. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。