基礎から熟練まで 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 style=”properties”> /tag>

例:

< p style=” color: blue ; font-size: 10pt”>CSS インスタンス< /p>

コードの説明:

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

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

< head>

< スタイル シートの特定の内容>

< /style>

< /head>

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

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

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

< head>

< link rel=”stylesheet” href=”*.css” type=”text/css ” media="screen">

< /head>

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