2

本当にありがとうございました。前に述べたように、問題は CSS コードの場所にありました。元々、ul と li の前にドット/ピリオドを付けていませんでした。:-) 私は、W3S、StackO/f、HTMLDog、Tizag、および他のすべての優れたサイトを読み、質問をしています。しかし、あなたは今私と一緒に立ち往生しています。

別の質問です。新しい質問を開く必要がありますか? この質問は、元のコード ブロックに関するものです。

私の線の色は変わりません。しかし、個々の行をコーディングすると、色が変わります。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>

これは、HTML&CSS クラスの 5 週目です。Google で質問すると、常にスタック オーバーフローの Web サイトが表示されます。参加したので質問があります。CSS コードが Web ページにコードとして表示されます。コードの 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>
4

5 に答える 5

6

まず、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) を付けているためです。A.はclassセレクターの前に付けます。

あなたのulandli要素をターゲットにするには、単純に を削除します.:

ul { ... }
li { ... }

3. HTML の検証

余談ですが、HTML の終了タグに注意する必要があります。終了</a>タグはタグ内にある必要があります<li>。変化する：

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

に：

<li><a href="...">...</a></li>
于 2013-10-09T14:32:07.007 に答える
1

CSSを含める必要があります

<style> </style>

また、可能な限り頭の中に入れるようにしてください

于 2013-10-09T14:31:06.740 に答える
0

インライン スタイリングを行う正しい方法は、マークアップで 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>
于 2013-10-09T14:46:17.577 に答える
0

CSSセレクターは「.」で始まるため クラス用です。
代わりに を使用ulし、liに ur css スタイルを含めます<style></style>。

于 2013-10-09T14:31:20.540 に答える
0

<style>これは、空のタグ内ではなく、HTLM 内のテキストとして CSS の「コード」を配置したためです。

于 2013-10-09T14:31:25.347 に答える