网页设计入门--如何使用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为设置单位,它表示一个字距,这样比较精确确定首行缩进效果