【问题标题】：How to change from inline CSS to external?如何从内联 CSS 更改为外部 CSS？
【发布时间】：2021-09-10 18:33:44
【问题描述】：

我对 css、html 和 asp.net 非常陌生。我正在尝试克隆一个网站以学习网络技术概念。好吧，当我用内联 CSS 编写所有内容时，一切正常。但是当把这些内联的 css 代码放到一个外部文件中时，一切都搞砸了。我怎样才能解决这个问题？当我使用外部 css 时，我总是遇到这个麻烦。我以前的一些代码正在影响我的后续或以后的代码，我遇到了这个问题。

我不明白 CSS 是如何工作的。我使用带点的类，带 # 的 ID，但不明白如何在我的 html 代码之间按顺序排列它们。

我想添加一个JSFiddle 当我将鼠标悬停在食谱上时，会弹出一个新的 div。弹出的 div 中有 3 个新的 div。第一个 div 有一个包含汤、豆类等信息的列表。我希望这 3 个 div 彼此相邻。我希望能够为它们设计样式。我不知道如何使用 class 和 id 设置嵌套元素的样式。这会导致麻烦。要澄清嵌套元素，请查看以下内容： div 段落 div 列表一种如何从外部 CSS 文件而不是内联 CSS 设置这些元素的样式，例如 style="bla bla bla"

这是我的代码和图片。

.auto-style1 {
  width: 100%;
}

.aMain {
  text-decoration: none;
  color: black;
  background-color: #ddd6d6;
  display: inline-flex;
  width: 100px;
  height: 30px;
  font-size: 13.5px;
  justify-content: space-between;
  align-items: center;
  margin-left: 180px;
}

.divLogin {
  border-style: solid;
  border-width: 1px;
  height: 46px;
  width: 120px;
  float: right;
  margin-right: 180px;
  margin-left: 16px;
  margin-top: 12px;
  background-color: #ffffff;
  border-radius: 5px;
}

.pIcon {
  background-color: transparent;
  align-items: center;
  margin-top: 8px;
  margin-left: 6px;
}

.pLoginText {
  float: right;
  margin-right: 6px;
  margin-top: 5px;
  font-size: 15px;
  text-align: center;
}

.divSendRecipe {
  border-style: solid;
  border-width: 1px;
  width: 140px;
  height: 46px;
  float: right;
  margin-top: 12px;
  border-width: 1px;
  background-color: #ff6a00;
  border-radius: 5px;
}

.pSendRecipe {
  background-color: transparent;
  align-items: center;
  margin-top: 8px;
  margin-left: 6px;
}

.divSearch {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 426px;
  height: 46px;
  float: right;
  margin-top: 12px;
  margin-right: 16px;
  border-width: 1px;
  background-color: #ffffff;
}

.divSearch .divSearchContainer {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 426px;
  height: 200px;
  float: right;
  margin-top: 2px;
  border-width: 1px;
  background-color: #ffffff;
  z-index: 1;
  position: relative;
  display: none;
}

.divSearch:hover .divSearchContainer {
  display: block;
  background-color: #ffffff;
}

.divSearch .divSearchContainer span {
  display: inline-block;
  margin-left: 10px;
  margin-top: 12px;
  font-size: 18px;
  font-weight: bold;
  color: white;
}

.divSearch .divSearchContainer a {
  display: inline-block;
  background-color: #ddd6d6;
  width: 80px;
  height: 24px;
  padding: 3px 0 0 0;
  margin: 4px 0 0 8px;
  border-radius: 25px;
  text-decoration: none;
  color: white;
  text-align: center;
  font-size: 16px;
}

.divSearch input[type=search] {
  all: unset;
  font: 16px system-ui;
  color: #fff;
  height: 100%;
  width: 360px;
  padding-left: 6px;
  float: left;
}

.divSearch button {
  all: unset;
  cursor: pointer;
  width: 46px;
  height: 100%;
  float: right;
  font-size: 16px;
  font-weight: lighter;
  background-color: #d91616;
  color: white;
  text-align: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.divSearch button:hover {
  font-size: 20px;
}

.table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 500px;
  height: 70px;
  margin-left: auto;
  margin-right: auto;
}

.table a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.table td {
  width: 25%;
  font-size: 15px;
  text-align: center;
  vertical-align: top;
  position: relative;
  border: 1px solid;
}

.table td .divContainer {
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  width: 732px;
  height: 400px;
  margin-top: 52px;
  border-width: 1px;
  background-color: #ffffff;
  z-index: 1;
  position: relative;
  display: none;
}


/*.table td .divContainer div {
                    border-style: solid;
                    border-width: 1px;
                    width: 240px;
                    height: 300px;
                    background-color: brown;
                    margin-left: 2px;
                    margin-right: 2px;
                    float:left;
                    margin-top: 52px;
                    position: absolute;
                    display: inline;
                }*/


/*.table td .divContainer ul li a {
                    display: inline-block;
                    background-color: #ddd6d6;
                    width: 244px;
                    height: 24px;
                    padding: 3px 0 0 0;
                    margin: 4px 0 0 8px;
                    border-radius: 25px;
                    text-decoration: none;
                    color: blue;
                    text-align: left;
                    font-size: 16px;
                }*/

