css架构学习中,待更新中

http://www.w3cplus.com/css/css-architectures-new-best-practices.html转载!

使用Normalize.css重置默认样式

它具有以下优点,不仅仅是CSS样式重置:

不像其他CSS resets,normalize.css保存了有用的默认设置

大范围的规范了HTML元素样式

纠正了浏览器间的一些bug及不一样的表现形式

精心的改进提高了可用性

使用详细的注释解释了代码的作用

使用normalize.css替代一个标准的reset会使你编写正确的代码,在重新设置基本样式上节省大量的时间。

使用clear fix清除浮动


图片替代文字

使用图片代替文字的CSS技术在前端开发有着悠久辉煌的历史。在2012年3月,Jeffrey Zeldman引进了一个新的技巧,称为 Kellum方法。不是使用-9999px hack使文本超出屏幕达到隐藏文本的目的,他的技术在隐藏文本的同时保留了文本在屏幕范围之内。

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}   

这种方法提高了性能,特别在平板电脑和更小的屏幕设备上更显著

制作原理:

使用图片替换文本,其原理是相当的简单:

就是在样式中使用背景图片来替换掉HTML模板中的文本内容,从而达到一种样式无法实现的页面渲染效果。使用图片替换有其优点也有其缺点,优点就是能实现一些特殊的页面效果,缺点就是需要加载图片,而且一些不好的替换方法给残障人员浏览网页会造成一定的不良之处,另外据说会对搜索引擎的搜索有影响,对于这一点没有考究过。那么我们也不去控寻这方面的问题,我们一起来看今天所要说的

图片替换文本的制作方法

使用图标元素

使用CSS3

CSS3兼容性

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 9,476评论 1 88
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 1,278评论 0 8
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    poetries阅读 13,600评论 33 444
  • 第三章 爱你不是两三天 ——梁静茹2000专辑《勇气》 “写给你的信只留下最后一封 淡淡笔迹你熟悉的温柔 请别介意...
    微风过隙阅读 63评论 0 1
  • 晨起遇见一个充满善意的陌生人,真的会暖心一整天,大概就是东野圭吾的那句:有时候,一个人只要好好活着,就足以拯救某个...
    小灰灰979797阅读 13评论 0 0