前端开发必备的CSS命名规范与常用CSS代码集合

Posted web前端开发

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发必备的CSS命名规范与常用CSS代码集合相关的知识,希望对你有一定的参考价值。

编辑 | web前端开发

来源 | web前端开发


我们在用html+css进行网页的排版布局时,经常会遇到CSS命名,如果是在团队多人协作开发时,团队里都会有自己的命名规范与要求。

但如果是自己在个人学习的时候,又特别不了解应该怎么对CSS命名的话,我今天把自己之前学习的一些资料重新整理了一份CSS命名规范,方便自己与大家学习查阅使用。

虽然说,命名没有什么特别要求,但是为了体现一个人技术素养,我建议大家还是按照以下常规规范来。

一、规则说明

1)、所有的命名最好采用一种命名规范,比方全部小写或者驼峰命名

2)、属性的值一定要用双引号("")括起来,且一定要有值,例如class="web",id="web"

3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整

4)、表现与结构一定分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等

5)、<h1>到<h6>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。

6)、给每一个表格和表单加上一个唯一的、结构标记id,给图片加上alt标签

7)、尽量使用英文命名原则,尽量不缩写,除非一看就明白的单词

二、CSS命名规则参考表

CSS样式命名 说明
#wrapper 页面外围控制整体布局宽度
#container或#content 容器,用于最外层
#layout 布局
#head, #header 页头部分
#foot, #footer 页脚部分
#nav 主导航
#subnav 二级导航
#menu 菜单
#submenu 子菜单
#sideBar 侧栏
#sidebar_a, #sidebar_b 左边栏或右边栏
#main 页面主体
#tag 标签
#msg #message 提示信息
#tips 小技巧
#vote 投票
#friendlink 友情连接
#title 标题
#summary 摘要
#loginbar 登录条
#searchInput 搜索输入框
#hot 热门热点
#search 搜索
#search_output 搜索输出和搜索结果相似
#searchBar 搜索条
#search_results 搜索结果
#copyright 版权信息
#branding 商标
#logo 网站LOGO标志
#siteinfo 网站信息
#siteinfoLegal 法律声明
#siteinfoCredits 信誉
#joinus 加入我们
#partner 合作伙伴
#service 服务
#regsiter 注册
arr/arrow 箭头
#guild 指南
#sitemap 网站地图
#list 列表
#homepage 首页
#subpage 二级页面子页面
#tool, #toolbar 工具条
#drop 下拉
#dorpmenu 下拉菜单
#status 状态
#scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)
.products 产品
.products_prices 产品价格
.products_description 产品描述
.products_review 产品评论
.editor_review 编辑评论
.news_release 最新产品
.publisher 生产商
.screenshot 缩略图
.faqs 常见问题
.keyword 关键词
.blog 博客
.forum 论坛


CSS文件命名 说明
master.css,style.css 主要的
module.css 模块
base.css 基本共用
layout.css 布局,版面
themes.css 主题
columns.css 专栏
font.css 文字、字体
forms.css 表单
mend.css 补丁
print.css 打印

三、借助翻译工具

如果遇到不常用的一些名称,可以借助翻译工具进行翻译取其英文命名。平时我用的比较多的就是有道翻译或者谷歌在线翻译。

谷歌在线翻译:http://translate.google.cn/

有道在线翻译:http://fanyi.youdao.com/

我们为了规范命名最好使用英文命名,通常命名与自己布局内容相符。

四、常用CSS代码

css的属性虽然很多,但是我们经常使用的属性,真的不多的,这个也是我自己之前收集整理的一些CSS常用属性代码,希望可以帮助到一些新人,对于老司机就忽略吧。


字体属性:(font)

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位:PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体:(font-family)

"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana


背景属性:(background)

