Ba cách hợp lệ để thêm CSS vào trang HTML Linkedin là gì?

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 ở 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 biết mục được liên kết liên quan đến tài liệu chứa như thế nào

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 đó, sử dụng thuộc tính

p {
  color: blue;
}

3 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

p {
  color: blue;
}

5

p {
  color: blue;
}

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

p {
  color: blue;
}

6

p {
  color: red;
}

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

p {
  color: blue;
}

5 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,

p {
  color: blue;
}

6 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 riêng 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

p {
  color: blue;
}

5

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

Ở đâ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

p {
  color: red;
}

1 trống, sau đó

p {
  color: red;
}

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

p {
  color: red;
}

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

p {
  color: red;
}

1 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

npm i -D postcss postcss-cli postcss-import

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

p {
  color: red;
}

5, 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ở, các 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ụ:

p {
  color: red;
}

6 cho nút,

p {
  color: red;
}

7 cho thẻ và

p {
  color: red;
}

8 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

postcss-demo
├── src
│   ├── base
│         ├── base.css
│         ├── reset.css
│   ├── components
│         ├── button.css
│         ├── card.css
│         ├── form.css
│   ├── utilities
│         ├── container.css
│         ├── margin.css
│         ├── padding.css
│   └── style.css
├── node_modules
├── package.json
└── package-lock.json

Bây giờ chúng tôi đã cài đặt tất cả các phụ thuộc của mình, chúng tôi 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

p {
  color: red;
}

9 trực tiếp trong

p {
  color: red;
}

1 (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ó

module.exports = {
    plugins: [
        require('postcss-import'),
    ]
}

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

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

1 , 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ị

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

2

@import 'base/base.css';
@import 'base/reset.css';

@import 'components/button.css';
@import 'components/card.css';
@import 'components/form.css';

@import 'utilities/container.css';
@import 'utilities/padding.css';
@import 'utilities/margin.css';

Ở đâ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

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

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

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

4 và bao gồm đoạn mã sau trong phần

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

5

{
  //
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "postcss:watch": "postcss src/style.css --dir public"
  },
  //
}

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

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

6 chạy. Ngoài việc chạy

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

7, chúng tôi yêu cầu nó đi vào thư mục

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

8 của chúng tôi, tìm tệp

p {
  color: blue;
}

/* nested media query */
@media (max-width: 200px) {
    p {
       color: green;
    }
}

3, 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 chung chứa tệp

npm i -D postcss postcss-cli postcss-import

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

npm i -D postcss postcss-cli postcss-import

1

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

npm i -D postcss postcss-cli postcss-import

2 đều xuất ra thành

npm i -D postcss postcss-cli postcss-import

3

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

p {
  color: blue;
}

3 chứa truy vấn phương tiện và liên kết URL tới tệp CSS bên ngoài, thuộc tính này á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 lại các yêu cầu mạng và tự động hiển thị tất cả các lỗi

Bạn sẽ sử dụng thuộc tính nào để thay đổi màu của SVG bằng CSS LinkedIn?

Mục đích chính của HTML LinkedIn là gì?

Bạn có thể sử dụng bộ chọn CSS nào để chọn tất cả các thành phần trên trang của mình được liên kết với hai lớp tiêu đề và xóa?

Phần tử gốc của tài liệu HTML LinkedIn là gì?