html - css - 从外部样式表转换为内联样式表；不确定一些 "dropdown"样式去了哪里

Question

我有一个样式表，旨在创建一个简洁的菜单，效果很好。问题是我需要将此菜单移动到需要不同样式元素的网页中。 编辑!当新页面加载样式表时，它完全把它们搞砸了!将样式应用到整个页面是不可能的!这就是整个问题所在......

由于我们显然没有能力有效地“范围”(并为每个人服务，对吧？)，或者即使我们这样做，我还没有发现如何......所以我想我应该移动在各个元素的样式上，问题是我不知道其中一些样式应该去哪里!

指向一个有助于澄清这一点的重要引用文献会很棒，或者只是一些关于元素去向的评论也可以!

这是 css - 它相当短!我已经删除了那些我已经知道去哪里的内容...

.dropbtn
{
   display: inline-block;
   color: white;
   text-align: left;
   padding: 8px 16px;
   text-decoration: none;
}
.dropdown:hover .dropbtn
{
   background-color: #111;
}
li.dropdown
{
   display: inline-block;
}
.dropdown-content
{
   display: none;
   position: absolute;
   background-color: navy;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
   color: white;
   padding: 8px 16px;
   text-decoration: none;
   display: block;
   text-aligh: left;
}
.dropdown-content a:hover
{
   background-color: blue;
}
.dropdown:hover .dropdown-content
{
   display: block;
}

这是原始菜单 - 名称经过编辑以保护有罪者!

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;" >
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/first.html" class="dropbtn">
      First Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/1st1st.html">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/second.html" class="dropbtn">
      Second Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/fourth.html" class="dropbtn">
      Fourth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/4th1st.html">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float:right" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn">
      Fifth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/5th1st.html">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

...我不知道如何为“悬停”之类的内容设置内嵌样式!

感谢您的指点。

Answer 1

快速的解决方案，将所有 CSS 放入 HTML 中，而不是内联，而是放在 Style 标记中，并从样式表文件中删除样式:

<style>
  .dropbtn
{
   display: inline-block;
   color: white;
   text-align: left;
   padding: 8px 16px;
   text-decoration: none;
}
.dropdown:hover .dropbtn
{
   background-color: #111;
}
li.dropdown
{
   display: inline-block;
}
.dropdown-content
{
   display: none;
   position: absolute;
   background-color: navy;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
   color: white;
   padding: 8px 16px;
   text-decoration: none;
   display: block;
   text-aligh: left;
}
.dropdown-content a:hover
{
   background-color: blue;
}
.dropdown:hover .dropdown-content
{
   display: block;
}
</style>

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;" >
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/first.html" class="dropbtn">
      First Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/1st1st.html">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/second.html" class="dropbtn">
      Second Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/fourth.html" class="dropbtn">
      Fourth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/4th1st.html">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float:right" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn">
      Fifth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/5th1st.html">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

我喜欢使用的另一个解决方案是 Mailchimp CSS 内联工具。它会获取您的样式表并自动将所有 CSS 样式内联。您只需从样式表中删除 CSS 样式，然后像往常一样将样式表与剩余的 CSS 样式一起包含进来。我把你的 CSS 和 HTML 放在那里，这就是输出。让我知道这两者是否有效。

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;">
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/first.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      First Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/1st1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/second.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Second Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/2nd1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/fourth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Fourth Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/4th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float: right;display: inline-block;" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Fifth Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/5th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

您可以在此处尝试 CSS 内联工具:https://templates.mailchimp.com/resources/inline-css/