Tích hợp mã CSS vào trang web – Import

0
10

Giới thiệu

Trong video trước, chúng ta đã tìm hiểu về 3 cách thức tích hợp mã nguồn CSS vào trang HTML – Inline stye, internal style và external style. Tuy nhiên, vẫn còn 1 cách thức nữa có đặc điểm tương tự như external style, được gọi là import style.
Vậy chúng ta hãy cùng nhau tìm hiểu về import style trong video này.

Import style sheet

Nhắc lại đôi chút về “external style sheet” trong bài học trước, mã nguồn CSS sẽ được viết tại một file riêng biệt tách rời với trang HTML ở bên ngoài. Muốn sử dụng style thì chúng ta sẽ “liên kết” nó vào trong tài liệu HTML thông qua “href” trong thẻ link.
Tuy nhiên vấn đề được đặt ra là nếu có nhiều file .css khác nhau chứ không chỉ đơn thuần là duy nhất một file, trong khi chúng lại ta muốn sử dụng nhiều file (hoặc toàn bộ những file đó) để trang trí tài liệu HTML theo ý muốn. Hãy xem mã nguồn trong ví dụ dưới đây:

<head> 
<link
<link rel="stylesheet" href=" style2.css" type="text/css" />
<link rel="stylesheet" href=" style3.css" type="text/css" />
<link rel="stylesheet" href=" style4.css" type="text/css" />
</head>

Như các bạn thấy, mỗi lần muốn sử dụng thêm file .css để trang trí thì chúng ta lại phải tạo thêm một thẻ link để liên kết nó vào, điều này khiến tài liệu HTML của chúng ta bị phức tạp hóa (thậm chí có thể làm cản trở thời gian load về của trình duyệt).
Giải pháp để cải thiện vấn đề này, làm mã nguồn HTML đơn giản hơn cũng như chính cú pháp khai

báo của nó cũng được giản lược nhưng vẫn sở hữu những ưu điểm của “external style sheet”, là sử dụng “import style sheet”.

Lưu ý: Chúng ta có thể sử dụng cách thức này để “import” vào tài liệu HTML (CSS vào HTML) hoặc thậm chí vào cả file CSS khác (CSS vào CSS).

Cú pháp

Cú pháp khi chèn vào tài liệu HTML:

<head>
 <style> 
  @import ‘style.css’;
 </style>
</head>

Lưu ý: Nội dung nằm trong dấu ‘ ’ chính là đường dẫn đến file mà chúng ta muốn sử dụng. Và giữa @import và dấu ‘ ’ là khoảng trắng (space). Câu lệnh sẽ kết thúc bằng dấu ; (chấm phẩy).

Giả sử trong trường hợp có nhiều file .css (mỗi file có thể được định nghĩa nhóm style khác nhau cho các phần tử trang web) nhưng chúng ta lại muốn sử dụng tất cả những file đó theo phương pháp import này và chỉ cho mỗi một file style.css (file này cũng có thể có thêm những style đặc trưng của riêng nó) nhưng vẫn muốn đảm bảo tính tách biệt rõ ràng, khoa học cho các file đó, thì chúng ta cũng có thể thực hiện bằng cách sau (nhúng toàn bộ mã nguồn từ các file khác vào một file) bên trong file style.css:

@import ‘style1.css’;
@import ‘style2.css’;
@import ‘style3.css’;
@import ‘style4.css’;
h2 {
 color: blue;
 font-size: 25px;
}
p {
 font-size: 20px;
}
ul {
 color: orange;
}

Chúng ta cũng có thể kết hợp link (external style) và import. Dựa theo hình minh họa trên, tại tài
liệu HTML, chúng ta sử dụng thẻ link để tích hợp file style.css vào file HTML chúng ta đang làm việc.
Lúc này file style.css sẽ có đầy đủ thuộc tính của các file style khác do ta đã import chúng vào trước đó.

Kết luận

Vậy là các bạn đã tìm hiểu đầy đủ về các cách thức tích hợp mã nguồn css vào trang HTML. Hãy lưu ý về cú pháp, ưu điểm, khuyết điểm, thứ tự ưu tiên khi xảy ra xung đột style của chúng để sử dụng sao cho thích hợp.
Về thứ tự ưu tiên (cao đến thấp) của các cách, chúng được sắp xếp như sau: Inline style -> internal style -> external style.Với external style sheet, nếu có sử dụng import thì theo nguyên tắc “Source Order”, cái nào xuất
hiện sau (hoặc được import sau) sẽ có độ ưu tiên cao hơn.
Cảm ơn các bạn đã theo dõi và hẹn gặp lại trong bài học tiếp theo.

Tài liệu tham khảo

http://www.w3.org/wiki/Inheritance_and_cascade

http://www.w3schools.com/css/css_howto.asp

0

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên