NỘI DUNG BÀI VIẾT
Giới thiệu
Thẻ style trong HTML có tác dụng xác định thông tin về CSS cho tài liệu HTML.
Nội dung bên trong thẻ style chỉ định các phần tử HTML sẽ hiển thị như thế nào đối với trình duyệt.
Mỗi tài liệu HTML có thể chứa nhiều thẻ style. Tuy nhiên, nó thường được đặt bên trong phần tử <head>.
Cú pháp
<style> . . . <style>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
div{
font-size:30px;
}
p{
font-size:45px;
}
</style>
</head>
<body>
<span>Tài liệu học HTML</span>
<div>Tài liệu học CSS</div>
<style>
span{
font-size:20px;
}
</style>
<p>Tài liệu học JavaScript</p>
</body>
</html>
Kết quả:
Các thuộc tính được sử dụng trong thẻ style
Thẻ style có hai thuộc tính cơ bản: type, media.
Thuộc tính type
Thuộc tính type dùng để xác định loại nội dung được đặt bên trong cặp thẻ <style></style>, ví dụ:
<style type="text/css">
p {
font-size:30px;
}
</style>
Tuy nhiên, ở phiên bản HTML5 thì thuộc tính type đã không còn cần thiết nữa, ví dụ:
<style>
p {
font-size:30px;
}
</style>
Thuộc tính media
Thuộc tính media dùng để xác định “loại thiết bị” sẽ được áp dụng đoạn mã CSS.
Chúng ta có một số loại thiết bị cơ bản như sau:
| Chế độ xem trước khi in và sau khi in thành trang giấy | |
| handheld | Các thiết bị cầm tay, màn hình nhỏ |
| projection | Máy chiếu |
| screen | Màn hình máy tính |
Ví dụ: Bình thường, những phần tử <h1> sẽ có chữ màu đỏ. Tuy nhiên, ở chế độ xem trước khi in thì những phần tử <h1> sẽ có chữ màu xanh.
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
}
</style>
<style media="print">
h1{
color:green;
}
</style>
</head>
<body>
<h1>Tài liệu học lập trình web</h1>
<p>(Bạn hãy bấm tổ hợp phím Ctrl + P để thấy sự khác biệt nhé)</p>
</body>
</html>
Kết quả:
Kết luận
Qua đây là một số chia sẻ về thẻ style trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML.
Nguồn: http://webcoban.vn/html/the-style-la-gi-the-style-dung-lam-gi-cach-su-dung-the-style-trong-html.html
Các bạn có thể tham khảo các bài viết hay về HTML tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
