css样式表ID命名规则

合集下载

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（层叠样式表）是一种用于描述网页上元素的外观和样式的语言。

在CSS中，样式表可以通过不同的方式定义，以适应不同的需求和使用场景。

本文将详细介绍CSS中样式表的定义类型。

二、内联样式内联样式是将CSS样式直接写在HTML元素的style属性中。

它的优先级最高，会覆盖其他类型的样式定义。

内联样式使用简单方便，适用于只需要对少量元素进行特殊样式设置的情况。

三、嵌入样式嵌入样式是将CSS代码写在HTML文档头部的<style>标签中。

这种方式可以在同一个HTML文件中定义多个元素的样式，使得代码结构更加清晰。

嵌入样式适用于对整个HTML文件或多个元素进行统一设置样式的情况。

四、外部链接样式外部链接样式是将CSS代码存储在独立的.css文件中，并通过<link>标签引入到HTML文件中。

这种方式使得CSS代码可以被多个HTML 文件共享，提高了代码复用性和维护性。

外部链接样式适用于需要对整个网站或多个页面进行统一设置样式的情况。

五、导入样式导入样式是通过@import规则将一个CSS文件引入到另一个CSS文件中。

这种方式可以将CSS代码分割成多个模块，提高代码的可读性和维护性。

导入样式适用于需要对大型网站的样式进行模块化管理的情况。

六、层叠顺序层叠顺序是指当多个样式定义作用于同一个元素时，浏览器如何确定最终应用哪个样式。

在CSS中，根据优先级的不同，可以使用以下方式定义样式：1. 元素选择器：通过HTML元素名称选择元素（例如div、p），优先级较低。

2. 类选择器：通过class属性选择元素（例如.class），优先级较高。

3. ID选择器：通过id属性选择元素（例如#id），优先级最高。

4. 内联样式：直接写在HTML元素的style属性中，优先级最高。

当多个样式具有相同的优先级时，后面定义的样式会覆盖前面定义的样式。

七、总结CSS中有多种方式可以定义样式表，包括内联样式、嵌入样式、外部链接样式和导入样式。

css样式表ID命名规则

