[オリジナルチュートリアル] Huyan CSS_html/css_WEB-ITnose

前回の授業ではHTMLの基礎について話しましたが、何度も見返せるので復習はしません。この授業ではCSSの基礎を学びます。 . いつものように CSS です、CSS とは何ですか? いつものように、CSS をレイヤーごとに剥がして、皆さんと共有します。

それで、CSS とは何ですか? CSS は、実際のプログラミング言語ではなく、Web ページをより美しく見せるために使用されるスタイルシート言語です。 . HTML ドキュメントの要素にスタイルを選択的に追加できる、より豪華なコード。

次のレッスンでは、子供たちを CSS の芸術の庭に導き、CSS が HTML にもたらす美しさを鑑賞します。

まず、CSS の書き方ですが、次のように記述します。

p {

color: red

}

先ほど説明した HTML で、文字通り想像してみましょう。最後のクラスでは、

タグはありませんか、そして色、赤、ああ、p タグ内のコンテンツの色が赤であることがわかりました。すごい、それだけです。では、この CSS を HTML から参照するにはどうすればよいでしょうか。構築した CSS の美しく簡潔なコードを HTML で機能させるにはどうすればよいでしょうか。

現在 3 つの方法があります:

まず、次のように、コンテンツを CSS として

2 番目の方法は、次のように、CSS を追加するタグの style 属性を使用して直接追加することです。私はとてもハンサムです

はい、ここで使用されるスタイルは最初のメソッドで使用されるスタイルとは異なります。これは属性であり、上記のスタイルはタグです。

3 番目の方法は、すべての CSS を抽出して 1 つのファイルに入れることです。たとえば、上記の p スタイルをテキスト エディターの新しいファイルに貼り付け、style.css として保存し、styles フォルダーに保存します。それから、HTML ドキュメント内で参照される CSS ファイルを配置します。そうしないと、CSS コードはブラウザーでの HTML ドキュメントのパフォーマンスに影響しません。引用方法は次のとおりです:

原則として、このコードは次のとおりです。

を配置しました。

段落テキストが赤に変わったら、おめでとうございます。最初の CSS コードが正常に記述されました。

さて、CSS ルールを詳しく分析してみましょう:

全体の構造は CSS ルールと呼ばれます。内部の個々の部分も同じであることに注意してください:

1 つ目は、セレクター (セレクター) です。

HTML 要素はルールの先頭に配置されており、スタイルを設定する必要がある 1 つ以上の要素が選択されています。さまざまな要素にスタイルを追加するには、セレクターを変更するだけです。もちろんセレクターにはさまざまな種類がありますが、これについては後ほど説明します。

次に、宣言

color:red; などの別のルールが続きます。これは、追加する要素の属性を指定します。

次: プロパティ

これは、HTML 要素のスタイルを変更する方法です。上記の例では、color は p 要素の属性です。 CSS では、適切なプロパティを選択してルールを変更します。

プロパティ値は必須です

プロパティの右側 →_→、コロンの後に、指定されたプロパティの多くの外観から美しい部分を見つけるために使用されるプロパティ値があります 彼女に服を着せてくださいそして彼女を美しく見せます。女の子のワードローブには選択肢がたくさんあります。それは誰もが知っています。

もちろん、注意が必要な小さな構文がいくつかあります。

1. セレクター部分を除き、ルール内のすべては中かっこ {} のペアで囲む必要があります。

2. ステートメントでは、次のようにする必要があります。コロンで区切ります。 属性と属性値。

3. ルールでは、宣言をセミコロンで区切る必要があります。

複数の服を同時に変更したい場合、いや、複数の属性を同時に変更したい場合は、次のようにセミコロンで区切るだけで済みます:

p {

color: red;

width: 500px;

border: 1px ソリッドブラック

}

複数のタイプの要素を選択して、それらにスタイルのセットを追加することもできます。異なるセレクタをコンマで区切ることを忘れないでください。そうしないと、同じ服を着るように要求したためにセレクタが喧嘩することになります。

p,li,h1 {

color: red;

}

さまざまな種類のセレクターが使用されています。上記では、HTML 内の特定の要素を選択するために使用します。ドキュメントに記載されていますが、より具体的なタイプを選択することもできます。一般的に使用されるセレクターのタイプをいくつか示します。

セレクターによって選択されるコンテンツの例 クラスの要素を指定します(複数のクラスを1つのページに同時に表示できます)

ページ上の指定された属性を持つ要素 < ;img>の代わりにを選択します要素を指定しますが、hoverselect などの特殊な状態である必要がありますが、マウスがリンク上にある場合のみです

