CSS内联样式的使用,设置字体属性
2020-12-25 本文已影响0人
前小小
1,CSS设置字体名称属性(font-family):
示例:
.fs1{
font-family:Arial, Helvetica, sans-serif;
}
.fs2{
font-family:黑体;
}
.fs3{
font-family:"Times New Roman", Times, serif;
}
</style>
<span class="fs1">CSS设置字体属性</span><br />
<span class="fs2">CSS设置字体属性</span><br />
<span class="fs3">CSS设置字体属性</span><br />
2,CSS设置字体大小属性(font-size):
示例:
<style>
.fs1{
font-size:12px;
}
.fs2{
font-size:16px;
}
.fs3{
font-size:18px;
}
.fs3{
font-size:24px;
}
<span class="fs1">CSS设置字体大小属性</span><br />
<span class="fs2">CSS设置字体大小属性</span><br />
<span class="fs3">CSS设置字体大小属性</span><br />
<span class="fs4">CSS设置字体大小属性</span><br />
</style>
3,CSS设置字体粗体属性(font-weight):
示例:
<style>
.b{
font-weight:bold;
}
</style>
<span>CSS设置字体粗体,无粗体!</span><br />
<span class="b">CSS设置字体粗体,有粗体</span><br />
4,CSS设置字体斜体属性(font-style:italic;):
<style>
.i{
font-style:italic;
}
</style>
<span>CSS设置字体斜体,无斜体!</span><br />
<span class="i">CSS设置字体斜体,有斜体</span><br />
Css设置字体颜色属性(color)
示例:
<style>
body{font-size:14px;}
.color1{color:#000;} /黑色/
.color2{color:#f00;} /红色/
.color3{color:green;} /绿色/
.color4{color:orange;} /橙色/
.color5{color:blue;} /蓝色/
div{text-align:center; padding-top:32px; width:600px; margin:0px auto;}
</style>
<span class="color1">Css设置字体属性,蚂蚁学院,网站建设教程网! 黑色!</span><br />
<span class="color2">Css设置字体属性,蚂蚁学院,网站建设教程网! 红色!</span><br />
<span class="color3">Css设置字体属性,蚂蚁学院,网站建设教程网! 绿色!</span><br />
<span class="color4">Css设置字体属性,蚂蚁学院,网站建设教程网! 橙色!</span><br />
<span class="color5">Css设置字体属性,蚂蚁学院,网站建设教程网! 蓝色!</span><br />