第1关：字体颜色、类型与大小

本关任务

本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下：

相关知识

一般而言，用于文本的CSS属性可以分为如下两类：

  • 字体样式：用于字体的属性，包含字体类型、大小、粗细等；

  • 文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。

在本关卡中，我们首先学习第一种字体样式属性。

字体颜色 color

字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。例如：  

 

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>字体颜色</title>
  6. <style type="text/css">
  7. p {font-size: 25px;}
  8. .main {color:lightslategray}
  9. .error {color: brown}
  10. .info {color:mediumseagreen}
  11. </style>
  12. </head>
  14. <body>
  15. <p class="main">这是一行段落。</p>
  16. <p class="error">这是一行段落。</p>
  17. <p class="info">这是一行段落。</p>
  18. </body>
  19. </html>
 

显示效果如下：
 

 

提示：
 

  • 在右侧编辑器左上方，点击代码文件，选择font-color.html，修改任意代码之后，可以预览实时显示效果。你也可以自己尝试设置其他字体颜色。
 

字体类型 font-family
 

如同印刷世界，网页中的字体类型也是丰富多样的，我们可以使用font-family 属性定义文本的字体系列。
 

字体系列
 

CSS中， 有两种类型的字体系列：
 

  •  
    通用字体系列 - 有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）；
     
  •  
    特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）。
     
 

通过设置HTML表格中不同格的字体属性，页面表格直观展示了字体类型：   表格HTML：  
 

 

  1. <body>
  2. <table>
  3. <thead>
  4. <tr>
  5. <th>通用字体系列</th>
  6. <th>字体系列</th>
  7. <th>描述</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td rowspan=2>Serif</td>
  13. <td class="times">This is Times New Roman font.</td>
  14. <td class="times">Serif字体中字符在行的末端拥有额外的装饰</td>
  15. </tr>
  16. <tr>
  17. <td class="georgia">This is Georgia font.</td>
  18. <td class="georgia">Serif字体中字符在行的末端拥有额外的装饰</td>
  19. </tr>
  20. <tr class="arial">
  21. <td>Sans-serif</td>
  22. <td>Arial Verdana</td>
  23. <td>Sans字体在末端没有额外的装饰</td>
  24. </tr>
  25. <tr>
  26. <td rowspan=2>Monospace</td>
  27. <td class="courier">This is Courier New font.</td>
  28. <td class="courier">所有的等宽字符具有相同的宽度</td>
  29. </tr>
  30. <tr>
  31. <td class="lucida">This is Lucida Console font.</td>
  32. <td class="lucida">所有的等宽字符具有相同的宽度</td>
  33. </tr>
  34. </tbody>
  35. </table>
 

使用CSS设置字体属性：  
 

 

  1. .times {
  2. font-family: "Times New Roman";
  3. }
  5. .georgia {
  6. font-family: "Georgia";
  7. }
  9. .arial {
  10. font-family: "Arial";
  11. }
  13. .courier {
  14. font-family: "Courier New";
  15. }
  17. .lucida {
  18. font-family: "Lucida Console";
  19. }
 

不同类型字体的效果如下：
 

 

字体栈
 

在指定不同的字体类型时，通常情况下无法保证你想在你的网页上使用的字体都是可用的。所以，我们使用字体栈 (font stack)给浏览器提供多种选择。例如：  
 

 

  1. font-family: "Trebuchet MS", Verdana, sans-serif;
 

使用字体栈时，浏览器从列表的第一个开始检查，该字体在当前计算机浏览器中是否可用。如果可用，就应用该字体。如果不可用，它就移到列表中的下一个字体，然后再检查。指定的字体都不可用时，便会使用浏览器的默认字体。
 

字体大小 font-size
 

在CSS中，我们通过 font-size 属性设置文本的大小。通常文字的大小应该协调一致。
 

设置方式
 

我们可以使用绝对和相对两种方式设置字体的大小，两种设置不同在于：
 

  •  
    绝对大小：
     
  
    •  
      将文本设置为指定的字体大小；
       
    •  
      用户不能在不同的浏览器中改变文本大小；
       
    •  
      绝对大小在确定用户设备大小时很有用。
       
  •  
    相对大小：
     
  
    •  
      相对于周围的元素来设置大小；
       
    •  
      允许用户在不同的浏览器中改变文本大小。
       
 

常用单位
 

设置字体大小时，会使用到不同的单位。下面，我们来了解几种设置字体的常用单位。
 

像素
 

像素即px ，将像素赋值给文本大小。它是一个绝对单位，所以在不同大小设备上，页面上的文本所计算出来的像素值都是一样的。   例如，   HTML:
 

 

  1. <body>
  2. <h1>一级标题通常最大</h1>
  3. <h2>二级标题次之</h2>
  4. <p>段落文字大小适中</p>
  5. </body>
 

CSS:
 

 

  1. h1 {
  2. font-size: 40px;
  3. }
  4. h2 {
  5. font-size: 30px;
  6. }
  7. p {
  8. font-size: 18px;
  9. }
 

设置字体之后的显示效果：
 

 

这种方式可以在Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。但是，这种调整是整个页面，而不仅仅是文本。
 

em
 

