DIV共通属性コレクション

1. 物件リスト

コードをコピー

コードは次のとおりです。

色: #999999 テキスト色
フォントファミリー: Songti フォント
フォントサイズ: 10pt のテキストサイズ
フォントスタイル: イタリック体テキスト斜体
font-variant:small-caps 小さいフォント
文字間隔: 1pt
line-height : 200% 行の高さを設定する
font-weight:bold テキスト太字
垂直方向の配置:sub 下付き文字
垂直位置合わせ:上付き文字
text-decoration:line-through 行を削除するには?hを追加します
テキスト装飾:オーバーライン
text-decoration:underline 下線を追加する
text-decoration:none ?h 下線を除く
テキスト変換: 大文字にする
テキスト変換: 英語の大文字化
テキスト変換: 小文字の英語表記
text-align:right テキスト*右揃え
text-align:left テキスト*左揃え
text-align:center テキストは中央に配置されます。これらは、CSS ページに適用できるいくつかのシンプルなテキスト効果です。
背景
背景色:黒の背景色
background-image : url(image/bg.gif) 背景画像
background-attachment : 固定された固定背景
background-repeat: repeat 繰り返し配置 - ウェブページプリセット
background-repeat : no-repeat 繰り返しません
background-repeat : repeat-xはx軸上で繰り返します
background-repeat : repeat-y はy軸上で繰り返します
background-position : 90% 90% 背景画像のxとyの位置はリンクされています
A すべてのハイパーリンク
A:link ハイパーリンクテキスト形式
A: 訪問したリンクのテキスト形式
A:アクティブ接続されたフォーマットを押す
A:接続境界にマウスを移動します
border-top : 1px の黒一色の上部フレーム
border-bottom : 1px 実線 #6699cc 下境界線
border-left : 1px 実線 #6699cc 左ボーダー
border-right : 1px 実線 #6699cc 右境界線
境界線: 1px 実線 #6699cc 4 本の破線境界線
<TEXTAREA STYLE="border:1px 破線ピンク">
実線
<TEXTAREA STYLE="border:1px solid pink">
div の高さをテキストの行の高さと同じに設定し、つまり line-height と height の値が同じになるようにし、最後に div に overflow: hidden を指定して余分な部分を非表示にします。

2. 共通の属性

コードをコピー

コードは次のとおりです。

1. 高さ: DIV の高さを設定します。幅: DIV の幅を設定します。
2. マージン: DIV の外側の余白、つまり親コンテナーまでの距離を設定するために使用されます。マージン: 親コンテナの上、右、下、左までの距離の 4 つの距離が続きます。マージン: [上][右][下][左]
これらは個別に設定できます: margin-left: 親コンテナの左境界までの距離、margin-right: 親コンテナの右境界までの距離、margin-top: 親コンテナの上境界までの距離、margin-bottom: 親コンテナの下境界までの距離。
3. パディング: DIV の内側の余白 (子要素と DIV の境界線の間の距離など) を設定するために使用されます。 padding: の後には、親コンテナーの上、右、下、左までの距離の 4 つの距離が続きます。margin: [top][right][bottom][left]: padding で設定された距離は、DIV 自体の幅と高さには含まれないことに注意してください (IE7 および FF)。たとえば、DIV の幅が 100 ピクセルに設定され、padding-left が 50 ピクセルに設定されている場合、DIV はページ上で 150 ピクセルの幅で表示されます。
4. border: DIV の境界線スタイルを設定します。display: 表示プロパティを設定します。値には、block と none が含まれます。float: ページ上の DIV のフロー方向を設定します。値には、left (左側に表示)、right (右側に表示)、none が含まれます。
background: DIV の背景スタイルを設定します。背景の後に、背景色、背景画像、タイリング方法、その他のスタイルを直接指定できます。次のプロパティを使用して個別に設定することもできます。
background-color: 背景色を設定します。background-attachment: 背景画像を添付する方法。その値はスクロールと固定です。background-image: 使用する背景画像を指定します。background-repeat: 背景画像を並べる方法。値には、no-repeat（タイリングなし）、repeat（両方向にタイリング）、repeat-x（水平方向にタイリング）、repeat-y（垂直方向にタイリング）が含まれます。background-position: DIV 内の背景の位置を特定します。その値は、上、下、左、右のさまざまな組み合わせにすることができます。座標を使用して特定の場所を指定することもできます。
5. 位置: DIV の配置方法を設定します。位置のプロパティには、静的、固定、相対、絶対が含まれます。相対と絶対がよく使用されます。 static が指定された場合、DIV は HTML ルールに従います。relative が指定された場合、top、left、right、bottom を使用してページ内の DIV のオフセットを設定できます (DIV 自身のオフセットを基準として)。ただし、この時点ではレイヤーは使用できません。absolute が指定された場合、top、left、right、bottom を使用して DIV を絶対的に配置できます (最も近い親要素を基準として)。fixed が指定された場合、DIV の位置は IE7 および FF の画面を基準として固定され、IE6 では効果がありません (何らかの理由で)。
6. font: DIV 内のテキストのスタイルを指定します。複数のテキストスタイルを続けることができます。 font-family: 使用するフォントの名前を設定します。font-weight: テキストの太さを指定します。その値には、bold、bolder、lighter などがあります。font-size: テキストのサイズを指定します。font-style: テキストスタイルを指定します。その値には、italic、normal、oblique などがあります。color: テキストの色を指定します。text-align: テキストの水平方向の配置を指定します。その値には、center、left、right、justify などがあります。text-decorator: テキストの装飾に使用されます。その値には、none、underline、overline、line-through、blink の組み合わせが含まれます。text-indent: テキストのインデントを設定します。text-transform: テキストの大文字と小文字を設定します。値は、小文字、大文字、大文字化（最初の文字が大文字）、なし、方向：コンテンツフローの方向です。値には、ltr（左から右）とrtl（右から左）が含まれます。line-height: テキストの行の高さを指定します。word-spacing: 単語間隔。
7. overflow: コンテンツのオーバーフロー制御。その値には、scroll (常にスクロールバーを表示)、visible (スクロールバーはないが、超過部分は表示される)、auto (コンテンツが超過するとスクロールバーが表示される)、hidden (超過するとコンテンツを非表示にする) が含まれます。