一．文件命名规范[b]样式文件命名[/b] [quote]主要的master.css 布局，版面layout.css专栏columns.css文字font.css打印样式print.css主题themes.css [/quote] [b]CSS ID 的命名[/b] [quote]页头：header登录条：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外套：wrap主导航：mainnav子导航：subnav页脚：footer整个页面：content页眉：header页脚：footer商标：label标题：title主导航：mainbav（globalnav）顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar旗志：logo标语：banner菜单内容1：menu1content菜单容量：menucontainer子菜单：submenu边导航图标：sidebarIcon注释：note面包屑：breadcrumb(即页面所处位置导航提示）容器：container内容：content搜索：search登陆：Login功能区：shop(如购物车，收银台)当前的current[/quote][b]网站常用中英文对照表[/b][quote]网站导航Site Map公司简介Profile or Company Profile or Company公司设备Equipment Equipment公司荣誉Glories Glories企业文化Culture Culture产品展示Product Product资质认证Quality Certification企业规模Scale Scale营销网络Sales Network组织机构organization organization合作加盟Join In Cooperation技术力量Technology Technology经理致辞Manager`s oration发展历程Development History工程案例Engineering Projects业务范围Business Scope分支机构Branches供求信息Supply & Demand经营理念Operation Principle产品销售Sales Sales联系我们Contact Us Contact Us信息发布Information Information返回首页Homepage Homepage产品定购order order分类浏览Browse By Category电子商务E-business公司实力Strength Strength版权所有Copy Right友情连结Hot Link应用领域Application Fields人力资源Human Resource Hr领导致辞Leader`s oration企业资质Enterprise Qualification行业新闻Trade News行业动态Trends客户留言Customer Message客户服务Customer Service新闻动态News & Trends公司名称Company Name销售热线Sales Hot-Line联系人Contact Person您的要求Your Requirements建设中In Construction证书Certificate Certificate地址ADD Add邮编Postal Code Zipcode电话TEL Tel传真FAX Fax产品名称Product Name产品说明Description Description价格Price品牌Brand规格Specification尺寸Size生产厂家Manufacuturer Manufacturer 型号Model产品标号Item No.技术指标Technique Data产品描述Description产地Production Place销售信息Sales Information用途Application论坛Forum在线订购On-line order招商Enterprise-establishing招标Bid Inviting综述General业绩Achievements招聘Join Us求贤纳士Join Us大事Great Event动态Trends服务Service投资Investment行业Industry规划Programming环境Environment发送Delivery提交Submit重写Reset登录Enter注册Login中国企业网技术支持Powered By 社区Community业务介绍Business Introduction在线调查Online Inquiry Inquiry下载中心Download会员登陆Member Entrance意见反馈Feedback常见问题FAQ中心概况General Profile教育培训Education & Training游乐园Amusement Park在线交流Online Communication专题报道Special Report[/quote]常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

html类，id命名规范

html类，id命名规范[转⽂]⽹页中使⽤规范的css和id命名原则，有利于提⾼团队效率，减少后期维护成本，良好的结构对SEO（搜索引擎优化）也有作⽤，是对代码的优化是⼀个很关键的步骤。

⼀、⽹页外层重要部分css样式命名：外套 wrap ------------------⽤于最外层头部 header ----------------⽤于头部主要内容 main ------------⽤于主体内容（中部）左侧 main-left -------------左侧布局右侧 main-right -----------右侧布局导航条 nav -----------------⽹页菜单导航条内容 content ---------------⽤于⽹页中部主体底部 footer -----------------⽤于底部⼆、css/ID命名参考表CSS样式命名说明#wrapper页⾯外围控制整体布局宽度#container或#content容器,⽤于最外层#layout布局#head, #header页头部分#foot, #footer页脚部分#nav主导航#subnav⼆级导航#menu菜单#submenu⼦菜单#sideBar侧栏#sidebar_a,#sidebar_b左边栏或右边栏#main页⾯主体#tag标签#msg #message提⽰信息#tips⼩技巧#vote投票#friendlink友情连接#title标题#summary摘要#loginbar登录条#searchInput搜索输⼊框#hot热门热点#search搜索#search_output搜索输出和搜索结果相似#searchBar搜索条#search_results搜索结果#copyright版权信息#branding商标#logo⽹站LOGO标志#siteinfo⽹站信息#siteinfoLegal法律声明#siteinfoCredits信誉#joinus加⼊我们#partner合作伙伴#service服务#regsiter注册arr/arrow箭头#guild指南#sitemap⽹站地图#list列表#list列表#homepage⾸页#subpage⼆级页⾯⼦页⾯#tool, #toolbar⼯具条#drop下拉#dorpmenu下拉菜单#status状态#scroll滚动.tab标签页.left .right .center居左、中、右.news新闻.download下载.banner⼴告条(顶部⼴告条)电⼦贸易相关.products产品.products_prices产品价格.products_description产品描述.products_review产品评论.editor_review编辑评论.news_release最新产品.publisher⽣产商.screenshot缩略图.faqs常见问题.keyword关键词.blog博客.forum论坛三、⽂件命名参考表CSS⽂件命名说明master.css,style.css主要的module.css模块base.css基本共⽤layout.css布局，版⾯themes.css主题columns.css专栏font.css⽂字、字体forms.css表单mend.css补丁print.css打印。

CCS样式命名

CCS样式命名命名规则1. 所有的命名最好都⼩写2. 属性的值⼀定要⽤双引号("")括起来，且⼀定要有值如class="divcss5",id="divcss5"3. 每个标签都要有开始和结束，且要有正确的层次，排版有规律⼯整4. 空元素要有结束的tag或于开始的tag后加上"/"5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等6. <h1>到<h5>的定义，应遵循从⼤到⼩的原则，体现⽂档的结构，并有利于搜索引擎的查询。

7. 给每⼀个表格和表单加上⼀个唯⼀的、结构标记id8. 给图⽚加上alt标签9. 尽量使⽤英⽂命名原则10. 尽量不缩写，除⾮⼀看就明⽩的单词tips：1.尽量考虑为元素命名其本⾝的作⽤或”⽤意”，达到语义化。

不要使⽤表⾯形式的命名.如:red/left/big等。

2.组合命名规则:[元素类型]-[元素作⽤/内容]如:搜索按钮: btn-search登录表单:form-login新闻列表:list-news3.涉及到交互⾏为的元素命名:凡涉及交互⾏为的元素通常会有正常、悬停、点击和已浏览等不同样式，命名可参考以下规则:⿏标悬停:：hover 点击：click 已浏览：visited如:搜索按钮: btn-search、btn-search-hover、btn-search-visited常⽤命名页⾯结构命名：容器：container 页头：header 内容：content/container页⾯主题：main 页尾：footer 导航：nav侧边栏：sidebar 栏⽬：column 页⾯外围控制整体宽度：wrapper导航：主导航：mainnav ⼦导航：subnav 顶导航：topnav边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar菜单：menu ⼦菜单：submenu 标题: title 摘要: 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版权：copyrightclass 的命名: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 { } 注意事项: 1.⼀律⼩写; 2.尽量⽤英⽂; 3.不加中杠和下划线;。

CSS样式书写顺序及规范

CSS样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。

解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。

布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

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样式冲突和代码可重用性可能会成为一个挑战。

为了解决这个问题，我们可以使用CSS命名空间来避免样式冲突并提高代码的可重用性。

1. 什么是CSS命名空间CSS命名空间是一种将CSS样式表分隔为不同的作用域的方法。

通过为特定元素或者一组元素添加前缀，我们可以确保每个组件的样式只在其所属的命名空间中起作用。

这样可以避免样式冲突，并且提供更好的代码可维护性和可重用性。

2. 如何使用CSS命名空间2.1 使用类名命名空间我们可以使用类名来为不同的组件添加命名空间。

例如，假设我们正在开发一个网站，其中包含一个顶部导航栏和一个侧边栏。

我们可以为顶部导航栏中的元素添加以"navbar"作为前缀的类名，例如".navbar-container"和".navbar-link"。

同样，我们可以为侧边栏中的元素添加以"sidebar"作为前缀的类名，例如".sidebar-container"和".sidebar-link"。

这样，每个组件的样式会被限制在其所属的命名空间中。

2.2 使用ID命名空间除了类名，我们还可以使用ID来为特定的元素添加命名空间。

与类名类似，我们可以为不同组件的元素使用不同的ID前缀，以确保每个组件的样式不会互相冲突。

例如，我们可以使用前缀"navbar-"来定义顶部导航栏的元素ID，使用前缀"sidebar-"来定义侧边栏的元素ID。

3. 命名空间的优势和影响3.1 避免样式冲突使用CSS命名空间可以有效地避免样式冲突。

通过将样式限制在特定的命名空间中，我们可以确保每个组件的样式只会应用于其所属的元素，而不会意外地影响其他组件。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如"搜索框"则应命名为"searchInput"、"搜索图标"命名这"searchIcon"、"搜索按钮"命名为"searchBtn"......一. 常规书写规范及方法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。

完整代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "/TR/xhtml1/DTD/xhtml1-frameset.dtd">理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。

因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。

2. 指定语言及字符集：为文档指定语言：<html xmlns="/1999/xhtml" lang="en">为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv="Content-Type" content="text/html; charset=utf-8″/>标准的XML文档语言定义：<?xml version="1.0″encoding=" utf-8″?>针对老版本的浏览器的语言定义：<meta http-equiv="Content-Language" content=" utf-8″/>为提高字符集，建议采用"utf-8"。

3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的head区。

如：<style type="text/css"><!- body { background : white ; color : black ; } -> </style>外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。

如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

4、选用恰当的元素：根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。

例如，使用P元素来包含文字段落，而不是为了换行。

如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。

少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理：这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。