ホームページ  >  記事  >  ウェブフロントエンド  >  CSS 属性はどのカテゴリに分類されますか?

CSS 属性はどのカテゴリに分類されますか?

青灯夜游
青灯夜游オリジナル
2021-06-08 14:21:432816ブラウズ

CSS プロパティの分類: アニメーション プロパティ、変換プロパティ、トランジション プロパティ、ボックス プロパティ、マーキー プロパティ、サイズ プロパティ、マージン プロパティ、パディング プロパティ、境界線プロパティ、位置決めプロパティ、複数列プロパティ、スケーラブル ボックス プロパティ、リストプロパティ、グリッドプロパティ、テーブルプロパティ、テキストプロパティ、フォントプロパティ、カラープロパティ、背景プロパティなど。

CSS 属性はどのカテゴリに分類されますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

#CSS 属性の分類

##アニメーション属性の分類サイズ/位置--CSS サイズ属性 (寸法)CSS マージン属性 (マージン)CSS パディング属性 (パディング) CSS 境界線プロパティ (境界線とアウトライン)CSS 位置決めプロパティ (位置決め)--リスト/テーブル複数列プロパティ (複数列) )フレキシブル ボックス プロパティ (フレキシブル ボックス)CSS リスト プロパティ (List)グリッド プロパティCSS テーブル プロパティ (Table) テキスト フォントの色CSS テキスト プロパティ (Text)CSS フォント プロパティ (Font)Color プロパティCSS Background プロパティ (背景)属性は控えめに使用するハイパーリンク属性生成されたコンテンツ ページ メディアのプロパティのコンテンツユーザー インターフェイス プロパティ (ユーザー インターフェイス)ページ メディア プロパティCSS 印刷プロパティ (印刷) #CSS3 アニメーション プロパティ (アニメーション)
CSS3 アニメーション属性 (アニメーション) 2D/3D 変換プロパティ(Transform) Transition プロパティ(Transition) Box プロパティ Marquee プロパティ

#Attribute

DescriptionCSS##@keyframes アニメーションを指定します。 3animationanimation-play-state プロパティを除く、すべてのアニメーション プロパティの短縮形プロパティ。 3animation-name@keyframes アニメーションの名前を指定します。 3animation-durationアニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。 3animation-timing-functionアニメーションのスピードカーブを指定します。 3animation-delayアニメーションの開始時期を指定します。 3animation-iteration-countアニメーションの再生回数を指定します。 3animation-direction次のサイクルでアニメーションを逆再生するかどうかを指定します。 3animation-play-stateアニメーションが実行中か一時停止中かを指定します。 3animation-fill-modeアニメーション時間外のオブジェクトの状態を指定します。 3

#CSS 背景プロパティ (Background)

プロパティ説明CSSbackgroundすべての背景プロパティを 1 つのステートメントで設定します。 1background-attachment 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを設定します。 1background-color要素の背景色を設定します。 1background-image要素の背景画像を設定します。 1background-position背景画像の開始位置を設定します。 1background-repeat背景画像を繰り返すかどうか、どのように繰り返すかを設定します。 1background-clip背景の描画領域を指定します。 3background-origin背景画像の配置領域を指定します。 3background-size背景画像のサイズを指定します。 3
CSS 境界線プロパティ (境界線とアウトライン)

Propertyborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthoutlineoutline-coloroutline-styleoutline-widthborder-bottom-left-radiusborder-bottom-right-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-radiusborder-top-left-radiusborder-top-right-radiusbox-decoration-break##box - shadowボックスに 1 つ以上の影を追加します。 3

ボックスのプロパティ

