• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > web开发中怎么样使css书写规范?

web开发中怎么样使css书写规范?

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,书写规范等相关知识,佚名 希望在学习及工作中可以帮助到您
对于现在的web2.0,到底怎么书写css样式表,才算是最好的,最规范的!几乎没有什么明确的规定。在整个开发的项目中,只要写出一套最适合于团队开发的最好了。当然了很多的css样式书写范是大同小异的。需要不断的去归纳总结。

根据经验总结出以下几点规范,请大家参考一下:
一.所有的CSS的尽量采用外部调用:这是我认为最重要的一点,因为这影响加载页面时的速度.
<LINK href="style/style.css" rel="stylesheet" type="text/css">
书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived 要按照顺序写)便于自己和他人阅读。
为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12pt 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。

二. 样式名均以字母开头,后缀可包含字母、数字、下划线和中划线,样式名尽量采用通俗易懂的英文单词组成,如.img .body-bg #left_nav等(后附一些通用的命名标准);对于公用的自定义样式可适当加入模块标识或comm标识,以免与独立模块样式产生冲突!
三.凡html内置标签及CSS属性名称均采用大写字母书写,而自定义样式名称及CSS属性值则均采用小写字母写书;如:P{...} BODY{...} .p1{COLOR: red} .li_bg{MARGIN: 0px;} 等;
四.能采用缩写的样式属性尽量采用缩写形式,如margin,padding,border等;
(原则:上-右-下-左 --> MARGIN: 1px 2px 3px 4px 上-(右左)-下 --> MARGIN: 1px 2px 3px
(上下)-(左右)--> MARGIN: 2px 4px 上右下左 --> MARGIN: 4px;
字体颜色类: #000000 --> #000 #00FFDD --> #0FD;
附:缩写参考
There are a lot of CSS shorthand properties.
* font
font: font-style font-variant font-weight font-size/line-height font-family;
* margin
margin: margin-top margin-right margin-bottom margin-left;
* padding
padding: padding-top padding-right padding-bottom padding-left;
* border
border: border-width border-style border-color;
* border-top
border-top: border-top-width border-top-style border-top-color;
* border-right
border-right: border-right-width border-right-style border-right-color;
* border-bottom
border-bottom: border-bottom-width border-bottom-style border-bottom-color;
* border-left
border-left: border-left-width border-left-style border-left-color;
* border-width
border-width: border-top-width border-right-width border-bottom-width border-left-width
* background
background: background-color background-image background-repeat background-attachment background-position;
* list-style
list-style: list-style-type list-style-position list-style-image;
* outline
outline: outline-color outline-style outline-width;
五. 在书写样式的过程中,同一划分模块的样式尽量写在一起,并适当加入注释,以方便阅读和查找;如<-- Footer --><-- End Footer -->或者/* Footer */ /* End Footer */
六.样式抽象,我们可以把一些常用的样式抽象出来,做为一类样式;如COLOR: red FLOAT:left FONT-WEIGHT: bold等 这些属性我们可能要经常用到,我们是否需要为每个需要应用这个样式的元素都单独写上一个样式呢?答案是明确的:不需要; 我们可以定义: .red{ COLOR:red } .fleft{FLOAT:left} 这样是不是要方便多了^_^

七. 效率规则:(css属性书写顺序)
1.显示样式
display/position/float/clear
2.自身样式
width/height/margin/padding/border/background
3.内容样式
line-height/text-align/font系列(font-size/font-weight)/color/text-decoration/vitical-align

八.css样式的命名:
对于css样式表的命名书写规范,请参考 http://www.jb51.net/css/22091.html
关于更多的css书写规范,不止这些,还需要我们共同的来总结和学习,如果您有更好的见意,请留言!

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS中使用table-cell法来达到居中效果
  • 2017-08-06CSS3 选择器 伪类选择器介绍
  • 2017-08-06css3选择器基本介绍
  • 2017-08-06CSS3属性box-sizing使用指南
  • 2017-08-06CSS Sprites简介以及优缺点
  • 2017-08-06使用Div+CSS纯图片实现圆角矩形的方法小结
  • 2017-08-06css 分页样式代码(基于a或li)绿色与蓝色
  • 2017-08-06如何终止DIV的float属性简单实现
  • 2017-08-06详解CSS中的规则声明
  • 2017-08-06IE6不支持position:fixed bug的完美解决

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • css移动端实现与pc端一样的:acitve效果
    • css水平垂直居中
    • 使用CSS3创建动态菜单效果
    • CSS 文件命名规则
    • css使用overflow属性控制滚动条的样式
    • CSS教程高级应用 2个纯CSS面包屑导航栏实现代码
    • Web前端新人笔记之height、min-height的区别详解
    • ipad 竖版 纯CSS判断ipad横版和竖版
    • css+div的一些易错点小结
    • css3的@media属性实现页面响应式布局示例代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有