从母版页删除网页上的CSS_Css_Master Pages

从母版页删除网页上的CSS

css

从母版页删除网页上的CSS,css,master-pages,Css,Master Pages,我有多个网页一起工作。它们中的大多数都有来自主文件的相同css。我遇到的问题是，一个页面需要css有点不同。我的意思是：硕士CSS .Close { position: relative; top: 0px; /* Different */ display: block; /* Different */ margin: auto; /* Different */ } .ArrowLeft { background-image

我有多个网页一起工作。它们中的大多数都有来自主文件的相同css。我遇到的问题是，一个页面需要css有点不同。我的意思是：

硕士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 */
}

.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;
  }

页面的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 */
}

.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;
  }

请注意这些小差异（

margin:auto

，

float:left

.ect），我希望这些差异不会出现在页面的css中。我知道

float:none

将删除

浮动

，但如何删除不同的

显示

、

顶部

和

边距

属性？我只想更改类名，但所有页面都使用相同的.js文件，因此重命名它们会非常长/不需要

建议

有没有一种方法可以关闭或禁用这些类的主css

编辑以下是我要说的内容（箭头）：

我是这样做的：

主任组：

<head>
    <!-- other head stuff -->

    <link href="css/master.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="CPH_Css" runat="server" />
</head>

内容页：

<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Css" runat="server">
    <link href="css/content.css" rel="stylesheet" type="text/css" />
</asp:Content>

这样，您就可以在内容页中使用您想要的任何细节覆盖master.css。

我就是这样做的。在我可以使用的地方，其他css覆盖了master，但是页面的css中不包含

显示

顶部

和

浮动

，因此没有值可以覆盖它们，所以为什么不将它们放在页面的css中，并使用页面中所需的值覆盖它们呢？这就是我正在做的。问题是我不知道如何覆盖

margin

。我将在firebug的图像中以编辑方式显示它。我认为我没有正确地解释我的问题。您的

top

值正在被覆盖。正如您所说的，

float:none

，将消除浮动。对于边距，您可以始终执行

margin:auto以覆盖该选项。至于显示，这取决于您，块或内联或其他任何您想要的页面。我刚刚将margin:auto
更改为margin:0
。这很有效。你其余的建议解决了所有其他问题