I. HTML Comments
Dùng để chèn đoạn nhận xét vào tài liệu HTML, hoặc có thể dùng để ẩn đi đoạn code không được sử dụng
<!-- Write your comments here -->
II. HTML Colors
Color Names
HTML hỗ trợ 140 màu ở dạng color name và rất rất nhiều màu ở dạng hex, rgb,...
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Xem chi tiết 140 màu tại đâyBackground Color
Chỉ định màu nền cho thành phần
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
Chỉ định màu chữ
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
Chỉ định màu viền
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
Như đã trình bày các giá trị cho màu có thể là chữ, HEX, RGB, HSL, HSLA, RGBA
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB Value
Màu này được xác định rgb(red, green, blue) tức đỏ, xanh lục và xanh nước biển, khoảng giá trị cho từng thành phần biến thiên từ 0 tới 255, số càng lớn thì cường độ màu càng mạnh và ngược lại
HEX Value
Đây gọi là màu thập lục phân sử dụng 6 chữ số để xác định màu theo form #rrggbb. Tương tự như màu RGB
HSL Value
Màu này sử dụng sắc, độ bão hòa và độ sáng theo công thức hsl(hue, saturation, lightness)
- Hue trong khoảng 0 tới 360, 0-đỏ, 120-xanh, 240-xanh da trời
- saturation từ 0% tới 100%, 0% có nghĩa là một bóng của màu xám, và 100% là màu sắc đầy đủ
- lightness cũng tương tự, 0% là màu đen, 50% không sáng hoặc tối, 100% trắng
RGBA Value
Màu này tương tự như RGB nhưng được bổ xung thêm thuộc tính A (Alpha) chỉ độ trong suốt của màu. A biến thiên từ 0 tới 1, càng tiến về 0 độ trong suốt càng tăng
HSLA Value
Tương tự được bổ sung thêm A để chỉnh độ trong suốt
III. HTML CSS
Trong HTML CSS có thể gọi đến bằng 3 cách
- Inline - bằng cách sử dụng thuộc tính style trong các phần tử HTML
- Nội bộ - bằng cách sử dụng thuộc tính style cho mỗi phần tử
- Bên ngoài - bằng cách sử dụng tệp CSS bên ngoài
Inline CSS
Được sử dụng bằng cách thêm style làm thuộc tính cho thẻ
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
Sử dụng <style> bên trong cặp thẻ <head>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
Gọi file CSS từ bên ngoài vào bằng thẻ <link>
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
CSS Fonts
Thuộc tính color xác định màu văn bản sẽ được sử dụng.
Thuộc tính font-family định nghĩa phông chữ sẽ được sử dụng.
Thuộc tính font-size xác định kích thước văn bản sẽ được sử dụng.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Tải tài nguyên css
Bạn có thể tải css từ nguồn trang khác thông qua thẻ link. Ví dụ
/* Tải tài nguyên từ nguồn khác */ <link rel="stylesheet" href="https://site.com/html/styles.css"> /* Tải tài nguyên local với file css và html cùng 1 thư mục */ <link rel="stylesheet" href="styles.css">
Đón đọc bài viết tiếp theo...
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên