Html 如何区分主页和子页上的CSS？我是一个新手，在制作一个可爱的网站的过程中。我现在已经想出了如何用一个漂亮的导航条来设置整个主页。现在我想开始链接到一些不错的子页面。我已经设置了链接，一切正常，但我很困惑如何将CSS从主索引页面分离到子页面_Html_Css

Html 如何区分主页和子页上的CSS？我是一个新手，在制作一个可爱的网站的过程中。我现在已经想出了如何用一个漂亮的导航条来设置整个主页。现在我想开始链接到一些不错的子页面。我已经设置了链接，一切正常，但我很困惑如何将CSS从主索引页面分离到子页面

html css

Html 如何区分主页和子页上的CSS？我是一个新手，在制作一个可爱的网站的过程中。我现在已经想出了如何用一个漂亮的导航条来设置整个主页。现在我想开始链接到一些不错的子页面。我已经设置了链接，一切正常，但我很困惑如何将CSS从主索引页面分离到子页面,html,css,Html,Css,例如，主页有一个漂亮的棕榈树的jumbotron CSS。但是我希望有一个子页面有同样的CSS技巧，背景是一束热带水果。然后另一个页面有另一个背景。我觉得我在这里遗漏了一些非常基本的东西，但我现在确定了如何将CSS从我的索引页面中分离出来，并将其从我希望使用不同CSS的子页面中分离出来。我甚至不知道该问什么问题，因为我一直在谷歌上搜索，而且我也没走多远基本上，我如何将主页上的设计与子页面分开 html { background: url(../images/mexicobeach.jpg

例如，主页有一个漂亮的棕榈树的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>

html{
背景：url（../images/mexicobeach.jpg）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
h1{
字体系列：“三色一号”，草书；
字号：82px；
文本对齐：居中；
利润率：60px0；
}
氢{
字体系列：“三色一号”，草书；
字体大小：120px；
文本对齐：居中；
利润率：60px0；
}
.导航{
位置：固定；
底部：0px；
左：0；
字体系列：“三色一号”，草书；
宽度：100%；
高度：50px；
填充：0px；
文本对齐：居中；
}
保险商实验室{
填充：10px；
背景：rgba（8102112,0.5）；
}
李{
显示：内联；
填充：10px 20px 0px 30px；
}
a{
颜色：白色；
}
墨西哥的史密斯











最简单的方法是将背景从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;

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

然后，每个页面上的HTML将如下所示：
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;

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

主页的
关于页面
用于时间表页等

我希望这有帮助
 在“href”属性中使用不同的值来链接文件中的另一个样式表。在这里，您可以了解更多信息。此外，不相关的，您可以稍微清理一下标题标记，并通过组合相同的属性和仅分离大小来简化标题标记：h1，h2{font-family:'Sansita-One'，草书；文本对齐：居中；边距：60px 0 0；}h1{font-size:82px；}h2{font-size:120px；}当然，您可能想交换它，因此h1是大字体，因为这是它们通常的工作方式，h1是最大的，h6是最小的。