CSS 字体修饰属性

前言


字体修饰属性

属性说明
font-family指定文本显示字体
font-size设置字体的大小
font-weight设置字体的粗细程度
font-style设置字体的倾斜样式
text-decoration给文本添加装饰线
text-indent设置文本的缩进
text-align设置文本的对齐方式
line-height设置行高
color设置文本的颜色
font一次性设置多个属性

字体族

可以使用font-family来设置字体族(即字体的类型)以指定文本显示的字体。应用于文本的字体系列。可以通过逗号分隔指定多个字体名称,以便在字体不可用时使用备用字体。

语法:

font-family:value;

value可以是一个字体名称,也可以是一个由字体名称组成的列表。在列表中,你可以按照优先级从高到低的顺序列出多个备选字体名称,以便浏览器根据字体是否可用选择合适的字体进行显示。

示例:

p {font-family: "Arial", sans-serif;
}

上述样式规则将选择所有<p>标签,并将其字体设置为Arial,如果Arial不可用,则可以使用sans-serif作为备用字体。

需要注意以下几点:

  1. 如果字体名称包含空格或非字母数字字符,需使用引号将其括起来,如 "Times New Roman"。
  2. 如果字体名称不可用或不存在,浏览器会按照设置的顺序尝试使用后面的备选字体。
  3. 为了提高兼容性和跨平台一致性,建议指定通用字体族作为备选字体,例如 serif、sans-serif、monospace 等。

字体大小

可以使用font-size属性来设置字体的大小。

语法:

font-size: value;

value可以是绝对长度(如像素、英寸) 、相对长度(如em、rem)或相对于父元素字体大小的百分比。

示例:

h1 {font-size: 24px;
}

上述样式规则将选择所有<h1>标签,并将它们的字体大小设置为24像素。

需要注意以下几点:

  1. 字体大小的取值可以是绝对长度、相对长度或相对于父元素字体大小的百分比。
  2. 相对长度单位(如 em、rem)和百分比大小都是相对于父元素的字体大小进行计算的。
  3. 不同的浏览器和设备可能会对字体大小的渲染有细微差异,因此建议在设计和开发时进行适当的测试和调整。

字体粗细

可以使用font-weight属性来设置字体的粗细程度。

语法:

font-weight: normal | bold | bolder | lighter | number;
  • normal:默认值,表示正常字体。
  • bold:加粗字体。
  • bolder:更粗的字体(相对于父元素) 。
  • lighter:更细的字体(相对于父元素)。
  • number:可以使用数值定义字体的粗细程度。常用的数值有100、200、300、400(相当于normal)、500、600、700(相当于bold)、800和900。

示例:

strong {font-weight: bold;  /* 加粗字体 */
}

上述样式规则将选择所有<strong>标签,并将它们的字体设为粗体。

需要注意的是,字体的可以粗细程度取决于所使用的字体和操作系统。并不是所有的字体都支持所有粗细程度,而且在不同浏览器和操作系统下,字体的粗细显示效果可能会有所差异。


字体倾斜

可以使用font-style属性来设置字体的倾斜样式。

语法:

font-style: value;

value可以是以下常用取值:

  • normal:默认值,表示不进行倾斜处理。
  • italic:使字体以倾斜显示。
  • oblique:使字体以倾斜显示。 

示例:

em {font-style:italic;
}

上述样式规则将对所有<em>标签内文本应用斜体样式。

需要注意以下几点:

  1. 并非所有字体都支持斜体或倾斜显示,具体效果取决于所使用的字体和操作系统。
  2. 如果指定的字体样式不可用,则浏览器会按照设备的默认方式显示文本。
  3. 可以通过组合使用字体族、字体大小以及其他 CSS 属性来实现更精确的文本样式控制。

装饰线

可以使用text-decoration属性来添加装饰线到文本中。

语法:

text-decoration: value;

value可以是以下常用的取值:

  • none:默认值,表示不添加任何装饰线。
  • underline:给文本添加下划线。
  • overline:给文本添加上划线。
  • line-through:给文本添加删除线。

示例:

a {text-decoration: underline;
}

上述样式规则将选择所有<a>标签,并给它们添加下划线。

需要注意以下几点:

  • 并非所有字体都支持所有的装饰线样式,具体效果取决于所使用的字体和操作系统。
  • 可以通过组合使用 text-decoration 和其他 CSS 属性来实现更精确的文本装饰效果,如改变线条颜色、样式等。

文本缩进

可以使用text-indent属性来设置文本的缩进。该属性用于指定元素内文本段落第一行相对于其左边缘的偏移量。

语法:

text-indent: value;

value可以是以下常用取值:

  • <length>:指定一个具体的长度值,如像素(px)、英寸(in)、厘米(cm)等。例如,text-indent: 20px; 将文字缩进20像素。
  • %:指定一个相对于包含块宽度的百分比值。例如,text-indent: 50%; 将文字缩进到包含块宽度的一半处。
  • inherit:从父元素继承text-indent的值。

示例:

p {text-indent: 2em;    /* 缩进2个字符宽度 */
}

上述样式规则将对所有的<p>标签中的文本段落应用缩进,使每个段落的第一行向右缩进2个字符宽度。

blockquote {text-indent: 20px;
}

上述样式规则将对所有<blockquote>标签应用缩进,使每个块引用的第一行向右缩进20像素。

需要注意以下几点:

  • text-indent 属性应用于块级元素,如 <p><div> 等,默认情况下不适用于行内元素。
  • 如果父元素指定了 text-indent,子元素也会继承该属性的值,除非子元素显式覆盖了该属性。

文本对齐

可以使用text-align属性来设置文本的对齐方式。该属性用于指定文本相对于其容器的水平对齐方式。

语法:

text-align: left | right | center | justify;
  • left: 左对齐,文本与容器左边缘对齐。
  • right:右对齐,文本与容器右边缘对齐。
  • center:居中对齐,文本只在容器内水平居中对齐。
  • justify:两段对齐,文本在容器内两端对齐,行末如果需要会自动调整字间距。

示例:

p {text-align: left;  /* 左对齐 */
}

上述样式规则将对所有<p>标签中的文本应用左对齐。

需要注意的是,text-align属性仅影响行内文本元素和一些块级元素(如段落、标题)。而对于一些块级盒子元素,默认情况下会填充整个父容器。所以对其使用text-align属性并不会产生明显效果。


行高

可以使用line-height属性来设置行高,即行与行之间的垂直间距。行高可以影响文本在行内的垂直对齐方式和间距。

语法:

line-height: normal | number | lenght | initial | inherit;
  • normal:默认值,表示使用默认行高。
  • number:可以使用数值定义行高,数值相对于当前元素的字体大小。例如,1.5表示行高为字体的1.5倍。
  • lenght:使用固定长度(如像素)定义行高。
  • initial:恢复为默认值。
  • inherit:继承父元素的行高。

示例:

h1 {line-height: 1.5;   /* 行高为字体大小的1.5倍 */
}

上述样式规则将对所有<h1>标签中的文本应用行高为字体大小的1.5倍。

需要注意的是,行高的取值可以是相对值(如倍数)或绝对值(如像素),而具体的展现效果会受到字体、文本内容和行高设置所在的上下文等多种因素的影响。选择合适的行高可以使文本更易读、整齐美观,同时也要避免行间距过大或过小而影响阅读体验。


字体颜色

可以使用color属性来设置文本的颜色。

语法:

color: value;

value可以是以下常用取值:

  • 颜色名称:如 "red" 表示红色、"blue" 表示蓝色等。
  • 十六进制值:如 "#FF0000" 表示红色、"#00FF00" 表示绿色等。每个颜色通道使用两个十六进制数字表示,其中前两位表示红色通道、中间两位表示绿色通道、后两位表示蓝色通道。例如,"#FF0000" 表示红色,其红色通道的值为 255、绿色通道和蓝色通道的值为 0。
  • RGB 值:如 "rgb(255, 0, 0)" 表示红色、"rgb(0, 255, 0)" 表示绿色等。每个颜色通道的值介于 0 到 255 之间,分别表示红色、绿色和蓝色的强度。

示例:

p {color: red;
}

上述样式规则将对所有<p>标签内的文本设置红色颜色。

需要注意以下几点:

  • CSS 支持多种颜色表示方法,你可以选择适合你的需求和喜好的方式来设置颜色。
  • 除了使用 color 属性来设置元素的文本颜色,还可以使用其他 CSS 属性来设置背景色、边框色等。

字体复合属性

可以使用字体相关的复合属性来一次性设置多个字体属性,各个属性间用空格隔开。

font:是否倾斜  是否加粗  字号/行高  字体(必须按顺序书写)

示例:

/* 单独写 */
div {font-style: italic;font-weight: bold;font-size: 20px;line-height: 1.5;font-family: Arial, sans-serif;
}/* 简写 */
div {font: italic bold 20px/1.5 Arial, sans-serif;
}

注意,字号和字体值必须书写,否则font属性不生效。

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

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

相关文章

会话跟踪Session

前面介绍的时候&#xff0c;我们提到 Session &#xff0c;它是服务器端会话跟踪技术&#xff0c;所以它是存储在服务器端的。而 Session 的底层其实就是基于我们刚才所介绍的 Cookie 来实现的。 1.如果我们现在要基于 Session 来进行会话跟踪&#xff0c;浏览器在第一次请…

阿里巴巴常用的12个后端开发工具

1 阿尔萨斯Java在线诊断工具 Arthas是一款用于Java应用程序的在线诊断工具&#xff0c;由阿里巴巴于2018年9月开源。 典型场景&#xff1a; 您不知道从中加载类的特定JAR包。 您想弄清楚为什么您的系统会抛出各种与类相关的异常。 您不知道为什么修改后的代码无法执行。您不…

Docker实战:docker compose 搭建Redis

1、配置文件准备 redis 配置文件&#xff1a;https://pan.baidu.com/s/1YreI9_1BMh8XRyyV9BH08g2、创建目录并赋权 mkdir -p /home/docker/redis/data /home/redis/logs /home/redis/conf chmod -R 777 /home/docker/redis/data* chmod -R 777 /home/docker/redis/logs*3、re…

css题库

什么是css&#xff1f; CSS 是“Cascading Style Sheet”的缩写&#xff0c;中文意思为“层叠样式表”&#xff0c;它是一种标准的样式表语言&#xff0c;用于描述网页的表现形式&#xff08;例如网页元素的位置、大小、颜色等&#xff09;。 为什么最好把 CSS 的 link 标签放在…

Docker 的基本概念和优势,在应用程序开发中的实际应用。

Docker是一个开源的容器化平台&#xff0c;让开发者能够轻松地打包、运输和运行应用程序。其基本概念包括&#xff1a; 镜像(Image)&#xff1a;一个镜像是一个只读的软件包&#xff0c;它包含了运行应用所需的所有代码、库文件、环境变量和配置文件等。 容器(Container)&…

Nginx转发请求到后端服务报400 Bad Request

问题描述 系统部署好后&#xff0c;进行测试时发现有部分接口出错&#xff0c;项目采用Nginx作为后端代理服务器&#xff0c;有Nginx统一将请求转发到后端的网关服务&#xff0c;再由网关服务路由到具体的服务上&#xff0c;发布好后&#xff0c;大部分接口都是正常的&#xff…

Linux 线程并发运行

一、并发与并行 并行&#xff1a;两个线程在同一时刻同时执行&#xff0c;需要有两个处理器。 并发&#xff1a;两个线程在同一时刻交替执行&#xff0c;只有一个处理器。 并行是一种特殊的并发。 二、线程并发运行 代码如下&#xff1a; 代码分析&#xff1a; 主函数中第…

第 111 场LeetCode 双周赛题解

A 统计和小于目标的下标对数目 数据量小&#xff0c;直接枚举数对 class Solution { public:int countPairs(vector<int> &nums, int target) {int n nums.size();int res 0;for (int i 0; i < n; i)for (int j 0; j < i; j)if (nums[i] nums[j] < tar…

[Go版]算法通关村第十二关青铜——不简单的字符串转换问题

目录 题目&#xff1a;转换成小写字母思路分析&#xff1a;大写字母ASCII码 32 小写字母ASCII码Go代码Go代码-优化: 大写字母ASCII码 | 32 小写字母ASCII码 题目&#xff1a;字符串转换整数&#xff08;atoi&#xff09;思路分析&#xff1a;去除首部空格 明确正负 读取数…

