CSS的使用及命名原则

2022-09-11

随着网页制作技术的发展, CSS越来越被广大技术人员运用。CSS就是Cascading Style Sheets, 中文翻译为“层叠样式表”, 简称样式表。它是一种制作网页的常用技术, 能将网页格式控制和内容结构控制分割开来, 减少网页代码, 提高网页的维护更新效率, 实现丰富的网页效果, 本文主要介绍样式表的使用及命名原则。

1 样式表的基本格式及添加方式

1.1 样式表的基本格式

CSS的每条定义都是由三个部分组成的:选择符 (Selector) 、属性 (property) 和属性取值 (value) 。基本格式如下:

(1) Selector:可以是HTML的tag, 例如P、BODY、A等。

(2) Property:就是指选择符中要修改的属性。

(3) Value:相应属性的取值。

1.2 添加层叠样式表的方法

1.2.1 内联样式

内联样式可称为局部样式。内联样式是混合在HTML标识里使用的, 在标签中加入style属性, 后面跟一些属性及属性的值, 如

test

。

由于内联样式只影响被定义的标签, 具有局部性, 在每个需要样式的标签中都要进行定义, 大量使用style属性会显著增加文档大小, 使代码变得难以维护, 所以尽量少用。

1.2.2 整页套用样式

将所有样式定义集中起来放在HTML文档

之间, 使用 <style type="text/css"> </style>将其包含起来。如:

这种样式表只能在HTML文档中定义与使用, 每个HTML文档内都需要单独定义一套样式规则, 不利于样式的重用, 维护起来也相对麻烦, 不宜大量使用。

1.2.3 样式文件的引入

样式文件的引入又称为链入外部样式表, 样式表文件的引入只用通过在html的

标识之间写下列语句。

这样就可以通过这一段代码来引用CSS文件夹下css1.css样式表文件。

1.2.4 样式表的导入

导入外部样式表的方法是指在页面的

区里的内部样式表标记 <style type="text/css">里用@import导入一个外部样式表, 代码如下:

这样就可以通过这一段代码来引用来对CSS文件夹下css1.css样式表进行引用。通过导入入css1.css外部样式表, 我们就可以在HTML文档中任意使用css1.css中定义的样式。这种样式表维护起来是最方便的, 也显著减少了HTML文档大小, 使得网页的下载速度更快。

2 CSS的命名

2.1 CSS的命名原则

CSS的命名原则很重要, 我们选择合适的、有意义的元素去描述你的内容, 确保您所选择的是富有语义的类class和id特征值。

(1) 颜色:使用颜色的名称或者16进制代码, 如 (不建议以表现来命名)

(2) 字体大小, 直接使用“font+字体大小”作为名称, 如

(3) 对齐样式, 使用对齐目标的英文名称, 如

(4) 标题栏样式, 使用“类别+功能”的方式命名, 如

2.2 CSS命名的方法

(1) 骆驼式命名法:

正如它的名称所表示的那样, 是指混合使用大小写字母来构成变量和函数的名字。例如, 下面是分别用骆驼式命名法命名一个id选择符:

这段代码使用了骆驼式命名法, 函数名中的每一个逻辑断点都有一个大写字母来标记。

(2) 匈牙利命名法:

匈牙利命名法由一位能干的Microsoft程序员查尔斯-西蒙尼 (Charles Simonyi) 提出的。

匈牙利命名法关键是:标识符的名字以一个或者多个小写字母开头作为前缀;前缀之后的是首字母大写的一个单词或多个单词组合, 该单词要指明该选择符的用途。

例如:#m_redcolor{color:red;}。

(3) 帕斯卡命名法:

与骆驼命名法类似。只不过骆驼命名法是首字母小写, 而帕斯卡命名法是首字母大写, 如:

这三种命名方法很容易掌握, 以下是对这三种命名规则的小结:

#MyData就是一个帕斯卡命名的示例。

而#myData是一个骆驼命名法, 它第一个单词的第一个字母小写, 后面的单词首字母大写, 看起来像一个骆驼。

而#i_MyData是一个匈牙利命名法。

3 常用的CSS名字

以下是一些常用的CSS选择符的名称把它归类如下, 如果在每一个网站上都用这些选择符的话就很容易对自己网站的CSS代码进行维护。

3.1 页面结构

容器:container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

3.2 导航

导航:nav

主导航:mainbav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题:title

摘要:summary

3.3 功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

按钮:btn

滚动:scroll

标签页:tab

文章列表:list

提示信息:msg

当前的:current

小技巧:tips

图标:icon

注释:note

指南:guild

服务:service

热点:hot

新闻:news

下载:download

投票:vote

合作伙伴:partner

友情链接:link

版权:copyright

4 结语

本文介绍了CSS的格式、样式表的添加方法、以及对CSS命名的一些看法, 随着CSS开发的不断深入, 命名是否规范直接影响了开发的速度和效率, 因此在最初的阶段就应该把命名作为一件很重要的事情看待, 一定要让CSS的命名规范化, 系统化, 这样不仅会给自己带来方便, 也会让其他的维护人员很容易上手, 对CSS命名的理解可以看出一个开发人员对CSS的认识深度, 因此, 在这方面一定要多多注意。

</style>

摘要：本文首先介绍了样式表的基本格式, 添加层叠样式表的方法, 然后介绍了样式表的命名原则和三种CSS命名方法, 最后对CSS样式表常用的命名进行了举例。

关键词：CSS,命名,方法