美文网首页让前端飞
CSS内联样式的使用,设置字体属性

CSS内联样式的使用,设置字体属性

作者: 前小小 | 来源:发表于2020-12-25 18:01 被阅读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 />

相关文章

  • 03-CSS文字文本样式

    CSS字体样式属性调试工具 目标 应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常...

  • CSS相关---字体文本样式

    CSS字体样式属性调试工具 目标 应用使用css字体样式完成对字体的设置使用css外观属性给页面元素添加样式使用常...

  • CSS:前端基础 & CSS 文字文本样式

    学习目标 应用使用 css 字体样式完成对字体的设置使用 css 外观属性给页面元素添加样式使用常用的 emmen...

  • CSS基础样式总结

    二、CSS基础样式 1、CSS样式简介 (1)内联样式 在标签内部通过style属性设置元素的样式存在问题:使用内...

  • CSS内联样式的使用,设置字体属性

    1,CSS设置字体名称属性(font-family): 示例: 2,CSS设置字体大小属性(font-size):...

  • 爬虫_030_在HTML中如何使用css样式

    在HTML中如何使用css样式1、内联方式(行内样式)就是在HTML的标签中使用style属性来设置css样式格式...

  • HTML样式CSS-11

    如何使用CSS 实例一: 实例二: 实例三: 如何使用CSS 内联样式 HTML 样式实例 - 字体, 字体颜色 ...

  • CSS基础语法一

    CSS基本语法 CSS样式 内联样式(行内样式) 当行代码设置属性 页内样式 当先页面设置属性 外部样式 在单独的...

  • CSS格式化排版

    文字排版-字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。 这里注意不要设置不常用的字体...

  • HTML&CSS笔记(2)

    CSS格式化排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性,如下: 不...

网友评论

    本文标题:CSS内联样式的使用,设置字体属性

    本文链接:https://www.haomeiwen.com/subject/yxlinktx.html