バックエンド プログラマーがフロントエンド (CSS) について語る レッスン 5: CSS style_html/css_WEB-ITnose

1. 背景:

CSS を使用すると、背景として単色を適用したり、背景画像を使用して非常に複雑な効果を作成したりすることもできます。

1. 背景色

background-color 属性を使用して要素の背景色を設定できます。このプロパティは、任意の正当な色の値を受け入れます。

例:

p {background-color: gray;}

2. 背景画像

画像を背景に配置するには、background-image 属性を使用する必要があります。 Background-image プロパティのデフォルト値は none です。これは、背景に画像が配置されないことを意味します。背景画像を設定する必要がある場合は、この属性の URL 値を設定する必要があります:

body {background-image: url(/i/eg_bg_04.gif);}

3. 背景画像の繰り返し

ページ上に背景画像を並べる必要がある場合は、背景を使用できます。 -repeat 属性。

属性値repeatにより、背景画像の場合と同様に、画像が水平方向と垂直方向の両方に並べて表示されます。 repeat-x とrepeat-y を指定すると、画像はそれぞれ水平方向または垂直方向にのみ繰り返されますが、no-repeat を指定すると、画像をどの方向にも並べて表示できなくなります。

デフォルトでは、背景画像は要素の左上隅から始まります。次の例を参照してください:

body

  { 

    background-image: url(/i/eg_bg_03.gif);

    background-repeat: repeat-y;

  }

4. 背景画像の位置

background-position 属性を使用して、背景内の画像の位置を変更できます。

次の例では、body 要素内の背景画像を中央に配置します。

body

  { 

    background-image:url('/i/eg_bg_03.gif');

    background-repeat:no-repeat;

    background-position:center;

  }

background-position プロパティの値を指定するには、さまざまな方法があります。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長さの値を使用することもでき、最後にパーセント値を使用することもできます。値のタイプが異なると、背景画像の配置が若干異なります。

5. 背景画像の関連付け

文書が比較的長い場合、文書を下にスクロールすると、背景画像も一緒にスクロールします。文書が画像を超えてスクロールされると、画像が消えます。このスクロールは、background-attachment プロパティを使用して防ぐことができます。この属性を通じて、画像が視覚領域に対して固定されているため、スクロールの影響を受けないことを宣言できます。

              <p class="sycode">                  <p class="sycode">      body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }     </p>              </p>

2. Text CSS テキスト プロパティは、テキストの外観を定義できます。

通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

1. テキストのインデント

p {text-indent: -5em;}

2. 水平方向の配置 (text-align)

h1{text-align:center;}

3. rree

4. 文字間隔

p {word-spacing: 30px;}

ログイン後にコピー

5. 文字変換 ​​(text-transform)

h4 {letter-spacing: 20px}

6. テキスト装飾

h1 {text-transform: uppercase}

7. テキストの方向 (direct ion)

a {text-decoration: none;}

8. 空白文字 (空白) の処理

h1 {font-family: Georgia;}

h1 {font-size:60px;}

h2 {font-size:40px;}

p {font-size:14px;}

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

p {font-variant:small-caps;}

p.normal {font-weight:normal;}

p.thick {font-weight:bold;}

p.thicker {font-weight:900;}

ul li {list-style-image : url(xxx.gif)}

ul{list-style-position:inside;}

ul {list-style-type : square}

table{border-collapse:collapse;}

table{border-spacing:10px 50px;}

caption{caption-side:bottom;}

table{empty-cells:hide;}

table{table-layout:fixed;}

p{outline-color:#00ff00;}

p{outline-style:dotted;}

p{outline-width:5px;}