div css font-weight加粗(bold normal)样式教程篇
在HTML布局中除了使用b标签或strong标签对文字直接实现加粗样式,在CSS加粗样式属性中 font-weight也是实现布局中文字加粗效果样式。
一、认识font-weight语法与结构
1、font-weight
用于设置对象内文字加粗或不加粗。
2、font-weight语法与结构
font-weight语法:
font-weight : normal | bold| bolder | lighter | number
.abc{font-weight:bold}
设置class=abc对象内的文字为加粗显示样式。
font-weight值参数介绍:
normal : 正常的字体。相当于number为400。声明此值将取消之前任何加粗或本身加粗样式效果,不加粗作用
bold : 粗体。相当于number为700。也相当于html b 加粗对象的作用
bolder : IE5+ 特粗体
lighter : IE5+ 细体
number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
3、font-weight推荐使用值
font-weight 可设置具体100-900的数字为加粗值,但由于浏览器兼容问题,对不同数字解释显示加粗情况不同,一般设置400以上加粗效果才显示出,一般不推荐使用。
加粗推荐使用bold值:
font-weight:bold
不加粗(去掉加粗)推荐使用normal值
font-weight:normal
实现不加粗去掉加粗样式,比如b\strong\h1\h2等标签默认情况是加粗字体,对这类标签设置font-weight:normal后将实现这类标签内文字不再是加粗样式。
4、font-weight设置值的对应解释图
css font-weight对应值分析图
二、HTML加粗标签和CSS加粗样式两个加粗认识
1、HTML加粗标签
在HTML中对文字直接加粗可以使用<b>或<strong>标签来实现。两个加粗标签用法效果相同,根据需求选择。
<b>我在b标签内被加粗</b>
<strong>我在strong标签内被加粗</strong>
html b和strong加粗HTML代码与加粗效果截图
2、CSS加粗font-weight样式
除了HTML标签来实现文字字体加粗,后来CSS也可以实现文字加粗样式,并且也兼容各大浏览器,也就是font-weight加粗样式,如果要对对象文字加粗只需要对对象设置font-weight:bold即可实现粗体。
三、html标签粗体、font-weight粗体样式实例
1、加粗粗体实例介绍
HTML8通过b标签、strong标签实现文字粗体加粗;又对div class=abc内文字设置font-weight bold加粗;又对h3标签取消默认加粗(不加粗)样式使用font-weight normal实现。
2、font-weight取消粗体与font-weight加粗、html标签加粗实例代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>font-weight教程实例 在线演示 HTML8</title>
<style>
.abc{ font-weight:bold}
/* 设置粗体 */
.noweight{ font-weight:normal}
/* 取消加粗 */
</style>
</head>
<body>
我是正常字<br>
<b>我在b标签内被加粗</b><br />
<strong>我在strong标签内被加粗</strong>
<div class="abc">我在DIV内设置font-weight:bold加粗</div>
<h3>我在h3标签内默认是加粗的</h3>
<h3 class="noweight">我在h3标签内 设置font-weight:normal取消加粗</h3>
</body>
</html>
html加粗与css加粗和CSS不加粗实例代码。
3、font-weight加粗 font-weight不加粗实例截图
div css font-weight加粗与不加粗,html加粗标签实例截图
4、font-weight在线演示与打包下载
div+css font-weight实例在线演示
加粗 不加粗实例打包下载
四、font-weight总结
我们什么时候选择HTML标签加粗,什么时候使用font-weight bold加粗,这个没有死规定的,一般对标签里全部文字设置粗体使用css font-weight加粗样式比较简单,如果一段文字里某些字加粗,可以选择B或strong标签进行加粗。在布局过程中b strong和font-weight都不能丢,不要学习font-weight加粗就不用或抛弃html粗体这样是错误的。有时适当使用b或strong加粗有利于SEO优化,同时有时直接使用HTML标签加粗便于布局,所以在实践中不断总结什么时候用CSS加粗什么时候用HTML加粗,根据需求和经验来选择加粗方式。