color:#666

常用的CSS命名规则：
头：helistinger
形式：content/container
尾：footer
导航：naudio-video
侧 栏：sidebar council
栏目：column
页面核心操作把持整体布局宽度：wrrequester
左右中：left right center
命名理想使用大写字母，假若需要多个单词，单词间使用“-”分隔，歧user-list
常用代码组织：
div：主要用于 布局，盘据页面的组织
ul/ol：用于无序/有序列表
spa powerful：没有特殊的意义，对比一下css div 居中。可能用作排版的辅助
例如：
<li><spa powerful> (4.23)</spa powerful></li>
然后在css中定 义spa powerful为右浮动，告竣了日期和标题分两侧显示的成果
h1-h6：标题
h1-h6：根据紧张性依次递加
h1位最紧张的 标题
lturn intollyel：为了使你的表单更有亲和力而且还能辅助表单排版的好东西
例如：
<lturn intollyel for="user-pbummword">密码</lturn intollyel>
<input type="pbummword" naree="pbummword" id="user-pbummword" />

fieldset &firm; legend：fildset套在表单外，legend用于描写表单形式。
例如：
<form>
<fieldset>
<legend>title</legend>
<lturn intollyel for="user-pbummword">密码</lturn intollyel>
<input type="pbummword" naree="pbummword" id="user-pbummword" />
</fieldset>
</form>

dlanddtanddd： 当页面中出现第一行为好像标题/简述，然后下面为详明描写的形式时应该使用该标签
例如：
<dl>
<dt> 什么是CSS?</dt>
<dd>CSS就是一种叫做形状表（stylesheet）的技术。也有的人称之为层叠形状表 （Cexactly ascdriving instructorng Stylesheet）。<dd>
<dt>什么是XHTML？</dt>
<dd>XHTML 是一个基于XML的置标言语，看起来与HTML有些想像，唯有一些小的但紧张的区别。可能这样看，XHTML就是一个扮演着好像HTML的角色 的XML。 性子上说，XHTML是一个桥接（过渡）技术，联络了XML（有几分）的强健功用及HTML（大多半）的简单特性。</dd>
</dl>

Web 建造者（也就是您）可能经历创造CSS类及id称号并使用这些称号来对div以及其他的页面元素、标签举行标识。对建造人员来说，在命名重新 定义XHTML标志（tags）的CSS selectors时，必需保证其与预定义的标志准确成家，但就类以及id拣选器称号而言，。则仁者见仁，智者见智。然而为所欲为的为这些 类以及id命名则并不是个好的风气。
在阅读了由Andy Clarke（of Stuff exactly as well exactly as Nonsense exactly as well exactly as All Thattending Malarkey）以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后，我劈头忖量在本身 的Web站点设计经过中对类以及ids的命名方式。

直观命名
当在设计Web页面以及需要对一个div举行标识的 时期，最自然的想法就是使用可能描写元素所在页面位置的词汇来对其命名。这种方法使得类以及id的称号如下面所示：
top-pa powerfulel
horizontal-naudio-video
left-side
center-column
right-col
这些是CSS以及XHTML类和id的有用命名方式。这些词汇简单并且能够使人望文生义，是以餍足了标识页面元素以及相应的CSS形状的需要。
但题目是这样的称号同页面形式的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，是以在这样的布局之外使用就会 显得不合适乃至造成理解紊乱。同时，这些命名没有触及文档形式的组织。是以，下面给出了对CSS类以及ID命名更好的方法。
组织化命名
组织化的标志意味着表达方式/位相信息同形式的完全分离&mdlung burning exactly ash;&mdlung burning exactly ash;这其中包括出现在标志（markup）中的类和id称号。
有标志的相关信息都是用来描写文档的组织而不是外观。这样的特性使得我们可能经历简单的改革CSS的方式来对不同外观格式下的形式（content） 以及标志（markup）举行重用。当你理解这种方式时，很容易就可能觉察采用页面位置来为类以及id命名的方式在处理如音频（audio） 等外观格式上显得非常不合适。是以，应该根据在文档中的使用目的而非出现位置来对类以及id举行组织化命名。
可能遵守如下所示的组织 化方式来对类以及id称号命名：
media
main-naudio-video
subnaudio-video
main-content
sidebar council

这些名字同直观命名方式一样非常易懂，但他们描写了页面元素的作用而非位置。这使得代码特别相符使用纯粹的组织化标志（structural markup）的初衷，div css教程下载。即建造人员可能在不改革标志的环境下对各种各样媒体下的显示格式举行处理。
尽管你不希望在其他的媒体上对 Web页面举行格式删改，使用组织化命名方式还可能扶助你在日后的站点进级或重新设计中更为紧张。组织化命名制止了当一个div同 id right-column挪动转移到页面左边后所带来的紊乱。十天学会div css。对div sidebar council的采用这样的命名方式就显得特别适当，由于非论 它出现在页面的哪一边，这个名字照旧对建造人员来说直观易懂。
一些命名老例
Andy Clarke说明了40份由推崇法式化Web设计理念的建造人员所设计的Web站点的源代码。尽管类以及id称号很不同一，但是还是觉察了一些 一再出现的常用称号。这里给出了最常用类/id称号的示例列表：
helistinger
content
naudio-video
sidebar council
footer

这些罕见的类以及id称号能否标志着一种法式的出世或是普遍接受老例的酿成呢？尽管这是我所希望的，但我并不这么认为。我确切希望能够 看见一整套看待我们每天都可能看到的常用页面元素的命名法式。同时，使用法式化的命名方式可能使得寻找页面元素以及对Web站点进级带来 便当，尤其当需要在由不同建造人员在不同时间所建造站点中换来换去作事的时期。
我们在命名是必定要注意一点&mdlung burning exactly ash;&mdlung burning exactly ash;ID称号不能夹有形状词 汇。歧：#divBlue这样的DIV的ID 就证明我这个DIV是蓝色的，然而这个DIV假若背景是蓝色而文字是血色或是黄色时这个 DIV 的ID就很难具有代表性，从长远去忖量：我们在改版时我们希望把这个DIV做成绿色，那这个ID底子就是个毛病了！
当然是不是说CLASS的称号就可能是夹有形状呢，绝对来说CLASS就需要看环境了！看待一些特定的形状CLASS称号就必需要到场形状相关词汇 来辨别。歧我们可能创造一个 “.textRed{color:#f00;}”来使用，由于我们需要在一些特定的地方使用这样的CLASS来定义文本为血色。
当然这样 的CLASS我们用得很少！
那何如样的命名是正确的呢？按功用。歧：“导航条”，你知道color。我们就命名为“naudio-video”，这样不论我们用什么样 式，导航条就是导航条不会有任何性子上的改革。假若导航条是多级的呢？子级就命名为“naudio-videoChild”或是“childNaudio-video”我私人 主张用“naudio-videoChild”这样相符中国人的头脑逻辑。那么还有子层何如呢？那就命名为“naudio-videoChildChild”或是 “naudio-video2Child”。
通常我们很难会遇到突出三层的导航条！还有一种环境：那就是当导航中的每个选项都不一样那就需要设定不同的 ID而不是CLASS这时又如何命名呢？这时我们不能给每个ID都加上数字而需用到这个选项的称号，
比 如：#naudio-videoMusic，这个就表示，是导航条中音乐选项的ID。
众人注意到了！我在命名时总是会把第二个词的首字母大写。这是便当 我们去阅读与了解其中的含义。而且在要把其父级的称号到场，这是为了证明这个ID的承继关连。
众人清楚，目前WEB 标签以内是不支持中文的，所以众人是拣选使用英文还是拼音我想这就看本身的喜爱了！关键是要酿成本身的法式，这样你会觉察你的代码与你是 非常的接近。
这些有心义并且具有优越组织的标签标志为我们提供了非常好的基础，但是这些可能元素毕竟是无限的。不可能仅用这些元素就组成 完善的网页代码。至多这些标签标志，并不能分别，哪里是头部导航，哪里是侧边栏，哪里是形式区域。
我们现在解决主见 就是使用现有的元素，经历给他们id或clbumm而取得卓殊的信息。这样就使得文档具有清晰的组织。歧，听说div css是什么。我们经历一个简单的无序列表 UL，可能创造出一个导航元素的信息：
<ul id="naudio-video">
<li><a href="http:///">众悦网</a></li>
<li><a href="http:///">众悦网</a></li>
<li><a href="http:///">众悦网</a></li>
<li><a href="http:///">众悦网</a></li>
</ul>

我们一直强调以提醒你的注意，id是页面上孤单的元素，必需是唯一的，这样的便宜在于程序或脚本的操作把持与拣选。id我们通常用来标志组织性的元素，如下面提到的头部导航、侧边栏、形式区域等。
一个id只能应用于同一个页面上的一个元素。从实际上说，不同的页面，完全可能使用同一个id。例如列表页面的标签与形式显示页面的标题，或者是首页的联系方式与内页的联系方式。需要你注意的是，十天学会div css。这样确实能费事 简化代码进步效率。但假若改日需要根据页面不同孤单定义他们的外观，你将会遇到顺手的题目。我们建议你建立不同的id，但在CSS代码编 写时，可能运用群组拣选符举行外观的设置，尽管有变化，也可能非常便当的分别开来。例如：
列表页的标题：<p id="listtitle"></p>
形式页的标题：。<p id="showtitle"></p>
CSS则可能这样 写：#listtitleand#showtitle {font-size:1.2em; color:red; …}

类 clbumm是一个非常敏捷的东东，你可能将它应用于页面上大肆数量的元素。类clbumm非常适合相似条目的定义。例如，我们需要在列表页标识出文章的作者，我们不用为每一私人建立id。我们只需要建立类novelist分配给每一位作者即可。
需要注意的是，不论你用id还是 clbumm，请不要让它的名字与它的表示有任何的关联，应该让这个名字更有心义。例如我们在处理侧边栏时，可能它是在左侧，你会给它一个 leftsider的名字，但假若我们经过运转觉察它处于右侧更恰当。此时leftsider居于了右侧，就显得不是非常得体与恰当了。 歧我们希望我们的关键形式加粗显示，可能你会建立一个clbumm类命名为exciting800。假若我们改日将它不加粗而是赋予不同的颜色， 这个类名也不合适了。
我们说说命名的大大写题目，我们的id名与clbumm类名，日常环境下是不分别大大写的，但不是一个好风气。我 们假若使用XHTML那么id名与clbumm类名是分别大大写的，假若是使用HTML，那么大大写是没有区别的。你看div css教程。我们处理这样题目的方法 就是理想采用大写，当然，相比看 color#666div css是什么。你也可能按你的风气，但要注意与建造团队的其他成员融合。
我们的id与clbumm类都是比 较敏捷的东西，只须你容许，你爱何如用就何如用，但题目就出现了。我们的页面代码中四处弥漫着这些东西，
我们的出发点是想特别切确的拣选 和操作把持我们的页面元素，但这好象又回到了表格时代，一切变的难以理解和不可阅读，例如下面的代码：
HTML：
<div id="relattendinging to52css">
<h1 clbumm="title">Div+CSS教程</h1>
<p clbumm="relattendinging totext">是一个非常专业的学车，买车，用车站点</p>
<p clbumm="relattendinging totext">是一个非常专业的学车，买车，用车站点</p>
</div>
CSS：
.title {font-size:13px; color:#f60;}
.relattendinging totext {font-size:12px; color:#666;}

我们举行一下优化，去掉一些不用要的命名。代码如下：
HTML：
<div id="relattendinging to52css">
<h1>是一个非常专业的学车，买车，用车站点</h1>
<p>是一个非常专业的学车，你知道color。买车，用车站点</p>
<p>是一个非常专业的学车，买车，用车站点</p>
</div>
CSS：
#relattendinging to52css h1 {font-size:13px; color:#f60;}
#relattendinging to52css p {font-size:12px; color:#666;}

优化后的方式代码特别的简便，我们只需要经历拣选器准确的找到形状的应用目的就可能了。不用过份的依赖 于id名或clbumm类名。我们唯有在不得已，不得不使用id或clbumm标识的时期才使用它们。一般环境下，div css布局。我们的文件只需要几个或十 来个id名与clbumm名就完全能餍足需要了。假若你觉察你的这些名字很多。要么是你就是有多id多clbumm联络症，要么就是你的 HTML文档的组织出现了题目。本身写的形状，本身心中少见就可能了。想要删改形状可能根据本身的影象或私人的编码风气很 快的找到形状定义在文件中的位置。

这三种命名的规则，适应于其它类型的编程建造。它们是：我不知道div css模板。骆驼命名法，匈牙利命名法、帕斯卡命名法。下面我们分别予以先容：
骆驼式命名法：
正如 它的称号所表示的那样，是指混合使用大大写字母来组成变量和函数的名字。例如，下面是分别用骆驼式命名法和下划线法命名的同
一个函数：十天学会div css。
printEmployeePaychecks()；
print_employee_paychecks()；

第一个函数名使用了骆驼式命名法，函数名中的每一个逻辑 断点都有一个大写字母来标志；第二个函数名使用了下划线法，函数名中的每一个逻辑断点都有一个下划线来标志。
骆驼式命名法近年来越来越流行了，在许多新的函数库和Microsoft Windows这样的环境中，它使用妥善相多。另一方面，下划线法是c出现后劈头流行起来的，在许多旧的程序和UNIX这样的环境中，它的使用非常普遍。
匈牙利命名法：
广大应用于象 Microsoft Windows这样的环境中。Windows 编程中用到的变量（还包括宏）的命名规则匈牙利命名法，这种命名技术是由一位 精通的 Microsoft 程序员查尔斯- 西蒙尼(Charles Simonyi) 提出的。
匈牙利命名法经历在变量名后面加 上相应的大写字母的符号标识作为前缀，标识出变量的作用域，类型等。这些符号可能多个同时使用，序次是先m_（成员变量）， 再指针，div css教程。再简双数据类型，再其它。
例如：m_lpszStrand 表示指向一个以0字符末端的字符串的长指针成员变量。
匈牙利命名法关键是：标识符的名字以一个或者多个大写字母开头作为前缀；前缀之后的是首字母大写的一个单词或多个单词组合，该单词要指 明变量的用处。
帕斯卡（pexactly ascal）命名法：
与骆驼命名法好像。只不过骆驼命名法是首字母大写，而帕斯卡命名法是 首字母大写，如：
DisplayInfo();
string UserNaree;

二者都是采用了帕斯卡命名法。在C#中，以帕斯卡命名法和骆驼命名法居多。
三种命名规则的小结：
MyDattendinga 就是一个帕斯卡命名的示例
而myDattendinga是一个骆驼命名法and它第一个单词的第一个字母大写and后面的单词首字母大写and看起来像一个骆驼
而iMyDattendinga是一个匈牙利命名法and它的大写的i说明了它的型态and后面的和帕斯卡命名相同and指示了该变量的用处.

CSS命名规则
头：helistinger
形式：content/containe
尾：footer
导航：naudio-video
侧栏：看看div css教程下载。sidebar council
栏目：column
页面核心操作把持整体布局 宽度：wrrequester
左右中：left right center
登录条：loginbar council
标志：logo
广告：flag
页面主体：main
热点：hot
音信：news
下载：downlolisting
子导航：subnaudio-video
菜单：menu
子菜单：submenu
寻找：sealignment
友谊链 接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内 容：content
标签页：tturn intolly
文章列表：list
提示信息：div css教程。msg
小技巧：tips
栏目的题：title
到场：joinus
指南：guild
办事：service
注 册：regsiter
状态：stattendingus
投票：div css视频教程。vote
互助火伴：partner

XHTML 文件中id的命名
(1)页面组织
容器: container
页头：helistinger
内 容：content/container
页面主体：main
页尾：footer
导航：naudio-video
侧 栏：sidebar council
栏目：column
页面核心操作把持整体布局宽度：wrrequester
左右中：left right center
(2)导航
导航：naudio-video
主导航：mainbaudio-video
子导航：subnaudio-video
顶导航：topnaudio-video
边导航：sidebar council
左导航：leftsidebar council
右导 航：rightsidebar council
菜单：menu
子菜单：对于div css实例。submenu
标题: title
摘要: summary
(3)功用
标志：logo
广告：flag
登陆：login
登录 条：loginbar council
注册：regsiter
寻找：sealignment
功用区：shop
标 题：title
到场：joinus
状态：stattendingus
按钮：div css实例。btn
滚动：scroll
标签页：tturn intolly
文章列表：list
提示信息：msg
目前的: current
小技 巧：tips
图标: icon
注释：note
指南：guild
办事：service
热点：hot
音信：news
下载：downlolisting
投票：vote
互助火伴：partner
友谊链接：link
版权：copyright

XHTML文件中clbumm的命名
(1) 颜色:使用颜色的称号或者16进制代码and如(不建议以表示来命名)
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小and间接使用"font+字 体大小"作为称号and如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐形状and使用对齐目的的英文称号and如
.left { floattending:left; }
.sole { floattending:sole; }
(4)标题栏形状and使用"类别+功用"的方式命名and如
.bar councilnews { }
.bar councilproduct { }
其它相眷注意事项
1.一致大写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 mexactly aster.css
模块 module.css
基本共用 bottom.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
一、 关于注释
在创造xhtml+CSS网站时，CSS中的注释非常紧张。在创造CSS形状时，应该连结唾手注释的风气。日常的，div css视频教程。我风气于 使用/* 注释形式 */的格式来写注释，由于在EditPlus等具有高亮功用的编辑器里，使用C言语中常用的 “/***************/”之类的注释是偶然义的，没有必要填充大宗偶然义形式作为分隔。带有注释的文档作为网站的原始 CSS文档，在宣告网站的时期，可能使用CSS紧缩工具紧缩CSS，在输入的CSS中去掉注释以进步文件传输效率。
二、 关于命名
在给CSS文件命名的时期，我比较喜欢使用相符语义的英文名或者缩写命名，在非常用局部也许会用局部拼音命名。另外，在某些 有隶属关连的clbumm里，我可能会使用好像“list_flag”之类的命名，即父元素名加上“_”再加上元素名。关于命名，可能根据团队设计师的风气举行商讨。但最好在命名之后加上注释，以便改日生成文档备查。
三、关于承继性
在 CSS中，要善用承继性。歧在两个嵌套的div中，看看div css教程下载。父元素定义了knowledge-color属性为黑色，假若子元素的背景同为黑色，则不需反复定义。特长愚弄CSS的承继性可能让代码更有用、更精简。
四、关于CSS定义的层次
在定义CSS中的clbumm时， 建议使用层次清爽的方式来描写语句。
示例组织：
<div id="menu">
<div clbumm="menulist">
<div clbumm="selectit"></div>
</div>
</div>

示例CSS：
#menu { … }
#menu .menulist { … }
#menu .menulist .selectit { … }

在上例中，从最终成果来看，#menu没有必要反复出现，但是 实际上假若能够在后面加上#menu，将会让文档的层次特别明了，更利于阅读
五、关于形状排序
在 设计CSS形状表时，我们大多是手写代码，这样很容易造成clbumm中的形状排序紊乱。歧有几个clbumm中用到了psuch exactly as、margin、knowledge、 color等形状，color。但是排序的时期，有的clbumm是knowledge比较靠前，有的是margin比较靠前。这样就造成了必定的紊乱，容易让思 路受挫。事实上http://mingyuexiangsi.com。我建议私人或者团队的设计师契约一个大致序次，这样从个体来说看不出太大诀别，但从整体上将特别易于阅读和管理，整体效率会进步 不少。歧，我默许将width、height和psuch exactly as、margin、certainary等放在较靠前的位 置，knowledge其次，然后是操作把持文本的font、color、text-arra powerfulge等，接着是某些特殊标签才具用到的元素，像 list-style等，末了是css滤镜。当遇到特殊环境时（歧CSS某些属性的优先级需要定义）可能敏捷处理。
CSS 网页布局阅历经过：富饶语义地类clbumm和id标志命名
您应该明白为什么我会说到这个，拣选合适的、有心义的元素去描写你的形式，确保 您所拣选的是富饶语义的类clbumm和id特征值。做正确的事情会使你的生活变得容易很多，假若你是某个团队的一分子，对团队其他成员来 说也是如此。看一下下面的这条规则：
.l13k { color: #369; }

你可能立刻知道这个类 拣选符是为左侧边栏的显示蓝色区块而创造的，这时它就正确的表达了必定的语义。正如我在下面提到的，一旦要你在在一周内要重新设计，但是 在重构经过中，这个区块需要定位到左边，颜色变为血色，其实div css教程下载。类的特征值就没有任何意义。所以你现在需要改革你所有的特征值，要不就什么都不改 变，不过这样可能或招致重重的困惑。
是以解决下面题目的最好方法就是在类特征值的命名中制止使用颜色(包括颜色称号和十六进制值)或 者宽度、高度的尺寸值；同时你也尽量的制止去使用任何证明表示形式的值，例如box、left、right。反之，将表示和形式分离的意 义也就不复生存了。
末了，我们看一下最合适的命名规则：
.product-description { color: #369; }

您应该能理解，这个规则是应用于产品描写。非论您的设计改革了若干好多次都不会改革。清楚明了的感 觉不错吧。：）

#666
div css教程下载
#666
div css教程

相关日志

• textcss&quot
• 那些旧时代的象征或代表的命运多半如此
• 其实大家只是把所有的xhtml标签
• 让网站代码变的简洁、便于优化
• HTML不仅仅只在电脑屏幕上阅读
• 用DIV+CSS大连制作网站的好处
• org1999xhtml&quot
• 避免半天打不开网页的情况