Học HTML - Định dạng tập tin HTML với Style

HTML và các thẻ định dạn văn bản luôn đi kèm nhau. Chúng bổ trợ cho nhau rất nhiều. Việc định dạng văn bản hay layout của HTML chúng ta sẽ sử dụng thẻ style.

Cấu trúc viết của thẻ < style> sẻ là: <tên thẻ style=”tên thuộc tính: giá trị”>
Bạn có thể thấy ví dụ ở trên: <style=”background-color: green”>

MÀU CHỮ
Để thiết lập màu chữ cho đoạn văn bản trong tập tin HTML, bạn có thể sử dụng thuộc tính <color>. Giá trị của nó là tên màu trong tiếng Anh hoặc mã màu HEX.

<span style="color: green">chữ màu xanh</span>

MÀU NỀN
Màu nền có cách khai báo hoàn toàn giống màu chữ, tức là bạn có thể dùng giá trị là tên màu trong tiếng Anh hoặc mã màu HEX.

Tên thuộc tính của màu nền là <background-color>.
<span style="background-color: green">Màu nền: màu green</span>

KÍCH THƯỚC CHỮ
Trong HTML kích thước chữ bạn có thể sử dụng thuộc tính <font-size> và giá trị là số kèm đơn vị. Bạn có thể sử dụng đơn vị px, %, pt hoặc em tùy thích, đơn giản nhất là dùng px.

<span style="font-size: 18px">Chữ có kích thước 18px</span>

FONT CHỮ
Nếu bạn có nhu cầu sử dụng font chữ khác so với font chữ mặc định thì hãy dùng thuộc tính<font-family> với giá trị là tên font chữ có trên máy tính.

Một số tên font chữ phổ biến nhất là: Arial, Helvetica, Time New Roman, Verdana, Tahoma… Chúng phổ biến vì mặc định máy tính đã có các font này, nên bạn không cần thực hiện embed font cho trình duyệt.

<span style="font-family: verdana">Font chữ Verdana</span>

Ngoài ra bạn có thể thêm font chữ dự phòng bằng cách khai báo nhiều tên font chữ khác nhau được ngăn cách bởi dấu phẩy, ví dụ:

<span style="font-family: Helvetica, Arial, Tahoma">Font chữ Helvetica, nếu trong máy tính bạn không có fonts Helvetica thì trình duyệt sẻ lấy font Arial để hiển thị</span>

Có nghĩa là nếu máy người đọc không có font chữ Helvetica thì trình duyệt sẽ sử dụng font tiếp theo chữ Arial, và cứ thế đến khi nào máy tính nhận được font-family đã được cài đặt trong máy tính.

CANH LỀ VĂN BẢN
Để canh lề cho văn bản text, chúng ta sử dụng thuộc tính <text-align> với giá trị là left, center, right hoặcjustify.

<span style="text-align: center">Canh giữa văn bản</span>