HTML Styles - Các phong cách của HTML
Thuộc tính HTML style thường được dùng để thêm các phong cách vào một thành phần, như là màu, font, kích thước, và nhiều hơn nữa.
ví dụ
I am Red
I am Blue
I am Big<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Thuộc tính style trong HTML
Đặt phong cách của một thành phần HTML, có thể thực hiện với thuộc tính style .
Thuộc tính HTML style có các cú pháp sau:
<tagname style="property:value;">
property là một thuộc tính CSS. value là một giá trị CSS.
Bạn sẽ học về CSS sau.
Màu nền
Thuộc tính CSS background-color định nghĩa màu nền cho một thành phần HTML.
Ví dụ này đặt màu nền cho một trang thành xanh nhạt:
ví dụ
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body><!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Màu của văn bản
Thuộc tính CSS color định nghĩa màu văn bản cho một thành phần HTML:
ví dụ
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p><!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Phông chữ
Thuộc tính font-family trong CSS định nghĩa phông sẽ được sử dụng cho một thành phần HTML:
ví dụ
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p><!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
Cỡ chữ
Thuộc tính font-size trong CSS định nghĩa cỡ chữ cho một thành phần HTML:
ví dụ
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p><!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Căn chỉnh văn bản
Thuộc tính text-align trong CSS định nghĩa sự căn chỉnh văn bản theo chiều chiều ngang cho một thành phần HTML:
ví dụ
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p><!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
Tóm tắt chương
- Dùng thuộc tính
styleđể tạo kiểu cho các thành phần HTML - Dùng
background-colorcho màu nền - Dùng
colorcho màu chữ - Dùng
font-familycho phông chữ - Dùng
font-sizecho kích thước chữ - Dùng
text-aligncho căn chỉnh chữ
Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
