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:
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à href là đường dẫn khai báo tên tập tin .css cần nhúng vào.
Đơ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, và các từ khóa @import này phải được đặt ở đầu tập tin .css [không bao gồm các đoạn comment].
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.
Thạch Phạm
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".
Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.
CSS là một ngôn ngữ dùng để trình bày hình thức thể hiện của các phần tử HTML. Như định dạng các phần tử văn bản [cơ chữ, font chữ, màu sắc ...], bố cục, dàn trang ... [CSS không phải là ngôn ngữ lập trình].
CSS viết tắt của cụm từ Cascading Style Sheets, về ngữ nghĩa thì có thể hiểu:
- Cascading : thể hiện cách ảnh hưởng của nhiều mã CSS đến phần tử HTML. Các CSS tác dụng vào một phần tử HTML xếp chồng thành nhiều lớp. Kết quả là sự tổng hợp của các lớp đó.
- Style Sheets: mã điều khiển cách hiện thị nội dung trang web.
Ví dụ, trong một văn bản HTML phần tử được định dạng bởi CSS.
- Mã CSS viết ở file .css thứ nhất có đưa ra thiết lập màu chữ đỏ, chữ in đậm [lớp 1].
- Rồi mã CSS viết ở file .css thứ hai lại đưa ra thiết lập màu chữ xanh [lớp 2].
- Tiếp theo ngay tại phần tử
đó, cũng viết CSS và đặt màu nền là màu xám [lớp 3].
Cuối cùng, tổng hợp lại phần tử
đó có màu anh, chữ in đậm, nền màu xám. Như vậy, phần tử được định dạng bởi CSS ở ba nơi, kết quả thì chúng gộp ba lớp đó xếp chồng lên, định nghĩa sau có thể ghi đè định nghĩa trước. Đó là ý nghĩa của từ Cascading.
CSS và HTML luôn đi cùng nhau: HTML tạo ra cấu trúc, nội dung các phần tử trong trang, CSS quy định cách hiện thị phần tử trên trang.
Để học về CSS trước tiên phải hiểu cơ bản về HTML, rồi mới có thể thực hành css trong html.
Tại sao cần dùng CSS?
CSS cho phép bạn định nghĩa kiểu, cách hiện thị cho các phần tử HTML. Thêm css vào html giúp bạn phân tách giữa nội dung trang và cách trình bày trang. Nếu chỉ sử dụng HTML thì định dạng phần tử, kiểu phần tử phải ở cùng một vị trí với phần tử trong văn bản, điều này rất khó để bảo trì khi trang web phức tạp. Khi sử dụng CSS thì các định đạng được loại bỏ khỏi văn bản HTML, định dạng được lưu vào một file CSS hay một khu vực riêng.
Nhúng CSS vào HTML
Để minh họa, tại đây có một đoạn mã CSS, nội dung đoạn mã này như sau [tạm thời bạn chưa cần hiểu về cú pháp]:
color:white; background-color:red;
Mã này sẽ định dạng chữ là màu trắng, nền màu đỏ. Để áp dụng mã CSS tác dụng vào các phần HTML có ba cách nhúng CSS vào HTML là Inline, Internal và External
- Inline: mã CSS viết tại thuộc tính
stylecủa phần tử HTML - Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ
- External: mã CSS ở một file riêng biệt [thường là file.css] sau đó nạp vào HTML bằng phần tử html
[liên kết css với html]
Kiểu inline và Internal thì chèn css vào html trực tiếp trong văn bản HTML.
Nhúng CSS dạng inline - dùng thuộc tính style
Cách này là
đặt mã CSS vào thẳng thuộc tính style của phần tử. Mã CSS chỉ tác động nên chính phần tử đó. Ví dụ đưa mã CSS trên áp vào phần tử
] trong HTML sau đây:
Kết quả:
Bạn có thể thử thay các màu khác để kiểm tra như: blue, green, navy, orange ...
Nhúng CSS dạng Internal - CSS viết cùng HTML với thẻ
Cách này bạn sẽ dùng thẻ , tạo ra khu vực để viết CSS, bạn có thể để bất kỳ đâu trong HTML, nhưng nên đặt
trong thẻ . Như ví dụ sau, trong khối nó sẽ định nghĩa kiểu cho mọi phần tử , đều có màu trắng, nền đỏ.
Nhúng CSS dạng External, thẻ nạp file CSS vào HTML
Cách link css vào html này các mã CSS bạn viết tập trung vào các file độc lập với file HTML [thường đặt phần mở rộng là .css] sau đó dùng thẻ đặt ở phần để nạp vào HTML theo cú pháp, ví dụ file ngoài là demo.css
Đoạn văn 1.
Đoạn văn 2.
Trong file demo.css bạn
viết nội dung CSS [không có thẻ style], ví dụ:
p {
color:white;
background-color:red;
}Kết quả sẽ tương tự như ví dụ trên, chỉ có điều mã CSS đã tách khởi văn bản HTML, viết ra một file độc lập. Thuộc tính href trỏ đến địa chỉ URL của file CSS, ở ví dụ trên là địa chỉ dạng tương đối vì file CSS và HTML cùng thư mục. [xem thêm địa chỉ tài nguyên file, URL.
Ví dụ nữa, thử tích hợp các CSS định nghĩa bởi
Framework Bootstrap, ở đường dẫn: //stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
Sau khi tích hợp thì sẽ có các lớp CSS sử dụng ngay như display-1, text-success ...
Như vậy bài viết đã giới thiệu cho bạn khái niệm cơ bạn về CSS, 3 nơi bạn có thể viết code CSS để áp dụng vào trang HTML. Cách viết code ở file .css bạn nên áp dụng, bài viết tiếp theo bắt đầu tìm hiểu về cú pháp CSS và sử dụng các thuộc tính CSS.