基礎から熟練まで CSS実践講座（1）

CSS (Cascading Stylesheets) は、Web ページを作成するための新しいテクノロジーであり、現在ほとんどのブラウザーでサポートされており、Web デザインに不可欠なツールの 1 つになっています。 CSS を使用すると、Web ページのフォーマット コードが簡素化され、ダウンロードと表示速度が向上し、アップロードする必要があるコードの量が削減され、繰り返し作業の負荷が大幅に軽減されます。特に何百もの Web ページがあるサイトに直面している場合、CSS は私たちへの神からの贈り物のようなものです。 ^_^

はじめに

CSS (Cascading Stylesheets) は、Web ページを作成するための新しいテクノロジーであり、現在ではほとんどのブラウザーでサポートされており、Web デザインに不可欠なツールの 1 つとなっています。

W3C (The World Wide Web Consortium) は、動的 HTML を 3 つの部分に分割して実装します: スクリプト言語 (JavaScript、Vbscript などを含む)、動的効果をサポートするブラウザー (Internet Explorer、Netscape Navigator などを含む)、および CSS スタイルシート。

1.カスケード スタイル シートの特徴

これまでの Web ページにはダイナミクスが欠けていたことは言うまでもなく、Web コンテンツのレイアウトには多くの困難があり、専門家や特に忍耐強い人でなければ、作成するのは困難です。あなたのアイデアと創造性に従ってWebページに情報を表示します。 HTML 言語の本質を習得した人でも、この情報のレイアウトを習得するまでに多くのテストに合格する必要があります。そのプロセスは非常に長くて苦痛です。インターネットが発展し、より多くの人がこのカラフルな世界にできるだけ早く足を踏み入れられるようにするために、新しい HTML 補助ツールがリリースされようとしています。

スタイル シートは、この要求のもとに誕生しました。最初に行う必要があるのは、Web ページ上に要素を正確に配置し、Web デザイナーがディレクターのようにテキストと画像で構成されるアクターを簡単に制御できるようにすることです。ウェブサイトのステージ上のスクリプトに。

次に、Web ページ上のコンテンツ構造と形式制御を分離します。閲覧者が見たいのは Web ページ上のコンテンツ構造であり、閲覧者がこの情報をよりよく確認できるようにするには、形式制御を使用する必要があります。以前は、Web ページ上で 2 つが交互に配置されていたため、表示や変更が非常に不便でした。現在では、2 つを分離することで、Web デザイナーが非常に容易になります。コンテンツ構造とフォーマット制御が分離されているため、Web ページはコンテンツのみで構成され、すべての Web ページのフォーマット制御は特定の CSS スタイル シート ファイルに向けられます。これは 2 つの側面で利点があります:

まず、Web ページのフォーマット コードが簡素化され、外部スタイル シートもブラウザによってキャッシュに保存されるため、ダウンロードと表示の速度が向上し、コードの数をアップロードします (繰り返したフォーマットは 1 回しか保存されないため)。

2 番目に、Web サイトの形式を保存する CSS スタイル シート ファイルを変更するだけで、サイト全体のスタイルと特性を変更できます。これは、ページ数の多いサイトを変更する場合に特に便利です。 Web ページを 1 つずつ変更する必要がなくなり、何百もの Web ページがあるサイトに直面している場合、CSS はまさに神からの贈り物のようなものです。 ^_^

Ⅱ。カスケード スタイル シートを追加する方法

Web ページにスタイル シートを追加する方法は 4 つあります。

1.最も簡単な方法は、HTML 識別子 (タグ) に直接追加することです:

/tag>

例:

CSS インスタンス

コードの説明:

フォントサイズ 10pt の「CSS インスタンス」を青色で表示します。この方法は使い方が簡単で直感的に表示できますが、このような追加では「コンテンツ構造とフォーマット制御が別々に保存される」というスタイルシートの利点を十分に活用できないため、一般的には使用されていません。

2． HTML ヘッダー情報識別子に追加されました :

type="text/css" は、CSS をサポートしていないブラウザが CSS コードをフィルタリングして直接回避するのに役立つ MIME タイプを使用することを示します。ブラウザの前に表示する ソースコードに設定したスタイルシートを表示します。ただし、上記の状況が起こらないようにするには、コメント識別子「」をスタイル シートに追加する必要があります。

3.リンク スタイル シート

も HTML ヘッダー情報識別子 :

*.css は個別に保存されたスタイル シート ファイルであり、

Media は、スタイル シートを使用する Web ページが出力にどのメディアを使用するかを示すオプションの属性です。値の範囲:

・Screen (デフォルト): コンピューター画面に出力

・Print: プリンターに出力

・TV: テレビセットに出力

・Projection: プロジェクターに出力

・Aural: スピーカーに出力

・点字: エンボス触覚センシングデバイスに出力

・Tty: テレタイプライターに出力

・All: 上記すべてのデバイスに出力

複数のメディアに出力する場合は、カンマを使用して値リストを区切ることができます。

Rel 属性は、スタイル シートが HTML ドキュメントとどのように結合されるかを示します。値の範囲:

・スタイルシート: 外部スタイルシートを指定します

・代替スタイルシート: インタラクティブスタイルシートの使用を指定します

4.スタイルシートの併用

は HTML ヘッダー情報識別子にも追加されます:

@import "*.css"

他のスタイルシートの宣言

-->

