位置: 编程技术 - 正文

CSS锦囊

编辑:rootadmin
翻译:onestab [..]原文:mezzoblue CSS Crib Sheet在使用CSS建站时,您肯定遇到过形形色色的布局问题,最后可能被搞得焦头烂额。本文的目的是让您的设计过程更为容易,当您遇到困难时为您提供快速参考。如果您有所补充,请在这里发表您的意见.本文的其他语言版:法语, 德语, 西班牙语 和 匈牙利语。 欢迎提供其他翻译。有疑问,先验证 在调试时,先对您的代码进行验证往往能省去不少麻烦事。格式不正确的XHTML/CSS 会导致许多布局上的错误。 在其他浏览器中进行测试之前,请先在最先进的浏览器中撰写和测试CSS代码,而不是相反。 如果您在破旧的浏览器中编写和测试,你的代码就不得不依赖那个破旧浏览器的糟糕的显示,然后在符合标准的浏览器中进行测试,看到显示结果“不正常”时,你会很沮丧的。相反,您应该先将您的代码完善,然后再设法为较低级的浏览器打算。这样从一开始您的代码就是符合标准的,你不必再为支持其他浏览器而劳心费神。当然了,目前遵从标准的浏览器无疑就是 Mozilla, Safari 或 Opera。 确保您想要的效果真的存在 许多特定的浏览器专有的CSS扩展在正式标准中并不存在。 如果您对 filter(滤镜) 或滚动条指定样式,您用的就是私有代码,除了IE之外,在别的浏览器中毫无作用。如果验证器告诉您代码没有定义,极有可能您用了私有样式,别指望在不同的浏览器中得到一致的效果。 如果布局中一定要用浮动对象,别忘了适时使用清除(clear)属性。 浮动元素似易实难,而且难以驾驭。如果您发现浮动对象伸出了容器的边界,或者不像您所期望的那样显示,请检查您的期望是否正确。关于这个问题请看Eric Meyer 的教程 边距的合并:可用padding 或 border 来避免。 您可能被多余的(或者想要却不出现的)空白搞得焦头烂额。如果您用了 margins,边距的合并可能就是问题的根源。 Andy Budd 对此的解释也许能为你解惑。再这里对PJblog的结构补充一下。如果你用了Flash请检查一下Xml文件里是是否设置了边距 避免将 padding/border 和固定宽度同时应用到同一元素。 IE5 错误的区块模型是罪魁祸首,是它把事情弄得乱七八糟。虽然有补救方案,不过最好是绕过这个问题,当子元素的宽度固定时,为其父元素指定padding。 避免IE下未指定样式内容的闪烁。 如果您用 @import 来输入外部样式表,早晚会发现IE有“闪烁”的毛病。在应用CSS样式之前,未格式化的HTML文本会短暂地出现。这是可以避免的. 别指望 min-width 在IE中有用。 IE不支持它,但是它将 width 当作 min-width,所以通过一些 IE 的过滤技巧(filtering),可以实现同样的最终效果。这个很郁闷我现在这个Skin就没能实现 走投无路时,试一试减少宽度 由于舍入误差,有时 % 加上 % 等于 .1%,破坏某些浏览器中的布局。不妨试试将 % 减到 %,甚至 .9%。还有假如你用了边框(border)记得要把他的宽度加进去,px的框加了一圈1px的边框那他就是px。IE 中显示不正常? 可能是 Peekaboo 臭虫在作怪,尤其是当鼠标经过超链接时能显示正常。修补方法见Position is Everything。 如果使用了锚点,在应用超链接样式时要特别小心。 如果您在代码中使用了传统的锚点(<a name="anchor">),您会注意到 :hover 和 :active伪类也会作用于它。要避免这种情形,你可以使用 id,或者使用鲜为人知的语法: :link:hover, :link:active记住“LoVe/HAte”(爱/恨)链接规则 要以下面的顺序指定超链接伪类:Link, Visited, Hover, Acitve。任何其他顺序都不妥当。假如用了 :focus,次序应为 LVHFA(“Lord Vader's Handle Formerly Anakin”,Matt Haughey这样建议)。 请记住“TRouBLED”(麻烦的)边框。 边框(border)、边距(margin)和补白(padding)的简写次序为:顺时针方向从上开始,即 Top, Right, Bottom, Left。比如 margin: 0 1px 3px 5px;表示上边距为零,右边距为1px,依此类推。 非零值要指明单位。 在用CSS指定字体、边距或大小时,必须指明所用的单位(唯一的例外是 line-height,很奇怪,它不需要单位)。某些浏览器对未指明单位的处理方法不足为凭。零就是零,不管是 px 还是 em。其他的非零值都要明确指定单位。例如: padding: 0 2px 0 1em; 测试不同的字体大小。 像 Mozilla 和 Opera 这样的高级浏览器都允许你改变字体大小,不管你用什么字体单位。某些用户的默认字体大小肯定和你的不同,尽最大努力去满足他们。 测试时用嵌入式样式,发布时再改为外部输入。 将样式表嵌入在你的 HTML 源代码中,在测试时可以消除许多缓存引起的错误,尤其是某些 Mac 下的浏览器。但在发布前,一定要记住将样式表移到外部文件,用 @import 或 <link>引入。 加上明显的边框有助于布局调试。 像 div {border: solid 1px #f;} 之类的全局规则可以暂时为你查出布局问题。为特定的元素加上边框可帮您找到难以发觉的重叠或空白问题。 这个方法很实用,大家一定要尝试一下图片路径不要用单引号。 当设置背景图片时,要坚持用双引号。尽管看起来好像多此一举,但是如果不这么做,IE5/Mac 会噎住。 这个好像最容易忽视了不要为将来的样式表(比如手持式设备或打印用样式表)“占位子”。 Mac IE5 对空的样式表比较感冒,会增加页面的装入时间。建议样式表中至少应该有一条规则(哪怕是注释也好),免得 MacIE噎住。 还有一些建议虽然不针对某些功能,但是在开发过程中值得注意:好好组织您的CSS文件 恰当地成块注释CSS,将相似的CSS选择符编为一组,养成一致的命名习惯和空白格式(为跨平台考虑,建议用空白字符而不是tab。)以及适当的次序。 以功能(而不是外观)为类和ID命名 假如您创建了一个 .smallblue 类,后来打算将文字改大,颜色变为红色,这个类名就不再有任何意义了。相反,您可以用更有描述性的名字如 .copyright 和 .pullquote。 组合选择符 保持CSS短小对减少下载时间非常重要。请尽量为选择符分组、 利用继承(inheritance)以及使用简写(shorthand)来减少冗余。 使用图片替换技术时要考虑亲和力 已经发现传统的FIR在屏幕阅读器,以及关闭图片显示的浏览器中会出问题。对此有其他解决办法,要根据具体情况,慎重使用。

推荐整理分享CSS锦囊,希望有所帮助,仅作参考,欢迎阅读内容。

CSS锦囊

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Meta标签详解 ★HTTP-EQUIVHTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有:1、Content-Type和Con

关于Firefox中的Flash不可以显示透明效果的问题 由于自己站点的首页用了透明Flash。在IE核心的浏览器显示一切正常。可到了Firefox里面就没有了透明效果,特别是有些站点用的是全页面的透明Flash这样

当ie7不认!important之后 [布局的解决办法] 在IE7之前,我们在布局时常用!important来解决IE和FF之间的差别;但是在IE7出来之后,!important对IE7就不起作用了,而有些时候IE7的解释方法又与FF和IE6不同;这时

标签: CSS锦囊

本文链接地址:https://www.jiuchutong.com/biancheng/371898.html 转载请保留说明!

上一篇:SPAN元素和DIV元素有的区别(div与span区别及用法)

下一篇:Meta标签详解(meta 标签)

  • 财税通财务软件如何调整凭证间距
  • 个体户无票收入对公司有影响吗
  • 建筑业普票和专票的比例
  • 实收资本何时交税
  • 农业合作社享受优惠政策
  • 购进农产品取得3%专票怎样计算抵扣举例
  • 在建工程转固定资产的条件
  • 收取质保金会计处理
  • 委托加工合同如何标注多个地址
  • 公司先注册实收资本后付账该如何做会计处理呢?
  • 营改增后挂靠开票作收入吗?
  • 应收未收的利息如何处理
  • 公司领用自产产品建设厂房包括销项税
  • 新公司营业执照经营范围越多越好吗
  • 营改增对运输业的影响
  • 退税勾选后怎么申报
  • 固定资产投资增长意味着什么
  • 企业所得税怎么征收
  • 调整固定资产原值减少
  • 房地产行业的增值税是多少
  • 所得税招待费用
  • 清理缓存网页电脑
  • 公司分期付款购车账务处理
  • php清空数据表
  • 社保会计科目怎么做账
  • 苹果手机清理内存怎么清理微信内存
  • php获取扩展名的几种方法
  • 简单了解航天员的生活
  • 工程项目成本费用的分类有哪些?
  • frameworkscheduled
  • 税法中一年按多少天算
  • mac快捷切换
  • elementui 手机端
  • web全栈工程师是干什么的
  • 现代服务增值税纳税义务发生时间
  • 收到政府补贴的账务处理
  • mongodb开启远程连接
  • 匿问我答查人
  • 申报高新企业的好处
  • 单位购图书怎么入账
  • 车辆购置税能否融资租赁
  • 公司举办活动方案
  • 民办非企业收到政府拨款分录
  • 公墓造价成本
  • 申请名称预先核准在哪个网站
  • 待报解预算收入什么意思
  • 增值税的视同销售行为是有哪些?
  • 会计付租金会计分录
  • 外币业务的会计分录
  • 关于事业支出期末的结转
  • 帮客户支付的机票计入什么科目
  • 大修和维修怎样定义
  • 资产负债表中没有其他应收款
  • 股东股权转让印花税 公司承担
  • 微信收款计入现金流量吗
  • 筹建期业务招待费的扣除标准
  • 股东股权转让会计分录
  • 企业办理增资的程序
  • 为什么要用支票取钱
  • 内部交易固定资产折旧为什么调整
  • sql server 获取今天的数据
  • xp系统中文语言包
  • win xp 添加网络打印机
  • win7系统屏幕键盘怎么打开
  • win10提高
  • xp系统怎么取消密码怎么设置
  • 电脑已禁用ime是什么
  • cocos html
  • jquery的实现原理
  • plugin怎么安装
  • 浏览器兼容的方法
  • 编写一个c#
  • 每天一篇经济学人
  • javascript 自动执行
  • 电子普票最多领多少
  • 深圳企业所得税税率多少
  • 江苏国家税务机关电话
  • 出口企业能否更换法人
  • 改革开放四十年是几几年
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设