Cách thực hành tốt nhất là đặt các biểu định kiểu CSS của bạn trong một tệp bên ngoài. Vậy làm cách nào bạn có thể liên kết CSS đó với tệp HTML của mình?
Liên kết đến một tệp CSS bên ngoài là một phần quan trọng của bất kỳ bản tóm tắt trang HTML nào. Và trong bài viết này, chúng ta sẽ tìm hiểu cách thực hiện
Cách liên kết tệp CSS với tệp HTML
Bạn có thể liên kết tệp CSS với tệp HTML của mình bằng cách thêm phần tử
project --- index.html
css ---------- style.css
6 bên trong phần tử project --- index.html
css ---------- style.css
7 của tệp HTML, như vậy
Phần tử
project --- index.html
css ---------- style.css
6 có nhiều cách sử dụng và điều quan trọng là phải chỉ định đúng thuộc tính để bạn có thể sử dụng phần tử đó để nhập biểu định kiểu CSS bên ngoài. Bây giờ chúng ta sẽ xem xét một số thuộc tính quan trọngThuộc tính project --- index.html
css ---------- style.css
9
project --- index.html
css ---------- style.css
Thuộc tính đầu tiên trong hai thuộc tính không thể thiếu là thuộc tính
project --- index.html
css ---------- style.css
9. Bạn sẽ sử dụng thuộc tính này để cho trình duyệt biết mối quan hệ với tệp đã nhậpBạn sẽ viết
project --- index.html
css ---------- style.css
1 để thông báo cho trình duyệt rằng bạn đang nhập biểu định kiểuThuộc tính project --- index.html
css ---------- style.css
0
project --- index.html
css ---------- style.css
Thuộc tính thứ hai không thể thiếu là thuộc tính
project --- index.html
css ---------- style.css
0, nó chỉ định tệp cần nhậpMột tình huống phổ biến là tệp CSS và tệp HTML nằm trong cùng một thư mục. Trong trường hợp như vậy, bạn có thể viết
project --- index.html
css ---------- style.css
2Nếu tệp CSS và tệp HTML nằm trong các thư mục khác nhau, bạn cần ghi đúng đường dẫn cần đi từ tệp HTML đến tệp CSS
Ví dụ: một tình huống phổ biến là tệp CSS nằm trong một thư mục là anh chị em với tệp HTML, như vậy
project --- index.html
css ---------- style.css
Trong trường hợp này, bạn sẽ cần viết một đường dẫn như
project --- index.html
css ---------- style.css
3Thuộc tính project --- index.html
css ---------- style.css
4
project --- index.html
css ---------- style.css
Bạn sử dụng thuộc tính
project --- index.html
css ---------- style.css
4 để xác định loại nội dung mà bạn đang liên kết tới. Đối với biểu định kiểu, đây sẽ là project --- index.html
css ---------- style.css
6. Nhưng vì project --- index.html
css ---------- style.css
7 là ngôn ngữ biểu định kiểu duy nhất được sử dụng trên web, nên nó không chỉ là tùy chọn mà thậm chí còn là cách tốt nhất để không bao gồm nóThuộc tính project --- index.html
css ---------- style.css
8
project --- index.html
css ---------- style.css
project --- index.html
css ---------- style.css
2Thuộc tính phương tiện không hiển thị trong ví dụ. Đó là một thuộc tính tùy chọn mà bạn có thể sử dụng để chỉ định thời điểm nhập một biểu định kiểu nhất định. Giá trị của nó phải là loại phương tiện/truy vấn phương tiện
Điều này có thể hữu ích trong trường hợp bạn muốn tách các kiểu cho các thiết bị và kích thước màn hình khác nhau trong các tệp khác nhau. Bạn sẽ cần nhập từng tệp CSS với phần tử
project --- index.html
css ---------- style.css
6 của riêng nóBạn có thể xem các bài viết này [hoặc các nguồn khác] về truy vấn phương tiện để tìm hiểu thêm về những gì bạn có thể viết dưới dạng giá trị thuộc tính
- Cách sử dụng truy vấn phương tiện CSS để tạo trang web đáp ứng
- Cách đặt phạm vi chiều rộng cho truy vấn phương tiện CSS của bạn
- Hướng dẫn CSS truy vấn phương tiện – Độ phân giải tiêu chuẩn, Điểm ngắt CSS và Kích thước điện thoại mục tiêu
Trong bài viết này, bạn đã học cách thêm một biểu định kiểu dáng bên ngoài vào trang web của mình bằng cách sử dụng phần tử
project --- index.html
css ---------- style.css
6 và các thuộc tính project --- index.html
css ---------- style.css
0 và
2Bạn cũng biết rằng bạn có thể nhập nhiều biểu định kiểu và sử dụng thuộc tính
project --- index.html
css ---------- style.css
8 để xác định thời điểm áp dụng từng biểu định kiểuHãy vui vẻ tạo các trang web
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Người điều hành và tác giả nhân viên cho freeCodeCamp
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có việc làm với tư cách là nhà phát triển. Bắt đầu