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.mfbz.cn/a/82355.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

matlab中exp和expm的区别

matlab中exp和expm的区别

exp()为数组 X 中的每个元素返回指数 e x e^{x} ex expm()计算 X 的矩阵指数。 两个函数传入矩阵后计算的结果是不同的&#xff0c;千万不能混淆。之前曾经想当然得把exp里传入矩阵当矩阵指数使用&#xff0c;也未验证正确性&#xff0c;实不应该。
阅读更多...
深入理解 Flutter 图片加载原理 | 京东云技术团队

深入理解 Flutter 图片加载原理 | 京东云技术团队

前言 随着Flutter稳定版本逐步迭代更新&#xff0c;京东APP内部的Flutter业务也日益增多&#xff0c;Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验&#xff0c;但随之也带来了一些OOM问题&#xff0c;通过线上监控信息…
阅读更多...
【leetcode 力扣刷题】快乐数/可被k整除的最小整数（可能存在无限循环的技巧题）

【leetcode 力扣刷题】快乐数/可被k整除的最小整数（可能存在无限循环的技巧题）

可能存在无限循环的技巧题 202. 快乐数数学分析 1015. 可被k整除的最小整数数学分析 202. 快乐数 题目链接&#xff1a;202. 快乐数 题目内容&#xff1a; 理解题意&#xff0c;快乐数就是重复每位数的平方之和得到的新数的过程&#xff0c;最终这个数能变成1。变成1以后&…
阅读更多...
docker的资源控制及数据管理

docker的资源控制及数据管理

docker的资源控制及docker数据管理 一.docker的资源控制 1.CPU 资源控制 1.1 资源控制工具 cgroups&#xff0c;是一个非常强大的linux内核工具&#xff0c;他不仅可以限制被 namespace 隔离起来的资源&#xff0c; 还可以为资源设置权重、计算使用量、操控进程启停等等。 …
阅读更多...
HTML中的字符串转义

HTML中的字符串转义

为什么要转义&#xff1f; 转义可以防止 xss 攻击。接下来&#xff0c;我们来看一下如何转义。 HTML Sanitizer API Sanitizer 是浏览器自带的转义方法&#xff0c;在2021年初被提出&#xff0c;兼容性问题很大。 列举几个常用的 API&#xff1a; const $div document.qu…
阅读更多...
Python批量爬虫下载文件——把Excel中的超链接快速变成网址

Python批量爬虫下载文件——把Excel中的超链接快速变成网址

本文的背景是&#xff1a;大学关系很好的老师问我能不能把Excel中1000个超链接网址对应的pdf文档下载下来。虽然可以手动一个一个点击下载&#xff0c;但是这样太费人力和时间了。我想起了之前的爬虫经验&#xff0c;给老师分析了一下可行性&#xff0c;就动手实践了。    没…
阅读更多...
【网络架构】华为hw交换机网络高可用网络架构拓扑图以及配置

【网络架构】华为hw交换机网络高可用网络架构拓扑图以及配置

一、网络拓扑 1.网络架构 核心层:接入网络----路由器 汇聚层:vlan间通信 创建vlan ---什么是vlan:虚拟局域网,在大型平面网络中,为了实现广播控制引入了vlan,可以根据功能或者部门等创建vlan,再把相关的端口加入到vlan.为了实现不用交换机上的相同vlan通信,需要配置中继,为了…
阅读更多...
《HeadFirst设计模式(第二版)》第八章代码——模板方法模式

《HeadFirst设计模式(第二版)》第八章代码——模板方法模式

代码文件目录&#xff1a; CaffeineBeverage package Chapter8_TemplateMethodPattern;/*** Author 竹心* Date 2023/8/17**/public abstract class CaffeineBeverage {final void prepareRecipe(){boilWater();brew();pourInCup();//这里使用钩子customerWantsCondiments()来…
阅读更多...
FPGA：uart原理+tx发送模块+rx接收模块

FPGA：uart原理+tx发送模块+rx接收模块

文章目录 一、串口通信二、UART通信三、tx发送模块四、rx模块接收 一、串口通信 处理器与外部设备通信的两种方式&#xff1a; 串行通信&#xff1a; 指数据的各个位使用多条数据线同时进行传输。 并行通信&#xff1a; 将数据分成一位一位的形式在一条数据线上逐个传输。 串…
阅读更多...
Dodaf架构的学习分享

Dodaf架构的学习分享