.table td:hover .divContainer {
  background-color: #b50c0c;
  display: block;
}

.image {
  height: 40px;
  width: 40px;
  border: none;
  position: absolute;
  top: 23px;
  left: 42px;
}

<head runat="server">
  <title></title>
  <link href="testCSS.css" rel="stylesheet" />
  <link rel="stylesheet" href="/fontAwesome/css/all.min.css" />
  <link rel="stylesheet" href="style.css" />

  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

<body>
  <form id="form1" runat="server">
    <div style="height: 30px; background-color: #ddd6d6">
      <a href="mainPage.aspx" class="aMain"><i class="fas fa-home"></i>MAIN PAGE</a>
    </div>
    <div style="height: 70px; background-color: #ffffff">
      <a href="mainPage.aspx">
        <asp:Image ID="Image1" runat="server" Height="45px" Width="120px" ImageUrl="pics/logo.png" title="Logo" Style="margin-left: 180px; margin-top: 12px; float: left;" />
      </a>
      <div class="divLogin">
        <p class="pLoginText">
          <strong>Log In<br />
                            or Sign Up</strong>
        </p>
        <p class="pIcon"><i class="fas fa-2x fa-user-circle"></i></p>
      </div>
      <div class="divSendRecipe">
        <p style="margin-right: 10px; margin-top: 15px; text-align: center; float: right; font-size: 15px;"><strong>Send Recipe</strong></p>
        <p class="pIcon"><i class="fas fa-2x fa-marker"></i></p>
      </div>
      <div class="divSearch">
        <input type="search" id="query" name="q" placeholder="Search cook or recipe..." />
        <button><i class="fas fa-search"></i></button>
        <div class="divSearchContainer">
          <div>
            <span>Popular Searchs</span><br />
            <a href="#">cake</a>
            <a href="#">cookie</a>
            <a href="#">pasta</a>
            <a href="#">dessert</a>
            <a href="#">wet cake</a>
            <a href="#">browni</a>
            <a href="#">pastry</a>
          </div>
          <div><span>My Last Searchs</span></div>
        </div>
      </div>
    </div>
    <div style="z-index: -1; height: 70px; background-color: #d91616;">
      <table class="table">
        <tr>
          <td class="td"><a href="recipesPage.aspx">RECIPES<img class="image" src="pics/cook book.png" /></a>
            <div class="divContainer">
              <div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">
                <ul>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Soaps</a></li>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Legume Recipes</a></li>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Vegetable Dishes</a></li>
                  <li style="text-align:left;"><a style="width:230px;height:30px;">Meat Dishes</a></li>
                </ul>
              </div>
              <div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px; float:left;">div2</div>
              <div style="width: 240px;height: 300px;background-color: brown; margin-left: 2px; margin-right:2px; margin-top:6px;  float:left;">div3</div>
            </div>
          </td>
          <td class="td"><a href="videosPage.aspx">VIDEOS<img class="image" src="pics/camera.png" /></a>
            <div class="divContainer" style="margin-left:-124px;">videos</div>
          </td>
          <td class="td"><a href="trendsPage.aspx">TRENDS<img class="image" src="pics/trends.png" /></a></td>
          <td class="td"><a href="suggestionsPage.aspx">SUGGESTIONS?<img class="image" src="pics/what should i cook.png" /></a></td>
        </tr>
      </table>
    </div>
    <div style="width: 1000px; height: 1000px; margin-left: auto; margin-right: auto; background-color: #D9FFFF">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </div>
  </form>
</body>

这就是我的代码的作用：

这就是我想要它做的：

这就是我的网站的外观。

【问题讨论】：

如果您将 CSS 放在外部 .css 文件中，那么您需要使用 <link> 标签告诉您的页面它的存在。您的示例中没有显示一个，因此不清楚您是否这样做了。详情请见tutorialrepublic.com/css-tutorial/css-get-started.php。
当您正在寻找理解这些概念的来源时，这可能会对您有所帮助。 developer.mozilla.org/en-US/docs/Learn/CSS
P.S.您显示的 HTML 并未反映屏幕截图的所有内容，因此我们甚至无法判断 CSS 是否真的有效（一旦正确包含）
@ADyson 哦，对不起，我没有把那部分放在这里，已经添加到我的页面上。我的麻烦通常是由其他一些css代码影响我的代码引起的。我无法处理这个。
好的，所以请编辑您的问题以显示 a) CSS 链接和 b) 更完整的 HTML 示例，以反映屏幕截图。

标签： html css

【解决方案1】：

当将这些内联 css 代码放入外部文件时，一切都搞砸了。我怎样才能解决这个问题？当我使用外部 css 时，我总是遇到这个问题。

您可以将 css 放在单独的 .css 文件中，然后将其导入 HTML 文件中的 <head></head> 标记内。

我认为下面的例子解释得很清楚。

