21.1 CSS 文字样式

news2024/12/23 22:25:04

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.coloradmin.cn/o/892242.html

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

相关文章

Linux系列讲解 —— 【debugfs】交互式文件系统调试器

Linux系列讲解 —— 【debugfs】交互式文件系统调试器

手册上说debugfs可以用于检查和更改ext2、ext3或ext4文件系统的状态。似乎很牛的样子&#xff0c;但是我并没有试验出来它多么强大的功能&#xff0c;无非就是在某些文件损坏导致无法删除的时候&#xff0c;我用debugfs来删除这些文件而已&#xff0c;如果有人知道它其他的妙用…
阅读更多...
ChatGLM2-6B安装部署（详尽版）

ChatGLM2-6B安装部署（详尽版）

1、环境部署 安装Anaconda3 安装GIT 安装GUDA 11.8 安装NVIDIA 图形化驱动 522.25版本&#xff0c;如果电脑本身是更高版本则不用更新 1.1、检查CUDA 运行cmd或者Anaconda&#xff0c;运行以下命令 nvidia-smi CUDA Version是版本信息&#xff0c;Dricer Version是图形化…
阅读更多...
分布式光伏运维平台在公益场馆屋顶光伏发电系统的应用分析

分布式光伏运维平台在公益场馆屋顶光伏发电系统的应用分析

摘要&#xff1a;2021年9月&#xff0c;国家发改委印发烷善能源消费强度和总量双控制度方案》&#xff0c;提出鼓励可再生能源的使用&#xff0c;支持可再生能源发展。在这样的政策推动下&#xff0c;光伏发电市场无疑将迎来高质量发展的新机遇。现结合山东博物馆光伏电站日常管…
阅读更多...
C#语音播报问题之 无法嵌入互操作类型SpVoiceClass，请改用适用的窗口

C#语音播报问题之 无法嵌入互操作类型SpVoiceClass，请改用适用的窗口

C#语音播报问题之 无法嵌入互操作类型SpVoiceClass&#xff0c;请改用适用的窗口 解决办法如下&#xff1a; 只需要将引入的Interop.SpeechLib的属性嵌入互操作类型改为false 改为false 即可解决&#xff01;
阅读更多...
【Spring专题】Spring之Bean的生命周期源码解析——阶段二（二）（IOC之属性填充/依赖注入）

【Spring专题】Spring之Bean的生命周期源码解析——阶段二（二）（IOC之属性填充/依赖注入）

目录 前言阅读准备阅读指引阅读建议 课程内容一、依赖注入方式&#xff08;前置知识&#xff09;1.1 手动注入1.2 自动注入1.2.1 XML的autowire自动注入1.2.1.1 byType&#xff1a;按照类型进行注入1.2.1.2 byName&#xff1a;按照名称进行注入1.2.1.3 constructor&#xff1a;…
阅读更多...
快速实现SAP的移动化和流程优化

快速实现SAP的移动化和流程优化

热门议题&#xff1a; 1、企业如何快速解决人员移动办公的需求&#xff0c;比如在苹果安卓手机&#xff0c;平板电脑&#xff0c;MAC登录SAP。2、企业如何解决用户经常抱怨的流程复杂&#xff0c;操作繁琐&#xff0c;难以使用等问题 公司介绍&#xff1a; Synactive,Inc. 是…
阅读更多...
【校招VIP】前端校招考点之vue底层特性

【校招VIP】前端校招考点之vue底层特性

考点介绍&#xff1a; 大家在面试途中遇到的相对多的问题&#xff0c;也是难点的问题&#xff0c;一般都有vue底层原理。对于只会用但是不懂的小白来说真是太痛苦了&#xff0c;仅仅能说出来 一些 数据劫持&#xff0c;双向数据绑定&#xff0c;虚拟dom树的名词来说远远不够。 …
阅读更多...
通过 HttpClient 发送请求

通过 HttpClient 发送请求

文章目录 1. 引入 maven 依赖2. 发送 GET 方式的请求3. 发送 POST 方式的请求 1. 引入 maven 依赖 <dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId> </dependency>2. 发送 GET 方式的请求…
阅读更多...
《Go 语言第一课》课程学习笔记（六）

《Go 语言第一课》课程学习笔记（六）

变量声明&#xff1a;静态语言有别于动态语言的重要特征 变量所绑定的内存区域是要有一个明确的边界的。也就是说&#xff0c;通过这样一个变量&#xff0c;我们究竟可以操作 4 个字节内存还是 8 个字节内存&#xff0c;又或是 256 个字节内存&#xff0c;编程语言的编译器或解…
阅读更多...
【考研数学】概率论与数理统计 | 第一章——随机事件与概率（3，全概率公式、贝叶斯公式与三大概型）

【考研数学】概率论与数理统计 | 第一章——随机事件与概率（3，全概率公式、贝叶斯公式与三大概型）

