首页 > 其他分享 >字体系列标签

字体系列标签

时间:2023-01-09 17:55:38浏览次数:35  
标签:style 系列 weight normal color 标签 字体 font

代码和运行结果就放到后面去了,我们平时很少改文字为斜体,都是把它改成不倾斜的
em和i两个标签都是表示倾斜的,但它们两个也是有区别的

font复合属性可以把多个font属性的标签合为一体,这样写更节约代码,但在写的过程中,必须按照它的语法格式来写,不能更换顺序
下面是font属性的总结

 

 

 

 下面就是整个代码
<!DOCTYPE html>

<html lang="en">

 

<head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         p {             color: palevioletred;             font-weight: bold;             /* bold是加粗,normal是正常 */         }

 

        div {             color: pink;             font-weight: normal;         }

 

        span {             color: red;             font-weight: 400;             /* 可以使用纯数字来表示,取值范围在100-900的整百数,常用的是400和700             字体大小默认为400就是正常的大小,加粗是700             注:不是所有字体都提供了九种粗细,所以部分取值在网页中是没有变化的*/         }

 

        #color {             color: red;             font-weight: 700;         }

 

        #style1 {             font-style: italic;             /* 上述字体样式是倾斜的,还有一种是normal,和前面的一样的是正常的,写或不写都没啥差别 */         }

 

        em {             /* font-style: normal; */         }

 

        i {             font-style: normal;         }

 

        #comprehensive

 

        /*font的复合属性*/             {             /* 现在要使指定的div中的字体样式改为倾斜,加粗,30px,微软雅黑 */             /* font: font-style font-weight font-size/line-height font-family;             必须要按照上面的顺序来写,不能更换顺序,各个属性之间用空格隔开 */             font: italic bold 30px '微软雅黑';         }     </style> </head>

 

<body>     <p>木更老婆</p>     <div>神子老婆</div>     <span>胡桃老婆</span>     <span id="color">胡桃老婆</span><br>     以下为小黑子交流区     <br>     <br>     <br>     <br>     <br>     <br>     <br>     <br>     <br>     <br>     <div id="style1">歪歪扭扭的</div>     <em>你干嘛~哎呦</em><br>     <i>鸡你太美</i><br>     <div id="comprehensive">你们越黑,我家哥哥就越火,他越火烤的就越香,等它出炉时你们别流口水</div> </body>

 

</html>  这是网页的展示效果

标签:style,系列,weight,normal,color,标签,字体,font
From: https://www.cnblogs.com/feng-233/p/17037776.html

相关文章

  • HTML_4_内嵌标签与框架标签
    内嵌标签:iframe,在页面内选定一块区域显示指定的其它网页。例子:实现了点击超链接后在页面内的窗口,打开对应网页。<html><head><title>内嵌标签学习</......
  • Python工具箱系列(二十二)
    互联网世界里最流行的开源关系型数据库之一就是MySQL/MariaDB了,由于高度的相似,故而直接使用mysql统一指称。windows下的安装windows最吸引人的地方就在于易于安装。mysql......
  • 推荐10个强大的谷歌插件,程序猿必备!不看后悔系列!
      相信经常在网上"冲浪"的程序猿们一定都知道,哪一款浏览器用的人最多。毫无疑问,谷歌浏览器由于其稳定,高效,简洁的特点已经俘获了大批用户的芳心。另外,谷歌浏览器相较于......
  • ASMFD系列三:AFD的安装和建议
    我们的文章会在微信公众号“Oracle恢复实录”和博客网站“www.htz.pw”同步更新,欢迎关注收藏,也欢迎大家转载,但是请在文章开始地方标注文章出处,谢谢!由于博客中有大量代码,通......
  • 河北稳控科技振弦采集模块电子标签测量(智能振弦传感器)
    河北稳控科技振弦采集模块电子标签测量(智能振弦传感器) 此功能在SF3.52版本时增加。固件版本V3.52修改固件版本号为V3.52_2201009。增加了电子标签测量功能。WKMO......
  • 振弦采集模块电子标签测量(智能振弦传感器)
    河北稳控科技振弦采集模块电子标签测量(智能振弦传感器)此功能在SF3.52版本时增加。固件版本V3.52修改固件版本号为V3.52_2201009。增加了电子标签测量功能。WKMOD.......
  • yolo,ssd系列
    YOLOv1​​YOLO算法的原理与实现​​​​死磕YOLO系列,YOLOv1的大脑、躯干和手脚​​YOLOv2​​史上最通俗易懂的YOLOv2讲解​​​​目标检测YOLOv2最详细解释!​​YOLOv3​......
  • 七、k8s入门系列----Ingress
    原文网址:https://www.cnblogs.com/fenggq/p/15061842.html七、k8s入门系列----Ingress 上节讲到当k8s集群多个业务需要80端口提供业务时,可以使用LoadBlanceServ......
  • HTML_2_常用head标签
    head标签是html组成的一个部分,主要用于配置页面信息。  标题标签:<title>网页标题!</title>编码格式标签:<!--编码配置:html5--><metacharset="UTF-8"><!--编......
  • 操作标签文本;增加删除节点
    ​ innerHtml操作双标签中间的HTMLinnerText 操作双标签中间的Textvalue   操作表单标签值 <!DOCTYPEhtml><html><head><......