本篇内容介绍了“DIV+CSS的命名规则介绍”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
你对DIV+CSS命名规则是否了解，这里和大家分享一下，首先看一下常用代码结构，div：主要用于布局，分割页面的结构；ul/ol：用于无序/有序列表。
DIV+CSS命名规则
常用代码结构：
div：主要用于布局，分割页面的结构
ul/ol：用于无序/有序列表
span：没有特殊的意义，可以用作排版的辅助，例如：
(4.23)隐居豆腐店
然后在css中定义span为右浮动，实现了日期和标题分两侧显示的效果
h2-h7：标题
h2-h7 根据重要性依次递减
h2位最重要的标题
◆label：为了使你的表单更有亲和力而且还能辅助表单排版的好东西，例如：
<label for="user-password">密 码label> <input type="password" name="password" id="user-password" />◆fieldset & legend：fildset套在表单外，legend用于描述表单内容。例如：
<form> <fieldset> <legend>titlelegend> <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}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字
(二)注释的写法:
内容区
(三)id的命名:
(1)页面结构
容器:container页头：header内容：content/container
页面主体：main页尾：footer导航：nav
侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper
左右中：leftrightcenter
(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版权：copyrigh。t
(四)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)
“DIV+CSS的命名规则介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
