一、命名规则说明:

1.命名规则说明:

  • 所有的命名最好都小写
  • 属性的值一定要用双引号("")括起来,且一定要有值如class="nav",id="nav"
  • 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
  • 空元素要有结束的tag或于开始的tag后加上"/"
  • 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
  • <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
  • 给每一个表格和表单加上一个唯一的、结构标记id
  • 给图片加上alt标签
  • 尽量使用英文命名原则
  • 尽量不缩写,除非一看就明白的单词
  • 复合横杠命名法,如class="content-body"
  • 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法。
  • 为选择器分组时,将单独的选择器单独放在一行。
  • 为了代码的易读性,在每个声明块的左花括号前添加一个空格。
  • 声明块的右花括号应当单独成行。
  • 每条声明语句的 : 后应该插入一个空格。
  • 为了获得更准确的错误报告,每条声明都应该独占一行。
  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
  • 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。
  • 不要在 rgb()rgba()hsl()hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格)。
  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5-.5px 代替 -0.5px)。
  • 十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。
  • 尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff
  • 为选择器中的属性添加双引号,例如,input[type="text"]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。
  • 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;

2.相对网页外层重要部分CSS样式命名:

  • 外套 wrap ------------------用于最外层
  • 头部 header ----------------用于头部
  • 主要内容 main ------------用于主体内容(中部)
  • 左侧 main-left -------------左侧布局
  • 右侧 main-right -----------右侧布局
  • 导航条 nav -----------------网页菜单导航条
  • 内容 content ---------------用于网页中部主体
  • 底部 footer -----------------用于底部

3.DIV+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 打印

CSS命名其它说明:

DIV+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的重要的特殊的最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。

4.CSS样式文件命名如下 

  • 主要的 master.css
  • 布局,版面 layout.css
  • 专栏 columns.css
  • 文字 font.css
  • 打印样式 print.css
  • 主题 themes.css

5.CSS声明顺序

  • 定位(Positioning)
  • 盒模型(Box model)
  • 内部排版(Typographic)
  • 视觉(Visual)

.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100; /* Box-model */
display: block;
float: right;
width: 100px;
height: 100px; /* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center; /* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px; /* Misc */
opacity: 1;
}

前端开发-CSS语法标准的更多相关文章

  1. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

  2. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  4. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  5. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  6. web前端开发——css

    一.css介绍 1.css是什么? Cascading Style Sheets缩写,层叠样式表.样式定义如何显示HTML元素,样式通常又会存在于样式表中. 2.为什么需要css? 使HTML页面变得 ...

  7. 前端开发 - CSS - 总结

    CSS:层叠样式表(Cascading Style Sheets) 1.css的特征2.css的引入3.选择器4.伪类选择器5.伪元素选择器6.字体样式 文本样式 背景属性7.盒模型 border m ...

  8. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  9. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

随机推荐

  1. Java中返回值定义为int类型的 方法return 1返回的是int还是Integer&&finally中return问题

    在Java中返回值定义为int类型的 方法return 1:中返回的是Integer值,在返回的时候基本类型值1被封装为Integer类型. 定义一个Test类,在异常处理try中和finally中分 ...

  2. Java Web项目案例之---登录和注册(精华版)

    登录和注册(精华版) (一)实现功能 1.使用cookie记录登录成功的用户名,用户选择记住用户名,则用户再次登录时用户名自动显示 2.实现文件上传功能(上传文件的表单上传于普通的表单上传不同,必须是 ...

  3. ubuntu .deb .tar.gz .tar.bz2 .rmp 和命令方式安装软件的方法

    今天在Ubuntu11.10中安装Google chrome浏览器是遇到了问题,下载好的".deb"格式的安装文件google-chrome-stable.deb双击后或者右键快捷 ...

  4. RabbitMQ(四):使用Docker构建RabbitMQ高可用负载均衡集群

    本文使用Docker搭建RabbitMQ集群,然后使用HAProxy做负载均衡,最后使用KeepAlived实现集群高可用,从而搭建起来一个完成了RabbitMQ高可用负载均衡集群.受限于自身条件,本 ...

  5. 基于python的Elasticsearch索引的建立和数据的上传

    这是我的第一篇博客,还请大家多多指点 Thanks ♪(・ω・)ノ         今天我想讲一讲关于Elasticsearch的索引建立,当然提前是你已经安装部署好Elasticsearch. ok ...

  6. HTML 第5章CSS3美化网页元素

    <span>标签: <span>标签是用来组合HTML文档中的行内元素,它没有固定的格式表示. 字体样式: 属性名                               ...

  7. Keil5调试过程中遇到的一些警告和错误

    最近用keil5调试代码出了一些警告与错误,整理如下: 1.warning: #1295-D: Deprecated declaration run_c - give arg types void r ...

  8. Log4j 2 配置

    版本区别 Log4j 2 与 log4j 1.x 最大的区别在于,新版本的 log4j 2 只支持 json 与 xml,不再支持以前的 properties 资源文件 下载 log4j 的jar 包 ...

  9. Java学习多线程第二天

    内容介绍 线程安全 线程同步 死锁 Lock锁 等待唤醒机制 1    多线程 1.1     线程安全 如果有多个线程在同时运行,而这些线程可能会同时运行这段代码.程序每次运行结果和单线程运行的结果 ...

  10. java并发编程(二)----创建并运行java线程

    实现线程的两种方式 上一节我们了解了关于线程的一些基本知识,下面我们正式进入多线程的实现环节.实现线程常用的有两种方式,一种是继承Thread类,一种是实现Runnable接口.当然还有第三种方式,那 ...