W3.CSS - 环境设置

如何使用W3.CSS？

有两种使用 W3.CSS 的方法 -

本地安装- 您可以在本地计算机上下载 W3.CSS 文件并将其包含在 HTML 代码中。
基于 CDN 的版本- 您可以直接从内容分发网络 (CDN) 将 W3.CSS 文件包含到您的 HTML 代码中。

本地安装

转至https://www.w3schools.com/w3css/w3css_downloads.asp下载可用的最新版本。
然后，将下载的w3.css文件放在您网站的目录中，例如/css。

例子

现在您可以将css文件包含在 HTML 文件中，如下所示 -

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "css/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

它将产生以下结果 -

基于CDN的版本

您可以直接从内容分发网络 (CDN) 将 W3.CSS 文件包含到您的 HTML 代码中。W3Schools.com 提供最新版本的内容。

注意- 在本教程中我们使用的是 W3Schools.com CDN 版本的库。

例子

现在让我们使用 W3Schools.com CDN 中的 jQuery 库重写上面的示例。

现场演示

<html>
   <head>
      <title>The W3.CSS Example</title>
      <meta name = "viewport" content = "width =  device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

它将产生以下结果 -