Chapter 6 Advanced CSS Applications and Techniques
6.1 id と class
6.1.1 id とは
id は XHTML 要素の属性であり、オブジェクト名を識別するために使用されます。 class と id はどちらも XHTML でサポートされるパブリック属性であり、そのコア属性でもあります。クラスの主な機能はオブジェクトのスタイルを設定することであり、id はスタイルを定義するだけでなく、サービス Web サイトのインタラクティブな動作のための特別な識別子にもなります。 ID 名が定義されたオブジェクトごとに、その ID 名は各ページに 1 回だけ表示されます。
6.1.2 id の使い方
JavaScript スクリプトは考慮されず、XHTML コードと CSS スタイルのアプリケーションが使用される場合、要素を識別するために id 属性を選択的に使用する必要があります。具体的な使用方法は次の規則に従う必要があります。 。
6.1.3 クラスとは
クラスとは直訳するとクラスと型です。クラスは、id に関連するもう 1 つの属性です。 id は個々の要素の識別子であり、class は要素のタイプの識別子です。 ID とは対照的に、各クラス名は同じページ内で再利用できます。
6.1.4 クラスを使用する場所
6.1.5 複数のクラスを同時に使用する
XHTMLではclass属性を設定することができます。タグ 、複数のクラス名を同時に使用し、複数のクラス スタイル名を区切るにはスペースを使用します。
6.2 div と span
多くの人は div 要素と span 要素の実際の使用法を混同する傾向があります。それでは、まず、W3C によるこれら 2 つの公式の定義を見てみましょう:div: generic language/stylecontainer.
同じCSSスタイルだとdiv間に改行が入り、spanは左右の関係になります。これが両者の使用上の違いです。違いの理由は、デフォルトの表示モードの違いにあります。表示属性を通じて要素の表示モードを変更できます。
概要: div オブジェクトのデフォルトの表示モードは、display: block 要素です。スパン オブジェクトのデフォルトの表示モードは、display: inline 要素です。
6.3 CSSセレクターの命名
6.3.1 大文字と小文字の区別
XHTMLでは大文字と小文字が区別されません。 CSS はオブジェクト セレクター (body、td、div など) についても大文字と小文字を区別しませんが、ID およびクラス セレクターの名前については大文字と小文字を区別します。
6.3.2 有効な文字と組み合わせ
CSS と XHTML では、class と id は大文字または小文字で始まる必要があり、その後は任意の文字、数字、接続線、または下線を使用できます。
6.3.3 命名に関する提案
セマンティックな命名を使用する6.4 CSS ファイル構造の設計と最適化
CSS はパフォーマンスとコンテンツの分離を実現できますが、CSS ファイルがますます大きくなるという新たな問題も引き起こしていますか?この状況の発生は、Web サイトにとって 2 つの致命的な問題に直結します:Web サイトの初回読み込みの速度が遅い
6.4.1 インポート構造
@importインポートコマンドはCSSが提供する実用的なコマンドで、その主な機能はパスに従ってスタイルシートファイルをインポートすることであり、スタイルシートが提供するデバイスタイプを指定できます。 。このようにして、他のスタイル シートを現在のスタイル シートにインポートできるため、スタイル シート ファイルを同じファイルに記述する必要がなくなります。使用方法は次のとおりです: @import url("xxx.css");さらに、@import コマンドでは、インポートされたスタイル シートのデバイス タイプを指定して、現在のスタイル シートが何に使用されているかを示すこともできます。例: @import url("xxx.css") print;
6.4.2 構造の最適化
大規模な Web サイトのスタイル設計では、@import コマンドなどの分離技術を使用して、さまざまな種類のスタイルを個別に個別のファイルに記述することで、CSS コード レベルでの構造の最適化も実現します。一般的に使用されるいくつかの構造パターンとその使用方法については、以下で説明します。6.5 CSS略語を使用する
CSS略語とは、複数のCSSプロパティを1行にまとめる記述を指します。この方法により、コードの量が大幅に削減され、コードが読みやすく、理解しやすくなります。
6.5.1 フォントの省略形 フォントの省略形は、フォント、フォントサイズ、その他の属性を含むフォントスタイルの省略形であり、使用方法は次のとおりです。 -weight | font-size | line-height | font-family
フォントのスタイルの省略形には、属性名として font を使用し、その後に各属性の値をスペースで区切ります。
6.5.2 マージンとパディングの省略形
デフォルトでは、マージンとパディングの省略形には、上、右、下、左の順に 4 つのパラメータを指定する必要があります。以下に例を示します。 (ここではマージンを例に挙げます。パディングの設定方法はマージンとまったく同じです)
パラメータを 1 つだけ使用します: p {margin: 20px } は、p オブジェクトの周囲のマージンがすべて 20px
2 つのパラメータを使用します。 p { margin: 20px 10px; } は、上下のマージンが 20px、左右のマージンが 10px であることを意味します。3 つのパラメータを使用します。 p { margin: 20px 10px 100px;上のマージンは 20px、左右のマージンは 10px、下のマージンは 100px です
4 つのパラメータを使用します: p { margin: 20px 10px 10px 20px } は、上のマージンが 20px、右マージンが 10px であることを意味します。下のマージンは 10px、左マージンは 20px ですボーダーオブジェクトには、異なる幅、異なる色、異なるスタイルの 4 つの辺が含まれています。したがって、境界線の省略はオブジェクト全体に対して実行できるだけでなく、個々のエッジに対しても実行できます。使い方は以下の通りです:
border: border-width | border-style | color
6.5.4 リストの省略形
リストの省略形はlist-style-type、list-style-positionなどです。 . ul リスト属性の場合。使い方は以下の通りです:
list-style: list-style-type | list-style-position | list-style-image
6.5.5 背景背景の略称
背景には背景の略称を使用します。オブジェクトの関連プロパティの略語を制御します。使用方法は以下の通りです:
background:background-color |background-repeat |background-position
6.5.6 color の色の略称
オブジェクトの CSS の色の略称は主に 16 進カラー用です。色の略語は、A と B、C と D、E と F が同じ番号を持つ場合に使用できます。たとえば、#FFFFFF は #FFF と省略でき、#2255BB は @25B と省略できます。
6.6 CSS コードの最適化
コードの最適化はソフトウェア開発の重要な原則の 1 つであり、CSS スタイルのレイアウト設計にとって非常に重要です。
6.6.1 コードの再利用を増やす
同じ属性が複数の領域に同時に出現する場合がありますが、各領域の目的が異なるため、CSS を単純化する際に一般化することはできません。現在のページの構造と将来の拡張の予想に基づいて合理的な分析と構成を行い、最終的に CSS の簡素化の目的を達成します。
6.6.2 Use style override to simplify
CSS が特定の要素に複数のスタイル コードを適用する場合、多くの場合、後のコードが前のコードを置き換えます。この機能を使用すると、カバレッジを使用してコードを再利用できます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
