第7章 掌握CSS——文字控制声明块

1 长度单位

1.1 像素概念

我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。像素是一种相对单位，本质上是小亮点，在同一尺寸的屏幕中，可能大小并不相同，而像素越是细小，所显示的内容就越为精细。不同像素的屏幕显示清晰度情况对比，如下图所示：

1.2 像素由来

厘米（cm）与毫米（mm）是唯二两种可以用在CSS层叠样式表中，并在浏览器中可以显示的真实长度单位。现实的长度单位厘米（cm）与毫米（mm）并不被使用，原因是这两种长度单位在显示屏的精细度不好把握，如1毫米（mm）与2毫米（mm）的精细度差距非常大，于是由组成显示屏的一堆细小的小亮点像素就登上了舞台。

1.3 其它单位

1.4 相关问题

为什么有时候截屏的像素与图片实际像素不一致呢？
那是因为电脑屏幕自动把【缩放与布局】 设置为125%，会将实际内容的像素扩大1.25倍，只要把【缩放与布局】改为100%，所截屏图像像素与实际图像像素就一致了。如下图所示：

2 颜色表示

2.1 表示方式

类型	表示法	实际案例	备注
颜色名称	英文颜色名	red、green...	查看MDN
RGB	光的三原色（red,green,blue）	①rgb(255,0,0) ②rgb(100%,0,0)	颜色由灰色逐渐变浅，使用拾色器获取
RGBA	光的三原色+透明度（red,green,blue,透明度）	①rgba(255,0,0,0.5) ②rgba(255,0,0,.5) ③rgba(100%,0,0,.5) ④rgba(100%,0,0,50%) ⑤rgba(255,0,0,50%)	透明度在0~1之间，透明度可以写小数，小数点前的0可以省略。透明度可以取百分值。
HEX	十六进制	#ff0000 == #f00	三对十六进制分别表示red，green，blue
HEXA	十六进制+透明度	#ff0000ff=#f00f	ff表示透明度为1，00表示透明度为0，透明度在00~ff之间。IE浏览器不支持。
HSL	色相、饱和度与亮度	（0deg,100%,100%）== (0,100%,100%)
HSLA	色相、饱和度、亮度与透明度	（0,100%,100%,.5）

2.2 理解HSLA

• 色相：颜色取值，由角度表示。
• 饱和度：在色相颜色中添加灰色，0表示全灰色，1表示无灰色。
• 亮度：0%表示在漆黑的房间内关闭所有灯，表示纯黑色；100%表示在照明的房间打开所有的灯，表示纯白色。
• 透明度：表示可不可以被看见。

3 字体声明块

3.1 字体大小

⚠注意

①Chrome浏览器存在默认字体大小为16px以及最小字体大小为12px，并且 0px 会自动消失。
②不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
③通常以给body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了，就可以统一设置字体大小了。如：body { font-size：20px}。

• ❓问题：如何查看Chrome浏览器字体设置？
  
  在Chrome浏览器中的，按照 设置 ▶ 外观 ▶ 字号 | 最小字号 顺序进行操作，实际操作如下图所示：

• ❓问题：如何在Chrome浏览器开发者工具中调节元素样式？
  
  按住 【F12】键或鼠标右键开发者工具，打开 【开发者工具】，在Styles中调节元素样式， 如下图所示：

  

3.2 字体族

⚠ 注意：

①使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里 去寻找。
②如果字体名包含空格，必须使用引号包裹起来。
③可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面 的，且通常在最后写上 serif （衬线字体）或 sans-serif （非衬线字体）。若设置的衬线字体或非衬线字体失效，浏览器将会去操作系统中寻找。
④windows 系统中，默认的字体就是微软雅黑。

• ❓ 问题：衬线字体与非衬线字体的区别？

字体类型	字体描述	举例说明	关键字
衬线字体	棱角明显	楷体、宋体等	serif
非衬线字体	棱角不明显	微软雅黑等	sans-serif

• 衬线字体与非衬线字体，如下图所示：
• ❓ 问题：如何在windows10操作系统中查看电脑支持的字体？

3.3 字体风格

⚠注意：

①italic工作流程：先寻找倾斜字体，有则显示，无则将正常字体转换成倾斜字体。
②oblique工作流程：直接将正常字体转换成倾斜字体。
③实现字体时，更推荐使用italic。

