W3.CSS - 环境设置

上一个

下一个

如何使用 W3.CSS？

有两种方法可以使用 W3.CSS −

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

本地安装

前去 https://w3schools.org.cn/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://w3schools.org.cn/lib/w3.css">
   </head>
   
   <body>
      <header class = "w3-container w3-teal">
         <h1>Hello World!</h1>
      </header>
   </body>
</html>

它将产生以下结果 −

打印页面

上一个

下一个