I have multiple webpages that work together. Most of them have the same css from a master file. The issue I am having is that one page needs the css to be a little different. Here is what I mean:
Master's CSS
.Close
{
position: relative;
top: 0px; /* Different */
display: block; /* Different */
margin: auto; /* Different */
}
.ArrowLeft
{
background-image: url(arrow_left.png);
border: 0 none transparent;
padding: 0 0 0 0;
position: relative;
top: 0px;
height: 37px;
width: 47px;
z-index: 10;
display: none;
background-color: transparent;
float: left; /* Different */
}
.ArrowRight
{
background-image: url(arrow_right.png);
border: 0 none transparent;
padding: 0 0 0 0;
position: relative;
top: 0px;
height: 37px;
width: 47px;
z-index: 10;
display: none;
background-color: transparent;
float: right; /* Different */
}
Page's CSS
.ArrowLeft
{
background-image: url(arrow_left.png);
border: 0 none transparent;
padding: 0 0 0 0;
position: absolute;
height: 24px;
width: 25px;
z-index: 10;
display: none;
}
.ArrowRight
{
background-image: url(arrow_right.png);
border: 0 none transparent;
padding: 0 0 0 0;
position: absolute;
left: 258px;
height: 24px;
width: 25px;
z-index: 10;
display: none;
}
.Close
{
position: relative;
top: -1px;
left: 105px;
}
Notice the small differences (margin: auto
, float: left
.. ect) I want to have these differences not happen in my page's css. I know that float: none
will remove the floats
but how can i remove the display
, top
, and margin
properties that are different? I would just change the class name but all the pages use the same .js file so renaming them would be very long/unwanted.
Suggestions?
Is there a wa开发者_高级运维y to just turn off the master css or disable it for these classes?
Edit Here is what I am talking about (The arrow):
I do it like this:
Master head section:
<head>
<!-- other head stuff -->
<link href="css/master.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="CPH_Css" runat="server" />
</head>
ContentPage:
<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Css" runat="server">
<link href="css/content.css" rel="stylesheet" type="text/css" />
</asp:Content>
That way you can override the master.css with whatever specifics you want in the content page.
精彩评论