CSSの基本構文、セレクター、共通要素属性、ボックスモデル、柔軟なレイアウト

1.CSSとは

HTML はページの骨格構造と内容を記述するだけですが、CSS を使用してページのスタイルを記述し、ページをさらに美しくすることができます。

カスケードスタイルシート (Cascading Style Sheets)
CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御し、ページを美しくする効果を実現し、ページのスタイルと構造を分離することができます。

具体的には、サイズ/位置/フォント/色/背景/境界線など、Web ページの要素を記述します
。CSS を導入すると、ページの見栄えがよくなります。CSS はテクノロジーというよりも「アート」です。

2.CSS構文

1. CSSの基本構文仕様

各 CSS ステートメントには、セレクター + 適用された属性の2 つの部分が含まれています。

セレクターは誰を変更するかを決定します

何を変更するかを決定する

{}内部にはキーと値のペアの構造があり、CSS のさまざまな属性を表します。

宣言された属性はキーと値のペアです。キーと値のペアを;区別するために使用し、キーと値を区別するために使用します。:

各キーと値のペアは独自の行に配置するのが一般的であり、コロンの後にスペースを追加するのが一般的です。

各キーと値のペアは CSS プロパティに対応します

CSS は/* */コメントとして使用されます (Ctrl + / を使用して素早く切り替えます)。サポートされていません。//

<style>
	p {
    
    
		/* 设置字体颜色 */
		color: red;
		/* 设置字体大小 */
		font-size: 30px;
	}
</style>

<p>hello</p>

p はセレクターです。ここでは、ページ内のすべての p タグを選択することを意味します

CSS コードは HTML ファイルに配置でき (通常はstyleタグに配置)、styleタグは HTML 内のどこにでも配置できます。

2.CSSの導入方法

2.1. 内部スタイルシート

style タグに記述して html 内に埋め込みます。
理論的には、スタイルは html 内のどこにでも配置できますが、通常は head タグに配置されます。

長所: スタイルとページ構造を分離できる
短所: 特に CSS コンテンツが多い場合、分離が十分ではありません。

先ほど書いたコードは主にこの方法を使っていますが、実際の開発ではあまり使われていません
追記：この書き方は総合検索でも残されています。

ここに画像の説明を挿入します

2.2. インラインスタイルシート/インラインスタイル

style 属性を通じて特定のタグのスタイルを指定します

単純なスタイルを記述する場合にのみ適しており、特定のタグに対してのみ有効になります
欠点: あまりにも複雑なスタイルを記述することはできません。

この種のインラインスタイルは比較的特殊な使用法 (通常は JS で使用されます) であり、インラインスタイルは現在の要素にのみ有効です。

(セレクターを書く必要も、{}を書く必要もありません。CSSのプロパティと値を直接書くだけです)

<p style="color: red;">test</p>
<p>test</p> <!-- 不会受影响 -->

この書き込み方法は優先度が高く、他のスタイルをオーバーライドします。

赤色はオーバーライドされます。

<style>
	div {
    
    
		color: red;
	}
</style>

<div style="color:green">想要生活过的去, 头上总得带点绿</div>

ここに画像の説明を挿入します

2.3. 外部スタイル

実際の開発で最もよく使われる手法

CSS コードを個別に抽出して.cssファイルに配置します。

次に、HTML コード内で、リンクタグを介して CSS ファイルを導入します。

このようにして、複数の HTML で同じスタイルを再利用できます。
たとえば、Web サイトを作成する場合、Web サイト内に多数のページがあり、これらのページのスタイルは似ている場合があります。

注:リンクタグで CSS を呼び出すことを忘れないでください。そうしないと効果がありません。
この記述方法は Java でのメソッドの定義に似ています。定義する必要があるだけでなく、呼び出す必要もあります。

1. style.css を作成します。

p {
    
    
    color : rgb(8, 147, 240);
}

2. link タグを使用して CSS を導入します。

<link rel="stylesheet" href="style.css"> <!-- 在 head 中 -->

この種のリンクタグは通常 html の head タグ内に配置されますが、このタグは複数存在する可能性があります (複数のリンクを通じて異なる CSS が導入されます)。

同時に、開発者ツールは、このスタイルがどの CSS に導入されたかを思い出させます。2 は行番号です。

ここに画像の説明を挿入します

利点: スタイルと構造が完全に分離されている

短所: ブラウザのキャッシュの影響を受けるため、変更がすぐに反映されない可能性があります。

キャッシュについて:

これは、コンピュータのパフォーマンスを向上させるための一般的な技術的手段です。

Web ページが依存するリソース (画像/CSS/JS など) は通常サーバーから取得されますが、Web サイトに頻繁にアクセスする場合は、これらの外部リソースをサーバーから繰り返し取得する必要はなく、キャッシュ (つまり、ローカルに保存されます。ディスク) に保存されるため、アクセス効率が向上します。

Ctrl + F5 を使用してページを強制的に更新すると、ブラウザーに CSS ファイルを強制的に再取得させることができます。

仕事で最も一般的に使用されるスタイルは外部スタイルですが、ここではスタイルが比較的単純であるため、ここでは主に内部スタイルのスタイルタグの形式を使用します。

3. コードスタイル

コンパクトなスタイル

スタイルを展開する(推奨)

プログラマにとってはよりフレンドリーですが、CSS ファイルはネットワーク経由でブラウザに送信され、ブラウザによって解析されるため、CSS ファイル全体が大きくなり、CSS ファイルが大きくなると、ネットワーク帯域幅を消費します
。したがって、
開発者ツールを通じて他の Web サイトを見るとき、その CSS は一般的にこのコンパクトなスタイルになっています。コード開発段階では、実際には緩やかな改行スタイルを使用します。実際には、サードパーティのツールを通じて
自動的にreplace (フロントエンドパッケージングツール)

これは CSS だけでなく、JS にも当てはまりますが、これはさらに非常識です (JS はインデントと改行を削除するだけでなく、長い変数名を abcd のような短い名前に置き換えます)。

4. スタイルケース

HTML と CSS は大文字と小文字を区別しません。コードを記述するときは小文字を使用するのが通例です ~~

これらはすべて小文字を使用するため、CSS には「キャメルケース」はありませんが、
CSS では通常「スパインケース」が使用され、–単語の区切りに使用されます。

スパインの命名法は日常の開発では一般的ではありません。ほとんどのプログラミング言語では変数名に記号を使用することはできません-(マイナス記号/記号との混同を防ぐため)。
しかし、CSS では演算を実行したりロジックを表現したりすることはできません。-かなり空いているスペースに

スペース仕様:

コロンの後のスペース

セレクターと { の間にもスペースがあります。

3. セレクター

セレクター機能:

ページ内の指定されたラベル要素を選択します

要素の属性を設定する前に、まず要素を選択してください。SC2
や War3 などのゲームと同様に、最初にユニットを選択してから、ユニットに行動を指示する必要があります。

CSS セレクターリファレンスマニュアル

セレクターの種類:

以下の内容は CSS2 標準でサポートされているセレクタのみであり、後述する CSS3 では一部追加されています。

1.基本セレクター: 単一のセレクターで構成されます。

タグセレクター
クラスセレクター
IDセレクター
ワイルドカードセレクター

2.複合セレクター: 複数の基本セレクターを総合的に使用します。

子孫セレクター
子セレクター
ユニオンセレクター
疑似クラスセレクター

CSSにはさまざまな種類のセレクターがあります

1. 基本セレクター

1.1. タグセレクター

特徴：

同じタイプのタグをすばやく選択できますが、区別して選択することはできません

すべての p に有効になります

<style>
	div {
     
     
		color: red;
	}
</style>

1.2. クラスセレクター

特徴：

区別により異なるタグが表現され、
複数のタグで同じタグを使用できるようになります。

構文の詳細:

クラス名は . 次で始まります

以下のタグは class 属性を使用して呼び出します

1 つのクラスは複数のタグで使用でき、1 つのタグで複数のクラスを使用することもできます (複数のクラス名はスペースで区切る必要があります。これにより、コードが再利用可能になります)。

長いクラス名の場合は、-splitを使用できます。

クラスの名前に純粋な数字、漢字、またはタグ名を使用しないでください。

クラスセレクターを使用すると、必要な要素を自由に選択できます (理論的には、このセレクターがあれば十分です)

コード例: まず、CSS コードでクラス名を作成する必要があります。
対応する HTML 要素で、class 属性を通じてこのクラス名を参照します。この時点で、このクラス名の要素には関連する CSS 属性が適用されます。。

<body>
    <style>
        /* . 开头的就是 CSS 中的类名 */
        .green {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <!-- 使用 class属性引入的时候，不需要写 . -->
    <p class="green">hello C</p>
    <p class="green">hello Java</p>
    <p>hello C++</p>
    <p>Python</p>
</body>

コード例: 複数のクラス名の使用

<body>
    <style>
        .box {
     
     
        width: 200px;
        height: 150px;
        }
        .red {
     
     
        background-color: red;
        }
        .green {
     
     
        background-color: green;
        }
    </style>
    
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

クラスセレクターはすでにすべての機能を備えていますが、コードを書きやすくするために、他の多くのセレクターが導入されており、
これは CPU と GPU を備えているのと似ています。

1.3. ID セレクター

CSS で # ID セレクターを示すために先頭を使用します

まず、選択した要素の id 属性を設定します。id セレクターの値は、html の要素の id 値と同じです。

htmlの要素IDに#を含める必要はありません

ID は一意であり、複数のタグで使用することはできません。ID セレクターは複数の要素ではなく 1 つの要素のみを選択できます (クラスセレクターとの最大の違い)

	<style>
        #cpp {
     
     
            color: red;
        }
    </style>

    <p>hello C</p>
    <p>hello Java</p>
    <p id="cpp">hello C++</p>
    <p>Python</p>

1.4. ワイルドカードセレクター

*ページ構造によって呼び出されることなく、ページ上のすべてのタグを選択するには、の定義を使用します。

* {
    
    
	color: black;
}

最大の使用法は、ブラウザのデフォルトスタイルをキャンセルすることです。ブラウザが異なれば、デフォルトスタイルも異なります。

ブラウザのデフォルトのスタイル:

ここに画像の説明を挿入します

Chrome: p タグのデフォルトのフォントサイズは 14 ピクセルで、デフォルトで上下の余白は 16 ピクセルですが、他のブラウザでは当てはまらない場合があります。

したがって、フロントエンド開発を行う場合、ページはデフォルトのスタイルに依存しないようにする必要があります。

一般的に使用される書き込み方法:

* {
    
    
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

基本的なセレクターの概要:

	効果	特徴
タグセレクター	同じタグをすべて選択できます	区別して選択することはできません
クラスセレクター	1 つ以上のタグを選択する機能	ニーズに応じて、最も柔軟で一般的に使用されるものを選択してください。
IDセレクター	ラベルを選択できます	同じ ID は 1 つの HTML 内で 1 回だけ出現できます
ワイルドカードセレクター	すべてのタグを選択	特殊な状況で使用される

2. 複合セレクター

2.1. 子孫セレクター

インクルージョンセレクターとも呼ばれ、複数のセレクターを組み合わせることで、要素内の子要素・孫要素（子孫要素）を選択することができます。

要素 1 が親、要素 2 が子です。要素 2 のみが選択され、要素 1 は影響を受けません。

选择器1 选择器2 {样式声明}

1)真ん中にスペースが必要です

スペースがある場合 ul.name: ul タグ内のクラス名を持つ要素を探す
スペースがない場合 ul.name: クラス ul と名前を持つ要素を探す

2)、セレクター 1 と ⒉ は両方ともタグセレクター/クラスセレクター/ID セレクターにすることができます。

