Học HTML, Tất Cả Bài Viết, Tự Học Online

Trang trí trong HTML – Làm đẹp văn bản bằng HTML – Học HTML


Bạn muốn trang trí một trang HTML, làm đẹp cho 1 chữ hoặc một đoạn văn bản nhưng chưa biết cách. Trong bài viết này hãy cùng mình đi tìm hiểu về cách trang trí cho một trang HTML với một số thẻ cơ bản nhé.

Ví dụ:

Dòng chữ này màu Đỏ

Dòng chữ này màu Xanh

Chạy đoạn code sau để hiểu rõ hơn:

<!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>

Trang trí nền 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:

<!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>

Thuộc tính background-color 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:

style="thuộc tính: giá trị"

Thuộc tính và giá trị được quy định trong CSS.

Màu chữ trong HTML

Thuộc tính color dùng để định nghĩa màu chữ trong HTML:

<!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>

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:

<!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>

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 kích cỡ chữ được sử dụng trong HTML:

<!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>

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:

<!DOCTYPE html>
<html>
<body>
 
<h1 style="text-align:center">
Tiêu đề được căn giữa</h1>
 <br />
hoặc
<br />
<p><center>Đây là đoạn văn bản.</center></p>
 
</body>
</html>

Thẻ <center> để căn chỉnh mọi thứ chứa trong nó nằm ở vị trí trung tâm. Tương tự với left và right.

Thẻ Font trong HTML

Chạy ví dụ sau để hiểu rõ hơn:

<!DOCTYPE html>
<html>
<body>
 
<p>Đây là một <font color="red"> Ví Dụ </font></p>
 
</body>
</html>

Thẻ <font> để thay đổi thuộc tính của văn bản nằm trong nó.

Tổng kết:

Ở bài viết này chúng ta đã biết đến một số thuộc tính sau:

  • 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
  • Sử dụng thẻ font trong HTML

Nếu có bất kỳ thắc mắc hay góp ý gì về bài viết này hãy để lại bình luận cho tôi phía dưới nhé. Chúc bạn học tốt với HTML Online ^^

Tagged , , , , , , , , , , , , , , ,

About HoanTN

Cố gắng hơn nữa ....
View all posts by HoanTN →

Leave a Reply

Your email address will not be published. Required fields are marked *