ホームページ  >  記事  >  ウェブフロントエンド  >  cssってどういう意味ですか?

cssってどういう意味ですか?

藏色散人
藏色散人オリジナル
2021-04-27 15:22:0812922ブラウズ

css は Cascading Style Sheets の略で、英語の正式名は「Cascading Style Sheets」です。HTML や XML などのファイル スタイルを表現するために使用されるコンピュータ言語です。CSS は Web ページを静的に変更するだけでなく、また、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットします。

cssってどういう意味ですか?

#この記事の動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。

カスケード スタイル シート (英語の正式名: Cascading Style Sheets) は、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのドキュメント スタイルを表現するために使用されるコンピューターです。言語。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。

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

言語機能

CSS は、HTML マークアップ言語のスタイルの説明を提供し、要素の表示方法を定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。

一般に、CSS には次の特徴があります。

  • 豊富なスタイル定義

CSS は豊富なドキュメント スタイルを提供します。テキストと背景のプロパティを設定する機能。任意の要素の境界線、要素の境界線と他の要素の間の距離、要素の境界線と要素のコンテンツの間の距離を作成でき、要素の境界線と要素のコンテンツの間の距離を自由に変更できます。大文字、装飾、その他のページ効果。

  • 使いやすく、変更も簡単

CSS は、HTML 要素の style 属性または HTML ドキュメント内でスタイルを定義できます。ヘッダー部分では、スタイルは、HTML ページで参照するために特別な CSS ファイルで宣言することもできます。つまり、CSS スタイル シートは、すべてのスタイル宣言を統一的に保存および管理できます。

さらに、同じスタイルの要素を同じスタイルを使用して分類および定義したり、同じ名前を持つすべての HTML タグに特定のスタイルを適用したり、特定の要素に CSS スタイルを割り当てることもできます。ページ要素内。スタイルを変更したい場合は、スタイル リストから対応するスタイル ステートメントを見つけて変更するだけです。

  • マルチページ アプリケーション

CSS スタイル シートは別の CSS ファイルに保存できるため、同じ CSS スタイルを使用できます。シート。理論的には、CSS スタイル シートはどのページ ファイルにも属さず、どのページ ファイルからも参照できます。このようにして、複数のページのスタイルを統一することができます。

  • カスケード

簡単に言えば、カスケードとは、要素に同じスタイルを複数回設定することであり、最後に設定された属性値が使用されます。 。たとえば、サイト内の複数のページに同じ CSS スタイル シートのセットを使用し、一部のページの一部の要素に他のスタイルを使用したい場合は、これらのスタイルに対して別のスタイル シートを定義して、それらをページ。後で定義されたこれらのスタイルは以前のスタイル設定をオーバーライドし、ブラウザに表示されるのは最後に設定されたスタイル効果になります。

  • ページ圧縮

HTML を使用してページ効果を定義する Web サイトでは、多くの場合、多数のテーブルや繰り返しのテーブルやフォント要素を形成する必要があります。その結果、大量の HTML タグが生成され、ページ ファイルのサイズが大きくなります。スタイル宣言を CSS スタイル シートに個別に配置すると、ページのサイズが大幅に削減されるため、ページの読み込み時間も大幅に短縮されます。さらに、CSS スタイル シートを再利用することでページのサイズが大幅に縮小され、ダウンロード時間が短縮されます。

[推奨学習:

css ビデオ チュートリアル ]

言語の基本

属性と属性値

属性

属性の名前は法的な識別子であり、CSS 構文のキーワードです。属性は書式設定の側面を指定します。例: color はテキストのカラー属性で、text-indent は段落のインデントを指定します。

属性の使用法をマスターするには、6 つの側面を理解する必要があります。具体的な説明は次のとおりです。

①この属性の正当な値 (正当な値)。明らかに、段落インデント属性 text-indent には、長さを示す値と背景パターンを示す値のみを割り当てることができます。 image 属性は、画像の場所のリンクを示す値、または背景パターンがないことを示すキーワード none を取る必要があります。

②この属性のデフォルト値(初期値)。この属性がスタイル シートで指定されておらず、属性が親要素から継承できない場合、ブラウザは属性がデフォルト値を取るものとみなします。

③この属性が適用される要素 (Applies to)。一部の属性は、特定の個々の要素にのみ適用されます。たとえば、空白属性はブロック レベルの要素にのみ適用されます。ホワイトスペース属性は、normal、pre、nowrap の 3 つの値を取ることができます。通常に設定すると、ブラウザは連続する空白文字を無視し、1 つの空白文字のみを表示します。 pre を取得すると、連続した空白文字が保持されます。 nowrap を使用する場合、連続する空白文字は無視され、行の折り返しは自動的に実行されません。

④この属性の値が次のレベルに継承されるかどうか。

⑤属性がパーセンテージ値を取ることができる場合、パーセンテージ値はどのように解釈されますか?つまり、パーセンテージ値に対する基準は何ですか。たとえば、margin 属性はパーセンテージ値を取ることができます。これは、マージンが格納されている要素に対するコンテナの幅です。

⑥この属性が属するメディア タイプ グループ (メディア グループ)。

