如何区分主页面和子页面的 CSS？答案

【问题标题】：How to differentiate CSS on main pages and subpages?如何区分主页面和子页面的 CSS？
【发布时间】：2014-10-25 01:26:01
【问题描述】：

我是一个新手，正在制作一个可爱的网站。我现在已经弄清楚如何使用漂亮的导航栏设置整个主页。现在我想开始链接到一些不错的子页面。我设置了链接，一切正常，但我对如何将 CSS 从主索引页面分离到子页面感到非常困惑。

例如，主页上有一个漂亮的棕榈树的 jumbotron CSS。但我希望子页面具有相同的 CSS 技巧，背景中有一堆热带水果。然后另一个页面有另一个背景。我觉得我在这里遗漏了一些非常基本的东西，但我现在确定如何将 CSS 从我的索引页面与我想要不同 CSS 的子页面分开。我什至不确定要问什么问题，因为我一直在谷歌上搜索，而且我还没有走远。

基本上，我如何将主页面上的设计与子页面分开？

html { 
  background: url(../images/mexicobeach.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  font-family: 'Sansita One', cursive;
  font-size: 82px;
  text-align: center;
  margin: 60px 0 0 0;
}

h2 {
   font-family: 'Sansita One', cursive;
   font-size: 120px;
   text-align: center;
   margin: 60px 0 0 0;
}

.nav {
  position:fixed;
  bottom:0px;
  left: 0;
  font-family: 'Sansita One', cursive;
  width:100%;
  height:50px;
  padding: 0px;
  text-align: center;
}

 ul {
      padding: 10px;
      background: rgba(8, 102, 112, 0.5);
    }
    li {
      display: inline;
      padding: 10px 20px 0px 30px;
    }
      a {
      color: white;
    }

    <!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="css/mexicostylesheet.css" />
  <link href='http://fonts.googleapis.com/css?family=Sansita+One' rel='stylesheet' type='text/css'>
  <title>Smithies in Mexico</title>
  <style> 
  </style>
</head>

<body>
<div class="nav">
    <div class="container">
      <ul id="navigation">
        <li><a href="subpageabout.html">About</a></li>
        <li><a href="subpageschedule.html">Schedule</a></li>
        <li><a href="subpagestay.html">Stay</a></li>
        <li><a href="subpagedo.html">Do</a></li>
        <li><a href="subpageeat.html">Eat</a></li>
        <li><a href="subpagemexicanmadlibs.html">Mexican Mad Libs</a></li>
        <li><a href="subpagetacogame.html">Taco Game</a></li>
        <li><a href="subpagecountdown.html">Countdown</a></li>
        <li><a href="subpagequiz.html">Quiz</a></li>
    </ul>
  </div>
</div>

  <div class="jumbotron"
    <div class="container">
        <h1>Smith Ladies Go To</h1>
        <h2>Mexico</h2>
        </div>
      </div>
    </div> 


</body>

【问题讨论】：

在“href”属性中使用不同的值来链接文件中的另一个样式表，，给你可以了解更多，w3schools.com/tags/tag_link.asp

标签： html css

【解决方案1】：

最简单的方法是从 html 选择器中取出背景并将其移至正文选择器。然后，您只需为正文创建多个类并在每个页面上调用该类。

例如，在您的 css 中，它可能看起来像这样：

body.home {background: url(../images/mexicobeach.jpg) no-repeat center center fixed; 
body.about {background: url(../images/floridabeach.jpg) no-repeat center center fixed;
body.schedule {background: url(../images/bahamabeach.jpg) no-repeat center center fixed;

那么您在每个页面上的 HTML 将如下所示：

<body class="home"> for the home page
<body class="about"> for the about page
<body class="schedule"> for the schedule page, etc

希望对你有帮助！

【讨论】：

另外，不相关的，您可以稍微清理一下标题标签，并通过组合相同的属性并仅将大小分开来使其更加精简： h1, h2 {font-family: 'Sansita One '，草书；文本对齐：居中；边距：60px 0 0 0； } h1 {font-size: 82px;} h2 {font-size: 120px;} 当然，你可能想要交换它，所以 h1 是大字体，因为它们通常是这样工作的，h1 是最大的，h6是最小的。