CSS 字体修饰属性

news2024/12/25 22:28:58

前言


字体修饰属性

属性说明
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.coloradmin.cn/o/887979.html

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

相关文章

IDEA常用插件推荐(个人)

分享下个人在大厂工作四五年的一个常用配置插件 一、Alibaba Java Coding Guidelines 代码规范插件(必备) 阿里巴巴代码规范检查 人手必备。减少你的垃圾代码 各种不良提示代码全靠它了。 代码划线的嘎嘎 crtlenter优化得了 二、Atom Material File Icons 图标主题插件(提示…

Java学习手册——第二篇面向对象程序设计

Java学习手册——第二篇面向对象 1. 结构化程序设计2. 面向对象 第一章我们已经介绍了Java语言的基础知识&#xff0c;也知道他能干什么了&#xff0c; 那我们就从他的设计思想开始入手吧。 接触一个语言之前首先要知道他的大方向&#xff0c;设计思想是什么样的&#xff0c; 这…

【高阶数据结构】红黑树详解

文章目录 前言1. 红黑树的概念及性质1.1 红黑树的概念1.2 红黑树的性质1.3 已经学了AVL树&#xff0c;为啥还要学红黑树 2. 红黑树结构的定义3. 插入&#xff08;仅仅是插入过程&#xff09;4. 插入结点之后根据情况进行相应调整4.1 cur为红&#xff0c;p为红&#xff0c;g为黑…

Redis——哨兵模式(docker部署redis哨兵)+缓存穿透和雪崩

哨兵模式 自动选取主机的模式。 概述 主从切换技术的方法是:当主服务器宕机后&#xff0c;需要手动把一台从服务器切换为主服务器&#xff0c;这就需要人工干预&#xff0c;费事费力&#xff0c;还会造成段时间内服务不可用。这不是一种推荐的方式&#xff0c;更多时候&…

LabVIEW调用DLL传递结构体参数

LabVIEW 中调用动态库接口时&#xff0c;如果是值传递的结构体&#xff0c;可以根据字段拆解为多个参数&#xff1b;如果参数为结构体指针&#xff0c;可用簇&#xff08;Cluster&#xff09;来匹配&#xff0c;其内存连续相当于单字节对齐。 1.值传递 接口定义&#xff1a; …

交叉导轨的内部结构

相对于直线导轨&#xff0c;交叉导轨的知名度是没那么高的&#xff0c;但随着技术水平的提高&#xff0c;精度更高&#xff0c;安装高度更低的交叉导轨也慢慢走近大众的视野&#xff0c;得到更多厂商的青睐&#xff0c;使用范围也更加广泛。 交叉导轨是由两根具有V型滚道的导轨…

数据结构之动态内存管理机制

目录 数据结构之动态内存管理机制 占用块和空闲块 系统的内存管理 可利用空间表 分配存储空间的方式 空间分配与回收过程产生的问题 边界标识法管理动态内存 分配算法 回收算法 伙伴系统管理动态内存 可利用空间表中结点构成 分配算法 回收算法 总结 无用单元收…

leetcode-413. 等差数列划分(java)

等差数列划分 leetcode-413. 等差数列划分题目描述双指针 上期经典算法 leetcode-413. 等差数列划分 难度 - 中等 原题链接 - 等差数列划分 题目描述 如果一个数列 至少有三个元素 &#xff0c;并且任意两个相邻元素之差相同&#xff0c;则称该数列为等差数列。 例如&#xff0…

【Linux操作系统】Linux系统编程实现递归遍历目录,详细讲解opendir、readdir、closedir、snprintf、strcmp等函数的使用

在Linux系统编程中&#xff0c;经常需要对目录进行遍历操作&#xff0c;以获取目录中的所有文件和子目录。递归遍历目录是一种常见的方法&#xff0c;可以通过使用C语言来实现。本篇博客将详细介绍如何使用C语言实现递归遍历目录的过程&#xff0c;并提供相应的代码示例&#x…

高阶数据结构-图

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

AgentBench::AI Agent 是大模型的未来

最有想象力、最有前景的方向 “Agent 是 LLM(大语言模型)的最有前景的方向。一旦技术成熟,短则几个月,长则更久,它可能就会创造出超级个体。这解释了我们为何对开源模型和 Agent 兴奋,即便投产性不高,但是我们能想象自己有了 Agent 之后就可以没日没夜地以百倍效率做现在…

Collada .dae文件格式简明教程【3D】

当你从互联网下载 3D 模型时&#xff0c;可能会在格式列表中看到 .dae 格式。 它是什么&#xff1f; 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景。 1、Collada DAE概述 COLLADA是COLLAborative Design Activity&#xff08;中文&#xff1a;协作设计活动&#xff09…

剑指offer43.1~n整数中1出现的次数

看到这么大的数据规模就直到用暴力法肯定会超时&#xff0c;但是还是花一分钟写了一个试一下&#xff0c;果然超时 class Solution {public int countDigitOne(int n) {int count 0;for(int i1;i<n;i){countdigitOneInOneNum(i);}return count;}public int digitOneInOneNu…

从零实战SLAM-第九课(后端优化)

在七月算法报的班&#xff0c;老师讲的蛮好。好记性不如烂笔头&#xff0c;关键内容还是记录一下吧&#xff0c;课程入口&#xff0c;感兴趣的同学可以学习一下。 --------------------------------------------------------------------------------------------------------…

字符个数统计(同类型只统计一次)

思路&#xff1a;因为题目圈定出现的字符都是 ascii 值小于等于127的字符&#xff0c;因此只需要定义一个标记数组大小为128 &#xff0c;然后将字符作为数组下标在数组中进行标记&#xff0c;若数组中没有标记过表示第一次出现&#xff0c;进行计数&#xff0c;否则表示重复字…

Layui列表复选框根据条件禁用

// 禁用客服回访id有值的复选框res.data.forEach(function (item, i) {if (item.feedbackEmpId) {let index res.data[i][LAY_TABLE_INDEX];$(".layui-table tr[data-index"index"] input[typecheckbox]").prop(disabled,true);$(".layui-table tr[d…

探索Chevereto图床:使用Docker Compose快速搭建个人图床

家人们!图片在今天的社交媒体、博客和论坛中扮演着至关重要的角色。然而&#xff0c;随着图片数量的增加&#xff0c;寻找一个可靠的图片托管解决方案变得越来越重要。Chevereto图床是一个备受赞誉的解决方案&#xff0c;而使用Docker Compose搭建它更是一种高效、可维护的方法…

【内容安全】微服务学习笔记八:使用腾讯云T-Sec天御对文本及图片内容进行安全检测

个人简介&#xff1a; > &#x1f4e6;个人主页&#xff1a;赵四司机 > &#x1f3c6;学习方向&#xff1a;JAVA后端开发 > &#x1f4e3;种一棵树最好的时间是十年前&#xff0c;其次是现在&#xff01; > ⏰往期文章&#xff1a;SpringBoot项目整合微信支付 &g…

安装paddlepadddle-gpu的正确方式

正确安装paddlepadddle-gpu的方式 1.查看系统CUDA版本2.参照飞桨官网快速pip安装 安装paddlepaddle时&#xff0c;pip install paddlepaddle是直接安装的CPU版本&#xff0c;要安装GPU版本的话&#xff0c;就要注意适配的CUDA版本&#xff0c;安装GPU版本可参照官网教程&#x…

做一个超简单的Python运行

作为一名专业的爬虫代理产品供应商&#xff0c;我知道很多人对Python爬虫有兴趣&#xff0c;但可能不知道该从何处入手。今天&#xff0c;我就来分享一个超简单的Python爬虫入门教程&#xff0c;希望能帮助到你们&#xff01;快点准备起来&#xff0c;让我们开始吧&#xff01;…