css3 に含まれるモジュールは次のとおりです: 1. HTML リストにスタイルを追加するために使用されるリスト モジュール; 2. ブロック レイアウト モードを拡張して複数列テキストを定義しやすくする複数列レイアウト。 3. カラー モジュール、色名、rgb()、hsl() などの色を定義するさまざまな方法を提供します; 4. メディア クエリ、CSS がさまざまなデバイスで動作できるようにします。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS3 は、CSS (Cascading Style Sheets) テクノロジーのアップグレード バージョンです。1999 年に策定されました。2001 年 5 月 23 日に、W3C は主にボックス モデル、リスト モジュール、ハイパーリンクを含む CSS3 の作業草案を完成させました。メソッド、言語モジュール、背景と枠線、テキスト効果、複数列レイアウト、その他のモジュール
#CSS の進化における大きな変化は、CSS3 を一連のモジュールに分割するという W3C の決定です。 W3C は 2001 年の初めに CSS3 の仕様草案を完成させました。 CSS3 仕様の新しい特徴は、CSS3 仕様が複数の独立したモジュールに分割されていることです。- 一方で、いくつかの小さなモジュールに分割すると、仕様のタイムリーな更新と公開、およびモジュールの内容のタイムリーな調整が容易になります。これらのモジュールは、独立して実装およびリリースできます。これは、CSS の将来の拡張の基礎にもなります。
- 一方で、サポートされているデバイスやブラウザのメーカーの制限により、デバイスやメーカーは一部のモジュールや CSS3 のサブセットを選択的にサポートすることができ、これは CSS3 の推進に有益です。
名前 | 最終ステータス | モジュール | |
---|---|---|---|
テキスト変更モジュール | 推奨事項の候補 | css-text-decor-3 | |
ページネーション メディア モジュール | 作業草案 | css-page-3 | |
複数列レイアウト | 作業草案 | css-multicol- 1 | ##1999.06.22 - 2018.06.19 |
カラー モジュール |
#推奨 | css-color-3 | #1999.06.25 - 2014.03.20 |
推奨 | css-namespaces-3 | 1999.08.03 - 2018.11.06 |
|
推奨 | セレクター-3 | #2001.04.04 - 2012.06.19 | メディアに関するお問い合わせ | #推奨 | ##css3-mediaqueries##2001.05.17 - 2020.12.22 |
テキスト モジュール | 推奨事項の候補 | css-text-3 | ##2001.07.13 - 2021.02.11 |
カスケードと継承 |
推奨 |
css-cascade-3 |
##2001.07.13 - 2019.06.06 |
値とユニットモジュール | 推奨事項の候補 | css-values-3 | 2001.07.26 - 2020.12.22 |
基本ボックス モデル | 推奨候補 | css -box-3 | ##2001.07.31 - 2018.09.20 |
推奨 | css-fonts-3 | ##2001.09.24 - 2020.12.22 | |
##推奨事項の候補 |
##css-backgrounds- 3 | ##2002.02.20 - 2020.11.17 |
リスト モジュール |
css-lists-3 | ##2002.05.15 - 2020.08.27 | #インライン レイアウトmodule | 作業草案 |
2002.08 .02 - 2018.06.21 |
基本ユーザー インターフェイス モジュール |
推奨 |
|
##2003.05.14 - 2019.08.02 | コンテンツ モジュールの生成 | 作業草案 | css-content-3 |
2003.08.13 - 2019.07.16 | 文法モジュール | 推奨事項の候補 | #css-syntax-3|
#ハイパーリンク表示モジュール
|
ワーキンググループノート |
css3-hyperlinks |
| 2005.12.15 - 2015.03.26
テンプレート レイアウト モジュール |
ワーキング グループ ノート |
css-template-3 |
##2006.06.12 - 2014.05.13 |
ページネーション メディア モジュール コンテンツの生成 | 作業草案 | css-gcpm-3 | 2008.08.01 - 2014.10.14 |
マーキー モジュール | ワーキング グループのメモ | css3 -marquee | ##2009.07.23 - 2020.12.17 |
推奨候補 | css-images-3 | ##2010.12.02 - 2019.12.10 | |
推奨 | css-writing-modes-3 | 2011.09.01 - 2020.12.08 | |
推奨事項の候補 |
|
2012.02.07 - 2020.05.19 | |
作業草案 | #css-position-3 | 2012.02.28 - 2018.12 .04 | |
推奨事項の候補 | css-break-3 | 2012.06.12 - 2020.04.21 | ##ボックス配置モジュール |
css-align-3 |
|||
2012.09.27 - 2020.12.18 |
幅と高さのサイズ モジュール |
作業草案 |
#css-sizing-3 |
##2012.10.09 - 2017.12.14
|
##カウンタースタイル | 推奨候補 | #css-counter-styles-3|
オーバーフロー モジュール | 作業草案 | css-overflow-3 | |
表示タイプ モジュール | 推奨事項の候補 | css-display-3 |
css3 カラー モジュール
CSS3 でサポートされている色表現方法
色の英語名で表されます。英語の名前は色を表しますが、その表現は非常に限られており、覚えたり調べたりするのが困難です。- は 16 進数の色で表されます。色の三原色と光の原理を表で調べることができます。
- はrgb(r,g,b)で表されます。光の三原色、赤、緑、青の原理。
- hsl (色相、彩度、明度) で表されます。色相、彩度、明るさ。
- rgba (r、g、b、a) で表されます。光の三原色、赤、緑、青、透明の原理。 a ∈ [0, 1]、0 は完全な透明性を表します。
- hsla (色相、彩度、明度、アルファ) で表されます。色相、彩度、明度、透明度。 alpha ∈ [0, 1]、0 は完全な透明度を表します。
- CSS3 複数列レイアウト
CSS 複数列レイアウト ブロック レイアウト モードを拡張して、複数列のテキストを簡単に定義できるようにします。行が長すぎると、テキストを読むのが困難になります。ある行の終わりから次の行の始まりに移動するのに時間がかかりすぎると、今いる行を見失ってしまいます。したがって、大きな画面を最大限に活用するには、作成者は新聞のようにさまざまな幅のテキストの列を並べて配置する必要があります。
css3 メディア クエリ
モバイル デバイスの急速な普及により、ユーザーは従来のコンピューター システムを通じて Web コンテンツを閲覧するだけでなく、ますます多くのユーザーがスマートフォンを使用し始めています。 、タブレット、またはその他のさまざまなサイズのデバイスで Web コンテンツを閲覧できます。さまざまなデバイスを使用するユーザーが快適に操作できるようにするには、メディア クエリが必要です。
メディア クエリは、CSS スタイル シートの最も重要な機能の 1 つです。いわゆるメディア クエリとは、さまざまなメディア タイプ (デバイス タイプ) に基づいてさまざまなデバイス (コンピュータ、携帯電話、タブレットなど) を区別することを指します。および条件、点字デバイスなど) を定義し、それぞれに対して異なる CSS スタイルを定義します。メディア クエリを使用すると、CSS が異なるデバイスまたは同じデバイス上の異なる条件に対してより正確に動作できるようになり、すべてのユーザーが良好なユーザー エクスペリエンスを得ることができます。/* 在小于或等于 992 像素的屏幕上,将背景色设置为蓝色 */ @media screen and (max-width: 992px) { body { background-color: blue; } } /* 在 600 像素或更小的屏幕上,将背景色设置为橄榄色 */ @media screen and (max-width: 600px) { body { background-color: olive; } }(学習ビデオ共有:
css ビデオ チュートリアル
、Web フロントエンド)
以上がcss3にはどのようなモジュールが含まれていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1)HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2)ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3)コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4)コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5)パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1)Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2)コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3)Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4)国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5)基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6)一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1)コンポーネントと州の管理を通じてUIの開発を簡素化します。 2)作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3)基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4)不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5)パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1)JSXはHTMLを埋め込み、開発をより直感的にします。 2)仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3)保守性を向上させるコンポーネントベースの管理UI。 4)国家管理とイベント処理は、インタラクティブ性を高めます。

Reactコンポーネントは、機能またはクラスによって定義され、UIロジックのカプセル化、およびプロップを介して入力データを受け入れることができます。 1)コンポーネントの定義:関数またはクラスを使用して、反応要素を返します。 2)レンダリングコンポーネント:Reactコールレンダリングメソッドまたは機能コンポーネントを実行します。 3)マルチプレックスコンポーネント:データをプロップに渡して、複雑なUIを構築します。コンポーネントのライフサイクルアプローチにより、ロジックをさまざまな段階で実行でき、開発効率とコードメンテナビリティが向上します。

React Strictモードは、追加のチェックと警告をアクティブにすることにより、Reactアプリケーションの潜在的な問題を強調する開発ツールです。これは、レガシーコード、安全でないライフサイクル、および副作用を特定するのに役立ち、現代の反応の実践を促進します。

反応フラグメントにより、余分なDOMノードなしで子供をグループ化すること、構造、パフォーマンス、アクセシビリティが向上します。それらは、効率的なリストレンダリングの鍵をサポートしています。

この記事では、Reactの和解プロセスについて説明し、DOMを効率的に更新する方法について詳しく説明しています。重要な手順には、調整のトリガー、仮想DOMの作成、拡散アルゴリズムの使用、最小限のDOM更新の適用が含まれます。また、Perfoをカバーしています


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
