21.1 CSS 文字样式

image-20230817185300429

1. 字体倾斜

font-style属性: 为文本设置字体样式.常用取值:    
normal: 正常显示文本.  快捷键: fs+tab.
italic: 显示斜体文本.  快捷键: fsn+tab.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font style</title><style>p {font-style: italic;}</style>
</head>
<body>
<p>你好！</p>
</body>
</html>

image-20230817164531562

2. 字体粗细

font-weight属性: 设置文本的字体粗细程度.常用取值:                        
normal:  默认值, 表示标准的字体粗细; 快捷键: fwn+tab.   
bold:    表示加粗文本;              快捷键: fwb+tab.               
lighter: 表示更轻的字体权重;         快捷键: fwl+tab 
bolder:  表示更重的字体权重;         快捷键: fwbr+tab 
数字值: 可以使用数值来指定相对于标准字体的粗细程度, 如100, 200, 300等, 或使用绝对值的粗细程度, 如400, 700, 900等.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font weight</title><style>p {font-weight: bold;}</style>
</head>
<body>
<p>你好！</p>
</body>
</html>

image-20230817164703877

3. 字体大小

font-size属性: 设置文本的字号大小. 它可以应用于任何具有文本内容的HTML元素.在CSS中, 可以使用像素(px), 百分比(%), em, rem等单位来指定字号大小.
以下是一些示例:
font-size: 16px;   使用像素作为单位;                        快捷键: fz16 + tab.
font-size: 80%;    相对于父元素字号的百分比;                 快捷键: fz80% + tab.
font-size: 2em;    相对于父元素字号的倍数;                   快捷键: fz2e + tab.
font-size: 0.8rem; 相对于根元素(通常是<html>)字号的倍数;      快捷键: fz0.8r + tab.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font size</title><style>p {font-size: 30px;}</style>
</head>
<body>
<p>你好！</p>
</body>
</html>

image-20230817164804125

4. 文本字体

font-family属性: 用于指定文本的字体系列. 它可以应用于任何具有文本内容的HTML元素.在CSS中, 可以通过指定一系列字体名称或字体族来设置字体系列.
在字体系列的列表中, 浏览器会按优先级依次尝试使用字体, 直到找到合适的可用字体为止.值: 字体名称, 默认为宋体.
常用字体: 宋体(SimSun), 黑体(SimHei), 微软雅黑(Microsoft YaHei).
快捷键: ff+tab font-family:;注意事项: 
* 1. 中文字体中包含英文, 英文字体没有包含中文, 设置后能影响到中文的就是中文字体否则就是英文字体.
* 2. 如果取值是中文, 需要加单引号或双引号.
* 3. 设置的字体是电脑系统上安装的了的字体.
* 4. 设置的字体不存在, 会使用默认使用宋体显示.
* 6. 可以设置备选方案, 设置多个值, 值与值之间用逗号隔开.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font family 1</title><style>p { font-family: '楷体', '微软雅黑';}</style>
</head>
<body><p>你好！</p>  
</body>
</html>

image-20230817170858723

让中英文分别使用不同的字体: 预备方案先设置英文字体再设置中文字体, 让字母使用英文字体, 中文使用中文字体.
遇到中文时英文字体不起作用就使用备用的字体方案.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font family 2</title><style>p {font-family: Arial, '楷体';}</style>
</head>
<body>
<p>abc 你好！</p>
</body>
</html>

image-20230817171817315

5. 文字样式

font属性: 设置文字样式的属性, 它可以接受多个值, 用空格分隔.
font: font-style font-weight font-size/line-height font-family;注意事项:
font-style与font-weight的值可以省略, 可以互换位置.
font-size与font-family的值不可以省略, 不可以互换位置, 必须写在的最后两位.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>font</title><style>p {/*font-style: italic;font-weight: bold;font-size: 30px;font-family: '楷体';*/font: italic bold 30px '楷体';}</style>
</head>
<body>
<p>abc, 你好！
</p>
</body>
</html>

image-20230817175514965

6. 字体颜色

color属性: 设置文字的颜色.可以使用以下不同的值来定义颜色:
* 1. 预定义颜色名称(如red, blue, green等).
* 2. 十六进制颜色值(如#FF0000表示红色); 每两位十六进制为一组, 分别代表R/G/B.
* 3. RGB颜色值(如rgb(255, 0, 0)表示红色); 三原色数字代码光源的亮度, 0不发光, 255最亮.
* 4. RGBA颜色值(如rgba(255, 0, 0, 0.5)表示带有透明度的红色, 透明度值范围为0-1).
* 5. HSL颜色值(如hsl(0, 100%, 50%)表示红色).
* 6. HSLA颜色值(如hsla(0, 100%, 50%, 0.5)表示带有透明度的红色, 透明度值范围为0-1).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文字颜色属性</title><style>p {color: rgba(00, 255, 255, 0.5);}</style>
</head>
<body><p>你好！</p>
</body>
</html>

image-20230817180627127

7. 字体装饰

text-decoration属性: 设置文字的装饰效果, 可以添加或删除文字的下划线, 删除线, 上划线.常用取值:
none: 无任何装饰效果(默认值); 快捷键: td+tab.
underline: 添加下划线;       快捷键: tau+tab. 
overline: 添加上划线;        快捷键: tao+tab.
line-through: 添加删除线;    快捷键: tal+tab.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>text decoration</title><style>p {text-decoration: overline;}a { /* 取出a标签的下划线 */text-decoration: none;}</style>
</head>
<body>
<p>你好！</p>
<a href="https:www.baidu.com">百度</a>
</body>
</html>

image-20230817182808004

8. 水平对齐

text-align属性: 设置文字在其容器中的水平对齐方式.常用取值:
left: 将文字左对齐;      快捷键: ta+tab.
right: 将文字右对齐;     快捷键: tar+tab.
center: 将文字居中对齐;  快捷键: tac+tab.
justify: 将文字两端对齐, 尽可能平均分布在容器中.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>text align</title><style>p {text-align: center;}</style>
</head>
<body>
<p>你好！</p>
</body>
</html>

image-20230817183426501

9. 字体缩进

text-indent属性: 用于设置文本块(block-level element)的首行缩进量.
通过设置text-indent, 可以在段落或其他块级元素的每一行的开头添加一个空格或指定的缩进值.常用取值:
* 1. 像素值(px): 可以使用具体的像素数值来设置缩进值.              快捷键: ti2+tab  -->  text-indent: 2px.
* 2. em单位(em): em单位是相对于当前元素的字体大小的倍数.          快捷键: ti2e+tab -->  text+indent: 2em.
* 3. 百分比(%):  可以使用百分比值来相对于父元素的宽度来设置缩进值. 快捷键: ti80%    -->  text-indent: 80%.
* 4. 继承值(inherit) 可以使用inherit关键字让元素继承父元素的text-indent值.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>text indent</title><style>p {text-indent: 2em;}</style>
</head>
<body><p>hello  world!</p>
</body>
</html>

image-20230817184439735

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

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

相关文章

Java-抽象类和接口（上）

Java-抽象类和接口（上）

如果一个类中没有包含足够的信息来描绘一个具体的对象&#xff0c;这样的类就是抽象类 在打印图形例子中, 我们发现, 父类 Shape 中的 draw 方法好像并没有什么实际工作, 主要的绘制图形都是由 Shape 的各种子类的 draw 方法来完成的. 像这种没有实际工作的方法, 我们可以把它…
阅读更多...
TCP服务器（套接字通信）

TCP服务器（套接字通信）

服务器 客户端 结果
阅读更多...
【数据库系统】-- 【1】DBMS概述

【数据库系统】-- 【1】DBMS概述

1.DBMS概述 01数据库系统概述02数据库技术发展概述03关系数据库概述04数据库基准测试 01数据库系统概述 几个基本概念 为什么使用数据库系统 数据库发展的辉煌历程 02数据库技术发展概述 数据模型 应用领域 ● OLTP ● OLAP ● HTAP ● GIS OLTP与OLAP 与其他技术相…
阅读更多...
redis 存储结构原理 2

redis 存储结构原理 2

咱们接着上一部分来进行分享&#xff0c;我们可以在如下地址下载 redis 的源码&#xff1a; https://redis.io/download 此处我下载的是 redis-6.2.5 版本的&#xff0c;xdm 可以直接下载上图中的 **redis-6.2.6 **版本&#xff0c; redis 中 hash 表的数据结构 redis hash …
阅读更多...
【Python】Web学习笔记_flask(5)——会话cookie对象

【Python】Web学习笔记_flask(5)——会话cookie对象

HTTP是无状态协议&#xff0c;一次请求响应结束后&#xff0c;服务器不会留下对方信息&#xff0c;对于大部分web程序来说&#xff0c;是不方便的&#xff0c;所以有了cookie技术&#xff0c;通过在请求和响应保温中添加cookie数据来保存客户端的状态。 html代码&#xff1a; …
阅读更多...
PyTorch学习笔记（十五）——完整的模型训练套路

PyTorch学习笔记（十五）——完整的模型训练套路

以 CIFAR10 数据集为例&#xff0c;分类问题&#xff08;10分类&#xff09; model.py import torch from torch import nn# 搭建神经网络 class MyNN(nn.Module):def __init__(self):super(MyNN, self).__init__()self.model nn.Sequential(nn.Conv2d(3, 32, 5, 1, 2),nn.Ma…
阅读更多...
VMware 虚拟机三种网络模式详解

VMware 虚拟机三种网络模式详解

文章目录 前言桥接模式(Bridged)桥接模式特点: 仅主机模式 (Host-only)仅主机模式 (Host-only)特点: NAT网络地址转换模式(NAT)网络地址转换模式(NAT 模式)特点: 前言 很多同学在初次接触虚拟机的时候对 VMware 产品的三种网络模式不是很理解,本文就 VMware 的三种网络模式进行…
阅读更多...
【数据结构OJ题】合并两个有序链表

【数据结构OJ题】合并两个有序链表

原题链接&#xff1a;https://leetcode.cn/problems/merge-two-sorted-lists/description/ 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 可以先创建一个空链表&#xff0c;然后依次从两个有序链表中选取最小的进行尾插操作。&#xff08;有点类似双…
阅读更多...
Java-抽象类和接口（下）

Java-抽象类和接口（下）

接口使用实例 给对象数组排序 两个学生对象的大小关系怎么确定? 需要我们额外指定. 这里需要用到Comparable 接口 在Comparable 接口内部有一个compareTo 的方法&#xff0c;我们需要实现它 在下图中&#xff0c;我们需要将o强制转换为Student 之后调用Arrays.sort(array)即…
阅读更多...
rabbitmq容器启动后修改连接密码

rabbitmq容器启动后修改连接密码

1、进入容器 docker exec -it rabbitmq bash 2、查看当前用户列表 rabbitmqctl list_users 3、修改密码 rabbitmqctl change_password [username] ‘[NewPassword]’ 4、修改后退出容器 ctrlpq 5、退出容器后即可生效&#xff0c;不需要重启容器
阅读更多...
redis实战-缓存数据解决缓存与数据库数据一致性

redis实战-缓存数据解决缓存与数据库数据一致性

缓存的定义 缓存(Cache),就是数据交换的缓冲区,俗称的缓存就是缓冲区内的数据,一般从数据库中获取,存储于本地代码。防止过高的数据访问猛冲系统,导致其操作线程无法及时处理信息而瘫痪&#xff0c;这在实际开发中对企业讲,对产品口碑,用户评价都是致命的;所以企业非常重视缓存…
阅读更多...
Hi-TRS：骨架点视频序列的层级式建模及层级式自监督学习

Hi-TRS：骨架点视频序列的层级式建模及层级式自监督学习

论文题目&#xff1a;Hierarchically Self-Supervised Transformer for Human Skeleton Representation Learning 论文下载地址&#xff1a;https://www.ecva.net/papers/eccv_2022/papers_ECCV/papers/136860181.pdf 代码地址&#xff1a;https://github.com/yuxiaochen1103…
阅读更多...
Linux -- 进阶 利用大文件来增加分区 自动挂载大文件

Linux -- 进阶 利用大文件来增加分区 自动挂载大文件

情景引入 &#xff1a; 比如&#xff0c; 你的硬盘 分了三个区&#xff0c;但是&#xff0c;现在就是要求要分第四个区&#xff0c; 你一看硬盘没有剩余空 间了&#xff0c;分不出第四个区了&#xff0c;除非你再添加 一块儿 新硬盘。 那就可以使用我们介绍的这种方法 &…
阅读更多...
并发-并发挑战及底层实现原理笔记

并发-并发挑战及底层实现原理笔记

并发编程挑战 上下文切换 cpu通过给每个线程分配cpu时间片实现多线程执行&#xff0c;时间片是cpu分配给各个线程的时间&#xff0c;cpu通过不断切换线程执行。线程有创建和上下文切换的开销。减少上下文切换的方方法 – 无锁并发编程&#xff0c;eg&#xff1a;将数据的id按…
阅读更多...
记录hutool http通过代理模式proxy访问外面的链接

记录hutool http通过代理模式proxy访问外面的链接

效果&#xff1a; 代码&#xff1a; public class TestMain {public static void main(String[] args){HttpRequest httpRequest HttpRequest.get("https://www.youtube.com").timeout(30000);httpRequest.setProxy(new Proxy(Proxy.Type.HTTP,new InetSocketAddre…
阅读更多...
Laravel 框架模型的定义 模型的增删改 批量赋值和软删除 ⑧

Laravel 框架模型的定义 模型的增删改 批量赋值和软删除 ⑧

作者 : SYFStrive 博客首页 : HomePage &#x1f4dc;&#xff1a; THINK PHP &#x1f4cc;&#xff1a;个人社区&#xff08;欢迎大佬们加入&#xff09; &#x1f449;&#xff1a;社区链接&#x1f517; &#x1f4cc;&#xff1a;觉得文章不错可以点点关注 &#x1f44…
阅读更多...
linux 搭建 nexus maven私服

linux 搭建 nexus maven私服

目录 环境&#xff1a; 下载 访问百度网盘链接 官网下载 部署 &#xff1a; 进入目录&#xff0c;创建文件夹,进入文件夹 将安装包放入nexus文件夹&#xff0c;并解压​编辑 启动 nexus,并查看状态.​编辑 更改 nexus 端口为7020,并重新启动&#xff0c;访问虚拟机7020…
阅读更多...
SpringBoot + Vue 前后端分离项目 微人事(九)

SpringBoot + Vue 前后端分离项目 微人事(九)

职位管理后端接口设计 在controller包里面新建system包&#xff0c;再在system包里面新建basic包&#xff0c;再在basic包里面创建PositionController类&#xff0c;在定义PositionController类的接口的时候&#xff0c;一定要与数据库的menu中的url地址到一致&#xff0c;不然…
阅读更多...
JavaScript（JavaEE初阶系列13）

JavaScript（JavaEE初阶系列13）

目录 前言&#xff1a; 1.初识JavaScript 2.JavaScript的书写形式 2.1行内式 2.2内嵌式 2.3外部式 2.4注释 2.5输入输出 3.语法 3.1变量的使用 3.2基本数据类型 3.3运算符 3.4条件语句 3.5循环语句 3.6数组 3.7函数 3.8对象 3.8.1 对象的创建 4.案例演示 4…
阅读更多...
Linux 系统编程拾遗

Linux 系统编程拾遗

Linux 系统编程拾遗 进程的创建 进程的创建 fork()、exit()、wait()以及execve()的简介 创建新进程&#xff1a;fork()
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023