W3.CSS - Thiết lập môi trường

Làm thế nào để sử dụng W3.CSS?

Có hai cách để sử dụng W3.CSS -

Local Installation - Bạn có thể tải xuống tệp W3.CSS trên máy cục bộ của mình và đưa nó vào mã HTML của bạn.
CDN Based Version - Bạn có thể đưa tệp W3.CSS vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN).

Cài đặt cục bộ

Đi đến https://www.w3schools.com/w3css/w3css_downloads.asp để tải xuống phiên bản mới nhất có sẵn.
Sau đó, đặt tệp w3.css đã tải xuống vào một thư mục trên trang web của bạn, ví dụ: / css.

Thí dụ

Bây giờ bạn có thể đưa tệp css vào tệp HTML của mình như sau:

<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>

Nó sẽ tạo ra kết quả sau:

Phiên bản dựa trên CDN

Bạn có thể đưa tệp W3.CSS vào mã HTML của mình trực tiếp từ Mạng Phân phối Nội dung (CDN). W3Schools.com cung cấp nội dung cho phiên bản mới nhất.

Note - Chúng tôi đang sử dụng phiên bản W3Schools.com CDN của thư viện trong suốt hướng dẫn này.

Thí dụ

Bây giờ chúng ta hãy viết lại ví dụ trên bằng cách sử dụng thư viện jQuery từ W3Schools.com CDN.

<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>

Nó sẽ tạo ra kết quả sau: