CSS (1): CSS を理解する-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS (1): CSS を理解する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 10, 2016 am 08:49 AM

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 内部スタイルシート

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

リーリー

4.3 インラインスタイル

インラインスタイルとは、HTMLタグのstyle属性に直接CSSスタイルを記述することを指します。この方法で CSS を導入する場合、セレクターを記述する必要がないことに注意してください。

リーリー

4.4 3つの導入方法の優先度比較

同じHTML要素が複数のスタイルで定義されている場合、どのスタイルが使用されるのでしょうか？一般に、すべてのスタイルは次のルールに従って新しい仮想スタイルシートにカスケードされます。番号 4 が最も高い優先順位を持ちます。

ブラウザのデフォルト設定
外部スタイルシート
内部スタイルシート ( タグ内にあります)
インラインスタイル (HTML 要素内)

したがって、インラインスタイル (HTML 要素内) の優先順位が最も高くなります。つまり、タグ内のスタイル宣言、外部スタイルシート内のスタイル宣言、またはブラウザーステートメント内のスタイル (デフォルト) よりも優先されます。

5.CSSコードのコメント

/* で始まり */ で終わる CSS コードのコメント。

リーリー

6.CSSセレクター

CSS セレクターは、スタイルを設定する要素のパターンを選択するために使用されます。

6.1 ワイルドカードセレクター

* セレクターはすべての要素を選択します。 * セレクターは、別の要素内のすべての要素を選択することもできます:

リーリー

6.2 要素セレクター

いわゆる要素セレクターとは、Webページ内の既存のタグ名を名前として使用するセレクターを指します。

リーリー

6.3 グループセレクター

単一のタグにスタイルを指定するだけでなく、タグのグループに同じスタイルを定義することもできます。セレクターを区切るにはカンマを使用します。同じスタイルを使用する必要があるページ内の要素については、スタイルを 1 回記述するだけで済みます。

リーリー

声明

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

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles