克隆站点，<div> 中的 <style>，如何将其转换为常规 CSS？

问题描述

我正在尝试克隆

https://www.sovereignselfdefense.com/

在 HTML 中。该网站建于卡贾比。客户希望将其移至 wordpress 主题。

当我下载网站时，我看到如下代码：

   <div class="container ">
      <div class="row align-items-center justify-content-center">
        
          <style>
  
  #block-1589827030126_0 {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
  }
  #block-1589827030126_0.block-type--blog .block {
    padding: 0; 
  }
  #block-1589827030126_0.block-type--offer .block {
    padding: 0;  
  }
  #block-1589827030126_0 .block {
    border: 4px none black;
    border-radius: 4px; 
  }
  @media (min-width: 768px) {
    #block-1589827030126_0 {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
    }
    #block-1589827030126_0.block-type--blog .block {
      padding: 0;  
    }
    #block-1589827030126_0.block-type--offer .block {
      padding: 0; 
    }
    #block-1589827030126_0 .block { 
    }
}
  @media (max-width: 767px) {
    #block-1589827030126_0 {
      text-align: left;
    }
  }
</style>

我做了一些谷歌搜索，这是过时的不正确的 HTML 约定。

如何将标签分离到外部 CSS 中？我尝试将 CSS 分离到标签的外部样式表中，如上所示，但设计失败了。客户希望将设计转换为 wordpress。我想我会先克隆该站点，然后创建一个自定义的 wordpress 主题。目前组织成单独的 HTML、CSS 和 JS 文件。 '

感谢您的帮助。

解决方法

确保在 HTML 中包含带有 id 的正确元素。在您的示例中，CSS 没有选择任何 HTML 标签。 #block-1589827030126_0 是一个 CSS 选择器，它以具有该 ID 的 HTML 元素为目标。我检查了该网站的源代码，它是那个 <style> 标签的兄弟：

除此之外，应该没有问题。它仍然是 CSS，所以当你从 CSS 文件加载它时它会工作得很好。不要忘记在 HTML 中链接外部 CSS，因为原始 HTML 中没有。

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