Áp dụng CSS bên ngoài cho div cụ thể

CSS, viết tắt của cascading style sheet, là ngôn ngữ tạo kiểu được sử dụng để trình bày nội dung trên trang web

Một biểu định kiểu có thể được đưa vào một trang web thông qua nhiều cách khác nhau;

Tuy nhiên, trong một số trường hợp, bạn có thể chỉ muốn sử dụng một biểu định kiểu cụ thể nếu một điều kiện cụ thể là

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

4. Ví dụ: bạn có thể muốn áp dụng biểu định kiểu thân thiện với thiết bị di động khi xem trang web trên thiết bị di động và áp dụng phiên bản dành cho máy tính để bàn khi xem trang web trên màn hình máy tính để bàn

Trong hướng dẫn này, chúng ta sẽ xem xét hai cách hiệu quả, sử dụng truy vấn phương tiện và PostCSS, để tải và áp dụng biểu định kiểu có chọn lọc cũng như xem xét một số lưu ý xung quanh mỗi quy trình

Truy vấn phương tiện CSS so với. Truy vấn phương tiện HTML

Truy vấn phương tiện là một kỹ thuật CSS được sử dụng để làm cho trang web trông đẹp mắt trên mọi màn hình. Nó sử dụng quy tắc

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

6 để bao gồm một khối thuộc tính CSS chỉ có thể được áp dụng nếu một điều kiện là

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

4

Ví dụ: sử dụng quy tắc

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

6 trong CSS, bạn có thể viết truy vấn phương tiện để định kiểu văn bản của mình theo cách khác trong màn hình rộng hơn 500px và màn hình thấp hơn 500px

/* text is blue on screens smaller than 500px */
@media (max-width: 500px) {
    p {
       color: blue;
    }
}

/* text is red on screens larger than 500px */
@media (min-width: 500px) {
    p {
       color: red;
    }
}

Truy vấn phương tiện thường được viết trong biểu định kiểu, nhưng bạn cũng có thể viết truy vấn phương tiện trực tiếp bên trong phần đánh dấu HTML của mình

Sử dụng truy vấn phương tiện trong thẻ HTML

Text color: Blue in phones, red in tablets, green in even smaller screens

1 để tải biểu định kiểu

Thẻ

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

1 trong HTML thiết lập liên kết giữa tài liệu HTML và tài nguyên bên ngoài, chẳng hạn như biểu định kiểu bên ngoài

Mặc dù phần tử này có thể xuất hiện nhiều lần trong một tài liệu nhưng nó chỉ xuất hiện trong phần

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

3.

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

1 là một thẻ trống, vì vậy nó có thể chứa nhiều thuộc tính mô tả cho trình duyệt cách mục được liên kết liên quan đến tài liệu chứa

Khi làm việc với các trang web phức tạp, bạn có thể tạo các tệp CSS khác nhau, tất cả đều được điều chỉnh theo các kích thước hoặc hướng màn hình khác nhau. Sau đó, bằng cách sử dụng thuộc tính

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

23 trên thẻ

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

1, bạn có thể thiết lập truy vấn phương tiện để tải các biểu định kiểu tương ứng

Hãy xem xét HTML sau, ví dụ

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

Đây là phong cách cho

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

25

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

2

Và đây là phong cách cho

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

26

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

8

Trên các khung nhìn có chiều rộng nhỏ hơn 700px, biểu định kiểu

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

25 sẽ áp dụng cho tài liệu, làm cho văn bản chuyển sang màu xanh lam. Khi chiều rộng màn hình vượt quá 699px,

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

26 sẽ áp dụng cho tài liệu và văn bản sẽ chuyển sang màu đỏ

Cách tiếp cận này giúp bạn linh hoạt hơn khi sắp xếp các biểu định kiểu của mình. Vì vậy, thay vì đặt tất cả các kiểu và truy vấn phương tiện của bạn vào trong một tệp CSS, bạn có thể chia chúng thành các tệp khác nhau và tải chúng trực tiếp từ HTML bằng truy vấn phương tiện

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Với truy vấn phương tiện HTML, cả hai tệp CSS đều được tải xuống bất kể truy vấn phương tiện có thỏa mãn hay không. Trình duyệt phải tải xuống tất cả để có thể đánh giá lại khi định hướng thay đổi. Tuy nhiên, trình duyệt phân tích cú pháp CSS không mong muốn bị chậm

Tuy nhiên, với các truy vấn phương tiện CSS, tất cả các khối kiểu được phân tích cú pháp và xử lý hoàn toàn, cho dù truy vấn có thỏa mãn hay không

Đánh giá các truy vấn phương tiện lồng nhau

Khi tải tệp CSS qua HTML

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

1, biểu định kiểu có thể chứa truy vấn phương tiện của chính nó

Để chứng minh điều này, chúng tôi sẽ lồng một truy vấn phương tiện khác bên trong

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

25

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

3

Ở đây, chúng tôi đang nói rằng văn bản sẽ chuyển sang màu xanh lục khi chiều rộng màn hình nhỏ hơn 200px. Khi trình duyệt của chúng tôi thay đổi kích thước để chiếm chiều rộng từ 200px trở xuống, văn bản sẽ chuyển sang màu xanh lục

Tuy nhiên, mở rộng màn hình lên chiều rộng lớn hơn 200px và văn bản sẽ trở lại màu xanh lam. Điều này chứng tỏ rằng trình duyệt cũng sẽ xử lý bất kỳ truy vấn phương tiện lồng nhau nào

