从母版页中删除网页上的 CSS

发布于 2024-11-09 05:35:11 字数 1872 浏览 0 评论 0原文

我有多个可以协同工作的网页。它们中的大多数都具有来自主文件的相同 CSS。我遇到的问题是一个页面需要 css 稍有不同。我的意思是这样的：

Master 的 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 的 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;
  }

注意细微的差异（margin: auto, float: left .. 等）我希望这些差异不会发生在我的页面的 CSS 中。我知道 float: none 会删除 floats 但我如何删除 display、top 和 < code>margin 属性有什么不同？我只想更改类名，但所有页面都使用相同的 .js 文件，因此重命名它们将非常长/不需要。

建议？

有没有办法关闭主CSS或禁用这些类的CSS？

编辑这就是我所说的（箭头）：

在此处输入图像描述

原文

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 way to just turn off the master css or disable it for these classes?

Edit Here is what I am talking about (The arrow):

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

指尖上得阳光 2024-11-16 05:35:11

我这样做：

Master head 部分：

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

这样您就可以在内容页面中使用您想要的任何具体信息覆盖 master.css 。

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 原文

~没有更多了~