記事ディレクトリ

CSSを学ぶ目的
3つの導入方法
セレクターの分類
ボックスモデル
要素の表示モード
CSSレイアウト
- 柔軟なレイアウト
- - フレックスレイアウトの基本概念
  - 共通のプロパティ
共通の要素属性の設定

CSSを学ぶ目的

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

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

基本的な構文形式

セレクター + {1 対 N のステートメント}

セレクターは、誰を変更するか (誰を探すか) を決定します。
何を変更するのか（何をするのか）を宣言します。
宣言された属性はキーと値のペアです。これらを使用して;キーと値のペアを区別し、 :キーと値を区別します。

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

3つの導入方法

内部スタイルシート

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

利点: これにより、スタイルとページ構造を分離できます。
短所: 特に CSS コンテンツが多い場合、分離が十分に徹底されていません。

<html>
	<head>
		<meta charset="utf-8">
		<!-- 内部样式表 -->
		<style>
			/* 被style标签包围的范围是CSS环境，可以写CSS代码 */

			/* 标签样式表 */
			p{
      
      
				color:red;
			}
		</style>
	</head>
	<body>
		<p>这里是段落一</p>
		<p>这里是段落二</p>
	</body>
</html>

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

インラインスタイルシート

style 属性を使用して、ラベルのスタイルを指定します。
これは、単純なスタイルの記述にのみ適しています。特定のラベルに対してのみ有効です。
欠点: あまり複雑なスタイルは記述できません。
この記述方法の優先度は高くなります会覆盖其他的样式。

<html>
	<head>
		<meta charset="utf-8">
        <style type="text/css">
			/* 被style标签包围的范围是CSS环境，可以写CSS代码 */

			/* 标签样式表 */
			p{
      
      
				color:red;
			}
		</style>
	</head>
	<body>
        <p style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
	</body>
</html>

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

内部スタイルシートの装飾スタイルはインラインスタイルシートによってオーバーライドされます

外部スタイルシート

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

cssファイルを作成します。
リンクタグを使ってCSSを導入する

<link rel="stylesheet" href="[CSS文件路径]">

CSS/引入方式.css

/* 标签样式表 */
p{
    
    
	color:red;
}

引入方式.html

<html>
	<head>
		<meta charset="utf-8">
        <link rel="stylesheet" href="CSS/引入方式.css">
	</head>
	<body>

        <p >HELLO</span></p>
	</body>
</html>

利点: スタイルと構造が完全に分離されています。
短所: ブラウザのキャッシュの影響を受けるため、変更がすぐに反映されない場合があります。

キャッシュについて:
これは、コンピュータのパフォーマンスを向上させるための一般的な技術的手段です。Web
ページが依存するリソース (画像/CSS/JS など) は、通常、サーバーから取得されます。Web サイトが頻繁にアクセスされる場合、これらの外部リソースは、不要ですサーバーから繰り返し取得しますキャッシュを利用して最初に保存する（つまりローカルディスクに保存する）ことで、アクセス効率が向上します Ctrl + F5 でページを強制更新してブラウザを強制的に更新でき
ますcssファイルを再取得します。

セレクターの分類

ベースセレクター

ラベルセレクター

特徴：

同じ種類のラベルを素早く選択できます。
しかし差別化された選択肢はない

<html>
	<head>
		<meta charset="utf-8">
        <style>
        p {
      
      
            color: red;
            } 
        div {
      
      
            color: green;
            }
        </style>
	</head>
	<body>
        <p >HELLO</p>
        <div>DIV</div>
	</body>
</html>

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

クラスセレクター

id と class は、HTML 要素の 2 つの最も基本的なパブリック属性です。

特徴：

差別化とはラベルの違いを意味します
複数のタグに同じタグを使用できます

<html>
	<head>
		<meta charset="utf-8">
        <style>
            .blue {
      
      
            color: blue;
            }
        </style>
	</head>
	<body>
        <div class="blue">咬人猫</div>
        <div>咬人猫</div>
	</body>
</html>

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

構文の詳細

クラス名はで始まります。
以下のタグは class 属性を使用して呼び出されます。
1 つのクラスは複数のタグで使用でき、1 つのタグで複数のクラスを使用することもできます (複数のクラス名はスペースで区切る必要があります。このアプローチにより、コードがより再利用可能になります)。
長いクラス名である場合は、- を使用して分割できます。
クラスの名前に純粋な数字、漢字、またはタグ名を使用しないでください。

注: ラベルでは複数のクラス名を同時に使用でき、これにより同じ属性が抽出され、コードが簡素化されます。

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

IDセレクター

要素の id 属性

id 属性には、ページ要素を識別する一意の ID が与えられます (ID は一意ですが、HTML 内で一意でない場合はエラーは報告されません)。ページ上に同じ id 属性の値が複数ある場合、CSS セレクターまたは JavaScript は制御対象の要素を区別できないため、最終的にエラーを報告します。

CSS で # を使用して ID セレクターを示します
ID セレクターの値は、HTML の要素の ID 値と同じです。
htmlの要素IDに#を含める必要はありません
ID は一意であり、複数のタグで使用することはできません (クラスセレクターとの最大の違い)

<html>
	<head>
		<meta charset="utf-8">
        <style>
            #ha {
      
      
            color: red;
            }
            </style>
	</head>
	<body>
        <div id="ha">蛤蛤蛤</div>
	</body>
</html>

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

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

すべてのタグを選択するには、* の定義を使用します。

* {
	color: red;
}

ページ上のすべてのコンテンツは赤色に変更されます。
ページ構造によって呼び出す必要はありません。

複合セレクター

子孫セレクター

包含セレクターとも呼ばれ、親要素内の某个子元素またはを選択します孙子元素。

元素1 元素2 {样式声明}

要素 1 と要素 2 はスペースで区切る必要があります。
要素 1 が親、要素 2 が子です。要素 2 のみが選択され、要素 1 は影響を受けません。

<html>
	<head>
		<meta charset="utf-8">
        <style>
            ol li {
      
      
            color: red;
            }
            </style>
	</head>
	<body>
        <ul>
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
        </ul>
        <ol>
            <li>ddd</li>
            <li>eee</li>
            <li>fff</li>
        </ol>
	</body>
</html>

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

子セレクター

子孫セレクターと似ていますが、選択できるのは子タグのみです。

元素1>元素2 { 样式声明 }

区切るには大なり記号を使用します
実の息子のみを選択し、孫の要素は選択しないでください

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

.two a {
    
    
	color: red;
}

子孫セレクターは、リンク 1 と 2 の両方を選択するように作成されます。

.two>a {
    
    
	color: red;
}

サブセレクターの書き方、リンク1のみ選択

ユニオンセレクター

複数のラベルグループを選択する場合に使用します（一括宣言）

元素1, 元素2 { 样式声明 }

カンマで区切られた複数の要素。
要素 1 と要素 2 が同時に選択されていることを示します
どの基本セレクターでも共用体セレクターを使用できます。
共用体セレクターは縦方向に記述することをお勧めします。各セレクターは 1 行を占めます (最後のセレクターにはカンマを含めることはできません)。

疑似クラスセレクター

リンク擬似クラスセレクター

a:link はアクセスされていないリンクを選択します
a:visited は訪問済みのリンクを選択します
a:hover は、マウスポインタが置かれているリンクを選択します
a:active はアクティブなリンクを選択します (マウスを押してもポップアップしません)。

予防

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

:force 疑似クラスセレクター

<html>
	<head>
		<meta charset="utf-8">
        <style>
            .three>input:focus {
                color: red;
            }
            </style>
	</head>
	<body>
        <div class="three">
            <input type="text">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
	</body>
</html>

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

ボックスモデル

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

HTML の各要素は長方形の「ボックス」に相当し、
このボックスは次のパーツから構成されます。

コンテンツエリア

