DIV+CSS样式表命名不能随意而为，否则以后进行维护时困难很大。如同软件开发中对类名的仔细处理一样，DIV+CSS样式表命名也需要遵循规则。

如果要是就几行或几十行代码吧！就根据英文单词就行了。可是要是多了那就不好写了，有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧，自己写的都看不出是什么意思，别说再让程序员调用这些样式了。DIV+CSS样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上，但id只能是一个。所以就开始查一些相关的DIV+CSS样式表id和class的常用命名规则，请大家参考一下：

首先讲一下DIV+CSS样式表的id的常用命名规则如下表所示:

页头	header	登录条	loginBar	标志	logo
侧栏	sideBar	广告	Banner	导航	nav
子导航	subNav	菜单	menu	子菜单	subMenu
搜索	search	滚动	scroll	页面主体	main
内容	content	标签页	tab	文章列表	list
提示信息	msg	小技巧	tips	栏目标题	title
加入	joinus	指南	guild	服务	service
热点	hot	新闻	news	下载	download
注册	regsiter	状态	status	按钮	btn
投票	vote	合作伙伴	partner	友情链接	friendLink
页脚	footer	版权	copyRight

实际上上面的DIV+CSS样式表的id命名也会经常用大小写和_来区分，比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名，比如写一个红色字体的class,可以.f_red {}(f是font 字体的缩写)。总之原则是：大小写、_、缩写，大大增强代码的可读性。

再讲一下DIV+CSS样式表的class的常用命名规则如下表所示:

外　套	wrap	主导航	mainNav	子导航	subnav
页　脚	footer	整个页面	content	页　眉	header
商　标	label	标　题	title	主导航	mainNav
边导航	sidebar	左导航	leftsideBar	右导航	rightsideBar
旗　志	logo	标　语	banner	菜单内容	menu1Content
菜单容量	menuContainer	子菜单	submenu	边导航图标	sidebarIcon
注释	note	面包屑	breadCrumb	容器	container
内容	content	搜索	search	登陆	login
功能区	shop	当前的	current

转载于:https://blog.51cto.com/furucy/202131

DIV+CSS样式表命名的规则方法相关推荐

SEO中的DIV CSS样式的命名规则
在搜索引擎优化中,对于代码的优化是一个非常重要的部分. 如果一个网页的代码非常的简捷,对于提升网站的排名那个是非常有好处的. 同样, 在CSS样式表中,合理有序的命名同样可以为整个CSS工作带来意想不 ...
引入CSS样式表的三种方法
1.行内式 <标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名> 该语法中style是标记的属性,实际上任何H ...
网页中使用CSS样式表的五种方法
一.使用STYLE属性将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: < ...
把css样式表与html网页关联的方法,Dreamweaver 教程-CSS样式表的3种关联方法
下面我们来讲讲如何为一个网页添加CSS样式. 内部样式表内部样式表需要在网页的部分定义,格式如下: 行内样式表(内嵌样式表) 它的使用方法我们在前两节也已经使用过了.行内样式表直接在标签内部定义, ...
CSS——（CSS样式规则，CSS样式表单，选择器，常用的CSS属性）
CSS(Cascading Style Sheets,层叠样式表单)是由W3C所提出,主要的用途是控制网页的外观,也就是定义网页的编排,显示,格式化及特殊效果,有部分功能与HTML重叠. 1.CSS样 ...
动态加载html 添加样式表,使页面动态加载不同CSS样式表，从而实现不同风格模板的方法...
我们在制作网页时,有时会制作多种风格模板,而想把这些模板都用起来,而又不知道方法,通过以下两种方法,你就可以实现相同网站不同CSS模板的方法. ASP.Net中利用CSS实现多界面两种方法. 方法一: ...
CSS 样式表引入方法
CSS样式表有4种引入方法,分别为行内式.内嵌式.外链式.导入式,具体介绍如下: 1.行内式行内式也被称为内联样式,语法格式如下: <标签名 style="属性1:属性值1:属性2: ...
div html表格样式设置字体大小,css样式表中如何修改字体大小为18px？
css样式表中如何修改字体大小为18px?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css样式表中如何修改字体大小为18px? 在css样式表中可以 ...
HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...

DIV+CSS样式表命名的规则方法

DIV+CSS样式表命名不能随意而为，否则以后进行维护时困难很大。如同软件开发中对类名的仔细处理一样，DIV+CSS样式表命名也需要遵循规则。

DIV+CSS样式表命名的规则方法相关推荐

最新文章

热门文章