loading...

Wednesday, January 6, 2016

Bài 4 : Hướng dẫn liên kết các CSS bên ngoài [Thủ thuật blogger]

Đây là bài viết số 4 trong chuyên mục thủ thuật blogger

Liên kết các css để làm gì ?

Mỗi file CSS được sử dụng từ bên ngoài sẽ làm tăng thêm thời gian tải website. Điều này rỏ ràng không thể tránh khỏi, tuy nhiên trong một số trường hợp chúng ta có thể gộp các CSS này lại với nhau bằng cách copy các mẫu file CSS bên ngoài và dán chúng lại với nhau thành một file CSS. Cách làm này sẽ giảm thiểu tối đa thời gian tải CSS của máy chủ từ bên ngoài tức là làm giảm thời gian đáp ứng máy chủ, giúp máy chủ phản hồi nhanh hơn.
Do đó việc gộp css là rất quan trong ! Bạn sẽ phải tối ưu các css trừ khi nó không thể tối ưu được

lien ket cac css,gop css,toi uu hoa css website,thu thuat blogger,liên kết các css,tối ưu css

Làm sao để liên kết các CSS bên ngoài một cách hiệu quả ?



Để gộp các tập tin CSS bên ngoài chúng ta chỉ cần sao chép và dán nội dung của mỗi tập tin CSS riêng lẻ bên ngoài với nhau để tạo thành một tập tin CSS chính
 Có thể có từ 2 đến 3 tập tin CSS được gọi bên ngoài, hãy dán các tập tin đó thành một tập tin. Sau đó chỉnh sửa lại file HTML để gọi chỉ một tập tin mới đã cộng gộp các tập tin trên, và loại bỏ tất cả các link của tập tin củ. Cách làm như sau:
Ví dụ: Bạn có 1 website sử dụng 3 tập tin CSS được gọi từ bên ngoài bao gồm CSS chính, sidebar CSS, folder CSS.
Ở mỗi CSS có link thứ tự như sau:
 http://yourdomain.com/main.
CSS http://yourdomain.com/sidebar
CSS http://yourdomain.com/folder CSS
 Mở 3 đường link này ra để copy mã CSS dài loằng ngoằng của 3 file đó và chép chúng vào thành một file CSS. Lưu nó bằng Notepad và đặt tên main.css.
Bây giờ file main.css mới này sẽ là file cộng gộp của 3 file trên. Bây giờ, hãy upload file main.css này lên hosting để tạo link main.css mới.
Lưu ý: Nếu sử dụng blogger thì nên lưu CSS trên Google Drive để tạo link. Sau khi đã tạo link main.css thành công, bây giờ hãy xóa bỏ tất cả các link gọi CSS bên ngoài củ trên HTML đi. Thay vào đó là một link gọi CSS mới (main.css) được đặt trong cặp thẻ .

Xem thêm : Tổng hợp thủ thuật blogger


EmoticonEmoticon

loading...