Learn 12 CSS的使用方法 - 343代码学院 - 专注于小语种培训的专业软件工程师培训机构

根据CSS在HTML中的使用方法和作用范围，CSS的使用方法分为四类

行内样式

直接在html元素中加入style属性，然后把CSS代码直接写入其中。

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
  </head>
  <body style="background-color: #AADD66">
     <h2 style="text-align: center;">山村咏怀</h2>
      <p style="font-size: 25px;line-height: 30px;text-align: center;">
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

内嵌样式

内嵌样式将样式写在页面头部，并且用元素声明。

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
    <style type="text/css">
     p{
        line-height: 30px;
    font-size: 24px;
        text-align: center;
      }
     body{
    background-color: #AADD66;
      }
      h2{
        text-align: center;
      }
    </style>
  </head>
  <body>
     <h2>山村咏怀</h2>
      <p>
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

链接外部样式

基本语法

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
    <link href="1.css" rel="stylesheet"type="text/css">
  </head>
  <body>
     <h2>山村咏怀</h2>
      <p>
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

     p{
        line-height: 30px;
    font-size: 24px;
        text-align: center;
      }
     body{
    background-color: #AADD66；
      }
     h2{
        text-align: center;
      }

导入外部样式

基本语法 @imput url("样式表路径")

<!DOCTYPE html>
<html>
  <head>
    <title>山村咏怀</title>
    <style type="text/css">
     @import url(1.css);
    </style>
  </head>
  <body>
     <h2>山村咏怀</h2>
      <p>
      一去二三里，<br/>
      烟村四五家。<br/>
      亭台六七座，<br/>
      八九十枝花。<br/>   
      </p>
</body>
</html>

     p{
        line-height: 30px;
    font-size: 24px;
        text-align: center;
      }
     body{
    background-color: #AADD66；
      }
     h2{
        text-align: center;
      }

0 赞