DIV CSS 境界線のヒント_html/css_WEB-ITnose

DIV CSS 境界線スキル
オブジェクトの上下左右の境界線を同じスタイルに設定すると、上下の属性と対応する値を書き出さずに省略できます。 、左、右にそれぞれ。
例、上下左右の境界線を幅1px、実線、黒枠に設定します。 CSSコードは以下の通りです:
border:1px Solid #000;

DIV CSSの完成例:
インスタンスコンテンツ設定CSS CSSに名前を付けますyangshi のセレクターで、属性セレクターのスタイルは、幅 1 ピクセル、幅 200 ピクセル、高さ 50 ピクセルの黒い実線の境界線を持つ長方形です。
CSS コード:

div,body{ border:0; margin:5px; padding:0;}/* Web ページのスタイルを初期化します*/

.yangshi{ border:1px Solid width:200px; 50px ;}/* オブジェクト スタイルを設定*/

HTML 内の対応する DIV コード:

divcss5 example-CSS border example

www.divcss5。 com CSS の例

上の図は、CSS 境界線の例のメイン コード スニペットのスクリーンショットです

注: 上記のコードは、表示効果に対応しています。実線はDWソフトが自動的にDIVボックス領域に追加するため、実際のブラウジングではこのような点線は表示されませんのでご了承ください。

3辺にボーダーがあるのに、1辺に設定スキルがありません

例えば、左右の下にボーダーがあり、スタイルは黒の1PX幅の実線ボーダーですが、上部にはボーダーがありません。
CSS コード: border:1px Solid #000; border-top:none;
border:1px Solid #000; の順序を入れ替えることはできないことに注意してください。 CSS の読み取りには上から下、左から右に読み取る原則があるため、最初に境界線スタイル全体を設定してから、上部の境界線を「なし」に宣言すること、つまり、これで必要なスタイルを実現することは意味がありません。実例。これにより、下、左、右の設定を個別に設定する必要がなくなり、ある程度のコード量が節約されます。

CSS ボーダーを要約すると、オブジェクトに CSS スタイルを設定するために使用される一般的な属性コードは次のとおりです: border:1px Solid #000;