Chúng ta có thể liên kết 2 CSS với HTML không?

Vì Netscape vào thời điểm đó không hỗ trợ tất cả các cú pháp CSS có sẵn nên luôn có vấn đề về bố cục không hoạt động chính xác trong trình duyệt của họ. Một giải pháp thay thế đã được giới thiệu bằng quy tắc "@import". Ý tưởng đằng sau quy tắc này là tạo hai tệp CSS riêng biệt, một tệp bao gồm cú pháp CSS mà tất cả các trình duyệt đều có thể hiểu được và một tệp có cú pháp CSS trong đó mà Netscape Navigator không hiểu được

Vì quy tắc "@import" không thể đọc được đối với NN4. x, nó bỏ qua mã và chỉ đọc các quy tắc tiêu chuẩn đã được cung cấp

Ví dụ dưới đây cho thấy nó sẽ hoạt động như thế nào

Thí dụ

HTML

Using @import

Trong ví dụ của chúng tôi, bạn có thể thấy rằng chúng tôi đang sử dụng cả hàm "" và hàm "" đã sửa đổi

Chúng tôi gọi "mặc định của chúng tôi. css" thông qua chức năng "" và biểu định kiểu của chúng tôi có thông tin trong đó không được NN4 triển khai chính xác. x được gọi thông qua chức năng ""

Nếu bạn không cần hoặc muốn bỏ qua NN4. x thì bạn có thể sử dụng thẻ tiêu chuẩn để truy cập biểu định kiểu của mình hoặc bạn có thể sử dụng quy tắc "@import" để đưa vào (các) biểu định kiểu của mình

Sử dụng @import cho nhiều Biểu định kiểu

Nếu bạn có một trang web rất rộng và yêu cầu số lượng kiểu dáng đáng kể thì bạn có thể cắt bớt các góc bằng cách sử dụng quy tắc "@import" để nhập nhiều biểu định kiểu xếp tầng

Khi sử dụng nhiều Cascading Style Sheets, cần lưu ý rằng cú pháp CSS chỉ được sử dụng khi cần thiết

Sử dụng ví dụ sau, bạn có thể sử dụng thẻ để liên kết đến nhiều tệp CSS và chúng sẽ được kéo vào khi tệp HTML được mở trong trình duyệt. Điều này làm lộn xộn mã của bạn và làm chậm thời gian tải (phụ thuộc vào kích thước tệp)

Thí dụ

HTML

Integration of Multiple CSS Style Sheets

Cách dễ dàng hơn để áp dụng nhiều tệp là sử dụng quy tắc "@import" (phụ thuộc vào hỗ trợ của trình duyệt). Trong ví dụ của chúng tôi, chúng tôi nhập "chính. css" gọi trong nhiều tệp. Các tệp này được trình duyệt hoặc Tác nhân người dùng gọi khi cần e. g. Các thẻ HTML gọi CSS

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ử link bên trong phần tử head của tệp HTML, như vậy

Phần tử link 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 nó để 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ọng

Thuộc tính rel

Thuộc tính đầu tiên trong hai thuộc tính không thể thiếu là thuộc tính rel. 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ập

Bạn sẽ viết rel="stylesheet" để thông báo cho trình duyệt rằng bạn đang nhập biểu định kiểu

Thuộc tính project --- index.html css ---------- style.css0

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ập

Mộ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

2

Nế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

3

Thuộc tính project --- index.html css ---------- style.css4

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 đến. Đố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.css8

Thuộ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ử link của chính 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

Phần kết luận

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ử link và các thuộc tính

project --- index.html
            css ---------- style.css

0 và

2

Bạ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ểu

Hãy vui vẻ tạo các trang web

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

Ilenia Magoni

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 mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu