⽹页设计⼊门--如何使⽤css设置字体和⽂本样式
⼀、定义字体类型
font-family:Arial,Helvetica,serif,sans-serif,monospace;
ps.字体与字体之间⽤逗号隔开，句尾⽤分号
例如：
<html>
<head>html网页设计css
<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为设置单位，它表⽰⼀个字距，这样⽐较精确确定⾸⾏缩进效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。