您的位置:内蒙古11选五开奖5号的 > DIV CSS基础 > 正文

内蒙古11选5:font-weight 【CSS加粗】粗体(bold normal)教程

div css font-weight加粗(bold normal)样式教程篇

内蒙古11选五开奖5号的布局中除了使用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对应值分析图
css font-weight对应值分析图

二、HTML加粗标签和CSS加粗样式两个加粗认识

1、HTML加粗标签
在HTML中对文字直接加粗可以使用<b>或<strong>标签来实现。两个加粗标签用法效果相同,根据需求选择。

<b>我在b标签内被加粗</b> 
<strong>我在strong标签内被加粗</strong>

html b和strong加粗HTML代码与加粗效果截图
html b和strong加粗HTML代码与加粗效果截图

2、内蒙古11选五开奖5号的加粗font-weight样式
除了HTML标签来实现文字字体加粗,后来CSS也可以实现文字加粗样式,并且也兼容各大浏览器,也就是font-weight加粗样式,如果要对对象文字加粗只需要对对象设置font-weight:bold即可实现粗体。

三、html标签粗体、font-weight粗体样式实例

1、加粗粗体实例介绍
ThinkCSS通过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教程实例 在线演示 ThinkCSS</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不加粗实例截图

font-weight加粗与不加粗,html加粗标签实例截图
内蒙古11选五开奖5号的 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加粗,根据需求和经验来选择加粗方式。

相关标签: 加粗 粗体
如需转载,请注明文章出处和来源网址:www.thinkcss.com/css/882.shtml

日期:2016-06-02 16:51:59 来源:内蒙古11选五开奖5号的 www.phlmy.com 作者:div+css
  • 图解:从中国新闻奖、长江韬奋奖看人民日报70年 2019-06-27
  • 江夏区宣传干部培训班圆满落幕 荆楚网携手江夏区委宣传部举办 2019-06-26
  • 供应链如何更“智慧” 2019-06-17
  • 推动民营企业创新发展 2019-05-31
  • 【北京中汽双会车型报价】北京中汽双会4S店车型价格 2019-05-31
  • 弘扬光荣传统 勇立时代潮头 忠实履职尽责 2019-05-30
  • 世界很多国家想拥有核弹,但迫于种种原因而没能实现。 2019-05-25
  • 阿呆,那是你家远祖啊,还不跪拜?[哈哈] 2019-05-15
  • 泰国推出“智慧签证”吸引人才 2019-05-15
  • “印象”世界杯:揭幕战红色风暴席卷绿茵场 2019-04-29
  • 衡阳日报社副社长周卫国祝贺人民日报创刊70周年 2019-04-27
  • 国乒在日本全面溃败!刘国梁却在参加综艺节目 2019-04-21
  • 张琳芃球衣事件折射中超不职业 因打亚冠要多道程序 2019-04-21
  • 出租广州市番禺区大龙街东兴路476号4楼物业空置部分 2019-04-17
  • 美媒盘点地球上最强5款战略核潜艇:毁灭世界比外卖都快 2019-04-17
  • 北单开奖sp几点公布 中彩网走势图表机选 电子游戏投注送二八红利 中国足彩网上投注 上海新时时彩开奖走势 重庆时时彩app安卓系统 江西快三开奖结果和值 体彩福建36选7第18129 体彩7星彩号码多少 安徽快三走势图一定牛 排球技术 足球4场进球中奖规则 北京十一选五任5遗漏 五分彩软件 香港赛马会图片