色彩 {background-color: #FFFFFF;}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/

区块属性:(Block) /*这个属性第一次认识,要多多研究*/

字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进 {text-indent: 数值px;}

垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/


方框属性:(Box)

width:; height:; float:; clear:both; margin:; padding:;     

顺序:上右下左

边框属性:(Border)

border-style: dotted;(点线) dashed;(虚线) solid(实线); double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

border-width:; 边框宽度

border-color:#;

简写方法border:width style color; /*简写*/

列表属性:(List-style)

类型list-style-type:    disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像list-style-image: url(..);

定位属性:(Position)

Position: absolute; relative; static;

visibility: inherit; visible; hidden;

overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)


CSS文字属性

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/  

font-size : 9pt; /*文字大小*/  

font-style:itelic; /*文字斜体*/  

font-variant:small-caps; /*小字体*/  

letter-spacing : 1pt; /*字间距离*/  

line-height : 200%; /*设置行高*/  

font-weight:bold; /*文字粗体*/  

vertical-align:sub; /*下标字*/  

vertical-align:super; /*上标字*/  

text-decoration:line-through; /*加删除线*/  

text-decoration: overline; /*加顶线*/  

text-decoration:underline; /*加下划线*/  

text-decoration:none; /*删除链接下划线*/  

text-transform : capitalize; /*首字大写*/  

text-transform : uppercase; /*英文大写*/  

text-transform : lowercase; /*英文小写*/  

text-align:right; /*文字右对齐*/  

text-align:left; /*文字左对齐*/  

text-align:center; /*文字居中对齐*/  

text-align:justify; /*文字分散对齐*/  

vertical-align属性

vertical-align:top; /*垂直向上对齐*/  

vertical-align:bottom; /*垂直向下对齐*/  

vertical-align:middle; /*垂直居中对齐*/  

vertical-align:text-top; /*文字垂直向上对齐*/  

vertical-align:text-bottom; /*文字垂直向下对齐*/  


边框空白

padding-top:10px; /*上边框留空白*/  

padding-right:10px; /*右边框留空白*/  

padding-bottom:10px; /*下边框留空白*/  

padding-left:10px; /*左边框留空白


符号属性

list-style-type:none; /*不编号*/  

list-style-type:decimal; /*阿拉伯数字*/  

list-style-type:lower-roman; /*小写罗马数字*/  

list-style-type:upper-roman; /*大写罗马数字*/  

list-style-type:lower-alpha; /*小写英文字母*/  

list-style-type:upper-alpha; /*大写英文字母*/  

list-style-type:disc; /*实心圆形符号*/  

list-style-type:circle; /*空心圆形符号*/  

list-style-type:square; /*实心方形符号*/  

list-style-image:url(/dot.gif); /*图片式符号*/  

list-style-position: outside; /*凸排*/  

list-style-position:inside; /*缩进*/  


背景样式

background-color:#F5E2EC; /*背景颜色*/  

background:transparent; /*透视背景*/  

background-image : url(/image/bg.gif); /*背景图片*/  

background-attachment : fixed; /*浮水印固定背景*/  

background-repeat : repeat; /*重复排列-网页默认*/  

background-repeat : no-repeat; /*不重复排列*/  

background-repeat : repeat-x; /*在x轴重复排列*/  

background-repeat : repeat-y; /*在y轴重复排列*/  


指定背景位置

background-position : 90% 90%; /*背景图片x与y轴的位置*/  

background-position : top; /*向上对齐*/  

background-position : buttom; /*向下对齐*/  

background-position : left; /*向左对齐*/  

background-position : right; /*向右对齐*/  

background-position : center; /*居中对齐*/  


连接属性

a /*所有超链接*/  

a:link /*超链接文字格式*/  

a:visited /*浏览过的链接文字格式*/  

a:active /*按下链接的格式*/  

a:hover /*鼠标转到链接*/  


鼠标光标样式

链接手指 CURSOR: hand  

十字体 cursor:crosshair  

箭头朝下 cursor:s-resize  

十字箭头 cursor:move  

箭头朝右 cursor:move  

加一问号 cursor:help  

箭头朝左 cursor:w-resize  

箭头朝上 cursor:n-resize  

箭头朝右上 cursor:ne-resize  

箭头朝左上 cursor:nw-resize  