コンテンツ領域は CSS ボックスモデルの中心であり、ボックスの主な情報コンテンツ (テキスト、画像など) が表示されます。コンテンツ領域はボックスモデルの必須部分であり、他の 3 つの部分はオプションです。

コンテンツ領域には、幅、高さ、オーバーフローという 3 つの属性があります。width 属性と height 属性を使用して、ボックスのコンテンツ領域の高さと幅を指定します。ここで、width と height の 2 つの属性はコンテンツ領域用であり、パディング部分は含まれないことに注意してください。コンテンツ情報が多すぎてコンテンツ領域の範囲を超える場合、overflow属性を使用して処理方法を指定できます。overflow属性については後ほど詳しく説明します。

パディング

パディングとは、コンテンツ領域と境界線の間のスペースを指し、コンテンツ領域の背景領域とみなすことができます。

パディング属性には、padding-top、padding-bottom、padding-left、padding-right、および上記 4 つの方向を組み合わせた単純なパディング属性 padding の 5 種類があります。これらの 5 つのプロパティを使用して、コンテンツ領域の各方向の境界間の距離を指定します。

フレーム

CSS ボックスモデルの境界線は、前に学習した境界線と同じです。

ボーダー属性には、border-width、border-style、border-color、および 3 種類の属性を組み合わせたショートカットのボーダー属性 border が含まれます。このうち、border-widthはボーダーの幅を指定し、border-styleはボーダーの種類を指定し、border-colorはボーダーの色を指定します。「border-width:1px;border-style:solid;border-color:gray;」は「border:1pxソリッドグレー;」と同等です。
余白

マージンは 2 つのボックス間の距離を指し、子要素とその親要素の間の距離、または兄弟要素間の距離の場合があります。

マージンは要素が互いに緊密に接続されるのを防ぎ、CSS レイアウトの重要な手段です。また、マージン属性には、margin-top、margin-bottom、margin-left、margin-right、および上記 4 方向を組み合わせた単純な内マージン属性 margin の 5 種類があります。同時に、CSS ではマージンプロパティに負の値を指定することができます。負のマージン値を指定すると、ボックス全体が指定した負の値の反対方向に移動し、ボックスが重なる効果が生じます。。

ブラウザごとのボックスモデルの違い

标准 w3c 盒子模型スコープにはマージン、ボーダー、パディング、コンテンツが含まれ、コンテンツ部分には他の部分は含まれません。

内容 = 高さ + 幅

ie 盒子模型スコープにはマージン、ボーダー、パディング、コンテンツも含まれます。標準の w3c ボックスモデルとの違いは、ie ボックスモデルのコンテンツ部分にボーダーとパディングが含まれることです。

コンテンツ = 高さ + 幅 + 境界線 + パディング

フレーム

基本属性

太さ: ボーダーの幅
スタイル: 境界線スタイル、デフォルトでは境界線なし。実線の実線破線破線の境界線点線点線の境界線
色: ボーダーカラー
略語をサポートしており、順序は必要ありません

<div>test</div>

div {
    
    
	width: 500px;
	height: 250px;
	border-width: 10px;
	border-style: solid;
	border-color: green;
}

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

境界線によってボックスが拡大されます
。幅と高さが 500*250 で、ボックス全体の最終的なサイズが 520*270 であることがわかります。10 ピクセルの境界線はサイズを拡大するのと同等です。

通过 box-sizing 属性可以修改浏览器的行为, 使边框不再撑大盒子.

* {
    
    
	box-sizing: border-box;
}

これは、設定した幅と高さのサイズがボックス全体のサイズ (マージン、パディング、境界線を含む) であることを意味します。

略語をサポートしており、順序は必要ありません

border: 10px solid green;

境界線は 4 方向に変更できます。

border-top/bottom/left/right

パディング

パディングはコンテンツと境界線の間の距離を設定します。
デフォルトのコンテンツは境界線に対して配置されます。パディングを使用してこの距離を制御します

