一张图片的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 ×　３２　的。

 

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