html5 css 字体加粗,HTML和CSS实现字体加粗的三种方法

大家在浏览网站时有没有注意到,页面中有些文字或字体加粗了,正在学习HTML和CSS的小伙伴,你知道HTML如何给文字加粗吗?CSS怎么设置字体加粗呢?这篇文章给大家总结了给字体和文字加粗的三种方法,包括HTML中的加粗标签以及CSS字体加粗样式,有一定的参考价值,感兴趣的朋友可以参考一下。

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

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

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

实例描述:创建两个p标签,给其中一个标签一个class类名,便于对其进行CSS样式设置。将font-weight: bold属性添加到有类名的p 标签上,对比两个p标签,看看有什么不同,具体代码如下:Html;toolbar:false">

.aa{font-weight: bold;}

床前明月光

低头思故乡

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

273645d9777f12da3fc4be12cf433e67.png

方法2:用Html中的加粗标签

标签可以使字体加粗,且所有主流浏览器都支持此方法。

实例描述:直接用Html中的标签,即可实现文字加粗效果,具体代码如下:

床前明月光

疑是地上霜

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

c9673e53e9f917d8bc747549843244d4.png

方法3:用Html中的加粗标签

标签可以定义一个粗体的文本,且所有主流浏览器都支持 标签。

实例描述:标签和标签一样,都可以给文字加粗,并且使用简单方便,具体代码如下:

床前明月光

举头望明月

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

c447a650501414e7500f3cc4652aa46d.png

总结:以上给大家介绍了给文字加粗的三种方法,分别是CSS中的font-weight: bold样式和HTML中的标签、标签,直接用Html标签比较方便,至于选择哪种方法,还要看个人习惯和工作需要,希望这篇文章对你有所帮助!

【相关教程推荐】

3. HTML在线手册

本文地址:http://itbyc.com/web/html5/19952.html

转载请注明出处。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

虾扯蛋之函数防抖和节流

背景 今天在coding的时候,做了一个搜索框,也正是这个搜索框,让我和后台小伙伴直接由铁磁变为塑料兄弟。那到底发生啥了呢?其实很简单,其实很无奈,就是我用王者的手速把他的接口访问崩了! 我们在…

四川省内二本计算机公立好的大学排名,四川有哪些二本院校是公立的?附四川省公立二本大学排名及分数线...

选择科目测一测我能上哪些大学选择科目领取你的专属报告>选择省份关闭请选择科目确定v>四川省内的公办大学一直以来都是历年高考生及家长关注的重点,本篇文章我将针对“四川省有多少所二本公立大学?有哪四川省内的公办大学一直以来都是历年高考生及…

NetBeans 7.4 Beta提示警告无效的异常处理

有许多例子说明Java异常处理可能比首次出现时要困难得多,Josh Bloch专门将一整章的《 Effective Java》 (两个版本)专门用于异常处理。 Java中的检查异常模型 仍然 “ 有争议” 。 我很高兴看到我最近下载的NetBeans 7.4 beta有一些提示&…

mysql5.7.17解压版安装_Windows中 MySQL5.7.17解压版安装步骤

1、先去MySQL官网下载。当前最新版是5.7.19,可能安装方法不同了,本人测试没有安装成功,若有安装成功的朋友,希望分享一下安装步骤。2、将下载的压缩包解压出来,然后在“MySQL解压目录”中新建“data”文件夹。如下图&a…

关于Java和Scala同步的五件事你不知道

实际上,所有服务器应用程序都需要在多个线程之间进行某种同步。 大多数同步工作是在框架级别为我们完成的,例如通过我们的Web服务器,数据库客户端或消息传递框架。 Java和Scala提供了许多组件来编写可靠的多线程应用程序。 这些包括对象池&am…

精读《你不知道的javascript》中卷

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书《你不知道的javascript》中卷介绍了该系列的两个主题:“类型和语法”以…

撸个微信小程序的省市区选择器

