2013-01-19 15 views
8

私はそれを楽にしてください。私はただHTMLを学んでいるだけです。 http://www.w3.org/TR/html-markup/syntax.html#commentsと私は、そのような彼らは、HTMLコメントは!と次のダッシュの間にスペースを入れず<!-- text -->であると言い、このhttp://www.w3schools.com/tags/tag_comment.aspなぜ "<! - "はスタイルルールをコメントアウトしますが、 "<! - "はしないのですか?

として見てきた他の多くのサイトにAccroding

しかし、私は<! -- test -->を書いたときに実際に無視される内容です。注意してください。ここ<!--

の間に追加のスペースは、HTMLコード

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
<!-- td {border: 1px solid gray;} --> 
    </style> 
</head> 
<body> 

<table> 
    <tr> <td>  test </td> </tr> 
</table> 

</body> 
</html> 

は、あなたがそれを実行する前に、テーブルに境界線を持っているか、ないはず今ですか?

text/cssの内容が実際にコメントアウトされている場合、テーブルには枠線が付いていないはずです。しかしそれはそうです。私は今

<! -- td {border: 1px solid gray;} --> 

お知らせ余分なスペースに行を変更したとき、私は今

Firefoxの18.0もLinuxのミント14の下クロームバージョン24.0.1312.52にこれを試してみました、と。次に、期待どおりの境界線がないテーブルが表示されます。

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
    </style> 
</head> 
<body> 

<table> 
    <tr> <td>  test </td> </tr> 
</table> 

</body> 
</html> 

質問はです::コメント<!-- text -->ですか<! -- text -->がある私は実際に行全体を削除したときにも同じことが起こりますか?

答えて

19

CSSはHTML <!-- comment here -->のコメントを受け付けていません。代わりに、CSSは/* comment */を使用して行をコメントします。代わりにそれを試してください。

+0

ウェブ開発者のための優れたリソースはjsfiddle.netです。インターネット上でコードをテストし、トラブルシューティングの際に他の人が利用できるようにすることは非常に便利であり、 。 –

+2

+1イランビアラ、あなたはそれを釘付けにした。 @Nasser:HTMLコメントは ''にエスケープする必要がありますが、コメントが作成された時点ではCSSブロック内にいるので、他のルールも適用されます。 – weltraumpirat

+2

さて、本当にhtmlがドキュメントを構築しているのですが、CSSはそれをスタイリングしています。それらは本当に別々ですが、HTMLページにリンクされた外部スタイルシートにインラインスタイルを変更する必要があります。 –

11

文字列<! --は何もコメントしません。代わりに、CSSでは構文エラーであり、CSS error processingルールはこの場合、すべてのスタイルシートが無視されることを意味します。

文字列<!--は、コメントを開始しませんが、CSS commentルールによって、特定のコンテキストでは(-->と同様に)許可され、無視されます(スキップされます)。このように、スタイルシート

<!-- td {border: 1px solid gray;} --> 

{border: 1px solid gray;} 

としているあなたは、W3C CSS Validatorを使用して、これをチェックアウトすることができます。最初のケースでは、スペースでエラーが報告され、有効なCSSルールは報告されません。 2番目のケースでは、エラーは報告されず、ルールは有効として表示されます。

CSSでは、コメントは常に/*で始まり、*/で終わります。

<!---->のための特別なルールの理由は、非常に長い前に(と私たちはNetscapeの1がまだ使用中だった時の話をしている)、一部のブラウザでは全くstyleの要素を認識しなかったということです。これは、彼らが<style>タグと</style>タグを無視し、それらの間のコンテンツを通常のHTMLコンテンツであるかのように処理したことを意味します。これにより、スタイルシートがそのようなブラウザのページの内側に表示されることになりました。これを防ぐために、「スタイルシートを隠す」ために、HTMLコメント区切り文字の間にスタイルシートが折り返されていました。古いブラウザは、単にstyle要素の内容を無視しました。しかし、区切り文字を使用できるようにするには、特別なルールをCSS仕様に追加する必要がありました。

これは古代の歴史ですが、古い習慣が優先され、他の人のコードからもコピーされて、意味を理解することなくコピーされます。長い間、「スタイルシートを隠す」理由はなく、XHTMLルールや人々の混乱や入力ミスの可能性があるため、この危険は潜在的な危険になっています。

したがって、CSSには<!--(または<! --)を使用しないでください。

+0

Netscape(とその時代の他のブラウザ)の初期のものだと思うが、Netscape 1だけではない。 –

1

互換性のために、私は人々がCSSスタイルブロックに<!-- -->を使用しているのを見ました。

この場合、のCSSをサポートしていない古いブラウザでは、エラーを避けるためコメントアウトします。

<style type="text/css"> 
<!-- td {border: 1px solid gray;} --> 
</style> 

CSSをサポートしていない古いブラウザで

<style type="text/css"> 
</style> 

として解釈されます。このようにして、これらのブラウザは潜在的なエラーを回避します。

ただし、最新のブラウザでは、CSSスタイルブロック内の<!-- -->は無視されます。

<style type="text/css"> 
<!-- td {border: 1px solid gray;} --> 
</style> 

はCSSをサポートしたブラウザで

<style type="text/css"> 
td {border: 1px solid gray;} 
</style> 

として解釈されます。

+0

コメントしていないとエラーにはならないだろう。開発者が望むものではありませんが、エラーではありません)。 –

関連する問題