css样式命名的方法
精简高效的CSS命名准则方法
一、“无”的哲学佛家讲究“因果报应”，有果必有应。
此段看似与主题没有血缘关系，实际讲的是“因”。
我个人比较喜欢老子的道家思想，并喜欢以其思想解释学习与工作中遇到的一些问题。
例如我之前写过的“中国古代道家思想与网页重构的思考”一文。
老子有云：“天下万物生于有，有生于无”。
具体解释就是：天下万物都是由看得见的具体事物（“有”）产生的，而看得见的具体事物（“有”）又是由看不见的，无形无状的东西（“无”）产生的，这个看不见的“无”也就是“道”，或叫做“根”、“母”。
我们看武侠片，经常听到“无招胜有招”这句话，这也是道家“无”之思想之体现。
因为你心中没有招式，你才能有无限的可能，生成其他的招式以克敌，即所谓以不变应万变；相反，如果你心中牢记一套“华山剑法”，当你与人交手时，势必按照此套路走，要是遇到相克之剑法，结局就是一败涂地。
“无招”是一种境界，是你功夫修炼到一定程度才能领悟到的。
我们这代人应该都看过李连杰主演的《倚天屠龙记魔教教主》，其中张三丰老头教完张无忌太极拳后问他“记住了没？”张无忌一句“全忘记了！”让人印象深刻。
这就是“无”的境界。
这种境界我是深有体会的。
例如每逢大考之前，我总是把以前做过的题目全部忘掉，这样，考试时就能思如泉涌；反而是强记题目的做法限制了发挥。
这就好比发射炮弹，炮管里提前预装了重型炸蛋，结果战斗开始时，发现需要的是烟雾弹，此时，反而被预装的炸蛋给阻塞限制了。
打篮球也有这种体会，如果心中记得的是动作，我要这么走，然后这么做，往往表现不佳。
反而是脑中什么想法也没有，全靠下意识行动，那真是所向披靡，得分如探囊取物。
可见，要想发挥更大，就需要“无”，把一些“限制的东西”通通去掉。
没有限制才能发挥出最大的潜能。
站在最简单，最原始的那个点上，你才能自由驰骋，应变自如。
二、名字的本质是什么我们有没有思考过这么一个问题：名字的本质是什么？这个问题其实不难，名字本质上就是一个符号，用来区分人与人的。
css命名规范
CSS 命名规范详解由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTMl 和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范：一、CSS样式命名规范建议：用字母、“_”（下划线）、“-”号、数字组成，必须以字母开头，不能以数字开头。
为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用header，头部左边，可以用header_left或headerLeft,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box _2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。
常用id的命名：页头：header登录条：loginbar标志：logo侧栏：sidebar广告：banner导航：nav子导航：subnav菜单：menu子菜单：submenu搜索：search滚动：scroll页面主体：main内容：content显示当前所在位置：breadcrumbs 标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendlink页脚：footer版权：copyright(1)页面结构容器: container页头：header内容：content/container 页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper 左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：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版权：copyright css文件命名：主要的master.css模块module.css基本共用base.css布局，版面layout.css主题themes.css专栏columns.css文字font.css表单forms.css补丁mend.css打印print.css二、id和class的使用及区别我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>id一个页面只可以使用一次，class可以多次引用。
CSS列表样式自定义方法
CSS列表样式自定义方法CSS（层叠样式表）是一种用于定义网页布局和外观的语言。
使用CSS，我们可以更改列表的样式，以使其与网页的整体风格相匹配。
本文将介绍一些常用的CSS列表样式自定义方法。
一、使用内置列表样式CSS提供了一些内置的列表样式，包括无序列表（ul）和有序列表（ol）。
1. 无序列表样式：通过设置列表项（li）的样式（list-style-type）属性，我们可以更改无序列表的样式。
常见的样式选项包括：- none：不显示任何符号。
- disc：显示为实心圆点。
- circle：显示为空心圆点。
- square：显示为方块。
例如，可以使用以下CSS代码将无序列表的样式更改为方块：```ul {list-style-type: square;}```2. 有序列表样式：有序列表的样式可以通过设置列表项（li）的样式属性（list-style-type）进行更改。
常见的样式选项包括：- decimal：按数字顺序显示。
- lower-alpha：按小写字母顺序显示。
- upper-alpha：按大写字母顺序显示。
- lower-roman：按小写罗马数字显示。
- upper-roman：按大写罗马数字显示。
例如，可以使用以下CSS代码将有序列表的样式更改为小写字母：```ol {list-style-type: lower-alpha;}```二、使用自定义图像作为列表符号除了使用内置的列表样式外，我们还可以使用自定义图像作为列表项的符号。
这需要使用CSS的background-image属性。
1. 准备图像：首先，我们需要准备一个用作列表符号的图像，可以是PNG、JPEG或GIF格式。
确保图像的大小适合作为列表符号，并上传至服务器。
2. 设置背景图像：然后，使用CSS的background-image属性将图像设置为列表项的背景图像。
可以使用以下CSS代码来设置背景图像：```ul {list-style-image: url("path/to/image.png");}```请将"path/to/image.png"替换为实际图像文件的路径。
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（层叠样式表）是一种用于描述网页上元素的外观和样式的语言。
在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命名规范
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可以多次引用。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
例： 通用名词缩写 设置 set 成功 suc 提示 hint 操作 op 密码 pw 菜单 menu 按钮 bt 文本 tx 颜色 c 背景 bg 边框 bor
居中 center 图标 icon 弹出 pop 文本输入框 .input_tx 密码输入框 .input_pw 登录密码输入框 .input_pw_login 日志设置成功提示 .hint_suc_blogset 相册弹出的设置层 .pop_set_photo 公共提示 .hint_bg 文本颜色 .c_tx 段落文本颜色 .c_tx_p 好了，css 样式命名内容就给大家介绍到这里了。希望大家学业有成，工作 顺利
Байду номын сангаас
css 样式命名的方法
其实 css 命名规范有很多版本，看自己对哪种比较适合或者说习惯欢迎 大家在这里学习 css 样式命名!这里是我们给大家整理出来的精彩内容。 一定义 命名所选用的单词应选择不过于具体表示某一状态(如颜色、字号大小等) 的单词，以避免当状态改变时名称失去意义。 二样式规则 样式类名由以字母开头的小写字母(a-z)、数字(0-9)、下划线(_)、减号(-)组 成。 ID 名称由不以数字开头的小写字母(a-z)、数字(0-9)、下划线(_)组成。 可使用类似下面的规则: [模块前缀|类型|作用]_[名称]_[状态|位置] 约定模块、类型、状态、位置等的所使用的单词或其缩写，保持上面的顺 序，尽量保持在两到三个单词说清用途。