要素セレクター (タグまたはタイプ セレクターと呼ばれることもあります)	指定されたすべての HTML 要素	p Select
ID セレクター	要素の指定ID（ HTML ページ、各 ID は 1 回のみ指定できます)	#my-id または を選択します。クラスセレクター
.my-class		属性セレクター
img[src]		疑似クラスセレクター
a:hover		セレクターは女性の心と同じくらい広大で奥深いものです。興味があれば詳しく学ぶことができますが、ここでは説明しません。 私が使用しなければならない有名なボックス モデルについて話しましょう: CSS を書くとき、あなたはそれを書いたことがありますか?まだ書いていないものを書き始めなければならず、それをコースに書かなければなりません。プログラミングを手作業で学習すると、半分の労力で 2 倍の結果が得られ、6 人では無理だと私は固く信じているからです。 そうは言っても、CSS を記述するときは、そのほとんどがボックス モデルに関するものであることがわかります (サイズ、色、位置などの設定)。ほとんどの HTML 要素は、積み重ねられたボックスと考えることができます。 当然のことながら、CSS レイアウトはボックス モデルに基づいており、ページ上のスペースを占めるすべてのブロックレベルの要素は同様のプロパティを持っています。ブロックレベルの属性に関しては、今のところこの部分については気にしないでください: - パディング、コンテンツの周囲のスペース (段落の周囲のスペースなど) - パディングに続く境界線 - マージン、要素の外側の周囲のスペース この部分では以下を使用します: - 幅 (要素に属する) - 背景色、要素の内容およびパディング後の色 - カラー、要素の内容 (通常はテキスト) の色 - text-shadow: 要素内のテキストの影を設定します - display: 要素の表示モードを設定します (今のところ、この部分については気にしないでください)コンテンツ) ブロックレベル要素 ->block。 ページに CSS を追加してみましょう!属性値の変更による影響を恐れずに、これらの新しいルールをページの下部に追加してください。 ページ全体の色を変更します: html { background-color: #00539f; } このルールはページ全体の背景色を設定し、上記のコードを独自のファイルに記述します。 Web ページがどのようになっているかを確認してください。変更を加えるほど、作成したコードを削除することができます。もっと多くのことをマスターしてください。 さて、以下のコードです: width: 600px; margin: 0 auto; padding: 0 20px 20px 2 0px; 境界線: 5px 単色黒 } この body 要素にはいくつかの宣言があります。次に、それらを 1 つずつ見てみましょう。 - ページの幅を常に 600 ピクセルのままにします。 - margin: 0 auto; — margin または padding に 2 つの値を設定すると、最初の値は要素の上部と下部を表し (この例では 0 に設定)、2 番目の値は左と下部を表します。 right (ここで、auto は水平方向の左右対称を意味する特別な値です)。 1 つ、3 つ、または 4 つの値を使用することもできます。 - 背景色: #FF9500; — 要素の背景色を指定します。 body 要素には、html 要素との対比として赤みがかったオレンジ色を使用しました。実験を続けて、白や他の色を試してみてください。 - パディング: 0 20px 20px 20px; — コンテンツの周囲に小さなスペースを作成するために、パディングの 4 つの値を設定します。今回は上部のパディングを設定せず、右、下、左のパディングを 20 ピクセルに設定します。値は上、右、下、左の順に並んでいます。 - 境界線: 5 ピクセルの黒の実線 — ページの周囲に 5 ピクセルの黒の実線境界線を設定するだけです。 メイン タイトル h1 にスタイルを配置して追加します。メイン タイトル h1 がない場合は、こっそり追加してみてはいかがでしょうか。 h1 { マージン: 0; パディング: 20px 0; テキストシャドウ: 3px 3px 1px 黒 }あなたは気づいたかもしれませんが、私たちの恐ろしいギャップがありますこれは、CSS コードを提供しなくても、すべてのブラウザーがいくつかのデフォルト スタイルを提供しているためです。これには長所と短所がありますが、後で各ブラウザのデフォルトのスタイルをカバーできるため、CSS の正規化についても詳しく学ぶことができます。 ギャップを削除するために、margin:0 を設定してデフォルトのスタイルをオーバーライドします。 これまでのところ、タイトルの上部と下部のパディングを 20 ピクセルに設定し、タイトル テキストと HTML の背景色は一致しています ここで使用するもう 1 つは非常に特殊なテキストシャドウです。要素コンテンツのフォントに影を提供します。その 4 つの値は次のとおりです: - 最初のピクセル値は水平方向の影の値を設定します - 2 番目のピクセル値は垂直方向の影の値を設定します。影の値 - 3 番目のピクセル値は、影がどの程度ぼかされるかを設定します (値が大きいほど、ぼかしが大きくなります) - 4 番目の値は、影の色を設定します さまざまな値を試してください。何が得られるか見てみましょう。なんと素晴らしい結果でしょう！再び行動を起こす時が来ました。 。 。急いで動かないでください。 画像を中央揃え img { display: block; margin: 0 auto;} 最後に、画像をより美しくするために中央揃えにします。 margin: 0 auto を再度再利用できますが、他の調整を行う必要があります。 body 要素はブロックレベルの要素です。つまり、ページ上のスペースを占有し、余白や間隔を変更するその他の値を割り当てることができます。対応するインライン要素はできません。したがって、画像に余白を持たせるには、display: block を使用して画像をブロックレベルの要素に変更する必要があります。 それについて詳しく知りたい場合は、行って学ぶことができます。ちなみに、他の人の人事もこの質問をするのが好きです。革新する方法。 さて、このレッスンはこれで終わりです。次のレッスンでは、Web ページに命を吹き込むための JS を学びます。さようなら...