七．CSS1属性
3．1 font属性
字模、字体样式、字体大小、字体效果等。常用属性有：
?= 1 \* GB3 ①
font-family：字模，Cursive、Fantasy、Comic Sans MS等。
?= 2 \* GB3 ②
font-size：字体物理大小或相对大小，物理大小包括：xx-small、x-small、small、medium、large、x-large、xx-large分别对应1～7号字体。
?= 3 \* GB3 ③
font-style：是否斜体， normal、italic、oblique（＝italic）。
?= 4 \* GB3 ④
font-weight：文字粗细，normal、bold、bolder、lighter。
?= 5 \* GB3 ⑤
font-variant：小型大写字母，normal、small-caps（小型大写字母）。
3．2 text属性
文本修饰、文本缩进、单词间距、字母间距、行间距、文本的水平对齐和垂直对齐以及空白大小的控制。常用属性有：
?= 1 \* GB3 ①
text-transform：单词大小写，none、capitalize、uppercase、lowercase。
?= 2 \* GB3 ②
text-decoration：特殊效果，none、line-through、overline、underline。
?= 3 \* GB3 ③
word-spacing：单词间距，normal、英寸（in）、厘米（cm）、point（pt）、pica（pc）、em（em）、像素（px）。
?= 4 \* GB3 ④
letter-spacing：字母间距。
?= 5 \* GB3 ⑤
vertical-align：文本或图像的垂直定位，baseline（默认）、sub、super、top、text-top、middle、bottom、text-bottom。
?= 6 \* GB3 ⑥
text-align：文本水平对齐方式，left、right、center、justify。
?= 7 \* GB3 ⑦
text-indent：为段落元素第一行产生缩进。
?= 8 \* GB3 ⑧
line-height：当前行的高度，这样设置的行上下会空出相同的距离。
?= 9 \* GB3 ⑨
white-space：控制元素内空格的处理方式，normal（默认）、pre（不压缩空格）、nowrap（即使文本行超出了元素内容的宽度也不会换行）
3．3 color属性和background属性
?= 1 \* GB3 ① color：文字颜色
?= 2 \* GB3 ②
background-color：背景色
?= 3 \* GB3 ③
background-image：背景图像，背景色显示在背景图像的下面，以提供不透明的背景，比 = 4 \* GB3 ④
background-repeat：决定当背景图像比元素的画布空间小时该如何排列。
repeat：默认，在水平和垂直两个方向上平铺；
repeat-x：仅在水平方向平铺；
repeat-y：仅在垂直方向平铺；
no-repeat：不平铺。
?= 5 \* GB3 ⑤
background-attachment：
scroll：默认，图像和文本一起滚动；
fixed：图像不动，水印效果。
?= 6 \* GB3 ⑥
background-position：背景图像在元素画布空间中的定位方式，指定了图像左上角相对于画布的水平间距和垂直间距。可以用绝对距离（像素）、百分比或特殊关键字。
水平方向关键字：left、center、right
垂直方向关键字：top、center、bottom
举例：background-image属性使用。
b{background-image：url(donut-tile.gif);background-color：white;}
p{background-image：url(picture.gif);background-position：20% 40%;}
body{background-image：url(picture.gif);background-position：center center;}
3．4 box属性
像<p>元素这样的块级元素可以作为屏幕上的一个矩形容器来考虑。可以通过样式属性来控制这些容器的三个方面。可以控制的box属性如下：
?= 1 \* GB3 ①
margin属性：决定元素的box的边和相邻元素的边的距离。
?= 2 \* GB3 ②
border属性：决定包围元素的边的边框的视觉特性。
?= 3 \* GB3 ③
padding属性：决定元素内它的边和它的实际内容间的距离。
?= 4 \* GB3 ④
height，width和positioning属性：决定由元素产生的box的大小和位置。
3．4．1
margin属性
单边距的设置规则：
?= 1 \* GB3 ①
margin-top：上边距
?= 2 \* GB3 ②
margin-right：右边距
?= 3 \* GB3 ③
margin-bottom：下边距
?= 4 \* GB3 ④
margin-left：左边距
举例：单边距的设置。
body {margin-top:20px; margin-bottom:20px;
margin-left:30px; margin-right:50px;}
p {margin-bottom:20mm;}
div.fun {margin-left:1.5cm; margin-right:
1.5cm;}
也可以用margin属性来一次性为四条边设置边距。
举例：通过margin属性设置边距的规则。
?= 1 \* GB3 ① 如果仅指定了单个值，则该值被应用到4个“空白”。
如：p{margin:1.5cm;}
?= 2 \* GB3 ② 如果四个值都指定了，则它们按照顺时针方向应用到各个空白（上、右、下、左的顺序），
最后一个距离后加分号，之间用空格相隔。
如：p{margin:10px 5px
15px 5px;}
?= 3 \* GB3 ③ 如果在规则中仅指定了两个或三个值，缺少一边的取值将由它的对边决定。
如：p{margin:10px 5px ;}
将设置上边、下边的空白为10像素，右边、左边的空白为5像素。
3．4．2
border属性
border位于空白（margin）和间隙（padding）之间。
（一）border-style属性
?= 1 \* GB3 ① none：无边框
?= 2 \* GB3 ②
dotted：点边框
?= 3 \* GB3 ③
dashed：虚线边框
?= 4 \* GB3 ④ solid：实线边框
?= 5 \* GB3 ⑤
double：双边框
?= 6 \* GB3 ⑥
groove：蚀刻边框
?= 7 \* GB3 ⑦ ridge：突出边框
?= 8 \* GB3 ⑧ inset：凹进边框
?= 9 \* GB3 ⑨
outset：凸起边框
也可以通过border-top-style，border-right-style，border-bottom-style，border-left-style来单独设置各边的边框类型。当使用border-style来设置四边时，规则同margin类似。
（二）border-width属性
border-width、border-top-width、border-right-width、border-bottom-width、border-left-width可以分别设置边框的粗细。典型取值有：thin、medium、thick，当然也可取其他长度值。
（三）border-color属性
border-color、border-top-color、border-right-color、border-bottom-color、border-left-color可以分别设置边框的颜色。
可以将border-style、border-width、border-color一起应用到border、border-top、border-right、border-bottom、border-left上来实现对相关border属性的快速设置。当三个属性在放在一起设置时，最好按照border-style、border-width、border-color的顺序来给出值。
举例：border组合属性的设置。
#RainbowBox
{
background-color:yellow;
border-top:solid 20px red;
border-right:double 10px blue;
border-bottom:solid 20px green;
border-left:dashed 10px orange;
}
3．4．3
padding属性
在元素的边框和它的实际内容之间的空白可以通过padding属性来控制。元素的4个间隙（padding）可以通过padding-top、padding-right、padding-bottom、padding-left来设置。与空白（margin）和边框（border）一样，你可以使用速记符形式的padding属性来一次性地对四边的间隙进行设置。
举例：一个涉及margin、border、padding的综合应用。
<style type = “text/css”>
<!--
#one
{
background:yellow;
border-style:double;
border-width:medium;
padding-left:1cm;
padding-right:0.5cm;
}
#two
{
background:yellow;
border-style:double;
border-width:medium;
padding-top:1cm;
padding-bottom:1cm;
}
#three
{
background:yellow;
border-style:double;
border-width:medium;
padding:1cm 1cm;
margin:0.5cm 4cm;
}
-->
3．4．4
width、height属性
举例：综合。
P
{
width:300px;
height:400px;
padding:10px;
border:solid 5px;
background-color:yellow;
color:black;
}
3．4．5
float、clear属性
float属性影响元素在水平方向上的对齐方式，类似与多数html元素的align属性。它使得它所包含的元素“流”向左边或右边，这时我们称这个元素为“流动”元素。 clear属性对“流动”元素进行垂直定位，决定是否继续或清除当前的流动方式，类似于html元素
br的clear属性，取值有left、right、both、none（默认）。
3．4．6
display属性
CSS模型定义了三种类型的显示元素：块级元素、行内元素和列表。display属性允许一个元素的显示类型成为下面四个值中的一个：block，inline，list-item和none。
?= 1 \* GB3 ① none：元素将不会显示出来，并且也不会占据画布空间，这点和设置visibility属性不同。
?= 2 \* GB3 ② block：块级元素。
?= 3 \* GB3 ③
inline：行内元素。
?= 4 \* GB3 ④
list-item：列表元素
举例：display属性使用。
?= 1 \* GB3 ① “关闭”一个段落，使其不显示出来：
p.remove{display:none;}
?= 2 \* GB3 ② 将一个块级元素（比如段落）转变成行内元素，这样就可以不换行显示！
p{display:inline;}
?= 3 \* GB3 ③ 将一个行内元素转变成块级元素，这样就增加了一个回车（换行）！
em{display:block;}
?= 4 \* GB3 ④ 强制一个元素在一定程度上像列表那样显示：
b{display:list-item;}
