Overriding pre-defined CSS style
I have a situation where there are images with predefined style in the css like this:
<html>
<head>
<STYLE TYPE="text/css">
#content img {
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
}
</STYLE>
</head>
<body bgcolor="#dddddd">
<div id="content">
<img src="image.gif" />
</div>
</body>
</html>
For most of the images inside the page it's ok but in some cases I would like display images without the pre-defined style. Is it po开发者_StackOverflowssible in some way? maybe with an inline style?
You could add a class to images that you do not want to have this style.
#content img.noshadow{
-moz-box-shadow: 0;
-webkit-box-shadow: 0;
box-shadow: 0;
}
then offcourse your image would be <img class="noshadow" src="image.gif" />
There are many ways to do this. As you mentioned, an inline style is one option. There are others. You should read a bit about css precedence.
One possible link (first result on google, don't know about this site in general but the article looked okay):
http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
Make a more specific CSS selector:
body #content img {
...
}
You can define an inline style in such cases. As shown below.
<img src="image.gif" height="" width="" ... />
Hope this helps you!!
加载中,请稍侯......
精彩评论