Thẻ <style> trong HTML

1) Thẻ <style> trong HTML

- Thẻ <style> được dùng để làm thùng chứa cho các đoạn mã CSS.

- Thẻ <style> có thể được đặt ở bất kỳ vị trí nào trong trang web. Tuy nhiên, nó thường được đặt bên trong phần tử <head>

- Trong một trang web có thể có nhiều thẻ <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>

Xem ví dụ

2) Các thuộc tính của thẻ <style>

- Thẻ <style> có hai thuộc tính cơ bản.

- Dưới đây là bảng mô tả sơ lược về hai thuộc tính đó:

type	Xác định loại nội dung được đặt bên trong cặp thẻ <style></style>
media	Xác định "loại thiết bị" sẽ được áp dụng đoạn mã CSS

2.1) 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>

2.2) 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:

print	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>

Xem ví dụ