ホームページ > ウェブフロントエンド > CSSチュートリアル > Lesson03_01 CSSとは何か、設定方法_基本編

Lesson03_01 CSSとは何か、設定方法_基本編

WBOY
リリース: 2016-05-16 12:08:42
オリジナル
1618 人が閲覧しました

講義 3 CSS

  • CSS とは
  • CSS を設定するいくつかの方法
  • スタイル ルール セレクター
  • コメントとスタイル ルールの有効範囲
  • スタイル属性の詳細な説明

CSS とは何か、CSS の設定方法



著者: Loncer その他の学習リソースは次のとおりです: wwww.loncer.cn

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 ドキュメントにリンクできます。
例: 」に下線を付けます TBODY>
まず、次のコードを使用して test.css ファイルを作成します:
P{
"FONT-SIZE:20px;COLOR:bule;FONT-FAMILY:宋体;BACKGROUND-COLOR:gray;TEXT-DECORATION: 「
}
スタイル シートを使用する別のファイルを作成し、両方を同じフォルダーに設定します。



type と media はオプションですが、rel と href は必須です。
外部スタイル シートを使用すると、Web ページ作成者は 1 つのファイルを変更するだけで Web 全体の外観を変更できます。ほとんどのブラウザは外部スタイル シート ファイルをバッファに保存するため、サイトの閲覧が高速になります。
  • インポートされたスタイル シート
CSS の @import を使用して、CSS ファイルを別の CSS ファイルにインポートできます。インポートされた CSS スタイル ルール定義ステートメントは、入力された CSS スタイル ルールの一部になります。定義ステートメント。 @inport を使用して CSS ファイルを タグ ペアにインポートすることもできます。入力した CSS スタイルルール定義文が、 タグペアの定義文となります。
例:
注: すべての @import パーツは前に配置する必要があります
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート