Web Cơ Bản

Thẻ <style> trong HTML

1) Thẻ <style> dùng để làm gì !?

- 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 sử dụng trong thẻ <style>

- Thẻ <style> có hai thuộc tính cơ bản: type, media

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ụ