Description CSS
すべての境界線プロパティを 1 つのステートメントで設定します。 1
すべての下枠プロパティを 1 つのステートメントで設定します。 1
下枠の色を設定します。 2
下枠のスタイルを設定します。 2
下枠の幅を設定します。 1
4 つの境界線の色を設定します。 1
すべての左境界プロパティを 1 つのステートメントで設定します。 1
左の境界線の色を設定します。 2
左境界線のスタイルを設定します。 2
左境界線の幅を設定します。 1
すべての右枠プロパティを 1 つのステートメントで設定します。 1
右枠の色を設定します。 2
右枠のスタイルを設定します。 2
右枠の幅を設定します。 1
4 つの境界線のスタイルを設定します。 1
すべての上枠プロパティを 1 つのステートメントで設定します。 1
上枠の色を設定します。 2
上枠のスタイルを設定します。 2
上枠の幅を設定します。 1
4 つの境界線の幅を設定します。 1
すべてのアウトライン プロパティを 1 つのステートメントで設定します。 2
アウトラインの色を設定します。 2
アウトラインのスタイルを設定します。 2
アウトラインの幅を設定します。 2
境界線の左下隅の形状を定義します。 3
境界線の右下隅の形状を定義します。 3
短縮形のプロパティ。すべての border-image-* プロパティを設定します。 3
境界線イメージ領域が境界線を超える量を指定します。 3
画像の境界線を繰り返すか、丸めるか、伸ばすか)。 3
画像境界線の内側のオフセットを指定します。 3
境界線として使用する画像を指定します。 3
画像の境界線の幅を指定します。 3
短縮形のプロパティ。4 つの border-*-radius プロパティをすべて設定します。 3
境界線の左上隅の形状を定義します。 3
境界線の右下隅の形状を定義します。 3
3
##3
プロパティ 説明 CSS
overflow-x コンテンツが要素コンテンツ領域からオーバーフローした場合、コンテンツの左端/右端をトリミングするかどうか。 3
overflow-y コンテンツが要素コンテンツ領域からオーバーフローする場合、コンテンツの上端/下端をトリミングするかどうか。 3
overflow-style オーバーフロー要素の優先スクロール方法を指定します。 3
rotation 回転ポイント プロパティで定義された点を中心に要素を回転します。 3
rotation-point 左上の境界エッジからのオフセット ポイントを定義します。
##カラー属性

属性DescriptionCSScolor-profileデフォルトの仕様以外のソース カラー プロファイルの使用を許可します。 3opacity要素の不透明度レベルを指定します。 3rendering-intentデフォルト以外のレンダリング インテント仕様にカラー プロファイルを使用できるようにします。 3ページ メディア プロパティのコンテンツ

プロパティDescriptionCSSbookmark-labelブックマークのラベルを指定します。 3bookmark-levelブックマークのレベルを指定します。 3bookmark-targetブックマーク リンクのターゲットを指定します。 3float-offset float 属性が通常配置される場所とは反対の方向に要素を配置します。 3hyphenate-afterハイフンでつながれた単語のハイフンの後の最小文字数を指定します。 3hyphenate-beforeハイフンでつながれた単語のハイフンの前の最小文字数を指定します。 3hyphenate-characterハイフネーションが発生したときに表示される文字列を指定します。 3hyphenate-lines要素内の連続するハイフネーション行の最大数を示します。 3hyphenate-resourceブラウザがハイフネーションポイントを決定するのに役立つ外部リソース (カンマ区切りリスト) を指定します。 3ハイフン段落レイアウトを改善するために単語を分割する方法を設定します。 3image-resolution画像の正しい解像度を指定します。 3マーククロップマークまたはバツマークを文書に追加します。 3文字列セット3CSS サイズ属性 (ディメンション)

プロパティ説明CSSheight要素の高さを設定します。 1max-height要素の最大高さを設定します。 2max-width 要素の最大幅を設定します。 2min-height要素の最小の高さを設定します。 2min-width 要素の最小幅を設定します。 2width要素の幅を設定します。 1フレキシブル ボックスのプロパティ

Property説明CSSbox-alignボックスの子要素を配置する方法を指定します。 3box-directionボックスの子要素の表示方向を指定します。 3box-flexボックスの子要素がスケーラブルかどうかを指定します。 3box-flex-groupスケーラブルな要素をフレックス グループに割り当てます。 3box-lines親要素ボックスのスペースを超えた場合に表示を折り返すかどうかを指定します。 3box-ordinal-groupボックスの子要素の表示順序を指定します。 3box-orientボックスの子要素を水平または垂直のどちらに配置するかを指定します。 3box-pack水平ボックスの場合は水平位置、垂直ボックスの場合は垂直位置を指定します。 3

CSS フォント プロパティ (フォント)

プロパティ 説明 CSS
font すべてのフォント プロパティを 1 つのステートメントで設定します。 1
font-family テキストのフォント ファミリを指定します。 1
font-size テキストのフォント サイズを指定します。 1
font-size-adjust 要素のアスペクト値を指定します。 2
font-stretch 現在のフォント ファミリを縮小または拡大します。 2
font-style テキストのフォント スタイルを指定します。 1
font-variant テキストを小文字フォントで表示するかどうかを指定します。 1
font-weight フォントの太さを指定します。 1

生成されたコンテンツ

プロパティ DescriptionCSScontent :before および :after 擬似要素とともに使用して、生成されたコンテンツを挿入します。 2counter-increment1 つ以上のカウンタをインクリメントまたはデクリメントします。 2counter-reset1 つ以上のカウンターを作成またはリセットします。 2quotesネストされた引用符の引用タイプを設定します。 2cropオブジェクト全体ではなく、オブジェクトの長方形の領域のみを要素として置き換えることを許可します。 3move-toストリームから要素を削除し、ドキュメント内の後の位置に再挿入します。 3page-policyページの出現に基づいて、要素をカウンタまたは文字列値のどちらに適用するかを決定します。 ##グリッド プロパティ
#3

プロパティDescriptionCSSgrid-columnsグリッド内の各列の幅を指定します。 3grid-rowsグリッド内の各列の高さを指定します。 3ハイパーリンクのプロパティ

プロパティ DescriptionCSStarget省略形属性、target-name、target-new、および target-position 属性を設定します。 3target-nameリンクを開く場所 (リンクのターゲット) を指定します。 3target-newターゲット リンクを新しいウィンドウで開くか、既存のウィンドウの新しいタブで開くかを指定します。 3target-position新しいターゲット リンクを配置する場所を指定します。 3CSS リスト プロパティ (List)

プロパティ説明すべてのリスト プロパティを 1 つのステートメントで設定します。 画像をリスト項目マーカーとして設定します。 リスト項目マークの配置位置を設定します。 リスト項目タグのタイプを設定します。 CSS マージン属性 (Margin)
CSS list-style
1 list-style-image
1 list-style-position
1 list-style-type
1 マーカーオフセット
2

プロパティ説明#marginすべてのマージン プロパティを 1 つの宣言で設定します。 1margin-bottom 要素の下マージンを設定します。 1margin-left 要素の左マージンを設定します。 1margin-right 要素の右マージンを設定します。 1margin-top要素の上マージンを設定します。 1マーキー プロパティ
CSS

プロパティ

DescriptionCSSmarquee-directionコンテンツの移動方向を設定します。 3marquee-play-countコンテンツを移動する回数を設定します。 3marquee-speedコンテンツのスクロール速度を設定します。 3marquee-styleモバイル コンテンツのスタイルを設定します。 3

複数列

##3
属性 説明 CSS
column-count 要素を区切る列の数を指定します。 3
column-fill 列を埋める方法を指定します。 3
column-gap 列間のギャップを指定します。 3
column-rule すべての column-rule-* プロパティの短縮形プロパティを設定します。 3
column-rule-color 列間のルールの色を指定します。 3
column-rule-style 列間のルールのスタイルを指定します。 3
column-rule-width 列間のルールの幅を指定します。 3
column-span 要素がまたがる列の数を指定します。 3
column-width 列の幅を指定します。 3
columns 列幅と列数を設定するための短縮プロパティを指定します。
CSS パディング プロパティ (Padding)

Property paddingpadding-bottompadding-leftpadding-rightpadding-top
説明 CSS
すべてのパディング プロパティを 1 つのステートメントで設定します。 1
要素の下部パディングを設定します。 1
要素の左パディングを設定します。 1
要素の右パディングを設定します。 1
要素の上部のパディングを設定します。 1
ページ メディア プロパティ

属性fitfit-positionimage-orientationpagesizeCSS 配置プロパティ (Positioning)
説明 CSS
width 属性と height 属性が auto ではない、置換された要素をスケーリングする方法を示します。 3
ボックス内のオブジェクトの配置を定義します。 3
ユーザー エージェントが画像に適用する時計回りの回転を指定します。 3
要素を表示する特定のページの種類を指定します。 3
ページ コンテンツを含むボックスのサイズと方向を指定します。 3

プロパティ説明CSSbottom 配置された要素の下マージン境界と要素の下境界の間のオフセットを設定します。それを含むブロック 。 2clear要素のどの側で他の浮動要素を許可しないかを指定します。 1clip絶対的に配置された要素をクリップします。 2cursor表示するカーソルの種類(形状)を指定します。 2display要素が生成するボックスのタイプを指定します。 1float ボックスをフローティングにするかどうかを指定します。 1left 位置決めされた要素の左マージン境界と、その要素を含むブロックの左境界の間のオフセットを設定します。 2overflowコンテンツが要素ボックスからオーバーフローした場合の動作を指定します。 2position要素の配置タイプを指定します。 2right位置決めされた要素の右マージン境界と、その要素を含むブロックの右境界との間のオフセットを設定します。 2top位置決めされた要素の上マージン境界と、その要素を含むブロックの上境界との間のオフセットを設定します。 2vertical-align要素の垂直方向の配置を設定します。 1visibility要素が表示されるかどうかを指定します。 2z-index要素の重なり順を設定します。 2CSS 印刷プロパティ (印刷)

プロパティ説明CSSorphans ページネーション時にページの下部に残す必要がある最小行数を設定します。要素内で発生します。 2page-break-after要素の後のページング動作を設定します。 2page-break-before要素の前にページング動作を設定します。 2page-break-inside要素内のページング動作を設定します。 2widows要素内でページネーションが発生する場合に、ページの先頭に残す必要がある最小行数を設定します。 2

#CSS テーブル プロパティ (テーブル)

プロパティ説明CSSborder-collapseテーブルの境界線を結合するかどうかを指定します。 2border-spacing隣接するセルの境界線間の距離を指定します。 2caption-side表タイトルの位置を指定します。 2empty-cells表内の空のセルに枠線と背景を表示するかどうかを指定します。 2table-layoutテーブルに使用されるレイアウト アルゴリズムを設定します。 2

CSS テキスト属性 (Text)

属性説明CSScolorテキストの色を設定します。 1directionテキストの方向/書き込み方向を指定します。 2letter-spacing文字間隔を設定します。 1line-height行の高さを設定します。 1text-alignテキストの水平方向の配置を指定します。 1text-decorationテキストに追加する装飾効果を指定します。 1text-indentテキスト ブロックの最初の行のインデントを指定します。 1text-shadowテキストに追加する影効果を指定します。 2text-transformテキストの大文字と小文字を制御します。 1unicode-bidiテキストの方向を設定します。 2white-space要素内の空白の処理方法を指定します。 1word-spacing単語の間隔を設定します。 1hanging-punctuation句読点文字がワイヤーフレームの外側にあるかどうかを指定します。 3punctuation-trim句読点文字をトリムするかどうかを指定します。 3text-align-last最終行または強制改行の直前の行を揃える方法を設定します。 3text-emphasis強調記号と強調記号の前景色を要素のテキストに適用します。 3text-justifytext-align が「justify」に設定されている場合に使用される配置方法を指定します。 3text-outlineテキストのアウトラインを指定します。 3text-overflowテキストが含まれる要素からオーバーフローした場合の動作を指定します。 3text-shadowテキストに影を追加します。 3text-wrapテキストの行折り返しルールを指定します。 3word-break中国語、日本語、韓国語以外のテキストの改行ルールを指定します。 3word-wrap分割できない長い単語を分割して次の行に折り返すことができます。 3

2D/3D 変換プロパティ (Transform)

PropertyDescriptionCSStransform2D または 3D 変換を要素に適用します。 3transform-origin変換される要素の位置を変更できます。 3transform-styleネストされた要素を 3D 空間で表示する方法を指定します。 3perspective3D 要素の遠近効果を指定します。 3perspective-origin3D 要素の下部の位置を指定します。 3backface-visibility画面に向かっていないときに要素が表示されるかどうかを定義します。 3

遷移属性

属性説明CSStransition1 つのプロパティで 4 つのトランジション プロパティを設定するために使用される省略形プロパティ。 3transition-propertyトランジションを適用する CSS プロパティの名前を指定します。 3transition-durationトランジション効果にかかる時間を定義します。 3transition-timing-functionトランジション効果の時間曲線を指定します。 3transition-layトランジション効果がいつ開始されるかを指定します。 3

ユーザー インターフェイスのプロパティ

プロパティ 説明 CSS
Appearance 要素の外観を標準のユーザー インターフェイス要素に設定できます 3
box-sizing ゾーンに適合するものを正確に定義できます。 3
icon 作成者は、アイコン化された同等のものを使用して要素をスタイル設定できます。 3
nav-down 下矢印ナビゲーション キーを使用するときに移動する場所を指定します。 3
nav-index タブキーによる要素の制御順序を設定します。 3
nav-left 左矢印ナビゲーション キーを使用するときに移動する場所を指定します。 3
nav-right 右矢印ナビゲーション キーを使用するときに移動する場所を指定します。 3
nav-up 上矢印ナビゲーション キーを使用するときに移動する場所を指定します。 3
outline-offset アウトラインをオフセットし、境界線の端を越えてアウトラインを描画します。 3
resize ユーザーが要素のサイズを調整できるかどうかを指定します。 3

(学習ビデオ共有: css ビデオ チュートリアル )

以上がCSS 属性はどのカテゴリに分類されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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