HTML --- CSSの研究ノート

免責事項：この記事はブロガーオリジナル記事です、続くBY-SAのCC 4.0を著作権契約、複製、元のソースのリンクと、この文を添付してください。

このリンク： https://blog.csdn.net/qq_44779847/article/details/102741840

### CSS

Casecading積み重ねスタイルスタイルシートシート、役割：ページ美化するために
導入の#### CSS方式を
-の3つの方法の紹介：

インラインスタイル：スタイル属性タグに追加スタイルのコードは、再利用することはできません
```
 <h1 style="color: red">内联样式</h1>
```
内部様式：headタグ内のスタイルタグを追加し、ラベルは、セレクタを通じて体内の要素に利益をスタイルを追加：現在のページが欠点で再利用することができます。現在のページのみ多重を
外部スタイル：スタイルのコードは、別のファイルにCSSを追加して、リンクタグcssファイルのメリットを介して導入：複数ページの多重化

メソッド追加優先：最も高い優先順位の後にインラインで、前に実行同じ内部と外部のカバレッジを行います

###セレクタ

タグ名セレクタ

指定されたタグ名タグに一致するすべての
フォーマット：スタイルコードラベル名} {

IDセレクタ

IDの指定された一つの要素と一致
フォーマット：#ID {}

クラスセレクタ

指定されたクラスに一致する要素はのクラスであります
フォーマット：の.class {}

パケットセレクタ

セレクタセレクタの複数に結合
フォーマット：DIV、＃abcの、.c1 {}

属性セレクタ

プロパティ名と一致する要素を選択するための値で
フォーマット：DIV [属性名= '値']

将来の世代のセレクタ

フォーマット：すべてのSPANその内部DIV DIVスパン{}のdiv DIV

子要素セレクタ

フォーマット：スパン内部DIV内部のdiv> div>スパン{} DIVのサブ要素

疑似クラスセレクタ

状態は、要素を選択するために使用：未訪問のリンクはホバーホバーは、アクティブなクリックを訪れた訪問しました

任意要素選択

ページのすべての要素を選択します
フォーマット：*} {

###色の割り当てモード

三原色各色0~255のために、赤、緑、青、赤、緑、青の値

赤い色の単語
6進割当＃1 FF0000（最も使用されます）
3進割当＃1 F00
3進割り当てRGB（255,0,0）

小さい値a = 0-1アルファ透明値は、4つの10進RGBA（255,0,0,1）より透明割り当て
###背景画像を

 /* 设置背景图片 */ 
 background-image: url("../imgs/1.jpg");
 /* 背景图片宽高 */
 background-size:100px 100px;
 /* 禁止重复 */
 background-repeat: no-repeat;
 /* 控制位置 left/right/top/bottom/center 
 	通过百分比控制位置  */
 background-position: 90% 90%;

###レイアウトスタイル（ボックスモデル）に関連します

ボックスモデル：マージン幅、高+ + +フレームパディング

####幅高さ

幅、高さ：割付二つの方法：ピクセル要素の1. 2.高い割合
インライン要素は、内容によって決定さ、幅及び高さを変更することはできません
####マージン
マージンはどのようなものです：距離の隣接する兄弟要素から要素または要素が高いがマージンと呼ばれています
割り当てモード：
/ * 1つの方向に別々に余白を追加しました
マージン左/上/右/下* /
は50px; / *マージントップ
のmargin-left：30px;
マージン下：20ピクセル; /
/マージン：は50px; / /四方は全て50である/
/マージン：20ピクセル40ピクセル; / /ダウン約40 20 /
/マージン：オート0; //水平方向の中心/
/マージン：10pxの20ピクセル30px 40ピクセル; / /右左下時計回り* /
同時に添加垂直方向に隣接するブロック要素と下余白の余白に追加左右外側の外側を添加しながら、最大値、左および隣接する要素の右の列を取り
、水平方向に隣接する垂直方向に隣接する最大の和を取ります
無効内外の要素からラインアップとダウン
エッジは、親要素と要素の上縁に重なる場合、要素は余白に追加され、そこでは、接着の問題である優れたオーバーフローに要素を追加します解決するために隠さ

###ボーダー

ボーダー：境界線のスタイル境界線の太さの色。
ボーダー左/右/トップ/ボトム：カラーボーダースタイル境界線の太さ。
インライン要素は、共有要素の幅に影響を与え、完全な力に国境はなく要素によって占有され、高さは影響しません
パディングを###
要素の境界線の内容からの距離：パディングとは何ですか
要素の幅と高さに影響を与える要素にパディングを追加します。
あなたは、子要素の子要素を移動する場合は、あなただけのパディングを使用することができる要素のテキストコンテンツを移動する場合は、余白に追加されます
シェア要素の幅に影響を与える完全な力に余裕内のインライン要素が、共有要素の高さには影響を与えません。

###特殊なインライン要素

幅と高さ：幅と高さを変更することはできません
マージン：上下の無効
ボーダー：高さがシェアに影響を与えません。
パディング：シェアは要素の高さには影響を与えません。

###テキストの関連

テキスト水平配向
テキスト整列：左/右/中央
テキストの装飾
テキスト装飾：上線/下線/ライン・スルー/なし
テキストの色の
色：赤;
テキストシャドウ
テキスト影：Yは、色濃度値（大きな値よりぼやけ）をオフセットxオフセット
ラインハイ
ラインの高さ：30px;
###フォント
/ *フォントサイズ/
フォントサイズ：30px;
/太字フォント/
フォント重量：ノーマル/太字;
/イタリック/
フォントスタイル：斜体;
/フォント設定* /
フォントファミリー：「黒」;
### 3 CSSプロパティ
継承：ラベルのフォント、色、H1-H6フォントサイズをハイパーリンク：要素は、テキストとフォント関連スタイルの親要素を継承することができ、個々のラベルは、次のような影響から継承されたユニークなスタイルを所有しています。
ラミネートの特性：異なるスタイルの役割は、すべての優先順位決定により同じスタイル場合働く、一緒にすべてのスタイル（フル力）を積層する場合、セレクタは、同じ時刻に異なる要素を選択します
優先順位：小さい優先度の高い範囲、ID>クラス>タグ名>継承（間接的選択）

####表示要素の表示

ブロック：デフォルトの表示モードでブロックレベル要素、幅と高さを変更することができ
インライン：インライン要素は、デフォルトの表示モードは、1行のために説明することができます
インラインブロック：ブロック列は、幅と高さを変更することができるラインが考慮されてもよい
####エレメント列垂直配向垂直整列内
トップの位置を合わせます
ALIGN下の下で
中間中間の位置に合わせます
ベースラインアライメント基準（デフォルト）

おすすめ