百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML和CSS实现字体加粗的三种办法
分享文章到:

HTML和CSS实现字体加粗的三种办法

发布时间:09/01 来源:未知 浏览: 关键词:
大家在阅读网站时有没有留意到,页面中有些文字或字体加粗了,正在学习HTML和CSS的小伙伴,你知道HTML怎样给文字加粗吗?CSS如何设定字体加粗呢?这篇文章给大家总结了给字体和文字加粗的三种办法,包罗HTML中的加粗标签乃至CSS字体加粗样式,有必然的参照 价值,感乐趣的伴侣可以参照 一下。

给字体和文字加粗有三种办法,一种是CSS中的font-weight: bold样式,一种是HTML中的<strong></strong>标签,最后一种是HTML中的<b></b>标签。

办法1:用CSS中font-weight: bold样式给字体加粗

font-weight属性可以设定字体的粗细,当属性值为normal时,表示正常的字体,相当于number为400;当属性值为bold时,可以给字体粗体,相当于number为700,也相当于<b>标签的结果。

实例描写:创立两个p标签,给其中一个标签一个class类名,便于对其停止CSS样式设定。将font-weight: bold属性增加到有类名的p 标签上,对照两个p标签,看看有什么不一样,详细代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.aa{font-weight: bold;}
</style>
</head>
<body>
<p>床前明月光</p>
<p class="aa">低头思故土</p>
</body>
</html>

如下图所示,“低头思故土”这段文字被加粗了。

x1.jpg

办法2:用html中的<strong>加粗标签

<strong>标签可以使字体加粗,且所有主流阅读器都支撑此办法。

实例描写:直接用html中的<strong>标签,即可实现文字加粗结果,详细代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<strong>疑是地上霜</strong>
</body>
</html>

如图所示,对照p标签和strong标签的内容,发明strong标签的内容加粗了。

x2.jpg

办法3:用html中的<b>加粗标签

<b> 标签可以定义一个粗体的文本,且所有主流阅读器都支撑 <b> 标签。

实例描写:<b></b>标签和<strong>标签一样,都可以给文字加粗,并且使用简便利便,详细代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>床前明月光</p>
<b>举头望明月</b>
</body>
</html>

如下图所示,b标签的里面的文字加粗了

x3.jpg

总结:以上给大家介绍了给文字加粗的三种办法,离别是CSS中的font-weight: bold样式和HTML中的<strong>标签、<b>标签,直接用html标签比力利便,至于选中哪种办法,还要看个人习惯和工作需要,但愿这篇文章对你有所帮忙!

【相关教程引荐】

1、html和CSS给文字增加删除线的三种办法(图文)

2. HTML教程

3. HTML在线手册

以上就是HTML和CSS实现字体加粗的三种办法的具体内容,更多请关注百分百源码网其它相关文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板