css基础知识复习与学习（2）

如何在网页中使用css

  • 行内样式：直接将css代码写在html标签上。
    这是最直接的方式，将html代码和css代码混合在一起。但是一般不建议这样做，css和html混合让后面的维护变的非常困难，同时使代码变的比较复杂。
    例：

    1
    2
    3
    <div stype="font-size: 18px; color:#000000;">
      将css代码直接写在html标签上的例子
    </div>

  • 内部样式：将css代码写在html内。
    这种方式和行内样式的区别是，虽然css代码依旧是和html混合在一起。但是在这里css代码处于style标签中间，独立成块。这种方法相对于前一种方法比较好，代码较少时可以使用。
    例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <html>
      <head>
          <meta charset='utf8'>
          <title>内部样式</title>
          <style>
           div{
              font-size: 18px;
              color:#000000;
            }
          </style>
      </head>
      <body>
         <div>
    			将css代码写在html代码内的例子
         </div>
      </body>
    </html>

  • 引入外部css文件
    将css代码写在 .css的文件里，然后通过link 标签引入。
    例：
    index.html文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <html>
      <head>
          <meta charset='utf8'>
          <title>内部样式</title>
          <link rel="stylesheet" href="./demo.css">
      </head>
      <body>
         <div>
    			将css代码写在html代码内的例子
         </div>
      </body>
    </html>

demo.css文件

1
2
3
4
div{
   font-size: 18px;
   color:#000000;
  }
  • 在css文件中引用css文件
    在css文件内，也可以用@import url引入另外一个css文件，如下
    1
    @import './demo.css'