Question

非常感谢大家。如前所述问题是我有CSS代码的地方。我最初没有点/句子前缀ul和li，这是一个绝望的最后一刻。 :-) 我确实阅读了W3S，StackO / f，HTMLDog，Tizag和所有其他优秀网站b4提问。但你现在和我在一起了。

另一个问题。我应该打开一个新问题吗？这个问题涉及原始代码块。

我的线条颜色没有变化。但如果我对每条线进行编码，颜色会发生变化。我想知道如何更改li CSS块中的颜色。

<!DOCTYPE html>
<HTML>



 <HEAD>
    <TITLE>Why I love learning HTML - Part 2</TITLE>
    </HEAD>

    Colors
    <BR>
    My favorite colors are:
    <BR>
    <UL>
    <LI><FONT SIZE=2 COLOR="red" >Navy</FONT>
    <LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Olive</FONT>
    <LI><FONT SIZE=2 COLOR="red" >Purple</FONT>
    <LI><FONT SIZE=2 COLOR="red" FACE="VERDANA">Teal</FONT>
    </UL

    </BODY>
    </HTML>

这是我第5周的HTML＆amp; CSS课程。当我问一个问题时，堆栈溢出网站总会弹出。所以我加入了，我有一个问题。我的CSS代码显示在我的网页上作为代码。代码的UL和LI部分不读取.ul和.li类。我已经看了很长时间的代码，无法弄清楚是什么问题。谢谢你的帮助

  <head>
    <meta charset="utf-8" />
        <title>Homepage</title>
        <style type="text/css">
        </style>
    </head>



 <body>
      .ul {
    margin:0;
        padding:0;
        color:#ff0000;
   }




 .li {
      display:inline;
      padding:0;
      margin:0;
      color:#000099;
   }
        <!-- Site navigation menu -->
     <ul>
        <li><a href="index.html">Home page</li></a> 
        <li><a href="EdEx.html">Education and Experience</li></a>
        <li><a href="pubs.html">Publications and Committees</li></a>
        <li><a href="links.html">Links</li></a>
    </ul>


    <h1>can't find the errors</h1>

   </body>
</html>

Answer 1

首先，欢迎来到HTML和CSS的世界。我会直截了当地说你发布的代码存在一些问题：

1。将CSS放在正确的位置

您的CSS代码目前未放在顶部的<style type="text/css">声明中，而是放在文档body中。这将作为文本输出到屏幕。

要解决此问题，只需将其全部移至style中的head元素：

<head>
    <style type="text/css">
        /* Styling goes here. */
    </style>
</head>

（出于渲染目的，样式永远不应该在文档的head之外声明。）

2。修复选择器

但是，一旦你修复了它，你的选择器仍然不会定位你的元素。这是因为您的CSS选择器前缀为.（.ul和.li）。 .前缀为ul。

要定位li和.元素，您只需删除ul { ... } li { ... }：

</a>

3。验证您的HTML

另外，您需要注意结束HTML标记。您的结束<li>代码必须位于<li><a href="...">...</li></a>代码中。变化：

<li><a href="...">...</a></li>

要：

{{1}}

Answer 2

您需要在

中包含CSS

<style> </style>

另外，请确保尽可能将其放在头部

Answer 3

因为CSS selector以“。”开头。是为了上课请改用ul，li，并在<style></style>中加入您的css样式。

Answer 4

这是因为您将CSS“代码”作为文本放在HTML中，而不是放在空<style>标记内。

Answer 5

进行内联样式的正确方法是在标记中使用style属性：

   <ul style="margin:0; padding:0; color:#ff0000;">

但不建议使用上述内容，因为随着网站中页面数量的增长，以及大量的内联样式，维护成为一场噩梦。

您要做的是嵌入式样式，但它不起作用，因为您需要在标记内部使用样式指令。

顺便说一句，使用ID总是更好的主意。事实上，这种样式将应用于应用程序中的每个无序列表，这通常不是您想要的。如果你给列表一个id，那么你可以像#myId {}那样引用它，然后样式将被限制在那个列表中。

最后，建议的做法是使用外部样式表，使用HTML链接标记：

     <link rel="stylesheet" type="text/css" href="styles.css" />

以下是您的原始代码，其中嵌入式样式位于正确的位置：

<head>
<meta charset="utf-8" />
    <title>Homepage</title>
    <style type="text/css">
    ul {
        margin:0;
        padding:0;
        color:#ff0000;
    }

    ul li {
        display:inline;
        padding:10;
        margin:0;
        color:#000099;
    }
    </style>
</head>
<body>

    <!-- Site navigation menu -->
    <ul>
       <li><a href="index.html">Home page</li></a> 
       <li><a href="EdEx.html">Education and Experience</li></a>
       <li><a href="pubs.html">Publications and Committees</li></a>
       <li><a href="links.html">Links</li></a>
   </ul>
</body>

内联CSS代码未被读取

5 个答案:

1。将CSS放在正确的位置

2。修复选择器

3。验证您的HTML