zoukankan      html  css  js  c++  java
  • 从CSS禅意花园中总结的CSS技巧

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


      2、应用到body元素上的id叫做“CSS签名”,通过它的作用我们可以覆盖页面中部分甚至所有CSS样式。如,body[id=css-zen-garden] a:link {color: #f90;},通过这样的方法可以使支持CSS属性选择器的浏览器呈现完全不同的更经典的效果。


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


      4、只在必要的时候才使用img标签,通常情况下使用背景图片的方法更方便于CSS布局。


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


      6、居中的方法有四种:自动外边距实现居中、text-align实现居中、组合使用自动外边距和文本对齐、负外边距解决方案。(个人认为第一种和第四种最好,P86)


      7、绝对定位与相对定位的区别在于:绝对定位的元素独立于文档流,而相对定位的元素原来所在地方依然占据一定的文档空间。


      8、使用负text-indent属性值的方法,将文本推到屏幕的左边缘之外,从而使屏幕阅读器可正常访问,同时不影响图片浏览,但当图像禁用后用户依然无法看到内容。(本书提供了其他更有效的解决方法,但我认为不够优雅,P125)


      9、从低品质到高品质的压缩方法能更容易的在图像文件大小和品质上找到一个平衡点。


      10、font-style属性:inherit:使本段文字的字体姿态和父元素的一致;italic:一种在常规字体基础上做过特殊设计的变体,一般带有手写风格;oblique:常规字体有浏览器做倾斜处理后的版本。和italics不同的是,oblique字体并不出自另外设计的变体,而仅仅是常规字体应用倾斜效果的结果。


      11、通用字体族:serif字体都有明显的装饰钩,所以在字母笔画的结尾处大都能看到细小的衬钩,如Times New Roman,Georgia和Garamond;sans-serif相对于serif,它没有装饰钩,如Arial,Helvetica,Futura和Lucida Sans Unicode;monospace字体的每个字母都有相同的宽度,与”i”与”m”宽度是相同的,该类字体一般用于显示程序代码,如Courier(Courier New),Monaco和Andale Mono;fantasy完全是装饰用字体,该类字体数量N多,多用于标题,如Impact和Papyrus。选择CSS字体组合的时候,最好选择具有相同x-height(小写字母去除高出部分和低出部分后的高度,通常就是小写的x字母的高度)的字体,他们具有较好的相似性。


      12、line-height的值不需要单位,1.2=1.2em。


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


      14、通过GIF棋盘图案方法可以模拟50%半透明效果(P208)。


      15、用CSS创建动态下拉菜单的方法(P213),当然能实现这种效果的只有支持所有元素:hover伪类的浏览器(IE不支持),CSS3则能实现更复杂的效果。


      16、使用Offset滤镜可以解决背景图片重复时衔接不够良好的问题。


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


      18、用明显的边框辅助调试布局。div{border:solid 1px #f00;}之类的全局规则可以帮助检查出很多细微的布局差错。为某个特定的元素加上边框也便于找到一些难以发觉的元素重叠或多余空白问题。


      19、指定图片路径时不要使用单引号。设置背景图片时的引号并不是必须的,如果使用了单引号那么苹果机上的IE将无法正确加载。所以要么用双引号,要么就不用任何引号。


      20、如果代码中使用了传统的锚点(如<a name=”anchor”>),将发现:hover和:active伪类的样式也会应用于其上。我们可以使用独一无二的id(如<id=”anchor”>),或是一种鲜为人知的奇怪语法:link:hover和:link:active来避免这种情况。

  • 相关阅读:
    GoogleMaps 之创意应用——数码照片定位
    SGI面临破产
    Google地图搜索的触角伸向月球
    说“丛林法则”
    比Google Map更加清晰的网络地图——RealBird
    Office 12眩酷界面,先睹为快
    Paypal将正式登陆中国——贝宝
    地图技术的领导者RealBird与Google Maps的无缝结合
    微软欲封杀OpenGL?
    网络地图服务究竟商机何在?
  • 原文地址:https://www.cnblogs.com/qianduan/p/1718586.html
Copyright © 2011-2022 走看看