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

Question

我正在尝试克隆

https://www.sovereignselfdefense.com/

在 HTML。该站点是用 kajabi 构建的。客户想将其移动到 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 文件。 '

感谢您的帮助。

Answer 1

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

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

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

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

Cloning Site, <style> in <div>, how do I convert it to regular CSS?

javascript

html

css

wordpress

cloning