第 12 章 CSS_html/css_WEB-ITnose の使用開始

学習ポイント:

1. CSS の使用

2. カスケードと継承

講師: Li Yanhui

この章では主に HTML5 の CSS について説明します (カスケード スタイル シート) は、HTML ドキュメントの外観をタイプセットし、書式設定するために使用されます。

1.

CSSの使用 CSS スタイルは、セミコロンで区切られた 1 つ以上のスタイル宣言で構成されます。宣言された各スタイルには、CSS プロパティとプロパティ値が含まれています。

<p style="color:red;font-size:50px;">这是一段文本</p>

説明: style はインライン スタイル属性です。 color はカラー属性、red はカラー属性値、font-size はフォント サイズ属性、50px はフォント サイズ属性値です。

Ⅱ。 3 つの方法

CSS スタイル シートを作成するには、次の 3 つの方法があります: 1. 要素にスタイルを埋め込む; 2. ドキュメントにスタイルを埋め込む; 3. スタイルを外部からインポートする。

1.

要素埋め込みスタイル

<p style="color:red;font-size:50px;">这是一段文本</p>

説明: つまり、現在の要素の style 属性を使用する宣言方法です。

2.

Document inline style

<style type="text/css"> <br />p {　　color: blue; font-size: 40px;}</style><p>这是一段文本</p>

説明: 93f0f5c25f18dab9d176bd4f6de5d30e 要素の間に c9ccee2e6ea535a969eb3f532ad9fe89 要素を作成し、セレクターを通じて指定された要素を呼び出し、関連する CSS を設定します。

3.

外部参照スタイル

<link rel="stylesheet" type="text/css" href="style.css">

//style.css

@charset "utf-8";p {　　color: green;　　font-size: 30px;}

説明: 多くの場合、多数の HTML ページが同じグループの CSS を使用します。 。次に、これらの CSS スタイルを別の .css ファイルに保存し、2cdf5bf648cf2f33323966d7f58a7f3f 要素を通じて導入できます。 @charset "utf-8" は、CSS の文字エンコーディングの設定を示します。指定しない場合、デフォルトは utf-8 です。複数の .css ファイルがある場合は、@import インポート メソッドを使用して .css ファイルを導入できます。ただし、パフォーマンスは複数の リンクほど良くありません。

3つ。カスケードと継承

いわゆるスタイル シート カスケード: 同じ要素に対して異なる方法でスタイル シートを設定することによって生じるスタイルの重複を指します。スタイル シートの継承: 親要素のスタイルを取得するネストされた要素を指します。ブラウザ スタイルと呼ばれるスタイルもあります。これは、ブラウザの実行時にこの要素にデフォルトで付加されるスタイルです。

1.

ブラウザ スタイル

<b>这个元素隐含加粗样式</b><span style="font-weight:bold;">这个元素通过 style 加粗</span>

説明: a4b561c25d9afb9ac8dc4d70affff419 要素には暗黙的なスタイルがあり、45a2772a6b6107b401db3c9b82c049c2 要素によって設定されます。 style 属性のスタイル。

2.

スタイルシートのカスケード

スタイルシートのカスケードは5つの方法で実行されます。スタイルが同じ場合、競合置換が発生します。このとき、その優先順位がより重要になります。次の優先順位は低から高です: (1)。外部から導入されたスタイル (2cdf5bf648cf2f33323966d7f58a7f3f を使用して導入されたスタイル)。 .Document 埋め込みスタイル (c9ccee2e6ea535a969eb3f532ad9fe89 要素を使用して設定); 要素の埋め込みスタイル (style 属性を使用して設定)。

//埋め込まれた要素

<p style="color:red;font-size:30px;">我将被三种方式叠加样式</p>

//埋め込まれたドキュメント

<style type="text/css"><br />p {　　color:blue; font-weight: bold;}</style>

//外部紹介

@charset "utf-8";p {　　color: green;　　font-style: italic;}

特定のスタイルがより優先度の高いスタイルに置き換えられた場合忘れてしまったが、このスタイル プランを実装したい場合は、このプランを重要としてマークできます。

//最高の優先順位を強制的に設定します

color: green !important;

3.

スタイルの継承

要素が親要素に関連するスタイルを設定しない場合、継承メカニズムが使用されます親要素を継承するスタイルが統合されます。

//a4b561c25d9afb9ac8dc4d70affff419 要素は e388a4556c0f65e1904146cc1a846bee 要素のスタイルを継承します

<p style="color:red;">这是<b>HTML5</b></p>

スタイルの継承は要素の外観 (テキスト、色、フォントなど) にのみ適用されます。ページ上の要素は継承されます。このスタイルを継承する場合は、強制継承 (inherit) を使用する必要があります。

// レイアウト スタイルの強制継承

<p>这是<b>HTML5</b></p><style type="text/css"><br />p {　　border: 1px solid red;}b {　　border : inherit;}</style>