Div+Css ビデオ学習ノート_html/css_WEB-ITnose

1. div を段落 (p タグ) 内にネストすることはできません。
2. CSS: カスケード スタイル ファイル。同じタグを複数のスタイルで変更できます。
3.css タイプ: インライン、埋め込み、外部、入力。

インライン:

aaaaaaaaaaaa

欠点: 再利用性が低い。

埋め込み:

利点: Web ページ全体の特定のタグを制御できます。

外部:

入力:

@import url を使用します(CSS ファイルまたはスタイル タグ内の demo.css ) ;

4. スタイル ルール セレクター:

HTML セレクター、クラス セレクター、ID セレクター、結合セレクター、擬似要素セレクター。

html セレクター:

p {
font-size:50px;
color:red;
background-color:green;
text-decoration:underline;
}

class selector:

// p ラベルにのみ使用します
p.one {
color:red;
font-size:2cm;
background:green;
}

//任意のラベルに使用します
.two {
color:red;
font-size:2cm;
background:緑;
}

adfsdf

ID セレクター:

#one {

カラー:赤;
フォントサイズ:2cm;
背景:緑;

adfsdf

関連セレクター:
p em {
color:red; font-size:2cm;

background:green
}

. {
color:red;
font-size:2cm;

background:green;

}

組み合わせ選択 デバイス:

p ,div,a,h1,.one,#two {
color:red;
font-size:2cm;

background:green;

}

どれか 1 つを使用するだけです

疑似要素の選択 デバイス:
a:link {font-size:1cm;color:red}

a:ホバー {font-size:5cm;color:green}

a:訪問済み{font-size:2cm;color: yellow}

one:link {font-サイズ:8cm;カラー:ブルー}

div a.one:link{font-size:12cm;カラー:ブラック}

dfdfdfdf
ffffff

ffffff div>

5. div+css の利点: パフォーマンスとコンテンツの分離、改訂時間の短縮、帯域幅コストの削減。
段落には p を使用し、タイトルには hx を使用します
テーブルはデータを表示するためにのみ使用する必要があり、レイアウトには使用する必要はありません。

マージン: 2 つの方法:

.bianju{
margin-left:10cm;
margin-top:40cm;

margin-bottom:4cm;

margin-right:40cm;
}

.bianju {
margin: 10px 20px 30px 40px;
}

値は auto で、自動を意味します。

パディング:
td {
padding-left:4cm;

padding-right:4cm;

padding-top:4cm;

padding-bottom:4cm;

}


p {
float:right;/ / どちら揃える側、右、左、なしの3種類
}

.one {

Clear:none;
Clear:left;
Clear:right;
Clear:both;

}

ダウンロード可能な添付ファイル: デモ