パディングトップ
パディングボトム
パディング左
右パディング

<div>test</div>

div {
    
    
	 height: 200px;
	 width: 300px;
	 padding-top: 5px;
	 padding-left: 10px;
     background-color: green;
}

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

左側と上に対応するマージンがあることがわかります。
ボックス全体のサイズは、元の 300 * 200 => 310 * 205 から変更されました。これは、パディングもボックスのサイズに影響を与える (ボックスが大きくなる) ことを示しています。
box-sizing: border-box 属性を使用すると、パディングによってボックスが引き伸ばされるのを防ぐこともできます (上記のボーダーと同様)。

複合書き込み

padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)

余白

ボックス間の距離を制御します。

マージントップ
マージン-ボトム
左マージン
右マージン

<div class="first">蛤蛤</div>
<div>呵呵</div>

div {
    
    
        background-color: red;
        width: 200px;
        height: 200px;
} 
.first {
    
    
        margin-bottom: 20px;
}

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

2 つの div ブロックの間に空白があることがわかります。これが最初のマージンです。

複合書き込み

margin: 10px; // 四个方向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40

ブラウザのデフォルトのスタイルを削除する

ブラウザは要素、特に内側と外側のマージンにいくつかのデフォルトスタイルを追加します。ブラウザごとにデフォルトスタイルは異なります。さまざまなブラウザでコードを統一したスタイルで表示できるようにするために、
ブラウザのデフォルトスタイルを削除することがよくあります。
これを実現するには、ワイルドカードセレクターを使用します。

*{
    
    
	marign: 0;
	padding: 0;
}

要素の表示モード

CSS には HTML タグの表示モードが多数ありますが、
ここでは 2 つのみに焦点を当てます。

ブロックレベルの要素 (ブロック)
インライン要素（インライン）

ブロックレベルの要素

共通の要素:

h1～h6
p
ディビジョン
ウル
オル
リー
等

特徴：

独占一行
高さ、幅、パディング、マージン、行の高さはすべて制御できます。
幅のデフォルトは親要素の幅の 100% (親要素と同じ幅)
ラインおよびブロックレベルの要素を含めることができるコンテナ (ボックス) です。

インライン要素/インライン要素

ある
強い
b
えっと
私
の
s
インス
あなた
スパン
等

特徴：

不独占一行, 一行可以显示多个
高さ、幅、行の高さの設定が無効です
左右のマージンは有効（上下は無効）、パディングは有効です。
デフォルトの幅はコンテンツ自体です
インライン要素にはテキストとその他のインライン要素のみを含めることができ、ブロックレベルの要素は含めることができません。

表示モードを変更する

display 属性を使用すると、要素の表示モードを変更できます。div
などをインライン要素に変換したり、a、span などをブロックレベルの要素に変換したりできます。

表示: ブロックがブロックレベルの要素に変更されました [一般的に使用される]
表示: inline が inline 要素に変更されました [ほとんど使用されません]
表示: ock がインラインブロック要素に変更されました

CSSレイアウト

CSS レイアウトは非常に面倒ですが、いくつかの簡単なアプリケーションを満たすことができる簡単なレイアウト方法をいくつか知っています。

柔軟なレイアウト

フレキシブルレイアウトでは、どの要素に対してもインライン要素 (inline) とブロックレベル要素 (block) の区別はなく、フレキシブルボックス内の子要素、またはコンテナメンバー (フレックスアイテム) になっているとしか言えません。サイズは自由に設定できますが、全体のサイズはコンテナー全体 (フレックスコンテナー) によって制御されます。

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

<style>
	div {
    
    
		width: 100%;
		height: 150px;
		background-color: red;
	} 
	div>span {
    
    
		background-color: green;
		width: 100px;
	}
</style>

この時点で見られる効果は、

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

div に display:flex を追加すると、次のような効果が得られます。

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

この時点で、span には高さがあり、「インライン要素」ではなくなっていることがわかります。
次に、justify-content: space-around; を div に追加すると、次のような効果が得られます。

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

