首先,咱们来学习 CSS 设置文本的对齐形式。
通过 CSS,能够设置文本的程度和垂直对齐形式。(有案例的成果演示)
文本程度对齐,咱们后面的课程已经接触过——应用 text-align 这个款式属性来实现。它的属性值有三个:left,right,center,别离示意文本程度居左,居右,居中。
咱们来举个例子。
在 005 目录下创立 alignment-spacing.html 文件,构建根底代码,增加一个 h1 元素和三个 p 元素,别离填入一些文本。
<h1> 浠浠呀老师,学前端的大专生待业难吗?</h1>
<p>
no, 不难,只有你能力过关、我的项目教训过关、人品过关,企业就会录用你。
</p>
<p>
你能够在面试的时候,着重介绍一下你的开发能力、技术能力以及你对技术了解,让他人挑不出故障,那学历这块是能够主动疏忽的。
</p>
<p>
我在面试他人的时候也是这样,如果这个人的技术能力和过往教训真的驯服了我,我不是很在他乎他的学历。
</p>
咱们能够给三个段落文本,设置不同的程度对齐形式,给三个 p 元素定义 class 属性,值别离为 a,b,c。
在这个目录下再创立一个 mystyle-2.css 文件,定义 p.a (读作 p 点 a) 选择器,申明款式 text-align: left (不要读冒号)。定义 p.b 选择器,申明款式 text-align: center。定义 p.c 选择器,申明款式 text-align: right。
p.a {
text-align: left;
}
p.b {
text-align: center;
}
p.c {
text-align: right;
}
在浏览器中预览成果,三个段落别离左、中、右对齐了。
当 text-align 属性被设置为 justify [ˈdʒʌstɪfaɪ] 时,每一行都被拉长,使每一行都有相等的宽度,而且左右边界是对齐的,就像杂志和报纸排版一样。
正文掉全副款式,定义 p 选择器,申明款式 text-align: justify。
咱们看,貌似没有什么成果。
为了演示,给第一个段落增加单词 no, (读作 no 英文的逗号)。再给 p 元素申明一个款式 width: 200px。
再看成果,三个段落的两侧都是对齐的。
如果正文掉这个款式,
很显著,右侧不再对齐显示了。
除了程度对齐,还能够设置文本的垂直对齐。通过申明 vertical-align 属性来实现。值有五个:
baseline,基线对齐。
text-top,文本顶部对齐。
text-bottom,文本底部对齐。
sub,下角标对齐。
super,上角标对齐。
在 html 文件中增加一个 h1 元素,5 个 p 元素。填入一些文本。在每个段首增加一个 img 元素,引入本地的一个小图片,图片的宽高都为 9px。给每个图片元素定义 class 属性,值别离为 a,b,c,d,e。
在样式表中,定义 img.a 选择器,申明款式 vertical-align: baseline。
baseline 是如何对齐的呢?看成果,在垂直方向如同是居中对齐。
实际上,baseline 是基于四线三格倒数第二行对齐的。对于英文文本才有意义。
比方,将 1 批改为 fight 1。
基线在这,文本中的图片就基于它来对齐。
再定义 img.b,img.c,img.d,img.e 四个选择器,给他们都申明 vertical-align 属性,值别离为 text-top,text-bottom,sub,super。
看看成果,图片垂直方向上,曾经绝对于文本顶部、底部、上角标、下角标的地位对齐了。
接下来,咱们学习如何设置文本的间距。
通过 CSS,能够实现文本缩进、文字或字母间距、行高、单词间距和解决空白。(有案例的成果演示)
聊起文本缩进,你还记得以前是如何实现自然段首行缩进的吗?能够发弹幕通知大家!
通过申明 CSS 的 text-indent 属性也能够实现。使⽤长度值或百分⽐来设置⽂本缩进。
长度值能够使⽤相对单位或绝对单位。相对单位就是 px,比方缩进 50px;绝对单位最罕用的是 em,缩进的宽度为字符宽度的倍数,个别设置为 2em,就是空两格。
字符宽度——如果是中文方块字,也能够称为字体大小,它是通过 font-size 属性来设置的,这个属性在前面 CSS 字体课程中会具体介绍。
百分⽐缩进宽度,是依据⽗元素的宽度计算失去。这个很少应用。
给 p 元素申明 text-indent 属性,值为 2em。
仔细观察,每个自然段缩进貌似不是 2 个字的宽度,这是为什么呢?
你应该想到了,把 text-align: justify 正文一下,就是咱们要的成果了。
letter-spacing 属性用于指定中文文字或英文字母之间的空隙。
在款式中,定义 h1 选择器,申明款式 letter-spacing: 5px。
这样,题目文字间就有了 5px 的空隙。
line-height 属性用于指定行与行之间的高度,也就是行高。属性值罕用的有三个:
第一,normal,也是默认值,浏览器会依据字符大小主动设置一个行高。
第二,一个数字,比方 1.5。此数字与以后的字符大小相乘计算失去。举荐应用。
第三,绝对值,比方 20px,-5px。设置固定的行间距。
在没有设置 line-height 属性时,咱们看到每一行的间距是这样的。
回到款式代码,给 p 元素申明款式 line-height: normal。
咱们看到成果没有变动。
批改 line-height 属性值为 1。
再来看,每个段落的行间距隐没了。
再次批改 line-height 为 10px,行与行之间叠加到了一起。
是不是和你了解的行高不一样呢?看来,咱们得须要认真钻研一下:行高到底是如何计算的。
这是两行中文和英文混合的文本。
在文字顶端画一条线,取名叫顶线。在文字底端画一条线,取名叫底线。在文字两头画一条线,取名叫中线,再画一条英文的基线。上一行文字的底线,到下一行文字的顶线,他们之间的空隙称为行距。
实际上,line-height 设置的行高值,是两行基线的间隔。
这里你可能会问,基线不是英文文本才有的吗?其实,不论文本里有没有英文,基线都是始终存在的。
理解了这个原理,你就能了解 line-height: 1,为啥没有行距了。因为 1 乘以文字的高度,后果还是文字的高度。而文字的高度,恰好等于两行基线之间的间隔,所以行距为 0。
word-spacing 属性用于指定文本中单词的间距,只对英文无效。
给 p 元素再申明一个 word-spacing: 20px 款式。
咱们看,单词 no 和 fight 前面就有了 20 个像素的间距。
white-space 属性指定了如何解决元素外部的空白。有一个罕用的值,nowrap,不论蕴含文本的元素宽度是多少,文本都不会换行,直到遇见
标签为止。
给 p 元素再申明一个 white-space: nowrap 款式。
此时,每个段落都在一行显示了。尽管咱们给 p 元素申明了 width: 200px,他也会熟视无睹,持续倔强的在一行显示。
文章配套视频链接:https://www.bilibili.com/vide…