スタイル- オブジェクトの外部表現を定義するパラメータのセット。 たとえば、すべての第 1 レベルの見出し (タグ) が必要だとします。

) あるページでは赤、サイズ - 24、斜体で書かれ、もう一方のページでは青、サイズ - 12 になります。タイトルはオブジェクトであり、色、サイズ、スタイルはパラメーターです。 オブジェクトのパラメータがページごとに異なるだけです。 彼らはスタイルが異なります。

ページ上の各要素は、独自のスタイル (段落、見出し、行、テキストなど) を持つことができます。 すべての要素のスタイルのセットは次のように呼ばれます。 スタイルシート.

1 つの要素に複数のスタイルが指定されている場合 (見出しの例のように)、 カスケード、特定のスタイルの優先順位を決定します。

CSS の利点

• CSS を使用すると、コードのサイズが大幅に削減され、読みやすくなります。
• CSS を使用すると、HTML だけでは設定できないパラメータを設定できます。 たとえば、リンクから下線を削除します。
• CSS を使用すると、ページの外観を簡単に変更できます。 すべての見出しが青色の 50 ページの Web サイトを作成したと想像してください。 しばらくしてから、青色を緑色に変更したいと考えました。 50 ページすべてを調べて、対応する属性の色を変更する必要があります。 CSS を使用すると、これをスタイル シートで 1 回行うだけで済みます。
• CSS は、Web サイトのいわゆるブロック レイアウトに関連付けられます。

ブログ サイトの読者の皆さん、こんにちは。 今日は CSS について詳しく話していきたいと思います (資料は該当するセクションに蓄積されます)。

HTML を学習した後は、HTML に進みましょう。 スタイル マークアップ言語は Web サイト ページの外部デザインを担当しており、それを理解していなければ、何かを修正したり、移動したり、位置を調整したりすることは非常に困難になります。

もちろん、Css は Html に比べてはるかに複雑に見えますが、これはクロスブラウザーのレイアウトの問題の場合であり、独自の Web サイトのデザインの細部を修正する場合には、その必要はありません。多くの知性。 一般に、その基本を詳細に分析しようとしますが、フィリグリーの使用のニュアンスはオプションの研究に残されます（オプション）。 ただし、すべてのウェブマスターは基本的な概念を知っておく必要があります。

CSS 言語とは何ですか?またその目的は何ですか?

CSS という略語は、Cascading Style Sheets の略で、ロシア語ではカスケード スタイル シートと呼ばれます。 それは何ですか?また、この言語はなぜかつて発明されたのでしょうか?

したがって、先ほど学習したことに基づいて、Web ドキュメントのマークアップはこの言語のタグを使用して実行されると言えます。 それらの。 HTML を使用して、ドキュメント (Web ページ) の構造を作成します。 たとえば、純粋な HTML では、ドキュメント構造の他の要素を指定したり、ブラウザーで必要な外観を与えることもできます。

しかし、時間の経過により、HTML でより多くの視覚的なデザイン属性を使用する必要が生じ、ソース コードが非常に乱雑になりました。 この点に関して、別の、より有望な開発オプションが提案されました。 別のスタイルのマークアップ言語の作成 CSS。 そして、このオプションには、単にデザイン属性の数を増やすよりも多くの利点がありました。

なぜ？ 純粋な HTML でテキスト フラグメントの色を設定する方法を覚えていますか? そうです、 の助けを借りてです。 テキスト内の複数の段落を希望の色で一度に色付けしたい場合はどうすればよいでしょうか?

次に、それぞれの内部に (段落タグ P はブロックレベルです。つまり、インライン Font 要素内に配置できません)、Color 属性に目的の色の値を持つ Font タグを挿入します。

これらすべてがソースコードをひどく乱雑にし、サイトの読み込み速度が低下し、インターネット通信機器に過剰な負荷がかかるため、非常に望ましくないことです。 開発者にはこれができませんでした。

そこで彼らは現状を打開する次のような方法を考え出した。 W3C の開発者は、Web ドキュメントのすべての視覚表現を、カスケード スタイル シートまたは単に CSS (CSS と読みます) と呼ぶ特別なスタイル マークアップ言語の形式でデザインすることにしました。 テクノロジーの本質とは何でしょうか？