3. いくつかの特殊効果:

1. z-index: DIVの積み重ね順序を設定します。 z-index プロパティを使用する場合、位置は絶対として指定する必要があります。

2. カーソル: DIV のカーソルスタイルを設定します。

3. クリップ: クリッピング矩形を設定します。 clip:rect(top right bottom left); は上辺、下辺、左辺、右辺間の距離を設定しますが、このとき位置は絶対で指定する必要があります。

4. 不透明度 filter:alpha(不透明度=値) 例: filter:alpha(不透明度=50);opacity:0.5;

4. 位置決めと制御

絶対位置と相対位置

絶対位置決め:

ポジショニング属性は、ネットユーザーが幸福への扉を開く鍵となるでしょう。

H4 { 位置: 絶対; 左: 100px; 上: 43px }

この CSS ルールは、ブラウザーの左側から正確に 100 ピクセル、上から 43 ピクセルの位置で <H4> 要素を開始するようにブラウザーに指示します。ここでの設定は左と上のみであることに注意してください。つまり、テキストはブラウザウィンドウに左から右、上から下に読み込まれます。

left および top プロパティは非常に直感的です。left (左) はブラウザウィンドウの左側からの要素の距離を設定し、top (上) はブラウザウィンドウの上部からの距離を設定します。これらの距離を設定するときは、学習したさまざまな度単位や比率の値を使用できます。比例値を使用する場合、比例値は親要素のサイズを基準とします。

何をターゲットにできますか?何でも！段落、単語、GIF および JPEG 画像、QUICKTIME ムービーなど。

相対的な位置:

絶対配置を使用すると、ページ上の他の要素の配置設定に関係なく、ページ上の独立した場所に要素を正確に配置できます。相対配置とは、配置する要素の位置がドキュメント内で割り当てられた位置を基準にしていることを意味します。例：

I { 位置: 相対; 左: 40px; 上: 10px }

相対的な配置の鍵は、配置された要素の位置が、通常の位置に対して相対的であることです。相対配置要素は通常の静的配置要素の行の間に表示され、配置時に静的配置要素から完全に分離されません。相対配置の使用を停止すると、テキストは通常の表示位置に戻ります。相対的な配置を使用する場合は注意してください。そうしないと、ページが非常に乱雑になりやすくなります。

相対および絶対配置に加えて、静的パラメータ値も使用できます。 Static は位置プロパティのデフォルト値です。使い方は通常の HTML での配置方法と同じで、特別な配置設定を追加することはできません。つまり、セルの配置は、マージンプロパティや float プロパティを使用したセルのフローティングによって影響を受けることはありません。

位置決めユニットの制御（幅、高さ、視認性）

配置単位の左上隅の位置を制御するだけでなく、単位の幅と高さ、およびページ上の単位の可視性も制御できます。

幅: 配置された要素は、ページ上で左から右に表示されます。 width 属性を使用すると、文字の右方向のフローの制限、つまり要素の幅を設定できます。

DIV { 位置: 絶対; 左: 200px; 上: 40px; 幅: 150px }

ブラウザはこのルールを受信すると、ルールで指定されたとおりにテキストを表示し、段落の最大水平サイズを 150 ピクセルに制限します。

width 属性は絶対配置された要素にのみ適用されます。これまでに学習した長さの単位のいずれかを使用することも、親要素に対する比率である比例値を使用して幅を設定することもできます。 IE 4 では、このプロパティは画像にも適用されます。幅の設定を使用して、画像を人工的に拡大または縮小することができます。

高さ: 理論的には、高さは幅と同様に垂直方向に設定する必要があります。

DIV { 位置: 絶対; 左: 200px; 上: 40px; 高さ: 150px }

