一般的な CSS プロパティの概要-CSSチュートリアル-php.cn

********* 共通 CSS プロパティ *********

z-index:

auto (デフォルト値)

オブジェクトの順序のカスケード。

マージされたオブジェクトの場合、この属性パラメータの値が大きいほど、上に積み重ねられます。

2 つのオブジェクトのこの属性が同じ値を持つ場合、それらは HTML ドキュメント内で流れる順序に従ってカスケードされ、後で書かれたものが前のものを上書きします。

この値を有効にするには、位置属性値を固定 | 絶対ページとして定義する必要があります。

対応するスクリプト機能は zIndex です。

---------------------------------------------- --- --------------------------------------------------- --- --

clip: オブジェクトの表示領域を取得または設定します。領域外の部分は透明になります。

この属性を使用するには、position の値を絶対値に設定する必要があります。

auto: オブジェクトにはシアーがありません

rect(|auto |auto |auto |auto): オブジェクトの左上隅から計算された座標を上から順に (0,0) として提供します-right-bottom-left 4 つのオフセット値。いずれも auto に置き換えることができます。つまり、このエッジはカットされません。

左上方向のトリミング: 設定値まで、つまり、左上方向の自動値が 0 になるまでトリミングを開始します。

右下方向のトリミング: からトリミングを開始します。右端と一番下までの値を設定します。下側、つまり右下の位置の auto 値がボックスの実際の幅と高さになります

例:clip:rect(auto 50px 20px auto)

説明: 上側は切り取らず、右側は 50 ピクセル目から切り出す右端までカットし、20 ピクセル目から下に向けて切り出し、左側はカットしないでください

inset(| auto |auto |auto |auto): この切り取り方法はrect()に似ていますが、異なる点は、inset()のクリッピングでは、各方向の境界を参照して各方向が切り取られることです。

右上-下-左方向でトリミング: 設定値、つまり右上-下-左方向の自動値が 0 になるまで、0 からトリミングを開始します (CSS3)

---- ------------------------------------------- ----- -------------------------------------- ----- ---

position: オブジェクトの位置決めメソッドを取得します。

static: オブジェクトは通常のフローに従います。上、右、下、左などのプロパティは適用されません。

relative: オブジェクトは通常のフローに従い、通常のフロー内の位置に従って上、右、下、左の属性を介してオフセットされる場合、通常のフロー内のどの要素にも影響を与えません。カスケードは、z-index 属性によって定義されます。

absolute: オブジェクトは通常のフローから切り離され、上、右、下、左などの絶対位置の属性を使用します。ボックスのオフセット位置は、通常のフロー内のどの要素にも影響しません。他のマージン、およびそのカスケードは z -index 属性定義を通過します。

修正: オブジェクトが通常のフローから外れ、上、右、下、左などの属性を使用してウィンドウを基準点として配置します。スクロールバーが表示されると、オブジェクトはそれに合わせてスクロールしません。 IE6 以下ではこのパラメーター値はサポートされていません

center: オブジェクトは通常のフローから分離され、ボックスの位置やサイズは上、右、下、左などの属性を使用して指定されます。ボックスは、そのコンテナ内で垂直方向と水平方向の中央に配置されます。ボックスのオフセット位置は通常のフロー内のどの要素にも影響を与えず、そのマージンは他のマージンと一緒に折り畳まれず、それらのカスケードは z-index 属性によって定義されます。 (CSS3)

ページ: ボックスの位置は絶対基準で計算されます。 (CSS3)

------------------------------------------ ------ -------------------------------------------- ------ ----------

マージン

h2{margin:10px 0;}

オブジェクトの 4 辺の拡張マージンを取得または設定します。

4つのパラメータ値をすべて指定すると、上、右、下、左の順に4つの辺に適用されます。

1枚のみご用意の場合は4面全てに使用します。

2つある場合、1つ目は上下用、2つ目は左右用となります。

3つある場合、1つ目は上用、2つ目は左右用、3つ目は下用となります。

インラインオブジェクトは、この属性を使用して左側と右側の外側パッチを設定できます。外側のパッチを上下に設定したい場合は、まずオブジェクトをブロックレベルまたはインラインブロックレベルとして表示する必要があります。

拡張された余白は常に透明です。

一部の隣接するマージンが結合されます。これをマージンの折りたたみと呼びます