重要なのは、スタイル マークアップ言語を任意のドキュメント (ページ) に接続することによって、このドキュメントに表示されるすべての要素 (HTML タグによって作成される) の視覚的表現を設定できるということです。

インターネット上には、別のカスケード スタイル シート ファイルが接続されているという理由だけで Web ページの外観がどのように変化するかを明確に理解するのに役立つリソースがあります。 私の意見では、これが質問に対する最良の答えです。 CSS とは何ですか?なぜ必要ですか?.

次のリンクをクリックすると、ドキュメント (Web ページ) の基本的なビューを表示できます。

特別なことは何もありませんが、左側のメニューから [すべてのデザインを表示] リンクをクリックすると、別のスタイルシート (別のスタイルシート ファイル) を接続することで、同じ Web ページの数十、場合によっては数百のデザイン オプションを表示できます。

ソース HTML コードはまったく同じままであることに注意してください。 CSSデザインのみ変更。 すごいですね！

CSS は、HTML などと同じ意味でのマークアップ言語ではありません。 これは文体的なマークアップ言語です。独自の構文、独自の内部コンテンツがあり、多くの点で、これまでに研究された言語とは大きく異なります。

さらに、HTML と比較して、スタイル マークアップ言語ははるかに複雑です。 基本的な概念に加えて、知っておく必要があるニュアンスがたくさんあります。 HTML には特別なニュアンスはありません。すべての要素を学習したので、コードを簡単に操作できます。 CSS はチェスに似ているように思えます。すべての駒がどのように動くかを知るだけでは十分ではなく、チェスをプレイできる必要もあります。

それで、それは何ですか、そしてそれは何で構成されていますか？ この想定される言語は、 2つの部分に分ける:

1. 要素が画面上でどのように見えるべきかをブラウザーに伝えるルール。
2. セレクターは、HTML コードのどの要素がこれらのルールを適用する必要があるかをブラウザーが理解できるようにするラベルです。

次に、スタイルで指定されたデザインが Web ページのソース コードにどのように接続されているかを見てみましょう。 主に3つの方法があります HTML で CSS を使用する:

1. 添付ファイル - CSS コードは、Style 属性を使用して目的の要素タグに直接書き込まれます。
2. 埋め込み - Web ドキュメントのすべてのスタイル コードは、Style 要素を使用してヘッダー (Head タグ内) に書き込まれます。
3. リンク - すべての CSS コードは別の外部ファイルに配置 (抽出) され、ヘッダーの Link 要素を使用してドキュメントに接続されます。

そうですね、私たちはスタイル マークアップ言語についてすでに多くのことを学んできたことがわかります。 今こそそれについて話す時です 構文。 一般に、それは非常に簡単です。

