热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css文本属性有哪些

css文本属性有:1、颜色属性color;2、文本方向direction;3、行高line-height;4、字符间距letter-spacing;5、文本阴影text-shadow;6、文本方向unicode-bidi。

css文本属性有:1、颜色属性color;2、文本方向direction;3、行高line-height;4、字符间距letter-spacing;5、文本阴影text-shadow;6、文本方向unicode-bidi。

css文本属性:

(学习视频分享:java视频教程)

color    设置文本颜色    
direction    设置文本方向。    
line-height    设置行高。    
letter-spacing    设置字符间距。    
text-align    对齐元素中的文本。    
text-decoration    向文本添加修饰。    
text-indent    缩进元素中文本的首行。    
text-shadow    设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。    
text-transform    控制元素中的字母。    
unicode-bidi    设置文本方向。    
white-space    设置元素中空白的处理方式。    
word-spacing    设置字间距。

CSS 文本属性可定义文本的外观。

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。

一、缩进文本

CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:

p {text-indent: 5em;}

注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

二、水平对齐

text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。

值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。

提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。

三、字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

This is a paragraph. The spaces between words will be increased.

This is a paragraph. The spaces between words will be decreased.

四、字母间隔

letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。

与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

This is header 1

This is header 4


推荐阅读
  • 使用JavaScript实现随机抽号功能
    本文介绍了如何利用JavaScript来实现一个简单的随机抽号系统。用户可以设置数字范围,系统将从该范围内随机抽取数字,并在每次抽取后自动从候选列表中移除已抽取的数字,确保每个数字仅被抽取一次。文章还提供了HTML和CSS的示例代码,以帮助读者更好地理解和实现这一功能。 ... [详细]
  • CSS技巧:创建带有背景图的按钮
    本文详细探讨了使用CSS创建带有背景图片的按钮的方法,并提供了具体的实例代码,帮助开发者解决实际开发中的相关问题。 ... [详细]
  • 解决 Pytest 运行时出现 FileNotFoundError 的方法
    在使用 Pytest 进行测试时,可能会遇到 FileNotFoundError 错误,提示无法找到指定的文件或目录。本文将探讨该错误的原因及解决方案。 ... [详细]
  • HDU1085 捕获本·拉登!
    问题描述众所周知,本·拉登是一位臭名昭著的恐怖分子,他已失踪多年。但最近有报道称,他藏匿在中国杭州!虽然他躲在杭州的一个洞穴中不敢外出,但近年来他因无聊而沉迷于数学问题,并声称如果有人能解出他的题目,他就自首。 ... [详细]
  • SpringBoot新手入门指南
    本文旨在为初次接触SpringBoot的开发者提供一份详细的入门指导,包括如何快速搭建并运行一个简单的SpringBoot应用。通过本文,读者将了解Maven项目的构建、必要的配置文件设置以及基本的应用开发流程。 ... [详细]
  • 本视频详细介绍了如何利用J2EE、JBPM 3.x/4.3、Flex流程设计器、jQuery以及授权认证机制构建高效的企业普及版贝斯OA及工作流管理系统。 ... [详细]
  • 解决jQuery Spinner按钮垂直排列问题
    本文探讨了如何通过CSS调整jQuery Spinner组件中的上下按钮,实现它们的垂直堆叠布局。 ... [详细]
  • BL550721、特点液晶驱动输出:Common输出4线,Segment输出36线内置显示寄存器364144bit2线串行接口(SCL,SDA)内置震荡电路内置液晶驱动电源电路13 ... [详细]
  • 本文介绍了如何在Windows操作系统中安装FFTW库,并详细说明了使用Visual Studio 2010进行4096点快速傅里叶变换(FFT)的步骤。包括下载预编译文件、生成库文件以及配置环境等关键环节。 ... [详细]
  • javascript——对象的概念——函数 1 (函数对象的属性和方法)
    一、创建函数函数是一种对象:Function类是对象,可以通过Function实例化一个函数,不过最多的还是利用function来创建函数。方式一:利用Function类来实例化函 ... [详细]
  • 在开发H5页面时,为了减少资源请求和简化工作流程,直接使用SVG和CSS3来创建简单的图形元素是一个高效的选择。本文将探讨如何不依赖于第三方图标库,仅通过HTML和CSS技术实现一个‘返回顶部’的图标。 ... [详细]
  • IEC60825激光产品安全标准详解
    随着激光技术在全球范围内的广泛应用,尤其是激光投影显示技术的兴起,了解和遵守相关的安全标准变得尤为重要。本文将详细介绍IEC60825激光产品安全标准及其重要性。 ... [详细]
  • 在创建带有左侧图标的按钮时,遇到了文本与图标对齐的问题。本文提供了几种使用Bootstrap 4解决此问题的方法。 ... [详细]
  • Mysqlcheck作为MySQL提供的一个实用工具,主要用于数据库表的维护工作,包括检查、分析、修复及优化等操作。本文将详细介绍如何使用Mysqlcheck工具,并提供一些实践建议。 ... [详细]
  • 本文介绍如何使用 Arcade 库在 Python 中绘制太阳,包括环境配置、基础图形绘制方法及具体代码示例。 ... [详细]
author-avatar
kmv2145234
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有