講義 3 CSS
- CSS とは
- CSS を設定するいくつかの方法
- スタイル ルール セレクター
- コメントとスタイル ルールの有効範囲
- スタイル属性の詳細な説明
CSS とは何か、CSS の設定方法
CSS とは
CSS とは、英語の Cascading Style Sheets、中国語では「カスケード スタイル シート」の略で、Web ページ要素の表示位置や形式を簡単に設定できるほか、フィルタ、画像フェード、Web ページのフェードインおよびフェードアウトのグラデーション効果。つまり、CSS は、Web ページの表示効果に関して Word と同じ組版制御を実現するものです。
たとえば、次のコード:
つまり、CSS スタイルが設定されています
上記からわかるように、HTML 要素の style 属性では複数のスタイルを指定できます。各スタイルの名前と設定値はコロンで区切られ、各スタイルはセミコロンで区切られます。 . さまざまな「スタイル名」を「CSS属性」、スタイルの「設定値」を「CSS属性値」といいます。このようにWebページ要素の表示効果を設定する方法がCSSです。
CSSの設定方法
- インライン スタイル シート(インライン スタイル シート)
HTML の四角形タグの style 属性を直接設定する方法をインライン スタイル シートと呼びます。
例:
インライン スタイル シートを使用する場合、HTML4.01 標準では、ユーザーが次のように Web ページの タグの間に
タグを追加することを推奨しています。
:
この方法の使用には 2 つの欠点があります。1.同じスタイルを設定する すべての段落に対して、
タグごとに設定を繰り返します。
2. Webページは複数のメディアやメディアに出力できますが、インラインスタイルシートで設定したスタイルはすべてのメディアに出力したときに有効となり、メディアごとに異なるスタイルシートを指定することはできません。
- 埋め込みスタイル シート (埋め込みスタイル シート)
media は、このスタイルが表示されるメディアを指定します
CSS をサポートしていないブラウザ用に作成されています
の間にスタイル ルール定義ステートメントを配置します。ファイルは外部スタイル シート ファイルで、拡張子は .css です。外部スタイル シート ファイルは、HTTP
タグを介して HTML ドキュメントにリンクできます。
例:
まず、次のコードを使用して test.css ファイルを作成します: P{ "FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION: 「 }
|
」に下線を付けます
スタイル シートを使用する別のファイルを作成し、両方を同じフォルダーに設定します。
type と media はオプションですが、rel と href は必須です。 |
TBODY>
外部スタイル シートを使用すると、Web ページ作成者は 1 つのファイルを変更するだけで Web 全体の外観を変更できます。ほとんどのブラウザは外部スタイル シート ファイルをバッファに保存するため、サイトの閲覧が高速になります。
CSS の @import を使用して、CSS ファイルを別の CSS ファイルにインポートできます。インポートされた CSS スタイル ルール定義ステートメントは、入力された CSS スタイル ルールの一部になります。定義ステートメント。 @inport を使用して CSS ファイルを タグ ペアにインポートすることもできます。入力した CSS スタイルルール定義文が、 タグペアの定義文となります。
例:
注: すべての @import パーツは前に配置する必要があります |