Avoiding copying CSS styles that stay the same for different divs

#world1 {
                            background: url(/images/home/1.jpg) 0 0 no-repeat;
                            float: left;
                            width: 2%;
                            height: 4%;
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            z-index: -1;
                            margin-top: -20px;
                            margin-left: -20px;
                        }

                        #world1:hover {
                 开发者_如何学Go           background-position: 0 -40px;
                            cursor: pointer;

I have many (about 100) of these #world(number) divs on a single page. The only thing that changes are the top and left values and the background jpg source. Everything else is the same so clearly it is a huge amount of code. Is there some way I can avoid copying the content that remains the same between all divs and only change the absolute position and background source of each individual div?

Thanks

---

Also give the div a class, for example: class="worlds".

And put all the generic styling in that class

.world {  generic styling }

#wordl1 { custom styling }

---

Would it be acceptable to add a shared class to all of the #worldN divs?:

.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }

And in your HTML:

<div class="world" id="world1"></div>
<div class="world" id="world2"></div>

---

Use classes for common style for all divs, and id's for unique style: HTML:

<div class="myClass" id="div1" />
<div class="myClass" id="div2" />
<div class="myClass" id="div3" />
<div class="myClass" id="div4" />

CSS:

.myClass
{
    ///all your repeating CSS
}
#div1{}
#div2{}
#div3{}
#div4{}

---

You can group same rules of many elements with their class: http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

ID will be used to apply UNIQUE styles.

---

Yes, just put everything that's common into a div css optionally giving it a class that the div must include then just add the specialist css to each world div. Note you can also do class="class1 class2 class3" to use more than one css class.

---

Take a loot at http://sass-lang.com/