H5C3练习心得 2024.01.04(鼠标悬停缩放效果)--box-shadow,font字体,文本样式

news2025/6/2 9:53:52

(一)box-shadow

1.作用

为盒子添加阴影

2.属性语法

box-shadow:h-shadow v-shadow blur spread color position

  • h-shadow:水平阴影的的位置,允许负值(必填)
  • v-shadow:垂直阴影的位置,允许负值(必填)
  • blur:模糊的距离(选填)
  • spread:阴影的尺寸(选填)
  • color:定义阴影的颜色(选填)
  • position:定义内外阴影,inset为内阴影,默认为外阴影(选填)

注意: 

  • 默认是外阴影但是不能写outset,否则会失效,只有当需要内阴影时写inset。
  • 盒子阴影不占空间,不会影响盒子排列。

 (二)font

1.定义

font属性用于设置文字的复合属性 :文本的正斜、字体粗细、字体大小、字体、字体尺寸。

2.属性

  • font-style:用于设置字体风格
  • font-weight:用于设置字体粗细
  • font-size:用于设置字体的大小
  • font-family:用于设置字体

语法:

选择器 { font: font-style font-weight font-size/line-height font-family;}

使用font属性时,必须按照上述属性的顺序书写且必须有font-sizefont-family属性,否则font属性不起作用

(1)font-style

设置字体风格

属性值:

  • normal:默认值,标准字体样式
  • italic:显示斜体样式
(2)font-weight

 设置字体粗细

(3)font-size

设置字体大小

(4)font-family

设置字体

可以同时设置多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体,
如果都没有,则以我们电脑默认的字体为准。

同时罗列多个字体的写法:

选择器{font-family: Arial,“Microsoft Yahei”, “微软雅黑”;}

如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如font-family: “Times New Roman”;,尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
 

(三)文本样式

1.文本缩进

文本缩进的属性为text-indent,值为数字加px或者数字加em(常用到需要文本缩进)

2.文本水平对齐

文本水平对齐的属性为text-align,值为left,center,right

3.文本修饰

文本修饰的属性为text-docoration,默认值为none,其他值为underline(文本下划线)、line-through(文本删除线)、overline(文本上划线),在开发中,一般会使用text-decoration:none来清除a标签默认的下划线效果

4.文本行高(important)

调整文本行高的属性为line-height,这样可以让文本显示不那么拥挤!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1355483.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python 自学(四) 之元组字典与集合

目录 1. 列表,元组,字典与集合的区别 2. 元组的创建和删除 tuple() del P101 3. 单个元素的元组 P102 4. 元组元素的修改 P106 5. 元组的使用场景 6. 字典的创建和删除 dict() zip() : del clear() P1…

草图大师 sketchup pro2023

SketchUp Pro是一款功能强大的三维建模软件,适用于建筑、机械、室内设计等领域。它提供了丰富的绘图工具和灵活的建模选项,支持实时预览和多种设备适配,让用户能够快速高效地创建出逼真的三维模型。SketchUp Pro还具备强大的插件生态和团队协…

ArrayList集合综合练习

文章目录 题目1训练目标训练提示训练步骤参考答案 题目2训练目标训练提示参考方案训练步骤参考答案 题目3训练目标训练提示参考方案训练步骤参考答案 题目4(综合)训练目标训练提示参考方案训练步骤参考答案 题目1 现有如下字符串元素:[“aaa…

Go语言基本数据类型

Go语言基本数据类型 1.整型2.浮点型3.复数4.布尔型5.字符串窥探字符串类型字符串内建函数UTF-8编码字符串处理相关的四个包字符串和数字的转换 6.常量 1.整型 Go语言同时提供了有符号和无符号类型的整数运算。这里有int8、int16、int32和int64四种截然不同大小的有符号整数类型…

2024,这将是量子计算的真正挑战

2023年,一项项量子计算纪录被打破。 谷歌量子AI团队证明了将多个量子比特分组合成为一个逻辑量子比特的纠错方法可以提供更低的容错率。以往的纠错研究随着比特数的增加,错误率会提高,都是“越纠越错”,而这次谷歌首次实现了“越纠…

小兔鲜儿 - 订单模块

目录 填写订单页​ 静态结构 购物车结算​ 立即购买​ 页面传参​ 选择收货地址​ 提交订单​ 订单详情页​ 静态结构​ 自定义导航栏交互​ 获取订单详情​ 订单状态​ 再次购买​ 支付倒计时​ 订单支付​ 微信支付说明​ 参考代码​ 支付成功页​ 模拟发…

网络类型之GRE和MGRE和NHRP

GRE-通用路由封装 是一种简单的三层VPN封装技术,属于虚拟的点到点网络类型 优点:支持IP 网络作为承载网络、支持多种协议、支持IP 组播,配置简单,容易布署。 缺点:缺少保护功能,不能执行如认证、加密、以…

基于SSM实现的社区论坛系统(附PPT、设计文档)

基于SSM实现的社区论坛系统(附PPT、设计文档) 文章目录 基于SSM实现的社区论坛系统(附PPT、设计文档)系统介绍技术选型成果展示设计文档用户端管理员端 源码获取账号地址及其他说明 系统介绍 基于SSM实现的社区论坛系统是一款前后…

Stable Diffusion汉化插件

今天为大家介绍Stable Diffusion的两种UI汉化包,一种是汉化包,就中文界面,方便大家对于繁杂的参数的模型的操作,一种是中英文对照界面,在中文提示下,同时显示英文,不但方便设置也同时学习了英文…

五大安全须知,享受酒精壁炉温馨每一年

酒精壁炉作为一种独特的取暖方式,受到了越来越多家庭的喜爱。然而,为了确保使用过程中的安全性,需要熟悉并遵循一些关键的事项。 选择合适的酒精燃料 在使用酒精壁炉之前,最好是确保使用纯度为95%至97%的工业酒精。避免使用含有…

开源知识库对比,到底哪个才最好用?

在现代信息社会,知识的获取和共享变得越来越重要。为了更好地管理和传播知识,越来越多的人开始关注开源知识库的使用。但是,在众多开源知识库中,到底哪个才最好用呢?本文将对比三款开源知识库,以帮助读者做…

openmediavault(OMV) (27)网络(2)adguardhome

简介 AdGuard Home 是一个开源的网络广告和隐私保护解决方案,它充当局域网中的 DNS 服务器,提供广告拦截、跟踪器阻止和家长控制等功能。它可以在个人电脑、树莓派或其他支持的硬件设备上运行。 AdGuard Home 的主要功能包括: 广告拦截:AdGuard Home 使用广泛维护的广告…

点击出现视频弹框

<VideoPlayer ref"video":size"{ width: 88%, height: 100% }" :videoSrc"currentVideo.url"></VideoPlayer>import VideoPlayer from /components/video-player.vue

2023最大技术潮:大模型冲击下的智能汽车

作者 |德新 编辑 |王博 过去这年最大的技术潮&#xff0c;非大模型莫属。 2023年初&#xff0c;由ChatGPT掀起的浪花&#xff0c;迅速地演变成了席卷全球的AI科技浪潮。汽车行业在其中也不可避免。各大车企纷纷投入与大模型相关的布局。 长城官宣成立了AI Lab&#xff0c;到…

共享企业文件数据信息:实用方法与技巧分享

在当下快节奏的企业办公生活中&#xff0c;如何有效且高效的进行企业文件数据信息共享&#xff0c;保持企业竞争力&#xff0c;是许多企业团队面临的问题。 诚然&#xff0c;社交媒体工具的出现可以缓解企业信息共享协作的痛点。然而&#xff0c;多平台工具的交叉使用又使企业…

上海晋名洗眼房助力新材料行业安全防护

近期上海晋名又有五台紧急冲淋洗眼房项目顺利交付&#xff0c;此次项目主要用于新材料行业日常工作中的安全防护。 用户单位2017年成立&#xff0c;是一家清洗液系列、微电子与半导体领域、光电材料等新材料的研发、生产、销售及技术服务为一体的高新技术企业。 上海晋名作为…

AI:111-基于深度学习的工业设备状态监测

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…

Gin 框架介绍与快速入门

Gin 框架介绍与快速入门 文章目录 Gin 框架介绍与快速入门一、Gin框架介绍1. 快速和轻量级2. 路由和中间件3. JSON解析4. 支持插件5. Gin相关文档 二、基本使用1.安装2.导入3.第一个Gin 应用 三、应用举例四、Gin 入门核心1.gin.Engine2.gin.Context 一、Gin框架介绍 Gin是一个…

免费搭建知识付费平台:让知识更有价值

明理信息科技知识付费saas租户平台 在当今的知识经济时代&#xff0c;一个高效、便捷的知识服务平台对于企业和个人至关重要。然而&#xff0c;市面上的众多知识服务平台中&#xff0c;许多产品存在高昂的费用、无用功能的堆砌、无法定制化等问题&#xff0c;让用户进退两难&…

科研+临床观摩|牙科医生公派美国从事访问学者交流

很多临床医学专业的访问学者希望在访学从事科研的同时&#xff0c;能到医院进行临床观摩。对于这些申请者的要求&#xff0c;我们会尽量满足。本案例中的T医生&#xff0c;口语较弱&#xff0c;担心英语面试&#xff0c;最终我们为其取得了田纳西大学健康科学中心的邀请函&…