文字I型 cursor:text  

箭头斜右下 cursor:se-resize  

箭头斜左下 cursor:sw-resize  

漏斗 cursor:wait  

光标图案(IE6)   p {cursor:url("光标文件名.cur"),text;}  


CSS框线一览表:

border-top : 1px solid #6699cc; /*上框线*/  

border-bottom : 1px solid #6699cc; /*下框线*/  

border-left : 1px solid #6699cc; /*左框线*/  

border-right : 1px solid #6699cc; /*右框线*/  

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/  

border-top-width :1px /*设置上框线top宽度*/  

border-top-style : solid/*设置上框线top样式*/  


其他框线样式

solid /*实线框*/  

dotted /*虚线框*/  

double /*双线框*/  

groove /*立体内凸框*/  

ridge /*立体浮雕框*/  

inset /*凹框*/  

outset /*凸框*/  


CSS边界样式

margin-top:10px; /*上边界*/  

margin-right:10px; /*右边界值*/  

margin-bottom:10px; /*下边界值*/  

margin-left:10px; /*左边界值*/  


字体样式(Font Style)  

字体样式 {font:font-style font-variant font-weight font-size font-family} 

字体类型 {font-family:"字体1","字体2","字体3",...}  

字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}  

字体风格 {font-style:inherit|italic|normal|oblique}  

字体粗细   {font-weight:100-900|bold(粗体)|bolder(特粗)|lighter(细体)|normal(正常);}  

字体颜色   {color:数值;}  

阴影颜色 {text-shadow:16位色值}  

字体行高   {line-height:数值|inherit|normal;}  

字 间 距   {letter-spacing:数值|inherit|normal}  

单词间距 {word-spacing:数值|inherit|normal}  

字体变形 {font-variant:inherit|normal|small-cps }  

英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}  

字体变形 {font-size-adjust:inherit|none}  

字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}  


文本样式(Text Style)  

行 间 距 {line-height:数值|inherit|normal;}  

文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}  

段首空格   {text-indent:数值|inherit}  

水平对齐 {text-align:left|right|center|justify}  

垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}  

书写方式 {writing-mode:lr-tb|tb-rl}  


背景样式  

背景颜色 {background-color:数值}  

背景图片 {background-image: url(URL)|none}  

背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}  

背景固定 {background-attachment:fixed|scroll}  

背景定位 {background-position:数值|top|bottom|left|right|center}  

背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}  


框架样式(Box Style)  

边界留白: {margin:margin-top margin-right margin-bottom margin-left}  

补  白: {padding:padding-top padding-right padding-bottom padding-left}  

边框宽度: {border-width:border-top-width border-right-width border-bottom-width border-left-width}  

宽度值:thin|medium|thick|数值  

边框颜色: {border-color:数值 数值 数值 数值}  数值:分别代表top、right、bottom、left颜色值  


边框风格: 

{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove} 边  框 {border:border-width border-style color}  

上 边 框 {border-top:border-top-width border-style color}  

右 边 框 {border-right:border-right-width border-style color}  

下 边 框 {border-bottom:border-bottom-width border-style color}  

左 边 框 {border-left:border-left-width border-style color}  

宽  度 {width:长度|百分比| auto}  

高  度 {height:数值|auto}  

漂  浮 {float:left|right|none}  

清  除 {clear:none|left|right|both}  


分类列表  

控制显示 {display:none|block|inline|list-item}  

控制空白 {white-space:normal|pre|nowarp}  

符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}  

图形列表 {list-style-image:URL}  

位置列表 {list-style-position:inside|outside}  

目录列表 {list-style:目录样式类型|目录样式位置|url}  

鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}



以上是关于前端开发必备的CSS命名规范与常用CSS代码集合的主要内容,如果未能解决你的问题,请参考以下文章

前端开发教程CSS规范 CSS 的命名和书写

前端开发规范

web前端开发企业级CSS常用命名,书写规范总结

常用htmlCSSjavascript前端命名规范

前端开发代码结构及性能优化大总结

前端开发规范CSS