网页设计之CSS实战(3) --- 样式（背景、文本属性、字体、链接、列表、表格、元素边框）

一、背景

1、背景色

p {background-color: gray;}

2、背景图像

body {background-image: url(bg-img.gif);}

p.flower {background-image: url(bg-flower.gif);}

(1)背景图的拼接方式

背景图的尺寸比元素的尺寸小的时候，需要指定背景图的拼接方式，即background-repeat 属性。
background-repeat：no-repeat，只显示一个图
background-repeat：repeat-x ，横向显示多个
background-repeat：repeat-y，纵向显示多个

body
  { 
    background-image:url('bf.gif');
    background-repeat:repeat-x;
  }

(2)背景图的位置

background-position 属性改变图像在背景中的位置。
background-position 属性的关键字：top、bottom、left、right 和 center。
百分数值的表示法：background-position x% y%
表示在横向纵向位置的百分比。横向0%表示靠右，横向50%表示居中。

(3)背景图的偏移量（长度值）

background-position：?px, ?px
长度值是元素内边距区左上角的偏移。偏移点是图像的左上角。
如下，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上显示：

body
  { 
    background-image:url('1.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

不指定background-position时的情形（图片的位置）：

指定background-position时的情形（图片的位置）：

(4)背景关联

如果窗体内容比较多，那么当窗体向下滚动时，背景图像也会随之滚动。当窗体滚动到超过图像的位置时，图像就会消失。

通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body 
  {
	  background-image:url(2.gif);
	  background-repeat:no-repeat;
	  background-attachment:fixed
  }

二、文本属性

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

1、文本缩进

text-indent属性

p {text-indent: 5em;}
p {text-indent: 10px;}
<!--负值也可以的 -->
p {text-indent: -10px;}

2、文本对齐

（1）text-align对齐属性
属性值： left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中

p{
	text-align:left; <!--左对齐-->
}

注意1：text-align:center 与

前者是对齐的文本， 是针对整个元素和文本。
（2）justify水平对齐
水平对齐，同时调整字间距。使各行的长度恰好相等。

3、词间距

word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

4、字母间距

letter-spacing 属性：字符或字母之间的间隔。

5、字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

• none 不变
• uppercase 大写
• lowercase 小写
• capitalize 首字母大写

6、文本装饰

text-decoration 属性，有 5 个值：

• none
• underline 下画线
• overline 上画线
• line-through 中画线
• blink 闪烁

7、处理空白符

white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。处理字之间和文本行之间的空白符的方式。

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。
• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。
• pre-wrap 保留空白符序列，但是正常地进行换行。
• pre-line 合并空白符序列，但是保留换行符。
• inherit 规定应该从父元素继承 white-space 属性的值。

三、字体

1、字体属性

body {font-family: sans-serif;}

2、字体风格属性

font-style 属性有三个值：

• normal - 文本正常显示
• italic - 文本斜体显示
• oblique - 文本倾斜显示

3、字体变形

font-variant 属性可以设定小型大写字母。

• normal 默认值。浏览器会显示一个标准的字体。
• small-caps 浏览器会显示小型大写字母的字体。

4、字体加粗

font-weight 属性设置文本的粗细。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

5、字体大小

font-size 属性设置文本的大小。
font-size 值可以是绝对或相对值。

6、font属性

把所有的属性值都写到font里。

四、链接

链接的四种状态：

• a:link - 普通的、未被访问的链接
• a:visited - 用户已访问的链接
• a:hover - 鼠标指针位于链接的上方
• a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，以下次序规则：

• a:hover 必须位于 a:link 和 a:visited 之后
• a:active 必须位于 a:hover 之后

1、文本修饰

text-decoration属性

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

2、背景色

background-color 属性规定链接的背景色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

五、列表

1、列表类型

list-style-type属性，有以下值（更多，列举一些）：

• disc 默认。标记是实心圆。
• circle 标记是空心圆。
• square 标记是实心方块。
• decimal 标记是数字。

2、列表项图像

list-style-image 属性

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

3、列表标志位置

list-style-position 属性

• inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
• outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

4、简写列表样式

list-style 简写属性在一个声明中设置所有的列表属性。
按顺序设置如下属性：

• list-style-type
• list-style-position
• list-style-image

五、表格

1、border 属性

table, th, td
  {
  border: 1px solid blue;
  }

2、折叠边框

border-collapse 属性设置是否将表格边框折叠为单一边框

table
  {
  border-collapse:collapse;
  }

3、表格宽度和高度

table
  {
  width:100%;
  }

th
  {
  height:50px;
  }

4、表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。
vertical-align 属性设置垂直对齐方式，比如顶部对齐(top)、底部对齐(bottom)或居中对齐(center)：

td
  {
  text-align:right;
  }

5、表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

td
  {
  padding:15px;
  }

6、表格颜色

table, td, th
  {
  border:1px solid green;
  }

th
  {
  background-color:green;
  color:white;
  }

7、相邻单元格的边框间

border-spacing 属性设置相邻单元格的边框间的距离

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

8、表格标题的位置

caption-side 属性设置表格标题的位置。

• top 默认值。把表格标题定位在表格之上。
• bottom 把表格标题定位在表格之下。

六、边框

轮廓是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。可以指定元素轮廓的样式、颜色和宽度。

1、轮廓的宽度

• thin 规定细轮廓。
• medium 默认。规定中等的轮廓。
• thick 规定粗的轮廓。
• length 允许您规定轮廓粗细的值。

p
  {
  outline-style:dotted;
  outline-width:5px;
  }

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 值。

p
  {
  outline-style:dotted;
  }

3、轮廓的颜色

p
  {
  outline-style:dotted;
  outline-color:#00ff00;
  }

4、outline 属性

outline 简写属性在一个声明中设置所有的轮廓属性。按顺序设置如下属性：

• outline-color
• outline-style
• outline-width