バックエンド プログラマーがフロントエンド (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)

属性値:

none

大文字

小文字

大文字化

h4 {letter-spacing: 20px}

6. テキスト装飾

属性値:

none

underline

overline

line-through

blink

h1 {text-transform: uppercase}

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

【注: inline 要素の場合、direction 属性は Unicode の場合にのみ適用されます。 - bidi 属性は、embed または bidi-override に設定されます。 】

属性値:

ltr

rtl

a {text-decoration: none;}

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

空白属性は、ユーザー エージェントのスペース、改行、ソースドキュメント内のタブと文字の処理。詳細:

valuewhitespace改行自動折り返しpre-linemergekeepallow通常マージ無視許可nowrapマージ無視許可されないpreKeepKeep許可されないpre-wラップ予約済み予約済み許可

			三、字体 1、设置字体系列。（font-family） h1 {font-family: Georgia;} 2、设置字体的尺寸。（font-size） h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;} 3、设置字体风格。（font-style） 属性值： normal : 文本正常显示 italic : 文本斜体显示 oblique : 文本倾斜显示 p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} 4、以小型大写字体或者正常字体显示文本。（font-variant） p {font-variant:small-caps;} 5、设置字体的粗细。（font-weight） p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;} 四、列表 1、将图象设置为列表项标志。（list-style-image） ul li {list-style-image : url(xxx.gif)} 2、设置列表中列表项标志的位置。（list-style-position） 属性值： inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside：默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inherit:规定应该从父元素继承 list-style-position 属性的值。 ul{list-style-position:inside;} 3、设置列表项标志的类型。（list-style-type） ul {list-style-type : square} 五、表格 1、设置是否把表格边框合并为单一的边框。（border-collapse） 属性值： separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit：规定应该从父元素继承 border-collapse 属性的值。 table{border-collapse:collapse;} 2、设置分隔单元格边框的距离。（border-spacing） table{border-spacing:10px 50px;} 3、设置表格标题的位置。（caption-side） 属性值： top：默认值。把表格标题定位在表格之上。 bottom：把表格标题定位在表格之下。 inherit：规定应该从父元素继承 caption-side 属性的值。 caption{caption-side:bottom;} 4、设置是否显示表格中的空单元格。（empty-cells） 属性值： hide：不在空单元格周围绘制边框。 show：在空单元格周围绘制边框。默认。 inherit：规定应该从父元素继承 empty-cells 属性的值。 table{empty-cells:hide;} 5、设置显示单元、行和列的算法。（table-layout） 属性值： automatic：默认。列宽度由单元格内容设定。 fixed：列宽由表格宽度和列宽度设定。 inherit：规定应该从父元素继承 table-layout 属性的值。 table{table-layout:fixed;} 六、轮廓 轮廓（outline）是绘制于元素周围的边框线，可起到突出元素的作用。 CSS outline 属性规定元素轮廓的样式、颜色和宽度。 1、设置轮廓的颜色。（outline-color） p{outline-color:#00ff00;} 2、设置轮廓的样式。（outline-style） 属性值： none：默认。定义无轮廓。 dotted：定义点状的轮廓。 dashed：定义虚线轮廓。 solid：定义实线轮廓。 double：定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove：定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge：定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset：定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset：定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit：规定应该从父元素继承轮廓样式的设置。 p{outline-style:dotted;} 3、设置轮廓的宽度。（outline-width） p{outline-width:5px;}