一部のブラウザでは height 属性がサポートされていないため、ここで「理論上」と使用しました。

可視性: CSS を使用すると、要素を非表示にして、ページ上で見えなくすることができます。このプロパティは、配置済みのフィーチャと配置されていないフィーチャの両方に適用されます。

H4 { 可視性: 非表示 }

オプション:

visible は要素を可視にします

hidden は要素を非表示にします

inherit は、親要素の可視性設定を継承することを意味します。

値は inherit がデフォルトです。これにより、セルは親セルの可視性を継承します。したがって、段落が非表示になっている場合、その段落に含まれるインラインセルもすべて非表示になります。この継承は、可視性を明示的に指定することで上書きできます。たとえば、段落内の EM 単位が表示として指定され、段落が非表示になっている場合、段落内の他のすべてのコンテンツは消え、EM 単位内のテキストのみが表示されます。

要素が非表示になっている場合でも、ブラウザウィンドウ内の元のスペースは占有されます。したがって、非表示の画像の周囲にテキストを折り返すと、テキストが空白領域を囲むように表示されます。このニュース

この属性は、言語を記述し、動的 HTML を使用する場合に役立ちます。たとえば、マウスをその上に移動したときにのみ段落または画像が表示されるようにすることができます。

セル階層 (Z インデックス)

z-index プロパティは、画面上で要素を積み重ねるために使用されます。デフォルトでは、セルは HTML タグ内に表示される順序で積み重ねられます。つまり、後から表示されるセルが、前に表示されるセルの上に積み重ねられます。 z-index プロパティは、実際には兄弟セルの積み重ね順序と、親セルに対するセルの積み重ねを定義します。ドラフト仕様によれば、正の z-index 値を持つセルのグループは親セルの上に積み重ねられ、その積み重ね順序は値の大きさによって決まります (値の大きいセルが上になります)。同様に、負の z インデックス値を持つセルのグループは親セルの下に積み重ねられ、その積み重ね順序は値のサイズによって決まります (値が大きいセルが上にあり、たとえば、値が -1 のセルは値が -2 のセルよりも上にあります)。

このパラメータ値には純粋な整数が使用されます。 z-index は絶対位置または相対位置の要素に使用されます。画像の Z インデックスを設定することもできます。 (Communicator の場合、<IMG> タグを <SPAN> または <DIV> タグ内にラップし、<SPAN> または <DIV> に z-index を適用する方が適切です。)

クリップ絶対位置決めユニット（クリップ）

絶対位置に配置されたセルはクリップできます。つまり、ユーザーに表示される領域がクリップされ、セルの一部のみが表示され、残りの部分は透明になります。従来のテキストと画像ベースの Web ページの場合、これはあまり便利な機能ではありません。ただし、マルチメディアページが必要な場合は便利です。たとえば、Netscape Communivator 4 と Internet Explorer 4 はどちらもマルチメディアページをサポートしています。これらは、ドキュメントのスクリプトインターフェイスを通じてユニットの周囲のクリッピング領域を動的に調整し、実線テキストの「スクラッチイン」やイメージのフェードなどの表示機能を有効にします。

CSS では、クリッピングは clip プロパティによって制御されます。このプロパティは絶対配置された要素にのみ使用できます。デフォルト値は auto で、要素を外側のエッジに従ってクリッピングします (実質的にはクリッピングなしと同じです)。また、クリッピングフレームは次の式で設定できます。

クリップ: rect(上、右、下、左);

このうち、上、右、下、左は、クリップされた単位の左上隅を基準とした長方形のクリッピングボックスの上、右、下、左の位置です。 top、right、bottom、left の値には、任意の絶対または相対的な長さの値 (パーセンテージ値は不可)、またはキーワード auto を指定できます。値が auto の場合、クリッピング領域の端が配置されると、クリッピングされた単位内のコンテンツはこの領域を超えて拡張されません。

制御ユニットオーバーフロー

絶対または相対配置単位の幅と高さを固定すると、指定された領域が単位の実際のコンテンツのニーズを満たすことができないため、単位コンテンツがオーバーフローする可能性があります。オーバーフローを使用して、ブラウザがオーバーフローを処理する方法を指定できます。値 none (デフォルト) を指定すると、ブラウザはオーバーフローしたコンテンツを表示できるため、ユニットは指定された領域からオーバーフローできます。値クリップでは、指定された領域を超えるセルコンテンツが表示されないように、ブラウザーでセルの下部と右側のセルコンテンツをクリップする必要があります。また、値 scroll は、ブラウザにセルの内容をセルの下部と右側にクリップするように指示します (clip と同じ)。ただし、ブラウザは (可能であれば) セルにスクロールバーを提供し、ユーザーがスクロールしてクリップされたコンテンツを表示できるようにする必要があります。

<<: Three.js が Facebook Metaverse 3D ダイナミックロゴ効果を実現

>>: Cronジョブを使用してCpanelでPHPを定期的に実行する方法