0

我创建了一个三页网页，并且正在使用一个外部 css 样式表来调整我的导航列表，以便它们越过顶部并具有彩色背景。

当我尝试在表格内的页面上创建列表时，缩进和垂直列表不起作用。
我将问题追溯到外部样式表。

如何关闭样式表所做的设置以便正确格式化列表？

[编辑-好的，所以我做了一个工作。我按照建议删除了外部样式表链接，并将所有样式信息放入我的脑海中。然后我在 ul 周围做了一个 div ，在 li 周围做了一个 div ，这似乎已经成功了一半。在 li 周围，我设置了宽度：50px，这让我的垂直列表工作。list-style-type:square 仍然没有做任何事情，但我已经厌倦了今晚不再关心。]

<!DOCTYPE html>
<html>
<head>
<title>Elex267-Webpage</title>
<link rel="stylesheet" type="text/css" href="myStyle.css">
</head>

<body>
<!-- Banner at Top of Page ***********************************-->
<div style="background-color:blue; color:white;font-size:30px;">

<img src="Pics/camosun-white.png" alt="CamosunPNG" width="200" height="70" align="left">
<div align="center"style="margin-left:50%">Elex 267 Web Demo
<br>
Microchip TCP/IP Stack v3.02</div>
</div>
<!--*********************************************************-->
<!--NavBar Code *********************************************-->
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="features.htm">Features</a></li>
<li><a href="about.htm">About</a></li>
</ul>
<!--***************************************************-->
<h1>
Welcome to the features page of the website.<br>
</h1>
<p>
This web page is being run on the NM101 NorthMicro Pic Prototype Board with the LCD/Keypad and Network modules.
<br>
Features are:
</p>
<table border="1">
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table border="1">
<tr>
 <td>A</td>
 <td>B</td>
</tr>
<tr>
 <td>C</td>
 <td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
 <li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>

</body>
</html>

<!-- And the External CSS Stylesheet Code -->

 p {color:black;font-size:20px;background-color:white;}
 body {background-color:white;}
 ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
 li{float:left;}
 a{display:block;width:400px;background-color:#ff0000;color:white;}
 a:hover,a:active{background-color:#cc0000;}
4

4 回答 4

1

我刚刚阅读了您的编辑，虽然您似乎走了，但无论如何我还是要回答。不要放弃。CSS 在开始时可能会令人沮丧，并且难以实施。内联样式、字体标签地狱这一切似乎变得如此简单，直到您意识到 CSS 赋予您的样式的实际力量。我认为你应该做的就是暂时离开你的工作，阅读一些 CSS，这样你就可以更好地理解你在做什么，我将在这里给你一些建议帮助解决手头的问题，但我仍然认为您需要阅读更多内容。

  • 将样式从头脑中取出并返回到外部样式表中，这是您可能得到的最糟糕的建议。

  • 首先阅读特异性。如果存在冲突的规则，这就是 CSS 决定应用哪个规则的方式。例如采取以下代码：

    a{color:blue;text-decoration:underline;font-weight:bold;}
p{color:red;}
a{color:green;font-weight:normal;}

您的链接将变为绿色、带下划线且重量正常。这是因为绿色和正常的重量在蓝色和粗体之后按照阅读的顺序排列，这是最简单的规则，还有其他规则，比如它是内联的，它是一个 id 还是一个类等。阅读规则，您将了解如何编写 CSS 以将规则应用到您想要的位置。这就是可怕的“把它放在头脑中”建议的来源，因为该 CSS 将在外部 CSS 之后应用。仍然没有使它成为正确的方法。

  • 了解类和 ID。很快，ID 是您可以应用于元素的唯一名称，例如，您可以在 CSS 中使用 #mainNav{color:blue} 设置该 ID 的样式，关于 ID 要记住的是它们是唯一的。不要使用 ID 为 mainNav 的 5 个 UL（这样做的主要原因是您可以使用它们来识别它们，例如在 js 或 jQuery 中）。如果您有多个需要使用类的相同样式的东西，那么类的好处是您可以将它们链接起来，因此作为一个简单的示例，请考虑以下代码：

    .blue{color:blue}
.underlined{text-decoration:underline}
.bold{font-weight:bold}
第一次阅读似乎有点愚蠢，但现在看看你如何应用它。 
<p class="bold blue">This is some blue text<span class="underlined"> some of it is underlined</span> and some of it isn't</p>

这是您需要解决问题的地方。如果您只想将这些列表样式应用于您的导航，添加一个类将解决它级联到其他列表的问题。请参阅以下内容：

.nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.nav li{float:left;}
.nav a{display:block;width:400px;background-color:#ff0000;color:white;}
.nav a:hover,a:active{background-color:#cc0000;}

<div class="nav">
   <ul>
       <li></li>
   </ul>
 </ul>

您创建的任何其他列表都不会采用这些样式。基本上，您希望您的外部样式表从您的基础开始，然后随着您的进展而变得更加具体。因此，您希望在每个列表中的样式位于顶部，并位于 ul 和 li 或 ol 和 li 元素上，然后随着您在表格中进一步向下，您可以得到更具体的样式。

远离内联 CSS 远离头部 CSS

相信我，学会正确地做这件事，你会很高兴，你永远不会明白为什么你会这样做。使用 Chrome 的检查元素来追踪为什么某些东西以某种方式显示，然后修复 CSS，忘记这些修复它的黑客方法。把它修好。

于 2012-10-28T10:05:02.560 回答
0

如果我知道你的要求，你不能那样做。

您可以使用 firebug/chrome 开发工具检查并找到被覆盖的属性。

一旦你找到它们，你就可以在你自己的样式表中覆盖它们。

请记住，这里的特异性也很重要。

如果它不起作用，您可能需要为选择器添加权重，或使用 !important 关键字。

于 2012-10-28T08:05:07.660 回答
0

所以你想保留工作表中的样式，只是不影响页面上的列表？为什么不给该列表一个特定的 ID 和不同的样式呢？

例如，我刚刚调用了你的列表 #cellul 并给它一个 10px 的边距来展示不同的样式：

p {color:black;font-size:20px;background-color:white;}
body {background-color:white;}
ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
li{float:left;}
a{display:block;width:400px;background-color:#ff0000;color:white;}
a:hover,a:active{background-color:#cc0000;}
#cellul{list-style-type:none;margin:10px;padding:0;overflow:hidden;}

结果如下：JsFiddle

于 2012-10-28T08:08:13.263 回答
-1

你可以为你的<ul>喜欢设置一个类：

<ul class="sth">

然后在 CSS 样式表中，把你的类名放在后面ul：

ul.sth {list-style-type:none;margin:0;padding:0;overflow:hidden;}
于 2012-10-28T08:07:19.753 回答