ホームページ > ウェブフロントエンド > htmlチュートリアル > DIV CSS 境界線のヒント_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 12:31:59
オリジナル
1555 人が閲覧しました

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;

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート