CSS非布局样式-文本

 2023-03-08 14:16:12  阅读 0

一、文本属性

文本-text-align

文本对齐[text-align]

在CSS中存在很多的属性,其中存在text-align这个属性与HTML属性align的功能几乎相同。该属性的值可以有以下几种情况:right(右对齐)或者center(居中)。除了并且我们甚至还能将该属性的值设为justify(两端对齐),即伸缩行中的文字以左右靠齐。 在下例中,表中数据(td) 被设置为居中。正常的文本段落被设置为两端对齐。

td {
	text-align: center;
}
p {
	text-align: justify;
}

文本-text-decoration

文本装饰[text-decoration]

CSS属性text-decoration为我们的技术添加了一块色彩,我们从简单的页面,到如今可以制作动态,色彩斑斓的页面。我么可以将文本增添下划线或者删除线甚至上划线等等。如下代码,我们就将标题增添了下划线,h2标题增添了上划线,为h3标题增添了删除线。

h1 {
	text-decoration: underline;
}

h2 {
	text-decoration: overline;
}

h3 {
	text-decoration: line-through;
}

文本-letter-spacing

字符间距[letter-spacing]

CSS属性letter-spacing是对于文字的操作,这里我们可以根据自己的喜好,这是水平间距等等。假如你希望p标签的文本段落的字间距为3个像素,然后h1字间距为6个像素。代码如下所述。

h1 {
	letter-spacing: 6px;
}

p {
	letter-spacing: 3px;
}

文本-text-transform

在CSS属性中为了方便我们标记重点,甚至还提供了可以将文本标记为大小写,可以通过该属性令它首字母大写(capitalize)、全部大写(uppercase)或者全部小写(lowercase)。

比如,单词“hello”在展现给网页浏览者时,可以是“HELLO”或者“Hello”。

 

capitalize ,他的作用是将每个单词都转换大小写。例如:“Heelo”将被转换为“HeeLo”。 接下来我们通过·一段代码领悟其中的奥秘所在。查看过该例的HTML代码后你会发现,其实在HTML代码里我们写的姓名和标题全部都是小写 

h1 {
	text-transform: uppercase;
}

li {
	text-transform: capitalize;
}

 

下一篇: CSS链接边框
标签:

如本站内容信息有侵犯到您的权益请联系我们删除,谢谢!!


Copyright © 2020 All Rights Reserved 京ICP5741267-1号 统计代码