DIV CSS命名规范/DIV+CSS命名规则-DIV CSS命名规则

2010-7-5 0:0:0 | 作者：sw996 | 0个评论 | 人浏览

div css命名规范,div css 命名,div css规则整理,css命名规则,css样式命名规则

什么是DIV+CSS 网页重构?

　　DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

　　CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

　　HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language http://www.seoyouhua.net/）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。说了这么多，现在该说正题了——CSS。其实CSS单独使用除了麻烦一点之外，我个人觉得并无明显的优于HTML的好处。而关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）——但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。说了这么多，其实，个中真谛，还得使用过后才知道，所以，现在就开始学习使用吧。

　　DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

　　在可以预计的将来，table的地位依然十分重要，于是，如google之流依然会生意兴隆。但是div代表的是网络世界发展的方向。它们一个简单，一个先进，萝卜白菜，您选什么都是有可取只处的．我们都很按您的要求认真服务的！

　　div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离.

　　div 是标签 css是层叠样式表

　　DIV+CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。

常用代码结构：

div：主要用于布局，分割页面的结构

ul/ol：用于无序/有序列表

span：没有特殊的意义，可以用作排版的辅助，例如：

<li><span>(4.23)</span>隐居豆腐店</li>

然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果

h1-h6：标题

h1-h6 根据重要性依次递减

h1位最重要的标题

label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：

<label for="user-password">密　码</label>

<input type="password" name="password" id="user-password" />

fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：

<form>

<fieldset>

<legend>title</legend>

<label for="user-password">密　码</label>

<input type="password" name="password" id="user-password" />

</fieldset>

</form>

dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，例如：

<dl>

<dt>什么是CSS?</dt>

<dd>CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（Cascading Stylesheet）。<dd>

<dt>什么是XHTML？</dt>

< dd>XHTML是一个基于XML的置标语言，看起来与HTML有些想像，只有一些小的但重要的区别。可以这样看，XHTML就是一个扮演着类似 HTML的角色的XML。本质上说，XHTML是一个桥接（过渡）技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。</dd>

</dl>

C #content

S #subcol

M #maincol

X #xcol

这是纵向布局的XHTML结构，c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名：

根据w3c网站上给出的,最好是用意义命名

比如：是重要的新闻高亮显示（像红色）

有两种

.red{color:red}

.important-news{color:red}

很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

常用的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

DIV排版的核心：即CSS盒子模式

CSS 每个div盒子模式包括：内容(content)、填充(padding)、边框(border)、边界(margin)

本文来自: 成都百度快照优化|成都百度关键词排名优化|成都SEO【思为网络】，转载请保留出处！欢迎发表您的评论

相关标签：

相关推荐