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

【问题标题】：Cloning Site, <style> in <div>, how do I convert it to regular CSS?克隆站点，<div> 中的 <style>，如何将其转换为常规 CSS？
【发布时间】：2021-07-28 01:02:57
【问题描述】：

我正在尝试克隆

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 文件。 '

感谢您的帮助。

【问题讨论】：

如果您能够提取整个 css 文件，您仍然可以将其设置为 wordpress CSS 附加。 StackOverflow 有一个专门的 wordpress 网站here 也许他们可以给你更多建议你将不得不面对的大问题是数据库

标签： javascript html css wordpress cloning

【解决方案1】：

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

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

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

【讨论】：