5. Nhúng mã CSS vào file HTML
5.3.2.Sử dụng @import
Cú pháp <st yl e t ype="t ext/cs s "> @i mport u rl("UR L" ); … </style> Ví dụ:
Chú ý:
Nếu sử dụng thẻ <link> để khai báo CSS liên kết ngoài thì chỉ có 1 file CSS được sử dụng. Nếu phải sử dụng nhiều file CSS ngoài thì có thể khai báo như sau
<head>
<link rel="stylesheet" type="text/css" href="URL_1" title="cssTitle_1"/>
<link rel="alternate stylesheet" type="text/css" href="URL_2" title="cssTitle_2" /> <link rel="alternate stylesheet" type="text/css" href="URL_3" title="cssTitle_3" />
…
</head>
Sau đó dùng JavaScript (hoặc ngôn ngữ lập trình Client khác) điều khiển lựa chọn sử dụng một trong các file CSS đã khai báo.
Ví dụ:
Nếu sử dụng @import để khai báo CSS liên kết ngoài thì tất cả các định dạng trong các file CSS đều sẽ được áp dụng vào tài liệu HTML. Nếu một thuộc tính của một đối tượng HTML cùng được định dạng thì giá trị thuộc tính của file CSS khai báo sau cùng sẽ được ưu tiên.
Các khai báo @import cần phải được thực hiện trước các mã CSS bổ sung khác
Ví dụ:
Không được viết
<style type="text/css"> p { background : #FFF; color : yellow; } @import url("externalCSSfile.css"); </style> mà phải viết <style type="text/css"> @import url("externalCSSfile.css"); p { background : #FFF; color : yellow; } </style>
Tùy theo thiết bị hiển thị trang web mà các định dạng CSS liên kết ngoài có thể bị giới hạn bởi thuộc tính media
Ví dụ:
<link rel="stylesheet" type="text/css"
href="style.css" media="print" />
hoặc
@import url("style.css") print;
Một số giá trị media thông dụng
o all : giá trị mặc định, áp dụng khi muốn hiển thị định dạng trên tất cả các thiết bị.
o screen : định dạng sử dụng màu mà màn hình máy tính có thể hiển thị được
o print : định dạng theo chế độ in ấn (print preview), có thể chuyển các màu thành trắng đen nếu máy in đơn sắc.
Chú thích trong CSS: ta đặt đoạn cần chú thích trong cặp ký tự /* và */
Ví dụ:
<style type="text/css">
/* Đoạn văn bản này nền trắng chữ vàng */
p {
background : #FFF; color : yellow; } (adsbygoogle = window.adsbygoogle || []).push({});