CSS 属性はどのカテゴリに分類されますか?-フロントエンドQ&A-php.cn

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