Ý nghĩa của “cascading” trong CSS là gì?

Câu vấn đáp này dành cho người mới mở màn tuyệt đối. Nếu bạn muốn có một cái nhìn tổng quan về câu vấn đáp này, vui vẻ đọc câu vấn đáp thứ hai của tôi .

Xếp tầng là quá trình kết hợp các bảng định kiểu khác nhau và giải quyết xung đột giữa các quy tắc và khai báo CSS khác nhau khi có nhiều hơn một quy tắc áp dụng cho một phần tử nhất định. Bởi vì như bạn có thể đã biết một khai báo cho một thuộc tính kiểu nhất định như kích thước phông chữ có thể xuất hiện trong một số biểu định kiểu và cũng có thể xuất hiện nhiều lần bên trong một biểu định kiểu duy nhất.

Để hiểu phân tầng, bạn phải khởi đầu với quá trình nghiên cứu và phân tích cú pháp CSS vì trong tiến trình nghiên cứu và phân tích cú pháp, bước tiên phong là xử lý những khai báo CSS xung đột và bước thứ hai là giải quyết và xử lý những giá trị CSS sau cuối .

Bây giờ CSS cũng có thể đến từ các nguồn khác nhau. Cái phổ biến nhất là CSS mà các nhà phát triển chúng tôi viết. Các khai báo mà chúng tôi đặt trong các bảng định kiểu của mình được gọi là khai báo tác giả. Một nguồn khác có thể là khai báo của người dùng, là CSS đến từ người dùng. Ví dụ: khi người dùng thay đổi kích thước phông chữ mặc định trong trình duyệt thì đó là CSS của người dùng và cuối cùng nhưng không kém phần quan trọng là có các khai báo trình duyệt mặc định.

Bạn đang đọc: Ý nghĩa của “cascading” trong CSS là gì?

Ví dụ : nếu tất cả chúng ta đặt một thẻ link trong HTML của mình cho một link và sau đó không tạo kiểu cho nó, nó thường sẽ được hiển thị bằng văn bản màu xanh lam và được gạch chân, đúng không. Đó được gọi là CSS tác nhân người dùng vì nó được thiết lập bởi trình duyệt. Vì vậy, tầng phối hợp những khai báo CSS đến từ toàn bộ những nguồn khác nhau này, nhưng làm thế nào để tầng thực sự xử lý xung đột khi nhiều hơn một quy tắc được vận dụng ?
Chà, những gì nó làm là xem xét tầm quan trọng, ở tính đơn cử của bộ chọn, và thứ tự nguồn của thứ tự khai báo xung đột để xác lập cái nào được ưu tiên hơn và đây là cách hoạt động giải trí. Đầu tiên, dòng thác khởi đầu bằng cách đưa ra những khai báo xung đột có tầm quan trọng khác nhau dựa trên nơi chúng được khai báo trên nguồn của chúng. Các khai báo quan trọng nhất là những khai báo của người dùng được lưu lại bằng từ khóa quan trọng .
Tuyên bố quan trọng thứ hai là công bố tác giả được lưu lại quan trọng. Thứ ba, khai báo tác giả thường thì, sau đó là khai báo người dùng thông thường, và sau cuối là khai báo ít quan trọng nhất là khai báo trình duyệt mặc định, điều này thực sự có ý nghĩa rằng tất cả chúng ta hoàn toàn có thể thuận tiện ghi đè những khai báo này theo mặc định từ trình duyệt .

Ý nghĩa của

Bây giờ rất nhiều lần tất cả chúng ta sẽ chỉ có một loạt những quy tắc xích míc trong bảng định kiểu tác giả của chúng tôi mà không có bất kể từ khóa quan trọng nào. Đó thực sự là trường hợp phổ cập nhất và trong trường hợp này, tổng thể những khai báo đều có tầm quan trọng đúng chuẩn như nhau. Bây giờ, điều gì xảy ra trong trường hợp này ? Việc phân tầng làm trong trường hợp này là thống kê giám sát và so sánh những đặc thù đơn cử của những bộ chọn khai báo và đây là cách nó hoạt động giải trí .

Ý nghĩa của

Kiểu nội tuyến có độ đặc hiệu cao nhất, tiếp theo là ID, sau đó là lớp, lớp giả và bộ chọn thuộc tính, và cuối cùng là bộ chọn phần tử và phần tử giả ít cụ thể nhất. Vì vậy, khi chúng ta có các khai báo mâu thuẫn với cùng tầm quan trọng như chúng ta đã thấy trong trang trình bày trước, chúng ta sẽ tính toán độ cụ thể của bộ chọn của chúng dựa trên các mức độ ưu tiên mà tôi vừa chỉ cho bạn, nhưng hãy xem cách chúng ta thực sự tính toán các thông số cụ thể với một ví dụ nhỏ, điều đó luôn tốt nhất, đúng không.

Ý nghĩa của

