CSS常用文本属性

简介: 文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值: left (居左,缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下: .p2 {text-align:right} 演示示例 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。

文本对齐属性(text-align)

这个属性用来设定文本的对齐方式。有以下值:

  • left (居左,缺省值)
  • right (居右)
  • center (居中)
  • justify (两端对齐)

示例代码如下:

.p2 {text-align:right}

演示示例

文本修饰属性(text-decoration)

这个属性主要设定文本划线的属性。有以下值:

  • none (无,缺省值)
  • underline (下划线)
  • overline (上划线)
  • line-through (当中划线)

示例代码如下:

.p2 {text-decoration: underline}

演示示例

文本缩进属性(text-indent)

这个属性设定文本首行缩进。其值有以下设定方法:

  • length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))
  • percentage (百分比,相当于父对象宽度的百分比)

示例代码如下:

.p1 {text-indent: 8mm}

演示示例

行高属性(line-height)

这个属性设定每行之间的距离。其值有以下设定方法:

  • normal (缺省值)
  • length (长度,可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px))
  • percentage (百分比,相当于父对象高度的百分比)

示例代码如下:

.p1 {line-height:1cm}

演示示例

字间距属性(letter-spacing)

这个属性用来设定字符之间的距离。

  • normal (缺省值)
  • length (长度,可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px))

示例代码如下:

.p1 {letter-spacing: 3mm}

演示示例

颜色属性(color)

用颜色属性(color)可以改变文本的字体颜色。字体颜色代码请参见HTML颜色参考(HTML Color Reference)。示例代码如下:

.p1{color:gray}

演示示例

来源:http://www.admin5.com/html/css_tutorials/015_css_text.html

目录
相关文章
|
28天前
|
前端开发
CSS中的边框属性:border、border-width、border-color、border-style 详解
CSS中的边框属性:border、border-width、border-color、border-style 详解
122 44
|
28天前
|
前端开发
CSS中的display属性:布局控制的关键
CSS中的display属性:布局控制的关键
127 42
|
25天前
|
前端开发 容器
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
18 3
你不知道的css——1. 外在盒子、内在盒子,宽度和高度的计算,box-sizing属性
|
12天前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
29 0
学习css的clip-path属性
|
23天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
25天前
|
Web App开发 前端开发 JavaScript
css【详解】—— content属性(含css计数器)
css【详解】—— content属性(含css计数器)
13 3
|
25天前
|
前端开发
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
你不知道的css——4. 基线、中线、x-height、单位ex(含文本与图标对齐技巧)
19 2
|
25天前
|
JavaScript 前端开发
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
vue 模拟随机变速的动态打字特效【支持多行文本】(含css实现闪烁光标,js动态改变setInterval定时器的时间间隔)
20 1
|
25天前
|
前端开发
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
css 实用技巧 —— 使用border属性绘图(三角形、梯形、对话框尖角)
26 1
|
25天前
|
前端开发 容器
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
css【详解】—— margin属性(含margin百分比值,margin负值,margin合并,margin:auto,margin失效)
17 1