CSS文本属性与字体属性

目录

文本属性

文本颜色

文本对齐

修饰文本

文本缩进

行高

字体属性

字体系列

字体大小

字体粗细

字体样式

字体/文本综合属性写法

Chrome调试工具的使用

文本属性

文本颜色

在CSS中使用color 属性用于定义文本的颜色，使用background-color设置一个盒子背景颜色

基本语法：

选择器 {color: 颜色值;background-color: 颜色值;
}

在CSS中，颜色值有四种表示形式，这四种表示形式都是等价的：

表示形式

属性值

预定义的颜色值

red, green,blue...

十六进制（开发时最常用）

#ff000, #ff6600, #29D794...

RGB值

rgb(255, 0, 0)或rgb(100%, 0%, 0%)

RGBa值（a表示透明度）

rgba(0, 0, 0, 0.5)

对于十六进制表示方法需要注意：

如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字，例如：#ffaabb改写成#fab，但是类似于：#ffaabc不能改写成#fabc

常见的十六进制取值：

纯白色：#fff

纯黑色：#000

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本颜色</title><style>.red {/* color: red; 等价于下面的代码*/color: #ff0000;}.red_transparent {color: rgba(255, 0, 0, 0.5);}.blue {/* color: blue; 等价于下面的代码 */color: #0000ff;}.green {/* color: green; 等价于下面的代码*/color: #008000;}</style>
</head><body><p class="red">这是一个红色的段落</p><p class="red_transparent">这是一个半透明红色的段落</p><p class="blue">这是一个蓝色的段落</p><p class="green">这是一个绿色的段落</p>
</body></html>

效果如下：

文本对齐

在CSS中使用text-align 属性用于设置元素内文本内容的水平对齐方式

基本语法：

选择器 {text-align: 值;
}

在CSS中，text-align属性有三种值：

属性值

描述

left

左对齐（默认值）

center

居中对齐

right

右对齐

对于占用一整行的标签来说，其区域相当于一个盒子，而文本对齐属性实际改变的是文字在盒子中的位置，但是并不改变盒子本身的大小，对于只占用当前位置的标签来说，居中对齐效果需要text-align属性给文本所在标签（文本的父元素）设置

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本对齐属性</title><style>.font-align {/* 将p标签的文本对齐方式设置为居中 */text-align: center;}</style>
</head><body><p class="font-align">这是一个居中对齐的p标签</p><span class="font-align">这是一个居中对齐的span标签</span><br /><span>这是一个没有居中对齐的span标签</span><div class="font-align">这是一个居中对齐的div标签</div></body></html>

效果如下：

修饰文本

在CSS中使用text-decoration属性修改文本是否带有划线

基本语法：

选择器 {text-decoration: 值;
}

在CSS中，修饰文本有以下四个值：

属性值

描述

none

无装饰线（默认值）

underline

下划线（部分标签自带下划线，例如标签<a></a>）

overline

上划线

line-through

删除线

一般使用text-decoration属性是为了将带有下划线的标签改为无下划线

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>修改文本</title><style>/* 将a标签的文本修饰设置为无修饰 */.non-decorate {text-decoration: none;}</style>
</head><body><a href="https://www.baidu.com">百度一下</a><a href="https://www.baidu.com" class="non-decorate">百度一下</a>
</body></html>

效果如下：

文本缩进

在CSS中使用text-indent属性对文本缩进进行控制

基本语法：

选择器 {text-indent: 值em/值px;
}

在设置文本缩进值时，可以考虑采用em作为单位，也可以采用px作为单位，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本缩进</title><style>.indent {/* 将p标签的文本缩进设置为2em（2个字符） */text-indent: 2em;}</style>
</head><body><p class="indent">这是一个缩进2个字符的段落</p><p>这是一个没有缩进的段落</p>
</body></html>

效果如下：

行高

在CSS中可以使用line-height 属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离

所谓行高，即行与行之间的间距，具体包括的范围如下：

📌

注意段落间距并不是由行高来决定的，改变行高不会改变段落间距

基本语法：

选择器 {line-height: 值em/值px;
}
  1. 让单行文本垂直居中可以设置line-height:文字父元素高度
  2. 网页精准布局时，会设置Iine-height: 1（不要带单位）可以取消上下间距

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行高</title><style>* {font-family: 'Microsoft YaHei';}.height_line {line-height: 60px;}</style>
</head><body><!-- 段落行高 --><p class="height_line">这是一个段落，并且设置了行高为60px <br />这是第二行</p><p>这是一个段落，但是没有设置行高 <br />这是第二行 </p>
</body></html>

效果如下：

字体属性

字体系列

在CSS中 使用 font-family 属性定义文本的字体系列

基本语法如下：

标签 {font-family: 字体, 字体;
}

注意：

  1. 各种字体之间必须使用英文状态下的逗号隔开
  2. 一般情况下,如果有空格隔开的多个单词组成的字体,加单引号或双引号，例如"Microsoft YaHei"
  3. 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
  4. 如果字体系列中有多个字体时，将会从左向右依次匹配，直到匹配到当前设备存在的字体
  5. 常见字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体集属性</title><style>.fontStyle{font-family:'Microsoft YaHei', 'Times New Roman', Times, serif;}</style>
</head>
<body><p>这是一个段落，观察字体</p><p class="fontStyle">这是一个段落，观察字体</p>
</body>
</html>

效果如下：

字体大小

在CSS中使用 font-size 属性定义字体大小

基本语法如下：

标签 {font-size: 大小px;
}
  1. px（像素）大小是我们网页的最常用的单位，给大小时一定要带px
  2. 谷歌浏览器默认的文字大小为16px
  3. 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
  4. 使用<body></body>可以指定整个页面文字的大小

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体大小属性设置</title><style>.fontsize {font-size: 20px;}</style>
</head>
<body><h1 class="fontsize">字体大小属性设置</h1><h1>字体大小属性设置</h1><p class="fontsize">这是一个20px的字体大小</p><p>这是一个默认的字体大小</p>
</body>
</html>

效果如下：

字体粗细

在CSS中使用font-weight 属性设置文本字体的粗细

基本语法如下：

选择器 {font-weight: 值;
}

在CSS中，有下面三种值：

属性值

描述

normal

默认值（不加粗）

bold

定义粗体（加粗）

常数值

在CSS中，一共有100-900九个值，400等同于normal，700等同于bold

一般考虑将粗体改为非粗体，例如将粗体的标题改为非粗体

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>将标题改为非粗体</title><style>h1 {font-family: 'Microsoft YaHei';}/* 将h1标签的字体粗细设置为非粗体 */.non-bold {font-weight: 400;}</style>
</head><body><h1>这是一个正常标题</h1><h1 class="non-bold">这是非粗体标题</h1>
</body></html>

效果如下：

字体样式

在CSS中 使用 font-style 属性设置文本的风格

基本语法：

选择器 {font-style: 值;
}

属性值

描述

normal

默认值，浏览器会显示每一个标签的默认值

italic

浏览器会显示斜体

示例代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式</title><style>/* 将p标签的字体样式设置为斜体 */.italic {font-style: italic;}</style>
</head><body><p>这是一个段落，但是没有被修饰为斜体</p><p class="italic">这是一个段落，并且被修饰为斜体</p>
</body></html>

效果如下：

字体/文本综合属性写法

字体属性可以把以上文字样式综合来写, 这样可以更节约代码:

基本语法：

选择器 {   font: font-style  font-weight  font-size/line-height  font-family;
}

使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开 不需要设置的属性可以省略（浏览器取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体样式综合</title><style>.fontStyle {/* 按照下面的顺序进行书写：font-style font-weight font-size font-family */font: italic bold 20px 'Microsoft YaHei';}</style>
</head><body><p class="fontStyle">这是一个段落，并且被修饰为斜体，粗体，20px，Microsoft YaHei</p><p>这是一个段落，但是没有被修饰</p>
</body></html>

效果如下：

Chrome调试工具的使用

  1. Ctrl+滚轮 可以放大开发者工具代码大小
  2. 一般左边是 HTML 元素结构，右边是 CSS 样式
  3. 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色
  4. Ctrl + 0 复原浏览器大小
  5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  6. 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误

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

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

相关文章

Adobe Acrobat PDF 2024

Adobe Acrobat PDF 2024

Adobe Acrobat PDF 2024正式发布&#xff01;支持Windows和macOS系统&#xff0c;新界面做了轻微调整。 下载地址 Windows客户端&#xff1a;https://www.123pan.com/s/f43eVv-GKZKd.html macOS客户端&#xff1a;https://www.123pan.com/s/f43eVv-PKZKd.html
阅读更多...
带缓存的输入输出流（I/O）

带缓存的输入输出流（I/O）

文章目录 前言一、带缓冲的输入输出流是什么&#xff1f;二、使用方法 1.BufferedInputStream与BufferedOutputStream类2.BufferedReader与BufferedWriter类总结 前言 输入输出流可以视为&#xff0c;从A点把货物搬运至B点。那么带缓冲的意思可以视为用货车把A点的货物搬运至B点…
阅读更多...
[ ROS入门]

[ ROS入门]

00ROS实现流程大致分为5步 先创建一个工作空间&#xff1b;再创建一个功能包&#xff1b;编辑源文件&#xff1b;编辑配置文件&#xff1b;编译并执行。 01创建工作空间 02进入src创建ros包并添加依赖 上述命令&#xff0c;会在工作空间下生成一个功能包&#xff0c;该功能包依…
阅读更多...
关于外网java后端服务访问内网minio中间件，因连接minio超时，启动失败问题

关于外网java后端服务访问内网minio中间件，因连接minio超时，启动失败问题

注&#xff1a;服务器情况&#xff1a;2台服务器&#xff0c;内网服务器包含&#xff08;activemq、minio、nginx、redis、mysql、后端java服务&#xff09;。外网服务器只有后端java服务&#xff0c;访问内网的中间件&#xff08;内网服务器开放了部分指定端口&#xff09; 问…
阅读更多...
Unity应用开机自启动

Unity应用开机自启动

使用说明 以代码设置的方式设置Unity应用开机自启动。 将下面脚本挂载到场景物体&#xff0c;通过UI按钮开启应用自启动和取消应用自启动&#xff0c;设置下次运行应用生效。 所用到的Dll下载地址&#xff1a;Interop.IWshRuntimeLibrary 脚本代码 using System; using Syst…
阅读更多...
将本地项目推送至gitlab仓库

将本地项目推送至gitlab仓库

1. gitlab上新建一个空白项目 gitlab上点击new project按钮&#xff0c;新建一个项目 新建空白项目 项目名称与本地新建项目名称相同&#xff0c;其余根据具体需要选择 2. 初始化本地仓库并commit项目 进入本地项目根目录下&#xff0c;右击 git bash here打开命令窗口 初始化…
阅读更多...
Netty-NioServerSocketChannel与NioSocketChannel

Netty-NioServerSocketChannel与NioSocketChannel

NioServerSocketChannel NioServerSocketChannel是netty服务端的channel。在ServerbootStrap的bind方法中&#xff0c;通过反射&#xff0c;实例化对象NioServerSocketChannel。   NioServerSocketChannel对象实例化的过程中。 AbstractChannel中实例化channel的id&#xff…
阅读更多...
3DGS渐进式渲染 - 离线生成渲染视频

3DGS渐进式渲染 - 离线生成渲染视频

总览 输入&#xff1a;环绕Object拍摄的RGB视频 输出&#xff1a;自定义相机路径的渲染视频&#xff08;包含渐变效果&#xff09; 实现过程 首先&#xff0c;编译3DGS的C代码&#xff0c;并跑通convert.py、train.py和render.py。教程如下&#xff1a; github网址&#xf…
阅读更多...
HarmonyOS开发实例：【分布式数据服务】

HarmonyOS开发实例：【分布式数据服务】

介绍 分布式数据服务(Distributed Data Service&#xff0c;DDS)为应用程序提供不同设备间数据分布式的能力。通过调用分布式数据接口&#xff0c;应用程序将数据保存到分布式数据库中。通过结合帐号、应用和分布式数据服务对属于不同的应用的数据进行隔离&#xff0c;保证不同…
阅读更多...
Java项目实现Excel导出（Hutool）

Java项目实现Excel导出（Hutool）

官网&#xff1a; Excel生成-ExcelWriter (hutool.cn) 1.使用Hutool工具实现Excel导出&#xff08;.xlsx格式&#xff09; 业务场景&#xff1a; 使用SpringCloudmysqlmybatis-plus需要将数据库中的数据导出到Excel文件中 前端为Vue2 第零步&#xff1a;导入依赖 <!-…
阅读更多...
ASP.NET Core 标识（Identity）框架系列（四）：闲聊 JWT 的缺点，和一些解决思路

ASP.NET Core 标识（Identity）框架系列（四）：闲聊 JWT 的缺点，和一些解决思路

前言 前面的几篇文章讲了很多 JWT 的优点&#xff0c;但作为技术人员都知道&#xff0c;没有一种技术是万能的 “银弹”&#xff0c;所谓有矛就有盾&#xff0c;相比 Session、Cookie 等传统的身份验证方式&#xff0c;JWT 在拥有很多优点的同时&#xff0c;也有着不可忽视的缺…
阅读更多...
49.HarmonyOS鸿蒙系统 App(ArkUI)Tab导航组件的使用

49.HarmonyOS鸿蒙系统 App(ArkUI)Tab导航组件的使用

HarmonyOS鸿蒙系统 App(ArkUI)Tab导航组件的使用 图片显示 Row() {Image($r(app.media.leaf)).height(100).width(100)Image($r(app.media.icon)).height(100).width(100) } 左侧导航 import prompt from ohos.prompt; import promptAction from ohos.promptAction; Entry C…
阅读更多...
适用于Windows电脑的最佳数据恢复软件是哪些？10佳数据恢复软件

适用于Windows电脑的最佳数据恢复软件是哪些？10佳数据恢复软件

丢失我们系统中可用的宝贵信息是很烦人的。我们可以尝试几种手动方法来重新获取丢失的数据。然而&#xff0c;当我们采用非自动方法来恢复数据时&#xff0c;这是一项令人厌烦和乏味的工作。在这种情况下&#xff0c;我们可以尝试使用一些正版硬盘恢复软件进行数据恢复。此页面…
阅读更多...
pytest学习-pytorch单元测试

pytest学习-pytorch单元测试

pytorch单元测试 一.公共模块[common.py]二.普通算子测试[test_clone.py]三.集合通信测试[test_ccl.py]四.测试命令五.测试报告 希望测试pytorch各种算子、block、网络等在不同硬件平台,不同软件版本下的计算误差、耗时、内存占用等指标. 本文基于torch.testing._internal 一…
阅读更多...
wsl安装与日常使用

wsl安装与日常使用

文章目录 一、前向配置1、搜索功能2、勾选下面几个功能&#xff0c;进行安装二、安装WSL1、打开Windows PowerShell,查找你要安装的linux版本2、选择对应版本进行安装3、输入用户名以及密码 三、配置终端代理1、打开powershell,查看自己的IP把以下信息加入到~/.bashrc中 四、更…
阅读更多...
Transformer with Transfer CNN for Remote-Sensing-Image Object Detection

Transformer with Transfer CNN for Remote-Sensing-Image Object Detection

遥感图像&#xff08;RSI&#xff09;中的目标检测始终是遥感界一个充满活力的研究主题。 最近&#xff0c;基于深度卷积神经网络 (CNN) 的方法&#xff0c;包括基于区域 CNN 和基于 You-Only-Look-Once 的方法&#xff0c;已成为 RSI 目标检测的事实上的标准。 CNN 擅长局部特…
阅读更多...
夸克AI PPT初体验：一键生成大纲，一键生成PPT，一键更换模板！

夸克AI PPT初体验：一键生成大纲，一键生成PPT，一键更换模板！

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…
阅读更多...
JavaScript（JS）三种使用方式,三种输出方式，及快速注释。---[用于后续web渗透内容]

JavaScript（JS）三种使用方式,三种输出方式，及快速注释。---[用于后续web渗透内容]

JavaScript&#xff08;JS&#xff09;是一种广泛使用的编程语言&#xff0c;允许在网页中添加交互性和动态效果。在HTML中&#xff0c;<script>标签用于引入和执行JavaScript代码。 JS代码 js1.html \\js三种使用方式<!DOCTYPE html> <html lang"en&quo…
阅读更多...
vulhub weblogic全系列靶场

vulhub weblogic全系列靶场

简介 Oracle WebLogic Server 是一个统一的可扩展平台&#xff0c;专用于开发、部署和运行 Java 应用等适用于本地环境和云环境的企业应用。它提供了一种强健、成熟和可扩展的 Java Enterprise Edition (EE) 和 Jakarta EE 实施方式。 需要使用的工具 ysoserial使用不同库制作的…
阅读更多...
自动驾驶时代的物联网与车载系统安全：挑战与应对策略

自动驾驶时代的物联网与车载系统安全：挑战与应对策略

随着特斯拉CEO埃隆马斯克近日对未来出行景象的描绘——几乎所有汽车都将实现自动驾驶&#xff0c;这一愿景愈发接近现实。马斯克生动比喻&#xff0c;未来的乘客步入汽车就如同走进一部自动化的电梯&#xff0c;无需任何手动操作。这一转变预示着汽车行业正朝着高度智能化的方向…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023