--------------------------------- -------------------------------------------------- ----------------------------

aspect-ratio

: 比率

を指定します出力デバイスを定義します。ページの表示領域の幅と高さの比率。

この機能は最小および最大のプレフィックスを受け入れるため、2 つのメディア特徴、min-aspect-ratio と max-aspect-ratio を派生できます。

@メディア画面と (アスペクト比:1680/957){ … }

@import url(example.css) screen and (max-aspect-ratio:20/11);

---------------------- --------------------------------------------------

background:

[background-color ]: オブジェクトの背景色を指定します。

[background-image]: オブジェクトの背景画像を指定します。実際の画像パス、またはグラデーションを使用して作成された「背景画像」にすることができます

[background-repeat ]: オブジェクトの背景画像がどのようにレイアウトされ、塗りつぶされるかを指定します。

[background-attachment]: オブジェクトの背景画像がオブジェクトのコンテンツとともにスクロールするか、固定されるかを指定します。

[background-position ]: オブジェクトの背景画像の位置を指定します。

[background-origin]: オブジェクトの背景画像表示の原点を指定します。

[background-clip]: 指定したオブジェクトの背景画像を外側に切り出す範囲を指定します。

[background-size ]: オブジェクトの背景画像のサイズを指定します。

---------------------------------------------- --- -----------------------

background-attachment 背景画像がオブジェクトのコンテンツとともにスクロールするか、固定されているかを設定または取得します。最初に、background-image 属性を指定する必要があります。

fixed: 背景画像はフォームに対して固定されています。

スクロール: 背景画像は要素に対して固定されています。つまり、背景画像は常に要素自体の後に続くため、要素のコンテンツがスクロールしても背景画像はスクロールしません。ただし、要素の祖先要素またはフォームとともにスクロールします。

ローカル: 背景画像は要素のコンテンツに対して固定されます。つまり、背景画像は常にコンテンツに追従するため、要素が要素とともにスクロールすると、背景画像もスクロールします。 (CSS3)

------------------------------------------ ------ -------------------------------------------- ------ --------------------------------

background-clip 背景クリップを配置する領域を指定します。オブジェクトの背景画像が外側に切り取られます。

padding-box: パディング領域の外側に背景をトリミングします (パディングを除く)。

border-box: 境界領域（境界線を除く）から背景をトリミングします。

content-box: コンテンツ領域から外側に向かって背景をトリミングします。

テキスト: 前景コンテンツ (テキストなど) の形状をトリミング領域として使用して外側をトリミングします。これにより、背景を塗りつぶし色として使用するなどのマスキング効果を実現できます。

---------------------------------------------- --- --------------------------------------------------- --- ---------------

background-repeat: オブジェクトの背景画像のレイアウト方法と塗りつぶし方法を設定または取得します。最初に、background-image 属性を指定する必要があります。

では 2 つのパラメータを指定できます。2 つのパラメータをすべて指定すると、最初のパラメータは横向きに使用され、2 番目のパラメータは縦向きに使用されます。

パラメータが 1 つだけ指定されている場合、それは風景とポートレートに使用されます。特殊な値repeat-xとrepeat-yを除き、repeat-xはrepeat no-repeatと同等、repeat-yはno-repeatrepeatと同等であるため、repeat-xとrepeat-yは同等です。

対応するスクリプト機能は、backgroundRepeat です。

repeat-x: 背景画像は水平方向に並べて表示されます

repeat-y: 背景画像は垂直方向に並べて表示されます

repeat: 背景画像は水平方向と垂直方向に並べて表示されます

no-repeat: 背景画像は並べて表示されません

round: 背景画像はコンテナ全体に収まるまで自動的に拡大縮小されます。 (CSS3)

スペース: 背景画像が同じ間隔でタイル状に並べられ、コンテナ全体または特定の方向を埋めます。 (CSS3

-------------------------------------------- ------ --------------------------------

background-position: 設定または取得するオブジェクトの背景画像の位置、background を最初に指定する必要があります。

4 つ指定する場合は、それぞれの or offset の後にキーワードを指定する必要があります (例: left | center | right | top |bottom)。オフセットは、キーワードの位置を基準としたオフセットです

例: 背景画像をコンテナの右下、右と下から 20 ピクセルの位置に定義するとします

省略形:background:url( test1.jpg) no-repeat right 20pxbottom 20px;