如何制作一个主css而不是HTML子页面

我想有一个main.CSS为我的投资组合网站(在那里我可以把不同的图像和文本在每个子页面)，但我不知道这是如何工作的。所以我现在每个子页面有10个不同的HTML文件，这对我来说很愚蠢。我真的很感激，如果你能帮助我(我很抱歉，但我只是一个初学者在HTML和CSS)提前感谢!

.dash_horizontal{
      border: 0 none;
      border-top: 1px dashed #322f32;
      background: none;
      height:0;
      margin-left: 30px;
      margin-right: 40px;
      margin-top: 0px;
    } 
    
    h1 { 
      font-family: helvetica, 'Trebuchet MS', Arial, sans-serif;
      background-color: #ffffff;
      font-size: 14px;
      text-align: -10px;
      font-weight: 500;
      margin-top: 20px;
      margin-bottom: -10px;
    }
    
    p { 
      font-family: helvetica, 'Trebuchet MS', Arial, sans-serif;
      background-color: #ffffff;
      font-size: 14px;
      font-style: normal;
      font-variant: normal;
      font-weight: 300;
      text-align: 11px;
    }    
    #column-left {
      float: left;
      width: 14%;
      margin-top: 10px;
    }
    #column-right {
      float: left;
      width: 10%;
      margin-left: -10px;
      margin-top: 20px;
    
    }    
    table,
    th,
    td {
      border: 1px dashed #000000;
      border-collapse: collapse;
      border-right: 1px;
      border-left: 1px;
      border-top: 1px;
      font-family: helvetica, 'Trebuchet MS', Arial, sans-serif;
      font-size: 14px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 21px;
    }
    
    th,
    td {
      padding: 14px;
      border: 1px, dashed #000000;
      border-style: none none dashed;
      color: #000000;
      background-color: #fff;
    }

    <img src="images/logo_3.jpg" title="logo" alt="image1">
 
    <div class="dash_horizontal"> </div>
    
    <div id="column-left">
    
    <h1> hello world </h1>
    
    <div id="column-right">
      
    <div class="table">
    
    <table width="50%" border="0" align="center"> 
        <tr>
        <td>text<br /><a href="Page_1.html"> <img src="images/frame_1.jpg" 
        style="border:0px solid black;" alt="image1" width="190" height="140"/></a>
        <br />info</td> 
        <td>text<br /><a href="Page_2.html"> <img src="images/frame_2.jpg" 
        style="border:0px solid black;" alt="image2" width="190" height="140"/></a>
        <br />info</td> 
        <td>text<br /><a href="Page_3.html"> <img src="images/frame_3.jpg" 
        style="border:0px solid black;" alt="image3" width="190" height="140"/></a>
        <br />info</td>
        <td>text<br /><a href="Page_4.html"> <img src="images/frame_4.jpg" 
        style="border:0px solid black;" alt="image3" width="190" height="140"/></a>
        <br />info</td> 
        <td>text<br /><a href="Page_5.html"> <img src="images/frame_5.jpg" 
        style="border:0px solid black;" alt="image5" width="190" height="140"/></a>
        <br />info</td>   
        </tr>
    
        <tr>
        <td>text<br /><a href="Page_6.html"> <img src="images/frame_1.jpg" 
        style="border:0px solid black;" alt="image6" width="190" height="140"/></a>
        <br />info</td> 
        <td>text<br /><a href="Page_7.html"> <img src="images/frame_2.jpg" 
        style="border:0px solid black;" alt="image7" width="190" height="140"/></a>
        <br />info</td> 
        <td>text<br /><a href="Page_8.html"> <img src="images/frame_3.jpg" 
        style="border:0px solid black;" alt="image8" width="190" height="140"/></a>
        <br />info</td>
        <td>text<br /><a href="Page_9.html"> <img src="images/frame_4.jpg" 
        style="border:0px solid black;" alt="image9" width="190" height="140"/></a>
        <br />info</td> 
        <td>text<br /><a href="Page_10.html"> <img src="images/frame_5.jpg" 
        style="border:0px solid black;" alt="image10" width="190" height="140"/></a>
        <br />info</td>   
        </tr>  
    
    </table>
    </div>

W3Schools有一个很棒的初学者教程。只需创建您的外部CSS页面，然后在每个HTML页面中引用它。

类似:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

然后将代码从HTML页面中拉出，并将其放入"mystyle.css"外部CSS页面。

将css保存在一个单独的文件中(您可以将其命名为style.css)。然后在你的。html文件的head标签中包含这个标签。

<link rel="stylesheet" href="style.css">

对于每个包含这个标签的。html文件，它将应用链接的。css文件

在css文件中只能放置:

.dash_horizontal{
  border: 0 none;
  border-top: 1px dashed #322f32;
  background: none;
  height:0;
  margin-left: 30px;
  margin-right: 40px;
  margin-top: 0px;
} 
h1 { 
  font-family: helvetica, 'Trebuchet MS', Arial, sans-serif;
  background-color: #ffffff;
  font-size: 14px;
  text-align: -10px;
  font-weight: 500;
  margin-top: 20px;
  margin-bottom: -10px;
}
p { 
  font-family: helvetica, 'Trebuchet MS', Arial, sans-serif;
  background-color: #ffffff;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 300;
  text-align: 11px;
}    
#column-left {
  float: left;
  width: 14%;
  margin-top: 10px;
}
#column-right {
  float: left;
  width: 10%;
  margin-left: -10px;
  margin-top: 20px;
}    
table,
th,
td {
  border: 1px dashed #000000;
  border-collapse: collapse;
  border-right: 1px;
  border-left: 1px;
  border-top: 1px;
  font-family: helvetica, 'Trebuchet MS', Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 21px;
}
th,
td {
  padding: 14px;
  border: 1px, dashed #000000;
  border-style: none none dashed;
  color: #000000;
  background-color: #fff;
}

我认为你考虑每个页面的模板。例如，您需要使用PHP。但这是另一回事。您需要检查，如果您的服务器支持php，那么您需要使用简单的php include来解决这个问题。当然，您可以使用数据库，但这更复杂。

相关内容

最新更新

热门标签：