background复合属性顺序_CSS有哪些好用的字体属性?

0863c2c80cd0610db6cc24442a9cf4a7.png

本文创建于2020年9月,以下为正文:

CSS中有哪些字体属性呢?

font:复合属性。设置或检索对象中的文本特征。

font-style:设置或检索对象中的字体样式。用于定义字体的风格,如:斜体(italic)等等。

font-variant:设置或检索对象中的文本是否为小型的大写字母。

font-weight:设置或检索对象中的文本字体的粗细。

font-size:设置或检索对象中的字体尺寸,在开发中12px字体最常用。

font-family :设置或检索用于对象中文本的字体名称序列;用于定义字体的样式,如黑体,宋体等等。

f61feb1eb948f2c645cc44f38def5336.png

1.color规定文本的颜色

定义元素内文字颜色

语法:color:颜色名|十六进制|RGB

1>预定义的颜色值,如red,green,blue等。

2>十六进制,如#FF0000,#FF6600等。实际工作中,十六进制是最常用的定义颜色的方式。

3>RGB代码,如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%).

如:

div{color:red;}

div{color:#ff0000;}

div{color:rgb(255,0,0);}

div{color:rgba(255,0,0,.5);}

2.font-style 指定文本的字体样式(正常、斜体)

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲,用户代理可以根据正常字体计算一个斜体字体。

默认值 normal

normal 正常字体

italic 斜体字

p{font-style:italic;}

3.font-size 指定文本字体大小

通过像素来指定字体大小 1px=1像素

font-size:绝对单位|相对单位分别为:px像素|em/%

p{font-size:12px;}

4.font-family定义文本使用某个字体

默认值 由浏览器确定

示例:

font-family:Microsoft YaHei;

font-family:“Microsoft YaHei","Simsun”,“SimHei";

5.font-weight 指定文本的粗细

字体加粗除了用b和strong标签之外,可以使用CSS来实现。

normal:默认值。定义标准的字符。

bold:定义粗体字符

bolder:定义更粗的字符

lighter:定义更细的字符

100~900:定义由粗到细的字符。400等同于normal,而700等同于 old 。

inherit:规定应该从父元素继承字体的粗细。

设置三个段落的字体的粗细:

p.nomal{font-weight:normal;}

p.thick{font-weight:bold;}

p.thicker{font-weight:900;}

6.letter-spacing

设置字的间距(增加或减少)

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal就相当于值为0.

如:div{letter-spacing:2px;}

normal:默认。规定字符间没有额外的空间。

length:定义字符间的固定空间(允许使用负值)。

inherit:规定应该从父元素继承letter-spacing属性的值。

4836419b5f1991809c118fd8388ad85c.png

7.opacity

设置颜色的透明度,整个元素都会透明

默认值1,取值为0-1

1为不透明,0为完全透明

示例:

p{opacity:0;}

隐藏一个元素,完全不显示,但是会占空间,只是看不到

p{opacity:1;}

显示一个元素 它和rgba中的”a“作用一样

8.overflow:hidden|auto|scroll

当内容溢出元素框时隐藏|自动|显示滚动条

visible:默认值。内容不会被修剪,会呈现在元素框之外。

hidden:内容会被修剪,并且其余内容是不可见的。

scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余内容。

inherit:规定应该从父元素继承overflow属性的值。

设置overflow属性代码:

div

{

width:150px;

height:150px;

overflow:scroll;

}

9.text-overflow

让溢出的文字以省略号显示

p{height:20px; width:100px;background:#ddd;}

width-space:nowrap; 让文字在同一行显示,不换行

overflow:hidden; 溢出部分隐藏

text-overflow:ellipsis; 文字一处部分省略号显示,另外一个值为clip

6e1229d926b8554d92a39a162b32f9c9.png

(ps:如果您觉得有用,请点赞转发,让更多人看到哦)

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

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

相关文章

转译和编译_10个有趣又能编译为JavaScript的语言,你用过哪些?

点击上方“IT平头哥联盟”,选择“置顶或者星标”你的关注意义重大!来源:https://www.sitepoint.com/现代应用相比普通的网页有不同的要求。但是浏览器是一个有着一套(大部分)固定可用的技术的平台,JavaScript依然是web应用的核心语…

OPC服务器如何采集设备的信息,如何将OPC服务器采集的设备数据转为MQTT方式,实现云端发布或订阅...

通过与PLC、智能仪表等硬件设备,以及OPC服务器、数据库等软件建立通讯,进行实时数据采集监控,然后将相关数据转换为数据库、OPC,以及MQTT、HTTP等多种服务接口,实现各类自动化与信息化系统软件灵活对接。MQTT智能网关案…

微信小程序摄像头监控_微信必备黑科技小程序!

↑点击上方蓝字关注极物推荐欢迎分享到朋友圈-不花冤枉钱,历史见真谛对于喜欢购物的朋友们,这绝对是一把利器。只需把商品链接复制粘贴到上面,就可以轻松的查阅到该商品的历史价格,轻松直观的了解商品过去的价格波动,同…

无线打印 airprint 服务器,如何让 Windows 的共享打印机支持 AirPrint

对很多办公室环境来说,局域网共享打印机往往都是刚需,而如果局域网内的设备大多为 Windows 设备,通过 网络共享 的方式就可以轻松将所连接的 USB 打印机共享到局域网。但对同一个局域网内的 Apple 设备而言,因为很多打印机的 Mac …

硒测试中所需的功能和示例

所需功能是用于声明一组基本要求(例如浏览器,操作系统,浏览器版本等的组合)的类,以对Web应用程序执行自动跨浏览器测试。 当我们尝试通过Selenium自动化测试来自动化测试脚本时,我们需要考虑这些组合&…

边沿触发是什么意思_集基耦合双稳电路,集成化单稳电路,数字逻辑电路,门电路,触发器...

1).箝位器能把脉冲电压维持在某个数值上而使波形保持不变的电路称为箝位器。它也是整形电路的一种。例如电视信号在传输过程中会造成失真,为了使脉冲波形恢复原样,接收机里就要用箝位电路把波形顶部箝制在某个固定电平上。下图中反相器输出端上就有一个箝…

鲸鱼优化算法_盘点 35 个 Java 代码优化细节

代码优化,一个很重要的课题。可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗&#xff1…

powerbi导入地图_Power BI系列教程之powerBI功能介绍及使用导引(一)

作为从事数据分析相关工作的小伙伴,我们总会遇到一些工作是每周、每月甚至每天都是重复做的工作,这个时候我们有没有一种结构化的方法来处理这一些数据呢?答案是肯定的,微软为了满足广大职场数据分析人员的需求,开发了…

模糊搜索怎么实现_干货 | 你真的了解自己是怎么搜索的吗_01

「干货」栏目的开启是为了帮大家科普学习关于品牌出海、数字营销与跨境电商行业相关的知识,以及我们在业内会遇到的情况和一些规避的方法。第一讲搜索者我们整个搜索营销活动都是围绕搜索者展开的我们的目的是把搜索者转化为我们的销售机会所以,研究搜索…

linux shc shell脚本_详解shell脚本加密解密软件—gzese和shc

概述以我个人的需求为例,有时写一个脚本需要传密码,如果直接把密码写在脚本里会存在安全问题,一般是把密码写在脚本里,作为参数传给脚本,而保存密码的脚本,使用某种手段加密,令其不可读但是可执…

linux 查看主板sn_如何在 Linux 上查找硬件规格

在 Linux 系统上有许多工具可用于查找硬件规格。-- Sk(作者)在 Linux 系统上有许多工具可用于查找硬件规格。在这里,我列出了四种最常用的工具,可以获取 Linux 系统的几乎所有硬件(和软件)细节。好在是这些工具在某些 Linux 发行版上默认预装。我在 Ubun…

laravel 分词搜索匹配度_【地名地址】面向智慧城市的高精度地名地址匹配方法...

点击上方蓝字关注我们↑↑↑↑原 文 摘 要针对智慧城市建设中各种业务数据对地名地址匹配准确度和效率不高的问题,本文提出一种面向智慧城市的高精度地名地址匹配方法。该方法在基于中文分词的地名地址匹配技术框架下,综合利用精细化地名地址库构建、地名…

使用通用mapper实现条件查询_使用dsum轻松搞定多条件查询,学会它,再也想用sumifs了...

在excel中条件求和想必大家都不陌生,这个可以说是我们工作中经常遇到的问题,常见的条件求和函数有sumif以及sumifs,但是还有一个更加强但知道的人却非常少的函数,他就是dsum函数,dsum相交于sumif以及sumifs函数理解起来…

输入文字自动生成图片_批量生成变化的图片文字海报

最近“双十一”活动大家已经进入了鸡血状态,运营的小伙伴给设计出了个难题,搞的设计小伙伴们进入了癫狂模式。本着工具提升效率的原则,我又开始去研究如何批量修改图片内容了,小小的成果和大家分享一下。提出问题为每一位支付了定…

生成私钥 p q rsa_【安全】理解 RSA 算法

Public-key Crytography简介Public-key cryptography (公开密钥加密) 又称 asymmetric cryptography (非对称加密),即存在两把不同的密钥,分别称为公钥 Pu 和私钥 Pr,公钥通常用来加密明文 M,只有私钥才能解密密文 C,如…

Java:如何创建轻量级数据库微服务

基于云的Java数据库应用程序的数量每分钟都在增加。 许多组织部署了数百甚至数千个微服务实例。 但是,相对于运行时环境,大多数应用程序会带来惊人数量的不必要开销。 反过来,这会使应用程序运行更慢,运行成本更高。 在本文中&am…

垃圾分类毕设java程序_垃圾“拍一拍”,分类不用愁!生活垃圾分类查询小程序上线啦...

垃圾种类太多?分类容易搞混?乐清人 注意啦,拿起手机就能查!11月6日,生活垃圾分类查询系统登陆乐清市综合行政执法局官方微信公众号,输入垃圾名称即可快速了解垃圾所属哪一类,还有拍照识别查询&a…

带有Prometheus的弹簧靴和千分尺第5部分:旋转Prometheus

以前,我们获得了Spring Boot Application适配器,以便为Prometheus公开端点。 该博客将重点介绍如何设置和配置Prometheus,以便为Spring Boot端点提供服务器。 因此,让我们开始使用docker来启动Prometheus服务器。 在继续进行Pr…

允许跨域访问_PHP设置多域名允许跨域访问

php中文网最新课程 每日17点准时技术干货分享 针对 PHP 语言设置多域名允许跨域访问 服务器变量: 服务器变量存储在 $_SERVER 数组中,在这个数组中有一个特殊的键值:HTTP_ORIGIN。 这个键只在跨域的时候才会存在值,同源时为空字符串 响应头设置允许某域名访问:access-cont…

Apache Camel 3.1 –即将推出更多骆驼核心优化

希望一切都很好,您可以安全进入2020年。 Camel团队已经在忙于开发下一个Camel 3.1版本。 目标之一是继续优化骆驼核心,这一次我们花了一些时间来寻找路由引擎中的一些热点。 我们所研究的方面之一也是在Camel路由的每个消息中发生的对象分配。 JVM本身…