网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，下面就是具体DIV/CSS命名规则CSS命名大全内容篇。
我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。

一、命名规则说明

1）、所有的命名最好都小写

2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、空元素要有结束的tag或于开始的tag后加上"/"

5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7）、给每一个表格和表单加上一个唯一的、结构标记id

8）、给图片加上alt标签

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名

外套 wrap —— 用于最外层

头部 header —— 用于头部

主要内容 main —— 用于主体内容（中部）

左侧 main-left —— 左侧布局

右侧 main-right —— 右侧布局

导航条 nav —— 网页菜单导航条

内容 content —— 用于网页中部主体

底部 footer —— 用于底部

三、DIV+CSS命名参考表

以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：

网页公共命名

| ----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|列表|
|#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|打印|

CSS命名其它说明

无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

四、英文命名技巧

如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。

在线翻译工具：

百度：http://fanyi.baidu.com/

有道：http://fanyi.youdao.com/

Google：http://translate.google.cn/
以上为DIV+CSS的命名规则总结，相信通过规范的CSS命名给你以后网站网页的维护带来方便。

转自：点击进入

css引入方式

内嵌式：(写在标签里)

内联式：(写在style标签里)

外联式：(常用)

/*通过标签引入*/

导入式：(做了解)

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

CSS 子对象选择符 Child Selectors

语法：E1 > E2

说明：
选择所有作为E1子对象的E2。
目前IE5.5+尚不支持此种选择符。

示例：

        body > p { font-size:14px; }
        /* 所有作为body的子对象的p对象字体尺寸为14px */
        div ul>li p { font-size:14px; }

继承

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

body {
     font-family: Verdana, sans-serif;
     }

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

CSS 层叠次序

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中 第四条规则（内联样式） 拥有最高的优先权。

• 浏览器缺省设置
• 外部样式表
• 内部样式表（位于 标签内部）
• 内联样式（在 HTML 元素内部）

css选择器

1. id类选择器 #name（不常用）
2. class类选择器 .name（不常用）
3. 标签选择器（不常用）
4. 混合类选择器（越详细优先级越高）（常用）

CSS

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; … declarationN }

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

提示：请使用花括号来包围声明。属性大于1个之后，属性之间用分号隔开，如果值大于1个单词，则需要加上引号（p{font-family:"sans serif";}）

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

p { color: #ff0000; } 

为了节约字节，我们可以使用 CSS 的缩写形式：

p { color: #f00; } 

我们还可以通过两种方法使用 RGB 值：

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

CSS 注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:

/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}

多重声明

提示：如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红 色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上 分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：

p {text-align:center; color:red;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p 
{ 
text-align: center; 
color: black; 
font-family: arial; 
} 

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

body 
{ 
color: #000; 
background: #fff; 
margin: 0; 
padding: 0; 
font-family: Georgia, Palatino, serif; 
}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。

由于此页面给别人吐槽了一番
现文章以给筱陌吃掉啦！
想看介绍请一步

前言：

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架相关标签：

iframe

iframe：定义一个内联的iframe
iframe语法:

<iframe src="URL"></iframe>

该URL指向不同的网页。

height 和 width 属性

height 和 width 属性用来定义iframe标签的高度与宽度。
属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%").

<iframe src="index.htm" width="100%" height="80px"></iframe>

frameborder属性

frameborder 属性用于定义iframe表示是否显示边框。
设置属性值为 "0" 移除iframe的边框:

<iframe src="index.html" frameborder="0"></iframe>

target="iframe_a"属性

iframe可以显示一个目标链接的页面
目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="index.html" name="iframe_a"></iframe>
<p><a href="http://moshanghua.net" target="iframe_a">陌上花-blog</a></p>

实例：

<iframe src="index.php/" height="500px" width="100%" frameborder="0"></iframe>
<p><a href="http://moshanghua.net" target="iframe_a">moshanghua</a></p>