一张图片的CSS样式美化

以上是使用到的Icon图标图片和本人编写了CSS文件后在页面上显示的效果。

具体的CSS样式代码：

html body{background-color: #FFFFFF;font-size: 12px;} .icon_11{background: url("Icons.gif") -47px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_12{background: url("Icons.gif") -96px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_13{background: url("Icons.gif") -144px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_14{background: url("Icons.gif") -192px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_15{background: url("Icons.gif") -240px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_16{background: url("Icons.gif") -288px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_17{background: url("Icons.gif") -336px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_18{background: url("Icons.gif") -384px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_19{background: url("Icons.gif") -432px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_10{background: url("Icons.gif") -480px -25px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_21{background: url("Icons.gif") -47px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_22{background: url("Icons.gif") -95px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_23{background: url("Icons.gif") -144px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_24{background: url("Icons.gif") -192px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_25{background: url("Icons.gif") -240px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_26{background: url("Icons.gif") -288px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_27{background: url("Icons.gif") -336px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_28{background: url("Icons.gif") -384px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_29{background: url("Icons.gif") -432px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_20{background: url("Icons.gif") -480px -72px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_31{background: url("Icons.gif") -47px -119px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_32{background: url("Icons.gif") -95px -119px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_33{background: url("Icons.gif") -143px -119px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_34{background: url("Icons.gif") -192px -121px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_35{background: url("Icons.gif") -240px -121px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_36{background: url("Icons.gif") -288px -121px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_37{background: url("Icons.gif") -336px -119px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_38{background: url("Icons.gif") -384px -119px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_39{background: url("Icons.gif") -432px -121px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_30{background: url("Icons.gif") -480px -121px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_41{background: url("Icons.gif") -47px -166px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_42{background: url("Icons.gif") -96px -166px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_43{background: url("Icons.gif") -144px -168px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_44{background: url("Icons.gif") -192px -166px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_45{background: url("Icons.gif") -240px -169px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_46{background: url("Icons.gif") -288px -166px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_47{background: url("Icons.gif") -336px -168px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_48{background: url("Icons.gif") -384px -167px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_49{background: url("Icons.gif") -432px -168px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_40{background: url("Icons.gif") -480px -168px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_51{background: url("Icons.gif") -47px -216px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_52{background: url("Icons.gif") -95px -216px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_53{background: url("Icons.gif") -143px -216px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_54{background: url("Icons.gif") -192px -217px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_55{background: url("Icons.gif") -240px -216px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_56{background: url("Icons.gif") -288px -217px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_57{background: url("Icons.gif") -336px -219px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_58{background: url("Icons.gif") -384px -217px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_59{background: url("Icons.gif") -432px -217px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_50{background: url("Icons.gif") -480px -217px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_61{background: url("Icons.gif") -47px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_62{background: url("Icons.gif") -95px -263px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_63{background: url("Icons.gif") -143px -263px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_64{background: url("Icons.gif") -192px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_65{background: url("Icons.gif") -240px -263px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_66{background: url("Icons.gif") -288px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_67{background: url("Icons.gif") -336px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_68{background: url("Icons.gif") -384px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_69{background: url("Icons.gif") -432px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_60{background: url("Icons.gif") -480px -264px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_71{background: url("Icons.gif") -47px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_72{background: url("Icons.gif") -95px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_73{background: url("Icons.gif") -143px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_74{background: url("Icons.gif") -192px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_75{background: url("Icons.gif") -240px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_76{background: url("Icons.gif") -288px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_77{background: url("Icons.gif") -336px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_78{background: url("Icons.gif") -384px -311px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_79{background: url("Icons.gif") -432px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_70{background: url("Icons.gif") -480px -313px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_81{background: url("Icons.gif") -47px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_82{background: url("Icons.gif") -95px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_83{background: url("Icons.gif") -143px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_84{background: url("Icons.gif") -192px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_85{background: url("Icons.gif") -240px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_86{background: url("Icons.gif") -288px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_87{background: url("Icons.gif") -336px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_88{background: url("Icons.gif") -384px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_89{background: url("Icons.gif") -432px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_80{background: url("Icons.gif") -480px -362px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_91{background: url("Icons.gif") -47px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_92{background: url("Icons.gif") -95px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_93{background: url("Icons.gif") -143px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_94{background: url("Icons.gif") -192px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_95{background: url("Icons.gif") -240px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_96{background: url("Icons.gif") -288px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_97{background: url("Icons.gif") -336px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_98{background: url("Icons.gif") -384px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_99{background: url("Icons.gif") -432px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_90{background: url("Icons.gif") -480px -409px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_03{background: url("Icons.gif") -143px -458px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_04{background: url("Icons.gif") -192px -458px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_05{background: url("Icons.gif") -240px -458px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_06{background: url("Icons.gif") -288px -458px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_07{background: url("Icons.gif") -336px -458px; width:32px;height: 32px; border: 0px;cursor: pointer;} .icon_08{background: url("Icons.gif") -384px -458px; width:32px;height: 32px; border: 0px;cursor: pointer;}

实现说明：主要需要做的工作是定位图标的在图片的位置。重点在background:url("图片链接位置") 横坐标 纵坐标;主要控制好横纵坐标的位置就可以了，而图标的大小就看你的图标了，一般现在做图标的话都是做16 X 16 。本例是32 ×　３２　的。

 

这是一个初学者例子，本人第一次接触这种所有图标在一张图片的样式美化，希望对所有初学者能够提供很好的帮助。