educoder CSS从入门到精通——基础知识

最新推荐文章于 2024-04-03 19:51:53 发布

刘向阳啊

最新推荐文章于 2024-04-03 19:51:53 发布

阅读量2.6k

点赞数 5

分类专栏： educoder CSS从入门到精通文章标签： html css

原文链接：https://blog.csdn.net/m0_37908260/article/details/115337408

版权

educoder CSS从入门到精通专栏收录该内容

2 篇文章 1 订阅

订阅专栏

第1关初识CSS：丰富多彩的网页样式

step1/index.html

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

step1/example.html

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

        h1 {
            color:white;
            font-size: 36px;
            text-align: center;
        }
    </style>
  </head>
  <body>
    <h1>CSS让网页样式更丰富</h1>
  </body>
</html>

第2关：CSS样式引入方式

step2/index.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="color:lightslategray;font-size:10px;">
            &copy; Walt Whitman</small></p>

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

</html>

step2/index.html

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 ********** */
}

刘向阳啊

关注

5
点赞
踩
17

收藏

觉得还不错? 一键收藏
3
评论
educoder CSS从入门到精通——基础知识

第1关初识CSS：丰富多彩的网页样式step1/index.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Hello World</title> <style type="text/css"> body { text-align: center; } h1
复制链接

扫一扫