2012-10-10 194 views
2
设置

我的页面引用的CSS样式表的定义:覆盖CSS样式的HTML标签

html {background-color:#FFFFFF;background-image:url('../images/Background.png');background-repeat:repeat-x; } 

如何覆盖在页面级别的background-image元素?我需要在应用程序中覆盖只有一页的设置。

回答

5

添加一个类的HTML元素,然后使用一些联样式覆盖外部样式表的造型。您也可以将内联样式放置在最佳实践的外部样式表中。

<html class="myHtmlTag"> 
    <head> 
    <link href="externalStyle.css" rel="stylesheet"/> 
    <style> 
    html.myHtmlTag{ 
     background: none !important; 
     background-image:none !important; 
    } 
    </style> 
    </head> 
    <body></body> 
</html> 
+0

减的空间。 ('html.myHtmlTag') – ACJ

+0

感谢您的更正,我更新了答案。 –

0

使用!important财产上backgroundbackground-image风格像这样:

html{background-color:#000000 !important;background-image:url('your/image/path') !important;...} 
0

你能申请一个类到body标签吗? IE:

<body class="home"> 
<body class="articlepage"> 

否则,你在技术上可以使用jQuery,假设你有机会获得掉落在网页代码做的功能,但被锁定

<script>$("body").addClass("home");</script> 

----或--- ---

<script>$("body").addClass("articlepage");</script> 

这允许你这样做的类:

body.home {background-image:url(homebg.jpg);} 
body.articlepage {background-image:url(articlebg.jpg);} 
1

如果您仅针对html标签,而没有任何其他选择器,则只能在主css后包含另一个html样式。按照CSS的特殊性 - 它们每个只有1个标记的值(没有ids,没有类) - 所以后者将设置元素的样式。

<html> 
<head> 

<link rel="stylesheet" href="main.css" /> 

<!-- anywhere from here down you can include a style to over ride html --> 

这里有一个快速演示:

html {background-color:#000;background-image:url('http://lxmpro.com/cms/wp-content/uploads/2012/01/site-background-pattern-07.jpeg');background-repeat:repeat-x; } 


/* second reference to html tag overrides the first */ 
html {background-image:url('http://www.noupe.com/wp-content/uploads/2009/10/wallpaper-pattern.jpg');} 

工作演示 - 类背景颜色的http://jsfiddle.net/K68D3/

0

基本内嵌样式覆盖:

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.city { 
    background-color: orange; 
    color: white; 
    padding: 10px; 
} 
</style> 
</head> 

<body> 

<h2 class="city" style="background-color: tomato;">London</h2> 
<p>London is the capital of England.</p> 

</body> 
</html>