Hướng dẫn link css vào html
Show 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à:
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
External Styles
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ẻ [html] [/html] Và trong cặp thẻ Cách nhúng CSS với External StylesKhi 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:
Và cuối cùng là chèn vào
tập tin HTML bằng thẻ [html][/html] Trong đó, thuộc tính Đơ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 CSSChẳ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 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ếtViệ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ạmBé 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. Trong bài này tôi hướng dẫn bạn 3 cách thêm css vào tài liệu html của website bao gồm inline css, internal css , external css. Inline CssĐây là cách thêm css trực tiếp trên thẻ html cần định dạng. Tập hợp các style css được khai báo bên trong thuộc tính style của thẻ. Ưu điểm: Style cho một đối tượng html rất nhanh chóng. Nhược điểm: Những style css chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc. Ví dụ 1: Thiết lập đoạn văn có màu đỏ, chúng ta có thể thiết lập như code bên dưới.
Internal CssĐây là cách thêm đoạn code css ở một khu vực riêng trong file html. Ưu điểm: Phân biệt rõ ràng đoạn code css và những nội dung html còn lại. Nhược điểm: Những style css chỉ áp dụng được trong phạm vi một file cụ thể nơi mà nó được khai báo. Nó không thể sử dụng chung cho nhiều page khác nhau. Ví dụ 2: Thiết lập
External CssVới hình thức này tất cả những code css được đưa vào trong file có đuôi mở rộng .css (ví dụ: main.css). Ưu điểm: Giúp Css có thể dùng chung cho nhiều page khác nhau của website và dễ dàng quản lý. Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua file
Cấu trúc file thư mục: index.html css ----main.css File p{ color: #f15c25; } Nội dung file index.html
Trong đó dòng code giúp liên kết đến file main.css nằm trong thư mục css của dự án. Tổng kết Qua bài này tôi chia sẻ đến bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể bạn có thể lựa chọn cách thích hợp. Nếu website chỉ có một page bạn có thể sử dụng internal css là đủ. Nhưng nếu dự án có hệ thống file lớn thì bạn nên sử dụng cách external css. |