广州做网站,广州建站_小燕子网络 广州网站制作热线:020-23318051广州建网站第一品牌! 点击添加QQ好友!广州网页设计 为什么大家都喜欢小燕子网络?
站内公告_小燕子网络
广州小燕子网络公司专业从事网站建设、域名注册、企业邮局、网站推广、网站改版、服务器/VPS/虚拟主机空间租用,小燕子网络(www.168xyz.com)以客户需求为出发点,以简洁实用为设计目标!“梦想所有企业都拥有一个自己的官方网站

搜索内容

搜索类别

广州做网站,广州建站_小燕子网络
 
用户名
密  码
 
泽泡网
百度
google
 
当前位置:HOME > 新闻资讯 > 网站设计

广州网站建设分享CSS代码优化技巧

来源:小燕子网络  发布时间 2013-08-15

广州网站建设分享要点1:css代码优化作用与意义
1、减少占用网页字节。在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度
2、便于维护。简化和标准化css代码让css代码减少,便于日后维护
3、让自己写的css代码更加专业。
要点2:css优化方法-需要优化css代码地方
1、缩写css代码。
2、排列css代码。
3、同属性提取共用css选择器。
4、分离网页颜色和背景设置样式(较大站点需要注意)。
5、条理化css代码。
实例讲解以上几点div css优化方法

1、缩写css代码
常用需要缩写    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(外补白属性-
未优化前
margin-left:5px; 意思为靠左5px
margin-right:6px; 靠右6px
margin-bottom:7px; 底部延伸7px
margin-top:8px; 顶部延伸8px
优化简写为
margin:8px 6px 7px 5px; 意思和属性效果同上,
padding(内补白属性
未优化前
padding-left:5px; 意思为左补白5px
padding-right:6px; 右补白6px
padding-bottom:7px; 底(下)补白7px
padding-top:8px; 顶(上)补白8px
优化简写为
padding:8px 6px 7px 5px; 意思和属性效果同上
border(边框属性
未优化前
border-color:#000000;边框颜色为黑色
border-style:solid;边框样式为实线
border-width:1px;边框宽度为1px
可以简写为
border:1px solid #000000;意思同上未优化前
如果是只设置左边边框为1px,颜色为黑色的实线css代码如下
border-left:1px solid #000000;
font(字体属性-
字体的属性如下:
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 "黑体";
二、CSS重用优化
广州网站建设这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便,如下:
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同(你可能需要了解CSS居中),我们就可以提取他们相同属性
优化后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }
注意观察以上代码,自己理解,不懂可到CSS论坛提出问题。
 

相关关键词:广州网站建设 广州网站设计公司 广州网站建设公司

    (网页编辑:李明)

[ 点击数:] [打印本网页] [关闭本窗口]
 

相关内容
  • 广州网站设计公司设计师李明跟大家分享
    标签的用法 2013-08-15
  • 广州网站设计公司教你如何更加正确书写网站title 2013-08-15
  • 广州网站建设公司消息腾讯最恐怖的并非微信 2013-08-15
  • 广州网站设计公司消息新东方回购股票 俞敏洪私有化蓝图 2013-08-15
  • 广州网站设计公司消息360买搜狗下周公布是真是假 2013-08-15
  • 广州网站建设公司如何从营销的角度来建设网站 2013-10-05
  • 广州网站建设公司分享ASP怎么实现301重定向 2013-08-15
  • 广州网站建设了解微博坏消息 62%网民喜欢分享负面言论 2013-08-15
  • 广州网站设计公司传言新蛋网 撤出中国市场 2013-08-15
  •  
    小燕子简介 网站设计 诚聘英才 网站建设 常见问答 新闻资讯 网站制作 联系我们 网站推广 关注我们
    广州做网站,用微信扫一扫 小燕子网络 电话:020-23318051  手机:13076712935 邮箱:xyz#168xyz.com(#换成@)  
    地址:广州市番禺区石岗东村市莲路69号 邮编:511450

    Copyright © 2013 广州泽泡信息科技有限公司. All Rights Reserved   
    如果你喜欢本站,别忘了把本站告诉给你QQ上的朋友哦! 试试 Ctrl+D 有意外惊喜哦~

    泽泡公司旗下网站:小燕子网络

    警警广州网警察察






    法律顾问:广州道怡律师事务所
    安全认证
    中国软件网推荐企业
    广东中小企业发展促进会
    中国互闻网协会会员
    经营性网站备案信息
    可信网站