コード例: ol に影響を与えずに ul の li の色を変更する

	<style>
        ul li {
     
     
            color: red;
        }
    </style>

    <ul>
        <li>test</li> <!-- 针对 ul-->
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ol>

	<style>
        ul .name {
     
     
            color: red; /* 对 ul 的第一个 li */
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

コード例: 要素 2 は息子である必要はなく、孫でも構いません。

	<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>

		ul li a {
    
    
            color: red;
        }
        或者
        ul a {
    
    
            color: red;
        }

コード例: 基本セレクター (クラスセレクター、ID セレクターを含む) を任意に組み合わせて使用できます。

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>

.one li a {
    
    
	color: green;
}

2.2. サブセレクター

子孫セレクターと似ていますが、子タグのみが選択でき、生物学的な子のみが選択され、孫要素は選択されません。

大なり記号を使用して区切ります。

选择器1>选择器2 { 样式声明 }

例 1 : ul の最初の li については、子孫セレクターと同じ

	<style>
        ul>.name {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

例 2 : 子孫セレクターとの違い

子孫: リンク 1 と 2 の両方を選択できます

	<style>
        ul a {
     
     
            color: red;
        }
    </style>

    <div class="two">
		<a href="#">链接1</a>
		<p><a href="#">链接2</a></p>
	</div>

子セレクター: ul>a に変更すると、子セレクターは孫要素を選択できないため、リンク 1 のみが選択されます。

	<style>
        ul>a {
    
    
            color: red;
        }
    </style>

練習する：

1. 次のコードの「子猫」を赤色に変更します。

<div class="cat">
	<ul>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
	</ul>
</div>

CSS:

.cat ul li a {
    
    
	color: red;
}

2. 次のコードの「子猫」を赤色に変更します。

<div class="cat">
	<a href="#">小猫</a>
	<ul>
		<li><a href="#">小狗</a></li>
		<li><a href="#">小狗</a></li>
	</ul>
</div>

Emmet ショートカットキーを使用して、上記の HTML コードを生成します。 .cat>a+ul>li*2>a

CSS:

.cat>a {
    
    
	color: red;
}

2.3. ユニオンセレクター

複数のセレクターをカンマで区切って並列に記述します。

ここの共用体セレクターでは、単純なセレクターまたは複合セレクターを書くことができます。

共用体セレクターは縦方向に記述し、各セレクターが 1 行を占めるようにすることをお勧めします (最後のセレクターにはカンマを含めることはできません)。

元素1, 元素2 { 样式声明 }要素 1 と要素 2 が同時に選択されていることを示します

例: ul と ol を選択しますが、a タグは含めません

	<style>
        ul>li,
        ol>li>a {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ol>

ここに画像の説明を挿入します

2.4. 疑似クラスセレクター

1)、リンク擬似クラスセレクター

a:link未訪問のリンクを選択してください

a:visitedすでにアクセスしたリンクを選択してください

a:hoverマウスポインタのホバーでリンクを選択

a:activeアクティブなリンクを選択します (マウスを押してもポップアップしません)

ホバーとアクティブのデモ:

	<style>
        div {
     
     
            color: red;
        }

        /* 鼠标悬停的时候 应用这个样式： */
        div:hover {
     
     
            color: gold;
        }

        /* 鼠标按下的时候，应用这个样式： */
        div:active {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <div>这是一个 div</div>

デモリンクとアクセス先:

訪問したリンクを未訪問の状態に戻すにはどうすればよいですか?
ブラウザの履歴をクリアするだけです。ctrl + shift + delete

		a:link {
    
    
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        } 
        a:visited {
    
    
            color: green;
        }
        a:hover {
    
    
            color: red;
        }
        a:active {
    
    
            color: blue;
        }

		<a href="#">小猫</a>

予防：

LVHA の順序で書くと、たとえば、active を前に置くと、active が無効になります。メモリルールは「緑色」になります。
ブラウザの a タグにはデフォルトのスタイルがあり、一般に実際の開発では別のスタイルが必要です。
実際の開発では主にリンクのスタイルを作成してからホバーのスタイルを作成することになりますが、Link、visited、activeはあまり使いません。

a {
    
    
	color: black;
} 
a:hover {
    
    
	color: red;
}

2)、強制疑似クラスセレクター

フォーカスのある入力フォーム要素を選択します

<div class="three">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>

.three>input:focus {
    
    
	color: red;
}

選択したフォームのフォントが赤色に変わります。

複合セレクターの概要:

セレクタ	効果	予防
子孫セレクター	子孫要素の選択	孫要素になる可能性があります
子セレクター	子要素を選択する	あなたが選べるのは実の息子だけであり、孫ではありません。
ユニオンセレクター	同じスタイルの要素を選択する	コードの再利用の改善
リンク擬似クラスセレクター	異なるステータスのリンクを選択する	a:hover の書き方をマスターすることに集中してください。
:focuse 疑似クラスセレクター	選択した要素を選択します	インプットの習得に重点を置く:フォーカス

4. 共通要素属性

参考ドキュメント:

CSS セレクターリファレンスマニュアル

MDN ドキュメント

フォントファミリーフォントファミリー

フォントサイズ

フォントの太さ

フォントスタイルフォントスタイルのテキストが傾いているので、主に傾きをキャンセルするためにこれを使用します

1. フォントの属性

1.1. フォントを設定します。

複数のフォントを区切るにはカンマを使用します (フォントを左から右に検索します。見つからない場合は、デフォルトのフォントが使用されます)。

フォント名にスペースが含まれる場合は、引用符を使用します。

互換性が悪くなりますので、一般的なフォントを使用することをお勧めします。

	<style>
        .one {
    
    
            font-family: "Microsoft YaHei";
        }

        .two {
    
    
            font-family: "宋体";
        }
    </style>

    <div class="one">
        it is well
    </div>
    <div class="two">
        it is well
    </div>

フォントを設定する場合は、設定したフォントが相手のマシン上に存在することを確認する必要があります。システム自体にはデフォルトでいくつかのフォントが付属しています。追加のサードパーティフォントが存在する場合もあります。これらのサードパーティフォントを使用したい場合は、相手のマシンでそれらのフォントが利用可能であることを確認する必要があります。

linkHTML の属性を使用してネットワークからフォントファイルをロードすることもできます。

1.2. サイズ:

ブラウザごとにデフォルトのフォントサイズが異なるため、明確な値を指定することをお勧めします (Chrome のデフォルトは 16px)

bodyタグにはfont-sizeを使用できます

単位pxに注意して忘れないでください

タイトルタグのサイズは個別に設定する必要がある

注: これは実際にフォント内の文字ボックスの高さを設定します。実際の文字グリフはこれらのボックスよりも高いか低い場合があります。

p {
    
    
	font-size: 20px;
}

1.3. 厚さ:

数字または単語を使用して厚さを示すことができます。

700 == 太字、400 は太字なし、== 通常

値の範囲は 100 -> 900 です。

p {
    
    
	font-weight: bold;
	font-weight: 700;
}

ここに画像の説明を挿入します

1.4. テキストのスタイル:

ここに画像の説明を挿入します

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

テキストを斜体にすることはほとんどありませんが、em/iラベルを斜体以外に変更することはよくあります。

2. テキスト属性

2.1. 文字の色:

RGB：

私たちのディスプレイはたくさんの「ピクセル」で構成されており、各ピクセルは点とみなされ、この点が特定の色を反映することができます。

色**（光と色の三原色**）をR（赤）、G（緑）、B（青）で表し、3つの色を異なる割合で組み合わせると、さまざまなカラフルな効果が得られます。。

コンピュータでは、R、G、B の 3 つの成分はそれぞれ 1 バイト(8 ビット、表現範囲は 0 ～ 255、16 進表現は 00 ～ FF) で表現されます。

値が大きいほど、コンポーネントの色は暗くなります。255、255、255 は白を意味し、0、0、0 は黒を意味します。

テキストの色の設定:

vscode の色の上にマウスを置くと、カラーセレクターが表示され、手動で色を調整できます。

赤色;

色: #ff0000;

色は 16 進数で表され、2 つのペアが同じ場合は 1 つの #ff00ff=>で表現できます。#f0f

色: rgb(255, 0, 0);

QQ スクリーンショットに付属のカラーピッカーを使用して、各色の RGB 値を表示できます。

rgba にはもう 1 つのコンポーネントがあり、アルファは透明度を表します

2.2. テキストの配置:

テキストの水平方向の配置を制御する

テキストの配置を制御できるだけでなく、画像やその他の要素を中央または右に配置するように制御することもできます。

text-align: [值];

center：中央揃え

left: 左揃え

right: 右揃え

	<style>
        .one {
    
    
            text-align: left;
        }

        .two {
    
    
            text-align: center;
        }

        .three {
    
    
            text-align: right;
        }
    </style>

    <div class="one">这是一段话</div>
    <div class="two">这是一段话</div>
    <div class="three">这是一段话</div>

2.3. 文字装飾

text-decoration: [值];一般的に使用される値

underline下線 [よく使われる]

nonea タグの下線は削除できます。

overlineオーバーライン [一般的には使用されません]

line-through取り消し線 [一般的には使用されません]

	<style>
        .text-decorate>a {
    
    
            text-decoration: none;
        }
        .text-decorate>.one {
    
    
            text-decoration: none;
        }
        .text-decorate>.two {
    
    
            text-decoration: underline;
        }
        .text-decorate>.three {
    
    
            text-decoration: overline;
        }
        .text-decorate>.four {
    
    
            text-decoration: line-through;
        }
    </style>

    <div class="text-decorate">
        <a href="#">链接去下划线</a>
        <p class="one">啥都没有</p>
        <p class="two">下划线</p>
        <p class="three">上划线</p>
        <p class="four">删除线</p>
    </div>

ここに画像の説明を挿入します

htmlタグでは、下線や取り消し線を設定することができますが、これはCSSでも実現できますが、下線・取り消し線自体は
スタイルとして使用され、CSSをベースに実装されており、より合理的な
文字装飾となります。これは、要素に下線/取り消し線を追加しますが、通常は a タグの既存の下線/取り消し線を削除することを意味します。

たとえば、ステーション B のナビゲーションリンクには、この属性を使用して下線が付けられています。[F12 で確認できます]

ここに画像の説明を挿入します

2.4. テキストのインデント

段落の最初の行のインデントを制御します(他の行は影響を受けません)。

text-indent: [值];

ユニットはpx、またはem

em相対単位を示します。1 em は、現在の要素のテキストサイズに対する相対値です。Em
単位は非常に便利です。場合によっては、ページでユーザーがフォントサイズを変更できるようになります。

インデントは負の値にすることもできます。これは、左にインデントすることを意味します(テキストが飛び出す原因になります)。

	<style>
        .text-indent .one {
     
     
            /* text-indent: 20px; */
            text-indent: 2em;
        }

        .text-indent .two {
     
     
            text-indent: -2em;
        }
    </style>

    <div class="text-indent">
        <!-- div.one -->
        <div class="one">正向缩进</div>
        <div class="two">反向缩进</div>
    </div>

ここに画像の説明を挿入します

2.5、行高

行の高さは、コンテキスト行間のベースライン距離を指します。

HTML でテキストを表示するには、次のベースラインが必要です。

トップライン

中心線

ベースライン(英語の 4 本線グリッドの最後から 2 番目の線に相当)

結論

コンテンツ領域: 下の行と上の行で囲まれた領域、つまり、下の図の濃い灰色の背景領域

ここに画像の説明を挿入します

実際には、ベースライン間の距離 = 上のライン間の距離 = 下のライン間の距離 = 中心線間の距離

line-height: [值];

	<style>
        .two {
     
     
            line-height: 50px;
        }
    </style>

    <div class="one">上一行</div>
    <div class="two">中间行</div>
    <div class="three">下一行</div>

注1：行の高さ＝上マージン＋下マージン＋フォントサイズ

上下の余白は等しく、フォントサイズは16px、行の高さは40px、上下の余白はそれぞれ12pxです。

	<style>
        .line-height .one {
     
     
            line-height: 40px;
            font-size: 16px;
        }
    </style>
    
    <div class="line-height">
        <div>上一行</div>
        <div class="one">中间行</div>
        <div>下一行</div>
    </div>

ここに画像の説明を挿入します

注 2 : 行の高さは通常と同じにすることもできます。

これはブラウザの実装によって異なりますが、Chrome では通常 21 ピクセルです。

注3：行の高さと要素の高さを使用して、テキストを中央に揃えることができます。

行の高さは、実際には、テキストの 2 行、上の行と上の行の間の距離です (同時に、この距離は、下の行から下の行までの距離、中心線から中心線までの距離、および中心線から中心線までの距離でもあります)。ベースラインからベースラインまでの距離)

行の高さを設定すると、実際には上方向と下方向の両方に同時に影響し、上マージンと下マージンは等しくなります。

行の高さは上下で等しいため、行の高さに基づいてテキストを垂直方向に中央揃えにすることができます。
要素の高さが 150 ピクセルの場合、垂直方向の中央揃えの効果を得るには、内部のテキストの行の高さを 150 ピクセルに設定するだけで済みます。テキスト。

	<style>
        div {
     
     
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color:coral;
            
            /* 居中对齐 */
            text-align: center;
            /* 垂直居中 */
            line-height: 150px;
        }
    </style>

    <div class="one">文本垂直居中</div>

ここに画像の説明を挿入します

3. 背景属性

3.1. 背景色

background-color: [指定颜色]

英語の語彙

RGB

#16進数

rgba

透明背景は透明です (親要素の背景が適用されます) デフォルトは透明ですが、色を設定することで変更できます。

	<style>
        body {
     
     
            background-color: grey; /* 针对 body */
        }
        .bgc .one {
     
     
            background-color: red;
        }
        .bgc .two {
     
     
            background-color: #0f0;
        }
        .bgc .three {
     
     
            /* 背景透明 */
            background-color: transparent; /* 引用父元素的 grey */
        }
    </style>
        <div class="bgc">
        <div class="one">红色背景</div>
        <div class="two">绿色背景</div>
        <div class="three">透明背景</div>
    </div>

3.2. 背景画像

background-image: url(...);

画像よりも位置（ボックス内の絵の位置）を制御するのが便利です

知らせ：

URLをお見逃しなく

URL は絶対パスまたは相対パスにすることができます

URL に引用符を追加することも、追加しないこともできます。

注: 背景画像を設定すると、デフォルトでは床タイルを敷くのと同じタイル効果となり、画像を「床タイル」とみなし、1枚ずつ並べていきます。

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: white;

           background-image: url(flower.jpg);

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

ここに画像の説明を挿入します

3.3. 背景のタイリング

background-repeat: [平铺方式]

重要な値:

repeat: タイリング

no-repeat: タイリングなし

repeat-x: 水平方向に並べて表示

`repeat-y```: 垂直タイリング

デフォルトはrepeatタイルです。
背景色と背景画像は同時に存在できます。背景画像は背景色の上にあります。

	<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: green;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

ここに画像の説明を挿入します

3.4. 背景の位置

background-position: x y;

画像の位置を変更する

パラメータには 3 つの種類があります。

位置名詞：（上、左、右、下）

単位として px を使用するだけでは実現が難しいため、背景画像を「中央揃え」にする効果を実現するには、単位をパーセントに設定することもできます。

正確な単位: 座標またはパーセンテージ (左上隅を原点とする)

混合単位: 場所名詞と正確な単位の両方が含まれます。

座標系について:

コンピュータでは位置を表現するために平面直交座標系（デカルト座標系）がよく使われますが、コンピュータの平面座標系は一般に左手座標系（高校数学でよく使われる右手座標系とは異なります）です。 y軸は下を向いています）

ここに画像の説明を挿入します

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;
           /* background-position: 0 0; 左上角 */
            background-position: 100px, 100px; /* 往左往下 */

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

注:
パラメータの両方の値が方向名詞である場合、順序は関係ありません (左上と左上は同等です)
方向名詞が 1 つだけ指定されている場合、2 番目の方向名詞はデフォルトで中央に配置されます (左は水平を意味します)パラメータが正確
な値である場合、最初のパラメータは x であり、2 番目の
パラメータは y である必要があります (100 200 は、x が 100 で y が 200 であることを意味します)。値を 1 つだけ指定する場合、その値は x 座標、もう 1 つのデフォルトの垂直中心である必要があります。
パラメータが混合単位の場合、最初の値は x 座標、2 番目の値は y 座標 (100) である必要があります。 center は、横軸が 100 で、垂直方向が
中央であることを意味します)

