样式表(CSS：Cascading Style Sheets)学习[上]
字模、字体样式、字体大小、字体效果等。常用属性有：
等。
号字体。
）。
。
（小型大写字母）。
文本修饰、文本缩进、单词间距、字母间距、行间距、文本的水平对齐和垂直对齐以及空白大小的控制。常用属性有：
。
。
）。
：字母间距。
。
。
：为段落元素第一行产生缩进。
：当前行的高度，这样设置的行上下会空出相同的距离。
（即使文本行超出了元素内容的宽度也不会换行）
<!--[if !supportEmptyParas]--> <!--[endif]-->
：文字颜色
：背景色
：决定当背景图像比元素的画布空间小时该如何排列。
：默认，在水平和垂直两个方向上平铺；
：仅在水平方向平铺；
：仅在垂直方向平铺；
：不平铺。
：
：默认，图像和文本一起滚动；
：图像不动，水印效果。
：背景图像在元素画布空间中的定位方式，指定了图像左上角相对于画布的水平间距和垂直间距。可以用绝对距离（像素）、百分比或特殊关键字。
right
bottom
<!--[if !supportEmptyParas]--> <!--[endif]-->
white;}
20% 40%;}
center center;}
<!--[if !supportEmptyParas]--> <!--[endif]-->
属性如下：
的边和相邻元素的边的距离。
属性：决定包围元素的边的边框的视觉特性。
属性：决定元素内它的边和它的实际内容间的距离。
的大小和位置。
<!--[if !supportEmptyParas]--> <!--[endif]-->
单边距的设置规则：
：上边距
：右边距
：下边距
：左边距
<!--[if !supportEmptyParas]--> <!--[endif]-->
单边距的设置。
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;}
<!--[if !supportEmptyParas]--> <!--[endif]-->
属性来一次性为四条边设置边距。
<!--[if !supportEmptyParas]--> <!--[endif]-->
属性设置边距的规则。
个“空白”。
p{margin:1.5cm;}
如果四个值都指定了，则它们按照顺时针方向应用到各个空白（上、右、下、左的顺序），
最后一个距离后加分号，之间用空格相隔。
p{margin:10px 5px 15px 5px;}
如果在规则中仅指定了两个或三个值，缺少一边的取值将由它的对边决定。
p{margin:10px 5px ;}
像素。
<!--[if !supportEmptyParas]--> <!--[endif]-->
）之间。
属性
：无边框
：点边框
：虚线边框
：实线边框
：双边框
：蚀刻边框
：突出边框
：凹进边框
：凸起边框
类似。
<!--[if !supportEmptyParas]--> <!--[endif]-->
属性
，当然也可取其他长度值。
属性
可以分别设置边框的颜色。
<!--[if !supportEmptyParas]--> <!--[endif]-->
的顺序来给出值。
<!--[if !supportEmptyParas]--> <!--[endif]-->
组合属性的设置。
#RainbowBox
{
background-color:yellow;
border-top:solid 20px red;
border-right:double 10px blue;
border-bottom:solid 20px green;
border-left:dashed 10px orange;
}
<!--[if !supportEmptyParas]--> <!--[endif]-->
属性来一次性地对四边的间隙进行设置。
<!--[if !supportEmptyParas]--> <!--[endif]-->
的综合应用。
<!--
#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;
}
-->
<!--[if !supportEmptyParas]--> <!--[endif]-->
综合。
P
{
width:300px;
height:400px;
padding:10px;
border:solid 5px;
background-color:yellow;
color:black;
}
<!--[if !supportEmptyParas]--> <!--[endif]-->
（默认）。
<!--[if !supportEmptyParas]--> <!--[endif]-->
。
属性不同。
：块级元素。
：行内元素。
：列表元素
<!--[if !supportEmptyParas]--> <!--[endif]-->
属性使用。
“关闭”一个段落，使其不显示出来：
p.remove{display:none;}
将一个块级元素（比如段落）转变成行内元素，这样就可以不换行显示！
p{display:inline;}
将一个行内元素转变成块级元素，这样就增加了一个回车（换行）！
em{display:block;}
强制一个元素在一定程度上像列表那样显示：
b{display:list-item;}
