19/09/2018, 15:02
Trang trí trong HTML
Ví dụ: Dòng chữ này màu Đỏ Dòng chữ này màu Xanh Code: 1 2 3 4 5 6 7 8 9 < ! DOCTYPE html > < html > < body > < p style = "color:red" > D ò ng ch ữ ...
Ví dụ:
Dòng chữ này màu Đỏ
Dòng chữ này màu Xanh
Code:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body> <p style="color:red">Dòng chữ này màu Đỏ</p> <p style="color:blue">Dòng chữ này màu Xanh</p> </body> </html> |
Demo
Trang trí HTML
Các thành phần trong HTML đều có kiểu trang trí mặc định (nền màu trắng và chữ màu đen).
Bạn có thể thay đổi kiểu trang trí mặc định của một thành phần trong HTML bằng cách sử dụng thuộc tính style.
Ví dụ dưới đây thay đổi màu nền từ trắng sang xám sáng:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body style="background-color:lightgrey"> <h1>Đây là tiêu đề</h1> <p>Đây là đoạn văn bản.</p> </body> </html> |
Demo
Thuộc tính bgcolor chỉ được hỗ trợ trong phiên bản cũ của HTML, trong HTML5 thuộc tính này bị loại bỏ.
Thuộc tính style trong HTML
Thuộc tính style trong HTML có cú pháp như sau:
|
1 |
style="thuộc tính: giá trị" |
Thuộc tính và giá trị được quy định trong CSS
Bạn sẽ được học thêm về CSS ở bên dưới
Màu chữ trong HTML
Thuộc tính color dùng để định nghĩa màu chữ trong HTML:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <h1 style="color:blue">Đây là tiêu đề</h1> <p style="color:red">Đây là đoạn văn bản.</p> </body> </html> |
Demo
Kiểu chữ trong HTML
Thuộc tính font-family được sử dụng để thay đổi kiểu chữ của một thành phần trong HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana"> Đây là tiêu đề</h1> <p style="font-family:courier"> Đây là đoạn văn bản.</p> </body> </html> |
Demo
Thẻ <font> chỉ được hỗ trợ trong phiên bản cũ của HTML, trong HTML5 thẻ này bị loại bỏ.
Cỡ chữ trong HTML
Thuộc tính font-size quy định cỡ chữ được sử dụng trong HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h1 style="font-size:300%"> Đây là tiêu đề</h1> <p style="font-size:160%"> Đây là đoạn văn bản.</p> </body> </html> |
Demo
Căn lề văn bản trong HTML
Thuộc tính text-align được sử dụng để căn lề văn bản trong HTML:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body> <h1 style="text-align:center"> Tiêu đề được căn giữa</h1> <p>Đây là đoạn văn bản.</p> </body> </html> |
Demo
Thẻ <center> chỉ được hỗ trợ trong phiên bản cũ của HTML, trong HTML5 thẻ này bị loại bỏ.
Tóm tắt bài học
- Sử dụng thuộc tính style để trang trí các thành phần trong HTML
- Sử dụng background-color để thay đổi màu nền
- Sử dụng color để thay đổi màu chữ
- Sử dụng font-family để thay đổi kiểu chữ
- Sử dụng font-size để thay đổi cỡ chữ
- Sử dụng text-align để căn lề đoạn văn bản
