小昱个人博客
欢迎来到小昱的世界

勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏
[原]CSS统筹(前端代码优化)
  • 首页 > 前端
  • 作者:小昱
  • 2016年6月10日 12:16 星期五
  • 浏览:179
  • 字号:
  • 评论:0
  • 一、HTML代码优化

    1.能舍弃的属性就舍弃
        eg: <style type="text/css"></style>中的type
    2.标签越少越好
        eg: <div><p></p></div> 省略为p标签
    3.字体样式标签基本上可以省去,通过css样式设置
        eg: i ,b 通常不用(em,strong除外)
            i => font-style, b => font-weight
    4.去掉空格,去掉书写格式(开发阶段不用,发布时使用代码压缩工具)
    5.注释尽量少写
    6.css选择器和id、class取名在保证解释明白的时候尽量简短
    (公司要求不一样,HTML大多数情况下书写格式最重要,特殊要求特殊对待)

     

    二、CSS代码优化

    (选择器解析从右到左)
    1.使用代码压缩工具去空格
    2.属性合并

    font,background,border,margin,padding

    3.属性共用,选择器合并(并集选择器)
        相同的属性和值,把该选择器群组(并集)设置属性和值

    div,p,li{float:left;}

    4.子级选择器优于后代选择器
    5.设置一个普遍样式,通过class添加属性
        安全区域

    .wrap{
      width:1000px;
      margin:0 auto;
    }

        清除浮动

    .clearfix{
      clear:both;
    }

        等等

    .ind{
      text-indent:2em;
    }
    .ind10{
      text-indent:10px;
    }
    .noborder{
      border:0;
    }

    6.默认属性不要重复添加

    <div style="display:block;"></div>

    7.不要乱添加属性
    8.使用css精灵图设置背景图
    9.选择器不要太长
    10.!important 强制优先 能不用就不用
    (改别人样式的时候,改前备份,要添加属性样式改,不要替换属性样式)
    11.reset.css样式重置

    *{
      margin:0;
      padding:0;
    }
    body{
      font: 12px/100% arial,"Microsoft Yahei",sans-serif;
      color: #333;
    }
    ul,ol{
      list-style:none;
    }
    a{
      text-decoration:none;
    }

    12.css设置属性尽量给父元素设置,然后带元素来继承
        通常font-size,font-family,text-align,line-height,color都能继承
        margin,padding,border不能继承
        a标签不能继承color,需要单独设置
        h1~h6不能继承font-size,需要单独设置
        块元素默认宽度为父元素宽度,可使用inherit继承高度属性
        p标签不要套任何块元素

     

    三、SEO搜索引擎优化

    1.标签语义化

    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
    <h1></h1>~<h6></h6><p></p>(h1不要出现多次)
    <em></em>、<strong></strong>

    2.元信息
    搜索引擎会抓取网页中的文字信息,不能采集图片信息

    <meta name="author" content="quanzaiyu" />
    <meta name="keywords" content="html,andriod,ios,java" />
    <meta name="description" content="小昱个人网站" />
        name:搜索关键词
        content:描述的主要内容

    对于图片

    <img src="" alt="" title="" />
        alt属性有助于搜索
        title对搜索帮助不大,但可以增加用户体验

    对于背景图

    <div style="background:url();font-size:0;">耐克</div>
        在div里面插入一张背景图,在div标签内加入描述性文字,设置font-size:0;

     

    四、其他

    CSS Sprites精灵(图片精灵,精灵图)
        把小图标拼成一个图片,发一次请求就能通过定位来展示不同的图标

    避免 iframe 引进公用
        iframe是行内块元素,但是搜索引擎抓取不到
        scrolling="no"    去滚动条
        frameborder="0"    去边框

    <div style="width:1000px; height:60px;">
      <iframe src="" frameborder="0" scrolling="no" width="100%"></iframe>
    </div>

        通常在iframe外面加入一个div,设置其宽高

    使用自定义列表

    <dl>
        <dt></dt>
        <dd></dd>
    </dl>

     

      您阅读这篇文章共花了:  
    二维码加载中...
    本文作者:小昱      文章标题: [原]CSS统筹(前端代码优化)
    本文地址:http://www.xiaoyulive.top/?post=65
    版权声明:若无注明,本文皆为“小昱个人博客”原创,转载请保留文章出处。
    返回顶部| 首页| 碰碰手气| 捐赠支持| 手机版本|后花园

    Copyright © 2016-2017 小昱个人博客 滇ICP备16006294号