一般的な CSS スタイル (1):background_html/css_WEB-ITnose

動画に従ってHTMLとCSS（HTML5とCSS3を除く）をざっくりと覚えた後、体系的に復習してまとめる必要があると感じました。最初の記事では、小さなデモを使用して背景の使用法を要約します。

デモ: Button

デモは次のとおりです (ローカル画像が含まれるため、プレビュー効果に問題があります):
https://jsfiddle.net/ChasonZhang/185mmr99/
効果は次のとおりです:

ボタンソース (Amazon) ボタンスタイル):

上記のボタンスタイルを確認した後、私が考えた解決策は次のとおりです:

最も単純: テキストのない画像を背景スタイルとして直接使用します。このボタンの欠点は、さまざまなボタン幅 (上の図のログイン ボタンや購入ボタンなど) に適していることです。デザイナーは繰り返し描画する必要があり、余分な作業が追加され、再利用性に欠けます。

最も完璧: 描画には CSS を使用します: Linear-gradient と border-radius。欠点は、IE の一部の古いバージョン (特定のバージョンは確認する必要があります。IE8 以下だと思います) と互換性がないことです。境界半径あり。

最も互換性: 画像の使用と CSS 描画を組み合わせます。

3 番目の方法では、background 属性が最大限に活用されます。

背景

次の図は、w3c の背景の属性リストです:

簡単な実験の後、次の結論が導き出されます:

背景画像はデフォルトで元のサイズで塗りつぶされ、塗りつぶしは範囲には、ボックス モデル パディング とコンテンツ エリア

が含まれます。デフォルトでは、背景画像は元の位置 (0, 0) として左上隅に配置され、左から右への順序で繰り返し塗りつぶされます。

塗りつぶし範囲全体まで上から下へ。ただし、互換性を得るには IE9 以降が必要です。

省略形: 背景: カラー画像位置/サイズ 繰り返し原点 クリップ添付 初期|継承; の使用に注意してください

背景にも階層関係があります。

blackground はボックス モデルの幅と高さに影響を与えず、ボックス モデルのコンテンツには属しません。フローティングとクリアフローティングに関する以前の一連の記事で説明したように、ブロック要素は行全体を占め、高さはコンテンツによってサポートされます。つまり、div に数行のテキストを入力すると、div はそのままの高さになりますが、div が空の場合 (背景画像以外に他のテキストやコンテンツがない場合)、背景画像は高くなりません。表示されない。初心者が陥りがちな落とし穴として、純粋な背景画像を挿入するにはブロックレベル要素の幅と高さを設定する必要があることに注意する必要があります。ただし、img 要素を div 内に挿入すると、レンダリングはまったく同じであっても、まったく異なります。

上記は背景の基礎知識をまとめたもので、初心者としてはこのレベルまで習得すれば基本的に資格があると考えられます。

スタイルの説明: スタイリング

スタイルコードは次のとおりです:

<style type="text/css">body { margin: 0;}.btn { margin: 20px auto; width: 135px; height: 31px;    background-image: url(img/btn.jpg);    background-repeat: repeat-x;}.btnL {    height: 31px;    background-image: url(img/btnL.jpg);    background-repeat: no-repeat;}.btnR {    height: 31px;    background-image: url(img/btnR.jpg);    background-repeat: no-repeat;    background-position: right;    line-height: 31px;    text-align: center;    font-size: 14px;}</style>

スタイル全体のアイデアは次のとおりです:

ボタンをテキストと背景の 2 つの部分に分割します。 HTMLではテキストがコンテンツに属し、CSSの主なデザインはスタイルです。

背景を3つの部分に分割し、左右に2つの角が丸い小さな長方形が2つと、中央に横長の長方形が1つあります。

引き続き中央部分を垂直に切り取り、幅 1 ピクセルの長方形に切り取り、必要な数の 1 ピクセルの長方形を使用します。簡単な例えで言うと、まず微分してから積分します。

この例では、background 属性を使用する場合、すべてのブロックレベル要素の幅の設定に注意する必要があります。幅は .btn で 1 回だけ設定する必要があります。

レイアウトの説明: コーディング

コードは次のとおりで、基本的な 3 層のネストされたレイアウトです。

そうですか

理由を知ってください

このレイアウトを構築するとき、理解する必要がある質問があります: なぜ .btnR を .btnL の中に配置する必要があるのですか?
.btnの中に.btnLが入っているのは分かりますが、.btnLと.btnRは並列関係にないのでしょうか？ .btnR が .btnL 内に配置されずに並置されていると仮定すると、ボタンの背景の両側に丸い角の位置がずれてしまう影響が生じます。その理由は、2 つのブロックレベルの要素が幅と高さを持ち、占有しているためです。それぞれ1行ずつ。

概要

CSS3 の開発により、この小さなデモは現在同様のスタイルを解決する最良の方法ではありませんが、**CSS スライディング ドア** の原理が含まれています (ここ数年で非常に人気のある方法です。参照) Chuanzhi Podcast のナビゲーション バーに移動します)。もちろん、ここでは主に背景の使用法を要約するために、この小さなデモを例として取り上げます。