Question

我想在我的投资组合网站上有一个main.CSS（我可以在每个子页面上放置不同的图像和文本），但我不知道这是如何工作的。所以我现在每个子页面都有10个不同的HTML文件，这对我来说非常愚蠢。我真的很感激，如果你可以帮助我（我很抱歉，但我只是HTML和CSS的初学者）提前感谢！

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

Answer 1

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

类似的东西：

* { box-sizing: border-box; }
.video-background {
 background: #000;
 position: fixed;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -99;
 }

.video-foreground,
.video-background iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 }

 #vidtop-content {
 top: 0;
 color: #fff;
 }

@media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}

@media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}

@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}

@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

然后从HTML页面中提取代码并将其放入＆＃34; mystyle.css＆＃34;外部CSS页面。

Answer 2

将您的CSS保存在单独的文件中（您可以将其命名为style.css）。然后在.html文件的 head 标记中包含此标记。

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

对于包含此标记的每个.html文件，都将应用链接的.css文件。

Answer 3

在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来解决这个问题。当然，你可以使用数据库，但它更复杂。

如何制作一个main.CSS而不是HTML子页面

3 个答案: