Sử dụng Biểu định kiểu CSS
Thay đổi điều này:
<link rel="stylesheet" href="">
Về điều này:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Để sử dụng biểu định kiểu, bạn phải thêm một lớp vào các phần tử HTML mà bạn muốn định kiểu:
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Bộ xương HTML / CSS
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="w3-container w3-black">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>
Nhấp vào nút "Hãy tự mình thử" để xem nó hoạt động như thế nào!
Cố gắng thay đổi màu nền của thùng chứa từ màu xanh mòng két sang màu đen.
Bạn đã làm cho nó?
Xin chúc mừng!
Bạn vừa học những kiến thức cơ bản về cách sử dụng bảng định kiểu.
Tiếp tục đọc!
Làm thế nào để trở nên phản ứng
Mã HTML
<div class="w3-row">
<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>
</div>
Cách tạo thẻ
Sẵn sàng cho một cái gì đó thực sự tiên tiến?
Làm thế nào về một Danh thiếp trong HTML?
Bao gồm cả hình ảnh và văn bản.
Play with the code below for a while, until you think you got a grip on it.
After that, we will start coding really fantastic HTML pages.
John Doe
Engineer
HTML Code
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>