em的方式可以解决在部分Internet Explorer 中无法调整文本。
 

浏览器中默认的文字大小是16 px，1 em代表与当前字体大小相等。
 

em 单位与像素转换公式为：  
 

 

  1. px/16=em
 

所以刚才同样的大小，通过em的方式设置为：  
 

 

  1. h1 {
  2. font-size:2.5em; /* 40px/16=2.5em */
  3. }
  4. h2 {
  5. font-size:1.875em; /* 30px/16=1.875em */
  6. } 
  7. p {
  8. font-size:1.125em; /* 18px/16=1.125em */
  9. }
 

百分比结合em
 

为body元素设置默认大小时，可以使用百分百，同样是相对于16px：  
 

 

  1. body {
  2. font-size:100%;
  3. }
 

编程要求
 

学习了字体的颜色、大小和类型之后，让我们来使用CSS丰富九寨沟介绍页面吧，请在右侧的编辑框中修改style.css文件。  
 

  •  
    设置 h1， h2 的font-family 为： PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
     
  •  
    字体大小： 使用**em**的方式设置（需要转换px与em单位）：
     
  
    •  
      h1元素为 35px 的字体大小；
       
    •  
      h2元素为 28px 的字体大小；
       
    •  
      h3元素为 20px 的字体大小；
       
    •  
      .intro .subhead  （intro类下的subhead子类）为 18px 的字体大小。
       
  •  
    字体颜色：
     
  
    •  
      设置h2元素的字体颜色为：#7d717c；
       
    •  
      设置h3元素的字体颜色为：green；
       
    •  
      设置 .intro 类元素的字体颜色为 #fefefe。
       
 

测试说明
 

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；
 

 

开始你的任务吧，祝你成功！
 

 //题目是简单的，不过我们刚开始要点击右上角的那个文件符号，进入下面这个编辑区
 

 

 

 

body {
 

    /*背景渐变*/
 

    background: -webkit-linear-gradient(left, #7ECABA, #E2FCCB);
 

    /* Safari 5.1 - 6.0 */
 

    background: -o-linear-gradient(right, #7ECABA, #E2FCCB);
 

    /* Opera 11.1 - 12.0 */
 

    background: -moz-linear-gradient(right, #7ECABA, #E2FCCB);
 

    /* Firefox 3.6 - 15 */
 

    background: linear-gradient(to right, #7ECABA, #E2FCCB);
 

    /* 标准的语法 */
 

    font: 100% PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
 

    /*居中页面*/
 

    width: 45em;
 

    margin: 0 auto;
 

}
 

 

h1,
 

h2 {
 

    /* ********** BEGIN ***********/
 

font-family:PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
 

    /* ********** END ***********/
 

}
 

 

h1 {
 

    /* ********** BEGIN ***********/
 

font-size:2.1875em;
 

 

    /* ********** END ************/
 

}
 

 

h2 {
 

    background-color: #eaebef;
 

    /* ********** BEGIN ***********/
 

color:#7d717c;
 

font-size:1.75em;
 

    /* ********** END ************/
 

}
 

 

h3 {
 

    background-color: white;
 

    /* ********** BEGIN ***********/
 

color:green;
 

font-size:1.25em;
 

    /* ********** END ************/
 

    padding-left: 10px;
 

}
 

 

hr {
 

    height: 1px;
 

    border: none;
 

    border-top: 2px dashed #88b2d2;
 

}
 

 

footer {
 

    margin: 10px auto;
 

}
 

 

/* CONTENT
 

----------------------------------- */
 

 

.architect {
 

    background-color: #fff;
 

    padding: 1.5em 1.75em;
 

}
 

 

/* :::: Intro ::::: */
 

 

.intro {
 

    background-color: #888888;
 

    /* ********** BEGIN ***********/
 

color:#fefefe;
 

    /* ********** END ************/
 

    padding: 1px 1.875em .7em;
 

}
 

 

.intro .subhead {
 

    /* ********** BEGIN ***********/
 

font-size:1.125em;
 

    /* ********** END ************/
 

}
 

 

.intro p {
 

    font-size: 1.0625em;
 

}
 

 

/* :::: chapter Descriptions ::::: */
 

 

.chapter p {
 

    font-size: .9375em;
 

}
 

 

img {
 

    border-radius: 8px;
 

}
 

 

/* :::: Links :::: */
 

 

a:link {
 

    color: #e10000;
 

}
 

 

a:visited {
 

    color: #b44f4f;
 

}
 

 

a:hover {
 

    color: #f00;
 

}
 

 

.intro a {
 

    color: #fdb09d;
 

}
 

 

.intro a:hover {
 

    color: #fec4b6;
 

}
 
  

        # html
      
        # css
      
        # 前端
      
  
 
 Logo 
腾讯云开发者社区
 
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
 
 
  
更多推荐
  
cover
 
动物识别系统 python实现+UI
 
 
avatar 腾讯云开发者社区
 
 
Linux下安装MySQL8.0(超详细)
 
Linux下安装MySQL8.0(超详细)
 
avatar 腾讯云开发者社区
 
cover
 
十大开源大模型的特点及应用要点
 
 
avatar 腾讯云开发者社区