石家庄网站建设,石家庄网站制作,石家庄建网站公司,二亩地专业网站建设
服务热线: 133 9303 5011
0311-85040507
网站优化CSS代码优化方案
发布时间:2017-03-11

  css代码优化作用与意义

  1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度

  2、便于维护。简化和标准化css代码让css代码减少,便于日后维护

  3、让自己写的css代码更加专业。

  css优化方法-需要优化css代码地方

  1、缩写css代码。

  2、排列css代码。

  3、同属性提取共用css选择器。

  4、分离网页颜色和背景设置样式(较大站点需要注意)。石家庄网站建设

  5、条理化css代码。

  实例讲解以上几点div css优化方法

  1、缩写css代码

  常用需要缩写css属性代码如下:

  background(背景属性-CSS手册详细了解background手册)

  未优化前

  background-color:#FFF;对应属性为背景颜色为白色

  background-image:url(divcss5.gif);对应属性是设置divcss5.gif图片为背景

  background-position:bottom;背景图片是居底部

  background-repeat:repeat-x;背景按X坐标(横坐标)重复延伸

  以上CSS代码可以简写为

  background:#FFF url(divcss5.gif) repeat-x bottom;

  解释:背景颜色为白色,并以X坐标重复divcss5.gif图片,并且图标居下。未优化css background属性相同

  margin(外补白属性-CSS手册详细了解margin手册)

  未优化前

  margin-left:5px; 意思为靠左5px

  margin-right:6px; 靠右6px

  margin-bottom:7px; 底部延伸7px

  margin-top:8px; 顶部延伸8px

  优化简写为

  margin:8px 6px 7px 5px; 意思和属性效果同上,可详细了解css margin介绍

  padding(内补白属性-CSS手册详细了解padding手册)

  未优化前

  padding-left:5px; 意思为左补白5px

  padding-right:6px; 右补白6px

  padding-bottom:7px; 底(下)补白7px

  padding-top:8px; 顶(上)补白8px

  优化简写为

  padding:8px 6px 7px 5px; 意思和属性效果同上,可详细了解css padding介绍

  border(边框属性-CSS手册详细了解border手册)

  未优化前

  border-color:#000000;边框颜色为黑色

  border-style:solid;边框样式为实线

  border-width:1px;边框宽度为1px

  可以简写为

  border:1px solid #000000;意思同上未优化前

  如果是只设置左边边框为1px,颜色为黑色的实线css代码如下

  border-left:1px solid #000000;

  font(字体属性-CSS手册详细了解fonts手册)

  字体的属性如下:

  font-style:italic; 字体样式

  font-variant:small-caps; 字体异体

  font-weight:bold; 字体加粗

  font-size:12px; 字大小为12px

  line-height:22px;字行高为22px

  font-family:"黑体" 字体为黑体字

  可以缩写为一句:font:italic small-caps bold 12px/22px "黑体";

  注意,如果你缩写字体定义,至少要定义font-size和font-family两个值了解css font技巧。

  了解px是什么

  2、排列css代码。



上一篇:团购网站大洗牌 小型团购网站基本倒闭 下一篇:学习SEO技术不能钻牛角尖 学好基础知识才是关键
最新资讯 更多>>
  • 1  行业网站建设之切忌操之过急    02-06
  • 2  网站建设高端人才紧缺原因分析    01-16
  • 3  网站防止被K就要注意这五条    01-16
  • 4  物流快递企业网站建设分析    01-12
  • 5  传统购物企业网络品牌建设的必要性    01-12
  • 6  SEO轮链和SEO链轮的区别    01-04
  • 7  SEO轮链和SEO链轮的区别    01-04
  • 8  个人站长网站应该如何定位    01-04
  • 9  通过统计工具做数据分析、优化和挖    01-03
  • 10  线框在网站设计中的应用    12-30
  • 11  个人站长网站应该如何定位    12-30
  • 12  借助企业网站宣传 门窗企业应注重    12-29
  • 部分客户 更多>>
  • 1  石家庄新华区江昇机械厂[www.sjzjs    07-17
  • 2  石家庄新华区江昇机械厂[www.sjzjs    07-17
  • 3  石家庄隆升机械有限公司[www.sjz-l    07-17
  • 4  石家庄市泽汇投资管理有限公司[www    07-17
  • 5  某英文外贸网站[www.cntilin.com]    07-17
  • 6  论坛型实例[www.ermudi.com]    07-17
  • 7  河北省兴秦投资管理有限公司[www.h    07-17
  • 8  增景防腐木业有限公司[www.zjffm.c    07-17
  • 9  绿舟环境科学研究所[www.lvzhou360    07-17
  • 10  河北众兴律师事务所 [zhongxinglvs    06-22
  • 11  中国反传销网 [madai120.com]    06-10
  • 12  石家庄市碧洲商贸有限公司 [bizhou    06-10
  • 常见问题 更多>>
  • 1  学习SEO技术不能钻牛角尖 学好基础    03-13
  • 2  网站优化CSS代码优化方案    03-11
  • 3  团购网站大洗牌 小型团购网站基本    03-11
  • 4  网站代码优化的方法和技巧    03-10
  • 5  网站建设中特别容易忽视的细节问题    03-10
  • 6  手机网站建设如何提升用户体验度    03-09
  • 7  一个标签解决网站内容重复度过高的    03-09
  • 8  网页设计必须把握的7个问题    03-07
  • 9  网站地图具体做法攻略    03-07
  • 10  网站建设中网站的种类区别    03-06
  • 11  网站建设怎么提高用户黏贴度    03-06
  • 12  网站设计要如何制作才能从中脱颖而    03-04
  • 133 9303 5011
    0311-85040507