ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS 構文マニュアル (3) テキストの塗りつぶし、境界線、境界線、および位置のプロパティ (1)
1. ボックスのパディングプロパティ
1.padding-bottom
padding-left
padding-top
padding-right
機能: これらのプロパティは、ボックス内の境界線と要素の間の距離を設定します。
値:
長さ - 相対値または絶対値を設定します。数値の後に測定単位を mm、cm、in、pt、px、pc、ex、em のように指定します。 em および ex 設定は、親フォントを基準にしてフォント サイズを生成します。
パーセント - 境界線を親要素のパーセントとして設定します。
注: 塗りつぶし値には負の値を使用できませんが、小数は使用できます。
例
2. パディング
機能: 境界線とコンテンツ要素の間の上下左右の方向の間隔を設定するために使用される省略形の属性です。
値: 以前と同じ。
注: 両側を均等に埋めるには 1 つの値を使用します。2 つの値を使用する場合は、最初の値が上下の塗りつぶしに使用され、3 つの値を使用する場合は 2 番目の値が左右の塗りつぶしに使用されます。上部の詰め物、左右のパディング、下部のパディングに割り当てられます。4 つの値が使用される場合、それらはそれぞれ上部、右側、下部、左側のパディングに使用されます。数値型は混合できます。
例
2. ボックスの境界属性
1. border-top
border-bottom
border-right
border-left
機能: これらの 4 つの属性は、それぞれ、set up、down の短縮属性です。および左境界線のプロパティ。デフォルトでは、境界線にはスタイルが設定されていません。
値: 3 つのボーダー属性があります。
border-width: 値は、thin、medium、thick、または指定された長さです。
border-style: 境界線の装飾に使用されるシェーディングを設定します。設定できるスタイルは、なし、点線、点線、実線、二重、溝、尾根、インセット、アウトセットです。
border-color: 境界線の色を設定します。
例
2. border-top-width
border-bottom-width
border-right=width
border-left-width
機能: 各ボーダーの太さを個別に設定します。
値:
thin - 細い境界線。
中 - 中程度の線幅。
太い - 太い線。
長さ - 境界線の幅を相対単位または絶対単位で設定します。
例
3. border-width
機能: 4つのボーダーの幅を同時に設定できる省略属性。
値:
thin - 細い境界線。
medium - 中程度の線幅。
太い - 太い線。
長さ - 境界線の幅を相対または絶対単位で設定します。
手順: パディングの手順を参照してください。
例:
4. border-color
機能: 略語属性、4 つの境界線の色の値を設定します。
値: 色の名前または RGB 値を使用できます。 1 つの色を指定した場合は、4 つの境界線すべてがその色で表示されます。2 つの色を指定した場合、順序は上、下、左、右になります。 4 色を指定した場合は、上、右、下、左の順になります。
説明: 色の名前は次のとおりです
アクア、ブラック、ブルー、フクシア、グレー、グリーン、ライム、マルーン、ネイビー、オリーブ、パープル、レッド、シルバー、ティール、ホワイト、イエロー。
RGB 値には 3 つあります。指定するメソッド
#rrggbb; rgb(r%,g%,b%)
例:
値:
none - 境界線を表示しません、デフォルト値
dotted - 点線
dashed - 点線
solid - 実線
double - 二重線
groove - 3D インセットライン
ridge - 3D リッジライン
inset -有効にする ページに沈み込み感を与えます
outset - ページに浮遊感を与えます
注: すべてのブラウザーがリッジ、インセット、オフセットなどのスタイルを表示できるわけではありません。一部のブラウザーでは、すべての境界線が実線で描画されます。
値:
border-width - 値は、thin、medium、thick、または指定された長さです。
border-style - 値はなし、点線、破線、実線、二重、溝、尾根、インセット、アウトセット
border-color - 使用可能な色の名前または RGB 値。
注: 他の省略された属性とは異なり、この属性はボックスのすべての側面に均等に作用する値を 1 つだけ取ります。
例: