CSS自学笔记（5）:CSS的样式

CSS中拥有各种各样的样式表，而基本的样式有背景，文本，字体，链接，列表，表格，轮廓。

一.CSS-背景

CSS中允许用纯色背景，也允许用图片来创建复杂的个性背景。

p {background-color: #000;}

是用纯色作为背景。这时你可以定义其他属性，生成不同效果的背景。

CSS中也可以用图片作为背景，这是就需要使用background-image属性了，如果属性值为一个URL值，并且图片文件存在，那么就可以看到用该图片做为背景的网页了

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

注：background-image属性也可以用在其他标签里。

这时可以定义其他属性，改变图片的位置，大小等等。

可以使用 background-repeat 属性，对页面上的图片背景进行平铺处理，利用 background-position 属性改变图像在背景中的位置。

需要注意的是，在改变图片背景的位置时，可以使用关键字，也可以使用百分比，还可以使用长度值来确定图片的位置。

当文档很长，一个屏幕显示不下的时候，在向下滚动的时候，我们不希望背景也一起滚动，这是就可以用到background-attachment 属性防止这种滚动，防止背景滚动，将背景固定到一个可视区域中（fixed），不会收到网页滚动的影响。

二.CSS-文本

文本，应该是一个网页中占据内容最多的部分，所以文本的样式是比较重要的。

CSS中的属性可定义文本的外观，包括文本的颜色、字符间距、对齐方式，还可以对文本进行装饰、排版等。

CSS 文本属性

属性	描述
color	设置文本颜色
direction	设置文本方向。
line-height	设置行高。
letter-spacing	设置字符间距。
text-align	对齐元素中的文本。
text-decoration	向文本添加修饰。
text-indent	缩进元素中文本的首行。
text-shadow	设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。
text-transform	控制元素中的字母。
unicode-bidi	设置文本方向。
white-space	设置元素中空白的处理方式。
word-spacing	设置字间距。

注：在文本属性中的部分属性值，可以用长度、百分比、关键字等等来设置。

三.CSS-字体

CSS的字体属性定义文本的字体、大小、风格（加粗、倾斜）和变形等。

CSS的字体系列

在 CSS 中，有两种不同类型的字体系列名称：

• 通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）

• 特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

• Serif 字体

• Sans-serif 字体
• Monospace 字体
• Cursive 字体
• Fantasy 字体

定义文本的字体属性时，应用到font-family属性。定义它的属性值时，可以用通用字体系列，也可以用指定字体系列，这两种字体系列也可以同时使用。

body {font-family: Serif;}

希望html文档使用Serif字体，但又不关心是哪种字体，这时可以用到通用字体系列。

body {font-family: Georgia;}

将body元素的字体设置成具体的Georgia字体。

定义字体风格时，应用到font-style属性。

font-style属性值有：

• normal - 文本正常显示

• italic - 文本斜体显示
• oblique - 文本倾斜显示

注：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

CSS 字体属性

属性	描述
font	简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-size-adjust	当首选字体不可用时，对替换字体进行智能缩放。
font-stretch	对字体进行水平拉伸。
font-style	设置字体风格。
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	设置字体的粗细。

四.CSS-链接

CSS中我们也可以为链接设置各种规格样的样式。不过相对于其他的，链接样式比较简单。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

• a:link - 普通的、未被访问的链接

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

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

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

• a:active 必须位于 a:hover 之后

五.CSS-列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

在html中有效的使用列表，可以使页面变得非常丰富的同时，也很整齐。

列表最常用的属性是它的标志类型：list-style-type

同样，当列表项不够用（不想用）时，我们也可以用图片来做列表项。

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

由于列表的使用频率比较高，所以可以将列表的属性简写

li {list-style : url(1.gif) square inside}

CSS 列表属性(list)

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

六.CSS-表格

有效的使用表格属性，可以将那些看起来很死板的表格变得很个性。

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

将表格table、th 以及 td 设置了蓝色边框。

也可以对表格边框的其他属性进行定义，从而得到各式各样边框的表格。

对表格的大小（高宽）进行定义，使之更符合html的布局设计，是网页更加美观。

我也可以对表格内部的文本属性进行定义，text-align 和 vertical-align 属性设置表格中文本的对齐方式

td
  {
  text-align:right;
  }

为表格td和th元素设置padding属性，可以改变表格内容对表格内边框的距离。

和其他背景一样，也可以为表格添加背景颜色，可以为纯色，也可以为图片。

CSS Table 属性

属性	描述
border-collapse	设置是否把表格边框合并为单一的边框。
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。
empty-cells	设置是否显示表格中的空单元格。
table-layout	设置显示单元、行和列的算法。

七.CSS-轮廓

轮廓可以理解为包围在某元素周围的一条线，起强调作用。

CSS 边框属性

属性	描述
outline	在一个声明中设置所有的轮廓属性。
outline-color	设置轮廓的颜色。
outline-style	设置轮廓的样式。
outline-width	设置轮廓的宽度。