Thẻ style trong HTML-1

Thẻ style trong HTML

Anh NguyễnBạn nghĩ gì về bài viết này?

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:

printChế độ xem trước khi in và sau khi in thành trang giấy
handheldCác thiết bị cầm tay, màn hình nhỏ
projectionMáy chiếu
screenMà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.

Bình luận