0

私は 3 ページの Web ページを作成しました。外部の CSS スタイルシートを使用してナビゲーション リストを調整し、上部に色付きの背景が表示されるようにしています。

テーブル内のページにリストを作成しようとすると、インデントと縦方向のリストが機能しません。
問題を外部スタイルシートまでたどりました。

リストを適切にフォーマットできるように、スタイルシートの設定をオフにするにはどうすればよいですか?

[編集-さて、回避策を行いました。提案されたように外部スタイルシートのリンクを削除し、すべてのスタイル情報を頭に入れました。次に、ul の周りに div を作成し、li の周りに別の div を作成しました。li の周りに width: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 について覚えておくべきことは、一意であることです。mainNav の ID で 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 の inspect 要素を使用して、何かが特定の方法で表示されている理由を追跡し、CSS を修正します。これらのハックな修正方法は忘れてください。正しく修正してください。

于 2012-10-28T10:05:02.560 に答える
0

私があなたの求めていることを知っているなら、あなたはそれをすることができません。

firebug/chrome dev ツールを使用して検査し、上書きされているプロパティを見つけることができます。

それらを見つけたら、独自のスタイルシートで上書きできます。

ここでも特異性が重要であることを覚えておいてください。

うまくいかない場合は、セレクターに重みを追加するか、!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;}

結果は次のとおりです。

于 2012-10-28T08:08:13.263 に答える
-1

あなたの<ul>ようなクラスを設定することができます：

<ul class="sth">

ul次に、CSS スタイルシートで、次のようにクラス名を付けます。

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