CSS
CSSルールの構造と書式設定

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
サーチ…


備考

読みやすくするために、すべての宣言をセレクタから1レベルインデントし、閉じ中括弧を独自の行にインデントします。セレクタとコロンの後に1つのスペースを追加し、最後の宣言の後にセミコロンを置いてください。

良い

p {
    color: maroon;
    font-size: 16px;
}

悪い

p{
 color: maroon;
font-size:16px }

ワンライナー

宣言が1つか2つしかない場合は、この宣言を使用しないでください。ほとんどの場合はお勧めできません。常に可能な限り一貫してください。 

p { color: maroon; font-size: 16px; }

ルール、セレクタ、および宣言ブロック

CSS ルールは、 セレクタ （ h1 ）と宣言ブロック （ {} ）で構成されます。 

h1 {}

プロパティリスト

いくつかのプロパティは、複数の値を取ることができ、集合的にプロパティリストと呼ばれます 。 

/* Two values in this property list */
span {
    text-shadow: yellow 0 0 3px, green 4px 4px 10px;
}

/* Alternate Formatting */
span {
    text-shadow:
        yellow 0 0 3px,
        green 4px 4px 10px;
}

複数セレクタ

CSSセレクタをグループ化すると、スタイルシートでスタイルを繰り返さずに、同じスタイルを複数の異なる要素に適用できます。グループ化された複数のセレクタをカンマで区切ります。 

div, p { color: blue }

青色はすべての<div>要素とすべての<p>要素に適用されます。カンマなしで<div>子要素である<p>要素は赤色になります。

これはすべてのタイプのセレクタにも当てはまります。 

p, .blue, #first, div span{ color : blue }

このルールは次のものに適用されます。

  • <p>
  • blueクラスの要素
  • firstにIDを持つ要素
  • <div>すべての<span> <div>


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow