CSS 文本属性篇

文字颜色

  • 属性名:color
  • 作用:控制文字的颜色
  • 可选值:
    1.颜色名
    color: blue;
    2.rgb或rgba
    color:rgb(132, 220, 254);
    color:rgba(132, 220, 254,0.5);
    3.hex或hexa(十六进制)
    color:#0078d4;
    color:#0078d48b;
    4.hsl或hsla

rgb和rgba的区别,即加了个透明度的值,3和4同理


文本间距

  • 字母间距:letter-spacing
    letter-spacing: 20px;
  • 单词间距:word-spacing
    word-spacing: 20px;

单词间距,以什么来判断是否是单词呢,中文又如何判断呢,实际上是以空格判断是否是一个单词


文本修饰

  • 属性名:text-decoration
  • 作用:控制文本的各种装饰线
  • 可选值:
  1. none: 无装饰线(常用)
    text-decoration: none;
  2. underline:下划线(常用)
    text-decoration: underline;
  3. overline:上划线
    text-decoration: overline;
  4. line-through:删除线
    text-decoration: line-through;
  • 可附加值:
  1. dotted:虚线
    text-decoration: underline dotted;
  2. wavy:波浪线
    text-decoration: underline wavy ;
  3. 颜色(可使用多种颜色格式)
    text-decoration: underline wavy rgb(132, 220, 254);

文本缩进

  • 属性名:text-indent
    text-indent: 40px;
  • 作用:控制文本首字母的缩进
  • 属性值: css中的长度单位

文本对齐-水平

  • 属性名:text-align
  • 作用:控制文本的水平对齐方式
  • 常用值:
    1.left:左对齐(默认)
    text-align: left;
    2.right:右对齐
    text-align: right;
    3.center:居中对齐
    text-align: center;

行高

  • 属性名:line-height
  • 作用:控制一行文字的高度
  • 可选值:
    1.``:使用浏览器默认行高
    2.使用像素描述高度
    line-height: 100px;
    3.参考自身的字体大小的倍数
    line-height: 15;
    4.同3但转化为百分数
    line-height: 1500%;

文本对齐_垂直

  • 属性名:vertical-align
  • 作用:用于指定同一行元素之间或表格单元格的垂直对齐方式
  • 常用值:
    1.baseline (默认值) :使元素的基线与父元素的基线对齐
    2.top:使元素的顶部与其所在行的顶部对齐
    3.middle:使元素的中部与父元素的基线加上父元素字母 x 的一半对齐,即居中对齐
    4.bottom:使元素的底部与其所在行的底部对齐。

温馨提醒:该属性不能控制块级元素

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

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

相关文章

《网络协议》08. 概念补充

title: 《网络协议》08. 概念补充 date: 2022-10-06 18:33:04 updated: 2023-11-17 10:35:52 categories: 学习记录:网络协议 excerpt: 代理、VPN、CDN、网络爬虫、无线网络、缓存、Cookie & Session、RESTful。 comments: false tags: top_image: /images/back…

MySQL SUBSTRING_INDEX 函数用法

定义和用法 SUBSTRING_INDEX()函数在指定数量的分隔符出现之前返回字符串的子字符串。 语法 SUBSTRING_INDEX(string, delimiter, number) 参数值 参数 描述 string 必须项。原始字符串 delimiter 必须项。要搜索的分隔符 number 必须项。搜索分隔符的次数。可以是正…

Vue3+Vite实现工程化,事件绑定以及修饰符

我们可以使用v-on来监听DOM事件,并在事件触发时执行对应的Vue的Javascript代码。 用法:v-on:click "handler" 或简写为 click "handler"vue中的事件名原生事件名去掉 on 前缀 如:onClick --> clickhandler的值可以是方法事件…

OpenCV图像处理、计算机视觉实战应用

OpenCV图像处理、计算机视觉实战应用 专栏简介一、基于差异模型模板匹配缺陷检测二、基于NCC多角度多目标匹配三、基于zxing多二维码识别四、基于tesseract OCR字符识别 专栏简介 基于OpenCV C分享一些图像处理、计算机视觉实战项目。不定期持续更新,干货满满&…

设置 wsl 桥接模式

一、环境要求 Win10/Win11 专业版&#xff0c;并已安装 Hyper-V 二、具体步骤 打开 Hyper-V 管理器 创建虚拟交换机 WSL Bridge 修改wsl配置文件 .wslconfig .wslconfig 文件所在路径如下&#xff1a; C:\Users\<UserName>\.wslconfig若 .wslconfig 文件不存在&am…

全面揭秘!微信传输助手的用处有哪些!

微信文件传输助手不是真人。它主要是通过服务器和网络技术来完成文件传输功能的。用户可通过微信文件传输助手实现文件在手机到电脑端的快速传输&#xff0c;而不需要其他有线设备。 微信文件传输助手是由微信官方提供的功能&#xff0c;主要用于文件的传输和保存。以下是其主要…

C/C++---------------LeetCode第1207.独一无二的出现次数

独一无二的出现次数 题目及要求哈希算法在main里使用 题目及要求 给你一个整数数组 arr&#xff0c;请你帮忙统计数组中每个数的出现次数。 如果每个数的出现次数都是独一无二的&#xff0c;就返回 true&#xff1b;否则返回 false。 示例 1&#xff1a; 输入&#xff1a;a…

uC/OS-Il---多级中断机制

目录 中断处理的一般流程多级中断机制的出现多级中断机制的实现必须在一个任务或中断中配对使用保存当前中断状态并关中断---OS_ENTER_CRITICAL()汇编语言函数---OS_CPU_SR_Save() 恢复之前的中断状态以便开中断---OS_EXIT_CRITICAL()汇编语言函数---OS_CPU_SR_Restore() 必须在…

【短文】【踩坑】可以在Qt Designer给QTableWidge添加右键菜单吗?

2023年11月18日&#xff0c;周六上午 今天早上在网上找了好久都没找到教怎么在Qt Designer给QTableWidge添加右键菜单的文章 答案是&#xff1a;不可以 在Qt Designer中无法直接为QTableWidget添加右键菜单。 Qt Designer主要用于创建界面布局和设计&#xff0c;无法直接添加…

基于STC12C5A60S2系列1T 8051单片机的SPI总线器件数模芯片TLC5615实现数模转换应用

基于STC12C5A60S2系列1T 8051单片的SPI总线器件数模芯片TLC5615实现数模转换应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍SPI总线器件数模芯片TLC5615介绍通过按…

数据结构与算法编程题5

从有序表中删除重复元素&#xff0c;使表中所有元素值均不相同。 #include <iostream> using namespace std;typedef int ElemType; #define Maxsize 100 #define OK 1 #define ERROR 0 typedef struct SqList {ElemType data[Maxsize];int length; }SqList;void Init_…

单链表相关面试题--2.反转一个单链表

/* 解题思路&#xff1a; 此题一般常用的方法有两种&#xff0c;三指针翻转法和头插法 1. 三指针翻转法记录连续的三个节点&#xff0c;原地修改节点指向 2. 头插法每一个节点都进行头插 */ // 三个指针翻转的思想完成逆置 struct ListNode* reverseList(struct ListNode* head…

python-opencv 培训课程笔记(1)

python-opencv 培训课程笔记&#xff08;1&#xff09; 博主参加了一次opencv库的培训课程&#xff0c;把课程所学整理成笔记&#xff0c;供大家学习&#xff0c;第一次课程包括如下内容&#xff1a; 1.读取图像 2.保存图像 3.使用opencv库显示图像 4.读取图像为灰度图像 …

PlayCover“模拟器”作弊解决方案

当下的游戏市场&#xff0c;移动游戏已占据了主导地位&#xff0c;但移动端游戏碍于屏幕大小影响操作、性能限制导致卡顿等因素&#xff0c;开始逐步支持多端互通。但仍有一些游戏存在移动端与 PC 端不互通、不支持 PC 端或没有 Mac 版本&#xff0c;导致 Mac 设备体验游戏不方…

docker部署lnmp环境

文章目录 前期准备&#xff1a;一、部署mysql1.1 获取 Mysql 5.7.22 镜像1.2 启动mysql容器 二、部署php2.1 获取php 7.2镜像2.2 启动php 容器2.3 php的扩展安装 三、部署nginx3.1 获取nginx:1.14镜像3.2 启动nginx容器3.3 编写nginx虚拟主机配置文件&#xff0c;使其支持php3.…

【以图会意】操作系统的加载流程

声明&#xff1a;本图为博主方便自己记忆理解&#xff0c;诸多疏漏望请博友理性观看&#xff01;如有错误不足恳请指正。 首先&#xff0c;操作系统是一段程序&#xff0c;他保存在ROM中&#xff0c;在开机时&#xff0c;CPU被激活&#xff0c;首先将IR置为BIOS&#xff08;Bas…

《洛谷深入浅出基础篇》 图的基本应用

什么是图&#xff1f; 我们在生活中学习中能看见很多图&#xff0c;地图&#xff0c;路线图&#xff0c;思维导图等等&#xff0c;它们都有一个特点&#xff0c; 你从中任找一个点&#xff0c;你可以找到&#xff0c;从这个点出发&#xff0c;能够到达什么地方&#xff0c;也…

【C++历练之路】list的重要接口||底层逻辑的三个封装以及模拟实现

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; 在C的世界中&#xff0c;有一种数据结构&#xff0c;它不仅像一个神奇的瑰宝匣&#xff0c;还像一位能够在数据的海洋中航行的智慧舵手。这就是C中的list&#xff0c;一个引人入胜的工具…

低代码平台全解析:衍生历程、优势呈现与未来趋势一览无余

在数字化时代&#xff0c;应用程序的开发与更新已成为企业保持竞争力的关键。传统的编码方式&#xff0c;虽然精细且功能强大&#xff0c;但耗时且要求开发者具备较高的技术水平。在这样的背景下&#xff0c;低代码开发平台的出现无疑为企业带来了福音。 低代码开发平台是一种创…

大数据-之LibrA数据库系统告警处理(ALM-12057 元数据未配置周期备份到第三方服务器的任务)

告警解释 系统安装完成后会检查元数据是否有周期备份到第三方服务器的任务&#xff0c;然后每1小时会检查一次。如果元数据未配置周期备份到第三方服务器的任务&#xff0c;将发送严重告警。 在用户创建元数据周期备份到第三方服务器的任务后&#xff0c;告警消除。 告警属性…