ホームページ  >  記事  >  ウェブフロントエンド  >  css3にはどのようなモジュールが含まれていますか?

css3にはどのようなモジュールが含まれていますか?

青灯夜游
青灯夜游オリジナル
2022-04-25 15:38:402454ブラウズ

css3 に含まれるモジュールは次のとおりです: 1. HTML リストにスタイルを追加するために使用されるリスト モジュール; 2. ブロック レイアウト モードを拡張して複数列テキストを定義しやすくする複数列レイアウト。 3. カラー モジュール、色名、rgb()、hsl() などの色を定義するさまざまな方法を提供します; 4. メディア クエリ、CSS がさまざまなデバイスで動作できるようにします。

css3にはどのようなモジュールが含まれていますか?

このチュートリアルの動作環境: 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 の推進に有益です。

#2021 年 1 月現在の CSS3 の各モジュールの仕様は次のとおりです。

#Time名前最終ステータスモジュール1999.01.27 - 2019.08.13テキスト変更モジュール推奨事項の候補css-text-decor-3##1999.06.22 - 2018.10.181999.06. 23 - 2019.10.15##1999.06.22 - 2018.06.19名前空間モジュール推奨css-namespaces-3#セレクター#2001.04.04 - 2012.06.19メディアに関するお問い合わせ##css3-mediaqueries##2001.05.17 - 2020.12.22 ##2001.07.13 - 2021.02.11フォント モジュール推奨css-fonts-3背景と枠線モジュール ##作業草案##2002.05.15 - 2020.08.27##css-inline-3 #css-ui -3##2003.05.14 - 2019.08.02 コンテンツ モジュールの生成作業草案css-content-3#css-syntax-3##2004.02.24 - 2014.10.142005.12.15 - 2015.03.26画像モジュール推奨候補css-images-3書き込みモード条件ルール モジュール配置レイアウト モジュールフラグメント モジュール2012.06.12 - 2020.04.21##作業草案 #css-counter-styles-3#2013.04.18 - 2020.06.032014.02.20 - 2020.12。 18例:
ページネーション メディア モジュール
作業草案
css-page-3
複数列レイアウト
作業草案
css-multicol- 1
カラー モジュール
#推奨
css-color-3
#1999.06.25 - 2014.03.20
1999.08.03 - 2018.11.06
推奨
セレクター-3
#推奨
テキスト モジュール
推奨事項の候補
css-text-3
カスケードと継承
推奨
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
##2001.09.24 - 2020.12.22
##推奨事項の候補
##css-backgrounds- 3
##2002.02.20 - 2020.11.17
リスト モジュール
css-lists-3
#インライン レイアウトmodule
作業草案
2002.08 .02 - 2018.06.21
基本ユーザー インターフェイス モジュール
推奨
2003.08.13 - 2019.07.16
文法モジュール
推奨事項の候補
#ハイパーリンク表示モジュール
ワーキンググループノート
css3-hyperlinks
テンプレート レイアウト モジュール
ワーキング グループ ノート
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
##2010.12.02 - 2019.12.10
推奨
css-writing-modes-3
2011.09.01 - 2020.12.08
推奨事項の候補
css3-conditionalr
2012.02.07 - 2020.05.19
作業草案
#css-position-3
2012.02.28 - 2018.12 .04
推奨事項の候補
css-break-3
##ボックス配置モジュール
css-align-3
2012.09.27 - 2020.12.18
幅と高さのサイズ モジュール
作業草案
#css-sizing-3
##2012.10.09 - 2017.12.14
##カウンタースタイル
推奨候補
オーバーフロー モジュール
作業草案
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 サイトの他の関連記事を参照してください。

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