Giới thiệu
Tag <style> trong HTML được sử dụng để định dạng và tùy chỉnh kiểu dáng của các phần tử trên trang web. Nó cho phép bạn thay đổi màu sắc, kích thước, font chữ và nhiều thuộc tính khác của các phần tử HTML.
Cách sử dụng tag style
Có hai cách chính để sử dụng tag <style>:
- Inline style: Bạn có thể thêm thuộc tính
styletrực tiếp vào một phần tử HTML. Ví dụ:
<p style="color: blue; font-size: 18px;">Đây là một đoạn văn có màu xanh và kích thước chữ là 18px.</p>
- Internal style sheet: Bạn có thể đặt tag
<style>trong phần<head>của trang web để áp dụng kiểu dáng cho nhiều phần tử. Ví dụ:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>Đây là một đoạn văn có màu xanh và kích thước chữ là 18px.</p>
</body>
Ví dụ và giải thích
Dưới đây là một ví dụ về cách sử dụng tag <style> để tạo kiểu dáng cho một trang web:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
color: #333333;
text-align: center;
}
p {
color: #666666;
font-size: 16px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Chào mừng đến với trang web của chúng tôi!</h1>
<p>Đây là một đoạn văn bình thường.</p>
<p class="highlight">Đây là một đoạn văn được làm nổi bật.</p>
</body>
</html>
Trong ví dụ trên, chúng ta đã sử dụng tag <style> để định dạng kiểu dáng cho trang web. Cụ thể:
bodycó màu nền #f2f2f2 và sử dụng font chữ Arial hoặc các font chữ không có serif.h1có màu chữ #333333 và được căn giữa.pcó màu chữ #666666 và kích thước chữ là 16px..highlightcó màu nền vàng và được làm đậm.
Kết quả là trang web sẽ có màu nền nhạt, các tiêu đề và đoạn văn được định dạng một cách thẩm mỹ và đoạn văn được làm nổi bật sẽ có màu nền vàng và được làm đậm.
Tag <style> là một công cụ mạnh mẽ để tùy chỉnh kiểu dáng trang web của bạn. Bằng cách sử dụng các thuộc tính và giá trị khác nhau, bạn có thể tạo ra các trang web độc đáo và hấp dẫn.