3.5. 背景サイズ

ackground-size: 值1, 值2;

特定の値: たとえば、40px 60px は、幅が 40 ピクセル、高さが 60 ピクセルであることを意味します。

パーセンテージ: 親要素のサイズに応じて設定します

特殊な単語: 長さ|パーセンテージ|カバー|含む

cover: 背景画像は要素のサイズに適応し、背景画像が背景領域を完全に覆うように十分な大きさに背景画像を埋めます。背景画像の一部が背景アンカー領域に表示されない場合があります。

contains: 背景色の一部が漏れ出す可能性があります。要素のサイズに画像を引き伸ばして終了してください。背景画像が常に要素内にあることを確認してください。

4.角丸長方形

HTML の要素はデフォルトでは長方形です。携帯電話のアプリのロゴと同じように、すべての角が丸くなっています。

CSS では、border-radius を使用して境界線に丸みを持たせることができます
border-radius: length;(長さは内接円の半径であり、値が大きいほど線が強くなります)。

4.1. 小さな円弧のある長方形

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;

            border-radius: 10px;
        }
    </style>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, repudiandae enim!</div>

ここに画像の説明を挿入します

4.2. 円を生成する

円を取得したい場合は、同じ属性で設定することもできます。まず、正方形が必要です。正方形の幅は 200px であると仮定します。このとき、border-radius の値を 100px に設定します (幅の半分）

数字を直接書く以外に、50%と書いても同様の効果があります(50%は幅に基づいて計算されます)。

	<style>
        div {
     
     
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            color: blue;    
            text-align: center;
            line-height: 200px;

			/* 正方形宽度的一半 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
    </style>

    <div>Lorem ipsum dolor</div>

ここに画像の説明を挿入します

4.3. 角丸長方形の生成

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;
            text-align: center;
            line-height: 100px;

            border: 2px solid rgb(35, 12, 167);
            border-radius: 50px;
        }

    </style>

    <div>Lorem ipsum dolor</div>

ここに画像の説明を挿入します

4.4. 書き込み方法の拡張

border-radius は複合描画方法で、実際には四隅を個別に設定できます。

border-radius:2em;

に相当

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;

border-radius: 10px 20px 30px 40px;

に相当（右回りに配置）

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;

5. Chrome デバッグツール – CSS プロパティの表示

タグページの意味:

要素タグ構造の表示

コンソールビューコンソール

ソースソースコードの表示 + ブレークポイントのデバッグ

ネットワークフロントエンドとバックエンドの対話プロセスを表示する

アプリケーションブラウザーによって提供されるいくつかの拡張機能 (ローカルストレージなど) を表示します。

パフォーマンス、メモリ、セキュリティ、Lighthouse は当面使用されないため、これ以上詳しく説明しません。

要素タブでは以下を使用します。

Ctrl + スクロールホイールでズーム、Ctrl + 0 で元のサイズに戻します。

左上の矢印を使用して要素を選択します

右側には、導入されたクラスを含む現在の要素のプロパティが表示されます。

右側では、選択した要素の CSS 属性を変更できます。たとえば、色の場合は、色のアイコンをクリックしてカラーセレクターを表示し、色を変更できます。たとえば、フォントサイズの場合は、矢印キーを使用して値を微調整します。

ここでの変更はコードには影響せず、リフレッシュすることで復元されます。

CSS スタイルが正しく記述されていない場合は、ここにもプロンプトが表示されます (黄色の感嘆符)。

ここに画像の説明を挿入します

6. 要素の表示モード

CSS には、HTML タグの表示モードが多数あります。

重要なポイントは次の 2 つです。

ブロックレベルの要素

インライン要素

ブロックレベル要素: 1 行を占め、幅と高さを設定可能

div、h1-h6、p、ul、li、テーブル…

インライン要素: 排他的な行を占有せず、幅と高さを設定できません

span、a、em、i...(テキストとして理解され、インライン要素の最終的なサイズは内部コンテンツによって異なります~)

インラインブロック要素: 単一行を占有せず、幅と高さを設定できます

入力、画像

CSSでの表示により要素の表示モードを変更します。一般的な使用法は、インライン要素をブロックレベルの要素に変更することです。

	<style>
        a {
     
     
            width: 500px;
            height: 300px;
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

ここに画像の説明を挿入します

	<style>
        a {
     
     
            width: 500px;
            height: 300px;

            display: block; /* 改成块级元素 */
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

ここに画像の説明を挿入します

[表示] は特別なオプションです。none要素は表示されません (非表示の要素)
。ここの要素は開発者ツールでは引き続き表示されますが、インターフェイスには表示されません。

ここに画像の説明を挿入します

7.ボックスモデル

1. 構成

各 HTML 要素は長方形の「ボックス」に相当します。

それは家を建てることに相当し、家の壁が境界、家と家の間の距離が外縁、家具と壁の距離が内縁、家具が中身となります。

このボックスは次の部品で構成されています。

境界線

コンテンツコンテンツ

パディング_

余白_

ここに画像の説明を挿入します

2. 境界線

例: ボーダーあり:

	<style>
		div {
     
     
            width: 200px;
            height: 100px;
            border: 2px black solid;
        }

    </style>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

ここに画像の説明を挿入します

注: 境界線を設定すると、元の要素が拡張されます。

ここに画像の説明を挿入します

拡張することはできますが、この拡張操作は実際には使いやすいものではありません（境界線を設定することで要素のサイズが簡単に変更される可能性があり、ページレイアウトにさらに影響を及ぼします）。

たとえば、ページの幅が 500 ピクセルで、ページ内に多くの画像が含まれています。1 行に 5 つの画像があり、各画像の幅は 100 ピクセルです。その結果、画像に枠線が追加され、画像が 5 つになる可能性があります
。一行では表示されません。

住宅を購入する場合
建築面積＝マンション内での面接＋共用部（エレベータールーム）での面接
マンション内の面積＝中古面積＋壁占有面積
青色のエリアが「中古エリア」、緑色のエリアが「中古エリア」それは「マンション内のエリア」です。

実際の開発ではbox-sizing属性を設定する操作が一般的ですが、border-boxの場合、この時に設定したボーダーは要素を展開するのではなく内容を圧縮します。

div {
    
    
	width: 200px;
	height: 100px;
	border: 10px black solid;
	box-sizing: border-box;
}

ここに画像の説明を挿入します

ボーダースタイル：

太さ: ボーダーの幅

スタイル: ボーダースタイル

実線の実線、一点鎖線、点線、点線

色: ボーダーカラー

div {
    
    
    width: 200px;
	height: 100px;
	border: 10px black dashed;
	box-sizing: border-box;
}

ここに画像の説明を挿入します

略語をサポートします。順序は必要ありません。境界線: 1 ピクセルの赤一色。

境界線は 4 つの方向 (境界線: 上/下/左/右)に変更できます。

3. パディングとマージン

境界線とコンテンツの間の距離

デフォルトのコンテンツは境界線に対して配置されます。パディングを使用してこの距離を制御します。4
方向すべてに余白を追加できます。

パディングトップ

パディングボトム

パディング左

右パディング

4方向の境界線を変更することもできます

padding: 5px;

ここに画像の説明を挿入します

余白:

ボックス間の距離を制御する

4方向すべてに余白を追加できます

マージントップ

マージン-ボトム

左マージン

右マージン

	<style>
        div {
    
    
            width: 200px;
            height: 100px;
            border: 10px black dashed;
            box-sizing: border-box;
            padding: 5px;
        }

        .one {
    
    
            margin-bottom: 10px;
        }
        
    </style>

    <div class="one">这是一个元素</div>
    <div class="two">这是一个元素</div>

ここに画像の説明を挿入します

.one {
    
    
	margin-bottom: 10px;
}

.two {
    
    
	margin-top: 10px;
}

2 つの要素にマージンが設定されている場合、実際のマージンは、合計ではなく 2 つの要素の大きい方の値になります。横方向には出ません…（直接追記…）
これは歴史問題による特殊な状況です。

ブロックレベル要素の水平方向の中央揃え:

マージンに基づいて、要素の水平方向の中央揃えを実現できます (テキストの水平方向の中央揃えではありません)。テキストの水平方向の中央
揃え: text-align: center。
テキストの垂直方向の中央揃え: line-height == height
要素: margin (block) を使用できます。 -level 要素) )
要素の垂直方向の中央揃え: マージンがあまり良くありません (これについては後で詳しく説明します)

