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

Apr 27, 2021 pm 03:22 PM
css

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

ブートストラップボタンの使用方法 ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップのサイズを変更する方法 ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップにスプリットラインを書く方法 ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップの日付を表示する方法 ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップの日付を確認する方法 ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール(日付形式、エラーメッセージなどなど)を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。

ブートストラップナビゲーションバーの設定方法 ブートストラップナビゲーションバーの設定方法 Apr 07, 2025 pm 01:51 PM

ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加(オプション)調整スタイル(オプション)

See all articles