CSS文本样式(一)

news2024/11/13 8:05:32

一、font-family

1、font-family属性

font-family:属性指定元素的字体,语法格式如下:

font-family​:  字体1,字体2,...;

有两种字体系列名称:

  • 字体系列​:特定的字体系列(如Times New Roman或Arial)
  • 通用族​:一组具有相似外观的字体族(如Serif或Monospace)

以下是不同字体样式的示例:

逗号分隔每个值,以表明它们是​可选项​。

如果一个字体的名字​不只一个单词,那么必须用引号"Times New Roman"

font-family属性应该包含几个字体名称作为​备选。 在CSS样式中指定Web字体时,请添加多个字体名称,以避免意外的行为。 如果客户端计算机出于某种原因没有您选择的字体时,则会尝试下一个字体。

指定​通用字体​系列是一个很好的做法,如果没有其他字体可用,让浏览器在通用系列中选择相似的字体。

body {
   font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

如果浏览器不支持Arial字体,则会尝试下一个字体(Helvetica Neue,Helvetica)。 如果浏览器没有任何一个,它会尝试通用的sans-serif。

如果字体名称包含​空格​,它必须加上​引号。在HTML中使用​"style"​属性时,必须使用​单引号

二、font-size

1、font-size属性

font-size属性用于​设置字体的大小​。 设置网页字体大小的其中之一方法是​使用关键字​。 例如​xx-small​, ​small, medium​,​ large​,​ larger​, ​etc​等。

您还可以使用像素(px)相对尺寸单位(em)或​ pt数值来操纵字体大小。

当您需要​像素精度时,以​素值(px)​设置字体大小是一个不错的选择,它可以让您完全控制文本大小。

PX特点:

1. IE无法调整那些使用px作为单位的字体大小;

2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位;

3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核)。

em(font size of the element)是指相对于父元素的字体大小的单位。em是​相对长度单位​。相对于当前对象内文本的字体尺寸。 如果您没有在页面上的任何位置设置字体大小,那么这是浏览器的默认大小,即16px。现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等。

要计算em大小,只需使用以下公式:em = px / 16​,即 ​1em = 16px​。

EM特点:

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

例如:

h1 {
   font-size: 20px;
}

h1 {
   font-size: 1.25em; 
}

这两个例子都会在浏览器中产生相同的结果,因为20/16 = 1.25em

 在各种浏览器中尝试​文本大小和​页面缩放的​不同组合​,以确保文本的​可读性

温馨提示:
所有​ 未经调整的​ 浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。

三、font-style

1、font-style属性

font-style属性用于定义字体风格,加设置斜体、倾斜或正常字体,其可用属性如下:

font-style : normal | italic | oblique

font-style: normal  : 正常​的字体
font-style: italic  : ​斜体。对于没有​斜体变量​的特殊字体,将应用oblique,通常用于指定斜体文本
font-style: oblique  : 倾斜的字体

注释:  

  1.  font-style的属性还有:inherit; 只是任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit",所以现在很少用。
  2.  使用​<i>​标签,同样可以达到​倾斜​的效果

四、font-weight

1、font-weight属性

font-weight​控制文本的​粗细​。 值可以设置为​normal (默认)​,boldbolder,和lighter

根据​文本的厚度​,也可以使用从100(细)到​900(粗)的数字来定义字体粗细。400​normal​相同,700​bold​相同。

各个属性值如下所示:

 HTML​ <strong>​标签也使文本​变粗​。

五、font-variant

1、font-variant属性

font-variant属性允许您将字体转换为所有小型大写字母。 这也是针对​英文​而言,因为中文不存在大小写之分。这意味着所有的​小写字母​均会被转换为大写​,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小​。

font-variant属性的值可以设置为normalsmall-caps,和​ inherit​。

六、color

1、color属性

color属性用于指定​文本的颜色

指定文本颜色的其中一种方法是使用​颜色名称​:如red, green, blue等

以下是更改字体颜色的示例。

HTML代码:

<p class="example">大家好!</p>
楼上的怎么这么绿?

CSS代码:

p.example {
   color: green;
}

执行结果:

定义color的其他方法是使用十六进制值RGB

十六进制形式是一个井号​(#)​,最多6个十六进制值​(0-F)​。​"#"​ 后跟6 位​或者 ​3 位​十六进制字符(0-9, A-F)。

RGB红-绿-蓝​(red-green-blue (RGB)),RGB定义了红色​,​绿色​和​蓝色​的各个值。规定颜色值为 rgb 代码的颜色,格式为 rgb(R,G,B),取值可以是​ 0-255 ​的整数​或​百分比

在下面的示例中,我们使用十六进制值将标题颜色设置为蓝色,使用RGB形式将段落设置为红色。

HTML代码:

<h1>woaixuexi</h1>
<p class="example">woaixuexi</p>

CSS代码:

h1 {
   color: #0000FF;
}
p.example {
   color: rgb(255,0,0);
}

执行结果:

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

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

相关文章

Mac上免费使用Typora保姆级教程 简单 2024可用

一、官网安装正版软件 Typora官网--点击进入Typora官网下载正版软件 二、找到软件文件 进入访达&#xff0c;commandshiftG打开路径搜索&#xff0c;输入 /Applications/Typora.app/Contents/Resources/TypeMark 进入Typora文件夹 打开这个文件 三、修改字段 然后搜索字段…

Ubuntu2004编译VLC-QT(记录)(根据官方步骤来)

来到VLC-QT的github官方地址--VLC-QT&#xff08;点击前面的&#xff09; 下载官方源码&#xff0c;也可以git clone拉取 2&#xff1a;解压源码之后&#xff0c;进入文件夹 创建文件夹“build”用于存放待会编译产生的相关文件&#xff0c;执行 mkdir buildcd build 回到VLC…

【Redis】Redis 持久化 -- RDB AOF

文章目录 1 持久化介绍2 RDB2.1 RDB 介绍2.2 触发方式2.3 流程介绍2.4 RDB 文件2.5 RDB 优缺点 3 AOF3.1 AOF 介绍3.2 缓冲区刷新策略3.3 AOF 重写机制3.3.1 重写机制介绍3.3.2 混合持久化3.3.3 重写触发方式3.3.4 AOF 重写流程 3.4 AOF 优缺点 4 启动时数据恢复 1 持久化介绍 …

OceanBase V4 技术解读:从Alter Table 看DDL的支持

背景 数据库类型可以划分为两大类&#xff1a;关系型数据库和非关系型数据库。而关系型数据库以表格形式进行数据组织&#xff0c;同时遵循表关系的约束&#xff0c;例如创建一张表&#xff0c;表里面包含多个列&#xff0c;不同的列可以有不同的类型。当需要改表结构&#xf…

什么是数据库 DevOps?

在深入研究数据库 DevOps 之前&#xff0c;先回顾一下什么是 DevOps。它没有统一的定义&#xff0c;但我们知道它起源于软件开发方法与部署和运维的结合。 大约 2007 年和 2008 年&#xff0c;软件开发和 IT 界人士提出了这样的担忧&#xff1a;两个行业的分离&#xff0c;即编…

Datawhale X 李宏毅苹果书 AI夏令营(深度学习入门)task3

实践方法论 在应用机器学习算法时&#xff0c;实践方法论能够帮助我们更好地训练模型。如果在 Kaggle 上的结果不太好&#xff0c;虽然 Kaggle 上呈现的是测试数据的结果&#xff0c;但要先检查训练数据的损失。看看模型在训练数据上面&#xff0c;有没有学起来&#xff0c;再…

解锁 TypeScript Record 的奇妙用法:轻松搞定键值对!

在没有非常了解 Record 之前&#xff0c;定义对象的类型&#xff0c;一般使用 interface。它是 TS 中定义数据结构的一种方式&#xff0c;用来描述对象的形状、函数类型、类的结构等。 // 基本用法 interface User {name: string;age: number;isAdmin: boolean; }const user: …

抖音ip地址与实际地址不符是怎么回事

在数字化时代&#xff0c;社交媒体已成为人们日常生活不可或缺的一部分&#xff0c;而抖音作为其中的佼佼者&#xff0c;更是吸引了数以亿计的用户。然而&#xff0c;在使用抖音的过程中&#xff0c;不少用户发现了一个有趣而又令人困惑的现象&#xff1a;抖音显示的IP地址与实…

趣味算法------煤球数目

目录 前言&#xff1a; 题目描述&#xff1a; 解题思路&#xff1a; 具体代码&#xff1a; 前言&#xff1a; 数列在数学中是一个非常基础且重要的概念&#xff0c;它指的是按照一定顺序排列的一系列数。数列中的每一个数被称为该数列的项。 数列可以分为有限数列和无限数列…

7 nestjs 环境变量

安装 pnpm i --save nestjs/confignestjs/config 内部使用 dotenv 实现。 配置 一般会在根模块AppModal中导入&#xff0c;并使用.forRoot()静态方法导入它的配置 import { Module } from nestjs/common; import { ConfigModule } from nestjs/config; ​ Module({imports: …

降低游戏直播软件开发风险:自建团队、外包公司与现成源码

随着游戏直播行业的快速发展&#xff0c;越来越多的企业和个人开始涉足这一领域。然而&#xff0c;在游戏直播软件的开发过程中&#xff0c;选择合适的开发模式对于降低供应链风险至关重要。本文将探讨三种主要的游戏直播软件开发模式&#xff0c;并分析它们各自的风险管理策略…

设计模式篇(行为型模式 - DesignPattern)(持续更新迭代)(图片待加载)

目录 一、模版方法模式&#xff08;制作豆浆问题&#xff09; 1. 豆浆制作问题 2. 模板方法模式 2.1. 基本介绍 2.2. 代码实现 2.3. 钩子方法 2.4. 应用案例 应用一&#xff1a;Android中View的draw 应用二&#xff1a;Spring 框架应用的源码分析 2.5. 注意事项和细节…

泰国中小企业局局长率考察团到访深兰科技

继泰国社会发展和人类安全部考察团的访问之后&#xff0c;深兰科技本周迎来了第二波泰国政府考察团的莅临。 2024年8月23日&#xff0c;泰国中小企业促进局局长巴尼塔西那瓦女士率领泰国东盟企业家协会、泰国法政大学及泰国企业家代表团访问了深兰科技集团总部。深兰科技集团董…

卡牌抽卡机小程序搭建,探索新鲜有趣的拆卡体验

卡牌作为一种新的潮玩方式&#xff0c;市场热度逐渐提升&#xff0c;在各大社交平台上&#xff0c;拆卡的话题层出不穷&#xff0c;各种卡牌迅速走红&#xff0c;成为了当下“顶流”&#xff0c;吸引了众多的消费者&#xff01;卡牌的价格低&#xff0c;还涉及到了动漫等各个热…

电商行业为什么要做私域?

有伙伴提到&#xff0c;他们所在的电商企业是否有必要进行私域运营&#xff0c;担心投入太大。 实际上&#xff0c;私域运营对于电商企业来说是非常有必要的。它是企业的用户数据资产&#xff0c;关乎着企业未来的发展。私域运营能够帮助企业更好地了解用户需求&#xff0c;提…

Vulkan入门系列17 - 多重采样( Multisampling)

一:概述 我们的程序现在可以加载多个级别的纹理,从而解决了在渲染远离观察者的物体时出现的伪影问题。现在图像变得平滑多了,但仔细观察,你会发现绘制的几何图形边缘呈现锯齿状。这在我们早期渲染一个四边形的程序中尤为明显: 这种不希望有的效果被称为 “锯齿”,…

2024高质量:备战金九银十的Java八股文+场景题,看完这篇就够了!

前言 又到一年金九银十面试跳槽季&#xff0c;你准备好了吗&#xff1f; 今天为大家整理了目前互联网出现率最高的大厂面试题&#xff0c;所谓八股文也就是指文章的八个部分&#xff0c;文体有固定格式:由破题、承题、起讲、入题、起股、中股、后股、束股八部分组成&#xff0…

Python 数据分析之Numpy学习(二)

Python 数据分析之Numpy学习&#xff08;二&#xff09; 接上文&#xff1a;Python 数据分析之Numpy学习&#xff08;一&#xff09; 四、数组的索引和切片 索引即通过一个无符号整数值获取数组里的值。Python索引是从0的位置开始。 切片即对数组里某个片段的描述。 # 载入…

虚幻5|制作玩家血量,体力(还未编辑,只用于引用)

未编写&#xff0c;仅引用 优化后&#xff1a; 把增加生命&#xff0c;减少生命&#xff0c;也可以用在体力里&#xff0c;更改如下 限制浮点&#xff0c;如果血量或体力按10来扣&#xff0c;如果你的血量降低到5&#xff0c;那么就会以5的数值来扣&#xff0c;而不会扣成-5…

如何在路由器中抓包分析

方法是在openwrt中一般都集成了tcpdump抓包工具&#xff0c;可以通过命令抓包保存为pcap文件&#xff0c;导出来后可以通过wireshark分析。 相信大部分研发人员都在windows下抓过包&#xff0c;最常用的软件就是wireshark&#xff0c;通过wireshark可以很方便的分析数据报文。抓…