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

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

青灯夜游

Jun 08, 2021 pm 02:21 PM

css属性

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 までご連絡ください。

HTMLとReactの統合：実用的なガイドApr 21, 2025 am 12:16 AM

HTMLとReactは、JSXを介してシームレスに統合して、効率的なユーザーインターフェイスを構築できます。 1）JSXを使用してHTML要素を埋め込み、2）仮想DOMを使用してレンダリングパフォーマンスを最適化し、3）コンポーネントを通じてHTML構造を管理およびレンダリングします。この統合方法は直感的であるだけでなく、アプリケーションのパフォーマンスを向上させます。

ReactおよびHTML：レンダリングデータと取り扱いイベントApr 20, 2025 am 12:21 AM

React Reactは、状態および小道具を介してデータを効率的にレンダリングし、合成イベントシステムを介してユーザーイベントを処理します。 1）Counterの例など、UseStateを使用して状態を管理します。 2）イベント処理は、ボタンクリックなどのJSXに関数を追加することにより実装されます。 3）トドリストコンポーネントなどのリストをレンダリングするには、重要な属性が必要です。 4）フォーム処理の場合、FormコンポーネントなどのuseStateおよびe.preventdefault（）。

バックエンド接続：Reactがサーバーとどのように相互作用するかApr 20, 2025 am 12:19 AM

Reactは、HTTP要求を介してサーバーと対話し、データを取得、送信、更新、削除します。 1）ユーザー操作はイベントをトリガーします。2）HTTP要求を開始する、3）サーバーの応答をプロセス、4）コンポーネントのステータスと再レンダリングを更新します。

React：ユーザーインターフェイスに焦点を当てる（Frontend）Apr 20, 2025 am 12:18 AM

Reactは、コンポーネント開発と仮想DOMを通じて効率を向上させるユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1。コンポーネントとJSX：JSX構文を使用してコンポーネントを定義して、コードの直感性と品質を高めます。 2。仮想DOMおよびレンダリング：仮想DOMおよびDIFFアルゴリズムを介してレンダリングパフォーマンスを最適化します。 3。状態管理とフック：UseStateやUseefectなどのフックは、状態管理と副作用の取り扱いを簡素化します。 4。使用例：基本形式から高度なグローバルな州管理まで、Contextapiを使用します。 5.一般的なエラーとデバッグ：不適切な状態管理とコンポーネントの更新の問題を避け、ReactDevtoolsを使用してデバッグします。 6。パフォーマンスの最適化と最適性

Reactの役割：フロントエンドまたはバックエンド？区別を明確にしますApr 20, 2025 am 12:15 AM

ReactisaFrontendLibrary、focusedonbuildinguserinterfaces.itmanagesUistateandupdateSeSefiedlyusingingingingualdod、およびinteractswithbackendservicesviaapisfordatahandling、butdoesnotprocessorstoredatoredaitaits

HTMLで反応する：インタラクティブなユーザーインターフェイスを構築しますApr 20, 2025 am 12:05 AM

ReactをHTMLに組み込み、従来のHTMLページを強化または完全に書き換えることができます。 1）Reactを使用するための基本的な手順には、HTMLにルートDIVを追加し、ReactDom.Render（）を介してReactコンポーネントをレンダリングすることが含まれます。 2）より高度なアプリケーションには、UseStateを使用して状態を管理し、カウンターやTo Doリストなどの複雑なUI相互作用を実装することが含まれます。 3）最適化とベストプラクティスには、コードセグメンテーション、怠zyな読み込み、React.memoとusememoを使用してパフォーマンスを向上させることが含まれます。これらの方法を通じて、開発者はReactの力を活用して、動的で応答性の高いユーザーインターフェイスを構築できます。

React：現代のフロントエンド開発の基礎Apr 19, 2025 am 12:23 AM

Reactは、最新のフロントエンドアプリケーションを構築するためのJavaScriptライブラリです。 1.パフォーマンスを最適化するために、コンポーネントおよび仮想DOMを使用します。 2。コンポーネントJSXを使用して、データを管理するために定義、状態、および属性を定義します。 3.フックはライフサイクル管理を簡素化します。 4. Contextapiを使用して、グローバルステータスを管理します。 5.一般的なエラーには、デバッグステータスの更新とライフサイクルが必要です。 6。最適化手法には、メモ、コード分割、仮想スクロールが含まれます。

Reactの未来：Web開発におけるトレンドと革新Apr 19, 2025 am 12:22 AM

Reactの未来は、究極のコンポーネント開発、パフォーマンスの最適化、および他のテクノロジースタックとの深い統合に焦点を当てます。 1）Reactは、コンポーネントの作成と管理をさらに簡素化し、究極のコンポーネント開発を促進します。 2）特に大規模なアプリケーションでは、パフォーマンスの最適化が焦点になります。 3）Reactは、開発エクスペリエンスを改善するために、GraphQLやTypeScriptなどのテクノロジーと深く統合されます。

See all articles