<style>
	.one {
     
     
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        
        .two {
     
     
            width: 200px;
            height: 200px;
            background-color: green ;
        }
    </style>

    <div class="one">
        <div class="two">
            hello
        </div>
    </div>

ここに画像の説明を挿入します

2人用セット:margin: 0 auto;

水平マージンを自動 (ブラウザ適応型) に設定すると、水平方向の中央揃え効果が得られます。

ここに画像の説明を挿入します

複合書き込み:

複数の方向のパディングをマージできます [4 つの状況はすべて共通であることを覚えておいてください]

パディング: 5px; 4 方向すべてに 5px を意味します

padding: 5px 10px; は、上下のパディングが 5 ピクセル、左右のパディングが 10 ピクセルであることを意味します

padding: 5px 10px 20px; は、上部のマージンが 5 ピクセル、左右のパディングが 10 ピクセル、下部のパディングが 20 ピクセルであることを意味します

パディング: 5px 10px 20px 30px; 上 5 ピクセル、右 10 ピクセル、下 20 ピクセル、左 30 ピクセル (時計回り) を意味します。

8. 柔軟なレイアウト

1、ディスプレイ: フレックス

主にページ上の要素の位置（配置）を整えます。

先ほど紹介したプロパティのほとんどは要素自体に設定されていますが、要素間の関係に影響を与える要素もいくつかあり、
ボックスモデル（マージン）はその一部ですが、それだけでは十分ではありません。

フレキシブルレイアウトはこの点をさらに強化するもので、
デフォルトの Web ページレイアウトは上から下(ブロックレベルの要素が 1 行を占めます)
ですが、実際の Web ページは上から下だけでなく、左から右である必要もあります。

	<style>
        .parent {
     
     
            /* 让当前元素的 宽度 和它的父元素一样宽 */
            width: 100%;
            height: 200px;
            background-color: orange;
        }

        .one, .two, .three {
     
     
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

    <div class="parent">
        <div class="ont">test</div>
        <div class="two">test</div>
        <div class="three">test</div>
    </div>

ここに画像の説明を挿入します

デフォルトでは、div はブロックレベルの要素で1行を占めます。これらの div を水平の行に配置できるようにするには、フレキシブルレイアウトを使用して
親要素の属性を設定します。display: flex;

フレックスとはフレキシブルボックスの略で「フレキシブルな箱」という意味です。

任意の HTML 要素を display:flex として指定して、柔軟なレイアウトを完成させることができます。

フレックスレイアウトの本質は、display:flex 属性を親ボックスに追加して、子ボックスの位置と配置を制御することです。

注：親要素がdisplay:flexに設定されている場合、子要素のfloat、clear、vertical-alignは無効になります。

ここに画像の説明を挿入します

デフォルトのレイアウト方法は「縦」レイアウトですが、「横」レイアウトが必要な場合は、柔軟なレイアウトを使用できます。

2. フレックスレイアウト

レイアウトを通じてflex、サブ要素の配置方法を調整できます。

デフォルトでは、これらの要素は左上隅に押し込まれます

水平配置：（justify-content主軸上のサブ要素の配置を設定します）、使用前に必ず主軸がどちらの方向であるかを決定してください

左から配置開始

最後に右に配置

中央中央に配置

space-between では、要素間の等間隔が許可されます(ブラウザによって自動的に計算されます)。

space-around では要素間に一定の間隔をあけることができ、左端と右端にも隙間ができます。

縦配置：align-items

注: align-items は単一行要素に対してのみ実装できます。要素が複数行ある場合は、item-contents を使用する必要があります。

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: end;
}

ここに画像の説明を挿入します

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-between;
}

