記事ディレクトリ
CSS の概要
CSS: Web ページ、レイアウト ページを美しくします。
CSSとHTML
構造 (HTML) はスタイル (CSS) から分離されています。
HTML
コンテンツのセマンティクスのみに焦点を当てる –> 醜い;
単純なスタイルを実行できる –> 面倒。
HTML 構造: 要素の内容を表示
CSS
カスケード スタイル シート (CSS スタイル シート、カスケード スタイル シート);
CSS はマークアップ言語でもあります。
最大の価値: HTML に構造を行わせ、CSS によってスタイルをレンダリングします。
CSS で HTML を美しくする: Web ページのレイアウト
CSS 構文の仕様
CSS スタイル ルール: セレクターと 1 つ以上の宣言。
例：
h1 {
color: red;font-size: 25px;}
h1:セレクター
color:プロパティ
red:値
color:red:宣言
font-size:プロパティ
25px:値
font-size:25px:宣言
セレクター: CSS スタイルを指定する HTML タグ。
{ }: 特定のスタイル設定が含まれています。
CSSコードスタイル
(非必須仕様)
スタイルフォーマットの書き方
緊急フォーマット:
h3 {
color: deeppink;font-size: 20px;}
展開形式:
h3 {
color: deeppink;
font-size: 20px;
}
スタイルケース
一般的には小文字です。
空白の指定
属性の前、コロンの後、
セレクターと中括弧 { } の間。(どちらもスペースを空けてください)
CSS 基本セレクター
CSSセレクターの役割
さまざまなニーズに応じてさまざまなタグを選択します (タグを選択)。
セレクタークラス
ベースセレクター
(単一のセレクターで構成)
1. ラベル セレクター
2. クラス セレクター
3. ID セレクター
4. ワイルドカード セレクター
複合セレクター
1. 子孫セレクター
2. 子要素セレクター
3. 共用体セレクター
4. リンク擬似クラス セレクター
5. フォーカス擬似クラス セレクター
ラベルセレクター
标签名 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...
}
(要素セレクター) HTML タグ名をセレクターとして使用して、タグ名で並べ替えます。
利点: ページ内の特定のタイプのタグに統一された CSS スタイルを指定します。
欠点: 差別化されたスタイルをデザインすることはできず、現在のタグをすべて選択することしかできません。
クラスセレクター
異なるタグを区別して選択でき、1 つまたは複数のタグを個別に選択できます。
.类名 {
属性1:属性值1;
...
}
例: 赤色のクラスを持つすべての HTML 要素を赤色に変換します。
.red {
color: red;
}
文法:
構造体はクラス属性を使用してクラスの意味を呼び出す必要があります。
<div class='red'>变红色</div>
CSS では、クラス セレクターはドット「.」で表されます。
クラス セレクターは、「.」(英語のドット) とその後に続くクラス名 (カスタム) で識別されます。
カスタム —>
タグ名に長い名前や語句を使用することはできません。セレクターに名前を付けるには水平線を使用できます。
純粋な数字、中国語、その他の名前（できるだけ英字）は使用しないでください。
ピンインは完全に表記されます。
「命名規則」：Webフロントエンド開発仕様書マニュアル.doc
記憶式：
スタイルポイント定義、構造体クラス呼び出し。
1 つ以上。最も一般的に開発に使用されます。
複数のクラス名:
<div class="red font20">亚瑟</div>
タグのclass属性には複数のクラス名(スペース区切り)を記述します。
使用シナリオ: クラス名に同じスタイルを入れて、変更が簡単です。
IDセレクター
特定の ID でマークされた HTML 要素は、特定のスタイルを指定します。
HTML 要素は id 属性を使用して ID セレクターを設定します。ID セレクターは CSS の「#」で定義されます。
#id名 {
属性1: 属性值1;
...
}
#nav {
color: red;
}
ID セレクターとクラス (クラス) セレクターの役割:
1. クラス セレクターは複数回使用できます (名前など)
ID セレクターは一意であり、繰り返すことはできません (ID カード番号など)
2. クラス セレクターは、変更に最もよく使用されます。スタイル
ID セレクターは通常、ページの一意の要素 (JavaScript を使用することが多い) の
記憶式で使用されます。
スタイル "#" が定義され、構造体 "id" が呼び出されます。
呼び出すことができるのは 1 回だけであり、「他の人」はこれを使用してはなりません。
ワイルドカードセレクター
ページ内のすべての要素 (ラベル) を選択するには、「*」を使用して定義します。
* {
属性1: 属性值1;
...
}
ワイルドカード セレクターを呼び出す必要はなく、すべての要素にスタイルが自動的に適用されます。
特殊な場合にのみ使用されます (例: すべての要素タグの内側と外側のマージンをクリアする)。
* {
margin: 0;
padding: 0;
}
要約する
| ベースセレクター | 効果 | 特徴 | 使用法 | 使用法 |
|---|---|---|---|---|
| ラベルセレクター | 同じタグをすべて選択するには | 違う選択はできない | もっと | p {color: red}; |
| クラスセレクター | 1 つ以上のタグを選択できます | オンデマンドで選択可能 | 多くの | .nav {color: red;} |
| IDセレクター | 一度に選択できるタブは 1 つだけです | 1回しか出現できない | 一般 (js で使用) | #nav {color: red;} |
| ワイルドカードセレクター | すべてのタブを選択 | 選択した部品は必要ありません | 特別な用途 | *nav {color: red;} |
CSSテキストプロパティ
CSS フォント (フォント) プロパティは、フォント ファミリ、サイズ、太さ、テキスト スタイル (斜体など) を定義するために使用されます。
フォントファミリー
font-family 属性を使用してテキストのフォント ファミリを定義します。
p {
font-family:"微软雅黑";}
div {
font-family:Arial,"Microsort Yahei","微软雅黑";}
1. 英語では、さまざまなフォントをカンマで区切る必要があります。
2. 通常、複数の単語がスペースで区切られている場合は、引用符を追加します。
3. システムのデフォルトの組み込みフォントを使用して、どのブラウザでも正しく使用されることを確認します。
一般的なフォント:
body {
font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}
フォントサイズ
font-size プロパティでフォント サイズを定義します。
p{
font-size:20px;
}
1.px (ピクセル) サイズは、Web ページで最も一般的に使用される単位です。
2. Google Chromeのデフォルトのテキストサイズは16pxです。
3. ブラウザによっては、デフォルトで異なるフォント サイズが表示される場合があります (デフォルトを使用せず、明確な値を指定するようにしてください)。
4. 本文のページ全体のテキストのサイズを指定できます。
5. タイトルタグは文字サイズを別途指定する必要があります。
フォントの太さ
font-weight プロパティを使用して、テキスト フォントの太さを設定します。
p {
font-weight: bold;
}
| 属性値 | 説明 |
|---|---|
| 普通 | デフォルト値 (太字ではない) |
| 大胆な | 太字を定義する |
| 100-900 | 400 は標準に相当し、700 は太字に相当します (数字の後に単位はありません)。 |
| より大胆な | IES+ 極太字 |
| ライター | IES+薄型ボディ |
フォントスタイル
font-style プロパティでテキストのスタイルを設定します。
p {
font-style: normal;
}
| 属性値 | 効果 |
|---|---|
| 普通 | デフォルトでは、ブラウザには標準のフォント スタイルが表示されます。font-style: normal |
| イタリック | ブラウザには斜体のフォント スタイルが表示されます。 |
私はフォントに斜体を追加することはめったにありませんが、斜体のタグ (em、i) を斜体なしに変更します。
フォント複合プロパティ
(コードを保存)
body {
font: font-style font-weight font-size/line-height font-family;
}
1.font属性を使用する場合は、上記の順序に従う必要があり、各属性はスペースで区切られます。2. 設定する必要のないプロパティは省略できます (デフォルト値を使用します)。 とのプロパティは
保持する必要があります。そうしないと、プロパティは機能しません。font-sizefont-familyfont
フォントプロパティの概要
| 属性 | 特急 | 注意点 |
|---|---|---|
font-size |
フォントサイズ | よく使われる単位はpx（ピクセル）なので、必ず単位を覚えておきましょう。 |
font-family |
フォント | 実際の作業ではチームの合意に従ってフォントを書きます。 |
font-weight |
フォントの太さ | 太字: 700/太字、太字でない: 400/通常 (数値に単位はありません)。 |
font-style |
フォントスタイル | 傾斜あり: 斜体、傾斜なし: 通常 (通常は通常)。 |
font |
リテラルフォント | 順序があり、位置を自由に変更することはできず、文字サイズとフォントは同時に表示されなければなりません。 |
記事の内容は他の人の学習ノート動画を視聴するものであり、あくまで個人的な学習記録です。