css设置字体粗细的属性是什么

css设置字体粗细的属性是font-weight属性,该属性的取值为“lighter”、“normal”、“bold”和“bolder”;“lighter”为细体,“normal”为正常粗细,“bold”为粗体,“bolder”为特粗体。

css设置字体粗细的属性是什么

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

在CSS中,通过 font-weight属性 用来设置字体的粗细值,取值为 lighter | normal | bold | bolder,默认为 normal。lighter 为细体,normal 为正常粗细,bold 为粗体,bolder 为特粗体。如:

.lighter { font-weight: lighter;} .normal { font-weight: normal;}.bold { font-weight: bold;}.bolder { font-weight: bolder;}

字体粗细: lighter

字体粗细: normal

字体粗细: bold

字体粗细: bolder

上述代码定义了 4 种不同粗细的字体,按顺序依次变粗。运行结果如图所示:

css设置字体粗细的属性是什么

立即学习“前端免费学习笔记(深入)”;

【推荐教程:CSS视频教程】

为了实现更细致的控制,CSS也允许使用数字来设置字体的粗细。数字必须是100的整数倍,取值在100~900 之间,值越大字体越粗。400 等同于 normal,700 等同于 bold。不同取值的结果如图所示:

2.png

浏览器会自动为一些元素(如,strong、h1~h6 和b)添加粗体格式,有些元素还继承了父元素粗体格式,可以通过 font-weight: normal 来取消这些元素的粗体格式。

更多编程相关知识,请访问:编程视频!!

以上就是css设置字体粗细的属性是什么的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1618580.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 06:18:49
下一篇 2025年12月24日 06:18:58

相关推荐

  • css中如何设置英文首字母大写

    css中可使用text-transform属性来设置英文首字母大写。text-transform属性可控制文本的大小写,只需要给包含英文字母文本的元素设置“text-transform:capitalize;”代码样式即可实现首字母大写。 本教程操作环境:windows7系统、CSS3&&a…

    好文分享 2025年12月24日
    000
  • css如何实现轮播图效果

    在css中,可以使用“@keyframes”规则和“animation”属性定义动画来实现轮播图切换效果。动画是使元素从一种样式逐渐变化为另一种样式的效果。可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 本教程操作环境:windows7系统、CSS3&&HTM…

    2025年12月24日
    000
  • css怎么把div设置成爱心

    css把div设置成爱心的方法:首先创建一个HTML示例文件;然后准备一个dom元素,并为其id赋值为heart;接着操作伪元素;最后将before和after两块内容旋转绘制成心形即可。 本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑 使用 css…

    2025年12月24日
    000
  • css背景色怎么取消

    css取消背景色的方法:首先打开相应的HTML文件;然后在设置好背景颜色的代码上添加“background-color:transparent;”即可去掉背景颜色。 本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑 css背景色取消: 非常简单! 只需…

    2025年12月24日
    000
  • css怎么实现禁止换行并超出隐藏

    css实现禁止换行并超出隐藏的方法:首先创建一个HTML示例文件;然后在body中创建一些文字内容;最后通过“white-space”以及“text-overflow”属性来实现内容禁止换行并超出隐藏即可。 本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3…

    2025年12月24日
    000
  • css怎么给button设置阴影

    css给button设置阴影的方法:首先创建一个HTML示例文件;然后设置一个button按钮;最后通过给button添加“box-shadow”等属性来实现阴影效果即可。 本文操作环境:Windows7系统、HTML5&&CSS3版,DELL G3电脑 css3做一个带阴影的but…

    2025年12月24日
    000
  • css文本设置主要有哪几项属性

    css文本设置主要的属性有:font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction等等。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • css中设置段落缩进的属性是什么

    css中设置段落缩进的属性是“text-indent”,语法格式“text-indent:length|%;”;当值为“length”时可定义固定的缩进,当值为“%”类型时可定义基于父元素宽度的百分比的缩进。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell …

    2025年12月24日
    000
  • css表格中如何居中

    css表格居中的方法:首先新建html文件,并在【index.html】中的【】标签中输入css代码;然后浏览器运行【index.html】页面即可。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css表格居中的方法: 1、首先,打开html编辑器,新建html文件,例如…

    2025年12月24日 好文分享
    000
  • 详解CSS处理长短文本内容的几种小技巧(值得收藏)

    本篇文章给大家分享一些css处理短内容和长内容的小技巧。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题。 在许多情况下,添加或删除一个单词会改变 UI 的…

    2025年12月24日 好文分享
    000
  • 使用纯CSS画一个圆环(代码示例)

    本篇文章通过代码示例介绍一下使用纯css画圆环的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 画圆环思想很简单:首先画两个圆,设置不同的背景色;然后让两个圆的圆心重合即可。 难度系数 ☆☆ 立即学习“前端免费学习笔记(深入)”; HTML 解析: 此处有父容器 CSS .c…

    2025年12月24日
    000
  • Css如何实现tab选项卡切换

    Css实现tab选项卡切换的方法:利用target的特性,可以实现纯css的tab效果切换,代码为【#tab1:target,#tab2:target,#tab3:target{z-index:1;}】。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 Css实现tab选项卡…

    2025年12月24日
    000
  • 前端css如何实现箭头

    前端css实现箭头的方法:设置箭头盒子,在div里设置属性即可,代码为【】。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 前端css实现箭头的方法: 效果图: 立即学习“前端免费学习笔记(深入)”; htm部分: css部分: .arrow_box{ width:100p…

    2025年12月24日
    000
  • css如何将图片并排

    css将图片并排的方法:首先用li标签把两张图片用代码写出来;然后加入css代码,注意margin和opacity的属性;最后在代码上添加上相应的css。 本教程操作环境:windows7系统、Adobe Dreamweaver cc2020版,DELL G3电脑。 css将图片并排的方法: 1、打…

    2025年12月24日 好文分享
    000
  • css怎么消除块元素

    css消除块元素的方法:首先把【inline-block】元素的父元素的font-size设为0,【letter-spacing】和【word-spacing】设为负数;然后再在【inline-block】元素中把这几个值恢复正常即可。 本教程操作环境:windows7系统、css3版,DELL G…

    2025年12月24日
    000
  • 使用纯CSS实现圆形导航菜单效果(代码示例)

    本篇文章文章通过代码示例来介绍一下使用纯css实现炫酷圆形导航菜单效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 【推荐教程:CSS视频教程】 废话不多说,直接上代码 css: 立即学习“前端免费学习笔记(深入)”; body { background-color: #…

    2025年12月24日
    000
  • css中定位position属性的用法是什么

    css中定位position属性的用法:1、一般的标签元素不加任何定位属性都属于静态定位;2、绝对定位的元素从文档流中拖出;3、相对定位元素不可层叠;4、固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。 本教程操作环境:windows7系统、css3版,DELL G3…

    2025年12月24日
    000
  • 在css中怎样添加脚注

    在css中添加脚注的方法:注释是以“斜杠+星号”开始,“星号+斜杠”结束,需要注意是注释字符均为英文半角小写,语法为【/* 注释内容 */】。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 在css中添加脚注的方法: CSS注释语法为: /* 注释内容 */ 注释是以“斜杠…

    2025年12月24日
    000
  • css有哪几类样式

    css有三种类样式,分别是:1、行内样式,结构的内部,即写在标签内的样式;2、外联式是将所有的样式放在一个或多个以【.css】为扩展名的外部样式表文件中;3、内联样式写在HTML页面内部,存放于head标记当中。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 CSS样式主要…

    2025年12月24日
    000
  • css中列表样式是什么

    css中列表样式是:1、css有序列表【ol】和css无序列表【ul】;2、css列表标号样式【list-style-type】;3、css标号样式的显示方式【list-style-position】。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css中列表样式是: 1…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信