CSS (Cascading Style Sheets、Cascading Style Sheets) は、フロントエンド アプリケーションの開発に不可欠なツールです。たとえば、HTML5 が体で、CSS3 が体に着る服で、HTML5 の Web ページ全体がより美しくなります。下のCSSを整理してみましょう〜
目次
1.CSSの紹介
1.1 CSS の簡単な歴史
はるか昔（中華民国時代など）、HTMLは単独で存在し、CSSとは何の関係もなかったと言われています。しかし、インターネットの漸進的な発展により、人々は HTML でより多くのことをより美しく書きたいと考え、HTML2 が誕生しました (えっと...)。しかし、スタイルを処理するために多くのものを追加した後、HTML はさらに肥大化しました。1994 年、Ha Kun Li は構造とスタイルの分離の概念を提案し、友人の Burt Boss と共に CSS を書きました。
1995 年に世界初の Web 組織である W3C が設立され、組織のメンバーと CSS の作成者によって CSS が標準化され、それが CSS 1.0 です。同年、CSSが世界で広く使われるようになり、CSS、HTML、そしてその後のJavaScriptは「フロントエンドの三銃士」と呼ばれるようになりました。これは、フロントエンド開発における CSS の重要性を示しています。
CSS 2.0 は 1997 年にリリースされ、CSS 3.0 は 2000 年にリリースされた、現在私たちが一般的に使用している CSS3 です。(CSS 4.0 がない理由を私に聞かないでください。20 年間 4.0 が書かれていない理由を W3C に尋ねてください)
これで、CSS の簡単な歴史を終わります。また、ここで一部の学生を修正する必要があります. CSS はプログラミング言語ではありませんし、HTML もありません (HTML はマークアップ言語です). フロントエンドの 3 つの剣士のうち、JavaScript だけがプログラミング言語です.
また、CSS には Less や SASS などの拡張モジュールもいくつかあり、これらのモジュールは C の C++ と同等であり、より強力な機能を備えています。しかし、私たちの実際のプログラミングは、一般的にその高度なレベルを使用しておらず、CSS で十分です。
1.2 CSS 構文
CSS の構文は非常に単純で、単純なセレクタ {style}です。例は次のとおりです。
body{ /* 选择器 */
background-color: white; /* 样式 */
font-size: 16px; /* 也是样式 */
}スタイルの構文はattribute : value;で、JSON や YAML と似ているとは言えませんが、まったく同じです。文末のセミコロンに注目してください。したがって、CSS 構文についてまったく心配する必要はありません。
また、CSS でコメントを追加する場合は、/* コメント内容 */を使用すると、 /* */ の間の内容がコメントと見なされます。
2.CSS セレクター
2.1 セレクターの紹介
先ほど、CSS には言語全体でセレクターとスタイルの 2 つしかないと言いました. まずセレクターについて話しましょう~
セレクターはその名の通り、何かを選択するためのツールです。CSS では、セレクターは、CSS スタイルが適用される HTML 要素を指定します。
セレクターの前に、HTML コードを見てみましょう.しばらくすると、CSS がこの HTML コードに作用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<h1>Head</h1>
<p id="article1">Article1</p>
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</body>
</html>理解できない属性があっても構いません。後で説明します。HTML は次のように始まります。
HTML を学習していない場合は、以前の記事を読むことができます:ここ.
また、小さなスタイルについても知っておく必要があります。次のように、フォントを赤に変更します。
color: red;プログラミングを学んだことのない人は、このスタイルを理解する必要があると思います...
2.2 タイプセレクター
タイプ セレクターは、名前が示すように、タグのタイプを使用して HTML タグを選択します。hタグ、pタグなど。その実装は非常に単純です。つまり、 p{style}のように型名をセレクターとして直接使用します。例えば：
h1{
color: red;
}これは、この HTML ドキュメントのすべての h1 タグが赤くなることを示しています。これをブラウザーに入れて効果を確認してください (学生はまだ CSS の概要を学んでいないので、まだ試してはいけません)。
もう一度すべての p タグを赤くしてみましょう:
p{
color: red;
}ブラウザにドロップ:
効果はいいですよ～
*{style}を使用して、すべてのタグを赤にすることもできます。
*{
color: red;
}効果：
2.3 IDセレクター
誰もが id オプションを覚えているはずです (何?覚えていない?メモを取っていない?)。この属性は、アンカー リンクを使用するときに使用されました。ここで id には別の使い方があります: セレクターとして。
タグは 1 つの ID しか持つことができず、この ID は HTML ドキュメント内で常に一意であるため、id は自然なセレクターです。その構文も非常に単純です: #id name{style} . p タグの id article1 を定義する前に、この時点で役に立ちます。
#article1{
color: red;
}ブラウザにドロップ:
2.4 クラスセレクター
実際のプログラミングでは、このような状況に簡単に遭遇します。2 つのタグがスタイルを共有したい場合です。id セレクターを 2 つ使用できるという人もいますが、これは面倒です。この時点で、クラス セレクターを使用できます。スタイルを設定する必要があるタグに属性クラスを追加し、値をクラス名に設定します (「クラス名 1 クラス名 2 クラス名 3」をスペースで区切って複数設定できます)、たとえば 2 つの p上記のタグ:
<p class="article2and3">Article2</p>
<p class="article2and3">Article3</p>クラス セレクターの構文も非常に単純です: .class name {style}。以下に例を示します。
.article2and3{
color: red;
}ブラウザにドロップ:
2.5 セレクターの継承
ul タグの下にすべての li 要素を指定したいが、それほど多くのクラスを記述したくない、という状況に遭遇したことはありませんか? 大丈夫です。継承セレクターが役に立ちます。継承セレクターの構文も非常に単純です。次のように、親タグ、子タグ {style}です。
ul li{
color: red;
}ブラウザに投げます：
2.6 リンクセレクター
Web ページでリンクを目にすることがよくあります。リンクにカーソルを合わせると、リンクの色が変わります。これはリンク セレクターを使用します。次のように、多くの種類のリンク セレクターがあります。
a:link { /* 未访问的链接 */
color: red;
}
a:visited { /* 已访问的链接 */
color: red;
}
a:hover { /* 鼠标悬浮链接 */
color: red;
}その中で、a:hover マウス サスペンション リンクが最も一般的に使用されます。私のコンピューターの画面記録の問題により、効果はここには表示されません。生徒は後で自分で試すことができます〜
2.7 その他のセレクター
CSS のセレクターはこれらよりはるかに多く、構造的な疑似クラス セレクター、結合セレクターなどもありますが、一般的に使用されないため、ここでは説明しません。知りたい場合は、以下を参照してください。
また、スタイルを 2 つのセレクターで共有する場合は、次のようにコンマ演算子を使用できます。
h1,p{
color: red;
}上記の効果:
2.8 HTML インポート CSS
多くの学生は、頭の中にたくさんの疑問符を持っています。私はこれまで非常に多くのセレクターを学んできました。ここでインポートを教えます。一般的に言えば、最も簡単な方法は、新しい .css ファイルを作成し、そこに CSS コードを書き込んで、最後に HTML のhead タグにインポートすることです。インポート方法は次のとおりです。
<!-- 引入语法：<link rel="stylesheet" type="text/css" href="CSS文件名"> -->
<!-- 假设在同目录下创建了一个 style.css 并已经写好了样式 -->
<link rel="stylesheet" type="text/css" href="style.css"> CSS コードを HTML ファイルに直接記述したい場合は、style タグを使用できます。スタイルタグの使用は、CSS 構造とスタイルの分離の原則を破る不規則なフロントエンド開発方法であることに注意してください。そのため、通常は使用しません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
<style type="text/css">
/* 这个里面写 CSS 代码，不信你看这个注释的语法 */
h1{
color: red;
}
</style>
</head>
<body>
<h1>Head</h1>
</body>
</html>CSS をインポートするさらに奇妙な方法もあります: インライン スタイルです。style 属性をラベルに直接追加し、その値は CSS コードです。いいですね！セレクターも保存されます (manual dog head.jpg)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello</title>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color: red;">Head</h1>
</body>
</html>2.9 スタイルの優先順位
CSS の正式名称はカスケーディング スタイル シートですが、なぜ「カスケーディング」スタイル シートなのですか? ハッキリ言ってスタイル優先です。たとえば、.css ファイルで p タグを赤に定義し、スタイルで p タグを緑に定義し、インライン スタイルで p タグを青に定義すると、ブラウザは最終的に何色を表示するでしょうか? これは、スタイルの優先順位に帰着します。一般に、スタイルの優先順位は次のとおりです。
.css < style 标签 < 行内样式つまり、最後の p タグは青色です。次に、タイプ セレクターで p タグを赤に定義し、クラス セレクターで p タグを緑に定義し、最後に id セレクターで p タグを青に定義すると、最終的に表示される色は何色になりますか? これもスタイルの優先順位に帰着します。一般的に言えば、同じ CSS ブロック (スタイル タグなど) 内のスタイルの優先順位は次のとおりです。
通用选择器(*) < 类型/继承/组合选择器 < class 选择器 < 链接/结构伪类选择器 < id 选择器つまり、p タグはまだ青いままです。どのシェンジンビンが非常に多くのスタイルを繰り返し定義するかを私に尋ねないでください。将来このことを実際に書くときは、本当にそうするでしょう。
3.CSS スタイル
3.1 ボックスモデル
CSSセレクターについて話した後、スタイルについて話しましょう〜CSSの一般的なスタイルは実際には難しくありません.最も難しく、最も重要なのはボックスモデルです.
ボックスモデルは簡単に言えます。F12 キーを押してブラウザの開発ツールを開くと、次のようなボックスが表示されます (何?これをボックスと呼びますか?):
このボックスには 4 つのレイヤーがあり、最初のレイヤーは余白で、画像のオレンジ色の部分を表し、透明です。
2 番目のレイヤーは境界線で、画像の黄色の部分を表し、デフォルトでは透明です。
3 番目のレイヤーはパディングで、画像の緑色の部分を表し、透明です。
4番目のレイヤーはコンテンツ（コンテンツ）、図の青い部分です。
このボックスにより、Web ページの各要素のスタイル レイアウトがより美しく柔軟になります。HTML のすべての要素に適用されます。
ボックスモデルで一般的に実行するいくつかの一般的な操作
空の内側と外側のマージン:通常、すべての CSS ファイルでこれを使用します。これにより、ボックス モデルの使用範囲が制限され、必要な場合にのみ使用されます。これは CSS のユニバーサル スタイルです。これをすべての CSS ファイルの先頭に記述することをお勧めします。
*{
margin: 0;
padding: 0;
}(ボックスモデル: 礼儀正しいですか? ちょうど来て、私の内側と外側の余白をクリアしてください)
内側と外側のマージンを定義する:ボックス モデルの内側と外側のマージンが必要な場合は、それを定義できます。左側など、内側/外側マージンの特定の部分のみを定義する場合は、属性名の後に -left -right -top -bottom を追加します。単位はpx（ピクセル、ピクセル）です 忘れずに書きましょう。
/* 定义内边距 */
padding: 30px;
/* 定义外边距 */
margin: 30px;
/* 里面的 30px 可以换成任何数值，只要结尾带 px */中央表示ラベル:ラベルを中央に配置したい場合は、ボックス モデルの外側のマージンに曲線を使用することもできます。次のように、マージンを 0 auto に設定するだけです。
margin: 0 auto;
/* 上面的 0 可以换成任何数值，它代表这个元素的上下外边距 */auto はこの要素の左右の余白を表し、auto は要素の左右の余白を定義するためにブラウザに与えることと同等であるため、ブラウザは自動的に要素を中央に配置するのに役立ちます~
ボーダーの実線：デフォルトのボーダーが表示されていないので、表示させたい場合はどうすればよいでしょうか？次に、ボックス モデルの枠線スタイルを実線に変更して、表示できるようにします。境界線の太さと色を操作することもできます。詳細については以下を参照してください。
border-style: solid; /* 给边框加上实线 */
border-color: yellow; /* 给边框实线定义颜色 */
border-width: 1px; /* 给边框实线定义粗细，要加 px */Border rounded corners:デフォルトの要素は標準の長方形で、直線です. 角を丸くしたいのですが. どうすればよいでしょうか? ボックス モデルの境界線を操作して、角を丸くする必要があります。
border-radius: 10px; /* 后面的数值表示圆角的大小，要加 px */ボックス モデルの難しさは、より抽象的であることですが、それを理解している限り、その背後にある内容は非常に単純です。
3.2 背景
それでは、背景だけの簡単なことを学びましょう〜
背景（Background）は、その名の通り、要素の背景を表します。その範囲は、ボックスのパディング部分とコンテンツ部分です。背景に関する一般的な操作は非常に簡単です。背景色と背景画像を設定します。
背景色の設定:これは非常に簡単です。background-color スタイルを使用するだけです。赤・青・黄など、付属の色を使用することができ、付属の色の範囲は非常に広いです。
background-color: red;では、背景色をより妖精にする方法は？これは別の非常に使いやすいカラーピッカー Web サイトです: HTMLColorCodes、左側で色を選択した後、右側の 16 進数の文字列が色 (3F923A など) です。CSS に # を追加して使用するだけです。次のように:
background-color: #3F923A;
また、純粋な色に満足できない場合は、グラデーション カラーの Web サイトを試すことができます: Grabient . このウェブサイトにはたくさんの妖精のグラデーション カラーがあり、マスターは事前に調整されており、コピー後の CSS コードは非常に優れています。
背景画像の設定:これも非常に簡単で、background-image スタイルを使用するだけです。もちろん、比率をうまくコントロールしないと、人間なのか幽霊なのかわからないですよ～
background-image: url("image.png");
/* image.png 换成图像的 url */3.3 テキスト テキスト
Set text color:これは、最も一般的に使用されるテキストのスタイルです。color: colorを直接使用してください。色の変調は、以前に提供された HTMLColorCodes カラー パレットを使用できますが、グラデーション カラーはサポートされていません~
color: red;
/* red 可以换成任何你想要的颜色 */テキストの中心を設定します: text-align スタイルを使用できます。このスタイルは、テキストを中央揃えにするだけでなく、左右に揃えることもできます。
text-align: center; /* 居中 */
text-align: left; /* 左对齐 */
text-align: right; /* 右对齐 */テキストを上下中央に設定します: line-height 属性を使用し、line-height 属性を HTML 要素の高さと同じにします。もちろん、この方法は1行のテキストにしか適用できず、複数行のテキストには方法がありません〜
/* 比如这个 HTML 元素的高是 30px */
line-height: 30px;テキスト スタイルの設定:これは非常に便利なスタイルです。たとえば、リンクに付随する下線を削除できます。スタイルはテキスト装飾です。コードは次のとおりです。
text-decoration: none;このスタイルを使用して、通常のテキストに上線、下線、および下線を引くこともできます (下線とは何かについては、自分で試すことができます)。
text-decoration: overline; /* 上划线 */
text-decoration: line-through; /* 中划线 */
text-decoration: underline; /* 下划线 */テキストの最初の行のインデント:構成を書くときに通常使用される自然な段落の前の 2 つのスペースですが、単位はピクセルに変更されます~
text-indent: 50px;3.4 フォント フォント
フォントを指定:このスタイルは、選択したテキストに使用するフォントを指定します。複数のフォントを定義することもでき、デバイスでフォントが正常に表示されるまで、コンピューターはフォントを 1 つずつ試します。これらのフォントがデバイスで使用できない場合は、デフォルトのフォントが使用されます。
font-family: "SF Pro"; /* 指定一种字体 */
font-family: "PingFang SC", "微软雅黑", "等线"; /* 指定多种字体，字体之间用逗号隔开 */フォントサイズ指定：単位px～
font-size: 16px;フォント スタイルを指定します。斜体のみを設定できます。太字のテキストを設定するには、強力なタグを使用する必要があります。
font-style: italic; /* 一种设置斜体的方法 */
font-style: oblique; /* 另一种设置斜体的方法 */太字の方法が2つあるのに、太字の方法がまだない理由がわかりません〜
3.5 リスト一覧
リスト ヘッダーのスタイルを指定します。ulの各 li の前に円が表示されます。それを正方形に変更するにはどうすればよいでしょうか? このスタイルを使用してください〜
list-style-type: square;テーブルスタイル：あまり使わないので直リンクはこちら：テーブルテーブル
3.6 ディスプレイ ディスプレイ
今まで簡単なCSSスタイルをたくさん話してきたけど、やっと難しいスタイルにたどり着きました〜
HTML では、要素はインライン要素とブロック要素の 2 つのカテゴリに分けられます。インライン要素は、一般的に強い em 要素として使用されます。これらの要素は1行で表示できますが、高さは設定できず、高さはテキストの長さに依存します〜
ブロック要素とは、p div などの要素で、長さと幅を設定できますが、1 行で表示することはできません。
上記を理解したら、ディスプレイの学習を開始できます。
div タグと span タグ:これらは 2 つの HTML タグであり、それぞれ空のブロック要素と空のインライン要素を表します. これらの機能は、空のボックスとして機能し、レイアウトを簡素化し、CSS の選択を容易にすることです (すべての要素をプラスにすることができます) class および id 属性)
表示の設定:次のように display 属性を設定することで、この要素がブロック要素かインライン要素かを選択できます。
display: inline; /* 行内元素 */
display: block; /* 块元素 */では、要素の長さと幅を設定して、それらを 1 行に表示したい場合はどうでしょうか。このとき、display の inline-block 値を使用して、要素が 1 行で表示するインライン機能と、長さと幅を変更するブロック機能の両方を持つようにする必要があります。コードは以下のように表示されます:
display: inline-block非表示の要素:次のように、display 属性を none に設定できます。
display: none;上記のコードは、要素を非表示にすること、つまり、HTML ドキュメントのスペースを占有しないことと同じです。では、表示させたくないだけでなく、HTML スペースも占有する場合はどうすればよいでしょうか。次に、可視性スタイルを使用して、値を非表示 (hidden) に設定できます。
visibility: hidden;では、この要素を透明にしたいだけで、完全に隠したくない場合はどうすればよいでしょうか? opacity 属性を使用して、透明度を 0.0 ～ 1.0 の範囲で設定できます。値が小さいほど、要素の透明度が高くなります。
opacity: 0.4;長さと幅を設定する:幅と高さを設定する前にたくさん言ったので、それらを設定するにはどうすればよいですか? 以下のコードを参照してください。px を書かなければならないことに注意してください。
width: 300px; /* 宽度 */
height: 200px; /* 高度 */3.7 位置の位置決め
ポジショニングは、CSS の 2 つの主要な問題点の 1 つであり、もう 1 つは遅れをとっています。名前が示すように、配置は、HTML ドキュメント内の要素の位置を設定することです。位置決めには、相対位置決めと絶対位置決めの 2 種類があります。
相対位置:名前が示すように、要素の位置をそれ自体に変更することです. 簡単に言えば、要素を上下左右に移動することです. 移動する前に、まず相対ポジショニング機能を有効にします。この機能を有効にしないと移動できません。
position: relative;この機能を有効にしても、元の位置は変更されません。次に、top を使用して要素を上に移動し、bottom を使用して要素を下に移動し、left を使用して要素を左に移動し、right を使用して要素を右に移動します。ここで強調する必要があるのは、マイナス記号 - を数値の前に追加する必要があることです。そうしないと、移動の方向が逆になります。px を追加する必要もあります。ここに栗があります：
right: -30px;絶対配置:この配置は少し強力です. 一部の Web ページの右下隅で停止している「先頭に戻る」など、HTML ドキュメント内の絶対位置を直接見つけることができます.これは絶対配置によって実現されます. . もちろん、絶対配置を親要素に配置することもできますが、絶対配置または相対配置を有効にするには、親要素も必要です。通常、この関数は、親要素に影響を与えずに親要素の相対位置を有効にするために必要です。まず、絶対配置を有効にする必要があります。
position: absolute;要素は、HTML ドキュメントまたは親要素に対して相対的に左上隅に移動され、HTML ドキュメント内のスペースを占有しません。次に、top を使用して、HTML ドキュメントまたは親要素に対するこの要素の y 軸の位置を定義し (xy 軸は、学習していない場合は Baidu にすることができます)、left を使用して、この要素の x 軸の位置を定義します。エレメント。単位は px で、マイナス記号は必要ありません。
left: 100px;
top: 200px;3.8 浮き浮き
フローティングもCSSの二大難題の一つであり、その難しさはCSSにおける第一と言えます。中間にネストされた多くのインライン ブロックを持つ div 要素は、通常、次のように表示されます。
しかし、要素 1 を右端に移動したい場合はどうなるでしょうか。位置合わせで実現できると言う生徒もいましたが、動かす長さを測る必要があり面倒です。この時点で、 float を使用して達成できます。フローティングとは、簡単に言えば、ネストされた div 要素の inline-block をバルーンに結び付けられたロープ、インライン ブロックをバルーンと考えることができます。フローティングとは、ロープの束縛からバルーンを離すことです。フローティング要素はブラウザのdivに属していませんが、コードに属しています〜
左/右要素の浮動:これは非常に単純で、float スタイルを使用します。
float: right; /* 右浮 */
/* float: left; 左浮 */フローティング後、ブラウザは次のようになります。
要素1が一番右に走っていることがわかります〜
親ボーダーの崩壊の問題を解決する:フロートされた要素はブラウザーの div に属さないと言いました。詳細については画像:
コンテンツがないため、上の div が折りたたまれていることがわかります。では、この問題を解決するにはどうすればよいでしょうか。div の高さを指定できるという人もいますが、これは非常に柔軟性がありません。この問題には多くの方法がありますが、ここでは最良の効果を持つ 1 つだけを示します: メソッドの後の疑似クラスです。自分ではわからないので、インターネットで自分で検索できるのが原則です（TT）コードは次のとおりです。
#father:after{ /* 这里的 #father 换成指向父类的选择器 */
content: '';
display: block;
clear: both;
}効果はブラウザごとに異なり、一部のブラウザではサポートされていない場合がありますが、私はサポートしています〜
3.9 オーバーフロー オーバーフロー
CSSはもうすぐ花が終わります〜もちろん、花の前にはチーズポイントがあります〜
Web ページを開発するとき、1 つ (または複数) の要素の長さと幅がその親要素よりも大きく、余分な部分はオーバーフローと呼ばれることがよくあります。オーバーフローが適切に処理されないと、予期しない結果が生じる可能性があります。通常、オーバーフローを処理するには、隠しオーバーフローとスクロール ホイール方式の 2 つの方法があります。
オーバーフローを隠す：オーバーフローを隠す部分であることが分かりやすいです。コードを以下に示します。
overflow: hidden;上記の効果:
スクロール ホイール方式:名前が示すように、要素の横にスクロール ホイールを追加して、コンテンツを上下にブラウズします。スクロール ホイールを下、右、またはその両方に追加することを選択できます。コードは以下のように表示されます:
overflow-x: scroll; /* 在底部增加滚轮 */
overflow-y: scroll; /* 在右边增加滚轮 */
/* overflow: scroll; 在底部和右边增加滚轮 */効果：
この要素にスクロール ホイールが必要かどうかをインテリジェントに判断する必要がある場合は、上記のスクロールを auto に置き換えることができます。これにより、オーバーフローした場合はスクロール ホイールが自動的に追加され、オーバーフローがない場合は追加されません。この方法いいですね～
4. まとめ
CSS は実際には難しくありません。セレクターとスタイルの 2 つの文法ポイントしかありません (2 つの文法ポイントでほぼ 10,000 語を書くことを心配する必要はありません)。学習後、JavaScript 6 と React.js フレームワークを開始できます (React.js は現在人気のある JS フロントエンド開発フレームワークで、Vue.js や Angular.js などに似ています。個人的には React.js + Ant をお勧めします)。デザインの組み合わせ (Ant Design は Alibaba のコンポーネント ライブラリであり、多くの美しい要素が付属しています)
ただし、コンピュータC++2級試験（個人名義で出願可、18歳未満であれば出願可）の都合上、後期からC++やアルゴリズムの受験を開始し、小学校に比べて中学校の学力負担はかなり重いので、そう遠くないかもしれません JavaScript 6とReact.js. 要するに、フロントエンドシリーズを楽しみにしていてください！