3.3 字体粗细

3.4 字体属性综合写法

⚠注意：

font属性综合写法：font：font-style font-weight font-size/line-height font-family；（不能修改属性顺序）

4 文本声明块

4.1 文本颜色

4.2 文本间距

⚠注意

文本间距属性的主要作用是控制字母以及单词的间距。

4.3 文本装饰

⚠注意：

tex-decoration属性综合写法：text-decoration：color wavy/dotted underline/overline/line-through；（可以改变属性顺序）

4.4 文本缩进

4.5 文本对齐-水平

4.6 字体设计原理

❓问题：文字呈现的字体大小为什么不一定与font-size设置的一样大呢？

设计字体时，都会将字体放置在一个框中，且基本靠下一些，而不是垂直居中。且经常以小写的x作为基线，来定位其它字体。字体设置时，宽度就被确定了，改变font-size，实质改变的就是高度，当高度变到一定程度，为了保持字体的效果不变，字体的宽度也会随之发生等比例变化。

设置font-size后，字体变化原理如下图所示：

字体设计原理跟下图所示：

⚠ 注意：

①由于字体设计原因，文字最终呈现的大小，并不一定与 font-size 的值一致，可能大，也可能小。例如： font-size 设为 40px ，最终呈现的文字，可能比 40px 大，也可能比 40px小
②通常情况下，文字相对字体设计框，并不是垂直居中的，通常都靠下 一些。

4.7 行高（行间距）

1. 行高概念

2. 行高组成

⚠注意：

根据字体设计原理，字体实际都会靠下一点，所以大多数情况上上行高>下行高

3. 行高属性

4. 行高与高度的关系
   

情形一：若设置容器高度（height），则容器实际高度为设置的高度。

• 若容器实际高度（height） < 行高（line-height），则文本文字将向下溢出容器，当行高>>容器实际高度，文本文字将脱离容器。
• 若容器实际高度（height） = 行高（line-height），则文本文字视觉上垂直居中。
• 若容器实际高度（height） > 行高（line-height），则文本文字包含在容器之中，且居上的位置。

情形二：若未设置容器高度（height），则容器实际高度为设置的行高（line-height）。

• 此时容器高度 = 文本文字行数 * 行高
• 若字体高度（font-size） > 行高（line-height）=容器实际高度（height），则字体想要居中于容器中，就会向上移动，上部分文字将超出容器，出现文字被”吃掉“的现象。

5. 行高注意

⚠注意：

①行高=（1.5~2）* 字体高度
② 根据字体字体设计原理，字体不是垂直居中的，往往靠下一点，若行高=字体高度，则字体很有可能超出行高，发生上下字体交叉重叠的现象。

4.8 文本对齐-垂直

• 借助line-height实现单行文本垂直对齐

• 借助vertical-align实现多行文本垂直对齐

⚠注意

vertical-align不能作用于块级元素，不能直接作用于文字，可以作用于非块级元素包裹的文字。

• ❓问题：什么是垂直居中原理？
  让父元素中部与X的中心点对齐，X的中心点是父元素X高度的一半。

• ❓问题：怎么让文字与图片对齐？

  给图片元素设置vertical-align声明块，从而让文字与图片实现对齐。若父元素未指定容器行高，行高默认为一行元素的最大高度。 对于同一行，若文本的字体高度（font-size）>图片高度（height），则父元素的行高为文本的字体高度，则图片进行移动，而文本不移动。若文本的字体高度（font-size） < 图片高度（height）则父元素的行高为图片的高度，则图片不移动，而文本进行移动。

  

5 案例： 百度首页

5.1 视觉效果

5.2 准备素材

两张图标分别放置于当前项目根目录的images目录下。

5.3 制作思路

• 第1步 从上到下，先整体再局部
• 第2步 先标签，再 CSS 美化

5.4 使用技术

• 字体相关样式与文本相关样式

5.5 编码实现

