SmartSprites 学习笔记.docxVIP

SmartSprites可以让你很容易的使用css sprites, 并且容易维护, 你可以在css文件中插入一些标记和指令, 来指示某些图片是否放入css sprites 图片里, SmartSprites会解析你的css文件去自动生成合成图, 并且生成需要的样式. 如果图片有修改，只需执行一下命令，新的sprite就又生成了。这样就可以大大的提高开发效率，维护起来也比较方便。快速引导：1.?????? 下载并且安装 jdk1.5 以上版本。2.?????? 下载SmartSprites/download.html?v0.2.6并解压到任意目录下。3.?????? 修改smartsprites.cmd文件，找到java %OPTS% -Djava.ext.dirs = lib org.carrot2.labs.smartsprites.SmartSprites 这行，将lib替换成该目录下lib文件夹的绝对路径。4.?????? 配置环境变量，path后边追加smartsprites的绝对路径；如：d:/smartsprites-0.2.85.?????? 编写需要的css文件，如：style.css#web {??? width: 17px;??? height: 17px;??? background-repeat: no-repeat;??? background-image: url(../img/icon1.png);}#logo {??? width: 50px;??? background-repeat: no-repeat;??? background-position: top right;??? background-image: url(../img/icon2.png);}#main-box {??? background-repeat: repeat-x;??? background-position: 5px left;??? background-image: url(../img/icon3.png);} 6.?????? 用smartsprites的指令注释css文件/** sprite: mysprite; sprite-image: url(../img/mysprite.png); sprite-layout: vertical */#web {??? width: 17px;??? height: 17px;??? background-repeat: no-repeat;??? background-image: url(../img/icon1.png); /** sprite-ref: mysprite; */}#logo {??? width: 50px;??? background-repeat: no-repeat;??? background-position: top right;??? background-image: url(../img/icon2.png);/** sprite-ref: mysprite; sprite-alignment: right */}#main-box {??? background-repeat: repeat-x;??? background-position: 5px left;??? background-image: url(../img/icon3.png); /** sprite-ref: mysprite; sprite-alignment: repeat; sprite-margin-top: 5px */} 7.?????? 打开cmd命令行窗口,键入smartsprites d:/example/style.css。在成功完成之后，SmartSprites会根据 sprite 指令在指定的位置上创建合并好的图片，同时创建一个相应的css文件，后缀增加 -sprite，原始的css文件保持不变。style-sprite.css :　　#web {??? width: 17px;??? height: 17px;??? background-repeat: no-repeat;??? background-image: url(../img/mysprite.png);??? background-position: left -0px;}#logo {??? width: 50px;??? height: 50px;??? background-repeat: no-repeat;??? background-position: top right;??? background-image: url(../im