起因 微信小程序虽然已经有现成的封装好的省市区选择器给开发者使用,然鹅不幸的是,微信地址库的数据和公司用的地址库数据很难一一对上,那就只能撸起袖子自己写个组件了。 最终效果 思维导图 主要代码 组件 region-picker.js /* region-pic…

python之路_day6

本节内容&#xff1a;面向对象编程介绍为什么要用面向对象进行开发&#xff1f;面向对象的特性&#xff1a;封装、继承、多态类、方法、引子 你现在是一家游戏公司的开发人员&#xff0c;现在需要你开发一款叫做<人狗大战>的游戏&#xff0c;你就思考呀&#xff0c;人狗作…

MUI调用原生自定义方法实现计算缓存与清空缓存

由于项目需要最近在做webapp开发用的是MUI框架&#xff0c;自己本来是做原生开发的&#xff0c;在开发的时候有一个需求是实现计算缓存和清除缓存的功能&#xff0c;原生java方法实现轻轻松松&#xff0c;网上代码一大把&#xff0c;不过是webapp倒是不好搞&#xff0c;MUI自己…

Java中的多重继承与组合vs继承

有时我写了几篇有关Java 继承 &#xff0c; 接口和组成的文章。 在这篇文章中&#xff0c;我们将研究多重继承&#xff0c;然后学习组成优于继承的好处。 Java中的多重继承 多重继承是创建具有多个超类的单个类的能力。 与其他一些流行的面向对象的编程语言&#xff08;例如C …

开源|蚂蚁金服开源AntV F2:一个专注于移动,开箱即用的可视

小蚂蚁说&#xff1a;AntV 是蚂蚁金服全新一代数据可视化解决方案&#xff0c;主要子产品包括 G2、G6、F2。此前我们已经相继发布过AntV的相关开源消息与版本迭代&#xff0c;包括《蚂蚁金服开源&#xff1a;数据驱动的高交互可视化图形语法G2》&#xff0c;《开源 | 蚂蚁金服开…

Puppeteer入门初探

本文来自网易云社区作者&#xff1a;唐钊最近在看 node 爬虫相关的一些东西&#xff0c;我记得还是很久以前常用的 node 爬虫工具还是 superagengtcherrio,他们的思路是通过发起 http 请求然后截取 respone 的内容&#xff0c;但是随着前端mvvm等框架的盛行&#xff0c;现在更多…

访问量大如何增加服务器,服务器流量过大原因及解决方法

造成网站服务器流量过大的原因&#xff1a;1.网站规模较大(比如门户网站、网络商城等)&#xff0c;即网站本身访问量需求大&#xff0c;查看网站的Page View值、Hits值、日流量都很高。2.网站页面设计不合理&#xff0c;页面中包含大图片或音频、视频文件等文件&#xff0c;导致…

关于VUE项目地图开发中大量点标记绘制一些总结

问题说明 在地图开发中&#xff0c;当地图中绘制大量的标记点后&#xff0c;无论是拖动或者缩放&#xff0c;都会感觉到明显的卡顿现象。&#xff08;一般超过800个点后就比较明显了&#xff09;.在平时的工作业务中&#xff0c;由于公司的实时监控页面需要展现5000-20000车辆…

如何使用Java 5 Executor框架创建线程池

Java 5以Executor框架的形式在Java中引入了线程池&#xff0c;它允许Java程序员将任务提交与任务执行分离。 如果要使用Java进行服务器端编程&#xff0c;则线程池是维护系统可伸缩性&#xff0c;鲁棒性和稳定性的重要概念。 对于那些不熟悉Java中的线程池或这里的线程池的概念…

使用NetBeans 7.4 beta提示进行更好的基于JUnit的单元测试

在上一篇文章中 &#xff0c;我写了NetBeans 7.4 beta中提供的提示 &#xff0c;这些提示提高了开发人员避免Java异常处理带来的讨厌的运行时问题的能力。 在本文中&#xff0c;我将研究如何使用NetBeans 7.4 beta提供的另外两个提示使单元测试在执行单元测试期间更加正确和清晰…

Web 开发中 Blob 与 FileAPI 使用简述

本文节选自 Awesome CheatSheet/DOM CheatSheet&#xff0c;主要是对 DOM 操作中常见的 Blob、File API 相关概念进行简要描述。 Web 开发中 Blob 与 FileAPI 使用简述 Blob 是 JavaScript 中的对象&#xff0c;表示不可变的类文件对象&#xff0c;里面可以存储大量的二进制编…

服务器e系列和l的区别,i.e.和 e.g.的区别和使用方法

举例说明在很多文章中都有使用过&#xff0c;我想这个对大家应该并不陌生&#xff0c;但是大家知道ie和eg的区别吗&#xff0c;他们两个都是举例子的缩写词&#xff0c;但是他们之间的区别大家知道吗&#xff0c;今天我们就来介绍下这两个举例说明的缩写词到底有什么不一样。一…

通过基于JDBC的用户存储部署Identity Server

在这篇文章中&#xff0c;我将演示如何使用JDBC用户存储配置WSO2 Identity Server。 为了演示&#xff0c;我使用的是MySQL用户存储&#xff0c;但是相同的过程也适用于任何其他JDBC用户存储。 我的环境是 操作系统– Ubuntu 12.10 Java – 1.6 WSO2是4.5.0 设置MySQL数据库…

前端路由实现原理(history)

前端路由实现&#xff08;history&#xff09; 了解&#xff1a; HTML5 history新增了两个API:history.pushState和history.replaceState 两个api都接受三个参数 状态对象&#xff08;state object&#xff09;&#xff1a;一个JavaScript对象&#xff0c;与用pushState()方法…