开发者

Removing CSS On Webpage from Masterpage

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):

Removing CSS On Webpage from Masterpage


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.

0

上一篇:

下一篇:

精彩评论

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

最新问答

问答排行榜