W3.CSS - 環境設定

上一個

下一個

如何使用 W3.CSS？

有兩種方法可以使用 W3.CSS −

本地安裝 − 可以在本地機器上下載 W3.CSS 檔案，並將其包含在 HTML 程式碼中。
基於 CDN 的版本 − 可以直接從內容分發網路 (CDN) 將 W3.CSS 檔案包含在 HTML 程式碼中。

本地安裝

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

它將產生以下結果 −

列印頁面

上一個

下一個