(36)設定要素のID ID属性は一意であるべきであり、ブラウザは一意を強制しないが、ベストプラクティスに基づいて広く認められているので、1つ以上の要素に同じid属性を設定しないでください.たとえば、form要素のidプロパティをcat-photo-formに設定します.

(37)ID属性設定要素のスタイルはクラスセレクタと同様にcat-photo-elementというIDセレクタを宣言し、背景色を緑色に設定する.注意:style要素の内部で、クラスセレクタを定義するには追加する必要があります.接頭辞のために、IDセレクタを定義するには、接頭辞として#を追加する必要があります.

(38)調整要素の充填には、HTML要素のレイアウトに影響を与える3つの重要な属性があります.padding( )、margin( )、border( )。要素のpaddingは、要素コンテンツcontentと要素フレームborderの間の距離を制御します.緑のブロックのpaddingを大きくすると、要素の内容と要素の枠線の距離が広がります.たとえば、緑のブロックのpaddingを赤のブロックに一致させるように変更します.

  
padding
  
padding

(39)要素のページ余白要素の外側距離marginを調整して、要素の枠線borderと要素が実際に占める空間の距離を制御する.たとえば、緑のブロックのmarginを赤のブロックに一致させるように変更します.

    

      
padding
      
padding
    

(40)要素に負の余白を加えて要素のmargin を大きくします.例えば、緑のブロックのmarginを-15 pxに設定して、親容器(黄のブロック)の横幅を満たすようにします.

 .green-box {
            background-color: green;
            padding: 20px;
            margin: -15px;
          }

(41)要素の各側面に異なる塗りつぶしを追加する場合、要素をカスタマイズして、各エッジに異なるpaddingを持たせたい場合があります.CSSでは、padding-top、padding-right、padding-bottomとpadding-leftを使用して、要素の上下左の4つの方向のpaddingを制御できます.例えば、緑のブロックの上部と左側に40 pxのpaddingを持たせ、下部と右側に20 pxを持たせる.

.green-box {
    background-color: green;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left:40px;
  }

(42)要素の各側に異なるマージンCSSを追加すると、margin-top、margin-right、margin-bottomとmargin-leftを使用して要素の上下左の4つの方向のmarginを制御できます.たとえば、緑のブロックの上部と左側に40 pxのmarginを持たせ、下部と右側は20 pxにします.

.green-box {
    background-color: green;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  }

(43)時計回りの表現を使用して、要素の塗りつぶしまたは余白を指定します.要素のpadding-top、padding-right、padding-bottom、padding-leftまたはmargin-top、margin-right、margin-bottom、margin-left属性のほか、これらを集中的に指定することもできます.たとえば、次のようになります.

padding: 10px 20px 10px 20px;
margin: 10px 20px 10px 20px;

この4つの値は時計回りに並べられています.上部、右側、下部、左側、略称:上下左です.たとえば、.green-box classを時計回りに設定し、上部と左側に40 pxのpaddingまたはmarginを、下部と右側に20 pxのpaddingまたはmarginを設定します.

.green-box {
    background-color: green;
    padding:40px 20px 20px 40px;
    margin: 40px 20px 20px 40px；
  }

4.CSS継承(1)HTML本体要素をスタイル化する各HTMLページには、background-colorを黒に設定することで、body要素の存在を証明することができます.

(2)Body要素からスタイルを継承するまず,Hello Worldという文字のh 1要素を作成する.次に、body要素のスタイル宣言部分にcolor:greenを追加します.ページ上のすべての要素の色をgreenにします.最後に、body要素のスタイル宣言部分にfont-family:Monospaceを追加します.body要素のfont-family(フォント)をMonospaceに設定します.

Hello World

(3)あるスタイルが別のスタイルより優先される場合、HTML要素が衝突する複数のスタイルが得られることがあります.例えば、あなたのh 1要素は緑とピンクを同時にすることはできません.文字をピンクにしたclassを作成したときに何が起こるかを見て、要素に適用します.私たちのclassはbody要素のcolor:greenをoverride(上書き)します.CSS属性ですか?要素の色をピンクにするpink-textというCSS classを作成します.h 1要素のclassをpink-textに設定します.

Hello World!