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

(一)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.mzph.cn/news/596173.shtml

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

相关文章

揭秘Python的运算符:从加减乘除到幂次开方,一网打尽!

文章目录 一、python运算符二、运算符1.算术运算符1.1 加1.2 减1.3 乘1.4 除1.5 取模1.6 幂1.7 取整除 2.比较运算符2.1 等于2.2 不等于2.3 大于2.4 小于2.5 大于等于2.6 小于等于 3.赋值运算符3.1 加法赋值运算符3.2 减法赋值运算符3.3 乘法赋值运算符3.4 除法赋值运算符3.5 取…

vue-打包

打包的作用 说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了>脚手架不参与上线 打包的作用: 1)将多个文件压缩合并成一个文件 2)语法降级 3)less sass ts语法解析 打包后…

视频号小店全新赛道,新手如何入驻?

我是电商珠珠 视频号小店为视频号团队所研发。距今为止也才发展了一年时间,在23年下半年掀起了不小的浪花。 我做视频号小店也有一年时间了,在他刚开始三个月的时候,就开始带着团队一起做。到现在也拥有了自己的视频号小店运营团队&#xf…

【LeetCode每日一题】2487. 从链表中移除节点(调用栈+递归+翻转链表)

2024-1-3 文章目录 [2487. 从链表中移除节点](https://leetcode.cn/problems/remove-nodes-from-linked-list/)方法一:调用栈方法二:递归方法三:翻转链表 2487. 从链表中移除节点 方法一:调用栈 1.将所有节点按顺序压入栈中 2.从…

【 Rosetta:多目标抗体设计全攻略】

Rosetta,一个在抗体设计界具有划时代意义的软件,被誉为抗体设计界的封神之作。它由美国华盛顿大学开发,旨在通过计算机模拟技术,快速、准确地预测抗体的结构和性质,为抗体药物研发提供了强有力的支持。 在抗体设计领域…

力扣232. 用栈实现队列

题目 请你仅使用两个栈实现先入先出队列。队列应当支持一般队列支持的所有操作(push、pop、peek、empty): 实现 MyQueue 类: void push(int x) 将元素 x 推到队列的末尾int pop() 从队列的开头移除并返回元素int peek() 返回队列开…

贪心算法day03

1005.K次取反后最大化的数组和 本题简单一些,估计大家不用想着贪心 ,用自己直觉也会有思路。 代码随想录 给定一个整数数组 A,我们只能用以下方法修改该数组:我们选择某个索引 i 并将 A[i] 替换为 -A[i],然后总共重…

Linux进程管理和计划任务

前言 上篇关于进程管理命令使用说明尚未完结,本篇将继续介绍相关命令以及计划任务管理。 目录 前言 一、控制进程 1. vmstat 2. free 3. iostat 4. iotop/iftop 5. uptime 6. mpstat 7. dstat 8. webadin 9. 服务器五大性能 二、进程管理 1. 手动…

跨国公司为什么要部署SD-WAN

随着全球化进一步加深,越来越多的企业开始实施跨国战略,但要在各个地区建立分支机构、数据中心,跨国企业可能会遇到各地区之间网络性能差异大、导致数据传输效率低下的问题,而且由于网络场景复杂,网络设备和运维成本高…

Django 6 后台与便签

1. 什么是后台管理 后台管理是网页管理员利用网页的后台程序管理和更新网站上网页的内容。各网站里网页内容更新就是通过网站管理员通过后台管理更新的。 2. 创建超级用户 1. python .\manage.py createsuperuser 2. 输入账号密码等信息 Username (leave blank to use syl…

【一】CocosCreator引擎启动流程

游戏的入口函数就是在main.js,main.js文件内部会调用一个window.boot(),而此方法主要是加载启动场景所需要的东西,如:cc.assetManager.init(...):初始化 AssetManagercc.assetManager.loadScript(...):加载 src 目录下…

对图片进行数据增强(基于pytorch)

背景 在进行机器学习的任务中,我们的训练数据往往是有限的,在有限的数据集上获得较好的模型训练结果,我们不仅要在模型结构上下功夫,另一方面也需要对数据集进行数据增强 图片数据增强 图像数据增强是一种在训练机器学习和深度学…

计算化学顶刊封面!玻色量子联合上海交大张健课题组发表量子计算重要成果

​2023年12月13日,北京玻色量子科技有限公司(以下简称“玻色量子”)联合上海交通大学在中科院分区1区、计算化学领域Top刊物JCTC(Journal of Chemical Theory and Computation)内刊的封面上发表了以“Encoding Molecul…

【ceph】使用 upmap 在 OSD 上手动重新平衡数据,比前面用reweight、balance香多了

本站以分享各种运维经验和运维所需要的技能为主 《python零基础入门》:python零基础入门学习 《python运维脚本》: python运维脚本实践 《shell》:shell学习 《terraform》持续更新中:terraform_Aws学习零基础入门到最佳实战 《k8…

国内CRM系统哪个品牌比较好?

国内CRM系统哪个品牌比较好? 作为简道云第一个以“独立套件”开发出来的业务系统,对于简道云CRM我从来都是“昂首挺胸”的骄傲和自豪的! 下面就从功能、价格、自定义3大块儿来介绍下简道云CRM管理系统! CRM管理系统,即开即用​…

单位转换工具类

单位转换工具类 1. 工具类转换- 定义装换枚举转换类型- 创建转换工具类,1. 通过反射去除字段,2.对照传入map标记的字段需要转换的类型转换3. 重新赋值 2. 注解转换- 定义注解- 解析注解 1. 工具类转换 - 定义装换枚举转换类型 public enum UnitConvertType {/*** 精确度*/ACC…

【AI】使用LoFTR进行图像匹配测试Demo

LoFTR图像匹配的源码解析我们在上篇文章中已经写了,对于怎么试用一下,我这边再啰嗦一下。 0.环境搭建 详细的搭建教程请点击链接查看,这里只对需要特殊注意的地方做阐述 1.创建的Python环境采用python3.8的环境,因为文章发布较早…

性价比window+Linux二合一主机

一边学习,一边总结,一边分享! 写在前面 我在2023年12月组了一台“洋垃圾”的主机,一边当做台式机使用,一边当做服务器使用。这个方案算是相对比较划算的方案。我开始是打算直接单做服务器使用的,以及内存配的很高,但是后面和同事一起商量后,还是接受了后面的方案。大…

来自云仓酒庄分享为什么同一种葡萄会使用不同的名称?

如果你只是刚刚走进葡萄酒世界,走在葡萄酒通道上可能会令人生畏,因为有不同的国家、地区和生产商,除此之外还有数千酿酒葡萄品种。更令人困惑的是,有些地方对同一种葡萄使用不同的名称!一个著名的例子是西拉和它澳大利…

2下载Spring,第一个Spring程序+Log4j

https://www.yuque.com/dujubin/ltckqu/kipzgd#,注意的是,现在(202401)SpringFramework从release搬到了snapshot下,在这下面找到6.0.2下载. 下载后解压到文件夹,整个框架包含非常多jar包。 然后就可以在p…