Cách mở CSS

Ở bài viết trên chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML? Trong phần này, tôi xin giới thiệu với các bạn về vấn đề này.

Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML.

Cách 1: Nội tuyến [kiểu thuộc tính]

Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp.

Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này.

Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau:

Ví dụ

^_^ Welcome To V1Study’s Blog ^_^

Cách 2: Bên trong [thẻ ]

Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style [để tiện cho công tác bảo trì, sửa chữa ấy mà].

Cũng ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau:

Ví dụ

body { background-color:#FFF }
p { color:#00FF00 }

^_^ Welcome To WallPearl’s Blog ^_^

Lưu ý: Thẻ style nên đặt trong thẻ head.

Đối với những trình duyệt cũ, không thể nhận ra thẻ . Theo mặc định, thì khi một trình duyệt không nhận ra một thẻ thì nó sẽ hiện ra phần nội dung chứa trong thẻ. Như ở ví dụ trên, nếu trình duyệt không hỗ trợ thẻ style thì 2 dòng CSS: body {background-color:#FFF } p { color:#00FF00 } sẽ hiện ra trên trình duyệt.

Để tránh tình trạng này, bạn có thể đưa vào thêm dấu ở sau khối code CSS. Như ví dụ trên sẽ viết lại là:

Cách 3: Bên ngoài [liên kết với một file CSS bên ngoài]

Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS [có phần mở rộng .css] bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link.

Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu. Các ví dụ trong sách này cũng được trình bày theo kiểu này.

Trước khi tiến hành viết CSS và để CSS có thể thực thi trên website hoặc tài liệu HTML của bạn thì bạn phải tiến hành nhúng CSS vào website. Nói về nhúng CSS vào website thì chúng ta có hai cách là:

• Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ .
• External Styles – Tạo một tập tin .css riêng và nhúng vào tài liệu HTML thông qua cặp thẻ .

Mỗi cách nhúng đều có ưu và nhược điểm khác nhau, cũng như tùy theo trường hợp mà ta sử dụng nó.

Inline Styles

• Thích hợp với việc chèn một vài đoạn CSS ngắn.
• Trình duyệt không mất thời gian tải tập tin CSS.

External Styles

• Thích hợp với việc chèn nhiều đoạn CSS, dễ quản lý.
• Nhưng trình duyệt sẽ mất thêm thời gian để tải tập tin CSS.

Và trong các bài học CSS trong serie này bạn có thể sử dụng kiểu Inline Styles để nhúng CSS vào website vì sẽ không mất thời gian tạo tập tin, do chúng ta chỉ viết vài đoạn CSS mà thôi. Anyway, bạn có thể sử dụng kiểu bạn thích.

Cách nhúng CSS với Inline Styles

Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ  vào vị trí bất kỳ của website [tốt nhất là bên trong cặp thẻ ] như sau.

[html]

[/html]

Và trong cặp thẻ  đó bạn có thể viết CSS vào, ví dụ đơn giản:

See the Pen bNyQEY by Thach Pham [@thachpham92] on CodePen.

Cách nhúng CSS với External Styles

Khi sử dụng cách này, việc đầu tiên là bạn cần tạo ra một tập tin .css với tên bất kỳ, bạn có thể dùng bất cứ chương trình soạn thảo văn bản nào để tạo. Sau đó dán một đoạn CSS đơn giản vào như thế này:

 p {

 color: blue;

 font-family: Arial;

 }

Và cuối cùng là chèn vào tập tin HTML bằng thẻ  và thẻ này phải đặt bên trong cặp thẻ . Ví dụ:

[html][/html]

Trong đó, thuộc tính rel là khai báo loại tập tin nhúng và

@import "demo.css";

See the Pen vEwQGK by Thach Pham [@thachpham92] on CodePen.

Đơn giản phải không nào?

Nhúng tập tin CSS vào bên trong một tập tin CSS

Chẳng hạn bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả tụi nó vào website mà chỉ muốn thêm một tập tin CSS thôi, thì bạn có thể sử dụng cách nhúng các tập tin CSS vào bên trong một tập tin CSS với từ khóa

@import "demo.css";

@import "demo.css";

Ví dụ bạn có thể nhúng một tập tin demo.css vào trong tập tin style.css bằng cách chèn đoạn này vào tập tin style.css:

@import "demo.css";

Lời kết

Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá đơn giản mà. Và bắt đầu từ bài sau là chúng ta có thể đi sâu vào việc vận dụng một số thuộc tính CSS để trang trí website rồi.