Từ ví dụ trên, toàn bộ những khai báo này đều có tầm quan trọng như nhau, chính do chúng đều là khai báo của tác giả. Vì vậy, hãy giám sát những đặc tính đơn cử của bộ chọn của chúng để khám phá xem màu nền sẽ là xanh lam, xanh lục, tím hay vàng và đây là cách chúng tôi triển khai. Tính đơn cử thực sự không chỉ là một số lượng, mà là một số lượng cho mỗi loại trong số bốn loại mà tôi đã cho bạn thấy trước đây. Kiểu nội tuyến, ID, lớp, thành phần giả và thuộc tính, ở đầu cuối là thành phần và so với mỗi thành phần này, chúng tôi đếm số lần Open trong bộ chọn .
Vì vậy, ở đây trong bộ chọn một, tất yếu tất cả chúng ta không có bất kể kiểu nội dòng nào, chính bới một kiểu nội tuyến phải được viết trong HTML, điều này không đúng ở đây, thế cho nên nó là số không. Chúng tôi cũng không có ID ở đây, vì thế nó một lần nữa là số 0, nhưng chúng tôi có một lớp, lớp nút. Vì vậy, so với hạng mục những lớp, tất cả chúng ta có một cái và sau cuối, không có bộ chọn thành phần nào ở đây nên không cho cái đó nữa, và thế là xong. Độ đặc hiệu của bộ chọn là không, không, một, không .
Bây giờ, giờ đây tất cả chúng ta hãy so sánh nó với những người khác. Kiểu tiếp theo cũng không phải là kiểu nội tuyến, thế cho nên không cho kiểu tiên phong. Bây giờ ở đây tất cả chúng ta thực sự có một bộ chọn ID cho ID điều hướng, đúng vậy, đó là một bộ chọn cho ID. Chúng tôi cũng có hai lớp kéo sang phải và nút, thế cho nên nó là hai cho hạng mục lớp và ở đầu cuối, cũng có hai bộ chọn thành phần ở đây. Phần tử nav và thành phần div, có nghĩa là nó cũng là hai cho hạng mục thành phần. Vì vậy, sau cuối độ đặc hiệu của bộ chọn là 0, một, hai, hai, đây thực sự là một bộ chọn rất đơn cử .
Bộ chọn số ba rất đơn thuần. Nó chỉ là một bộ chọn thành phần và do đó độ đặc hiệu là không, không, không, một .
Bây giờ là cái sau cuối, bộ chọn số bốn. Trước tiên, chúng tôi có ID điều hướng, thế cho nên nó là một cho ID. Tiếp theo, tất cả chúng ta có một lớp, lớp nút và cũng là một lớp giả, là lớp di chuột, làm cho nó có hai cho hạng mục lớp tổng số. Vì cũng có một bộ chọn thành phần nên độ đặc hiệu ở đầu cuối là 0, một, hai, một .

Bây giờ chúng ta hãy biết cách chúng ta thực sự sử dụng những con số này để tìm ra bộ chọn nào áp dụng. Chúng tôi bắt đầu xem xét các con số từ trái sang phải bắt đầu với danh mục cụ thể nhất, các kiểu nội tuyến. Nếu có một bộ chọn với một cho các kiểu nội tuyến sẽ thắng tất cả các bộ chọn khác, bởi vì đây là danh mục cụ thể nhất. Chà, đây không phải là trường hợp ở đây, vì vậy hãy chuyển sang ID. Chúng tôi thấy rằng các bộ chọn hai và bốn có một ở đây trong khi các bộ khác có số 0, vì vậy các bộ chọn có số 0 bị loại khỏi trò chơi vì chúng ít cụ thể hơn sau đó các bộ chọn hai và bốn là những người có ID.

Bây giờ vì cả hai bộ chọn đều có một trong hạng mục ID nên tất cả chúng ta phải liên tục và kiểm tra những lớp. Cả hai đều có một hai trong hạng mục này vẫn là một sự ràng buộc giữa họ và sau cuối, trong hạng mục thành phần, bộ chọn hai có một hai trong khi bộ chọn bốn chỉ có một và thế cho nên tất cả chúng ta có một người thắng lợi ở đây. Bộ chọn số hai là bộ chọn đơn cử nhất và thế cho nên nó sẽ cung ứng cho nút của tất cả chúng ta nền màu xanh lá cây. 34 Giá trị của công bố thắng lợi được gọi là giá trị xếp tầng vì nó là hiệu quả của bộ xếp tầng .
Vì vậy, chúng tôi mở màn với một loạt những giá trị được khai báo trong trường hợp này là xanh lam, xanh lục, tím và vàng, một trong số chúng sẽ thắng và trở thành giá trị xếp tầng, trong ví dụ của chúng tôi là màu xanh lá cây .
Bây giờ hãy tưởng tượng khu vực bốn cũng có hai thành phần thì cả hai bộ chọn hai và bốn sẽ có cùng độ đặc hiệu đúng mực, đúng không. Vì vậy, những gì sẽ xảy ra trong trường hợp này và tôi hứa với bạn rằng nó gần như đã kết thúc rồi. Chà nếu vẫn còn ràng buộc tại thời gian này thì khai báo CSS sau cuối được viết trong mã là khai báo sẽ vận dụng. Vì vậy, một lần nữa nếu mọi thứ đều bằng nhau, nếu tổng thể những bộ chọn khai báo có cùng tính đơn cử thì đó đơn thuần là khai báo ở đầu cuối sẽ được sử dụng để tạo kiểu cho thành phần đã chọn .

5/5 - (1 vote)
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments