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命名空间可以有效地避免样式冲突。

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

dreamweaver用法 dreamweaver中css规则详解

Dreamweaver用法——Dreamweaver中CSS规则详解1. 引言Adobe Dreamweaver是一款功能强大的网页设计和开发工具，是许多专业网页设计师和开发者的首选。

本文将详细介绍在Dreamweaver中使用CSS规则的方法和技巧，帮助您更好地利用Dreamweaver进行网站设计和开发。

2. Dreamweaver中CSS规则的基本概念在Dreamweaver中，CSS规则是用来控制网页样式和布局的指令集。

CSS规则由选择器和声明块组成，选择器用于选择要应用样式的HTML元素，声明块则包含了一系列属性和属性值，用于定义所选元素的样式。

Dreamweaver提供了全面的CSS规则编辑和管理功能，可以方便地创建和修改CSS规则，并实时预览样式效果。

3. 创建CSS规则在Dreamweaver中创建CSS规则非常简单。

首先，打开Dreamweaver并打开您想要编辑的HTML文件。

接下来，点击页面底部的“CSS规则”面板（或使用快捷键Ctrl+Alt+2），然后点击“新样式”按钮。

在弹出的对话框中，您可以选择要应用样式的选择器类型（如标签名、类名、ID等），并为选择器命名。

然后，您可以选择要应用的样式属性和属性值，并对这些样式进行设置。

最后，单击“应用”按钮，您的新CSS规则就创建好了。

4. 编辑和管理CSS规则Dreamweaver提供了方便的CSS规则编辑和管理功能，帮助您快速修改和管理页面的样式。

通过单击“CSS规则”面板中的规则名称，您可以直接编辑CSS规则中的属性和属性值。

另外，您还可以使用右键菜单来复制、删除和重新排序CSS规则。

另外，Dreamweaver还提供了CSS样式表的导入和导出功能，方便您在多个项目中复用样式。

5. Dreamweaver中的CSS选择器在Dreamweaver中，CSS选择器用于选择要应用样式的HTML元素。

常见的CSS选择器包括：•标签选择器：选择指定标签名的元素，例如p选择所有<p>元素。

css样式基本语法

css样式基本语法1. 基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。

基本格式如下：selector {property: value}（选择符 {属性：值}）选择符是可以是多种形式，⼀般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此⽅法定义它的属性和值，属性和值要⽤冒号隔开：body {color: black}选择符body是指页⾯主体部分，color是控制⽂字颜⾊的属性，black是颜⾊的值，此例的效果是使页⾯中的⽂字为⿊⾊。

如果属性的值是多个单词组成，必须在值上加引号，⽐如字体的名称经常是⼏个单词的组合：p {font-family: "sans serif"}（定义段落字体为sans serif）如果需要对⼀个选择符指定多个属性时，我们使⽤分号将所有的属性和值分开：p {text-align: center; color: red}（段落居中排列；并且段落中的⽂字为红⾊）为了使你定义的样式表⽅便阅读，你可以采⽤分⾏的书写格式：p { text-align: center; color: black; font-family: arial }（段落排列居中，段落中⽂字为⿊⾊，字体是arial）2. 选择符组你可以把相同属性和值的选择符组合起来书写，⽤逗号将选择符分开，这样可以减少样式重复定义：h1, h2, h3, h4, h5, h6 { color: green }（这个组⾥包括所有的标题元素，每个标题元素的⽂字都为绿⾊）p, table{ font-size: 9pt }（段落和表格⾥的⽂字尺⼨为9号字）效果完全等效于：p { font-size: 9pt } table { font-size: 9pt } 3. 类选择符⽤类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在⾃定类的名称前⾯加⼀个点号。

Css选择器命名规则

操作系统版本：Windows 7浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器：所有浏览器.经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。

它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。

由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。

关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节二、差异及可能产生的问题在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。

除此之外，没有相关的说明。

那么各浏览器下的表现是否遵循这一规则呢？请观察如下代码：12 3 4 5 6 7 8 9 1 0 1 1 1 2 div{width:160px;height:20px;font-size:12px;line-height: 20px;background- color:yellow;}.f-1_f_{background-color:#d4d4d4;}.1{background-color:#A8A8A8;}.123456{background-color:#d4d4d4;}.2demo{background-color:#A8A8A8;}.2-demo {background-color:#d4d4d4;}.2_demo {background-color:#A8A8A8;}13 14 15 16 17 18 19 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 .-demo{background-color:#d4d4d4;}.-2demo {background-color:#A8A8A8;} ._demo {background-color:#d4d4d4;} ._2demo {background-color:#A8A8A8;} .-{background-color:#d4d4d4;}.---{background-color:#A8A8A8;}._{background-color:#d4d4d4;} .——{background-color:#A8A8A8;}._-{background-color:#d4d4d4;}.-_{background-color:#A8A8A8;}.-{background-color:#d4d4d4;}.---_{background-color:#A8A8A8;}.---123{background-color:#d4d4d4;} .__123{background-color:#A8A8A8;}3536373839441421 23 45 67 89 1011 1213 1415 1617 1819 20<div class ="f-1_f_">字母开头</div ><div class ="1">单个数字</div ><div class ="123456">多个数字</div > <div class ="2demo">数字开头 + [a-z][A-Z]</div > <div class ="2-demo">数字 + "-" 开头</div > <div class ="2_demo">数字 + "_" 开头</div > <div class ="-demo">连字符(-)开头 + [a-z][A-Z]</div > <div class ="-2demo">连字符(-) + 数字开头</div > <div class ="_demo">下划线(_)开头 + [a-z][A-Z]</div > <div class ="_2demo">下划线(_) + 数字开头</div > <div class ="-">单个连字符(-)</div > <div class ="---">多个连字符(-)</div > <div class ="_">单个下划线(_)</div ><div class =" ">多个下划线(_)</div ><div class="_-">下划线(_) + 连字符(-)</div><div class="-_">连字符(-) + 下划线(_)</div><div class=" -">多个下划线(_) + 连字符(-)</div> <div class="---_">多个连字符(-) + 下划线(_)</div><div class="---123">多个连字符(-) + 数字</div><div class=" 123">多个下划线(_) + 数字</div>看看各浏览器下面的结果观察上表，分析各浏览器下的表现，总结如下从上面看到，我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。

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样式表
CSS样式表又称层叠样式表；
一、单位:em(字体或者font-size的高度)；
二、css语法：css允许多次将一条规则赋予同一个元素，我们称之为竞争规则；
一个选择器可以有多个类或者是ID或者是类和ID都有，这样的话就有优先级的区别了，只有这样才有另一种效果；
上面的代码就很好的解释了这个优先级的效果；
三、I
D选择符在简化层叠后可覆盖所有的类、属性、伪类、元素和通配选择符；
HTML设计模式
四、选择符：选择符有很多种，其中有一类是表示一个段落的属性的，例如
p:first-letter{},p:first-line{};。

CSS样式命名规范

</div>
/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
/search.asp?SearchContent=%E6%96%87%E6%A1%A3%E7%B1%BB%E5%9E%8B&searchType=title
2. 指定语言及字符集：
为文档指定语言：
<html xmlns=”/1999/xhtml” lang=”en”>
过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
overflow:hidden;
}
两个不同类的属性值有重复之处，刚可以缩写为：
#mainMenu,#subMenu {
background:url(../images/bg.gif);
border:1px solid #333;
width:100%;
overflow:hidden;
CSS样式命名规范
一．文件命名规范
全局样式：global.css；

class与id命名规则

采用英文字母、数字以及”-“命名，以小写字母开头，不能以数字和”-“开头1. .123abc{} 1. .icon{}2. .-abc{} 2. .icon01{}3. .ABC{} 3. .iconText{}4. .ABCabc{} 4. .moz-class{}×√采用以下几种命名格式1. /* 一个单词，采用全部小写方式*/{}2. .wrapper{}3. .sidebar{}4. /* 多个单词，采用驼峰写法*/{}5. .topBar{}6. .floatBox{}7. /* 使用前缀，采用”-“连接符*/{}8. .goodsShowTitle{} /* 驼峰写法*/9. .gs-title{} /* 使用连接符*/命名要考虙复用,且符合语义化,要根据功能来命名,不要以表现来命名1. .boxLeft{}/* 侧边栏 */ 1. .sidebar{}/* 侧边栏 */2. .navLeft{}/* 侧导航 */ 2. .navSide{}/* 侧导航 */×√常用功能命名如下：一个id在一个页面中,只能出现一次,不能出现多个同名id预防命名冲突( 添加名称前缀可以有效的预防命名冲突，针对某个功能模块添加前缀，比如，热门搜索模块的列表表头、内容、标题等等)1. .header{}/* 可能所有页面都有 */ 1. .hotSearch-header{}2. .content{}/* 可能所有页面都有 */ 2. .hostSearch-content{}3. .title{}/* 可能所有页面都有 */ 3. .hotSearch-title{}×√命名尽量简短，但要保留基本语义，要能看懂。