[email protected]�� メソッドは非常に似ていますが、スタイル テーブル入力方法にはさらに多くの利点があります。結合されたメソッドは外部スタイル シートにリンクすると同時に、Web ページの特定の条件に基づいて他の Web ページでは必要のないスタイル ルールを作成できるためです。

次の点に注意してください:

· 結合メソッド入力スタイルシートは @import で始まる必要があります。

· 複数のスタイルシートを同時に入力するときに競合が発生した場合、Web ページは最初に入力されたスタイルシートに従って組版されます。

・入力スタイルシートがWebページのスタイルルールと矛盾する場合は、外部スタイルシートを使用してください。

3つ。カスケード スタイル シートの形式

一般的に、スタイル シートの宣言はセレクターとブロックに分かれており、ブロックにはプロパティとそのプロパティの値が含まれます。 基本的な形式は次のとおりです。

セレクター {属性: 値}

その他の形式 1:

セレクター 1、セレクター 2、セレクター 3 {属性 1: 値 1; 属性 2: 値 2; 属性 3: 値 3}

はい 場合によっては、複数のセレクターが同じ設定を使用します。コードを使用すると、すべてのスタイルを一度に設定し、複数のセレクターの間に「,」を追加してそれらを区切ることができます。

属性が複数ある場合は「;」で区切る必要があります。

その他の形式 2:

セレクター 2 {属性 1: 値 1; 属性 2: 値 2; 属性 3: 値 3}

は、セレクター間の追加が少ないことを除いて、形式 1 と非常によく似ています。 」とありますが、効果は全く異なります。セレクター 2 に含まれるコンテンツがセレクター 1 にも含まれる場合にのみ、設定されたスタイル ルールが有効になることを示します。

4つ。カスケードスタイルシートの分類

Webページの形式が単調になりすぎないようにするには、同じセレクターを分類し、カテゴリごとに異なるスタイル設計を行う必要があります。基本的な形式は次のとおりです:

selector.category name {attribute: value}

カテゴリ名は HTML 識別子で引用されます:

Web ページのコンテンツ

5.カスケード スタイル シートの疑似クラス

上記の分類方法に加えて、分類の使用をより柔軟かつ多様にするために、疑似クラスの概念が生まれました。クラスと疑似クラスの違いは何ですか?

一般に、セレクターは複数のクラスとバンドルして設定できますが、同じセレクターに対して複数の異なるスタイルを作成できますが、バンドルされたフォームでは、使用されるセレクターの設定クラスも制限されます。この問題を解決するために、疑似クラスが作成されました。事前に宣言された各疑似クラスは、一部のブロック レベルのコンテンツ設定を除いて、すべての HTML 識別子によって参照できます。基本的な形式は次のとおりです。

.疑似クラス名 {属性: 値}

疑似クラスは、HTML 内で任意の識別子によって参照できます。

Webページコンテンツ

6.フォント スタイルの制御

フォント スタイルの制御には、フォント タイプ、フォント サイズ、フォント スタイル、フォントの太さの制御という 4 つの部分が含まれます。

1.フォントの種類

WORD などのワープロソフトを使用する場合、フォントの表示を調整する必要があることがよくあります。たとえば、「Arial」、「Impact」、「Verdana」などのフォントが作者によってよく使用されます。

基本的な形式は次のとおりです:

font-family: フォント名

font-familyの後に複数のフォント名を追加すると、ブラウザはユーザーのコンピュータにインストールされているフォントを順番に1つずつ検索します。必要なフォントと一致するフォントが見つかると、Web ページのコンテンツがそのフォントで表示され、一致しない場合は、すべてのフォントが見つかるまで検索が続行されます。スタイル テーブルがインストールされていない場合、ブラウザはデフォルトのフォントを使用して Web ページのコンテンツを置き換えます。

注:

・複数のフォントを指定する場合は、各フォント名を「,」で区切ってください。

· フォント名に 3 つ以上の単語が含まれる場合は、フォント名を「」で囲みます。

・スタイルルール外にすでに「」がある場合は、「」の代わりに「」を使用してください。

2.フォントサイズ

の基本的な形式は次のとおりです:

font-size: フォントサイズパラメータ

フォントサイズの値の範囲:

・インポイント: ポイント単位はすべてのブラウザとオペレーティングプラットフォームに適用されます

・Em In 単位: 文字要素のサイズを指し、Point と同じ距離です

· ピクセル: ピクセルはすべてのオペレーティング プラットフォームで使用できますが、視聴者の画面解像度が異なるため、表示効果が異なる場合があります

· インチ (インチ)

· cm (センチメートル)

· mm (ミリメートル)

· PC (プリンターのフォント サイズ)

· ex (x-高さ) 単位

·小さい方:現在のテキストのデフォルトのサイズより 1 サイズ小さい

・larger: 現在のテキストのデフォルトのサイズより大きい

・比例関係を使用します

・xx-small

・x-small

・small

・medium

・large

・x-large

・xx-large

3.フォント スタイル

フォント スタイルは、さまざまな斜体文字の表示のみを制御できます。

基本的な形式は次のとおりです:

font-style: 斜体フォントの名前

4.フォントの太さ

フォントの太さは、太字フォントの表示を制御します。値の範囲は 100 ～ 900 です。ブラウザのデフォルトのフォントの太さは 400 です。さらに、パラメータをより明るく太くすることで、元のフォントに基づいてフォントを細くまたは太く見せることができます。

基本的な形式は次のとおりです:

font-weight: フォントの太さ

上記は「基礎から極める CSS 実践講座 (1)」の内容です。 PHP 中国語 Web サイト (www.php.cn )!