Vùng chứa W3.CSS
Đây là Tiêu đề của tôi
Đây là bài báo của tôi
Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu. Bài báo này có màu xám nhạt và chữ màu nâu.
Đây là Chân trang của tôi
Lớp Container
Lớp w3-container thêm phần đệm trái và phải 16px vào bất kỳ phần tử HTML nào.
Lớp w3-container là lớp hoàn hảo để sử dụng cho tất cả các phần tử vùng chứa HTML như:
<div>, <article>, <section>, <header>, <footer>, <form> và hơn thế nữa.
Container cung cấp sự bình đẳng
Vùng chứa w3 cung cấp sự bình đẳng cho tất cả các phần tử vùng chứa HTML:
- Biên lợi nhuận chung
- Đệm phổ biến
- Căn chỉnh chung
- Phông chữ phổ biến
- Màu sắc phổ biến
Để sử dụng một vùng chứa, chỉ cần thêm một lớp w3-container vào bất kỳ phần tử nào:
Thí dụ
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Để thêm màu, chỉ cần thêm lớp màu w3 :
Thí dụ
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Đầu trang và Chân trang
Lớp w3-container có thể được sử dụng để tạo kiểu cho các tiêu đề:
Tiêu đề
Thí dụ
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Thí dụ
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Không có sự khác biệt trong cách W3.CSS xử lý các phần tử <div> và <header>.
Lớp w3-container có thể được sử dụng để tạo kiểu cho footer:
Thí dụ
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Thí dụ
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Nhiều trang web sử dụng phần tử <div> thay vì phần tử <header> và <footer>.
Bài báo và Phần
Lớp w3-container có thể được sử dụng để tạo kiểu cho các phần tử <article> và <section>:
Thí dụ
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Nhiều trang web sử dụng phần tử <div> thay vì phần tử <article> và <section>.
Ví dụ về trang web
Tiêu đề
Ô tô là phương tiện giao thông có bánh, có động cơ tự chạy. Hầu hết các định nghĩa của thuật ngữ chỉ rõ rằng ô tô được thiết kế để chạy chủ yếu trên đường. (Wikipedia)
Ví dụ sử dụng các phần tử <div> của HTML
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
Ví dụ sử dụng các phần tử ngữ nghĩa HTML
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
Đệm container
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>