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 ...
随机推荐
- LINUX 下安装一些东西,PHP Apach SSL 等
首先下载apache sourcecode:http://www.apache.org/dyn/closer.cgi configure: error: Cannot find ldap librar ...
- MonogDB初探增加和删除
1.插入并保存文档 在插入数据之前,首先用mongodb Shell命令db.baseUser.find() 查找集合的数据. 想必大家能猜到结果,什么东西都没有,那接着来说说怎 ...
- C#并行编程系列-文章导航
菜鸟初步学习,不对的地方请大神指教,参考<C#并行编程高级教程.pdf> 目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 C# ...
- 搭建LNAMP环境(六)- PHP7源码安装MongoDB和MongoDB拓展
上一篇:搭建LNAMP环境(五)- PHP7源码安装Redis和Redis拓展 一.安装MongoDB 1.创建mongodb用户组和用户 groupadd mongodb useradd -r -g ...
- Birt报表存储过程多选参数的设置
Birt对存储过程的操作是很简单的一行语句,只需要在Data Set中写上类似这样 {call CAMPAIGN_REAL_TIME_MONITOR(?,?)} 如下图 本报表是存在两个参数,一个允许 ...
- Distributed2:Linked Server Login 添加和删除
一,通过 sys.sp_addlinkedsrvlogin 创建Linked Server的Login 当在local Server 上需要访问Linked Server时,Local Server ...
- Linq语法详细
闲言碎语 近期比较忙,但还是想写点什么,就分享一些基础的知识给大家看吧,希望能帮助一些linq新手,如果有其它疑问,可以进右上角群,进行交流探讨,谢谢. 开门见山 读这篇文章之前,我先说下,每一种搜索 ...
- 解读sencha touch移动框架的核心架构(二)
本来这行要详解Ext.extend的,但是发现网站有很详细的,那么就跳过去吧 为保持一个系列的分析,还是先搬过来吧,下章开始分析Ext4.0的新架构 在Java中,我们在实现继承的时候存在下面几个事实 ...
- OpenCASCADE Gauss Integration
OpenCASCADE Gauss Integration eryar@163.com Abstract. Numerical integration is the approximate compu ...
- 深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...