Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证。

  一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果能从刚开始学习书写Css的时候开始就注重Css使用的一些习惯性的要求,那在以后的项目开发中是很有帮助的。搜集了一些资料,也有一些自己的体会,一下是常用的一些Css使用Tips:

  1. 不确信、则验证。实际效果至上,不管自己认为效果是怎样,只有放在浏览器上验证之后才能保证无误。

  2. 测试时,先考虑高级、先进的浏览器,再考虑低级、兼容性差的浏览器。因为我们的代码更多的还是运行在那些优秀的浏览器的优秀的版本之上的,在这些浏览器上完美呈现之后再考虑更多的兼容性,应当是一种比较好的开发策略。

  3. 若用浮动实现布局,确保正确地清除了浮动。我是不喜欢使用浮动的,脱离常规的流,使用太多浮动的话,很容易导致自己都不知道写出来的样式会怎么呈现了。所以如果使用浮动,一定要确保清除。

  4. 不要依赖浏览器默认的字体设置,尽可能的明确设置你要使用到的字体样式。

  5. 为元素应用内边距或外边框来避免外边距重叠。

  6. 避免同时为元素指定明确的内边距/边框值与宽度/高度值。因为,若某元素需要固定的宽/高度,那么既可以用其子元素的外边距来撑大,也可以用其父元素的内边距来约束。

  7. 如果只是通过改变颜色来标注链接的话,你要考虑到那些色盲用户怎么办?所以做好的方法还是遵循给链接加下划线的用户习惯。链接规则的顺序可以通过“LoVe/HAte(爱/恨)”方法来记忆,依次为:link、visited、hover和active。若还要考虑:focus伪类,则该规则为LVHFA。

  8. 避免IE6的“无样式内容瞬间”现象。使用@import语句引入外部样式表,可能会在IE6中出现“无样式内容瞬间”现象,可以通过使用link链接样式表,或者在页面上添加script元素来避免这个问题。HTML文档中几乎可以不用考虑用@import导入样式表的方法,因为这种方法是为了兼容Netscape Navigator 4,而这种浏览器几乎绝迹。

  9. 不要依靠min-width/min-height属性。IE/Win平台上的IE并不支持这两个属性,但它在某些情况下却把width和height属性认为是min-width或min-height属性。因此,借助于一些只为Windows平台上的IE设计的过滤规则,我们用width和height属性也可以实现min-width或min-height的效果。

  10. 为非零值标明单位,这是一个很好的习惯。如果某一天需求修改这个值不是零了,那你还记得它的单位才好。

  11. 一个开发习惯:测试时采用嵌入样式,发布时再改为外部输入。

  12. 指定图片路径时不要用单引号。

  13. 尝试减少百分比值。浏览器计算的舍入误差有时会让50%+50%等于100.1%,导致布局被破坏。这时请尝试略为减少百分比的值,例如将50%改为49.9%。

  14. 使用!important来声明不允许被覆盖的规则,如h3{color:red !important;},但由于IE不支持它,所以现在更多的是作为CSS HACK来使用。

CSS:CSS使用Tips的更多相关文章

  1. Bulma CSS - CSS类

    Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...

  2. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  3. [css] CSS相对定位|绝对定位

    第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...

  4. 一日一练-CSS CSS中percentage百分值的使用

    子曰:学好百分值,考试考百分 首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计. 定位(Positioning ...

  5. [CSS] css的background及多背景设置

    问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...

  6. html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  7. css CSS常见布局解决方案

    CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...

  8. css -- css选择器

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  9. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  10. css css预处理器

    CSS预处理器(css preprocessor) 1.less: 2.sass: 3.scss: 4.stylus 参考: http://hao.jser.com/archive/2507/ htt ...

随机推荐

  1. .NET基础知识点

    .NET基础知识点   l  .Net平台  .Net FrameWork框架   l  .Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转   l  两种交 ...

  2. ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法

    ORA-01652:无法通过128(在表空间temp中)扩展temp段 解决方法 (2016-10-21 16:49:53)   今天在做一个查询的时候,报了一个"ORA-01652无法通过 ...

  3. SSRS 报表点击 Preview 显示失败

    今天使用Remote Desktop 链接到Remote Server,在SSDT中创建一个RDL文件,点击PreView预览时,出现以下错误信息 查看details information ==== ...

  4. VS-默认端口导致项目不能加载的解决方案

  5. 【.NET深呼吸】清理对象引用,有一个问题容易被忽略

    大家知道,托管代码一个重要的特点是自动管理内存,即我们常说的垃圾回收机制,那些高大上的理论我就不重复了,有兴趣的朋友可以翻书.我这个有个毛病——不喜欢很严肃地去说一些理论的东西,所以我不多介绍了. 一 ...

  6. Segmentation fault (core dumped)

    问题: 在Linux中实现快速排序时,没有加入终止条件,结果出现Segmentation fault (core dumped)这个问题,Segmentation fault (core dumped ...

  7. Objective-C中的继承和多态

    面向对象编程之所以成为主流的编程思想和他的继承和多态是分不开的,只要是面向对象语言都支持继承和多态,当然不同的OOP语言之间都有其特点.OC中和Java类似,不支持多重继承,但OOP语言C++就支持多 ...

  8. 1Z0-053 争议题目解析709

    1Z0-053 争议题目解析709 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 709.A database has three online redo log groups w ...

  9. 简析GeoServer服务的内部文件组织以及GeoServer自动化服务发布工具的开发思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 通过GeoServer发布的服务,在GeoServer内部有 ...

  10. Java类初始化

    Java类初始化 成员变量的初始化和构造器 如果类的成员变量在定义时没有进行显示的初始化赋值,Java会给每个成员变量一个默认值 对于  char.short.byte.int.long.float. ...