Chúng ta sẽ thảo luận vài thuộc tính định dạng trong CSS
CSS Colors
Màu trong HTML được chỉ định bằng tên màu (Color Names) hoặc bằng các giá trị RGB, HEX...Cấu trúc:
tag {
color: giá trị;
}
Tham khảo bảng sau
|
Định dạng |
Cú pháp |
Ví dụ |
|
Hex Code |
#RRGGBB |
p{color:#FF0000;} |
|
Short Hex Code |
#RGB |
p{color:#6A7;} |
|
RGB(dạng %) |
rgb(rrr%,ggg%,bbb%) |
p{color:rgb(50%,50%,50%);} |
|
RGB (tuyệt đối) |
rgb(rrr,ggg,bbb) |
p{color:rgb(0,0,255);} |
|
Tên màu |
blue, black, etc. |
p{color:red;} |
- Giá trị theo hệ thập lục phân (HEX): gồm dấu "#" kết hợp với dãy ký tự latin (chỉ bao gồm số hoặc chữ). Ví dụ: color: #ff0000;
- Giá trị theo kết hợp màu RGB: Đây là dạng kết hợp của 3 loại màu, màu đỏ (Red), màu xanh lá (Green), màu xanh dương (Blue). Ví dụ: color: rgb(255,0,0); // chuỗi giá trị từ 0 tới 255
- Giá trị theo tên tiếng anh: tên màu viết bằng tiếng anh. Ví dụ: color: red;
Tham khảo các màu cùng với giá trị Hex và RGB.
Chúng ta sử dụng màu cho Background Color, Text Color, Border Color và có thể sử dụng Hex, RGB hay Color Names đều được. Ví dụ sau sẽ cho chúng ta cái nhìn tổng thể về điều đó.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:Orange;">Text color màu Cam</h1>
<h1 style="color:#00CED1;">Text color màu Xanh</h1>
<h1 style="color:rgb(238, 130, 238);">Text color màu Tím</h1>
<h1 style="border:2px solid Violet;">Border color màu Tím</h1>
<h1 style="background-color:#FFD700;">Background color màu Vàng</h1>
</body>
</html>
Sử dụng OnlineGDB, chúng ta thực thi mã HTML
Mã HTML trên chỉ nhằm mục đích cho thấy rằng chúng ta có thể sử dụng bất cứ cách nào Color names, Hex hay RGB đều được. Khi làm thực tế, bạn nên thống nhất một kiểu chứ đừng theo phong cách...tào lao như vậy!
CSS Font Size
CSS font-size được dùng để định dạng cỡ chữ của đoạn văn bản.
Cấu trúc
tag {
font-size: giá trị;
}
Thay đổi kích thước văn bản là điều quan trọng trong thiết kế web. Tuy nhiên, không nên sử dụng các điều chỉnh kích thước phông chữ để làm cho các đoạn văn trông giống như tiêu đề hoặc tiêu đề trông giống như các đoạn văn. Luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho tiêu đề và <p> cho các đoạn văn. Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1>Tiêu đề sử dụng H1</h1>
<p style="font-size: 55px;">Không nên dùng</p>
<p>Một đoạn văn bản thông thường</p>
<p style="font-size: 25px;">Thay đổi font size</p>
</body>
</html>
Bấm Run để thực thi mã HTML
CSS Font Family
CSS font-family được dùng để định dạng kiểu chữ cho đoạn văn bản.
Cấu trúc
tag {
font-family: kiểu chữ;
}
Trong CSS có năm họ font chữ chung:
- Serif có nét nhỏ ở rìa mỗi chữ cái. Chúng tạo cảm giác trang trọng và thanh lịch.
- Sans-serif có các đường nét rõ ràng (không có nét nhỏ kèm theo). Chúng tạo ra vẻ hiện đại và tối giản.
- Monospace - ở đây tất cả các chữ cái đều có cùng chiều rộng cố định. Chúng tạo ra vẻ máy móc.
- Cursive fonts - chữ viết tay mô phỏng chữ viết tay của con người.
- Fantasy là font chữ trang trí, vui tươi.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">Đoạn văn bản dùng Times New Roman font.</p>
<p class="p2">Đoạn văn bản dùng Arial font.</p>
<p class="p3">Đoạn văn bản dùng Lucida Console font.</p>
</body>
</html>
Bấm Run để thực thi mã HTML. Lưu ý có những font không hỗ trợ tiếng Việt.
Không có nhận xét nào:
Đăng nhận xét