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都是浮动的：
以下为引用的内容：
<ul class="fixed">
<li><img src="images/img_01.jpg"
alt="First Thumb" /></li>
<li><img src="images/img_02.jpg"
alt="Second Thumb" />
...</li>
</ul>
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或选中元素的效果。
以下为引用的内容：
<li class="selected"><a
href="/about">About Us</a></li>
4.class=”first”, class=”last”
直到99.9% 的浏览器支持:first-child
和:last-child这两个伪类之前，
class=”first”, class=”last”用的地方还
是很多的。
5.class=”image”
平常选择图片元素一般用类似
(#container img)这样的标签选择器，
但是我这里的class=”image”是用在包
含图片的容器元素，假如你正在做一
个新闻列表，需要在新闻标题下面加
一行带图片和说明文字，并且向右浮
动，可以这样做：
以下为引用的内容：
<img src="/images/img_me.jpg"
alt="my funny face" />
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”
链接：
以下为引用的内容：
<a href="#"></a>
8.class=”one”, class=”two”,
class=”three”…
这些class用在需要区别每个子元素
的列表项，比如用移动背景图片来制
作导航菜单：
以下为引用的内容：
<ul>
<li class="one"><a
href="#">Home</a></li>
<li class="two"><a
href="#">About</a>
...</li>
</ul>
9.class=”even”, class=”odd”
用来实现隔行换样式，一般用在表格
和列表：
以下为引用的内容：
<ul>
<li class="even">Content</li>
<li class="odd">Content</li>
<li class="even">Content</li>
<li class="odd">Content</li>
</ul>
10.class=”section”
一般用在为指定内容中特定部分添
加特定的样式：
以下为引用的内容：
<div class="section">
</div>
要是就几行或几十行代码吧！就根据英文单词就行了。可是要是多了那就不好写了，有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。div+css样式表的id和class 的区别：就一句来概括, class可以定义多个值并且可以应用到多个标签上，但id只能是一个。所以就开始查一些相关的div+css样式表id和class的常用命名规则，请大家参考一下：
:
首先讲一下div+css样式表的id的常用命名规则如下表所示
当然像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）选择器：cssclass属性
在CSS里用一个点开头表示类别选择器定义，例如：
.da1 {
color:#f60;
font-size:14px ;
}
在页面中，用class="类别名"的方法调用：＜span class="da1">14px大小的字体＜/span> 这个方法比较简单灵活，可以随时根据页面需要新建和删除。但需要避免多class综合症。
四、组选择器：
当几个元素样式属性一样时，可以共同调用一个声

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。