ホームページ > 記事 > ウェブフロントエンド > css エッセイ_html/css_WEB-ITnose
css エッセイ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:23:081008ブラウズ
最近 Miaowei の動画を見ていますが、とても面白いと思います。私の習慣は、授業を聞いた後に自分から連絡を取り、知識のポイントを整理することです。今日書きたいのは主に、比較的基本的な内容であるcssに関する整理メモです。
超簡単なコードから始めましょう
<html> <head></head> <body> <div id="dv"></div> </body></html>
これを HTML で書くと、実際にはページには何も表示されませんが、幅と高さがないので、それもありません。大きさなので見えません。では、どうすれば彼にそれを見せられるでしょうか? まず、この div に基本的なスタイルの幅と高さを追加します。CSS では、長さを設定する方法が 4 つあります:
- ピクセル単位
- mm 実長単位、ミリメートル
- em 現在のオブジェクト内のテキストのフォント サイズに対する相対的な長さの単位
- パーセンテージ、親コンテナのパーセンテージ
#dv { width: 100px; height: 100px; }レンダリングを見てみましょう:
何も見えない画像
Web ページには変更がないようですが、サイズがありませんか?でも、実際にはそこにあるのですが、目には見えないだけです。背景が白でdivも白なので違いはありません。落ち葉の山の中に隠れているカメレオンを想像してみてください。はい、それが起こりました。
それでは、境界線を付けてみましょう。どのように境界線を付けるべきでしょうか? 「さあ、境界線」と言うだけでは表示されません。この div にスタイルを与えてみましょう
#dv { border:1px solid #0094ff; } この div が表示されます
境界線のある div
実際には、上記のとおりです。境界線のスタイルは、次の 3 つのスタイルで構成される複合スタイルです。
border-widht : 1px;border-style: solid;border-color:#0094ff;
上の境界線だけを設定したい場合は、どうすればよいでしょうか?
border-top:1px solid #0094ff;
上の境界線のみを含む div
上の境界線のみを設定したため、他の境界線は表示されなくなります。他の 3 つの境界線が必要な場合はどうすればよいでしょうか。
#dv { border:1px solid #0094ff; border-top:none;} この場合、上部の境界線を非表示にします。その効果は次のとおりです:
上部の境界線のない div
つまり、境界線のみを持つ div は寂しいので、次のことも必要です。明るい悲しい背景を追加してください。 色を追加してください。OK、彼に大きな赤い色を与えてください。何ということでしょう! ！色を設定するには 3 つの方法があります
- 赤、青、緑などの色のキーワードは、リテラルの色に対応します
- #ff22ff などの 16 進表記
- RGB メソッドを使用して設定します、rgb (14,140,239)
ここで、div の背景色を設定し、div にbackground-color:red styleを与えます
background-color: red;
軽く悲しい写真
悲しみに関しては、分かった、私はしたくない背景色 さて、背景画像を作成しましょう。背景画像を追加する方法は URL (画像パス) です。それでは、美しい女の子の写真を背景画像として追加しましょう。
美しい写真に同意しました。よし、仕事に戻りましょう。本当は一枚だけ表示したいのですが、この背景画像が何度も繰り返し表示されるのはなぜでしょうか？背景画像にはデフォルトのスタイル (background:repeat) があるため、つまり、背景画像はデフォルトで x 軸に沿って並べて表示されるため、x 軸に沿ってのみ並べて表示されるようにスタイルを変更しようとします。それとも Y 軸に沿って並べて表示するだけですか、それとも 1 つの画像を表示するだけですか?
background-img:url(img/icon-email.gif);この背景画像をタイルなし、つまり
background-repeat:no-repeat; //不平铺background-repeat:repeat-x; //沿着x轴平铺background-repeat:repeat-y; //沿着y轴平铺に設定します。 表示効果は次のとおりです:
封筒の画像のみがあります
次に、背景の位置を調整します画像の背景画像の位置が渡されます。background-position プロパティによって設定される
background-img: url(img/icon-email.gif);background-repeat:no-repeat;効果は次のとおりです:
背景画像の位置を調整します
最初の 20px は、背景画像が 20 移動されることを意味しますピクセルを右に移動し、2 番目のピクセルを下に 20 ピクセル移動します。もちろん、パーセンテージを設定することも、左、中央、右などを直接使用することもできます。以下に、背景の位置を示すテーブルを作成します。
background-position
| 2番目の値 | 値 20px 20px | |
|---|---|---|
| 下に20pxパン | パーセント 20% 20% | |
| 背景画像の Y 軸の中心は、親コンテナの 20% を下にパンします | キーワードは左中央 | |
| 背景画像縦中央 | さて、今日はここまで、怠け者なので書きたいことがまだまとまっていませんが、まとまったらみんなにシェアします。 |