CSS文本相关属性

简介: letter-spacing、word-spacing分别用于设置字母、单词之间的间距

image.png


1 text-decoration


text-decoration有如下常见取值:


  • none:无任何装饰线 ✓ 可以去除a元素默认的下划线
  • underline:下划线
  • overline:上划线
  • line-through:中划线(删除线)


a元素有下划线的本质是被添加了text-decoration属性


2 text-align(重要)


定义行内内容(例如文字)如何相对它的块父元素对齐;


常用的值


  • left:左对齐(对于里面的文本,如果单行不满则右边空着)
  • right:右对齐(对于里面的文本,如果单行不满则左边空着)
  • center:正中间显示
  • justify:两端对齐(效果如下)


注意:text-align 只能让 (子元素 && 行内级元素)居中,如:img或文本


3 text-indent


text-indent用于设置第一行内容的缩进

text-indent: 2em; 刚好是缩进2个文字


4 text-transform


text-transform用于设置文字的大小写转换


text-transform有几个常见的值:


  • capitalize:(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
  • uppercase:(大写字母)将每个单词的所有字符变为大写
  • lowercase:(小写字母)将每个单词的所有字符变为小写
  • none:没有任何影响


5 word/letter-spacing


letter-spacing、word-spacing分别用于设置字母、单词之间的间距


  • 默认是0,可以设置为负数
目录
相关文章
|
1月前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
29天前
|
前端开发
CSS属性:盒子模型
CSS属性:盒子模型
27 0
|
29天前
|
前端开发
CSS属性
CSS属性
28 0
|
1月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
21 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
12天前
|
前端开发
CSS 中哪些属性可以继承
在 CSS 中,属性分为可继承与不可继承。可继承属性会在子元素中沿用父元素的样式设定。常见可继承属性包括:文本属性(如 `font-family`, `color`),列表属性(如 `list-style`),表格布局属性(如 `border-collapse`),以及其他如 `visibility` 和 `direction` 等属性。正确理解这些属性有助于更高效地进行样式设计。
|
1月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
58 28
|
9天前
|
前端开发 JavaScript
如何在CSS中添加自定义属性
如何在CSS中添加自定义属性
8 0
|
9天前
|
前端开发
运用CSS伪类与属性,巧妙实现背景图片旋转效果
运用CSS伪类与属性,巧妙实现背景图片旋转效果
11 0
|
11天前
|
前端开发
哪些 CSS 属性可以继承?
哪些 CSS 属性可以继承?
26 0
|
2月前
|
前端开发
了解 css中 backface-visibility 属性
`backface-visibility` 是一个CSS属性,用于3D转换时控制元素背面的可见性,以优化渲染性能。默认情况下,背面被隐藏以减少不必要的渲染。此属性有两值:`visible` 表示背面可见;`hidden`(默认值)则隐藏背面。 通过双面卡片案例演示了其用法:两个重叠盒子,一个显示图片,另一个显示文字且初始状态为背面朝外。鼠标悬停时,图片盒子翻转显示背面,文字盒子翻转显示正面,同时设置 `backface-visibility: hidden` 以确保背面不被渲染。 兼容性良好,广泛支持现代浏览器。
42 2
了解 css中 backface-visibility 属性