#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
div
s?:
.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/
精彩评论