css-百度百科

CSS添加义项设置这是一个多义词，请在下列义项中选择浏览1. 1.层叠样式表2. 2.美国中央安全局3. 3.内容扰乱系统4. 4.反恐精英：起源5. 5.内容服务交换器6. 6.集群同步服务1.层叠样式表编辑本义项目录简介CSS的各个版本CSS历史使用CSS布局的优点感性体验CSS如何将样式表加入到网页CSS的语法:浏览器兼容性简介CSS的各个版本CSS历史使用CSS布局的优点感性体验CSS如何将样式表加入到网页CSS的语法:浏览器兼容性∙CSS设计网页的经验∙CSS Hack 汇总快查∙Xhtml+css的结构∙CSS的限制∙学好CSS的流程展开编辑本段简介CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。

通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。

页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。

将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。

编辑本段CSS的各个版本CSS有各种版本（即Level），所以知道要使用哪个版本是很重要的。

CSS 1 在1996年末成为推荐标准，其中包含非常基本的属性，比如字体，颜色、空白边。

CSS2 在此基础上添加了高级概念（比如浮动和定位）以及高级的选择器（比如子选择器、相邻同胞选择器和通用选择器）。

在编写本书时，CSS2仍然是CSS 的最新版本，尽管它早在1998年就已经成为推荐标准。

万维网联盟（W3C）的行动非常缓慢，所以尽管CSS3的开发工作在新千年开始之前就开始了，但是距离最终的发布还有相当长的路要走，为提高开发和浏览器实现的速度，CSS3被分割成模块，这些模块可以独立发布和实现。

CSS3包含一些令人兴奋的新特性，包括一个用于多列布局的模块，但是，选择器模块最接近于完成，可能在2006年成为推荐标准。

DIV+CSS命名规范

DIV+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、u1.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(如购物车，收银台)当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML 中重复使用调用。

css id命名规则

css id命名规则
CSS ID的命名规则遵循以下几点：
1. 必须以字母开头：ID名称必须以字母（A-Z或a-z）作为开头。

2. 可以包含字母、数字和破折号：ID名称可以包含字母、数字以及破折号（-），但不能包含空格或其他特殊字符。

3. 区分大小写：CSS ID是区分大小写的，因此"idName"和"IDName"会被视为不同的ID。

4. 唯一性：每个ID在同一个HTML文档中必须是唯一的。

不同的元素可以有相同的类名(class)，但不能有相同的ID。

示例：
合法的ID名称：#my-element, #header, #nav-bar, #top-section3
非法的ID名称：#123abc（以数字开头），#my element（包含空格）
请注意，在为ID选择名称时，最好选择具有描述性的名称，以便于
代码维护和阅读。

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 id 用法

css id 用法
CSS id用于标识HTML元素，并为其指定唯一的样式。

id选择器始终以"#"字符开始，后跟标识符（通常是元素的id属性的值），例如：css#my-element { color: red; font-size: 20px;}#header { background-color: blue; height: 100px;}在上面的示例中，`#my-element`选择符将应用红色文本颜色和20像素的字号样式到id为"my-element"的元素上。

同样，`#header`选择符将为id为"header"的元素应用蓝色背景颜色和高度为100像素的样式。

在HTML 中，id属性可用于唯一标识特定元素，如下所示：html<div id="my-element">这是一个示例div元素</div><header id="header">这是一个页眉</header>通过将CSS中的id选择器与HTML中的相应元素的id属性相匹配，可以将样式应用到特定的元素上。

请注意，id应该是唯一的，即在同一HTML文档中不能有相同的id值。