位置: IT常识 - 正文

2.前端笔记-CSS-字体属性(前端css要掌握到什么程度)

编辑:rootadmin
2.前端笔记-CSS-字体属性 1.字体系列

推荐整理分享2.前端笔记-CSS-字体属性(前端css要掌握到什么程度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端css3,css前端设计,前端css3,前端css是什么意思,前端的css,前端css js,前端css js,前端css要掌握到什么程度,内容如对您有帮助,希望把文章链接给更多的朋友!

CSS使用font-family属性定义文本的字体系列

body {font-family:"思源黑体","Microsoft YaHei";}

建议:使用英文写字体的属性值,尽量使用系统默认自带字体,保证在任何用户的浏览器都可以显示 微软雅黑-Microsoft YaHei 说明: font-family可以同时赋多个属性值的原因是:如果用户电脑未安装第一种字体,就依次类推用其他字体进行渲染。如果都没有,就使用浏览器默认字体。

2.字体大小

谷歌浏览器默认16px(像素),尽量给设置大小,不要默认大小。

body {font-size: 16px;}

给body设置时,会发现标题标签比较特殊,所以需要给标题标签进行单独设置

<!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> body { font-size: 16px; font-family:'Times New Roman', Times, serif; } </style></head><body> <h2>前端学习</h2> <p>HTML</p> <p>CSS</p> <p>JS</p></body></html>2.前端笔记-CSS-字体属性(前端css要掌握到什么程度)

<!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> body { font-size: 16px; font-family:'Times New Roman', Times, serif; } h2 { font-size: 16px; } </style></head><body> <h2>前端学习</h2> <p>HTML</p> <p>CSS</p> <p>JS</p></body></html>

3.字体粗细body {font-weight: bold;}

属性值:

属性值含义normal正常字体,默认.相当于number=400bold粗体,相当于number=700,与b标签粗细一致bolder特粗体lighter细体number直接设置字体大小,100,200…900,后边没有单位<!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> body { font-weight: 400; } h2 { font-weight: 400; } </style></head><body> <h2>前端学习</h2> <p>HTML</p> <p>CSS</p> <p>JS</p></body></html>

4.文字样式body {font-style: }

属性值: normal–默认值,标准体 italic–斜体

<!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> body { font-weight: 400; font-style: italic; } h2 { font-weight: 400; } </style></head><body> <h2>前端学习</h2> <p>HTML</p> <p>CSS</p> <p>JS</p></body></html>

很少给文字加斜体,但可以使用font-style将(em\i)标签改为不倾斜(font-style:normal)

5.字体的复合属性

需求:将文字的样式设置为斜体,加粗,大小为16px,样式为微软雅黑 使用符合属性之前,代码这样:

<!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> div { font-size: 16px; font-weight: bold; font-family: 'Microsoft yahei'; font-style: italic; } </style></head><body> <div>允许一切发生,倒霉蛋儿</div></body></html>

使用复合属性: 顺序和格式:必须按照以下书写顺序,可以省略,但font-size和font-family必须保留 font:font-style,font-weight,font-size/line-heght,font-family

<!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> div { font-size: 16px; font-weight: bold; font-family: 'Microsoft yahei'; font-style: italic; } .words { font: italic bold 16px 'Microsoft yahei' } </style></head><body> <div>允许一切发生,倒霉蛋儿</div> <div class="words">允许一切发生,倒霉蛋儿</div></body></html>

本文链接地址:https://www.jiuchutong.com/zhishi/287236.html 转载请保留说明!

上一篇:【Vue】跳转外部链接并携带参数并触发(vue跳转到外部链接且带上参数)

下一篇:最高成本的手机系统是什么(最高成本的手机是哪款)

  • 复合计征消费税例题
  • 什么负债计税基础为零
  • 应交税费明细科目怎么记账
  • 公司买手表账务处理
  • 未达起征点的增值税怎么做账
  • 已暂估入库原材料,确认收不到发票怎么调账
  • 转登记为小规模纳税人未抵扣的进项税额
  • 资产负债表专项储备放哪个科目?
  • 职工暖气费报销算福利
  • 现金折扣怎么进账
  • 库存商品结转成本的金额怎么计算
  • 商业地产会计核算流程
  • 收到购货单位货款属于什么会计科目
  • 新成立公司注资流程
  • 外币账户的银行信息在哪查询
  • 代账报税软件哪个好
  • 怎么查找企业核算报告
  • 普票红冲部分金额的发票怎么开
  • 办公室租金相关法规
  • 进项发票和销项发票金额相同还需要交税金吗
  • 购进固定资产抵扣时咋填报增值税
  • 中国公司可以给境外公司开发票吗
  • 盈余公积金什么时候计提
  • 小规模跨年发票可以入账吗
  • 所得税补缴自查需要缴纳什么
  • 返还经费
  • 工程费用包括哪几类
  • 电梯管理费属什么类别
  • 第二季度的利润表报错了,怎么重新报
  • 酒店装修费用会计处理
  • 资产置换税务处理案例
  • 没有走公户的发票费用怎么做账
  • 人力资源外包公司发展前景
  • 华为鸿蒙系统开发平台
  • 运输服务费和运输费分别计入什么科目
  • 合伙企业需要交哪些税
  • win11发布时间正式确定
  • php字符串定义
  • 外币兑换业务的银行
  • 企业固定资产计提折旧是以什么为前提
  • 增资后股权转让
  • 取得海关专用缴款书的会计分录
  • vue图片点击放大
  • lspci命令显示
  • php判断用户名是否正确
  • nohup命令挂不上 每次都直接退出
  • 会计在账本上怎么记账
  • 利润分配和所有权的关系
  • 委托代理出口账务处理
  • 开具增值税专用发票是什么意思
  • 股权转让认缴出资期数怎么填
  • 清单应该盖公章还是财务章
  • 织梦tag标签怎么用
  • 契税通过应交税费科目核算吗
  • 车间费用计入什么
  • 应收款项计提坏损怎么算
  • 银行询证函费用发票
  • 免税发票怎么抵扣
  • 调整去年管理费用怎么做分录
  • 发票丢失了怎么报销
  • mysql时间语句
  • win7 bug
  • centos基本操作
  • docker mysql 数据存储容器目录
  • win10重置此电脑保留我的文件
  • Linux系统安全管理的内容包括
  • ubuntu误删除内核
  • macappstore下载软件一直要密码
  • cocos2djs教程
  • 比较漂亮的一个字
  • python模糊搜索字符串
  • python对excel操作真的有提高吗
  • bootstrap要学吗
  • JavaScript中定义数组
  • js鼠标滚动控制图片缩放
  • python系统代码
  • 云南国家税务局官网登录入口
  • 历年房产税
  • 合伙企业的税收较高
  • 新疆塔城靠近俄罗斯吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设