属性値

①整数と実数

これは通常の意味での整数と実数とあまり変わりません。 CSS では浮動小数点のみを使用でき、他のプログラミング言語のように科学表記法を使用して実数を表現することはできません。つまり、1.2E3 は CSS では不正になります。正しい例をいくつか示します。整数: 128、-313、実数: 12.20、1415、-12.03。

②長さの数量

長さの数量は、整数または実数と対応する長さの単位で構成されます。長さの量は要素の位置決めによく使用されます。位置決めには絶対位置決めと相対位置決めがあるため、長さ単位も相対長さ単位と絶対長さ単位に分かれます。

相対的な長さの単位は次のとおりです: em - 現在のフォントの高さ (font.size 属性の値); ex - 現在のフォントの小文字 x の高さ; Dx - 長さ1 ピクセルの実際の長さはモニターの設定によって決まります。

もう 1 つの注目すべき点は、子要素は親要素の相対的な長さの値を継承せず、実際の計算値のみを継承することです。

③パーセンテージ

パーセンテージは、数値にパーセント記号を加えたものです。明らかに、パーセンテージは常に相対的なものであるため、相対的な長さと同様に、パーセンテージは子要素に継承されません。 [10]

セレクター

タイプセレクター

CSS のセレクターは、要素のタイプの名前です。このセレクター (タイプ セレクターと呼ばれる) を使用すると、この要素タイプのすべてのインスタンスに宣言を適用できます。たとえば、次の単純なルールのセレクターは H1 であるため、ルールはドキュメント内のすべての H1 要素に適用されます:

H1 {color:red}

単純な属性セレクター

CLASS 属性

CLASS 属性を使用すると、CLASS 属性に同じ値を持つ要素のグループに宣言を適用できます。 BODY 内のすべての要素には CLASS 属性があります。基本的に、CLASS 属性を使用して要素を分類し、スタイル シート内に CLASS 属性の値を参照するルールを作成すると、ブラウザによってそれらの属性がその要素のグループに自動的に適用されます。

クラス セレクターは識別子 (ピリオド) で始まり、その後にどのタイプのセレクターが続くかを示すために使用されます。クラスセレクターでは、ピリオドが多くのプログラミング言語で「クラス」という用語に関連付けられているため、ピリオドが選択されました。識別子を英語に翻訳すると、「クラス名を持つ要素」を意味します。

ID 属性

ID 属性の操作は CLASS 属性と似ていますが、重要な違いが 1 つあります。ID 属性の値はドキュメント全体で一意である必要があります。これにより、ID 属性を使用して個々の要素のスタイル ルールを設定できるようになります。 ID 属性を含むセレクターを ID セレクターと呼びます。

ID セレクターの識別子はハッシュ記号 (#) であることに注意してください。識別子は、次に来るのが ID 値であることをブラウザーに知らせるために使用されます。

STYLE 属性

CLASS および ID 属性値はセレクターで使用できますが、STYLE 属性は実際にはセレクター メカニズム全体を置き換えることができます。 STYLE 属性の値は、セレクター内で参照できる値 (ID と CLASS が持つ値) を単に持つのではなく、実際には 1 つ以上の CSS 宣言です。

通常、CSS を使用すると、デザイナーはすべてのスタイル ルールをスタイル シートに配置します。このスタイル シートは、ドキュメントの上部にある STYLE 要素内に配置されます (または外部にリンクされています)。ただし、STYLE 属性を使用すると、スタイル シートをバイパスして、宣言をドキュメントの開始タグに直接配置できます。

セレクター タイプの組み合わせ

タイプ セレクター、ID セレクター、およびクラス セレクターをさまざまなセレクター タイプに組み合わせて、より複雑なセレクターを形成できます。セレクターを組み合わせることで、特定の表現を与えたい要素をより正確に指定できます。たとえば、型セレクターとクラス セレクターを組み合わせるには、要素が 2 つの要件を満たす必要があります。それは、スタイル ルールが要素に作用できるように、要素が正しい型と正しいクラスであることです。

外部情報: 疑似クラスと疑似要素

CSS1 では、スタイルは通常、HTML ソース コードに現れるタグと属性に基づいていました。このアプローチは多くの設計状況にはまったく問題ありませんが、設計者が達成したいいくつかの一般的な設計効果を達成できません。

疑似クラスと疑似要素を設計すると、これらの効果の一部を実現できます。これら 2 つのメカニズムにより、CSS の表現力が拡張されます。 CSS1 では、リンクがアクセスされたかどうか、いつアクセスされたか、ユーザーがドキュメントをどのように操作したかなどの状況に基づいて、ドキュメント内のリンクのスタイルを変更するために疑似クラスが使用されていました。疑似要素を使用すると、要素の最初の文字と最初の行のスタイルを変更したり、ソース文書に表示されない要素を追加したりできます。

疑似クラスも疑似要素も HTML には存在しません。つまり、HTML コードには表示されません。どちらのメカニズムも、CSS の将来のバージョンでさらに拡張できるように、つまり、より多くの効果を実現できるように、慎重に設計されています。

以上がcssってどういう意味ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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