[HTML/HTML5] Phần 8: Phong cách HTML

218 lượt xem 
 Thể loại: HTML/HTML5, Thiết kế Web

Thiết lập phong cách của 1 phần tử HTML, có thể thực hiện với thuộc tính style. Thuộc tính style HTML có cú pháp sau:

<tagname style=”property:value;”>

Với propery là 1 thuộc tính CSSvalue là 1 giá trị CSS.

Màu nền HTML
Thuộc tính màu nền background-color HTML định nghĩa màu nền cho 1 phần tử. Ví dụ sau thiết lập màu nền màu pink (hồng) cho 1 trang web

<!DOCTYPE html>
<html>
<body style="background-color:pink;">

<h1>Đây là tiêu đề --- dammio.com</h1>
<p>Đây là 1 đoạn văn bản.</p>

</body>
</html>

Màu chữ HTML
Thuộc tính color định nghĩa màu văn bản cho 1 phần tử HTML.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Tiêu đề màu xanh.</h1>
<p style="color:red;">Đoạn văn bản màu đỏ.</p>

</body>
</html>

Font chữ HTML
Thuộc tính font-family định nghĩa font chữ cho 1 phần tử HTML.

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">Tiêu đề có kiểu chữ Verdana --- dammio.com</h1>
<p style="font-family:courier;">Đoạn văn bản có kiểu chữ Courier.</p>

</body>
</html>

Kích thước văn bản HTML
Thuộc tính font-size định nghĩa kích thước văn bản.

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:400%;">Đây là tiêu đề có kích thước 400% --- dammio.com</h1>
<p style="font-size:160%;">Đây là đoạn văn bản có kích thước 120%.</p>

</body>
</html>

Canh dòng văn bản
Thuộc tính text-align dùng để canh dòng đoạn văn bản ở các vị trí left (mặc định), right, center và justify (canh đều).

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Canh giữa --- dammio.com</h1>
<p style="text-align:right;">Canh phải.</p>

</body>
</html>

Kết luận: Bài viết giúp bạn nắm 1 số thuộc tính phong cách CSS cơ bản, để xây dựng 1 trang web trên thực tế, bạn cần nắm vững nhiều thuộc tính hơn nữa và thành thục trong việc áp dụng các phong cách này.

Bình luận Facebook

2
Để lại bình luận

avatar
1000
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of