成都百度快照优化|成都百度关键词排名优化|成都SEO【思为网络】 --【思为网络】成都专业网站优化公司,公司拥有专业搜索引擎优化团队,提供网站整站优化(网站结构优化、网站内容优化、网站外部优化)、百度排名首页优化、GOOGLE优化排名
成都百度关键词排名优化--成都百度快照首页排名优化
你的位置:网站优化首页 » 网页设计制作 » 正文

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)

已有0位网友发表了一针见血的评论,你还等什么?

必填

选填

选填

记住我,下次回复时不用重新输入个人信息

必填,不填不让过哦,嘻嘻。

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关推荐