W3.CSS - Hướng dẫn nhanh
W3.CSS là gì?
W3.CSS là một Biểu định kiểu xếp tầng (CSS) được phát triển bởi w3schools.com . Nó giúp tạo ra các trang web nhanh hơn, đẹp và đáp ứng. Nó được lấy cảm hứng từ Google Material Design.
Một số tính năng nổi bật của nó như sau:
Thiết kế đáp ứng tích hợp
CSS chuẩn
Lấy cảm hứng từ Google Material Design
Sử dụng miễn phí
Thiết kế đáp ứng
W3.CSS có thiết kế đáp ứng tích hợp để trang web được tạo bằng W3.CSS sẽ tự thiết kế lại theo kích thước thiết bị.
W3.CSS có lưới chất lỏng ưu tiên di động 12 cột hỗ trợ các lớp đáp ứng cho các kích thước màn hình nhỏ, lớn và trung bình.
Các lớp W3.CSS được tạo theo cách mà trang web có thể phù hợp với bất kỳ kích thước màn hình nào.
Các trang web được tạo bằng W3.CSS hoàn toàn tương thích với PC, máy tính bảng và thiết bị di động.
CSS chuẩn
W3.CSS chỉ sử dụng CSS tiêu chuẩn và nó rất dễ học.
Không có sự phụ thuộc vào bất kỳ thư viện JavaScript bên ngoài nào như jQuery.
Vật liệu thiết kế
W3.CSS được lấy cảm hứng từ Google Material Design.
Nó hỗ trợ thiết kế giống như giấy.
Nó hỗ trợ bóng đổ và màu đậm.
Màu sắc và sắc thái vẫn đồng nhất trên các nền tảng và thiết bị khác nhau.
Và quan trọng nhất, nó hoàn toàn miễn phí để sử dụ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 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:
HTML5 có các phần tử vùng chứa sau:
<div> - Cung cấp một vùng chứa chung cho nội dung HTML.
<header> - Đại diện cho phần tiêu đề.
<footer> - Đại diện cho phần chân trang.
<article> - Đại diện cho các bài báo.
<section> - Cung cấp một vùng chứa chung cho các loại phần khác nhau.
W3.CSS cung cấp w3-containernhư một lớp chính để tạo kiểu cho tất cả các vùng chứa được đề cập ở trên. W3.CSS cũng có các lớp khác nhưw3-border, w3-red, w3-teal, w3-padding-32 để thêm các thuộc tính tạo kiểu khác vào vùng chứa.
Thí dụ
Ví dụ sau đây giới thiệu việc sử dụng lớp w3-container để tạo kiểu cho các vùng chứa khác nhau.
w3css_containers.htm
<html>
<head>
<title>The W3.CSS Containers</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-red">
<h1>HTML5 Tutorial</h1>
</header>
<div class = "w3-container w3-border w3-teal">
<p>HTML5 is the latest and most enhanced version of HTML. Technically, HTML is not a programming language, but rather a mark up language.</p>
</div>
<article class = "w3-container">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</article>
<section class = "w3-container">
<p>HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. New features build on existing features and allow you to provide fallback content for older browsers.</p>
</section>
<footer class = "w3-container w3-red">
<p>Copyright @TutorialsPoint.COM</p>
</footer>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS cũng cung cấp các thùng chứa với khả năng ẩn / đóng. Xem ví dụ sau -
w3css_hide_container.htm
<html>
<head>
<title>The W3.CSS Containers</title>
<meta name = "viewport" content="width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class = "w3-container w3-border w3-teal">
<span class = "w3-closebtn" onclick = "this.parentElement.style.display = 'none'">X</span>
<p>Close container by clicking on the X in the upper right corner.</p>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS cung cấp hỗ trợ tuyệt vời cho việc tô sáng cú pháp của các ngôn ngữ sau:
HTML - Sử dụng các lớp w3-code htmlHigh trên vùng chứa có Mã HTML.
CSS - Sử dụng các lớp w3-code cssHigh trên vùng chứa có Mã CSS.
JS - Sử dụng các lớp w3-code jsHigh trên vùng chứa có Mã CSS.
Bạn phải bao gồm tập lệnh sau để có liên kết đến tệp js để hỗ trợ tô sáng cú pháp -
<script src = "https://www.w3schools.com/lib/w3codecolors.js"></script>w3css_color_coding.htm
<html>
<head>
<title>The W3.CSS Syntax Highlighter</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">
<h2>HTML Syntax Highlighted</h2>
</header>
<div class = "w3-code htmlHigh">
<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>
</div>
<header class="w3-container w3-teal">
<h2>CSS Syntax Highlighted</h2>
</header>
<div class = "w3-code cssHigh">
.bold {
font-weight:bold;
}
#boldLabel {
font-weight:bold;
}
table, th, td {
font-family:sans;
}
</div>
<header class = "w3-container w3-teal">
<h2>JS Syntax Highlighted</h2>
</header>
<div class = "w3-code cssHigh">
<script type="text/javascript">
function(message){
}
var message = "Hello, World!";
alert(message);
</script>
</div>
<script src="https://www.w3schools.com/lib/w3codecolors.js"></script>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có một số lớp đặc biệt để hiển thị các thùng chứa dưới dạng thẻ giống như giấy với bóng.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-card Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào có đường viền |
| 2 | w3-card-2 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào có bóng viền 2px |
| 3 | w3-card-4 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 4px |
| 4 | w3-card-8 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 8px |
| 5 | w3-card-12 Tạo kiểu cho vùng chứa cho bất kỳ nội dung HTML nào với bóng có viền 12px |
Thí dụ
w3css_cards.htm
<html>
<head>
<title>The W3.CSS Syntax Highlighter</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
<style>
div {
width : 200px;
height : 200px;
}
</style>
</head>
<body>
<header class = "w3-container w3-teal">
<h2>Yellow Card Demo</h2>
</header>
<br/>
<div class = "w3-card w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "w3-card-2 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "w3-card-4 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<div class = "w3-card-8 w3-yellow">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<br/>
<header class = "w3-container w3-teal">
<h2>White Card Demo</h2>
</header>
<br/>
<div class = "w3-card w3-white">
<p><b>TODO:</b> Learn W3.CSS</p>
</div>
<div class = "w3-card-8 w3-white">
<p><b>TODO:</b> Learn HTML5</p>
</div>
<br/>
<div class = "w3-card-4" style = "width:550px;">
<header class = "w3-container w3-blue">
<h1>HTML5 Tutorial</h1>
</header>
<div class = "w3-container" style = "width:550px;">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
</div>
<br/>
<header class = "w3-container w3-teal">
<h2>Image Card Demo</h2>
</header>
<br/>
<div class = "w3-card-12" style = "width:255px; height: 230px;">
<img src = "/html5/images/html5-mini-logo.jpg" alt = "html5">
<div class = "w3-container">
<p>Learn HTML5</p>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có một số lớp đặc biệt để tạo ra một thiết kế đáp ứng.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-half Thiết lập các container để chiếm 1/2 nd của cửa sổ trên các thiết bị màn hình lớn vừa hay. Nếu màn hình nhỏ hơn 601 pixel, thì màn hình đó sẽ thay đổi kích thước vùng chứa thành 100%. |
| 2 | w3-third Thiết lập các container để chiếm 1/3 thứ của cửa sổ trên các thiết bị màn hình lớn vừa hay. Nếu màn hình nhỏ hơn 601 pixel, thì màn hình đó sẽ thay đổi kích thước vùng chứa thành 100%. |
| 3 | w3-quarter Thiết lập các container để chiếm 1/4 ngày của cửa sổ trên các thiết bị màn hình lớn vừa hay. Nếu màn hình nhỏ hơn 601 pixel, thì màn hình đó sẽ thay đổi kích thước vùng chứa thành 100%. |
| 4 | w3-col Chỉ định một cột trong lưới 12 cột. |
| 5 | w3-row Chỉ định một vùng chứa không có phần đệm sẽ được sử dụng cho các lớp đáp ứng. Lớp này là bắt buộc để các lớp đáp ứng có thể đáp ứng hoàn toàn. |
Thí dụ
w3css_responsive_design.htm
<html>
<head>
<title>The W3.CSS Containers</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">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-half w3-red">
<h2>w3-half</h2>
<p>Sets the container to occupy 1/2<sup>nd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-half">
<h2>w3-half</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-third w3-red">
<h2>w3-third</h2>
<p>Sets the container to occupy 1/3<sup>rd</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
<br/>
<div class = "w3-row w3-border">
<div class = "w3-container w3-quarter w3-red">
<h2>w3-quarter</h2>
<p>Sets the container to occupy 1/4<sup>th</sup> of the window on medium or large screen devices. If a screen is smaller than 601 pixels then it resizes the container to 100%.</p>
</div>
<div class = "w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS cung cấp lưới đáp ứng chất lỏng 12 cột.
Nó sử dụng các lớp kiểu w3-row và w3-col để xác định các hàng và cột tương ứng.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-row Chỉ định một vùng chứa không có phần đệm sẽ được sử dụng cho các cột đáp ứng. Lớp này là bắt buộc để các lớp đáp ứng có thể đáp ứng hoàn toàn. |
| 2 | w3-col Chỉ định một cột với các lớp con |
w3-col có một số lớp con dành cho các loại màn hình khác nhau.
Các cột dành cho thiết bị màn hình nhỏ
Dưới đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình nhỏ, điển hình là điện thoại thông minh.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | s1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
| 2 | s2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
| 3 | s3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
| 4 | s4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
| 5 | s12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho điện thoại màn hình nhỏ. |
Cột cho Thiết bị Màn hình Trung bình
Dưới đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình trung bình, thường là máy tính bảng.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | m1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
| 2 | m2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
| 3 | m3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
| 4 | m4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
| 5 | m12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho điện thoại màn hình trung bình. |
Cột dành cho thiết bị màn hình lớn
Dưới đây là danh sách các kiểu cấp cột dành cho thiết bị màn hình lớn, điển hình là máy tính xách tay.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | |1 Xác định 1 trong 12 cột có chiều rộng là 08,33%. |
| 2 | |2 Xác định 2 trong số 12 cột có chiều rộng là 16,66%. |
| 3 | |3 Xác định 3 trong số 12 cột có chiều rộng là 25,00%. |
| 4 | |4 Xác định 4 trong số 12 cột có chiều rộng là 33,33%. |
| 5 | |12 Xác định 12 trong số 12 cột có chiều rộng là 100%. Lớp mặc định cho thiết bị màn hình lớn. |
Sử dụng
Mỗi lớp con xác định số cột của lưới sẽ được sử dụng dựa trên loại thiết bị. Hãy xem xét đoạn mã HTML sau.
<div class = "w3-row">
<div class = "w3-col s2 m4 l3">
<p>This text will use 2 columns on a small screen, 4 on a medium screen, and 3 on a large screen.</p>
</div>
</div>Các cột mặc định sẽ được sử dụng là 12 trên một thiết bị nếu một lớp con không được đề cập trong thuộc tính lớp của một phần tử HTML.
Thí dụ
w3css_grids.htm
<html>
<head>
<title>The W3.CSS Grids</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">
<h2>Mobile First Design Demo</h2>
<p class = "w3-large">Resize the window to see the effect!</p>
</header>
<div class = "w3-row">
<div class = "w3-col m1 w3-center w3-grey">1</div>
<div class = "w3-col m1 w3-center">2</div>
<div class = "w3-col m1 w3-center w3-grey">3</div>
<div class = "w3-col m1 w3-center">4</div>
<div class = "w3-col m1 w3-center w3-grey">5</div>
<div class = "w3-col m1 w3-center">6</div>
<div class = "w3-col m1 w3-center w3-grey">7</div>
<div class = "w3-col m1 w3-center">8</div>
<div class = "w3-col m1 w3-center w3-grey">9</div>
<div class = "w3-col m1 w3-center">10</div>
<div class = "w3-col m1 w3-center w3-grey">11</div>
<div class = "w3-col m1 w3-center">12</div>
</div>
<div class = "w3-row">
<div class = "w3-col w3-container m4 l3 w3-yellow">
<p>This text will use 12 columns on a small screen, 4 on a medium screen (m4), and 3 on a large screen (l3).</p>
</div>
<div class = "w3-col w3-container s4 m8 l9">
<p>This text will use 4 columns on a small screen (s4), 8 on a medium screen (m8), and 9 on a large screen (l9).</p>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có một CSS rất đẹp và đáp ứng để thiết kế biểu mẫu. CSS sau được sử dụng:
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-group Đại diện cho một vùng chứa có viền. Có thể được sử dụng để nhóm một nhãn và đầu vào. |
| 2 | w3-input Làm đẹp một điều khiển đầu vào. |
| 3 | w3-label Làm đẹp nhãn. |
| 4 | w3-checkbox w3-checkmark Làm đẹp hộp kiểm / nút radio. |
Thí dụ
w3css_forms.htm
<html>
<head>
<title>The W3.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body>
<form class = "w3-container w3-card-8">
<div class = "w3-group">
<input class = "w3-input" type = "text" style = "width:90%" required>
<label class = "w3-label">User Name</label>
</div>
<div class = "w3-group">
<input class = "w3-input" type = "text" style = "width:90%" required>
<label class = "w3-label">Email</label>
</div>
<div class = "w3-group">
<textarea class = "w3-input" style = "width:90%" required></textarea>
<label class = "w3-label">Comments</label>
</div>
<div class = "w3-row">
<div class = "w3-half">
<label class = "w3-checkbox">
<input type = "checkbox" checked = "checked">
<div class = "w3-checkmark"></div> Married
</label>
<br>
<label class = "w3-checkbox">
<input type = "checkbox">
<div class = "w3-checkmark"></div> Single
</label>
<br>
<label class = "w3-checkbox">
<input type = "checkbox" disabled>
<div class = "w3-checkmark"></div> Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class = "w3-half">
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "male" checked>
<div class = "w3-checkmark"></div> Male
</label>
<br>
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "female">
<div class = "w3-checkmark"></div> Female
</label>
<br>
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "female" disabled>
<div class = "w3-checkmark"></div> Don't know (Disabled)
</label>
</div>
</div>
</form>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có một CSS rất đẹp và đáp ứng để tùy chỉnh giao diện của một nút. CSS sau được sử dụng:
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-btn Đại diện cho một nút tiêu chuẩn. Cũng có thể được sử dụng để tạo kiểu cho một liên kết dưới dạng nút. |
| 2 | w3-btn-floating Đại diện cho một nút nổi có thiết kế hình tròn. |
| 3 | w3-btn-floating-large Đại diện cho một nút nổi lớn. |
Thí dụ
w3css_buttons.htm
<html>
<head>
<title>The W3.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>Standard Buttons</h2>
<button class = "w3-btn">Click Me</button>
<button class = "w3-btn w3-teal">Click Me</button>
<button class = "w3-btn w3-disabled">I am disabled</button>
<h2>Links as Buttons</h2>
<a class = "w3-btn">Link</a>
<a class = "w3-btn w3-teal">Link</a>
<a class = "w3-btn w3-disabled">Disabled Link</a>
<h2>Floating Buttons</h2>
<a class = "w3-btn-floating">+</a>
<a class = "w3-btn-floating w3-teal">+</a>
<a class = "w3-btn-floating w3-disabled">+</a>
<h2>Large Floating Buttons</h2>
<a class = "w3-btn-floating-large">+</a>
<a class = "w3-btn-floating-large w3-teal">+</a>
<a class = "w3-btn-floating-large w3-disabled">+</a>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS hỗ trợ một loại chú giải công cụ khác bằng cách sử dụng lớp chú giải công cụ w3. Hãy xem ví dụ sau. Ở đây, chúng tôi đã đặt một tooltiptext trong div và một hình ảnh và áp dụng w3- tooltip trên div chính.
<div class = "w3-tooltip">
<div class = "w3-text w3-container w3-teal" style = "width:255px;">
<p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
</div>
<div>
<img src = "html5-mini-logo.jpg" alt = "html5">
</div>
</div>Thí dụ
w3css_tooltips.htm
<html>
<head>
<title>The W3.CSS Tooltips</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>Hover Demo</h2>
<div class = "w3-tooltip">
<div class = "w3-text w3-container w3-teal" style = "width:255px;">
<p>Learn HTML5 in simply easy way @TutorialsPoint.com</p>
</div>
<div>
<img src = "html5-mini-logo.jpg" alt = "html5">
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có thể được sử dụng để hiển thị hộp thoại phương thức có thể tùy chỉnh thay vì cảnh báo JavaScript tiêu chuẩn.
Nó sử dụng các lớp kiểu w3-row và w3-col để xác định các hàng và cột tương ứng.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | modal-dialog Đại diện cho cửa sổ cha chính để xác định một hộp thoại. |
| 2 | w3-modal-dialog Đại diện cho vùng chứa nội dung hộp thoại. |
| 3 | w3-modal-content Trình bày nội dung hộp thoại. |
Thí dụ
w3css_modal_dialog.htm
<html>
<head>
<title>The W3.CSS Modal dialog</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>Modal dialog Demo</h2>
<a class = "w3-btn w3-teal" href = "#model-dialog">Open a Modal dialog</a>
<div id = "model-dialog" class = "w3-modal">
<div class = "w3-modal-dialog">
<div class = "w3-modal-content w3-card-8">
<header class = "w3-container w3-teal">
<a href = "#" class = "w3-closebtn">×</a>
<h2>TutorialsPoint</h2>
</header>
<div class = "w3-container">
<p>Hello World!</p>
</div>
<footer class = "w3-container w3-teal">
<p>@TutorialsPoint.COM</p>
</footer>
</div>
</div>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có thể được sử dụng để hiển thị các loại bảng khác nhau bằng nhiều kiểu khác nhau trên w3-table.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-table Đại diện cho một bảng cơ bản không có bất kỳ đường viền nào. |
| 2 | w3-striped Hiển thị một bảng đã loại bỏ. |
| 3 | w3-bordered Vẽ một bảng có đường viền giữa các hàng. |
| 4 | w3-border Vẽ một bảng có đường viền. |
| 5 | w3-card Rút ra một bảng dưới dạng một thẻ. |
| 6 | w3-responsive Vẽ một bảng đáp ứng để hiển thị thanh cuộn ngang, nếu màn hình quá nhỏ để hiển thị nội dung. |
| 7 | w3-tiny Vẽ một bảng với phông chữ rất nhỏ. |
| số 8 | w3-small Vẽ một bảng với phông chữ nhỏ. |
| 9 | w3-large Vẽ một bảng với phông chữ lớn. |
| 10 | w3-xlarge Vẽ một bảng với phông chữ cực lớn. |
| 11 | w3-xxlarge Vẽ một bảng với phông chữ rất lớn. |
| 12 | w3-xxxlarge Vẽ một bảng với phông chữ cực lớn rất cao. |
| 13 | w3-jumbo Vẽ một bảng với phông chữ lớn jumbo. |
Thí dụ
w3css_tables.htm
<html>
<head>
<title>The W3.CSS Tables</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>Tables Demo</h2>
<hr/>
<h3>Simple Table</h3>
<table class = "w3-table">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Stripped Table with borders</h3>
<table class = "w3-table w3-striped w3-bordered w3-border">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<hr/>
<h3>Table as Card</h3>
<table class = "w3-table w3-card-4">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
<h3>Responsive table</h3>
<div class = "w3-responsive">
<table class = "w3-table w3-card-4">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Data #1</th>
<th>Data #2</th>
<th>Data #3</th>
<th>Data #4</th>
<th>Data #5</th>
<th>Data #6</th>
<th>Data #7</th>
<th>Data #8</th>
<th>Data #9</th>
<th>Data #10</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
<h3>Table with very small font</h3>
<table class = "w3-table w3-tiny">
<thead>
<tr>
<th>Student</th>
<th>Class</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mahesh Parashar</td>
<td>VI</td>
<td>A</td>
</tr>
<tr>
<td>Rahul Sharma</td>
<td>VI</td>
<td>B</td>
</tr>
<tr>
<td>Mohan Sood</td>
<td>VI</td>
<td>A</td>
</tr>
</tbody>
</table>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có thể được sử dụng để hiển thị các loại danh sách khác nhau bằng các kiểu khác nhau trên w3-ul.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-ul Đại diện cho một danh sách cơ bản không có bất kỳ đường viền nào. |
| 2 | w3-striped Hiển thị danh sách bị loại bỏ. |
| 3 | w3-bordered Vẽ một danh sách có đường viền giữa các hàng. |
| 4 | w3-border Vẽ một danh sách có đường viền. |
| 5 | w3-card Vẽ một danh sách dưới dạng một thẻ. |
| 6 | w3-tiny Vẽ một danh sách với phông chữ rất nhỏ. |
| 7 | w3-small Vẽ một danh sách với phông chữ nhỏ. |
| số 8 | w3-large Vẽ một danh sách với phông chữ lớn. |
| 9 | w3-xlarge Vẽ một danh sách với phông chữ cực lớn. |
| 10 | w3-xxlarge Vẽ một danh sách với phông chữ rất lớn. |
| 11 | w3-xxxlarge Vẽ một danh sách với phông chữ cực lớn rất cao. |
| 12 | w3-jumbo Vẽ một danh sách với phông chữ lớn jumbo. |
Thí dụ
w3css_lists.htm
<html>
<head>
<title>The W3.CSS Lists</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>List Demo</h2>
<hr/>
<h3>Simple List</h3>
<ul class = "w3-ul">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
<h3>Stripped List with borders</h3>
<ul class = "w3-ul w3-striped w3-bordered w3-border">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
<h3>List as Card</h3>
<ul class = "w3-ul w3-card-4">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
<h3>List with very small font</h3>
<ul class = "w3-ul w3-tiny">
<li>Mahesh Parashar</li>
<li>Rahul Sharma</li>
<li>Mohan Sood</li>
</ul>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS cung cấp các tùy chọn để hiển thị hình ảnh theo những cách đẹp mắt và thú vị bằng cách sử dụng w3-image làm lớp chính.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-image Thể hiện một hình ảnh được tạo kiểu cơ bản không có bất kỳ đường viền nào. |
| 2 | w3-circle Hiển thị hình ảnh trong vòng kết nối |
| 3 | w3-title Được sử dụng để đặt văn bản trên một hình ảnh. |
| 4 | w3-card Vẽ một hình ảnh dưới dạng thẻ. |
Thí dụ
w3css_images.htm
<html>
<head>
<title>The W3.CSS Images</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>Images Demo</h2>
<hr/>
<h3>Simple Image</h3>
<div class = "w3-image">
<img src = "html5-mini-logo.jpg" alt = "html5">
</div>
<h3>Circled Image</h3>
<div class = "w3-image">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
</div>
<h3>Text over image</h3>
<div class = "w3-image"><img src = "html5-mini-logo.jpg" alt = "html5">
<div class = "w3-title w3-text-black">Learn HTML5</div>
</div>
<h3>Image as a card</h3>
<div class = "w3-image">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-card-4">
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS hỗ trợ các thư viện biểu tượng phổ biến sau:
Biểu tượng phông chữ tuyệt vời
Biểu tượng tài liệu của Google
Biểu tượng Bootstrap
Sử dụng
Để sử dụng một biểu tượng, hãy đặt tên của biểu tượng trong lớp của một phần tử <i> HTML. Để kiểm soát kích thước của một biểu tượng, bạn có thể sử dụng các lớp sau:
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-tiny Vẽ một biểu tượng có kích thước rất nhỏ. |
| 2 | w3-small Vẽ một biểu tượng có kích thước nhỏ. |
| 3 | w3-large Vẽ một biểu tượng có kích thước lớn. |
| 4 | w3-xlarge Vẽ một biểu tượng có kích thước cực lớn. |
| 5 | w3-xxlarge Vẽ một biểu tượng có kích thước rất lớn. |
| 6 | w3-xxxlarge Vẽ một biểu tượng có kích thước cực lớn rất cao. |
Thí dụ
w3css_icons.htm
<html>
<head>
<title>The W3.CSS Icons</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body class = "w3-container">
<h2>Icons Demo</h2>
<hr/>
<h3>Font Awesome Icon Demo</h3>
<i class = "fa fa-cloud"></i>
<i class = "fa fa-cloud w3-large"></i>
<i class = "fa fa-cloud w3-xlarge"></i>
<i class = "fa fa-cloud w3-xxlarge"></i>
<i class = "fa fa-cloud w3-xxxlarge"></i>
<i class = "fa fa-cloud w3-text-teal" style = "font-size:64px"></i>
<h3>Google Material Design Icon Demo</h3>
<i class = "material-icons w3-large">cloud</i>
<i class = "material-icons">cloud</i>
<i class = "material-icons w3-xlarge">cloud</i>
<i class = "material-icons w3-xxlarge">cloud</i>
<i class = "material-icons w3-xxxlarge">cloud</i>
<i class = "material-icons w3-text-teal" style = "font-size:64px">cloud</i>
<h3>Bootstrap Icon Demo</h3>
<i class = "glyphicon glyphicon-cloud"></i>
<i class = "gclass = "glyphicon glyphicon-cloud w3-large"></i>
<i class = "glyphicon glyphicon-cloud w3-xlarge"></i>
<i class = "glyphicon glyphicon-cloud w3-xxlarge"></i>
<i class = "glyphicon glyphicon-cloud w3-xxxlarge"></i>
<i class = "glyphicon glyphicon-cloud w3-text-teal" style = "font-size:64px"></i>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS hỗ trợ một tập hợp các lớp màu phong phú. Các lớp màu này được lấy cảm hứng và phát triển dựa trên các màu được sử dụng trong tiếp thị, biển báo và ghi chú.
w3-red
w3-pink
w3-purple
w3-deep-purple
w3-indigo
w3-blue
w3-light-blue
w3-cyan
w3-teal
w3-green
w3-light-green
w3-lime
w3-khaki
w3-yellow
w3-amber
w3-orange
w3-deep-orange
w3-blue-grey
w3-brown
w3-light-grey
w3-grey
w3-dark-grey
w3-black
Chủ đề màu sắc
W3.CSS cung cấp hỗ trợ tuyệt vời cho việc áp dụng một chủ đề cho một trang web bằng cách sử dụng chủ đề miền công cộng css. Một số ví dụ được đưa ra dưới đây:
| Sơ không. | Tên và mô tả CSS |
|---|---|
| 1 | w3-theme-indigo.css CSS có màu biến thể Indigo |
| 2 | w3-theme-red.css CSS có màu biến thể Đỏ |
Để sử dụng các chủ đề, hãy chuyển đến https://www.w3schools.com/w3css/w3css_downloads.asp để tải xuống tệp CSS cần thiết.
Thí dụ
w3css_colors.htm
<html>
<head>
<title>The W3.CSS Color Themes</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
<link rel = "stylesheet" href = "css/w3-theme-red.css">
</head>
<body class = "w3-container">
<h2>Color Theme Demo</h2>
<hr/>
<div class = "w3-card-4">
<div class = "w3-container w3-theme w3-card-2">
<h1>Red Colored Theme</h1>
</div>
<div class = "w3-container w3-text-theme">
<h2>w3-text-theme - Theme for Text</h2>
</div>
<ul class = "w3-ul w3-border-top">
<li class = "w3-theme-l5" style = "position:relative">
<a class = "w3-btn-floating-large w3-theme-action w3-right"
style = "position:absolute;top:-28px;right:16px;">+</a>
<p>Using w3-theme-l5 / w3-theme-light style</p>
</li>
<li class = "w3-theme-l4"><p>Using w3-theme-l4 style</p></li>
<li class = "w3-theme-l3"><p>Using w3-theme-l3 style</p></li>
<li class = "w3-theme-l2"><p>Using w3-theme-l2 style</p></li>
<li class = "w3-theme-l1"><p>Using w3-theme-l1 style</p></li>
<li class = "w3-theme"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d1"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d2"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d3"><p>Using w3-theme style</p></li>
<li class = "w3-theme-d4"><p>Using w3-theme style</p></li>
</ul>
</div>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có một số lớp đặc biệt để hiển thị thanh điều hướng hoặc menu trên trang web một cách nhanh chóng.
| Sơ không. | Tên & Mô tả Lớp học |
|---|---|
| 1 | w3-topnav Tạo kiểu danh sách dưới dạng menu ngang / thanh điều hướng. |
| 2 | w3-sidenav Tạo kiểu danh sách dưới dạng menu / thanh điều hướng dọc. |
Thí dụ
w3css_navigation.htm
<html>
<head>
<title>The W3.CSS Navigation</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
<link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body class = "w3-container">
<h2>Navigation Demo</h2>
<hr/>
<h3>Horizontal top navigation bar</h3>
<nav class = "w3-topnav w3-red">
<a href="#">Home</a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
<h3>Using font awesome icons</h3>
<nav class = "w3-topnav w3-red">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
<h3>Using material icons</h3>
<nav class = "w3-topnav w3-red">
<a href="#"><i class="material-icons">home</i></a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
<h3>Using Side Navigation</h3>
<nav class = "w3-sidenav w3-red w3-card-2" style="width:25%">
<a href="#">Home</a>
<a href="#">Overview</a>
<a href="#">Environment</a>
<a href="#">Containers</a>
<a href="#">Grids</a>
</nav>
</body>
</html>Kết quả
Xác minh kết quả.
W3.CSS có một số lớp tiện ích rất hữu ích cho nhu cầu thiết kế hàng ngày.
Color utility classes - Ví dụ: w3-red, w3-yellow
Padding utility classes - Ví dụ: w3-padding-jumbo, w3-padding-16
Margin utility classes - Ví dụ: w3-margin-8, w3-margin-64
Border utility class - Ví dụ: w3-border-left, w3-border-right
Size utility classes - Ví dụ: w3-tiny, w3-small
Circle utility class - Ví dụ: w3-circle
Center utility class - Ví dụ: w3-center
Thí dụ
w3css_utilities.htm
<html>
<head>
<title>The W3.CSS Utilities</title>
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://www.w3schools.com/lib/w3.css">
</head>
<body class = "w3-container">
<h2>W3.CSS Utilities</h2>
<hr/>
<h3>Color Utilities Demo</h3>
<div class = "w3-container w3-red">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-green">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Padding Utilities Demo</h3>
<div class = "w3-container w3-red w3-padding-jumbo">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-green w3-padding-16">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Margin Utilities Demo</h3>
<div class = "w3-container w3-margin-64">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-margin-8">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Border Utilities Demo</h3>
<div class = "w3-container w3-red w3-border-left w3-border-right">
<p>The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality.</p>
</div>
<div class = "w3-container w3-green w3-border">
<p>The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.</p>
</div>
<h3>Size Utilities Demo</h3>
<div class = "w3-container">
<p class = "w3-small">Using w3-small font.</p>
<p>Using Default (medium).</p>
<p class = "w3-large">Using w3-large font.</p>
<p class = "w3-xlarge">Using w3-xlarge font.</p>
</div>
<h3>Circle Utility Demo</h3>
<div class = "w3-container">
<img src = "html5-mini-logo.jpg" alt = "html5" class = "w3-circle">
</div>
<h3>Center Utility Demo</h3>
<div class = "w3-container w3-center w3-black w3-card-2">
<img src = "html5-mini-logo.jpg" class = "w3-circle" alt = "html5">
</div>
</body>
</html>Kết quả
Xác minh kết quả.