风也温柔

计算机科学知识库

文字竖排 css CSS文本属性,让你的段落更加美观,前端之路更进一步

  【技术等级】初级

  【承接文章】《CSS字体属性文字竖排 css,详解属性用法,提升前端小白能力》

  本文重点讲解CSS技术中有关文本样式的属性以及这些属性的取值。本文属于前端开发的初级教程,适合于刚刚开始接触CSS技术的学习者。

  div css竖排菜单_css 文字方向 竖排_文字竖排 css

  所谓文本,就是大段落的文字。当文字多到可以形成段落时,就会涉及到段落的一些样式调整。例如段落的对齐方式、段落的首行缩进等。

  被归结为段落属性的CSS样式包括八个,小海老师将其分为两组。

  第一组有如下五个属性:

  第二组有如下三个属性:

  本文小海老师先为大家讲解第一组的5个属性,后续的文章会紧接着为大家讲解第二组的3个属性。

  一、设置字符间距:

  css 文字方向 竖排_div css竖排菜单_文字竖排 css

  css 文字方向 竖排_div css竖排菜单_文字竖排 css

  CSS技术利用-属性来设置字符间距

  该属性可以有多种取值:

  实例:.sty01{-:20px;}

  上述代码定义了用户自定义类sty01,该样式设置字符间距为20像素。

  二、设置单词间距:

  文字竖排 css_div css竖排菜单_css 文字方向 竖排

  CSS技术利用word-属性来设置单词间距

  在页面中,单词是以空格作为依据的文字竖排 css,每个空格之间被认定为一个单词。所以也可以认为该属性是用来调整句子中空格的距离的。

  该属性可以有多种取值:

  实例:.sty02{word-:20px;}

  上述代码定义了用户自定义类sty02文字竖排 css CSS文本属性,让你的段落更加美观,前端之路更进一步,该样式设置单词间距为20像素。

  三、设置文本修饰:

  div css竖排菜单_css 文字方向 竖排_文字竖排 css

  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; }

  四、设置段落中西文的大小写模式:

  div css竖排菜单_文字竖排 css_css 文字方向 竖排

  CSS技术利用text-属性来设置西文的大小写模式

  该属性可以有多种取值:

  五、设置段落的首行缩进:

  文字竖排 css_div css竖排菜单_css 文字方向 竖排

  css 文字方向 竖排_文字竖排 css_div css竖排菜单

  CSS技术利用text-属性来设置段落的首行缩进

  首行缩进是指:段落中的第一行与整个段落左侧之间的距离,也就是我们俗称的“每一段的第一行空两个格”。

  该属性可以取值为:

  实例:设置段落的首行缩进为两个字符的距离。

  段落内容……

  p{font-size:14px; text-:28px;}

  文章预告

  下一篇文章中,小海老师会为大家从细节上深入剖析text-align属性以及块级元素和内联元素的使用。块级元素与内联元素在前端开发中的作用非常重要,我会用整整一篇文章的篇幅,为广大Web前端爱好者们详细讲解这两个概念。对于渴望在前端开发道路上前进的你一定不能错过!

  小海教材

  如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容,可以私信我,我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你,帮助你在前端开发的道路上阔步前行。

  文章来源:https://www.toutiao.com/a6473915453042328077/