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

本关任务

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

相关知识

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

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

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

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

字体颜色 color

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



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



显示效果如下：




提示：


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



字体类型 font-family


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


字体系列


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


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



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




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



使用CSS设置字体属性：  




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



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




字体栈


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




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



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


字体大小 font-size


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


设置方式


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


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



常用单位


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


像素


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




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



CSS:




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



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




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


em


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


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


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




    
 
  1. px/16=em
    2. 



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




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



百分比结合em


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




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



编程要求


学习了字体的颜色、大小和类型之后，让我们来使用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 
2048 AI社区
 
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
 
 
  
更多推荐
  
cover
 
大模型微调效果差？可能是你参数没调对！掌握这些关键设置让模型性能翻倍
 
 
avatar 2048 AI社区
 
 
比官方便宜一半以上！Midjourney API 申请及使用
 
Midjourney 是一款非常强大的 AI 绘图工具，只要输入关键字，就能在短短一两分钟生成十分精美的图像。Midjourney 以其出色的绘图能力在业界独树一帜，如今，Midjourney 早已在各个行业和领域广泛应用，其影响力愈发显著。本文档主要介绍 Midjourney API 中 Imagine 操作的使用流程，利用它我们可以轻松通过文本生成所需要的图像。
 
avatar 2048 AI社区
 
cover
 
Cursor + 蓝耘API：用自然语言完成全栈项目开发
 
 
avatar 2048 AI社区