ホームページ > 記事 > ウェブフロントエンド > cssってどういう意味ですか?
#この記事の動作環境: Windows7 システム、css3 バージョン、Dell G3 コンピューター。 カスケード スタイル シート (英語の正式名: Cascading Style Sheets) は、HTML (標準汎用マークアップ言語のアプリケーション) や XML (標準汎用マークアップ言語のサブセット) などのドキュメント スタイルを表現するために使用されるコンピューターです。言語。 CSS は Web ページを静的に変更できるだけでなく、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットすることもできます。 CSS は、Web ページ内の要素の位置のレイアウトをピクセルレベルで正確に制御でき、ほぼすべてのフォント サイズ スタイルをサポートし、Web ページのオブジェクトとモデル スタイルを編集する機能を備えています。css は Cascading Style Sheets の略で、英語の正式名は「Cascading Style Sheets」です。HTML や XML などのファイル スタイルを表現するために使用されるコンピュータ言語です。CSS は Web ページを静的に変更するだけでなく、また、さまざまなスクリプト言語と連携して、Web ページのさまざまな要素を動的にフォーマットします。
言語機能
CSS は、HTML マークアップ言語のスタイルの説明を提供し、要素の表示方法を定義します。 CSS は Web デザインの分野における画期的な技術です。これを使用して小さなスタイルを変更し、それに関連するすべてのページ要素を更新できます。 一般に、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 サイトの他の関連記事を参照してください。