html - 停止在通用布局页面中崩溃 css 文件

Question

我设计了一个具有公共(public)布局页面的网页。公共(public)布局页面具有不同的 css 文件，其他页面具有不同的 css 文件。问题是，通用布局页面的 css 文件属性和其他 css 文件属性崩溃。然后设计变得一团糟。解决这个问题的任何想法。谢谢你..

layout css 一个属性

.newstyle
    {
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 15px;
        color: #FFFFFF;
        FLoat:left;

    }

其他页面css属性

.newstyle
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        color: #000000;
        text-decoration: none;

    }

我需要添加这两个属性，有很多属性是这样的。任何停止合并它们的解决方案？

Answer 1

我认为这里的关键在于您管理样式表的方式。创建一个通用样式表，您可以在其中定义每个页面中相同的样式。

例如(general.css):

div.content {
   width: 50em;
   background: lightblue;
   border: 1px solid blue;
}

然后您可以为每个页面制作不同的样式表，例如 (page1.css)

div.content {
   color: red;
   font-size: 1.25em;
}

和(page2.css)

div.content {
    color: blue;
    font-weight: bold;
}

在页面中，调用你需要的样式表:

<!-- page1.php -->
<link rel="stylesheet" type="text/css" href="general.css" />
<link rel="stylesheet" type="text/css" href="page1.css" />

<!-- page2.php -->
<link rel="stylesheet" type="text/css" href="general.css" />
<link rel="stylesheet" type="text/css" href="page2.css" />

备选方案

作为替代方案，您可以使用多个类。举个例子: div.content { 宽度:50em； 背景:淡蓝色； 边框:1px 纯蓝色； } .page1 { 红色; 字体大小:1.25em； } 。第2页 { 颜色:蓝色； 字体粗细:粗体；

然后您只需要一个样式表，并在您的 div 上调用两个类，例如:

<!-- page1.php -->
<div class="content page1">...</div>

<!-- page2.php -->
<div class="content page2">...</div>