CSS コードの 1 つのルールは、プロパティ (この例では ) とその値 (この例では赤と #CCCCCC) の 2 つの要素で構成されます。 前提条件は プロパティとその値をコロンで区切る.

さらに遠く。 あるルールは必然的に別のルールから分離されます セミコロン。 最後のルールの後は、セミコロンを使用する必要はなくなりますが、過剰を避けるために、常にセミコロンを使用することをルールにすることをお勧めします。 これらは CSS コード内では意味を持たないため、独自の判断で設定できます。

スタイルを使用して CSS を HTML コードに接続する

さて、ここで、文書にスタイル ルールを適用する既存の方法と、上で一般的な用語で説明したすべての方法の例を見てみましょう。

最初のメソッドはメソッドと呼ばれます HTML への CSS 埋め込み Style 属性を使用して:

このメソッドを使用して段落の色と背景を設定する方法を見てみましょう。

ネスト方式とは何ですか

ご覧のとおり、簡単な 1 つの操作で、段落テキストを赤に色付けし (color:red)、同時にその下に灰色の背景を配置しました (background:#cccccc)。 スタイルとは、あらゆるタグと組み合わせて使用​​できる 6 つのタグを指します (スクリーンショットの下部にリストされています)。

Css では、ユニバーサルなものも積極的に使用していきます。これについては今後の記事で説明しますが、現時点では、Style を使用してスタイルの設計ルールを Html コードの特定の要素に接続する可能性を検討しています。 これにより、これらと同じルールのセットを (無制限に) 値として使用できるようになります。

Style 属性を使用したネスト方法は実際に実装するのが非常に簡単ですが、実際のレイアウトでは 非常にまれに使用される。 しかし、これを利用すると、非常に簡単に何かを試して実験することができ、その後でこれらすべてのルールを CSS スタイル シートを含む別のファイルに転送することができます。

スタイル マークアップ言語を接続する次の方法は、メソッドと呼ばれます。 CSSをHTMLに埋め込む。 この方法は、これまでに説明した投資方法とは根本的に異なります。

ページ上の各タグに、スタイル言語のルールを含む Style 属性を含める代わりに、この Web ドキュメントに必要なすべての CSS ルールを 1 つの単一の中に記述します。 タグスタイル、このドキュメントのヘッダー (Head 要素の間) に配置されます。

Head とは何か、そして Web ドキュメントの構造のどこに書かれているか覚えていますか? 覚えていない場合は、次のブロック図で調べてください。

それらの。 コードでは次のようになります。

... ...

よくわかりませんか? さて、今度はそれを図解してみます。

ブラウザがスタイル ルールをハイパーテキスト マークアップ言語と誤認しないようにするには、Style 要素で必須の属性を指定する必要があります。 値「text/css」を入力してください(カスケード スタイル シートのメディア コンテンツ ヘッダー)。 それ。 この要素に含まれるコードは、ブラウザによって CSS として解釈されます。

先ほどの例をさらに見てみましょう。 ご覧のとおり、スタイルのルールは 中括弧で囲まれた、そしてそれらの前には、ラテン文字「P」の形でいわゆるセレクターが書かれています。 なぜこのセレクターが必要なのでしょうか?

これらの CSS ルールを特定の Web ドキュメントの段落タグ (P セレクター) にのみ適用する必要があり、他には適用しないことをブラウザーに示すには、他にどのようにすればよいでしょうか。

ここで再び構文の問題に触れました。 インラインおよびネストメソッドを使用する場合、すべてのスタイルマークアップ言語ルールを中括弧で囲み、その前に次の文字を付ける必要があります。 必ず立ってくださいまたは複数のセレクター:

CSS セレクター (プロパティ: 値、プロパティ: 値)

ネスト方法を使用する場合、セレクターと中括弧は使用しませんでした。 これらの CSS ルールは、Style 属性が記述されているタグに正確に適用する必要があることは、ブラウザにとってはすでに明らかでした。

埋め込みまたはネストの方法を使用する場合、これらのスタイル ルールの宛先を決定する状況はより複雑になり、中括弧とセレクターの使用が必要になりました。 それ。 この CSS ルールのセット (中括弧で囲まれたもの) をすべての段落に適用し、このセットを他のものに適用する必要があることをブラウザーに示します。

最も単純なケースでは、タグの名前をセレクターとして使用できます。セレクター名の直後にある中かっこで囲んで、CSS 言語のルールを適用する必要があります。 この例では、段落タグ名「P」がセレクターとして使用されます。 スタイル マークアップ言語のセレクターについては、次の記事で詳しく説明します (上記のリンクを参照)。

CSS コードを Html ドキュメントに埋め込む方法についてまとめてみましょう。このドキュメントに必要なすべてのスタイル ルールは、先ほど説明した埋め込み方法を使用する場合のように、多くの異なる要素ではなく、単一の Style タグで記述されます。その上。

リンクを使用して CSS スタイル シートを別のファイルにエクスポートする

スタイル コードを Web ドキュメントに統合する最後の方法は、 接着方法。 この方法を説明する最も簡単な方法は次のとおりです。

上で説明した方法 (ネストと埋め込み) との主な違いは、リンク方法を使用する場合、CSS 言語のすべてのルールが適用されることです。 別の外部ファイルに転送されます。 これもテキスト (他の Html ドキュメントと同様) であり、通常は .css 拡張子が割り当てられるため、Windows を実行しているローカル コンピュータで開くために特別なプログラム () を割り当てることができます。

外部 CSS ファイルを使用する場合、特別な リンクタグこれは、Web ページのヘッダーの開始と終了の Head 要素の間に再度書き込まれます。 リンクはブラウザでは非表示として分類されます。

この場合、ブラウザは、指定されたスタイル シート ファイル (Link タグの Href 属性でその前にある) を見つけてロードし、その中で指定されている CSS 言語ルールを現在の Html ドキュメントの外部デザインに適用します。

一般に、リンクは前に説明した Style タグの使用とよく似ていますが、サイト ページの読み込みを大幅に高速化し、インターネット通信機器の負荷を軽減できます。

Style 要素 (埋め込みメソッド) を使用する場合、ブラウザは毎回、ドキュメントの HTML コードとともに、それに埋め込まれている CSS ルールとセレクターを読み込む必要があります。また、外部スタイル シート ファイルを使用する場合、ブラウザだけで読み込む必要があります。 Style.css を一度読み込んでから、サイトの他のページをデザインするときに独自のキャッシュ (ユーザーのコンピューターのハード ドライブ上の領域) から取得する必要があります。

Link タグの type=”text/css” 属性は、このメディア コンテンツが単なるスタイル マークアップ言語であることを意味します。 ただし、CSS ファイルと HTML ドキュメントをリンクするときにも使用されます。 スタイルシート値を持つ Rel 属性。 実際のところ、リンク (サービス ハイパーリンク) はまったく異なる目的に使用できます。

ブラウザでこのページのソース コードを見ると、Head 領域にさまざまなリンク タグが散在していることがわかります。

これらの各サービス ハイパーリンクの目的は、Rel 属性の値によって決まります。 たとえば、rel="shortcut icon" はファイルへのパスを示すために使用され、rel="alternate" はページの代替バージョンを示すために使用できます (HTML ドキュメントの代替表現の例は次のとおりです)。 。

さて、Linkでrel="stylesheet"属性を使用する場合、ブラウザを設定します スタイルシートファイルへのパス(Href 属性では、このパスは絶対形式または相対形式で指定できます)。 それらの。 Rel 属性を使用して、ファイルがどのように見えるか、Href (スタイルシート - CSS 付き) で指定されているパスへのパスをブラウザーに伝えます。

サイト上で ほとんどの場合、バインド方法が使用されます CSSとHTML（外部スタイルシートファイル）。 属性とスタイル タグは通常、テストのみに使用されますが、使用が正当な場合 (たとえば、 の設計時) には特定のタスクが存在する場合があります。 しかし、Web サイトでの実際の作業では、使用されるのは外部ファイルです。 バインド方法。

これをもちまして休暇をとり、近い将来に続きが続くことをお約束いたします。 もう一度繰り返しますが、CSS の学習は通常 HTML の学習よりもはるかに難しいため、できる限り詳細かつ明確に説明するよう努めます。

頑張って！ ブログサイトのページでお会いしましょう

興味があるかもしれません

リスト スタイル (タイプ、イメージ、位置) - HTML コード内のリストの外観をカスタマイズするための CSS ルール
CSS の表示 (ブロック、なし、インライン) - Web ページ上の Html 要素の表示タイプを設定します。
CSS の目的、カスケード スタイル シートを HTML ドキュメントに接続する方法、およびこの言語の基本構文
CSS の背景 (色、位置、画像、繰り返し、添付ファイル) - Html 要素の背景色または背景画像を設定するためのすべて
CSS の優先順位と重要度、セレクター、ユーザーおよび作成者のスタイルの組み合わせとグループ化による優先順位の増加
高さ、幅、オーバーフロー - ブロック レイアウトでコンテンツ領域を記述するための CSS ルール
CSS の寸法単位 (ピクセル、Em および Ex) と継承ルール CSS を使用した内部リンクと外部リンクの異なるスタイル
CSS の疑似クラスと疑似要素のセレクター (hover、first-child、first-line など)、HTML コードのタグ間の関係
CSS のフロートとクリア - ブロック レイアウト ツール