フレックスレイアウトの基本概念

フレックスとはフレキシブルボックスの略で「フレキシブルボックス」という意味です。
任意の HTML 要素を display:flex として指定して、柔軟なレイアウトを完成させることができます。

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.
基本概念：

display:flex 属性が設定されている要素はフレックスコンテナと呼ばれます
そのすべての子要素は、すぐにコンテナのメンバー (フレックスアイテムと呼ばれます) と呼ばれます。
フレックスアイテムは、フレックス方向 (スピンドル) と呼ばれる、垂直方向または水平方向に配置できます。

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

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

共通のプロパティ

justify-content
主軸上の子要素の配置を設定します。

ご使用前に必ずスピンドルの向きを確認してください。
flex-direction: 主軸の方向を決定します。
1. row (デフォルト値): 左端を始点として、主軸を水平方向に設定します。
2. row-reverse: 右端を始点として、主軸を水平方向に設定します。
3. 列: 上端を始点として、主軸を垂直方向に設定します。
4. column-reverse: 下端を始点として、主軸を垂直方向に設定します。

属性値

価値	説明する
フレックススタート	デフォルト。項目はコンテナの先頭にあります。
フレックスエンド	アイテムはコンテナの端にあります。
中心	アイテムはコンテナの中央にあります。
間のスペース	項目は行間に間隔をあけて配置されます。
周囲の空間	項目には行の前、行の間、後にスペースがあります。

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
	<span>4</span>
	<span>5</span>
</div>

<style>
	div {
    
    
		width: 100%;
		height: 150px;
		background-color: red;
		display: flex;
	}
	div span {
    
    
		width: 100px;
		height: 100px;
		background-color: green;
	}
</style>

justify-content が指定されていない場合、デフォルトのレイアウトは左から右です。

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

justify-content: flex-end を設定すると、要素が右側に配置されます。

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

jutify-content: center を設定すると、要素が中央に配置されます。

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

justify-content: space-around; を設定すると、残りのスペースが均等に分割されます。
ここに画像の説明を挿入します

justify-content: space-between; を設定し、まず両側の要素を端に近づけてから、残りのスペースを均等に分割します。

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

align-items
横軸の要素の配置を設定します。
上記コードでは主軸方向に要素を配置していますが、同様に横軸方向に要素を配置するように指定することもできます。

属性値

価値	説明する
ストレッチ	デフォルト。アイテムはコンテナに合わせて引き伸ばされます。
中心	アイテムはコンテナの中央にあります。
フレックススタート	項目はコンテナの先頭にあります。
フレックスエンド	アイテムはコンテナの端にあります。
ベースライン	アイテムはコンテナのベースラインに配置されます。

stretch(拉伸):
これは align-content のデフォルト値であり、子要素の高さが明示的に指定されていない場合、親要素の高さを満たすことを意味します。

<div>
	<span>1</span>
	<span>2</span>
	<span>3</span>
</div>

<style>
	div {
    
    
		width: 500px;
		height: 500px;
		background-color: green;
		display: flex;
		justify-content: space-around;
	} 
	div span {
    
    
		width: 150px;
		background-color: red;
	} 
</style>

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

共通の要素属性の設定

フォントのプロパティ

フォントの設定font-family

body {
    
    
	font-family: 微软雅黑;
	font-family: 'Microsoft YaHei';
}

フォント名は中国語でも可能ですが、推奨されません
複数のフォントを区切るにはカンマを使用します (フォントは左から右に検索されます。フォントが見つからない場合は、デフォルトのフォントが使用されます)。
フォント名にスペースが含まれる場合は、引用符を使用します。
互換性が悪くなりますので、一般的なフォントを使用することをお勧めします。

フォントサイズを設定するfont-size

p {
    
    
	font-size: 20px;
}

