CSS:CSS使用Tips
Css是前端开发中效果展现的主要部分之一,良好的Css书写习惯可以为实际的项目开发提高效率,也可以为实现良好的团队合作提供保证。
一般新手在使用Css的时候经常会犯一些错误,出现一些不经意的漏洞,如果能从刚开始学习书写Css的时候开始就注重Css使用的一些习惯性的要求,那在以后的项目开发中是很有帮助的。搜集了一些资料,也有一些自己的体会,一下是常用的一些Css使用Tips:
不确信、则验证。实际效果至上,不管自己认为效果是怎样,只有放在浏览器上验证之后才能保证无误。
测试时,先考虑高级、先进的浏览器,再考虑低级、兼容性差的浏览器。因为我们的代码更多的还是运行在那些优秀的浏览器的优秀的版本之上的,在这些浏览器上完美呈现之后再考虑更多的兼容性,应当是一种比较好的开发策略。
若用浮动实现布局,确保正确地清除了浮动。我是不喜欢使用浮动的,脱离常规的流,使用太多浮动的话,很容易导致自己都不知道写出来的样式会怎么呈现了。所以如果使用浮动,一定要确保清除。
不要依赖浏览器默认的字体设置,尽可能的明确设置你要使用到的字体样式。
为元素应用内边距或外边框来避免外边距重叠。
避免同时为元素指定明确的内边距/边框值与宽度/高度值。因为,若某元素需要固定的宽/高度,那么既可以用其子元素的外边距来撑大,也可以用其父元素的内边距来约束。
如果只是通过改变颜色来标注链接的话,你要考虑到那些色盲用户怎么办?所以做好的方法还是遵循给链接加下划线的用户习惯。链接规则的顺序可以通过“LoVe/HAte(爱/恨)”方法来记忆,依次为:link、visited、hover和active。若还要考虑:focus伪类,则该规则为LVHFA。
避免IE6的“无样式内容瞬间”现象。使用@import语句引入外部样式表,可能会在IE6中出现“无样式内容瞬间”现象,可以通过使用link链接样式表,或者在页面上添加script元素来避免这个问题。HTML文档中几乎可以不用考虑用@import导入样式表的方法,因为这种方法是为了兼容Netscape Navigator 4,而这种浏览器几乎绝迹。
不要依靠min-width/min-height属性。IE/Win平台上的IE并不支持这两个属性,但它在某些情况下却把width和height属性认为是min-width或min-height属性。因此,借助于一些只为Windows平台上的IE设计的过滤规则,我们用width和height属性也可以实现min-width或min-height的效果。
为非零值标明单位,这是一个很好的习惯。如果某一天需求修改这个值不是零了,那你还记得它的单位才好。
一个开发习惯:测试时采用嵌入样式,发布时再改为外部输入。
指定图片路径时不要用单引号。
尝试减少百分比值。浏览器计算的舍入误差有时会让50%+50%等于100.1%,导致布局被破坏。这时请尝试略为减少百分比的值,例如将50%改为49.9%。
使用!important来声明不允许被覆盖的规则,如h3{color:red !important;},但由于IE不支持它,所以现在更多的是作为CSS HACK来使用。
CSS:CSS使用Tips的更多相关文章
- Bulma CSS - CSS类
Bulma CSS框架教程 Bulma CSS – 简介 Bulma CSS – 开始 Bulma CSS – CSS类 Bulma CSS – 模块化 Bulma CSS – 响应式 Bulma是一 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- [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% ...
- 一日一练-CSS CSS中percentage百分值的使用
子曰:学好百分值,考试考百分 首先是确定CSS 中的percentage 都可以应用在CSS 中的哪些属性,以及这些属性的值如何进行计算的,参考CSS 参考手册进行统计. 定位(Positioning ...
- [CSS] css的background及多背景设置
问题 首先是一个 div 块里需要一张背景,带文本和图案的那种,但是身为容器的 div 是能够随数据的改变而变化长度的,所以一张静态图片不免的会有拉伸和挤扁的状态,尤其是有图案和文本的情况下最为明显 ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- css -- css选择器
选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...
- CSS: CSS常用的文本样式属性
介绍:CSS常用的文本样式属性 color: 颜色 font-size: 字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...
- css css预处理器
CSS预处理器(css preprocessor) 1.less: 2.sass: 3.scss: 4.stylus 参考: http://hao.jser.com/archive/2507/ htt ...
随机推荐
- python 栈和队列(使用list实现)
5.1.1. Using Lists as Stacks The list methods make it very easy to use a list as a stack, where the ...
- .NET Memory Profiler 查看内存使用情况
1 简介 .Net Memory Profiler(以下简称Profiler):专门针对于.NET程序,功能最全的内存分析工具,最大的特点是具有内存动态分析(Automatic Memory Anal ...
- 模拟jsonp的实现
function prescript(s) { if (s.cache === undefined) { s.cache = false; } if (s.crossDomain) { s.type ...
- jQuery源码分析系列(36) : Ajax - 类型转化器
什么是类型转化器? jQuery支持不同格式的数据返回形式,比如dataType为 xml, json,jsonp,script, or html 但是浏览器的XMLHttpRequest对象对数据的 ...
- 谈谈基于OAuth 2.0的第三方认证 [下篇]
从安全的角度来讲,<中篇>介绍的Implicit类型的Authorization Grant存在这样的两个问题:其一,授权服务器没有对客户端应用进行认证,因为获取Access Token的 ...
- Objective-C中的Block(闭包)
学习OC有接触到一个新词Block(个人感觉又是一个牛气冲天的词),但不是新的概念,不是新的东西.学过Javascript的小伙伴对闭包应该不陌生吧~学过PHP的应该也不陌生,在PHP5.3版本以后也 ...
- Linux模块
一.为什么要使用模块 由于linux使用的是整体结构,不是模块化的结构,整体结构实现的操作系统可扩展性差.linux为了扩展系统,使用了模块的技术,模块能够从系统中动态装入和卸载,这样使得linux也 ...
- Java 8 Stream API详解--转
原文地址:http://blog.csdn.net/chszs/article/details/47038607 Java 8 Stream API详解 一.Stream API介绍 Java8引入了 ...
- 利用private font改变PDF文件的字体
利用private font改变PDF文件的字体 前几天做项目,需要使用未安装的字体来改变PDF的文件.以前并没有实现过类似的功能,幸运的是我在网上找到了类似的教程,并成功实现了这个功能. 下面就跟大 ...
- T-SQL高级查询语句
高级查询 1.连接查询,对结果集列的扩展select * from info select * from info,nation #形成笛卡尔积select * from info,nation wh ...