一． 长度单位
1．相对类型
A． px （piexl）
像素，根据显示设备的分辨率的多少而代表不同的长度，因此属于相对类型。例如一张高宽为100px的图，在800×600分辨率中比在1024×768分辨率中大。因为两个分辨率中100px代表的长度不同。
B． em
这是设置以目前字符的高度为单位。比如h1{margin:2em},就会以目前字符的两倍高度来显示。em作为尺度单位时是以font-size属性为参考依据的，若是没有font-size属性，就以浏览器默认的字符高度作为参考。
2．绝对类型
绝对指无论显示设备的分辨率是多少，都代表相同的长度。
| 尺度单位名 | 说明 |
| in（英寸） | 不是国际标准单位，极少使用 |
| cm(厘米) | 国际标准单位，较少用 |
| mm（毫米） | 国际标准单位，较少用 |
| pt(点数) | 最基本的显示单位，较少用 |
| pc(印刷单位) | 应用在印刷行业中，1pc=12pt |
Ps：可以看到，在CSS使用过程中相对类型长度单位使用较多，而绝对类型较少使用。
二． 颜色定义
在html页面中，颜色统一用RGB的模式显示，也就是通常人们所说的“红绿蓝”三原色模式，每种颜色都由着三种颜色的不同比重组成，每种颜色的比重分为0～255档。当红绿蓝三个分量都设置为255时就是白色，例如rgb(100%,100%,100%)和#FFFFFF都指白色。（FF即为16进制中的255）
在css中文字颜色是通过color属性设置的，示例如下：
h3{color:bule;}
h3{color:#0000ff;}
h3{color:#00f;}
h3{color:rgb(0,0,255);}
h3{color:rgb(0%,0%,100%);}
第1种是用颜色的英文名称作为属性值。
第2种是最常用的6位的十六进制数值表示。
第3种是第2种方式的简写方式。
第4种是分别给出红绿蓝3种颜色分量的十进制数值。
第5种是分别给出红绿蓝3种颜色分量的百分比。
三． 设置文字的字体
在此处我们先准备一个html页面，如果你不方便可以下载我这个4-3.html
然后在其头部增加如下代码：
<style type=”text/css”>
h1{
font-family:黑体;
}
p{
font-family:Arial,”Times New Roman”,;
}
</style>
以上语句声明了html页面中h1字体使用黑体，文本段落同时声明了两种字体，分别是Arial字体和Times New Roman字体。其含义是告诉浏览器在访问者的计算机中寻找Arial字体，如果没有Arial字体，就寻找Times New Roman字体，如果两种字体都没有，则使用浏览器默认的字体显示。
font-family属性可以同时声明多种字体，字体之间用逗号分隔开。另外一些字体的名称中会出先空格，例如“Times New Roman”字体，这时要用双引号将其括起来，是浏览器知道这是一种字体名称，要用英文引号。
Ps:很多设计者喜欢多种多样的字体，但这些字体很多用户不会安装，因此一定要设置多个备选字体，避免浏览器直接替换成默认的字体。最直接的方法是使用了生僻字体的部分，用图形软件制作成效的图片，再加载到页面中。
四．设置字体的倾斜效果
文字的倾斜并不是真的把字体拉斜实现的，倾斜的字体是一个独立的字体，对应于操作系统中的某一个字库文件。
严格来说，在英文中，字体的倾斜有以下两种：
1.italic，即意大利体，我们平常说的倾斜都是指“意大利体”，大家看到各种文字处理软件上倾斜按钮是一个i字母，这就是原因。
2.oblique，即真正的倾斜，这就是把一个字母向右边倾斜一定的角度产生的效果。Windows操作系统下没有实现oblique方式的字体，只是找了一个接近它的字体来示意。
CSS中的font-style属性用来控制字体的倾斜，可以设置为“正常”、“意大利体”、“倾斜”三种样式，示例如下：
font-style:normal;
font-style:italic;
font-style:oblique;
在Windows上不能区分italic和oblique，他们都是按照italic方式进行显示的，这不是浏览器的问题，而是操作系统不够完善。
Ps:对于中文字体来说，并不存在这么多情况。另外，中文字体的倾斜效果并不好看，因此网页上很少使用中文字体的倾斜效果。
五．设置文字加粗效果
在html中使用<b>、或者<strong>将文字设置为粗体，在css中使用font-weight属性控制文字的粗细，可以将文字的粗细进行细致的划分，更重要的是css还可将本来是粗体的文字变成正常粗细。
font-weight属性的设置值
| 设置值 | 说明 |
| normal | 正常粗细 |
| bold | 粗体 |
| bolder | 加粗体 |
| lighter | 比正常粗细还细 |
| 100-900 | 共有9个层次100，200……900，越大越粗 |
实际上大多数操作系统和浏览器只能设置“正常”和“加粗”两种粗细，示例如下：
font-weight:normal;
font-weight:bold;
ps：在html中<b>和<strong>表现效果是一样的，但是<b>没有语义，<strong>表示“突出”、“加强”含义，大多数搜索引擎都对网页中的strong很重视。但是设计者一方面想引起重视一方面又不想以粗体显示。这时可以对<strong>使用”font-weight:normal”，这样就可以让其回复正常粗细，又不影响语义效果。
六．英文字母大小写转换
英文转换由属性text-transform属性控制，有三个值：
text-transform:capitalize; /*单词首字母大写*/
text-transform:uppercase; /*全部大写*/
text-transform:lowerocase; /*全部小写*/
示例如下：
<html>
<head>
<title>英文字母大小写转换</title>
<style type=”text/css”>
#p1{
text-transform:capitalize;
}
#p2{
text-transform:uppercase;
}
#p3{
text-transform:lowercase;
}
</style>
</head>
<body>
<p id=”p1″>hello ALL world </p>
<p id=”p2″>hello ALL world</p>
<p id=”p3″>hello ALL world</p>
</body>
</html>
浏览器结果：
我们可以看到如果设置text-transform:capitalize，原来是小写的单词则变为首字母大写，对于原来已经全部大写的单词，例如ALL，依然保持全部大写。
七．控制文字的大小
css通过font-size控制文字的大小，最常使用的单位是px和em。lem表示的长度是字母m的标准宽度。也可以用百分比做单位：“font-size:200%”表示文字大小为原来的两倍。
八．文字的装饰效果
在css中由text-decoration属性为文字加下划线、删除线和顶线等多种装饰效果。
text-decoration属性设置值
| 设置值 | 说明 |
| none | 正常显示 |
| underline | 为文字加下划线 |
| line-through | 为文字加删除线 |
| overline | 为文字加顶线 |
| blink | 文字闪烁，仅部分浏览器支持 |
可以设置多个属性值。示例：
text-decoration:underline overline;
注意：切勿将text-decoration输入成font-decroation
九．设置段落首行缩进
首行缩进由text-indent属性控制，中文段落首行缩进两个文字空白，示例：
text-indent:2em;
如果希望首行不是缩进，而是凸出一定距离，也称为“悬挂缩进”，示例：
padding-left:2em;
text-indent:-2em;
先使整个段落向右2em的距离，然后将text-indent属性设置为“-2em”，这样就会凸出两个字的距离了。
十．设置字词间距
letter-spacing 控制字母间距；
word-spacing 控制单词间距；
对于中文而言，要调整汉字之间的距离，需要设置letter-spacing属性，而不是word-spacing。
十一.设置段落内部的文字行高
css用line-height属性控制行高：
line-height属性的设置
| 设置值 | 说明 |
| 长度 | 数值，可以使用前面介绍的尺度单位 |
| 倍数 | font-size的设置值的倍数 |
| 百分比 | 相对于font-size的百分比 |
行高就是设置行与行之间的距离，可以这么理解。
十二.设置段落之间的距离
css用margin控制段落之间的距离，margin称为“外边距”。示例：
margin:1px,2px,3px,4px; 上右下左边距依次为1234px
margin:1px,2px; 上下边距为1px，左右边距为2px
注意：两个段落之间的距离=其中外边距较大的值
SHISAN页面中插入图片可以起到美化的作用。插入图片的标记只有一个，那就是<img>标记。插入图片的时候，仅仅使用<img>标记是不够的，需要配合其它的属性来完成，如下表所示。
| 属性 | 描述 |
| src | 图像的源文件 |
| alt | 提示文字 |
| width,height | 宽度，高度 |
| border | 边框 |
| vspace | 垂直间距 |
| hspace | 水平间距 |
| align | 排列 |
| dynsrc | 设定avi文件的播放 |
| loop | 设定avi文件循环播放次数 |
| loopdelay | 设定avi文件循环播放延迟 |
| start | 设定avi文件播放方式 |
| lowsrc | 设定低分辨率图片 |
| usemap | 映象地图 |
十三.插入图片
页面中插入图片可以起到美化的作用。插入图片的标记只有一个，那就是<img>标记。插入图片的时候，仅仅使用<img>标记是不够的，需要配合其它的属性来完成，如下表所示。
| 属性 | 描述 |
| src | 图像的源文件 |
| alt | 提示文字 |
| width,height | 宽度，高度 |
| border | 边框 |
| vspace | 垂直间距 |
| hspace | 水平间距 |
| align | 排列 |
| dynsrc | 设定avi文件的播放 |
| loop | 设定avi文件循环播放次数 |
| loopdelay | 设定avi文件循环播放延迟 |
| start | 设定avi文件播放方式 |
| lowsrc | 设定低分辨率图片 |
| usemap | 映象地图 |
十四．图像的源文件属性SRC
配合src属性指定图像源文件所在的路径，就可以完成图像的插入了。
图像的低分辨率源文件属性LOWSRC
如果用户的浏览器速度很慢，网页设计者可以在页面中为其插入一张低分辨率的图像供显示。
十五.图像的提示文字属性ALT
提示文字有两个作用。当浏览网页时，如果图像下载完成，鼠标放在该图像上，鼠标旁边会出现提示文字。也就是说，当鼠标指向图像上方的时候，稍等片刻，可以出现图像的提示文字，这用于说明或者描述图像。第二个作用是，如果图像没有被下栽，在图像的位置上就会显示提示文字。
十五.控制文本的水平位置
css使用text-align属性控制文本的水平位置，如下表：
text-align属性的设置值
| 设置值 | 说明 |
| left | 左对齐，也是浏览器默认的 |
| right | 右对齐 |
| center | 居中对齐 |
| justify | 两端对齐 |