ブラウザごとにデフォルトのフォントサイズが異なるため、明確な値を指定することをお勧めします (Chrome のデフォルトは 16 ピクセル)。
bodyタグにはfont-sizeを使用できます
単位pxに注意して忘れないようにしてください。
タイトルタグのサイズは個別に設定する必要がある

フォントの太さを設定するfont-weight

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

数値を使用して厚さを示すことができます。
700 == 太字、400 は太字なし、== 通常
値の範囲は 100 -> 900 です。

テキスト属性

テキストの色color

RGB を理解する
私たちのモニターは、たくさんの「ピクセル」で構成されています。各ピクセルは点とみなされ、この点が特定の色を反映します。R (赤)、G (緑)、
B (青) を使用して表現します。色（光と色の三原色）のことです。3つの色を異なる割合で組み合わせると、
さまざまなカラフルな効果が得られます。コンピュータでは、R、G、Bの3つの成分がそれぞれ1バイトで表されます(8 ビット、表現範囲は 0 ～ 255、16 進表現は 00 ～ FF) 値が大きいほどコンポーネントの色が暗くなり、255、255、255 は白、0、0、0 は黒を表します。

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

color 属性値の書き方:

事前定義された色の値（直接語）
[最もよく使用される] 16 進形式
RGBモード

テキストの配置text-align

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

text-align: [值];

中央: 中央揃え
左: 左揃え
右: 右揃え

文字装飾 text-decoration

text-decoration: [值];

アンダーラインアンダーライン【よく使う】
none は何も意味しません。a タグから下線を削除できます。
overline オーバーライン [一般的には使用されません]
line-through 行削除 [一般的には使用されません]

テキストのインデントtext-indent

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

text-indent: [值]

単位は px または em です。
単位として em を使用することをお勧めします。1 em は現在の要素のテキストサイズです。
インデントは負の値にすることもできます (これは、左にインデントすることを意味します) (これにより、テキストが飛び出すことになります)。

行高 line-height

line-height: [值];

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

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

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

トップライン
中心線
ベースライン
結論

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

コンテンツ領域: 下の行と上の行で囲まれた領域。濃い灰色の背景領域です。

行の高さ = 上マージン + 下マージン + フォントサイズ

行高等于元素高度, 就可以实现文字居中对齐

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

<div class="line-height">
	<div class="two">
		文本垂直居中
	</div>
</div>

背景のプロパティ

背景色background-color

background-color: [指定颜色]

デフォルトは透明ですが、色を設定することで変更できます。

背景画像 background-image

background-image: url(...);

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

URLは省略しないでください。
URL は絶対パスまたは相対パスにすることができます
URL に引用符を追加することも、追加しないこともできます。

背景のタイリングbackground-repeat

background-repeat: [平铺方式]

繰り返し: タイリング
no-repeat: タイリングなし
repeat-x:水平方向に並べて表示
繰り返し-y: 垂直タイル

デフォルトは繰り返しです。

背景色と背景画像は同時に存在することができ、背景画像は背景色の上にあります。

ボーダースタイル

楕円形のボーダーborder-radius

境界線を丸くするには、border-radius を使用します。
長さは内接円の半径です。値が大きいほど、円弧が強くなります。

border-radius: length;

第 4 章 CSS の基本

記事ディレクトリ

CSSを学ぶ目的

3つの導入方法

内部スタイルシート

インラインスタイルシート

外部スタイルシート

セレクターの分類

ベースセレクター

ラベルセレクター

クラスセレクター

IDセレクター

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

複合セレクター

子孫セレクター

子セレクター

ユニオンセレクター

疑似クラスセレクター

ボックスモデル

ブラウザごとのボックスモデルの違い

フレーム

パディング

余白

ブラウザのデフォルトのスタイルを削除する

要素の表示モード

ブロックレベルの要素

インライン要素/インライン要素

表示モードを変更する

CSSレイアウト

柔軟なレイアウト

フレックスレイアウトの基本概念

共通のプロパティ

共通の要素属性の設定

フォントのプロパティ

テキスト属性

背景のプロパティ

ボーダースタイル

おすすめ