この章のメイン機能 CSS
前章で宣言・適用方法といくつかの機能を紹介した後、この章から正式にCSSコマンドの紹介に入ります！この章には 2 つの導入トピックがあります。最初の部分では、要素の前景色、背景色、背景グラフィックなどのスタイル設定のプロパティを設定することが主な機能です。色と背景の CSS プロパティについての紹介の一部は、配置された要素の位置を制御するために使用される CSS 命令です。
背景色 CSS コマンド
color 前景色を設定します サポート: IE3、IE4、NC4 適用可能: すべての要素 可能な値: 色の設定については、第 1 章の色の説明を参照してください。 use デフォルト: ブラウザに依存します 継承: はい 一般的な例: SPAN { color : BLUE } 同軸の例: background-color 背景色のサポートを設定します: IE4、NC4 適用可能: すべての要素 可能な値: 色を設定するには、第 1 章の色の使用に関する関連手順を参照してください。 親要素 (色またはパターン) の背景を透明にします。 デフォルト値: 透明 継承: なし 一般的な例: BODY { background-color : BLUE } 同軸の例: background-image 背景グラフィックの設定 サポート: IE4、NC4 適用可能: すべての要素 可能な値: 画像の URL を設定するには、第 1 章の URL 表現に関する関連手順を参照してください。 none 背景パターンを使用しないでください。 デフォルト値: 透明 継承: なし 一般的な例: BODY { background-image : URL("http://yourweb /path/file_name") }同軸の例: background-repeat バックグラウンド リピート サポートの設定: IE4、NC4 適用対象: すべての要素 可能な値: repeat ページ全体に背景グラフィックを繰り返しますrepeat-x 水平方向に背景グラフィックを繰り返しますrepeat-y 垂直方向に背景グラフィックを繰り返します no-repeat 背景グラフィックを繰り返し表示しませんデフォルト値:repeat継承:なし一般的な例: BODY { background-repeat :repeat-x } 同軸の例: background-attachment 背景アタッチメントのサポートの設定:IE4、NC4 適用可能:すべての要素 可能な値:scroll背景グラフィックはスクロールを固定してスクロールします 背景グラフィックはスクロール (ウォーターマーク) とともにスクロールします デフォルト値: スクロール 継承: なし 一般的な例: BODY {background-attachment : fixed } 同軸の例: background-position 背景の位置を設定します。 サポート: IE4、NC4 適用可能: ブロック要素 可能な値: % Position 値: 0% 0% 継承: なし 一般的な例: BODY {background-position : 100% 50% } 同軸の例: background 背景の包括的な設定 プロパティのサポート: IE3、IE4、NC4 適用可能: すべての要素 可能な値: background-color 背景色の背景を設定します。 -image 背景画像を設定します。background-repeat 背景のリピートを設定します。background-attachment 背景の添付ファイルを設定します。background-position 背景の位置を設定します。デフォルト: なし継承: なし一般的な例: BODY {BLUE url(image/gif)repeat-xfixedcenter } 同軸の例:
位置配置コマンド
float フローティング プロパティを設定します (テキストが画像の周りを回り込む場合に主に使用されます) サポート: IE4、NC4 適用対象: ブロック要素またはグラフィックス 可能な値: 左の要素を左に、右の要素を右に囲むテキスト、右の要素を左に囲むテキストnone または デフォルト値を表示するデフォルトのメソッド: none 継承: none 一般的な例: DIV { float : right } 同軸の例:
clear クリア プロパティを設定します (フローティングの存在を許可するかどうかを設定します)要素) サポート: IE4 適用可能: ブロック要素またはグラフィックス 可能な値: 両方 両側に浮動要素がある場合、要素は左側の浮動要素の下に移動します 左側に浮動要素がある場合、要素は移動します浮動要素の右下 右側に浮動要素がある場合 浮動要素がある場合、要素は浮動要素の下に移動します。 none デフォルトメソッドのデフォルト値を表示します: none 継承: none 一般的な例: DIV { clear : right } 同軸の例:
width 幅のサポートの設定: IE4、NC4 適用対象: ブロック要素またはグラフィックス 可能な値:
長さの単位。関連する手順を参照してください。第 1 章の基本単位について 親要素の幅に基づくパーセンテージ ベースラインは固定比率で自動的にサイズを変更します デフォルト値: auto 継承: なし 一般的な例: DIV { width: 300pt } 同軸の例: < DIV style="width:300pt">height 高さのサポートの設定: IE4、NC4 は次の対象に適用されます: 可能な値: 長さの単位。第 1 章の基本単位の関連手順を参照してください。 パーセンテージは、親要素の幅に基づいて、固定比率で自動的にサイズを変更します。 デフォルト値 :auto 継承: なし 一般的な例: DIV { height : 300pt } 同軸の例: position 位置の設定 サポート: IE4、NC4 適用: ブロック要素 可能な値: 絶対値 親要素に基づいて、相対的に特定の位置に配置されます。 隣接する要素に基づいて、特定の位置に配置されます. static。デフォルトの位置は、ソース コード内の要素の位置に基づきます。 デフォルト値: 絶対値 継承: なし 一般的な例: DIV {position : static } 同軸の例:
top 先頭位置を設定します サポート: IE4、NC4 適用可能: ブロック要素 可能な値:
長さの単位、基本単位の説明を参照してください 親要素の幅に基づいてパーセンテージが自動的に表示されます。通常のデフォルト値: 自動継承: なし 一般的な例: DIV { top : 30pt } 同軸の例: left 左端位置の設定サポート: IE4、NC4 適用: ブロック要素可能な値:
長さの単位。第 1 章の基本単位の関連説明を参照してください。 親要素の幅は auto に基づいており、デフォルト値は通常の方法で表示されます。 : auto 継承: なし 一般的な例: DIV { left : 30pt } 同軸の例: clip クリッピングの設定 (特定の領域の形状とサイズを決定し、領域の外側を透明に設定) ：IE4、NC4 適用：ブロック要素 取り得る値：rect（上、右、下、左） 長方形の上下左右の長さを設定すると自動的に比較されます 辺の長さは一般的にrectと書きます(0, length, length, 0) であり、rect(0, 0, length, length) のように記述することはできません。通常の方法でデフォルト値を表示するには、auto の代わりに「auto」を使用できます。自動継承。 : なし 一般的な例: DIV { Clip : rect(0,100px,50px,0) } 同軸の例:
overflow オーバーフロー処理の設定 ( 表示を制御要素のコンテンツが要素のサイズを超えた場合のメソッド) サポート対象: IE4 適用可能: ブロック要素 可能な値: 表示されている要素は設定されたサイズに従って表示されませんが、要素の設定されたサイズを超える非表示のコンテンツはすべて表示されます。表示されているコピーは非表示になり、表示されません。 スクロール 必要に応じて、ユーザーがすべてのコンテンツを確認できるようにスクロールが表示されます。 auto デフォルトの方法で表示します。 デフォルト値: auto 継承: なし 一般的な例: DIV { overflow:scroll } 同軸例 ：
visibility 可視性の設定 サポート: IE4、NC4 適用: すべての要素 可能な値:visible 要素を表示するように設定します hidden 要素を表示しないように設定しますが、スペースを占有します継承親要素の可視性に基づいてデフォルト値を決定します: 継承の継承: なし 一般的な例: DIV { Visibility : hidden } 同軸の例:
z-index Z 軸パラメータを設定します(3次元空間) サポート: IE4、NC4 適用: ブロック要素 可能な値:
10進数値、大きな値を持つ要素は小さな値を持つ要素の上に表示されます auto 要素の位置が繰り返されると、元の値が表示されますコードは次の要素の上に記述されます。 デフォルト値: auto 継承: なし 一般的な例: DIV { z-index : 3 } 同軸の例: 上記は第 4 章の背景色の CSS の内容です。その他の関連内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。
声明： この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
