常用的CSS命名规则.doc

CSS的class、id、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标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner(二)注释的写法:/* Footer */内容区/* End Footer */(三)id的命名:(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(四)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 注意事项:1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.主要的 master.css模块 module.css基本共用 base.css布局，版面 layout.css主题 themes.css专栏 columns.css文字 font.css表单 forms.css补丁 mend.css打印 print.css CSS文件中class或id起名规则：1） 开头字母一律小写2） 尽量不要用缩写英文除非可以一目了然的3） 如果遇到相差不大class或者id，主功能识别字母在前，位置识别字母在后，位置识别字母第一个可大写（如：navTop，menuLeft）4） 必须使用英文开头css文件内容注释写法：Css文件内容注释统一采用：/*注释内容*/css文件存放位置：所有css文件统一存放，例如在根目录下的style目录下 。10个最常用的CSS className很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。1.class=”fixed”fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下以下为引用的内容：.fixed:after content:.; display:block; height:0; clear:both; visibility:hidden; .fixed display:block; /* */.fixed min-height:1%; * html .fixed height:1%; 这个样式就可以用在下面的情形，每个li都是浮动的：以下为引用的内容： . 2.class=”alt”alt是”alternative”（交替）的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样：以下为引用的内容： #content img float:left; display:inline; margin-right:10px; border:1px solid #ccc; padding:1em 0; background:#fff; #content img.alt float:right; margin-right:0; margin-left:10px; 3.class=”selected”这个最经常用的，用来处理mouseover或选中元素的效果。以下为引用的内容：About Us 4.class=”first”, class=”last” 直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前，class=”first”, class=”last”用的地方还是很多的。5.class=”image”平常选择图片元素一般用类似(#container img)这样的标签选择器，但是我这里的class=”image”是用在包含图片的容器元素，假如你正在做一个新闻列表，需要在新闻标题下面加一行带图片和说明文字，并且向右浮动，可以这样做：以下为引用的内容： This is me trying to look cool! The rest of the content here . 6. class=”inner”inner也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式（比如制作双背景图片效果）：7.class=”link”link跟image类似，我用来嵌套一个A标签，最经常用来制作”Read More”链接：以下为引用的内容：Read more. 8.class=”one”, class=”two”, class=”three” 这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单：以下为引用的内容： Home About . 9.class=”even”, class=”odd”用来实现隔行换样式，一般用在表格和列表：以下为引用的内容： Content Content Content Content 10.class=”section”一般用在为指定内容中特定部分添加特定的样式：以下为引用的内容： content here. 要是就几行或几十行代码吧！就根据英文单词就行了。可是要是多了那就不好写了，有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。div+css样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上，但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下： 首先讲一下div+css样式表的id的常用命名规则如下表所示:实际上上面的div+css样式表的id命名也会经常用大小写和_来区分，比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用类型+变量名称的规则来命名，比如写一个红色字体的class,可以.f_red (f是font 字体的缩写)。总之原则是：大小写、_、缩写，大大增强代码的可读性。当然像div+css样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的div+css样式表的id和class的命名规则的话,请留言，多多指教. CSS最常用的五类选择器转载准确而简洁的运用CSS选择器会达到非常好的效果。不必通篇给每一个元素定义类（class）或ID，通过合适的组织，可以用最简单的方法实现同样的效果。在实际工作中，最常用的选择器有以下五类：一、标签选择器：顾名思议，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。如：p font:12px;em color:blue;dl float:left; margin-top:10px;二、id选择器：我们通常给页面元素定义id。例如定义一个层 div id=menubar/div 然后在样式表里这样定义：#menubar margin:0 auto;background:#ccc;color:#c00;其中menubar是你自己定义的id名称。注意在前面加#号。id选择器也同样支持后代选择器，例如： #menubar p text-align:center; line-height:20px; 这个方法主要用来定义层和那些比较复杂，有多个“唯一后代”的元素。三、类（class）选择器：在CSS里用一个点开头表示类别选择器定义，例如：.da1 color:#f60;font-size:14px ;在页面中，用class=类别名的方法调用： span class=da114px大小的字体/span 这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免多class综合症。四、群组选择器：当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：p, td, li line-height:20px;color:#c00;#main p, #sider span color:#000;line-height:26px;.www_52css_com,#main p span color:#f60;.text1 h1,#sider h3,.art_title h2 font-weight:100;使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。五、后代选择器：后代选择器也叫派生选择器。可以使用后代选择器给一个元素里的子元素定义样式，例如这样：li strong font-style:italic;font-weight:800;color:#f00;#main p color:#000;line-height:26px;#sider .con span color:#000;line-height:26px;.www_52css_com p span color:#f60;#sider ul li.subnav1 margin-top:5px;第一段，就是给li下面的子元素strong定义一个斜体加粗而且套红的样式。其他以此类推。后代选择器的使用是非常有益的，如果父元素内包括的HTML元素具有唯一性，则不必给内部元素再指定class或id，直接应用此选择器即可，例如下面的h3与ul就不必指定class或id。div id=siderh3/h3ulli./lili./lili./li/ul/div在这里CSS就可以及样写：#sider h3 .#sider ul .#sider ul li .结合使用上面的四种CSS选择器，基本满足了CSS布局的需要，主要在于灵活的使用，特别是后代选择器的使用能大大的简化HTML文档，使HTML做到结构化明确，最小的代码实现同样的效果。CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active。