Hướng dẫn where to put css - đặt css ở đâu

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS
  • Sử dụng CSS

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

  • Html

    • Hướng dẫn where to put css - đặt css ở đâu
      index.html
    • css

      • Hướng dẫn where to put css - đặt css ở đâu
        style.css

Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Tiêu đề trang web



Tiêu đề trang web

...Phần thân viết ở đây...
...Phần thân viết ở đây...

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Kết nối file CSS vào file HTML

Trước khi học cách kết nối file CSS vào HTML như thế nào, chúng ta hãy xét cấu trúc thư mục chứa các file như sau:

Html



Tiêu đề trang web

index.html
...Phần thân viết ở đây...

css

  • style.css
  • Click vào dấu [+] để xem cấu trúc.

Nội fung file index.html

Tiêu đề trang web

...Phần thân viết ở đây...

Nội fung file style.css

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

p { color: red; float: left; padding-left: 10px; }

Chúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

p {
    color: red;
    float: left;
    padding-left: 10px;
}

Tiêu đề trang web

...Phần thân viết ở đây...

Html



Tiêu đề trang web

index.html



  • Mục 01

  • Mục 02

  • Mục 03

  • Mục 04


Đoạn văn


css

Nội dung navi




style.css

Click vào dấu [+] để xem cấu trúc.

  • Nội fung file index.html

div#content { width: 600px; }

Tiêu đề trang web

...Phần thân viết ở đây...

  • Nội fung file style.css

div.navi { background: #333333; }

Nếu không có nội dung thì file CSS có thể là file rỗng, hoặc chứa dòng khai báo charset, ở đây ta tạm thời sử dụng file rỗng:

Chúng ta kết nối file CSS vào file HTML thông qua thẻ , cách sử dụng thẻ này như thế nào các bạn có thể xem bên phần tham khảo.

  • Tiêu đề trang web
  • ...Phần thân viết ở đây...

div#content p { color: #333333; } /* Chon thanh phan p theo content*/

div.navi p { background: #333333; } /* Chon thanh phan p theo navi*/

div#content ul li { display: inline; } /* Chon thanh phan li theo content*/

Thuộc tính href ta phân tích như sau:

style.css là một file có tên là style với định dạng file là .css

css là folder chứa file style.css

/* Đây là dòng comment */




Inline Styles – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.

  • 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ẻ <link>. – Nhúng trực tiếp vào tài liệu HTML thông qua cặp thẻ <style> </style>.
  • 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ó. – 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ẻ <link>.

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ẻ p { color: red; float: left; padding-left: 10px; }0 vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ p { color: red; float: left; padding-left: 10px; }1) như sau.

Để nhúng CSS vào website thông qua kiểu Inline Styles, bạn sẽ khai báo cặp thẻ

p {
    color: red;
    float: left;
    padding-left: 10px;
}
0 vào vị trí bất kỳ của website (tốt nhất là bên trong cặp thẻ
p {
    color: red;
    float: left;
    padding-left: 10px;
}
1) như sau.

[html]

Và trong cặp thẻ

p {
    color: red;
    float: left;
    padding-left: 10px;
}
0 đó bạn có thể viết CSS vào, ví dụ đơn giản:

Và trong cặp thẻ

p {
    color: red;
    float: left;
    padding-left: 10px;
}
0 đó bạn có thể viết CSS vào, ví dụ đơn giản:

[/html]

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:

Và cuối cùng là chèn vào tập tin HTML bằng thẻ <link> và thẻ này phải đặt bên trong cặp thẻ

p {
    color: red;
    float: left;
    padding-left: 10px;
}
1. Ví dụ:

p {
color: blue;
font-family: Arial;
}

Trong đó, thuộc tính

p {
    color: red;
    float: left;
    padding-left: 10px;
}
5 là khai báo loại tập tin nhúng và
p {
    color: red;
    float: left;
    padding-left: 10px;
}
6 là đường dẫn khai báo tên tập tin .css cần nhúng vào.

[html][/html]

Đơ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
p {
    color: red;
    float: left;
    padding-left: 10px;
}
7, và các từ khóa
p {
    color: red;
    float: left;
    padding-left: 10px;
}
7 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:

Lời kết

@import "demo.css";

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

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.