【Web应用技术基础】CSS(1)——基础知识

头歌

案例一：


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

案例二：

<!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;
      }
    </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="font-size:10px;color:lightslategray">&copy; Walt Whitman</small></p>
            
        <!-- ********** END ********** -->
    </div>
</body>

</html>

style.css

body {
    font-family: 'Times New Roman', Times, serif;
}

div {
    border: 1px solid #000;
    overflow: hidden;
    padding: 0 1em .25em;
}

h1 {
    color: green;
}

p {
    /* ********** BEGIN ********** */
    font-weight:bold;
    /* ********** END ********** */
}

为祖国添砖爪哇

【Web应用技术基础】CSS(1)——基础知识

案例一：

案例二：