Thẻ link
Thẻ link kết nối các tệp CSS vào trang
HTML. Ngoài ra, link cũng kết nối
một số tệp khác, ví dụ như favicon.
(Favicon là biểu tượng nhỏ của trang web, có thể
nhìn thấy trên tab trình duyệt. Nó cũng có thể được
thấy trong một số công cụ tìm kiếm khi tìm kiếm
đối diện với các trang web, ví dụ như trong Yandex).
Thẻ này có rất nhiều thuộc tính và chúng có thể nhận nhiều giá trị khác nhau, tuy nhiên trong thực tế hầu như tất cả chúng đều không được sử dụng. Phổ biến nhất là việc kết nối CSS và thêm favicon.
Cách kết nối CSS:
<link rel="stylesheet" href="style.css">
Cách kết nối favicon:
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
Thẻ link không yêu cầu thẻ đóng.
Thuộc tính
| Thuộc tính | Mô tả |
|---|---|
href |
Đường dẫn đến tệp cần kết nối. |
media |
Loại thiết bị mà tệp nên được kết nối. Ý nghĩa là - bạn có thể kết nối tệp CSS chỉ cho màn hình lớn (giá trị screen)
hoặc chỉ cho màn hình nhỏ: cho điện thoại di động hoặc máy tính bảng (giá trị handheld).
Các giá trị có thể: all, braille, handheld, print, screen, speech, projection, tty, tv.
Xem chi tiết bên dưới.
|
rel |
Loại tệp được kết nối.
Các giá trị có thể: stylesheet | alternate.
Giá trị stylesheet chỉ ra rằng đang kết nối tệp CSS,
giá trị alternate được sử dụng, ví dụ, để chỉ định liên kết
đến tệp định dạng XML mô tả nguồn cấp tin tức, thông báo bài viết.
|
charset |
Mã hóa của tệp được kết nối.
Hiện nay, tiêu chuẩn là utf-8.
|
type |
Loại dữ liệu của tệp được kết nối. |
Giá trị của thuộc tính media
Trong HTML5, các truy vấn phương tiện có thể được chỉ định làm giá trị.
| Giá trị | Mô tả |
|---|---|
all |
Tất cả các thiết bị. |
screen |
Màn hình máy tính. |
handheld |
Điện thoại, smartphone, thiết bị có màn hình nhỏ. |
braille |
Thiết bị dựa trên hệ thống chữ nổi Braille, dành cho người khiếm thị. |
speech |
Bộ tổng hợp giọng nói, cũng như các chương trình đọc văn bản thành tiếng. Cũng bao gồm các trình duyệt bằng giọng nói. |
print |
Máy in. |
projection |
Máy chiếu. |
tty |
Máy teletype, thiết bị đầu cuối, thiết bị di động với khả năng hiển thị màn hình hạn chế. Không nên sử dụng pixel làm đơn vị đo lường cho chúng. |
tv |
Tivi, có thể mở trang web (cũng có trường hợp như vậy). |
Giá trị mặc định: all.
Ví dụ
Hãy xem cấu trúc của một trang HTML đơn giản, chúng ta sẽ thêm việc kết nối các tệp CSS và favicon:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="style2.css" media="screen">
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
