記事ディレクトリ
1.CSS
1. CSS の概要
HTML はコンテンツのセマンティクスのみに注意を払い、単純なスタイルを作成できますが、完成すると見苦しくなる可能性があります。
CSSはいカスケード スタイル シート略語。CSS もマークアップ言語であり、主に HTML ページの設定に使用されます。テキストコンテンツ(フォント、サイズ、配置など)、画像の形状(幅と高さ、境界線のスタイル、余白など)レイアウトとレイアウトの外観。
CSS は HTML を美しくし、HTML をより美しくし、ページ レイアウトをシンプルにすることができます。HTML は構造的な表現に重点を置き、スタイルは CSS に引き継がれます。構造（HTML）とスタイル（CSS）は分離されています。
2. CSS構文仕様
CSS ルールは、セレクターと1 つ以上の宣言という2 つの主要な部分で構成されます。
- セレクターは CSS スタイルを指定するために使用される HTML タグであり、中括弧はオブジェクトに設定された特定のスタイルです。
- プロパティは、フォント サイズ、テキストの色など、指定されたオブジェクトに設定されるスタイル属性です。
すべてのスタイルは <style> タグに含まれており、スタイル シートを示します。< style > は通常 < head > の上に書かれます。
<head>
<style>
h4 {
color: red;
font-size: 20px;
}
</style>
</head>
2.CSS基本セレクター
1.セレクターの役割
セレクターは、さまざまなニーズに応じてさまざまなタグを選択します。
2. セレクターの分類
- セレクターは次のように分かれています基本セレクターそして複合セレクター大きく分けて 2 つのカテゴリ。
- 基本的なセレクターは 1 つのセレクターで構成されます。
- 基本的なセレクターには、タグ セレクター、クラス セレクター、ID セレクター、ワイルドカード セレクターが含まれます。
3. 基本セレクター
タグセレクター
タグ セレクター (要素セレクター) とは、HTML タグ名をセレクターとして使用し、タグ名に従って分類し、ページ内の特定の種類のタグに対して統一された CSS スタイルを指定することを指します。
-文法：
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
タグ セレクターは、ページ上の同じタイプのタグのスタイルを迅速かつ均一に設定できますが、差別化されたスタイルを設計することはできず、現在のタグをすべて選択することしかできません。
クラスセレクター
異なるタグを個別に選択し、1 つまたは複数のタグを個別に選択する場合は、クラス セレクターを使用できます。
-文法：
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
構造体はクラス属性を使用してクラス class を呼び出す必要があります。
例: 赤のクラスのすべての HTML 要素を赤に設定します。
.red {
color: red;
}
<div class='red'>设为红色</div>
クラス セレクターは「.」で識別され、その後にクラス名 (自分で命名) が続きます。これはラベルに名前を付けるものとして理解でき、名前は意味のあるものである必要があります。
-複数のクラス名:
より多くの選択目的を実現するために、ラベルに複数のクラス名を割り当てることができ、これらのクラス名によってこのラベルが選択され、複数の名前を持つラベルとして理解できます。
複数のクラス名を使用すると、一部のタグ要素の同じスタイルを 1 つのクラスに入れることができ、これらのタグはこの共通クラスを呼び出してから、独自の固有のクラスを呼び出すことができるため、コードを節約できます。
IDセレクター
ID セレクターは、特定の ID でマークされた HTML 要素の特定の形式を指定できます。HTML 要素は id 属性を使用して ID セレクターを設定します。CSS では、ID セレクターは「#」で定義されます。
-文法：
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
id 属性は HTML ドキュメントごとに 1 回だけ呼び出すことができます
-ID セレクターとクラス セレクターの違い:
タグには複数のクラス名を含めることができ、クラス セレクターは複数のタグで使用することもできます。ID セレクターは一意であるため、繰り返してはなりません。クラス セレクターはスタイルの変更に最も一般的に使用され、ID セレクターは通常、ページ上の固有の要素に使用されます。
ワイルドカードセレクター
CSS では、ワイルドカード セレクターは「*」で定義されます。これは、ページ上のすべての要素 (タグ) を選択することを意味します。
-文法：
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
3. 共通の CSS プロパティ
1. フォントの属性
CSS フォント プロパティは、フォント ファミリー、サイズ、太さ、テキスト スタイルを定義するために使用されます。
フォントファミリー
CSSの使用法フォントファミリープロパティはテキストのフォント ファミリを定義します。
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- スペースで区切られ、引用符で囲まれた複数の単語で構成されるフォント
- 各種フォントは英語の状態ではカンマで区切る必要があります。
- いくつかの一般的なフォント: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
フォントサイズ
CSSの使用法フォントサイズプロパティはフォント サイズを定義します。
p {
font-size: 20px;
}
- px (ピクセル) サイズ、Web ページで一般的に使用される単位
- ブラウザごとにデフォルトで表示されるフォント サイズが異なる場合があるので、明確な値を指定するようにしてください。
フォントの太さ
CSSの使用法フォントの太さプロパティはテキストフォントの太さを設定します。
p {
font-weight: bold;
}
フォントの太さのいくつかの属性値:
| 属性値 | 説明する |
|---|---|
| 普通 | デフォルト値 (太字ではない) |
| 大胆な | 大胆な |
| 100～900 | 400 は通常、700 は太字に相当します |
テキストスタイル
CSSの使用法フォントスタイルプロパティはテキストのスタイルを設定します。
p {
font-style: normal;
}
テキストスタイルのいくつかの属性値:
| 属性値 | 説明する |
|---|---|
| 普通 | デフォルト値 |
| イタリック | イタリック体 |
2. テキスト属性
CSS テキスト プロパティは、テキストの色、配置されたテキスト、装飾テキスト、テキストのインデント、行間隔などのテキストの外観を定義します。
テキストの色
色テキストの色を定義するために使用されるプロパティ。
div {
color: red;
}
テキストの色の一元的な表現:
| 表現 | 属性値 |
|---|---|
| 事前定義された色の値 | 赤、緑、青… |
| 16進数 | #FF0000、#FF6600、#29D794 |
| RGBコード | rgb(255,0,0) または rgb(100%,) |
テキストの位置を揃える
テキスト整列要素内のテキストコンテンツの水平方向の配置を設定するために使用されるプロパティ。
div {
text-align: center;
}
テキストを整列させるためのいくつかの属性値:
| 属性値 | 説明する |
|---|---|
| 左 | 左揃え (デフォルト) |
| 右 | 右揃え |
| 中心 | 中心 |
装飾文字
テキスト装飾プロパティは、テキストに追加される装飾を指定します。テキストに下線、取り消し線、上線などを追加できます。
div {
text-decoration：underline；
}
テキストを装飾するためのいくつかの属性値:
| 属性値 | 説明する |
|---|---|
| なし | デフォルト、装飾線なし |
| 下線 | 下線 |
| 上線 | 上線 |
| ラインスルー | 取り消し線 |
テキストのインデント
テキストインデントこの属性は、テキストの最初の行のインデントを指定するために使用されます。この属性を設定すると、すべての要素の最初の行を指定された長さだけインデントでき、長さが負の値であってもかまいません。
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
えっと現在の要素の 1 つのテキストのサイズ (font-size) である相対単位です。現在の要素でサイズが設定されていない場合は、親要素の 1 つのテキスト サイズになります。
行間隔
行の高さプロパティは行間の距離 (行の高さ) を設定するために使用されます。テキストの行間の距離を制御できます。
p {
line-height: 20px;
}
4.CSS導入方法
1. インラインスタイルシート（インラインスタイル）
インライン スタイル シート (インライン スタイル シート) は、要素タグ内の style 属性に CSS スタイルを設定します。
<div style="color: red; font-size: 12px;">行内样式表</div>
シンプルなスタイルの修正に適しています。
2. 内部スタイルシート（埋め込み）
内部スタイルシート (埋め込みスタイルシート) は HTML ページ内に記述されており、すべての CSS コードが抽出され、<style> タグ内に個別に配置されます。
<style>
div {
color: red;
font-size: 12px;
}
</style>
3. 外部スタイルシート（リンク済み）
スタイルは CSS ファイルに個別に書き込まれ、CSS ファイルは
HTML ページに導入されて使用されます。
<link rel="stylesheet" href="css文件路径">
| 属性 | 効果 |
|---|---|
| 相対 | 現在のドキュメントとリンクされたドキュメントの間の関係を定義します。これは、リンクされたドキュメントがスタイル シート ファイルであることを示す「stylesheet」として指定する必要があります。 |
| href | リンクされた外部スタイルシートファイルのURLを定義します |