一.Dodaf的内容 Dodaf的背景 DODAF&#xff08;Department of Defense Architecture Framework&#xff09;起源于美国国防部&#xff0c;是一个用于支持复杂系统设计、规划和实施的架构框架。以下是DODAF的背景和起源&#xff1a; 复杂系统需求&#xff1a;在军事和国防领域&…
阅读更多...
stm32单片机开关输入控制蜂鸣器参考代码（附PROTEUS电路图）

stm32单片机开关输入控制蜂鸣器参考代码（附PROTEUS电路图）

说明&#xff1a;这个buzzer的额定电压需要改为3V&#xff0c;否则不会叫&#xff0c;源代码几乎是完全一样的 //gpio.c文件 /* USER CODE BEGIN Header */ /********************************************************************************* file gpio.c* brief Thi…
阅读更多...
idea新建web项目

idea新建web项目

步骤一 步骤二 步骤三 新建两个目录lib、classes 步骤四 设置两个目录的功能lib、classes 步骤五 发布到tomcat
阅读更多...
网络编程面试笔试题

网络编程面试笔试题

一、OSI 7层模型&#xff0c;TCP/IP 4层模型 5层模型。 以及每一层的功能&#xff08;重点&#xff1a;第三层 第四层&#xff09; 答&#xff1a; 7层模型&#xff08;①物理层&#xff1a;二进制比特流传输&#xff0c;②数据链路层&#xff1a;相邻结点的可靠传输&#xf…
阅读更多...
选择大型语言模型自定义技术

选择大型语言模型自定义技术

推荐&#xff1a;使用 NSDT场景编辑器 助你快速搭建可二次编辑器的3D应用场景 企业需要自定义模型来根据其特定用例和领域知识定制语言处理功能。自定义LLM使企业能够在特定的行业或组织环境中更高效&#xff0c;更准确地生成和理解文本。 自定义模型使企业能够创建符合其品牌…
阅读更多...
“之江数据安全治理论坛”暨《浙江省汽车数据处理活动规定（专家建议稿）》研讨会顺利召开

“之江数据安全治理论坛”暨《浙江省汽车数据处理活动规定（专家建议稿）》研讨会顺利召开

研讨会主题 8月10日&#xff0c;“之江数据安全治理论坛”暨《浙江省汽车数据处理活动规定&#xff08;专家建议稿&#xff09;》研讨会在浙江大学计算机创新技术研究院举办。 本次研讨会的主题聚焦于“智能网联汽车的数据安全与数据合规”&#xff0c;邀请行业主管部门和数据…
阅读更多...
近 2000 台 Citrix NetScaler 服务器遭到破坏

近 2000 台 Citrix NetScaler 服务器遭到破坏

Bleeping Computer 网站披露在某次大规模网络攻击活动中&#xff0c;一名攻击者利用被追踪为 CVE-2023-3519 的高危远程代码执行漏洞&#xff0c;入侵了近 2000 台 Citrix NetScaler 服务器。 研究人员表示在管理员安装漏洞补丁之前已经有 1200 多台服务器被设置了后门&#x…
阅读更多...
Fork/Join框架

Fork/Join框架

是什么 Fork/Join框架是Java 7提供的一个用于并行执行任务的框架&#xff0c;是一个把大任务分割成若干个小任务&#xff0c;最终汇总每个小任务结果后得到大任务结果的框架。 Fork: 把一个大任务切分为若干子任务并行的执行 Join: 合并这些子任务的执行结果&#xff0c;最后…
阅读更多...
版本控制工具Git集成IDEA的学习笔记（第一篇Gitee）

版本控制工具Git集成IDEA的学习笔记（第一篇Gitee）

目录 一、Gitee的使用 1、注册网站会员 2、用户中心 3、创建远程仓库 4、配置SSH免密登录 二、集成IDEA&#xff0c;Git项目搭建 1、本地仓库搭建 1&#xff09;创建一个新项目 2&#xff09;打开终端&#xff0c;在当前目录新建一个Git代码库 3&#xff09;忽略文件 …
阅读更多...
Linux命令200例：tail用来显示文件的末尾内容（常用）

Linux命令200例：tail用来显示文件的末尾内容（常用）

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…
阅读更多...
通过Git使用GitHub

通过Git使用GitHub

目录 一、建立个人仓库 二、配置SSH密钥 三、克隆仓库代码 四、推送代码到个人仓库 五、代码拉取 一、建立个人仓库 1.建立GitHub个人仓库&#xff0c;首先注册GitHub用户。注册好了之后&#xff0c;打开用户的界面 然后就是配置问题 配置好后拉到最下方点击create repos…
阅读更多...
最新文章

Copyright @ 2022~2023