css文本设置就像你用word文档写一篇文章,杂论无章的文章总是让人无法有阅读的欲望,那么需要进行一些修饰,比如文本的颜色,对齐方式,首行缩进,文本的阅读方向,字体间距,字符间距,行间距以及文本的一些修饰等,下面将简单介绍在CSS中如何定义文本的格式;

color:用来定义文本的颜色,书写方式为例:p{color:red;},下面是一个例子:
css 文本格式设置
颜色值可以是十六进制值的颜色(比如 #ff0000),也可以是值为 rgb 代码的颜色(比如 rgb(255,0,0))或者直接是颜色名,如red;不具有继承性,可以对任何元素进行设置;
text-indent:首行缩进,主要是用来对文本进行首行缩进,通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:
p {text-indent: 5em;}
css 文本格式设置
注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:
p {text-indent: -5em;}
css 文本格式设置
不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}
css 文本格式设置
使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中,缩进值是父元素的 20%,即 100 个像素:
css 文本格式设置
text-indent 属性可以继承,即父级元素缩进,那么下面的子代元素也会遵循同样的缩进格式进行缩进;
css 文本格式设置可以看出,包含在后代<div中的p元素首行缩进了;
test-align:水平对齐,

   test-align:right:右对齐css 文本格式设置
   test-align:left:左对齐
css 文本格式设置
   test-align:center:居中对齐
css 文本格式设置
您可能会认为 text-align:center 与 <CENTER 元素的作用一样,但实际上二者大不相同,下面是用center元素进行设置的p

css 文本格式设置

   test-align:justify:两端对齐
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。
word-spacing:指字体或者单词之间的间距,word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:css 文本格式设置
可以看到,加的word-spacing属性的p元素单词之间的距离明显增加,同理,如果word-spacing后面的值是负的,那么就会缩进单词或者字体之间的距离
letter-spacing:与word-spacing不同的是,这个是拉近或者缩小字母之间的距离,例css 文本格式设置可以看到,上面加letter-spacing属性的p元素单词的字母之间的距离明显增加了,这个就是和word-spacing的区别
line-height:行间距:后面的值可以是百分比,可以是像素,可以是数值,具体根据使用情况进行设置
css 文本格式设置
css 文本格式设置
css 文本格式设置
text-transform设置单词字母的大小写;
   test-transform:uppercase:字母大写css 文本格式设置
   test-transform:lowercase:字母小写css 文本格式设置
   test-transform:capitalize:首字母大写;
css 文本格式设置

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-11-14
  • 2021-12-13
  • 2021-11-17
  • 2021-11-29
  • 2021-08-25
  • 2022-12-23
猜你喜欢
  • 2021-04-10
  • 2021-04-30
  • 2022-01-16
  • 2021-04-04
  • 2022-03-02
  • 2022-12-23
  • 2021-09-08
相关资源
相似解决方案