ホームページ  >  記事  >  ウェブフロントエンド  >  CSS(カスケード スタイル シート)とは何ですか?

CSS(カスケード スタイル シート)とは何ですか?

青灯夜游
青灯夜游オリジナル
2019-05-17 09:26:035961ブラウズ

CSS は、Cascading Style Sheets (Cascading Style Sheets) の略称で、HTML (Standard Generalized Markup Language のアプリケーション) や XML (Standard Generalized Markup Language のサブセット) などのファイル スタイルを表現するために使用されるコンピュータ言語です。 . .

CSS は、主に Web サイトの外観を設定して、Web サイトをより豪華で目を引くものにするために使用されます。Web ページを静的に変更するだけでなく、動的に調整することもできます。さまざまなスクリプト言語を使用して、Web ページのさまざまな要素をフォーマットします。

CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。

CSS スタイル シートはテキストやその他の HTML マークアップの色、サイズ、位置を定義し、HTML ファイルはコンテンツとその構成方法を定義します。それらを分離すると、サイト全体を書き直さなくても配色を変更できます。

カスケードとは、親要素に適用されたスタイルが、親要素内のすべての子要素にも適用されることを意味します。たとえば、本文の色を設定すると、本文内のすべての見出しと段落も同じ色になります。

#スタイルの指定と使用

Web ページまたはサイト スタイル シートを含めるには、主に 3 つの方法があります。

1. インライン スタイルと呼ばれるタグの

属性を設定します。

2. HTML ヘッダー タグで c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用します。スタイル;

3. 外部スタイル シートと呼ばれる外部 CSS ファイルを作成し、リンクします。

基本スタイル シートは通常、6c04bd5ca3fcae76e30b72ad730ca86d や e388a4556c0f65e1904146cc1a846bee などの HTML タグの外観を変更します。ヘッダー ファイルで CSS ファイルまたはスタイルシートを使用する場合、スタイル クラスを定義し、

class="?" 属性を使用して任意の要素に適用することもできますが、これはこの簡単なガイドの範囲を超えています。

インライン スタイル

機能:

1) インライン スタイルは、コード内の HTML 要素に配置されます。

2) インライン スタイルを使用する場合、スタイルは選択した要素にのみ影響します。

3)、インライン スタイルにはセレクターはありません

注: HTML で定義されたインライン スタイルは、追加先のタグにのみ適用されます。


<p style="color:red;">Some red text</p>

埋め込みスタイル

機能:

1)、スタイル タグ 3f51f13721138706cdf3257c068f4173 531ac245ce3e4fe3d50054a55f265927 は Web ページの head セクションに記述されます。

2)、記述されたスタイルは、それを使用する Web ページでのみ使用されます。

3)、埋め込みスタイルは「内部スタイル」とも呼ばれます。

ヘッダーで定義されたスタイルは、ページ全体に適用されます。以下の例では、ページ内のすべての h1 タグにタイトルが赤色で表示されます。


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

外部スタイル シート

HTML ファイルと同様、CSS ファイルはプレーン テキストであり、通常は .css ファイル拡張子が付いており、特定のタグを介して渡すことができます。 HTML ファイルにリンクします。

機能:

1)、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されます

2)、これを変更すると、

# と呼び出すすべてのページに影響を与える可能性があります。 ##3)、変更が簡単です

たとえば、style.css ファイルの内容は次のようになります。

body { background-color: beige; color: #000080;}
h1 { color: red;}

その後、be98b57125ed9b2d8fbe917c785e8d94 を使用できます。ヘッダーが導入されて有効になります。

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

今日のほとんどの Web サイトでは外部スタイル シートが使用されています。外部スタイルとは、別のドキュメントに記述され、さまざまな Web ドキュメントに添付されるスタイルです。外部スタイル シートは、接続されているすべてのファイルに影響します。つまり、20 ページの Web サイトがあり、すべてのページが同じスタイル シートを使用している場合、変更が必要な場合は、スタイル シートを編集するだけでそれらのページを完成させることができます。サイト管理がより簡単になります。外部スタイル シートの欠点は、ページがこれらの外部ファイルを取得して読み込む必要があることです。すべてのページが CSS テーブル内のすべてのスタイルを使用するわけではないため、多くのページでは実際に必要なサイズよりもはるかに大きな CSS ページが読み込まれます。

以上がCSS(カスケード スタイル シート)とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。