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à
Document4. 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ànText color: Blue in phones, red in tablets, green in even smaller screens
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
Document6 để 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
Document4Text color: Blue in phones, red in tablets, green in even smaller screens
Ví dụ: sử dụng quy tắc
Document6 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 500pxText color: Blue in phones, red in tablets, green in even smaller screens
/* 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
Document
Text color: Blue in phones, red in tablets, green in even smaller screens
1 để tải biểu định kiểu
Text color: Blue in phones, red in tablets, green in even smaller screens
Thẻ
Document1 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àiText color: Blue in phones, red in tablets, green in even smaller screens
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
Document3.Text color: Blue in phones, red in tablets, green in even smaller screens
Document1 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ứaText color: Blue in phones, red in tablets, green in even smaller screens
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
Document23 trên thẻText color: Blue in phones, red in tablets, green in even smaller screens
Document1, 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 ứngText color: Blue in phones, red in tablets, green in even smaller screens
Hãy xem xét HTML sau, ví dụ
DocumentText color: Blue in phones, red in tablets, green in even smaller screens
Đây là phong cách cho
Document25Text color: Blue in phones, red in tablets, green in even smaller screens
Document2Text color: Blue in phones, red in tablets, green in even smaller screens
Và đây là phong cách cho
Document26Text color: Blue in phones, red in tablets, green in even smaller screens
Document8Text color: Blue in phones, red in tablets, green in even smaller screens
Trên các khung nhìn có chiều rộng nhỏ hơn 700px, biểu định kiểu
Document25 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
Document26 sẽ áp dụng cho tài liệu và văn bản sẽ chuyển sang màu đỏText color: Blue in phones, red in tablets, green in even smaller screens
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
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
Document1, biểu định kiểu có thể chứa truy vấn phương tiện của chính nóText color: Blue in phones, red in tablets, green in even smaller screens
Để 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
Document25Text color: Blue in phones, red in tablets, green in even smaller screens
Document3Text color: Blue in phones, red in tablets, green in even smaller screens
Ở đâ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
Document81 trống, sau đóText color: Blue in phones, red in tablets, green in even smaller screens
Document82 vào thư mục đó và khởi tạo một dự án nút mới bằng cách chạyText color: Blue in phones, red in tablets, green in even smaller screens
Document83 từ dòng lệnh. Điều này tạo ra một gói. json trong thư mụcText color: Blue in phones, red in tablets, green in even smaller screens
Document81 của chúng tôi với các giá trị mặc địnhText color: Blue in phones, red in tablets, green in even smaller screens
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
Document8Text color: Blue in phones, red in tablets, green in even smaller screens
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
Document85, 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úngText color: Blue in phones, red in tablets, green in even smaller screens
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ụ:
Document86 cho nút,Text color: Blue in phones, red in tablets, green in even smaller screens
Document87 cho thẻ vàText color: Blue in phones, red in tablets, green in even smaller screens
Document88 cho biểu mẫu] đi vào thư mục thành phần, v.v.Text color: Blue in phones, red in tablets, green in even smaller screens
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
Document3Text color: Blue in phones, red in tablets, green in even smaller screens
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
Document89 trực tiếp trongText color: Blue in phones, red in tablets, green in even smaller screens
Document81 [thư mục gốc].Text color: Blue in phones, red in tablets, green in even smaller screens
Trong tệp này, chúng tôi sẽ đăng ký plugin để chúng tôi có thể sử dụng nó
Document6Text color: Blue in phones, red in tablets, green in even smaller screens
Tiếp theo, bên trong tệp
Document31, 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
Document32Text color: Blue in phones, red in tablets, green in even smaller screens
Document9Text color: Blue in phones, red in tablets, green in even smaller screens
Ở đâ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
Document33. Để làm điều đó, hãy mở tệpText color: Blue in phones, red in tablets, green in even smaller screens
Document34 và bao gồm đoạn mã sau bên dướiText color: Blue in phones, red in tablets, green in even smaller screens
Document35Text color: Blue in phones, red in tablets, green in even smaller screens
Document3Text color: Blue in phones, red in tablets, green in even smaller screens
Ở đây, chúng tôi chỉ định những việc cần làm khi tập lệnh
Document36 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ệpText color: Blue in phones, red in tablets, green in even smaller screens
Document33, 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àoText color: Blue in phones, red in tablets, green in even smaller screens
Cuối cùng, chạy đoạn script sau
Document0Text color: Blue in phones, red in tablets, green in even smaller screens
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
Document80. Tệp này chứa tất cả các biểu định kiểu đã nhập trước đó vàoText color: Blue in phones, red in tablets, green in even smaller screens
Document81Text color: Blue in phones, red in tablets, green in even smaller screens
Do đó, bất kỳ biểu định kiểu nào được nhập vào
Document82 đều xuất ra thànhText color: Blue in phones, red in tablets, green in even smaller screens
Document83Text color: Blue in phones, red in tablets, green in even smaller screens
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ẻ
Document1 phải được cung cấp thuộc tínhText color: Blue in phones, red in tablets, green in even smaller screens
Document23 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
Document4Text color: Blue in phones, red in tablets, green in even smaller screens
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.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