一周一章前端书·第18周：《HTML与CSS进阶教程》S02E0
2018-02-17 本文已影响46人
梁同学de自言自语
第7章：文本效果
7.1 常用的文本基础的样式属性
| 属性 | 说明 |
|---|---|
| text-decoration | 文本装饰，可以设置下划线、删除线、顶划线 |
| text-transform | 文本装换，可以将文本进行大小写转换 |
| font-variant | 文本变形，可以将英文文本准换成“小型”大写字母 |
| text-indent | 设置段落首行缩进 |
| text-align | 设置文本水平对齐 |
| vertical-align | 设置文本垂直对齐 |
| line-height | 行高 |
| letter-spacing | 单词的间距 |
| word-spacing | 词语的间距 |
7.2 深入text-indent
-
text-indent属性除了可以定义段落的首行缩进之外，还有另外一个设置LOGO的技巧。 - 由于搜索引擎无法识别图片，只能识别文字。我们通过一个
<h1>标签中设置背景图片指定LOGO，然后通过text-indent:-9999px来隐藏标题的文字内容，以便进行更好的SEO优化。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
h1{
width: 200px;
height: 100px;
background-image: url(img/logo.jpg);
background-repeat: no-repeat;
text-indent: -9999px;
}
</style>
</head>
<body>
<h1>LOGO</h1>
</body>
</html>
解答疑惑：
- 为什么不通过
display:none来隐藏文字，而是通过text-indent:-9999px来隐藏文字？因为搜索引擎默认忽略display:none的内容- 为什么是
-9999px，而不是-999px或-99px？设置这一数值主要是为了让文本的缩进足够大，即便是大分辨率的显示屏也看不到文字，而如今还没有哪台电脑的屏幕宽度能大于9999px
7.3 深入text-align
- 我们可以通过
text-align设置元素中文本或图片的水平对齐方式，常见取值有：left(居左)、right(居右)、center(居中)、justify(两端对齐，由于会产生一些问题，实际开发中少用)。
7.3.1 text-align起作用的元素
-
text-align属性对block元素是不起作用的，起作用的元素只有文本、inline元素、inline-block元素。
7.3.2 text-align:center和margin:0 auto的区别
-
text-align:center用于设置文字、inline元素、inline-block元素的水平居中，应用于父元素； -
margin:0 auto用于设置block元素的水平居中，应用于当前元素；
7.4 深入line-heingt
7.4.1 关于line-heingt的概念
顶线、中线、基线和底线
- 所谓顶线、中线、基线和底线，对应的是英文簿英文单词的四条线，值得注意的是，基线是倒数第二条线，而底线才是最下面的线。
行高、行距与半行距
- 行高指的是“两条基线之间的垂直距离”
- 行距则是上一行的底线到下一行底线的垂直距离，或者说两行文字之间的空隙
- 半行距就是行距的一半
内容区与行框
- CSS中一行文字可以看成一个“行盒子”，而内容区，是指行盒子顶线到底线之间的垂直距离
- 行框是指两行文字“行半距分割线”之间的垂直距离
7.4.2 height和line-height的区别
-
line-height定义的是每行文字的高度，而height定义的是整个段落的高度。比如将height和line-height定义成一样，可以实现单行文字垂直居中的效果。
7.4.3 line-height的取值
取值为百分比或em值
- 当
line-height值为百分比值或者em值时，当前元素的行高是根据父元素的font-size值来计算的。计算公式如下：
line-height = (父元素 font-size) × (百分比)
line-height = (父元素 font-size) × (em值)
取值为当前元素font-size的倍数
- 当line-height属性值为无单位的数值时，则以当前元素的
font-size值来计算，计算公式如下：
line-height = (当前元素 font-size) × (无单位数字)
7.5 深入vertical-align
7.5.1 vertical-align使用的元素
-
vertical-align属性用于定义“周围的文字、inline元素以及inline-block元素”相对于该元素基线的垂直对齐方式，该元素就是定义了vertical-align属性的元素。
<!-- 虽然定义了strong元素，但会影响周边文本垂直居中 -->
<span>恭喜发财，新年好</span>
<strong style="vertical-align: middle;font-size: 40px;;">2018年</strong>
<span>财源广进，身体棒</span>
-
vertical-align对inline元素、inline-block元素和table-cell元素有效，对block元素无效。 - table-cell元素设置
vertical-align属性和inline元素、inline-block元素设置是有区别的：- inline元素和inline-block元素的
vertical-align定义的是周围的元素相对于当前元素的对齐方式； - table-cell元素的
vertical-align是针对自身而言的，定义的是内部子元素现对于自身的对齐方式；
- inline元素和inline-block元素的
7.5.2 vertical-align的取值
-
vertical-align属性取值有三种情况：负值、百分比和关键字。 -
vertical-align属性最常用的取值成关键字：取值 说明 top 顶线对齐 middle 中线对齐 baseline 基线对齐 bottom 底线对齐 -
vertical-align还可以取值为负值，表示元素相对基线向下偏移，此方法常用于解决单选框或者复选框与文字垂直对齐的问题。 -
vertical-align属性取值可以为百分比，是相对于当前元素所继承的line-height属性值决定的。例如当前元素定义line-height:20px;vertical-align:50%;，则实际上等价于vertical-align:10px，表示该元素相对基线向上偏移10px
