CSSコメントの例–CSSをコメントアウトする方法

コメントはCSSで使用され、コードのブロックを説明したり、開発中に一時的な変更を加えたりします。コメントされたコードは実行されません。

CSSの単一行コメントと複数行コメントはどちらも、で始まり、/*で終わり*/ます。スタイルシートには、必要な数のコメントを追加できます。例えば:

/* This is a single line comment*/ .group:after { content: ""; display: table; clear: both; } /* This is a multi-line comment */

コメントをスタイル設定することで、コメントを読みやすくすることもできます。

/* *** * SECTION FOR H2 STYLE *** * A paragraph with information * that would be useful for someone * who didn't write the code. * The asterisks around the paragraph * help make it more readable. *** */

コメント付きのCSSの整理

大規模なプロジェクトでは、CSSファイルのサイズが急速に大きくなり、保守が困難になる可能性があります。将来的に特定のルールを見つけやすくするために、CSSを目次のある個別のセクションに編成すると役立つ場合があります。

/* * CSS TABLE OF CONTENTS * * 1.0 - Reset * 2.0 - Fonts * 3.0 - Globals * 4.0 - Color Palette * 5.0 - Header * 6.0 - Body * 6.1 - Sliders * 6.2 - Imagery * 7.0 - Footer */ /*** 1.0 - Reset ***/ /*** 2.0 - Fonts ***/ /*** 3.0 - Globals ***/ /*** 4.0 - Color Palette ***/ /*** 5.0 - Header ***/ /*** 6.0 - Body ***/ h2 { font-size: 1.2em; font-family: "Ubuntu", serif; text-transform: uppercase; } /*** 5.1 - Sliders ***/ /*** 5.2 - Imagery ***/ /*** 7.0 - Footer ***/

CSSについてもう少し:CSS構文とセレクター

CSSの構文について話すときは、物事がどのようにレイアウトされているかについて話します。何がどこに行くかについての規則があります。それにより、CSSを一貫して記述でき、プログラム(ブラウザーなど)がそれを解釈してページに正しく適用できます。

CSSを作成する主な方法は2つあります。

インラインCSS

CSSの特異性に関する詳細:CSSの秘訣

インラインCSSは、最初の要素をオーバーライドする別のスタイルが検出されるまで、単一の要素とその子にスタイルを適用します。

インラインCSSを適用するには、変更するHTML要素に「style」属性を追加します。引用符の中には、設定するスタイルを示す、セミコロンで区切られたキーと値のペアのリスト(それぞれがコロンで区切られている)を含めます。

インラインCSSの例を次に示します。「One」と「Two」という単語の背景色は黄色、テキストの色は赤になります。「Three」という単語は、最初の単語を上書きする新しいスタイルを持ち、背景色は緑、テキスト色はシアンになります。この例では、タグにスタイルを適用していますが、任意のHTML要素にスタイルを適用できます。

 One Two Three 

内部CSS

インラインスタイルを作成することは単一の要素を変更する簡単な方法ですが、同じスタイルをページの多くの要素に一度に適用するより効率的な方法があります。

内部CSSのスタイルはタグで指定されており、タグに埋め込まれています。

これは、CSSが独自の領域に抽出されていることを除いて、上記の「インライン」の例と同様の効果を持つ例です。「One」と「Two」という単語はdivセレクターと一致し、黄色の背景に赤いテキストになります。「Three」と「Four」という単語div.nested_divセレクターに一致しますが、そのクラスを参照するすべてのHTML要素に適用されるセレクターにも一致します。このより具体的なセレクターは最初のセレクターをオーバーライドし、緑の背景にシアンのテキストとして表示されます。

 div { color: red; background: yellow; } .nested_div { color: cyan; background: green; } One Two Three Four 

上記のセレクターは非常に単純ですが、非常に複雑になる可能性があります。たとえば、ネストされた要素にのみスタイルを適用することができます。つまり、別の要素の子である要素です。

divこれは、他のdiv要素の直接の子である要素にのみ適用する必要があるスタイルを指定している例です。その結果、「2」と「3」は黄色の背景に赤いテキストとして表示されますが、「1」と「4」は影響を受けません(おそらく白い背景に黒いテキスト)。

 div > div { color: red; background: yellow; } One Two Three Four 

外部CSS

すべてのスタイリングには、タグにリンクされている独自のドキュメントがあります。リンクされたファイルの拡張子は.css