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

Discuzx系统 CSS 编码规范、CSS属性书写顺序

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

本文主要包含CSS,编码规范,CSS属性,书写顺序等相关知识,佚名 希望在学习及工作中可以帮助到您
1. 属性写在一行内,属性之间、属性名和值之间以及属性与“{}”之间须有空格,例如:.class { width: 400px; height: 300px; }

2. 属性的书写顺序:

        2.1. 按照元素模型由外及内,由整体到细节书写,大致分为五组:
            位置:position,left,right,float
            盒模型属性:display,margin,padding,width,height
            边框与背景:border,background
            段落与文本:line-height,text-indent,font,color,text-decoration,...
            其他属性:overflow,cursor,visibility,...
        2.2. 针对特殊浏览器的属性,应写在标准属性之前,例如:-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

3. 谨慎添加新的选择符规则,尤其不可滥用 id,尽可能继承和复用已有样式

4. 选择符、属性、值均用小写(格式的颜色值除外),缩写的选择符名称须说明缩写前的全称,例如 .cl -> Clearfix

5. 避免使用各种 CSS Hack,如需对 IE 进行特殊定义,请参阅下节“关于 CSS Hack 的说明”

6. 勿使用冗余低效的 CSS 写法,例如:
        ul li a span { ... }

7. 慎用 !important

8. 建议使用在 class/id 名称中的词语

        6.1. 表示状态:a->active
        6.2. 表示结构:h->header,c->content,f->footer
        6.3. 表示区域:mn->main,sd->side,nv-navigation,mu->menu
        6.4. 表示样式:l-list,tab,p_pop

9. 开发过程中的未定事项,须用 [!] 标出,以便于后续讨论整理

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

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

相关文章

  • 2017-08-06使用font-size:0px 来制作跨浏览器的inline-block css属性
  • 2017-08-06在IE6/7/8下识别html5标签(让老式浏览器识别html5)
  • 2017-08-06DOCTYPE 中xhtml 1.0和 html 4.01区别分析
  • 2017-08-06解决纯css写三角形在firefox下的锯齿问题
  • 2017-08-06div+css是网页排版技巧分享
  • 2017-08-06WEB标准心得之网页重构的思路
  • 2017-08-06一些常用的DIV+CSS的网页布局所用的代码段
  • 2017-08-06让两个Div并排显示的多种方法
  • 2017-08-06使用CSS修改HTML的checkbox效果的小示例分享
  • 2017-10-01CSS的三种使用方法

文章分类

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

最近更新的内容

    • div+css布局中选择使用html标签的方法
    • css图标制作教程制作云图标
    • 利用CSS定位背景图片 background-position
    • CSS属性探秘系列(四):vertical-align
    • 浅谈浏览器的兼容性(必看篇)
    • CSS的position属性完全解析
    • Google Chrome浏览器无法显示hover样式的解决方法
    • 用CSS3的box-reflect来制作倒影效果
    • css绝对定位的绝对好用的居中方法
    • 详解CSS的Sass框架中代码注释的编写方法

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

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