CSS は Cascading Style Sheets の略で、CSS スタイル シートまたはカスケード スタイル シートと呼ばれることもあります。
CSS は、HTML ページ内のテキスト コンテンツ、画像の外観、レイアウトのレイアウトと外観の表示スタイルを設定するために使用されるマークアップ言語です。HTML の外観を美しくすることができ、ページがより簡潔で美しく見えます (HTML は構造の表現であり、CSS はスタイルの実現です)。
CSS は、セレクターと 1 つ以上の宣言の 2 つの部分で構成されます。
文法：
<スタイル>
セレクター {スタイル}
誰に変えるか{何に変えるか}
<スタイル>
例えば：
<style>
p {
color:red;
}
</style>(1) セレクタは HTML タグの指定に使用され、中かっこはオブジェクト設定の特定の形式です
(2) 属性と属性の位置は英語の「:」で区切ります。
(3) 複数のキーと値のペアは英語の「;」で区切られます。
CSSコードスタイル
1. スタイルフォーマット
一般的には展開系のパターンによく使われます。
次のように：
<style>
p {
color:red;
font-size:13px;
}
</style>2. スタイルの大文字化
特別な場合を除いて、すべて小文字を使用してください。
3. スペース仕様
(1) 属性値の前とコロンの後にスペースを保存する必要があります
(2) セレクターと中括弧の間にスペースを空ける
CSSセレクターの役割
さまざまなニーズに応じてさまざまなラベルを選択してください
セレクターの分類:
セレクターは、基本セレクターと複合セレクターの 2 つのカテゴリに分類されます。
ベースセレクターは単一のセレクターで構成されます
基本セレクターには、ラベル セレクター、クラス セレクター、ID セレクター、ワイルドカード セレクターが含まれます。
タグセレクター (タグ名でソート)
フォーマット：
タグ名 {
属性 1: 属性値 1。
属性 2: 属性値 2。
...................................
}
例: 次のコードは、h4 タイトルを紫色に変換します。
<style>
h4 {
color: blueviolet;
}
</style>
クラスセレクター:
テーブルに対応する単一のラベルまたは複数のラベルを選択できます
文法形式:
。クラス名 {
属性 1: 属性値 1。
属性 2: 属性値 2。
}
HTML 構造に適用されるフォームは次のとおりです。
<li class="类名称"> 内容 </li>
関連するクラス class を呼び出すには、構造内で class 属性を呼び出す必要があります。
スタイル ポイントの定義、構造クラス (クラス) 呼び出し、開発で一般的に使用される 1 つ以上。
知らせ：
(1) クラス セレクターは識別に「.」(英語形式) を使用し、その後にクラス名 (カスタム) が続きます。
(2) ラベルに示す名前を付けると理解できます。
(3) 長い名前やフレーズは水平線を使用してセレクターに名前を付けることができます
(4) 純粋な数字や中国語名などは使用せず、できるだけ英字を使用してください。
(5) 名前は意味のあるものにする必要があり、コードを読む人が以下に書かれている内容を見て理解できるようにする必要があります。
(6) 命名形式の仕様に従う必要がある
単一のクラス名は次のように使用されます。
<style>
.bule {
color: blueviolet;
}
</style>
<h4 class="bule">让我们在山的顶峰相遇吧</h4>実行後の結果は次の図に示されています。h4 タグの 1 つだけが色が変わります。
複数のクラス名: (1 つのタグで複数のクラス名を使用できます)
使用方法は次のとおりです。
<li class="red size">内容</li?
(1) デットタグのclass属性にはスペース区切りで複数のクラス名を記述可能
(2) このタグはそれぞれこれらのクラス名の形式を持つことができます
複数のクラス名を使用するシナリオ:
(1) いくつかのラベル要素の同じスタイルを 1 つのクラスに含めることができます
(2) これらのタグは、このパブリック クラスを呼び出してから、独自のクラスを呼び出すことができます。
(3) CSS スペースを節約し、全体の形式を簡単に変更できます。
複数のクラス名の使用を次のコードに示します。
<style>
.bule {
color: blueviolet;
}
.size {
font-size: 20px;
}
</style>
<p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>操作の結果、テキストの 1 つは色とサイズの両方が変更されますが、テキスト フィールドは色は変更せずにサイズのみが変更されます。操作の結果を次の図に示します。
IDセレクター:
HTML 要素は id 属性を使用してセレクターを設定し、CSS の ID は「#」で定義されます。
文法：
<style>
#id {
color:....;
background-color:....;
.............;
}
</style>具体的な利用方法は以下の通りです。
<style>
#nav {
color:pink;
font-size=12px;
}
</style>
<body>
<div id="nav">内容</div>
</body>コードは次のようになります。
<style>
.bule {
color: blueviolet;
}
.size {
font-size: 20px;
}
#color {
color:red;
}
</style>
<p class="size bule">千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p class="size">此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p id="color"> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
</p>
color この ID セレクターは 1 回のみ使用できます
スタイル #定義、構造 ID の呼び出し、1 回のみ呼び出すことができる、1 回呼び出すと、他のタグは呼び出すことはできません
と クラスの違い:
(1) クラスは人名に相当し、再利用可能
(2) id は個人の ID カード番号に相当し、1 人が 1 つだけ持つことができます。
ワイルドカードセレクター:
「*」で定義すると、ページ内のすべての要素（ラベル）を選択することを意味します
文法：
<style>
* {
color:sky blue;
}
</style>ワイルドカード セレクターは呼び出す必要がなく、すべての要素を自動的にフォーマットし、特殊な場合にのみ使用されます。
例: 内側と外側の余白を明確にする
* {
margin:0;
padding:0;
}すべてのテキストの色を変更するコードは次のとおりです。
<style>
* {
color:aquamarine;
}
</style>
CSS フォントのプロパティ:
CSS フォント (フォント) プロパティは、フォント ファミリー、サイズ、太さ、テキスト スタイル (斜体など) を定義するために使用されます。
フォントファミリー:
CSS はfont-familyプロパティを使用してテキストのフォント ファミリを定義します
(1) さまざまなフォントを区切るには英語のカンマを使用する必要があります
(2) 通常、単語が複数ある場合はスペースで区切って引用符を付けます。
(3) システムに付属しているフォントを使用して、各ユーザーで正常に表示できることを確認してください。
(4) 最も一般的なフォント: Microsoft YaHei、tahoma、arial、Hiagino Sans
フォント ファミリに複数のフォントがある場合は、最初に最初のフォントがシステムに存在するかどうかを確認し、存在する場合は最初のフォントを適用し、存在しない場合は既存のフォントを順に探します。
使用方法は次のとおりです。
<style>
p {
font-family="Microsoft YaHei"、"tahoma,arial"、"Hiagino Sans"
}
</style>
フォントサイズ：
CSS はfont-sizeを使用してフォント サイズを定義します
p {
font_size:20px;
}(1) px (ピクセル) サイズは、Web ページで最も一般的に使用される単位です。
(2) Google Chromeのデフォルトのフォントサイズは16pxです
(3) ブラウザごとにデフォルトで表示されるフォントサイズが異なる場合がありますが、デフォルトのサイズではなく、明確な値を提供するよう努めています。
(4)本文のページ全体の文字サイズを指定できます
タイトルとラベルは特殊で、文字サイズを別途指定する必要があります
フォントの太さ: (ピクセル値 px を加算せずに数値を直接書き込みます)
font-weightプロパティを 使用してフォントの太さを設定します
パラメータ:
| 普通 | 通常のデフォルトフォントはnumber=400に相当します。 |
| 大胆な | 大胆な。数値=700に相当 |
| より大胆な | 極太字、IE5+ |
| ライター | LE5+薄型ボディ |
| 番号 | フォントの太さは数値に従って直接調整できます。 |
テキストスタイル
font-styleを使用してテキストのスタイルを設定します
p {
font-style:normal;
}属性値には italic 斜体スタイルが含まれています。主な機能は、斜体フォントを斜体でなくすることです。
フォント複合プロパティ:
font 属性は上記のテキスト スタイルを組み合わせることができ、コードの長さを節約できます。
形式は次のとおりです。
体 {
フォント: フォントスタイル フォントの太さ フォントサイズ/行の高さ フォントファミリー
}
このうち、font-sizeとfont-familyは必ず書かないと正常に実行されません。
body { font: italic 700 16px 'microsoft yahe'}bodyのコードをpタグに変更すると実行結果は以下のようになります。
(1) font 属性を使用する場合、順序は上記の文法形式に従って記述する必要があり、変更することはできません。各属性はスペースで区切られます。
(2) 設定する必要のないプロパティは直接無視できます (つまり、デフォルト値を使用します)。ただし、font-size プロパティと font-family プロパティは保持する必要があります。そうしないと、フォントは機能しません。
テキスト属性
CSS テキスト (テキスト) 属性は、色、配置テキスト、装飾テキスト、テキストのインデント、行間隔などのテキストの外観を定義できます。
文字色( color )
color 属性はテキストの色を定義するために使用されます。
ディビジョン {
赤色;
}
| 表現 | 属性値 |
| RGBコード | rgb(255,0,0) または rgb(100%,0%,0%) |
| 定義済みの色 | 赤、緑、青、ピンク |
| 16進数 | #FF0000、#FF6600、#29D794 |
開発で一般的に使用される 16 進数
テキストを整列する( text-align )
text-align 属性は、要素内のテキスト コンテンツの水平方向の配置を設定するために使用されます。
例えば：
div {
text-align:center;
}| 左 | 左揃え (デフォルト) |
| 中心 | 中央揃え |
| 右 | 右揃え |
例を挙げると、コードは次のとおりです (テキストを中央に配置します)。
<style>
.align {
text-align: center;
}
</style>
<body>
<h4 class="align">让我们在山的顶峰相遇吧</h4>
<h4 class="align"> 一起去吧，更远的地方</h4>
</body>コードの実行結果を図に示します。
テキストを装飾する( text-decoration )
text-decoration 属性は、テキストに追加する装飾を指定します。テキストに下線、取り消し線、上線などを付けることができます。
ディビジョン {
テキスト装飾:下線;
}
属性値を以下の表に示します。
| 属性値 | 説明 |
| なし | デフォルトは装飾なしです（下線をなくすこともできます） |
| 下線 | 下線、リンクには下線が付いています |
| 上線 | オーバーライン（ほとんど使用されていません） |
| ラインスルー | 取り消し線 (一般的には使用されません) |
例として、以下に示すようにリンク a の下線を削除すると、コードは次のようになります。
<style>
a {
text-decoration: none;
}
</style>
<body>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
<h1>对角巷乐队</h1>
</a>
</body>操作の結果を次の図に示します。
テキストのインデント( text-indent )
text-indent 属性は、テキストの最初の行 (通常は段落の最初の行) のインデントを指定するために使用されます。
ディビジョン {
テキストインデント: 20px;
}
通常、このプロパティを設定すると、すべての要素の最初の行を指定の長さにインデントできます。長さが負の値であっても可能です。
p {
テキストインデント:2em;
}
Em は相対単位であり、現在の要素のテキスト サイズの距離です。現在の要素にサイズが設定されていない場合は、親要素のテキスト サイズに従います。
一般に、em はインデントを設定するために使用されます。インデントされるのはいくつかの単語だけであり、開発者にとって非常に便利です。
この部分はすでに学習しているので、すべての段落をインデントする操作を実行してみましょう。コードは次のとおりです。
<style>
p {
text-indent: 2em;
}
</style>
<body>
<p>千年前，万里外的星星，发出的光芒，跨过时间和空间，照耀着此刻的我们。在时间长河和漫漫宇宙中留下了痕迹。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p>此时此刻，人群中的我们，做出的每一件不起眼的小事，也都将在这个世界留下它的痕迹，这个痕迹或深或浅，或长或短。</p>
<p> 单曲《我们》延续了对角巷以往温暖的风格，主唱王艺丰用自己的歌声唤醒人们心中的理想和希望。对于整个世界来说，我们都是无比渺小的存在，但是这个世界就是由无数个我们所构成的，每个人在属于自己的领域里都是不可比拟的。我们一直前行，心存希望和美好，用自己的微薄力量温暖和保护身边的人，守护自己的小小世界。我们总说的诗和远方，每个人都在追寻的路上，碌碌无为的一生并不是我们想要的，可以平凡，但拒绝平庸。一起吧，去更远的地方，看更美的风景。
</p>
</body>実行後の結果は次のようになります。
行間隔(行の高さ)
line-height 属性は、行間の距離 (行の高さ) を設定するために使用されます。
p {
行の高さ:26px;
}
CSSインポート方法
内部スタイルシート:
内部スタイル シートは HTML ページ内に記述され、すべての CSS コードが抽出され、それが個別に <style> タグに配置されます。
<スタイル>
ディビジョン {
赤色;
フォントサイズ:19px;
}
</スタイル>
(1) <style> タグは HTML ドキュメント内のどこにでも配置できますが、通常は <head> タグ内に配置されます。
(2) このように、現在のページ全体で要素のスタイル設定を制御すると便利です
(3) コード構造は明確だが、構造とスタイルが完全に分離されていない
(4) 埋め込みインポートとも呼ばれる内部スタイル設定を使用します。
インラインスタイルシート
インラインスタイルシート（インラインスタイルシート）は、要素タグ内のstyle属性にcssスタイルを設定するものです
<div style="color :red; font-size:19px} 内容</div>
(1) スタイルは実際にはラベルの属性です
(2) ダブルクォーテーションの途中はCSSの仕様に従った記述方法とする
(3) 現在のラベルを制御して希望のスタイルを設定できます
外部スタイルシート
実際の開発では、外部スタイルシートの核心は、別途CSSファイルに記述し、そのCSSをHTML文書に導入することになります。
導入は 2 つのステップに分かれています。
(1) 接尾辞 .css が付いた新しいスタイル ファイルを作成し、すべての CSS コードをこのファイルに記述します。
(2) HTML ページで、<link> タグを使用してこのファイルをインポートします
形式は次のとおりです。
<link rel = "スタイルシート" href = "css ファイルのパス">
| 属性 | 効果 |
| 相対 | 現在のドキュメントとリンクされたドキュメントの間の関係を定義します。ここでは、リンクされたドキュメントがスタイル シートであることを示すスタイルシートとして指定する必要があります。 |
| href | リンクされた外部スタイル シート ファイルの URL を定義します。相対パスまたは絶対パスを使用できます。 |
外部スタイル シートを使用して CSS を設定します。外部チェーンおよびチェーン インポートとも呼ばれます。
<link>タグは<head>タグ内に記述します
クロムデバッグツール
(1) Ctrl+ホイールでズームインし、小さなコードを配置できます
(2) 左側がhtml、右側がcss
(3) 適切なCSSは値を変更して色を表示できます
(4) Ctrl+Oブラウザのサイズを復元する
(5) 要素をクリックすると、右側にスタイルのインポートがないことがわかります。クラス名またはスタイルのインポートが間違っている可能性が高くなります。
(6) スタイルの単眼視の前に黄色の感嘆符プロンプトがある場合は、スタイルの書き込みエラーです
エメット文法
HTML構造構文を迅速に生成
(1) ラベルを生成する場合は、ラベル名を直接入力し、Tabキーを押します。
(2) 同一のタグを複数生成したい場合は*を追加します。
div*3 は 3 つの div タグを生成できます
(3) 親子関係ラベルがある場合は > を使用できます。
ul>li は、li が ul のサブタグであることを意味します
(4) 兄弟愛のラベルがある場合は、+ を使用してください。
div+p
(5) クラス名または ID 名を生成する場合は、.demo または #two と書いて Tab キーを押すだけです
(6) 生成された div クラス名が正しい場合は、自動インクリメント文字「￥」を使用できます。
(7) 生成したタグ内に内容を記述したい場合は、{ }内に内容を記述します
例 .nav <div class="nav"> </div>
#na <div id = "na" > </div>
p.nav はラベル p を処理します。
.demo$*5 には、div 内にクラス 1、2、3、4、および 5 の 5 つのラベルがあります。
div {コンテンツ}*n には n 個の div+コンテンツがあります
CSS スタイル構文を迅速に生成する
cssは基本的に略語の形をとります
(1) たとえば、w200+tab は幅: 200px です。
(2) たとえば、lh26+tab は line-height: 26px;
複合セレクター
子孫セレクター
子孫セレクタは包含セレクタとも呼ばれ、親要素内の子要素を選択することができ、次のように記述します（外側のラベルを前に書き、内側のラベルを後ろに書き、スペースで区切ります）。
文法：
要素 1 要素 2 {スタイル宣言}
要素 1 内の要素 2 をすべて選択することを示します (要素 2 は要素 1 の子孫要素です)
例えば：
ul li {スタイル宣言} は、ul タグ内のすべての li タグを選択します
(1) 要素 1 と要素 2 はスペースで区切られています。
(2) 要素 1 が親、要素 2 が子で、最後に選択された要素は要素 2 です。
(3) 要素 2 は、要素 1 の子孫である限り、息子または孫にすることができます。
例えば：
.nav li a{color:red;} クラス nav で li のラベル a を見つけます。
具体的な申請方法は以下の通りです。
<style>
.nav li a{
color:red;
}
</style>
<body>
<ul class="nav">
<li>
<a href="#">我好想爱这个世界啊！！</a>
我好想爱这个世界啊！！
</li>
</ul>
</body>操作の結果は次のようになります。リファレンス ナビゲーションの li タグ内の a link タグのみの色が変更されます。
子セレクター
子セレクターは、要素の最も近い子要素としてのみ使用できます。簡単に理解すると、親子要素を選択することになります。
文法：
要素 1 > 要素 2 {スタイル宣言}
要素 1 の直接の子孫要素 2 をすべて選択することを示します
例えば：
<div>
<p> 变 </p>
<p>变</p>
<ul>
<p>変更なし</p>
</ul>
</div>
(1) 要素 1 と要素 2 は大なり記号で区切られています。
(2) 要素 1 が親、要素 2 が子、最後に選択された要素が要素 2 です。
(3) 要素 2 は自分の息子である必要があり、その他の要素は許可されません
たとえば、次のコード:
<style>
div > p {
color:blueviolet;
text-align:center;
}
</style>
<div>
<p>
把我的明天都献给黑夜吧！
</p>
<ul>
<p>
把我的爱都献给你吧！！
</p>
</ul>
</div>操作の結果を次の図に示します。
ユニオンセレクター
ユニオン セレクターは、同じスタイルを定義しながら、複数のタグ セットを選択できます。通常、集合的なステートメントで使用されます
ユニオン セレクターはセレクター パス、分離された接続であり、任意の形式のセレクターをユニオン セレクターの一部として使用できます。
文法：
要素 1、要素 2、要素 3{スタイル宣言}
要素 1、要素 2、および要素 3 が選択されていることを示します
(1)要素はカンマで区切ります
(2) カンマは and として理解できます。
共用体セレクターは縦書きを好み、最後のセレクターはカンマを追加しません。
インスタンス操作を実行します。コードは次のとおりです。
<style>
p,a,h4 {
color:blueviolet;
text-align:center;
text-decoration: none;
}
</style>
<a href="https://baike.baidu.com/item/%E5%AF%B9%E8%A7%92%E5%B7%B7%E4%B9%90%E9%98%9F/23659863?fr=aladdin" target="_blank">
<h1>对角巷乐队</h1>
</a>
<p>6月12日，太合音乐集团旗下“在水星”厂牌服务艺人对角巷乐队全新单曲《我们》正式上线，这是他们继单曲《Hold You Tight》发行之后的又一温暖治愈系音乐作品。 如果说《Hold You
Tight》想表达的是只属于某一个人的专属情歌，那这首《我们》则是送给每一个努力生活的人。</p>
<img src="2.jpeg" height="650" width="1000" title="对角巷新专辑">
<h4> 一起去吧，更远的地方</h4>
実行結果を次の図に示します。
ダイアゴン横丁のタイトルはリンクであるはずであり、下線を引く必要がありましたが、スタイル ステートメントで削除されました
疑似クラスセレクター:
疑似クラス セレクターは、セレクターに特殊効果を追加するために使用されます。
疑似クラスの書き方の最大の特徴はコロン(:)で表現されることです。
リンク疑似クラス:
| リンク | 未訪問のものをすべて選択 |
| a:訪問しました |
すでに訪問済みを選択してください |
| a：ホバー | 上のマウスポインタを選択します。 |
| a:アクティブ | まだポップアップしていないマウスの長押しを選択します |
疑似クラスのノートをリンクします。
(1) 効果を確実にするため、リンク、訪問、ホバー、アクティブの順に記載してください。
記憶公式：LVのバッグは本当に良いです
(2) リンクにはブラウザのデフォルトスタイルがあるため、実際の作業ではリンクのスタイルを指定する必要があります
ライティングの実際の展開:
a {
color:gray;
}
a:hover {
color:skybule;
}
例のコードは次のとおりです。
<style>
a {
color:gray;
}
a:hover {
color:blueviolet;
}
</style>
<a href="对角巷.html" target="_balnk">在日月的璀璨间闪耀</a>操作の結果は次の図に示されており、リンク上にマウスを置くと色が変わります。
:focus 疑似クラスセレクター
:focus 疑似クラスは、カーソルでフォーム (入力) 要素を選択するために使用されます。
入力:フォーカス {
背景色:スカイビュール;
}
複合セレクターの概要:
| セレクタ | 効果 | 特徴 | 使用法 | パーティションとその使用法 |
| 子孫セレクター | 子孫を選択するために使用される | 子孫になれる | もっと | シンボルスペース |
| 子セレクター | 最も近いレベル要素を選択します | 自分の息子だけを選ぶ | 少し | より大きい符号 |
| ユニオンセレクター | 同じスタイルを選択してください | 集団用 | 多くの | コンマ |
| リンク疑似クラス | 異なるステータスのリンクを選択してください | リンクに関連する | 多くの | 通常の書き込み |
| ：集中 | カーソルを取得する | フォームに関係するもの | 少し | 入力：フォーカス |
今日はcssの基礎的な文法の学習がメインです。更新が少し遅いです。ご了承ください。学期末には数学3科目の復習をします。夏休み中に新しい知識をどんどん更新していきます！