一周一章前端书·第18周:《HTML与CSS进阶教程》S02E05

第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>

解答疑惑:

  1. 为什么不通过display:none来隐藏文字,而是通过text-indent:-9999px来隐藏文字?因为搜索引擎默认忽略display:none的内容
  2. 为什么是-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:centermargin: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 heightline-height的区别

  • line-height定义的是每行文字的高度,而height定义的是整个段落的高度。比如将heightline-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是针对自身而言的,定义的是内部子元素现对于自身的对齐方式;

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,817评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,329评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,354评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,498评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,600评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,829评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,979评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,722评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,189评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,519评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,654评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,329评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,940评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,762评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,993评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,382评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,543评论 2 349

推荐阅读更多精彩内容