在这里，我的 CSS 位于一个单独的 .css 文件中，名为 myStyle.css。然后我将它导入到我的 HTML 文件中。 请记住，在此示例中，两个文件都在同一个目录中。当然，您可以将它们放在任何地方并相应地更改href。

/* myStyle.css */

.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}

<head>
<link href="myStyle.css" rel="stylesheet">
</head>
<body>

</body>

【讨论】：

好吧，我已经认出了我的页面的 css 文件，但没有在这里分享那部分。我面临这样的麻烦：我的代码在某种程度上受到其他代码的影响。我无法克服它。
你的代码特异性强于“其他代码”吗？

【解决方案2】：

问题中的代码分享

不是将您的 CSS 代码分离到另一个文件中，而是将其作为文本放入文件中，而不是作为 CSS 进行评估。首先，尝试将该 CSS 代码放入 style 标记中作为概念验证：

<style type="text/css">
.table {
border-collapse: collapse;
table-layout: fixed;
width: 500px;
height: 70px;
margin-left: auto;
margin-right: auto;
}

.table a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.table td {
    width: 25%;
    font-size: 15px;
    text-align: center;
    vertical-align: top;
    position: relative;
    border: 1px solid;
}

    .table td .divContainer {
        border-style: solid;
        border-width: 1px;
        border-radius: 5px;
        width: 732px;
        height: 400px;
        margin-top: 52px;
        border-width: 1px;
        background-color: #ffffff;
        z-index: 1;
        position: relative;
        display: none;
    }

        .table td .divContainer div {
            border-style: solid;
            border-width: 1px;
            width: 240px;
            height: 300px;
            background-color: brown;
            margin-left: 2px;
            margin-right: 2px;
            margin-top: 52px;
            float:left;
            position: absolute;
            display: inline;
        }

        .table td .divContainer ul li a {
            display: inline-block;
            background-color: #ddd6d6;
            width: 244px;
            height: 24px;
            padding: 3px 0 0 0;
            margin: 4px 0 0 8px;
            border-radius: 25px;
            text-decoration: none;
            color: blue;
            text-align: left;
            font-size: 16px;
        }

    .table td:hover .divContainer {
        background-color: #b50c0c;
        display: block;
    }
</style>

一旦成功，您就可以继续将 CSS 代码分离到一个文件中。

链接 CSS 文件

让我们创建一个名为 style.css 的 CSS。记住它的位置并将此代码添加到您的 head 标签：

<link rel="stylesheet" href="/my/correct/path/style.css">

现在，在浏览器中加载您的页面。查看开发工具的控制台。如果您看到指出文件未成功加载的错误，则说明您指定了错误的路径。修复路径，直到加载您的页面不再抱怨文件未正确加载。

移动 CSS

现在复制前面讨论过的style 标记的内部内容并粘贴到你的style.css 中。不要复制<style type="text/css">，也不要复制</style。删除 style 标记。重新加载页面。确保现在 style.css 不包含任何其他内容。一直工作直到页面反映您的样式。

解决冲突

现在，假设您有不同的外部 CSS 与您的规则相冲突，第一个问题是：您需要外部 CSS 吗？如果没有，则不要加载它。如果是，则调整您的规则，使其比远程 CSS 的规则更具体，如果您希望您的 CSS 得到反映。如有必要，更改您的结构。一点一点地处理您的结构和设计，直到您解决所有冲突的规则并且您的页面看起来不错。

在多个浏览器中测试

完成更改后，在多个浏览器中加载您的页面，看看是否某些浏览器不能很好地处理您的设计。如果是这样，找出问题所在并加以解决。

【讨论】：

我添加了我的全部代码，先生。其他部分的css代码与我的表格代码在同一个文件中。以前的部分运行良好。但表格部分无法正常工作。首先，我只添加了表格部分的代码。但现在我添加了我所有的代码。表格区域中的一些代码正在影响我最里面的 div 的代码，即 divContainer 的 div
@electriciansmurf 好的，请创建一个有问题的 Fiddle 并解释其意图是什么以及你得到了什么。审查你所有的代码太费时间了，所以，让我们现在只关注一个问题，一旦我们弄清楚问题是什么以及解决方案是什么，希望你能够将同样的想法应用到另一个问题上冲突。如果没有，那么我们也进入下一个问题。所以，我们应该一次解决一个定义明确的问题。
好的，我不知道如何创建 Fiddle，但我会搜索它。因此，我添加了 2 张我想要的和我的代码功能的图片，而不是 Fiddle。
@electriciansmurf 我见过他们，但是为了将行为从一张图片转换为另一张图片，必须解决所有问题。这可能需要一些艰苦的工作。我的观点是，我们应该先解决一个问题并解决它。也许如果我们这样做，那么您将能够解决其他问题。如果解决问题仍然让您有疑问，那么我们可以解决第二个问题，依此类推。因此，让我们关注最小的、可重现的示例。关于创建小提琴，请访问jsfiddle.net，在此处添加您的问题，保存并分享链接。
@electriciansmurf 但是，这里的人不太愿意解决你所有的问题，而不是一次解决一个问题。