CSS (1): CSS を理解する

1.CSSとは

CSS カスケード スタイル シート (正式な英語名: Cascading Style Sheets) は、HTML や XML などのファイル スタイルを表現するために使用されるコンピューター言語です。 CSS3 は CSS2 のアップグレード バージョンで、3 は単なるバージョン番号です。CSS2.1 に基づいて多くの強力な新機能が追加されています。 現在、主流のブラウザである chrome、safari、firefox、opera、さらには 360 も CSS3 のほとんどの機能をサポートしており、IE10 も CSS3 を完全にサポートし始めます。ブラウザーが異なれば、必要なプレフィックスも異なる場合があります。これは、CSS プロパティまたはルールがまだ W3C 標準の一部になっておらず、ブラウザのプライベート プロパティであることを意味します。ただし、ブラウザの新しいバージョンでは現在プレフィックスは必要ありませんが、前方互換性を向上させるためにはプレフィックスが依然として不可欠です。

リーリー

Transform は CSS3 の新しい属性であり、各ブラウザーはそれをサポートするためにプレフィックスを追加する必要があります。

2.CSSでできること

• スタイルは、HTML 要素の表示方法を定義します。
• CSS は、わずか数行のコードで、以前は画像やスクリプトを使用する必要があった多くの効果やアニメーション効果さえも実現できます。たとえば、丸い角、画像の境界線、テキストの影とボックスの影、トランジション、アニメーションなどです。
• CSS はフロントエンド開発者の設計プロセスを簡素化し、より柔軟なページ レイアウトとより速いページ読み込み速度を提供します。
• サイト上のすべての Web ページのスタイルは CSS ファイルを使用して制御でき、CSS ファイル内の対応するコードが変更される限り、サイト全体のすべてのページがそれに応じて変更されます。
• 目的: パフォーマンスを構造から分離します。

リーリー

リーリー

3.CSS構文構造

CSS ルールは 2 つの主要な部分で構成されます。セレクター (通常はスタイルを変更する HTML 要素) と 1 つ以上の宣言です。各宣言はプロパティと値で構成されます。プロパティは、設定するスタイル属性です。各属性には値があります。プロパティと値はコロンで区切られます。

リーリー

4.CSSの導入方法

スタイルシートを導入するには3つの方法があります:

• 外部スタイルシート
• 内部スタイルシート
• インラインスタイル

4.1 外部スタイルシート

外部スタイルシートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、 タグを使用してスタイル シートにリンクします。 (ドキュメントの) head 内の タグ:

リーリー

4.2 内部スタイルシート

単一のドキュメントに特別なスタイルが必要な場合は、内部スタイルシートを使用する必要があります。内部スタイルシートは、