开发者

Overriding pre-defined CSS style

开发者 https://www.devze.com 2023-04-02 06:59 出处:网络
I have a situation where there are images with predefined style in the css like this: <html> <head>

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!!

0

精彩评论

暂无评论...
验证码 换一张
取 消