css - 从外部样式表转换为内联样式;不确定某些“下拉”样式的去向

时间：2016-12-11 01:29:17

标签： html css inline stylesheet

我有一个样式表，旨在创建一个整洁的菜单，它很棒。问题是我需要将此菜单移动到需要不同样式元素的网页中。 修改！当样式表被新页面加载时，它会将它们完全拧紧！将样式应用到整个页面是一个非定位！这就是整个问题......

既然我们显然没有能力有效地“范围”（并且为每个人服务，对吧？），或者如果我们这样做，我还没有发现怎么样......所以我想我只是搬家了对于单个元素的样式，问题是我没有看到这些样式应该去哪里！

指向一个很好的参考资料，有助于澄清这一点很棒，或者只是对项目去向的一些评论也会有效！

这是css - 它相当短！我已经删除了那些我已经知道的地方...... 

>>> for s in strings:
...     print(re.match(expression, s))
...
<_sre.SRE_Match object; span=(0, 56), match='https://www.this.com/people-search/john-smith/e>
<_sre.SRE_Match object; span=(0, 60), match='https://www.this.com/people-search/jane-johnson>
<_sre.SRE_Match object; span=(0, 61), match='https://www.this.com/people-search/wendy-saad/e>
<_sre.SRE_Match object; span=(0, 61), match='https://www.this.com/people-search/nick-madison>
<_sre.SRE_Match object; span=(0, 60), match='https://www.this.com/people-search/tom-taylor/e>
<_sre.SRE_Match object; span=(0, 54), match='https://www.this.com/people-search/james-bates/>

这是原始菜单 - 为保护有罪而编辑的名称！

.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;
}

...我不知道如何为“hover”等内容设置内联样式！

感谢您的任何指示。

2 个答案:

答案 0 :(得分：2)

快速解决方案，将所有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 Inline工具。它会使用您的样式表并自动将所有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/

答案 1 :(得分：2)

您所做的是为您的菜单<ul>添加ID。做id="awesomemenu_1"之类的事情（因为ID必须是唯一的，如果你想在页面上包含多个菜单，你必须要有一个区分器。）

然后，在您的CSS文件中，您使用[id^=awesomemenu_]所有这些规则作为前缀 - 所以[id^=awesomemenu_] .dropbtn等等。 然而你需要覆盖现有CSS中的一般规则 - 例如，听起来像其他一些规则正在为<ul> / <li>设置水平或垂直样式 - 项目，不适用于您的菜单。但这很容易被覆盖。

相关问题
最新问题