网页设计入门--如何使用css设置字体和文本样式
一、定义字体类型
font-family:Arial,Helvetica,serif,sans-serif,monospace;
ps.字体与字体之间用逗号隔开，句尾用分号
例如：
<html>
<head>
<title>my first text html</title>
<style type="text/css">
.p1{font-family:serif;}
.p2{font-family:sans-serif;}
.p3{font-family:monospace;}
</style>
</head>
<body>
welcome to my first text html!
<p class="p1">我是serif字体!</p>
<p class="p2">我是sans-serif字体!</p>
<p class="p3">我是monospace字体!</p>
</body>
</html>
显示结果如下：
二、定义字体大小
font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length
ps:
1、xx-small（最小）、x-small（较小）、small（小）、medium（正常）、large（大）、x-large（较大）、xx-large（最大）、larger（增大）、smaller（减小）、length（可以是百分数、或者浮点数和单位标识符组成的长度值，但不能为负值。其百分比的取值是基于父对象中字体的尺寸来计算的，与em单位计算方法相同）;
2、还可以用px（像素）、in（英寸）、em（基于父辈字体大小为参考设置字体大小）、cm（厘米）、pt（点）、pc（皮卡）来定义字体大小;
3、浏览器默认字体大小为16px，所以1.2em=19.2px，0.875em=14px，0.625em=10px；
4、对于网页宽度固定或者栏目宽度固定的布局，使用像素是正确的选择；对于网页宽度不固定或者栏目宽度也不固定的页面，使用百分比或em是正确的选择，这样可以方便客户端浏览器调整字体大小；
例如：
<html>
<head>
<title>my first text html</title>
<style type="text/css">
div{font-size:20px;}
.p1{font-size:0.6in;}
.p2{font-size:0.8em;}
.p3{font-size:2cm;}
.p4{font-size:16pt;}
.p5{font-size:2pc;}
</style>
</head>
<body>
我的字号为16px!
<div>
我的字号为20px!
<p class="p1">我的字号为0.6in!</p>
<p class="p2">我的字号为0.8em!</p>
<p class="p3">我的字号为2cm!</p>
<p class="p4">我的字号为16pt!</p>
<p class="p5">我的字号为2pc!</p>
</div>
</body>
</html>
显示结果如下：
三、定义字体颜色
如下为定义字体颜色的四种方法：
color:red; /*使用颜色名*/
color:#693333; /*使用十六进制*/
color:rgb(120,120,120); /*使用rgb*/
color:rgb(0%,100%,50%);
四、定义字体粗细
font-weight:normal|bold|bolder|lighter|100|200|300|400（相当于normal）|500|600|700（相当于bold）|800|900
PS:bolder和lighter是相对于normal字体粗细进行加粗和减细操作
五、定义斜体字体
font-style:normal|italic（斜体）|oblique（倾斜的字体）
PS:italic和oblique这两个取值只能在英文等西方文字中有效
例如：
<html>
<head>
<title>my first text html</title>
<style type="text/css">
.p1{font-style:normal;}
.p2{font-style:italic;}
.p3{font-style:oblique;}
</style>
</head>
<body>
<p class="p1">我的字体为normal!</p>
<p class="p2">我的字体为italic!</p>
<p class="p3">我的字体为oblique!</p>
</body>
</html>
显示结果如下：
六、定义下划线、删除线和顶划线
text-decoration:none|underline|overline|line-through|blink（闪烁效果）
PS:不同的效果可以同时用，只需效果之间加空格即可
例如：
<html>
<head>
<title>my first text html</title>
<style type="text/css">
.p1{text-decoration:underline;}
.p2{text-decoration:underline overline;}
.p3{text-decoration:underline overline blink;}
</style>
</head>
<body>
<p class="p1">我的字体使用了underline效果!</p>
<p class="p2">我的字体使用了underline和overline效果!</p>
<p class="p3">我的字体使用了underline、overline和blink效果!</p>
</body>
</html>
显示效果如下：
七、定义字体大小写
定义字体大小写有两种方法：
font-variant:normal|small-caps（小型的大写字母字体）;
text-transform:capitalize（首字母大写）|uppercase（大写）|lowercase（小写）;
例如：
<html>
<head>
<title>my first text html</title>
<style type="text/css">
.p1{font-variant:normal;}
.p2{font-variant:small-caps;}
.p3{text-transform:capitalize;}
.p4{text-transform:uppercase;}
.p5{text-transform:lowercase;}
</style>
</head>
<body>
<p class="p1">normal!</p>
<p class="p2">small-caps!</p>
<p class="p3">capitalize!</p>
<p class="p4">uppercase!</p>
<p class="p5">LOWERCASE!</p>
</body>
</html>
显示效果如下：
八、定义文本对齐
text-align:left|right|center|justify（两端对齐）
九、定义垂直对齐
vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length
PS:
auto：根据layout-flow属性的值对齐对象内容；
baseline：将支持valign特性的对象内容与基线对齐；
sub：垂直对齐文本的下标；
super：垂直对齐文本的上标；
top：将支持vlign特性的对象的内容与对象顶端对齐；
text-top：将支持vlign特性的对象的文本与对象顶端对齐；
middle：将支持vlign特性的对象的内容与对象中部对齐；
bottom：将支持vlign特性的对象的内容与对象底端对齐；
text-bottom：将支持vlign特性的对象的文本与对象底端对齐；
length：由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%
例如：
<html>
<head>
<title>my first text html</title>
<style type="text/css">
.span1{vertical-align:auto;}
.span2{vertical-align:baseline;}
.span3{vertical-align:sub;}
.span4{vertical-align:super;}
.span5{vertical-align:top;}
.span6{vertical-align:text-top;}
.span7{vertical-align:middle;}
.span8{vertical-align:bottom;}
.span9{vertical-align:text-bottom;}
.span10{vertical-align:2;}
</style>
</head>
<body>
<p>
<span class="span1">根据layout-flow属性的值对齐对象内容</span><span class="span1">auto</span></br>
<span class="span1">将支持valign特性的对象内容与基线对齐</span><span class="span2">baseline</span></br>
<span class="span1">垂直对齐文本的下标</span><span class="span3">sub</span></br>
<span class="span1">垂直对齐文本的上标</span><span class="span4">super</span></br>
<span class="span1">将支持vlign特性的对象的内容与对象顶端对齐</span><span class="span5">top</span></br>
<span class="span1">将支持vlign特性的对象的文本与对象顶端对齐</span><span class="span6">text-top</span></br>
<span class="span1">将支持vlign特性的对象的内容与对象中部对齐</span><span class="span7">middle</span></br>
<span class="span1">将支持vlign特性的对象的内容与对象底端对齐</span><span class="span8">bottom</span></br>
<span class="span1">将支持vlign特性的对象的文本与对象底端对齐</span><span class="span9">text-bottom</span></br>
<span class="span1">由浮点数字和单位标识符组成的长度值或百分数，可为负数，定义由基线算起的偏移量，基线对于数值来说为0，对于百分数来说就是0%
</span><span class="span10">length=2</span></br>
</p>
</body>
</html>
显示效果如下：
十、定义字间距
letter-spacing:1em;（字母与字母或者汉字与汉字之间的间距）
word-spacing:1em;（定义单词与单词之间的间距）
十一、定义行间距
line-height:normal（默认值，一般为1.2em）|length（表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;
例如：p{font-size:12pt;
line-height:12pt;}
十二、定义缩进
text-indent:length（表示百分比数字，或者由浮点数字和单位标识符组成的长度值，允许为负值）;
PS:建议设置缩进单位时，以em为设置单位，它表示一个字距，这样比较精确确定首行缩进效果
