【技术等级】初级
【承接文章】《CSS字体属性文字竖排 css,详解属性用法,提升前端小白能力》
本文重点讲解CSS技术中有关文本样式的属性以及这些属性的取值。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。
所谓文本,就是大段落的文字。当文字多到可以形成段落时,就会涉及到段落的一些样式调整。例如段落的对齐方式、段落的首行缩进等。
被归结为段落属性的CSS样式包括八个,小海老师将其分为两组。
第一组有如下五个属性:
第二组有如下三个属性:
本文小海老师先为大家讲解第一组的5个属性,后续的文章会紧接着为大家讲解第二组的3个属性。
一、设置字符间距:
CSS技术利用-属性来设置字符间距
该属性可以有多种取值:
实例:.sty01{-:20px;}
上述代码定义了用户自定义类sty01,该样式设置字符间距为20像素。
二、设置单词间距:
CSS技术利用word-属性来设置单词间距
在页面中,单词是以空格作为依据的文字竖排 css,每个空格之间被认定为一个单词。所以也可以认为该属性是用来调整句子中空格的距离的。
该属性可以有多种取值:
实例:.sty02{word-:20px;}
上述代码定义了用户自定义类sty02文字竖排 css CSS文本属性,让你的段落更加美观,前端之路更进一步,该样式设置单词间距为20像素。
三、设置文本修饰:
CSS技术利用text-属性来设置文本修饰
该属性可以有多种取值:
让我们一同来看两个下例子:
例1:结合虚类设定超级链接在鼠标经过时显示下划线效果。
a:link{font-size:12px;text-:none;}
a:{font-size:12px;text-:none;}
a:hover{font-size:12px;text-:;}
a:{font-size:12px;text-:none;}
例2:结合虚类设定超级链接在鼠标经过时放大字号效果。
a:link{font-size:12px; }
a:{font-size:12px; }
a:hover{font-size:14px; }
a:{font-size:12px; }
四、设置段落中西文的大小写模式:
CSS技术利用text-属性来设置西文的大小写模式
该属性可以有多种取值:
五、设置段落的首行缩进:
CSS技术利用text-属性来设置段落的首行缩进
首行缩进是指:段落中的第一行与整个段落左侧之间的距离,也就是我们俗称的“每一段的第一行空两个格”。
该属性可以取值为:
实例:设置段落的首行缩进为两个字符的距离。
段落内容……
p{font-size:14px; text-:28px;}
文章预告
下一篇文章中,小海老师会为大家从细节上深入剖析text-align属性以及块级元素和内联元素的使用。块级元素与内联元素在前端开发中的作用非常重要,我会用整整一篇文章的篇幅,为广大Web前端爱好者们详细讲解这两个概念。对于渴望在前端开发道路上前进的你一定不能错过!
小海教材
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。