Sử dụng Biểu định kiểu CSS
Thay đổi cai nay đi:
<link rel="stylesheet" href="">
Về điều này:
<link rel="stylesheet" href="https://www.example.com.vn/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 thành phần HTML mà bạn muốn tạo 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.example.com.vn/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>
Hãy nhấp vào nút "Tự mình thử" để xem nó hoạt động như thế nào!
Cố gắng thay đổi màu nền của vùng chứa từ màu xanh mòng két sang màu đen.
Bạn đã làm được nó phải không?
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 style sheet.
Hãy tiếp tục đọc!
Làm thế nào để phản ứng nhanh
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>
Hãy tự mình thử »Cách tạo thẻ
Sẵn sàng cho một cái gì đó thực sự tiên tiến?
Thế còn một tấm danh thiếp bằng HTML thì sao?
Bao gồm cả hình ảnh và văn bản.
Hãy chơi với mã bên dưới một lúc cho đến khi bạn nghĩ rằng mình đã nắm bắt được nó.
Sau đó, chúng ta sẽ bắt đầu viết mã các trang HTML thực sự tuyệt vời.
John Doe
Kỹ sư
Mã HTML
<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>
Hãy tự mình thử »