收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2745|回复: 8

[教程] CSS代码优化和CSS重用优化

[复制链接]
发表于 2011-4-8 10:37:27 | 显示全部楼层 |阅读模式
一、CSS代码优化地方:
1、border(CSS边框)简写:
border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000;border-right:1px solid #000;
可以简写为:border:1px solid #000;

2、padding(CSS padding)简写:
padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;
可简写为:padding:1px 2px 3px 4px;
padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;
可简写为:padding:1px;

3、margin简写
margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;
可简写为:margin:1px 2px 3px 4px;
margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;
可简写为:margin:1px;

4、background简写
background-color:#000;可以简写为background:#000;
background-image:url(图片地址)
可简写为:background:url(图片地址)

5、font简写
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可简写为:font:12px/12px Arial, Helvetica, sans-serif;
二、CSS重用优化
这里主要介绍是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; }
发表于 2011-4-8 16:40:40 | 显示全部楼层
都是很基础的东东,应该大家都早已会了!不过谢谢分享!!呵呵~~
回复 支持 反对

使用道具 举报

发表于 2011-4-9 11:31:15 | 显示全部楼层
标题党
回复 支持 反对

使用道具 举报

发表于 2011-4-9 17:11:27 | 显示全部楼层
正在学这个,学习了
回复 支持 反对

使用道具 举报

发表于 2011-4-11 08:05:11 | 显示全部楼层
白期待了,不过感谢分享
回复 支持 反对

使用道具 举报

发表于 2011-4-15 21:59:32 | 显示全部楼层
哈哈,那个font所写我还真没用过,学习拉·····
回复 支持 反对

使用道具 举报

发表于 2011-4-15 22:21:50 | 显示全部楼层
基本的东西也得学会,哈哈
回复 支持 反对

使用道具 举报

发表于 2012-3-13 15:10:39 | 显示全部楼层
呵呵,最基本的写法了
回复 支持 反对

使用道具 举报

发表于 2012-3-13 17:51:43 | 显示全部楼层
汗,果断标题党,这也发上来。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-10 20:44 , Processed in 0.093515 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表