【Spring Boot】详解条件注解以及条件拓展注解@Conditional与@ConditionOnXxx

Spring Conditional Spring 4.0提供的注解。作用是给需要装载的Bean增加一个条件判断。只有满足条件才会装在到IoC容器中。而这个条件可以由自己去完成的&#xff0c;可以通过重写Condition接口重写matches()方法去实现自定义的逻辑。所以说这个注解增加了对Bean装载的灵活性。…

STM32 CubeMX (第四步Freertos内存管理和CPU使用率)

STM32 CubeMX STM32 CubeMX &#xff08;第四步Freertos内存管理和CPU使用率&#xff09; STM32 CubeMX一、STM32 CubeMX设置时钟配置HAL时基选择TIM1&#xff08;不要选择滴答定时器&#xff1b;滴答定时器留给OS系统做时基&#xff09;使用STM32 CubeMX 库&#xff0c;配置Fr…

通过安全日志读取WFP防火墙放行日志

前言 之前的文档中&#xff0c;描写了如何对WFP防火墙进行操作以及如何在防火墙日志中读取被防火墙拦截网络通讯的日志。这边文档&#xff0c;着重描述如何读取操作系统中所有被放行的网络通信行为。 读取系统中放行的网络通信行为日志&#xff0c;在win10之后的操作系统上&am…

高阶数据结构-图

高阶数据结构-图 图的表示 图由顶点和边构成&#xff0c;可分为有向图和无向图 邻接表法 图的表示方法有邻接表法和邻接矩阵法&#xff0c;以上图中的有向图为例&#xff0c;邻接表法可以表示为 A->[(B,5),(C,10)] B->[(D,100)] C->[(B,3)] D->[(E,7)] E->[…

FPGA原理与结构——ROM IP的使用与测试

一、前言 本文介绍Block Memory Generator v8.4 IP核 实现ROM&#xff0c;在学习一个IP核的使用之前&#xff0c;首先需要对于IP核的具体参数和原理有一个基本的了解&#xff0c;具体可以参考&#xff1a; FPGA原理与结构——块RAM&#xff08;Block RAM,BRAM&#xff09;http…

供应链安全和第三方风险管理:讨论如何应对供应链中的安全风险,以及评估和管理第三方合作伙伴可能带来的威胁

第一章&#xff1a;引言 在当今数字化时代&#xff0c;供应链的安全性越来越受到重视。企业的成功不仅仅依赖于产品和服务的质量&#xff0c;还取决于供应链中的安全性。然而&#xff0c;随着供应链越来越复杂&#xff0c;第三方合作伙伴的参与也带来了一系列安全风险。本文将…

C#中的委托

目录 概述&#xff1a; 举例&#xff1a;​ 总结: 概述&#xff1a; 中文的角度来说:指的是把事情托付给别人或别的机构(办理)&#xff0c;造个句子&#xff1a;别人委托的事情&#xff0c;我们一定要尽力而为&#xff0c;不遗余力的去办成。 在C#中&#xff0c;委托是一种…

回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现GA-RBF遗传算法优化径向基函数神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果…

CoordAtt注意力网络结构

源码&#xff1a; import torch import torch.nn as nn import math import torch.nn.functional as Fclass h_sigmoid(nn.Module):def __init__(self, inplaceTrue):super(h_sigmoid, self).__init__()self.relu nn.ReLU6(inplaceinplace)def forward(self, x):return self.…

VSCode\PyCharm23.2+PyQGIS插件开发配置相关要点

近期利用VSCode\PyCharmPyQGIS进行插件开发&#xff0c;现将要点总结一下&#xff1a; 一、VSCode&#xff0c;我没有配置成功&#xff0c;主要是最后一个阶段调试的时候老是不成功。以后会持续关注。但是有几个要点&#xff1a; 1、VSCodePyQIS开发&#xff0c;智能提示的设…

Apache Doris 2.0.0 特性分析

1、存算分离 所谓存算分离是指查询外表时&#xff0c;使用一种专门做计算的BE节点&#xff0c;但对于存储在BE上的内部表&#xff0c;目前还不能做到存储分离。 doris可以查询外部表&#xff0c;包括&#xff1a; Hive、Iceberg、Hudi、Elasticsearch、JDBC、Paimon 早期版本中…