• 高效整洁CSS代码


      1、使用Reset但并非全局Reset

      不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以

      达到浏览器的兼容。但需要注意的是,请不要使用全局Reset:

      *{ margin:0; padding:0; }

      这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边

      距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。

      /** 清除内外边距 **/

      body, h1, h2, h3, h4, h5, h6, hr, p,

      blockquote, /* structural elements 结构元素 */

      dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

      pre, /* text formatting elements 文本格式元素 */

      form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */

      th, td, /* table elements 表格元素 */

      img/* img elements 图片元素 */{

      border:medium none;

      margin: 0;

      padding: 0;

      }

      /** 设置默认字体 **/

      body,button, input, select, textarea {

      font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; }

      h1, h2, h3, h4, h5, h6 { font-size: 100%; }

      em{font-style:normal;}

      /** 重置列表元素 **/

      ul, ol { list-style: none; }

      /** 重置超链接元素 **/

      a { text-decoration: none; color:#333;}

      a:hover { text-decoration: underline; color:#F40; }

      /** 重置图片元素 **/

      img{ border:0px;}

      /** 重置表格元素 **/

      table { border-collapse: collapse; border-spacing: 0; }

      2、选择更优的样式属性值

      CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,

      如区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理

      解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。

      而border:none把border设为"none"即没有,浏览器解析"none"时将不作出渲染动

      作,即不会消耗内存值。所以建议使用border:none;

      同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则

      会。

      3、 代码压缩

      当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,

      以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor,利

      用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

  • 相关阅读:
    QT正则表达式
    unix网络编程笔记
    网页书签
    trie tree(字典树)
    C++网络爬虫抓取图片
    网络编程——客户端简单流程
    OpenCV系列--摄像头控制的简单代码
    订单号生成雪花算法
    docker 运行tomcat项目
    docker 打包springboot镜像并启动
  • 原文地址:https://www.cnblogs.com/zyy711865/p/2680530.html
Copyright © 2020-2023  润新知