css - 从外部样式 sheet 转换为内联；不确定 "dropdown" 样式的去向
css - converting from an external style sheet to inline; not sure where some "dropdown" styles go
我有一种风格 sheet 旨在创建一个整洁的菜单，而且效果很好。问题是我需要将此菜单移动到需要不同样式元素的网页中。 编辑！当样式 sheet 被新页面加载时，它完全搞砸了！将样式应用于整个页面是不可能的！这就是整个问题所在...
由于我们显然没有能力 "scope" 有效地（并为每个人服务，对吗？），或者如果我们有能力，我还没有发现如何......所以我想我只是将样式移到单个元素上，问题是我看不到其中一些样式应该放在哪里！
指向有助于阐明这一点的重要参考的指针会很棒，或者只是对项目去向的一些评论也可以！
这是 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>
...我不知道如何为 "hover"!
之类的内容设置内联样式
感谢您的指点。
快速解决方案，将所有 CSS 放在 HTML 内，而不是内联，而是放在样式标签中，然后从样式 sheet 文件中删除样式：
<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 内联工具。它采用您的样式 sheet 并自动将所有 CSS 样式内联。您只需从样式 sheet 中删除 CSS 样式，然后像往常一样将样式 sheet 与其余 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/
您所做的是在菜单的 <ul> 上放置一个 ID。做一些类似 id="awesomemenu_1" 的事情（因为 ID 需要是唯一的，如果你想在页面上包含多个菜单，你必须有一个区分符）。
然后，在您的 CSS 文件中，您可以在所有已有的规则前加上 [id^=awesomemenu_] - 所以 [id^=awesomemenu_] .dropbtn 等等。 但是您将需要覆盖现有 CSS 中的一般规则 - 例如，听起来有些其他规则正在为您的 <ul> 设置水平或垂直样式/ <li>-items，不适用于您的菜单。不过，这很容易被覆盖。
我有一种风格 sheet 旨在创建一个整洁的菜单，而且效果很好。问题是我需要将此菜单移动到需要不同样式元素的网页中。 编辑！当样式 sheet 被新页面加载时，它完全搞砸了！将样式应用于整个页面是不可能的！这就是整个问题所在...
由于我们显然没有能力 "scope" 有效地（并为每个人服务，对吗？），或者如果我们有能力，我还没有发现如何......所以我想我只是将样式移到单个元素上，问题是我看不到其中一些样式应该放在哪里！
指向有助于阐明这一点的重要参考的指针会很棒，或者只是对项目去向的一些评论也可以！
这是 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>
...我不知道如何为 "hover"!
之类的内容设置内联样式感谢您的指点。
快速解决方案，将所有 CSS 放在 HTML 内，而不是内联，而是放在样式标签中，然后从样式 sheet 文件中删除样式：
<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 内联工具。它采用您的样式 sheet 并自动将所有 CSS 样式内联。您只需从样式 sheet 中删除 CSS 样式，然后像往常一样将样式 sheet 与其余 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/
您所做的是在菜单的 <ul> 上放置一个 ID。做一些类似 id="awesomemenu_1" 的事情（因为 ID 需要是唯一的，如果你想在页面上包含多个菜单，你必须有一个区分符）。
然后，在您的 CSS 文件中，您可以在所有已有的规则前加上 [id^=awesomemenu_] - 所以 [id^=awesomemenu_] .dropbtn 等等。 但是您将需要覆盖现有 CSS 中的一般规则 - 例如，听起来有些其他规则正在为您的 <ul> 设置水平或垂直样式/ <li>-items，不适用于您的菜单。不过，这很容易被覆盖。