educoder(头歌)-CSS从入门到精通-基础知识_设置 h1 元素内联样式的字体颜色(color)为cornflowerblue;-CSDN博客

本文链接：https://blog.csdn.net/weixin_57644612/article/details/127224207

温馨提示：请仔细核对编程要求！！！

第一关：编程要求：

在右侧编辑器中，补全Begin至end中间的部分，选择index.html文件，设置其CSS样式为：

修改h1标题的text-align为居中显示，字体大小为40px；
p段落的颜色为灰色:grey,字体大小为18px。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
      body {
        text-align: center;
      }

      h1 {
        /* ********** BEGIN ********** */
        text-align: center;
        font-size:40px;
        /************ END ********** */
        color: #62A8CB;
      }

      img {
        height: 250px;
      }

      p {
        /* ********** BEGIN ********** */
        color:grey;
        font-size:18px;


        /* ********** END ********** */
      }
    </style>
  </head>
  <body>
    <h1>CSS让网页样式更丰富</h1>
    <img src="https://www.educoder.net/attachments/download/189467">
    <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
  </body>
</html>

第二关：编程要求：

选择index.html文件，完成：

引入外部样式表 style.css，引入的路径为step2/CSS/style.css；(注意路径中CSS是大写)
设置 h1 元素内联样式的字体颜色(color)为cornflowerblue；
修改 samll 元素内联样式：设置字体大小(font-size)为10px; 颜色(color)为lightslategray。

选择style.css 文件，完成：

设置 p 元素的 font-weight 为粗体(bold)；

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>O Captain! My Captain!</title>
     <!-- ********** BEGIN ********** -->
        
    <link rel="stylesheet" href="step2/CSS/style.css">

     <!-- ********** END ********** -->

    <style type="text/css">
      h1 {
        color:darkblue;
      }

      img {
        float: left;
        margin-right: 1em;
      }
      p {
        font-weight:bold;
      }
    </style>
</head>

<body>
    <div>
        <!-- ********** BEGIN ********** -->
        
        <h1 style="color:cornflowerblue">O Captain! My Captain!</h1>

        <!-- ********** END ********** -->
            
        <img src="https://www.educoder.net/attachments/download/170157" width="300" height="175" alt="Blue Flax (Linum lewisii)" />
        <p>O Captain! my Captain! our fearful trip is done,
The ship has weather’d every rack, the prize we sought is won,
The port is near, the bells I hear, the people all exulting,
While follow eyes the <em>steady keel</em>, the vessel grim and daring;</p>
    
        <!-- ********** BEGIN ********** -->
    
        <p ><small style="color:lightslategray;font-size:10px;">
            &copy; Walt Whitman</small></p>

            
        <!-- ********** END ********** -->
    </div>
</body>

</html>