Nhập PostCSS

PostCSS cung cấp một hệ sinh thái plugin mở rộng để giúp các tác giả CSS cải thiện trải nghiệm viết CSS của họ. Điều này bao gồm một plugin có thể kết hợp các biểu định kiểu từ các tệp CSS khác nhau thành một tệp CSS duy nhất

Một cách để thiết lập PostCSS trong dự án web của bạn là với PostCSS CLI và đó là những gì chúng tôi sẽ sử dụng ở đây. Tuy nhiên, lưu ý rằng cả Node và npm đều cần thiết để chạy PostCSS, vì vậy hãy đảm bảo bạn đã cài đặt chúng trước

Để bắt đầu, hãy tạo một thư mục

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

81 trống, sau đó

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

82 vào thư mục đó và khởi tạo một dự án nút mới bằng cách chạy

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

83 từ dòng lệnh. Điều này tạo ra một gói. json trong thư mục

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

81 của chúng tôi với các giá trị mặc định

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Bây giờ, để cài đặt PostCSS, PostCSS CLI và plugin nhập PostCSS tất cả trong một lần và lưu chúng dưới dạng phần phụ thuộc, hãy sử dụng lệnh này

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

8

PostCSS sử dụng plugin nhập PostCSS để kết hợp các biểu định kiểu khác nhau từ các nguồn khác nhau vào một tệp CSS duy nhất

Ví dụ: bên trong thư mục

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

85, chúng tôi có thể quyết định nhóm các biểu định kiểu của mình thành các thư mục khác nhau dựa trên chức năng của chúng

Các biểu định kiểu đặt lại tài liệu sẽ đi vào thư mục cơ sở, biểu định kiểu thiết kế các thành phần giao diện người dùng phổ biến (ví dụ:

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

86 cho nút,

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

87 cho thẻ và

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

88 cho biểu mẫu) đi vào thư mục thành phần, v.v.

Về cơ bản, bạn có thể sắp xếp các biểu định kiểu của mình theo bất kỳ cách nào bạn muốn

Sau đó, với một vài cài đặt cấu hình và lệnh CLI, chúng tôi có thể đưa tất cả các tệp CSS này mà chúng tôi cần vào một tệp CSS duy nhất để sản xuất

Để tham khảo, đây là cấu trúc của dự án của chúng tôi tại thời điểm này

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

3

Bây giờ chúng ta đã cài đặt tất cả các phần phụ thuộc, chúng ta phải thiết lập tệp cấu hình PostCSS.
Để thực hiện việc này, hãy tạo tệp

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

89 trực tiếp trong

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

81 (thư mục gốc).

Trong tệp này, chúng tôi sẽ đăng ký plugin để chúng tôi có thể sử dụng nó

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

6

Tiếp theo, bên trong tệp

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

31, chúng tôi sẽ hướng dẫn PostCSS về những biểu định kiểu cần nhập bằng cách sử dụng chỉ thị

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

32

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

9

Ở đây, chúng tôi đã chỉ định các đường dẫn tương đối cho tất cả các biểu định kiểu mà chúng tôi muốn nhập

Với tất cả các chỉ thị và đường dẫn, hãy nhập các biểu định kiểu khác nhau này vào

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

33. Để làm điều đó, hãy mở tệp

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

34 và bao gồm đoạn mã sau bên dưới

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

35

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

3

Ở đây, chúng tôi chỉ định những việc cần làm khi tập lệnh

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

36 chạy. Ngoài việc chạy ________ 237, chúng tôi yêu cầu nó đi vào thư mục ________ 238 của chúng tôi, tìm tệp

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

33, sau đó chúng tôi chỉ định thư mục nào sẽ xuất các biểu định kiểu kết hợp vào

Cuối cùng, chạy đoạn script sau

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

0

Sau khi thực thi thành công, tập lệnh sẽ tạo một thư mục công cộng với tệp

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

80. Tệp này chứa tất cả các biểu định kiểu đã nhập trước đó vào

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

81

Do đó, bất kỳ biểu định kiểu nào được nhập vào

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

82 đều xuất ra thành

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

83

Phần kết luận

Trong hướng dẫn này, chúng tôi đã thảo luận chi tiết về hai cách để tải CSS vào một trang web bằng cách bao gồm các truy vấn phương tiện và Nhập CSS sau

Truy vấn phương tiện có thể được viết cả bên trong CSS và HTML. Bên trong HTML, thẻ

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

1 phải được cung cấp thuộc tính

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

23 chứa truy vấn phương tiện và liên kết URL tới tệp CSS bên ngoài, áp dụng khi điều kiện truy vấn là

  
  
  


  
Text color: Blue in phones, red in tablets, green in even smaller screens

4

Tuy nhiên, PostCSS sử dụng một plugin nhập đặc biệt để kết hợp các tệp CSS khác nhau thành một tệp CSS duy nhất

Nếu bạn có bất kỳ câu hỏi nào liên quan đến chủ đề này, vui lòng cho tôi biết trong phần bình luận

Có một tuần tuyệt vời

Giao diện người dùng của bạn có ngốn CPU của người dùng không?

Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi nhật ký yêu cầu mạng và tự động hiển thị tất cả các lỗi

Làm cách nào để liên kết CSS với div cụ thể?

Làm cách nào để thêm CSS bên ngoài vào div?