1. HTML标签

  <div class="box">

    <img src="img/logo.gif" alt="">

    <div class="link">
      <a href="#">新 闻</a>
      <a href="#" class="web">网 页</a>
      <a href="#">贴 吧</a>
      <a href="#">知 道</a>
      <a href="#">音 乐</a>
      <a href="#">图 片</a>
      <a href="#">视 频</a>
      <a href="#">地 图</a>
    </div>

    <div class="search">
      <input type="text" class="one">
      <input type="button" value="百度一下" class="two">
    </div>
    
    <div class="more">
        <a href="#">百科</a>
        <a href="#">文库</a>
        <a href="#">hao123</a> |
        <a href="#">更多&gt;&gt;</a>
    </div>

    <div class="map">
        <img src="img/icon.jpg" alt="">
        <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
    </div>
    <div>
      <a href="#">把百度设为主页 </a>
      <a href="#">安装百度卫士 </a>
    </div>
    <div> 
      <a href="#">加入百度推广</a> |
      <a href="#">搜索风云榜</a> |
      <a href="#">关于百度</a> |
      <a href="#">About Baidu</a>
    </div>
    <p>©2021 Baidu 使用百度前必读 京ICP证030173号</p>
  </div>

2. css标签

<style>
    .box {
      /* 让盒子内部的图片、文字等内容水平居中 */
      text-align: center;
    }

    .link {
      height: 56px;
    }

    .web {
      font-weight: 700;
      text-decoration: none;
      color: black;
    }

    .search {
      height: 54px;
    }

    .one {
      width: 425px;
      height: 30px;
    }

    .two {
      width: 100px;
      height: 30px;      
    }

    .more {
      height: 56px;
    }

    .map {
      height: 62px;
    }

  </style>

6 案例：百度搜索页

6.1 视觉效果

6.2 准备素材

无

6.3 制作思路

• 第1步 从上到下，先整体再局部
• 第2步 先标签，再 CSS 美化

6.4 使用技术

• 字体相关样式与文本相关样式

6.5 编码实现

1. HTML 标签

    <p>
      <a href="#" class="title">
         <span>新闻</span> 在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收
      </a>
    </p>
    <p class="desc">
      <span>新闻</span>有三要素：新、事实和报道。<span>新闻</span>具有真实性、时效性、客观性...
    </p>
    <p>
      <a href="#" class="link">https://www.zhihu.com/question...</a>
      <img src="./images/v2.png" alt="" />
      <a href="#" class="snapshot">百度快照</a>
    </p>


    <p>
      <a href="#" class="title">
        <span>新闻</span> 北方高温明日达鼎盛 京津冀多地地表温度将超60℃
      </a>
    </p>
    <p class="desc">
      <span>新闻</span> 北方温度逐年升高，是因为天怒人怨，还是因为...
    </p>
    <p>
      <a href="#" class="link">www.iteye.com/forums/b...</a>
      <img src="./images/v2.png" alt="" />
      <a href="#" class="snapshot">百度快照</a>
    </p>

2. CSS 标签

   <style>
      .title {
        color: #2440b3;
        font-size: 18px;
      }
      span {
        color: #c00;
      }

      .desc {
        color: #333;
        font-size: 13px;
      }
      .link {
        color: #080;
        font-size: 13px;
        text-decoration: none;
      }
      .snapshot {
        color: #666;
        font-size: 13px;
        text-decoration: none;
      }
    </style>

7 案例：新闻详情页

7.1 视觉效果

7.2 准备素材

图片名为1.jpg的图片，放置于当前项目根目录下。

7.3 制作思路

• 第1步 从上到下，先整体再局部
• 第2步 先标签，再 CSS 美化

7.4 使用技术

• HTML标签

  • 排版标签：<h1>、<p> 、<div>
  • 图片标签：<img>
  • 文本标签：<strong>

• CSS样式

  • 颜色声明块：color
  • 文本声明块：text-align、text-indent
  • 字体声明块：font-size、font-weight

7.5 编码实现

1.HTML 标签

<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<div>来源：央视网 | 2222年12月12日 12:12:12</div>
<p><strong>央视网消息：</strong>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。</p>
<p>中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。</p>
<div class="pic">
  <img src="./1.jpg" alt="转存失败，建议直接上传图片文件">
</div>
<p>王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。</p>
<p>此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。</p>

2.CSS样式

<style>
  h1 {
    text-align: center;
    font-weight: 400;
    font-size: 30px;
    color: #333;
  }

  div {
    font-size: 14px;
    color: #999;
  }

  p {
    text-indent: 2em;
    font-size: 18px;
    color: #333;
  }


  .pic {
    text-align: center;
  }
</style>