CSS世界Ⅱ(文本)

目录

一、文本颜色(color)

二、文本对齐方式(text-align)

三、文本修饰(text-decoration)

四、文本转换(text-transform)

五、文本缩进(text-indent)

 六、文本方向(direction)

 七、文本字符间距(letter-spacing)

八、文本行高(line-height)

 九、文本阴影(ext-shadow)

十、文本设置或返回文本是否被重写(nicode-bidi)

 十一、文本元素的垂直对齐(vertical-align)

 十二、文本元素中空白的处理方式(white-space)

 十三、文本字间距(word-spacing)


一、文本颜色(color)

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

十六进制值 - 如: #FF0000

一个RGB值 - 如: RGB(255,0,0)

颜色的名称 - 如: red

例如:

body {color:red;}

二、文本对齐方式(text-align)

文本排列属性是用来设置文本的水平对齐方式。

文本可居中(center)或对齐到左(right)或右(left),两端对齐(justify)。

 例如:

h1 {text-align:center;}

三、文本修饰(text-decoration)

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线

描述
none默认。定义标准的文本。
underline定义文本下的一条线。
overline定义文本上的一条线。
line-through定义穿过文本下的一条线。
blink

定义闪烁的文本。

dotted虚线
wavy波浪线

例如:

h1 {text-decoration:overline;}

四、文本转换(text-transform)

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母,或每个单词的首字母大写。

描述
none默认。定义带有小写字母和大写字母的标准的文本。
capitalize文本中的每个单词以大写字母开头。
uppercase定义仅有大写字母。
lowercase定义无大写字母,仅有小写字母。

例如:

p.uppercase {text-transform:uppercase;}

五、文本缩进(text-indent)

文本缩进属性是用来指定文本的第一行的缩进。

描述
length定义固定的缩进。默认值:0。
%定义基于父元素宽度的百分比的缩进。
inherit规定应该从父元素继承 text-indent 属性的值。

例如:

p {text-indent:50px;}

 六、文本方向(direction)

描述
ltr默认。文本方向从左到右。
rtl文本方向从右到左。
inherit规定应该从父元素继承 direction 属性的值。

例如:

div{ direction:rtl;}

 七、文本字符间距(letter-spacing)

描述
normal默认。规定字符间没有额外的空间。
length定义字符间的固定空间(允许使用负值)。
inherit规定应该从父元素继承 letter-spacing 属性的值。

例如: 

 h1 {letter-spacing:2px}

八、文本行高(line-height)

描述
normal默认。设置合理的行间距。
number设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length设置固定的行间距。
%基于当前字体尺寸的百分比行间距。
inherit规定应该从父元素继承 line-height 属性的值。

例如:

p.small {line-height:90%} 

 九、文本阴影(ext-shadow)

描述
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊的距离。
color可选。阴影的颜色。

语法:

text-shadow: h-shadow v-shadow blur color;

例如:

h1{text-shadow: 2px 2px #ff0000;}

十、文本设置或返回文本是否被重写(nicode-bidi)

描述
normal默认。不使用附加的嵌入层面。
embed创建一个附加的嵌入层面。
bidi-override创建一个附加的嵌入层面。重新排序取决于 direction 属性。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。

语法:

unicode-bidi: normal|embed|bidi-override|initial|inherit;

例如:

div {unicode-bidi:bidi-override; }

 十一、文本元素的垂直对齐(vertical-align)

描述
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom使元素及其后代元素的底部与整行的底部对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length将元素升高或降低指定的高度,可以是负数。
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。

例如:

img { vertical-align:text-top; } 

 十二、文本元素中空白的处理方式(white-space)

描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。

例如:

p { white-space:nowrap; } 

 十三、文本字间距(word-spacing)

描述
normal默认。定义单词间的标准空间。
length定义单词间的固定空间。
inherit规定应该从父元素继承 word-spacing 属性的值。

 例如:

p{word-spacing:30px;}

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

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

相关文章

C++11多线程库重点接口

目录 一.thread构造函数 二.移动构造&#xff0c;移动赋值 小结 三.获取线程id的方法 四.thread与lambda表达式联用 五.Mutexs的总览 六.互斥锁 七.Locks的总览 八. 条件变量总览 九.条件变量的wait和notify 十.典型例题 十一.原子类 十二.智能指针和单例模式的线…

详解 Redis 在 Ubuntu 系统上的安装

在 Ubuntu 20.04 安装 Redis 1. 先切换到 root 用户 在 Ubuntu 20.04 中&#xff0c;可以通过以下步骤切换到 root 用户&#xff1a; 输入以下命令&#xff0c;以 root 用户身份登录&#xff1a; sudo su -按回车键&#xff0c;并输入当前用户的密码&#xff08;即具有 sudo…

【论文精读】Detecting Out-of-Distribution Examples with Gram Matrices 使用Gram矩阵检测分布外实例

文章目录 一、文章概览&#xff08;一&#xff09;Gram矩阵1、Gram&#xff08;格朗姆&#xff09;矩阵的定义2、Gram矩阵计算特征表示3、风格迁移中的Gram矩阵 &#xff08;二&#xff09;ood检测&#xff08;三&#xff09;核心思路&#xff1a;扩展 Gram 矩阵以进行分布外检…

2024最新在线工具箱/ 站长IT工具箱/网站系统源码下载

2024最新在线工具箱/ 站长IT工具箱/网站系统源码下载- 更多详情及下载地址请访问https://a5.org.cn/a5_ziyuan/39525.html 转载请注明出处!

kafka 消息防丢失/消息防重复设计分析

说明 本文基于 kafka 2.7 编写。author blog.jellyfishmix.com / JellyfishMIX - githubLICENSE GPL-2.0 消息语意 消息语义(诉求)有三种。分别是: 消息最多传递一次(消息不重复), 消息最少传递一次(消息不丢失), 消息有且仅有一次传递(消息不重复且不丢失)。 消息最多传递…

SketchUp Pro 2024 for mac 草图大师 专业的3D建模软件

SketchUp Pro 2024 for Mac是一款功能强大的三维建模软件&#xff0c;适用于Mac电脑。其简洁易用的界面和强大的工具集使得用户可以轻松创建复杂的3D模型。 软件下载&#xff1a;SketchUp Pro 2024 for mac v24.0.483 激活版下载 SketchUp Pro 2024 for Mac支持导入和导出多种文…

软件杯 深度学习乳腺癌分类

文章目录 1 前言2 前言3 数据集3.1 良性样本3.2 病变样本 4 开发环境5 代码实现5.1 实现流程5.2 部分代码实现5.2.1 导入库5.2.2 图像加载5.2.3 标记5.2.4 分组5.2.5 构建模型训练 6 分析指标6.1 精度&#xff0c;召回率和F1度量6.2 混淆矩阵 7 结果和结论8 最后 1 前言 &…

性能测试,python 内存分析工具

Memray是一个由彭博社开发的、开源内存剖析器&#xff1b;开源一个多月&#xff0c;已经收获了超8.4k的star&#xff0c;是名副其实的明星项目。今天我们就给大家来推荐这款python内存分析神器。 Memray可以跟踪python代码、本机扩展模块和python解释器本身中内存分配&#xf…

Revit模型进入虚幻引擎UE5教程

一、背景 小伙伴们是否有Revit进入虚幻引擎交互的需求呢&#xff1f; 二、实现功能 1.Revit进入虚幻UE5,包含模型属性&#xff0c;材质等 2.实现BIM构件点选&#xff0c;高亮&#xff0c;属性展示 3.实现BIM模型分层显示&#xff0c;爆炸等效果 三、教程地址 教程&#x…

51单片机入门_江协科技_21~22_OB记录的笔记

21. LED点阵屏 21.1. LED点阵屏介绍 •LED点阵屏由若干个独立的LED组成&#xff0c;LED以矩阵的形式排列&#xff0c;以灯珠亮灭来显示文字、图片、视频等。LED点阵屏广泛应用于各种公共场合&#xff0c;如汽车报站器、广告屏以及公告牌等 •LED点阵屏分类 按颜色&#xff1a;单…

Leetcode 64. 最小路径和

心路历程&#xff1a; 第一反应像是一个回溯问题&#xff0c;但是看到题目中要求最值&#xff0c;大概率是一道DP问题。并且这里面的递推关系也很明显。 这里面边界条件可以有多种处理方法。 解法&#xff1a;动态规划 class Solution:def minPathSum(self, grid: List[List…

六、企业级架构缓存篇之memcached

一、memcached概述 1、网站架构优化流程&#xff1a; LNMP架构中网站应用访问流程&#xff1a; 浏览器 (app) → web 服务器 → 后端服务 (php) → 数据库 (mysql) 访问流程越多&#xff0c;访问速度越慢&#xff0c;出现问题的几率也越大。 网站访问流程优化思路&#xff1…

ps教程谁教的好

在Photoshop&#xff08;PS&#xff09;教程方面&#xff0c;有多位老师被推荐为教学水平较高。以下是一些被提及的老师&#xff1a; 敬伟&#xff1a;被认为是很多人的PS启蒙老师&#xff0c;提供基本功能介绍与高级效果案例&#xff0c;教学风格被认为是免费且不拖沓的。1…

【机器学习】如何通过群体智慧解决机器学习的挑战“

机器学习的发展日新月异&#xff0c;但其成功实施的关键之一仍然是获取高质量的、标注良好的数据集。在这篇文章中&#xff0c;我们将探讨如何通过群体智慧来构建和改善机器学习的数据集&#xff0c;尤其是通过reCAPTCHA和带有目的的游戏&#xff08;Games with a Purpose, GWA…

开发语言漫谈-C语言

个人认为C语言是最伟大的开发语言&#xff08;没有之一&#xff09;。C语言开创了高级语言的新时代。比C更低级的是汇编语言&#xff0c;这个东西就是反人类的玩意。之后的语言或多或少都受C语言的影响。更神奇的是直到现在&#xff0c;C语言还有生命力。C语言的发明人丹尼斯里…

比nestjs更优雅的ts控制反转策略-依赖查找

一、Cabloy5.0内测预告 Cabloy5.0采用TS对整个全栈框架进行了脱胎换骨般的大重构&#xff0c;并且提供了更加优雅的ts控制反转策略&#xff0c;让我们的业务开发更加快捷顺畅 1. 新旧技术栈对比&#xff1a; 后端前端旧版js、egg2.0、mysqljs、vue2、framework7新版ts、egg3…

Web大并发集群部署之集群介绍

一、传统web访问模型 传统web访问模型完成一次请求的步骤 1&#xff09;用户发起请求 2&#xff09;服务器接受请求 3&#xff09;服务器处理请求&#xff08;压力最大&#xff09; 4&#xff09;服务器响应请求 传统模型缺点 单点故障&#xff1b; 单台服务器资源有限&…

Prometheus+grafana环境搭建MongoDB(docker+二进制两种方式安装)(五)

由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前四篇mongodb的exporter坑也挺多总结一下各种安装方式&#xff0c;方便后续考古。 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabb…

使用阿里云试用Elasticsearch学习:1.4 基础入门——映射和分析

当摆弄索引里面的数据时&#xff0c;我们发现一些奇怪的事情。一些事情看起来被打乱了&#xff1a;在我们的索引中有12条推文&#xff0c;其中只有一条包含日期 2014-09-15 &#xff0c;但是看一看下面查询命中的 总数 &#xff08;total&#xff09;&#xff1a; GET /_searc…

如何利用GitHub和jsDelivr托管图片cdn

1、背景 https://cdn.jsdelivr.net/gh/axh2018/axh2018.github.io/medias/banner/6.jpg 这个链接是如何生成的&#xff1f;免费吗&#xff1f; 2、解决 这个链接看起来是使用了 jsDelivr 服务来托管在 GitHub 上的静态文件。jsDelivr 是一个免费的开源 CDN (Content Deliver…