css エッセイ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css エッセイ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:23:08

オリジナル

1004 人が閲覧しました

最近 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

最初の値右に20pxパンの中心背景画像の X 軸は、親コンテナの 20% を右にパンします背景画像は水平方向に左に移動します

2番目の値		値 20px 20px
下に20pxパン		パーセント 20% 20%
背景画像の Y 軸の中心は、親コンテナの 20% を下にパンします		キーワードは左中央
背景画像縦中央		さて、今日はここまで、怠け者なので書きたいことがまだまとまっていませんが、まとまったらみんなにシェアします。