文章目录 引言六、全概率公式与贝叶斯公式6.1 全概率公式6.2 贝叶斯公式 七、三大概型7.1 古典概型7.2 几何概型7.3 伯努利概型 引言 承接前文&#xff0c;在事件的独立之后&#xff0c;我们开始学习全概率公式、贝叶斯公式以及概型。 六、全概率公式与贝叶斯公式 定义—— 完…
阅读更多...
【Diffusion】李宏毅2023机器学习Diffusion笔记

【Diffusion】李宏毅2023机器学习Diffusion笔记

文章目录 1 想法概述2 实际过程阶段1 Add Noise阶段2 Denoise 3 数学原理4 为什么推理时要额外加入noise5 一些不知道对不对的Summary 1 想法概述 从一张充满噪声的图中不断denoise&#xff0c;最终得到一张clear的图片。为了确定当前图片中噪声占比的大小&#xff0c;同时输入…
阅读更多...
【福建事业单位-公共基础-哲学】01哲学基本概述、唯物论和唯物辩证法（发展联系）

【福建事业单位-公共基础-哲学】01哲学基本概述、唯物论和唯物辩证法（发展联系）

【福建事业单位-公共基础-】01哲学基本概述和唯物论 一、哲学1.1 哲学的概念1.2 哲学的基本问题—思维和存在的关系问题/意识和物质1.3哲学的基本派别:唯物主义与唯心主义古代朴素唯物主义近代形而上学唯物主义辩证唯物主义和历史唯物主义主观和客观唯心主义 1.4辩证法与形而上…
阅读更多...
LVS负载均衡集群-NAT模式部署

LVS负载均衡集群-NAT模式部署

集群 集群&#xff1a;将多台主机作为一个整体&#xff0c;然后对外提供相同的服务 集群使用场景&#xff1a;高并发的场景 集群的分类 1.负载均衡器集群 减少响应延迟&#xff0c;提高并发处理的能力 2&#xff0c;高可用集群 增强系统的稳定性可靠性&…
阅读更多...
C++ 网络编程项目fastDFS分布式文件系统（三）-Nginx部分

C++ 网络编程项目fastDFS分布式文件系统（三）-Nginx部分

目录 1. 一些基本概念 1.1 Nginx初步认识 1.2 正向/反向代理 1.3 域名和IP 2. Nginx 安装和配置 2.1 安装 2.2 配置 3. Nginx的使用 3.1 部署静态网页 3.2 反向代理和负载均衡 4 课外知识导读 1. URL和URI ​编辑 2. DNS解析过程 1. 一些基本概念 1.1 Nginx初步认…
阅读更多...
如何在控制台查看excel内容

如何在控制台查看excel内容

背景 最近发现打开电脑的excel很慢&#xff0c;而且使用到的场景很少&#xff0c;也因为mac自带了预览的功能。但是shigen就是闲不住&#xff0c;想自己搞一个excel预览软件&#xff0c;于是在一番技术选型之后&#xff0c;我决定使用python在控制台显示excel的内容。 具体的需…
阅读更多...
Java进阶篇--数据结构

Java进阶篇--数据结构

目录 一.数组&#xff08;Array&#xff09;&#xff1a; 1.1 特点&#xff1a; 1.2 基本操作&#xff1a; 1.3 使用数组的好处包括&#xff1a; 1.4 数组也有一些限制&#xff1a; 二.集合框架&#xff08;Collections Framework&#xff09;&#xff1a; 2.1 列表…
阅读更多...
wsl安装Linux kali

wsl安装Linux kali

目录 1.启用“Hyper-V”和“~子系统” 2.启用虚拟化 3.安装发行版 4.升级原有系统到WSL2 5.kali换源与更新升级并安装工具集 6.kali安装图形界面~GUI 7.kali安装中文界面与中文输入法 8.wsl~kali位置迁移 1.启用“Hyper-V”和“~子系统” 打开控制面板---->>程序…
阅读更多...
JupyterHub实战应用

JupyterHub实战应用

一、JupyerHub jupyter notebook 是一个非常有用的工具&#xff0c;我们可以在浏览器中任意编辑调试我们的python代码&#xff0c;并且支持markdown 语法&#xff0c;可以说是科研利器。但是这种情况适合个人使用&#xff0c;也就是jupyter notebook以我们自己的主机作为服务器…
阅读更多...
SpringBoot-lombok

SpringBoot-lombok

为什么要使用lombok? Lombok是一个通过注解以达到减少代码的Java库,如通过注解的方式减少getter,setter方法,构造方法等。通过注解的形式自动生成构造器、getter/setter、equals、hashcode、toString等方法&#xff0c;并可以自动化生成日志变量&#xff0c;简化java开发、提高…
阅读更多...
spring boot 整合mongodb

spring boot 整合mongodb

1、安装依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-mongodb</artifactId></dependency>2、配置数据库连接 spring:data:mongodb:host: localhostport: 27017username: xxxxxxp…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023