Back-end coders talk about front-end (CSS) Lesson 5: CSS style_html/css_WEB-ITnose

1. Background:

CSS allows to apply a solid color as a background, and also allows the use of background images to create quite complex effects.

1. Background color

You can use the background-color attribute to set the background color for the element. This property accepts any legal color value.

For example:

p {background-color: gray;}

2. Background image

To put the image into the background, you need to use background- image attribute. The default value of the background-image property is none, which means no image is placed on the background. If you need to set a background image, you must set a URL value for this attribute:

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

3. Repeat the background image

if necessary To tile the background image on the page, you can use the background-repeat attribute.

The attribute value repeat causes the image to be tiled both horizontally and vertically, as is usual for background images. repeat-x and repeat-y cause the image to be repeated only in the horizontal or vertical direction respectively, while no-repeat does not allow the image to be tiled in any direction.

By default, the background image will start from the top left corner of an element. Please see the following example:

body

  { 

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

    background-repeat: repeat-y;

  }

4. Background image positioning

You can use the background-position property to change the position of the image in the background.

The following example centers a background image within the body element:

body

  { 

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

    background-repeat:no-repeat;

    background-position:center;

  }

There are many ways to provide a value for the background-position property. First, there are some keywords you can use: top, bottom, left, right, and center. Typically, these keywords will appear in pairs, but that's not always the case. You can also use length values ​​like 100px or 5cm and finally you can use percentage values. Different types of values ​​have slightly different placement of the background image.

5. Background image association

If the document is relatively long, when the document is scrolled down, the background image will also scroll with it. When the document is scrolled beyond the image, the image disappears. You can prevent this scrolling via the background-attachment property. Through this attribute, you can declare that the image is fixed relative to the visual area, so it will not be affected by scrolling:

              <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 text properties can define the appearance of text.

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

1. Indent text (text-indent)

p {text-indent: -5em;}

2. Horizontal alignment (text-align)

h1{text-align:center;}

3. Word-spacing (word-spacing)

p {word-spacing: 30px;}

4. Letter-spacing (letter-spacing)

h4 {letter-spacing: 20px}

5. Character conversion (text-transform)

Attribute value:

none

uppercase

lowercase

capitalize

h1 {text-transform: uppercase}

6. Text Decoration (text-decoration)

Attribute value:

none

underline

overline

line-through

blink

a {text-decoration: none;}

7. Text direction (direction)

[Note: For inline elements, only when the unicode-bidi attribute is set The direction attribute is only applied when it is embed or bidi-override. 】

Attribute value:

ltr

rtl

p {word-direction : rtl;}

8. Process whitespace characters (white-space)

The white-space attribute affects the user agent's handling of spaces, newlines, and tab characters in the source document. Details:

值	空白符	换行符	自动换行
pre-line	合并	保留	允许
normal	合并	忽略	允许
nowrap	合并	忽略	不允许
pre	保留	保留	不允许
pre-wrap	保留	保留	允许

三、字体

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;}