ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS の基本構文を導入する 3 つの方法

CSS の基本構文を導入する 3 つの方法

php中世界最好的语言オリジナル: 2018-02-28 10:16:501685ブラウズ

今回は、CSSの基本構文3種類のCSSの導入方法と、3種類のCSSの基本構文を導入する際の注意点について、実践事例を交えてご紹介します。

CSS は、Web インターフェイスのレイアウトの問題を解決する、Web デザインの画期的な手段と言えます。 HTML タグは主に Web ページのコンテンツ (コンテンツ) を定義し、CSS は Web ページのコンテンツをどのように表示するか (レイアウト) を決定すると言えます。

Web の初期の頃、HTML は非常に限定された言語であり、見た目は気にされませんでした。それは単なる簡潔なマークアップメカニズムでした。

Mosaic Web ブラウザの出現により、どこにでも Web サイトが出現し始めました。ページの外観を変更する必要性が高まったため、240cb830ca84ebaabbd07850110b414d や 3d49bde0e0b2e042578ad34140b6c48e などのマークアップ要素が追加されました。

数年後、ほとんどの Web サイトのマークアップは、ほぼ完全に表とフォント要素で構成されており、表現されるコンテンツに実際の意味を伝えることができず、ドキュメントの使いやすさが低下し、保守が困難になりました。

そこで、1995 年に、W3C は、構造とスタイルが混在する問題を解決するために CSS ドラフトをリリースしました。

1996 年に、W3C は CSS1 を正式に開始しました。

1998 年に CSS2 が発表されました。

2001 年の CSS3 以降、CSS 言語は複数の独立したモジュールに分割され、各モジュールは独立してグレード付けされ、機能のごく一部のみが含まれています。

2011年よりCSS4の設計を開始

1. CSSスタイルシートの導入

1. 埋め込みスタイルシート

インラインスタイルシートはTag(タグ)で記述します。インラインスタイルは、それが配置されているタグに対してのみ有効です。 (複数のスタイルがある場合、インラインは他のスタイルをオーバーライドして有効になります。)

例:

<p style="font-size:20pt; color:red"></p>

このスタイル定義e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3中のテキストは 20pt フォントで、フォントの色は赤です。

2. 内部スタイルシート

内部スタイルシートはHTMLの93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1に記述されます。内部スタイルシートは、それが配置されている Web ページでのみ有効です。

内部スタイルシートは次のように記述される style タグを使用する必要があります:

<style  type="text/css">
     div{
           color : red;
         }</style>

3. 外部スタイルシート

多くの Web ページが同じスタイル (スタイル) を使用する必要がある場合は、外部スタイルシートを使用します。外部スタイルシートは、CSS ファイルにスタイルを記述し、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用してそのスタイルをページに導入し、スタイルを適用する必要がある各ページにそのファイルを導入する必要があります。

例:

<HTML><HEAD>
   <link href="../css/a.css " rel ="stylesheet" type="text/css "></HEAD><BODY>…</BODY>
 </HTML>

1. 2cdf5bf648cf2f33323966d7f58a7f3f タグの位置は、通常、93f0f5c25f18dab9d176bd4f6de5d30e タグ内に記述されます。

2. CSSスタイルファイルの名前は、main.cssのように意味のある英字で付けます。

3. href=""はcssを導入するパスです

4. rel="stylesheet" type="text/css"は変更できない固定の記述方法です。

の優先順位を覚えておいてください: インライン > 埋め込み > 外部

にも CSS の

comment ステートメントがあります。それを示すには、/*コメントステートメント*/ を使用します (

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。