ここに画像の説明を挿入します

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-around;
    align-items: end;
}

ここに画像の説明を挿入します

3. 柔軟なレイアウトに基づいた一般的なページ構造を実装します。

フレックスレイアウトで最も一般的な 3 つの操作:

柔軟なレイアウト表示に設定: 柔軟に実現します
これを実現するには、水平配置の justify-content を設定します。
これを実現するには、垂直方向の配置の align-items を設定します (フレックスレイアウトでは、通常、行ごとに配置され、複数の行は含まれません)。上記の内容に基づいて、いくつかの主流のページレイアウト効果を実現できます
。

この種のページレイアウトを実現するには、柔軟なレイアウトを
実現するだけでなく、テーブルベース、フローティングベース、グリッドレイアウトなど、他のいくつかの実装方法も使用できます。グリッドレイアウトは比較的新しいものです
。少し古いものもあり、ブラウザは
まだサポートしていませんが、対照的に、flex は互換性が優れています。

ここに画像の説明を挿入します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于弹性布局，实现一个典型的页面结构</title>
</head>
<body>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
     
     
            width: 100%;
            height: 50px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .container {
     
     
            width: 100%;
            height: 600px;
            background-color: white;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .left, .right {
     
     
            width: 20%;
            height: 100%;
            background-color:rgb(86, 143, 204);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .container .content {
     
     
            width: 60%;
            height: 100%;
            background-color: rgb(119, 187, 139);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .footer {
     
     
            width: 100%;
            height: 100px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <div class="nav">
        导航栏
    </div>

    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
    
    <div class="footer">
        页脚
    </div>

</body>
</html>