is there a way to modify property of css div in html
I am kind of new to css and html coming form Actionscirpt.. I was wonder if there is a better way to do this.
I created an external css with following div.
#myDiv{
position:absolute;
top:200px;
left:200px;
width:200px;
height:200px;
}
and in html I want to use the same div for 3 different things with diffe开发者_运维知识库rent value/property.
<div id="myDiv">The top and left needs to be 150px</div>
<div id="myDiv">The top and left needs to be 200px</div>
<div id="myDiv"> The top and left needs to be 300px</div>
Is there a simple way to do it without creating 3 divs in css...
first of all, ID's are unique elements and you should only have 1 per page.
To apply the same style to multiple elements, you should use a class.
<div class="name-of-my-common-style">
And then from css, use a dot (.) instead of a hash (#) to define the style for that class. i.e.
.name-of-my-common-style {
position:absolute;
top:200px;
left:200px;
width:200px;
height:200px;
}
To override any styles, you can use inline CSS
<div class="name-of-my-common-style" style="width: 150px"> ... </div>
This will pick up the original styles from name-of-my-common-style but override the width due to the inline width setting of 150px.
Another approach is to create a separate class for each width declaration and apply it to the element. i.e.
.name-of-my-common-style { ..default styles here..}
.width-150 {width: 150px;}
.width-200 {width: 200px;}
And so forth...
Then you can use it like this.
<div class="name-of-my-common-style width-150">I'm 150px wide</div>
Hope this helps.
.divvy {
/* common attributes go here */
position: absolute;
width: 200px;
height: 200px;
}
/* specific (and unique attributes, since these are 'ids') here */
#d1 { top: 150px; left: 150px; }
#d2 { top: 200px; left: 200px; }
#d3 { top: 300px; left: 300px; }
In your HTML:
<div class="divvy" id="d1">The top and left needs to be 150px</div>
<div class="divvy" id="d2">The top and left needs to be 200px</div>
<div class="divvy" id="d3">The top and left needs to be 300px</div>
First of all, you should never have multiple elements with the same ID. IDs are supposed to be unique.
Here's the most straightforward way to accomplish your goal if inline styles doesn't make sense:
.myDiv{ position:absolute; width:200px; height:200px; }
#myDiv1 { top: 150px; left: 150px; }
#myDiv2 { top: 200px; left: 200px; }
#myDiv3 { top: 300px; left: 300px; }
And then in HTML:
<div id="myDiv1" class="myDiv">The top and left needs to be 150px</div>
<div id="myDiv2" class="myDiv">The top and left needs to be 200px</div>
<div id="myDiv3" class="myDiv">The top and left needs to be 300px</div>
Firstly, id should really only be used on a single element. You really want to use 'class' rather than 'id' (and your css would be .myDiv rather than #myDiv
The only way without creating 3 divs in css would be to apply additional style attributes in the div tag where you need to override the styles in the css.
for example:
<div class="myDiv" style="top: 150px; left: 150px;"> ... </div>
<div class="myDiv"> this just uses the default style from the css </div>
<div class="myDiv" style="top: 300px; left: 300px;"> ... </div>
You can use: <div id="myDiv" style="top: 150px; left: 150px;"> The altered properties will be over-ridden, but the rest will remain as per your CSS file.
CSS priority is given like this (Highest to lowest): inline -> CSS in <head> tag -> definitions in an external CSS file.
But, as NullUserException stated, ideally each div should be unique.
加载中,请稍侯......
精彩评论