Mục lục:
Video: Thách thức danh hài 6 | Tập 10 FULL: Trấn Thành bật khóc vì câu chuyện xót xa của thánh chửi 75 tuổi 2025
Thuật ngữ cascade có ý nghĩa gì đối với các tờ kiểu dáng? Điều đó có nghĩa là một quy tắc CSS rơi xuống thông qua mã, và đôi khi va vào một quy tắc mâu thuẫn.
Dòng thác là về những gì các lập trình viên gọi ưu tiên : Ai thắng khi xảy ra mâu thuẫn? Nhiều kiểu có thể áp dụng cho một thẻ nhất định. Ví dụ: luôn có kiểu trình duyệt được xác định mặc định, chẳng hạn như màu đen làm màu văn bản mặc định. Nếu bạn chỉ định một số màu khác trong quy tắc CSS, thác nước cho phép quy tắc của bạn chiếm ưu thế, có ưu tiên hơn kiểu được xây dựng sẵn.
Nhưng làm thế nào trình duyệt quyết định phong cách nào sẽ thắng nếu hai quy tắc CSS mâu thuẫn với nhau? Nên kết hợp các kiểu mâu thuẫn nhau? Điều gì sẽ xảy ra nếu các phong cách hoàn toàn không tương thích - chẳng hạn như một phong cách chỉ định chữ nghiêng và chữ không nghiêng?
Hình dung cụ thể
Một số yếu tố xác định kiểu nào sẽ thắng khi kiểu va chạm: thừa kế, cây cấu trúc trong một tài liệu và độ đặc hiệu (hoặc gần gũi>) của một phong cách. Có lẽ nguyên tắc va chạm dễ hiểu nhất liên quan đến nơi phong cách đã được định nghĩa. Phong cách CSS của bạn có thể được định nghĩa ở bốn vị trí chính:
- Kiểu dáng bên ngoài (tệp.css chứa định nghĩa kiểu được tham chiếu trong tài liệu HTML với một phần tử Liên kết).
- Một trang định kiểu được nhúng (kiểu được định nghĩa trong tài liệu HTML, bên trong thẻ của nó. Kiểu kiểu này cũng đôi khi được gọi là
- nội bộ ). Một phong cách nội tuyến (một phong cách được định nghĩa như một thuộc tính bên trong một phần tử HTML, và có hiệu lực bị giới hạn
- cho phần tử đó chỉ ). Ví dụ: đây là một kiểu nội tuyến điển hình:
gần nhất với phần tử thắng. Ví dụ, phong cách nội tuyến - nằm ngay bên trong phần tử chính nó - là gần nhất. Vì vậy, nếu nhiều hơn một phong cách được chỉ định cho phần tử đó, một phong cách nội tuyến là kiểu được sử dụng. Sự gần gũi của phong cách với phần tử phù hợp với nó chính thức được biết đến hơn là độ đặc hiệu . Vị trí kiểu có mức ưu tiên cao thứ hai là bảng kiểu bên trong nằm trong tiêu đề của tài liệu HTML. Ưu tiên cao thứ ba đi đến bảng phong cách bên ngoài - tệp riêng. Và ưu tiên yếu nhất, cái mà tất cả những người khác trump, là phong cách mặc định. Sau khi tất cả, mặc định là cái nhìn mà một tờ kiểu dáng được cho là thay đổi.
Dưới đây là một ví dụ minh họa cách IE quyết định giữa màu xanh lam và màu đỏ:
p {color: red;}
Tôi đoán tôi là màu xanh lam.
Để kiểm tra tài liệu này, nhập mã HTML vào Notepad, rồi lưu nó bằng tên tệp EmTest. htm. Tải trang web này bằng cách nhấp đúp vào tên tệp của nó trong Windows Explorer. Bạn sẽ thấy câu
Tôi đoán tôi màu xanh xuất hiện màu xanh lam. Phần tử ở đây được định nghĩa theo hai cách trái ngược nhau. Trong kiểu được nhúng, nó được định nghĩa là màu đỏ, nhưng định nghĩa đó bị ghi đè bởi định nghĩa nội tuyến của màu xanh lam.
Thử loại bỏ kiểu nội tuyến để xem những gì xảy ra. Thay đổi dòng để
Tôi đoán tôi là màu xanh.
Kiểm tra lại bằng cách lưu lại tệp Notepad mà bạn vừa sửa đổi.
Không cần phải nhấn đúp vào tên tệp này trong Windows Explorer để tải phiên bản mới vào IE. Sau khi bạn đã tải một tài liệu, nó là địa chỉ mặc định trong IE - trong trường hợp này, một địa chỉ của một. htm trên ổ cứng của bạn. Nếu bạn sửa đổi tệp đó như bạn đã làm trong ví dụ này, tất cả những gì bạn phải làm để xem sửa đổi là nhấn F5. Đó là "làm mới" IE.
Một số người thích sử dụng chế độ xem nguồn sẵn có của trình duyệt như một cách nhanh chóng để sửa đổi và kiểm tra lại mã CSS. Chọn Xem -> Nguồn. Bạn có thể thay đổi mã, và sau đó lưu nó. Cả Netscape và Firefox làm nổi bật cú pháp, mà một số lập trình thấy hữu ích.
Sau khi bạn tải phiên bản mới của tài liệu này vào IE, dòng
Tôi đoán tôi là màu xanh hiện được hiển thị màu đỏ. Mâu thuẫn giữa các định nghĩa kiểu dáng được nhúng và nội tuyến đã được giải quyết vì bạn đã xóa kiểu nội tuyến. Bạn có thể ghi đè các quy tắc ưu tiên thông thường bằng cách sử dụng! Lệnh quan trọng để chỉ định rằng kiểu này phải được sử dụng, không có vấn đề gì. An! Khai báo quan trọng ghi đè lên tất cả các định nghĩa kiểu khác. Bạn thêm lệnh như sau:
p {color: blue! quan trọng;}
Trong CSS1, các kiểu được tuyên bố là quan trọng bởi tác giả của trang Web ghi đè lên bất cứ kiểu nào mà người đọc đã tuyên bố quan trọng. Tuy nhiên, trong CSS2, các phong cách đọc quan trọng đã giành được sự quan tâm của các tác giả, và hơn
bất kỳ phong cách tác giả, dù được đánh dấu là quan trọng hay không. Hiểu biết về độ đặc hiệu của CSS
Thuật ngữ
độ đặc hiệu cũng được sử dụng để mô tả một cách thứ hai mà trình duyệt tính toán phong cách nào thắng khi kiểu mâu thuẫn. Thứ nhất, trình duyệt tìm kiếm sự gần gũi - nhưng nếu sự gần gũi là giống hệt nhau? Đó là khi kỹ thuật thứ hai này được áp dụng. Hãy tưởng tượng, ví dụ, hai tấm phong cách khác nhau được tham chiếu bởi cùng một tài liệu HTML (có, bạn có thể đính kèm nhiều hơn trên tệp CSS cho một mã HTML của trang Web nhất định). Tuy nhiên, trong một trong những tờ này, H1 được đặt kiểu in đậm, và trong một tờ khác, nó có dạng chữ nghiêng. Trình duyệt kém làm gì trong trường hợp này? Đặc điểm kỹ thuật nào thắng?
Không giống như các ví dụ về va chạm theo phong cách trước đó trong chương này, nơi
gần gũi có thể được sử dụng để tuyên bố người chiến thắng, ở đây bạn có cả hai phong cách ở mức cùng độ gần gũi (cùng độ đặc hiệu). Cả hai định nghĩa kiểu này đều nằm trong các trang kiểu ngoài. Trong trường hợp này, trình duyệt thực hiện một phép toán kỳ quái để đưa ra quyết định sử dụng kiểu nào.Như trước đây, phong cách "cụ thể" hơn sẽ thắng. Nhưng điều gì được coi là đặc trưng trong cuộc thi này? Nó không giống như yếu tố "gần gũi". Trình duyệt phải tính toán một chút, nhưng bạn thực sự không thể gọi đó là điều này. Đây chỉ là một loại sự tích lũy bất thường của các giá trị mà một số phong cách có đơn đặt hàng của trọng lượng lớn hơn những người khác. Đừng lo lắng đầu của bạn khá về công cụ này nếu bạn không thấy tính toán đặc biệt thú vị.
Trình duyệt làm gì để tính toán độ đặc hiệu của hai phong cách cạnh tranh nếu yếu tố "gần gũi" của họ giống hệt nhau? Ba điều:
Nhìn vào một phong cách và đếm số thuộc tính ID nó có, nếu có
- Đếm số thuộc tính lớp, nếu có
- Đếm số bộ chọn (bạn có thể nhóm các bộ chọn trong một phong cách như thế này: h1, h2, h3)
- Trình duyệt sau đó không thêm
thêm các số này lại với nhau; nó chỉ đơn thuần nối các chữ số . Có lẽ đây là một số học được sử dụng bởi người ngoài hành tinh trong thiên hà của họ, nhưng tôi chắc chắn chưa bao giờ nghe nói về nó. Hãy tưởng tượng nếu bạn có số 130 bằng quy trình ghép nối sau đây: 1 trái táo, 3 quả cam, 0 chuối = 130 Quy trình này cho quả táo 10 lần trọng lượng "cam" và 100 lần trọng lượng của chuối. Dưới đây là một vài ví dụ cho thấy nó hoạt động như thế nào khi được sử dụng để xác định tính cụ thể trong một CSS. Chỉ giả vờ là bạn trở lại lớp toán lớp ba.
Chú ý, lớp! Số độ đặc hiệu của bộ chọn này là gì?
ul h1 li. đỏ {color: yellow;}
Bất cứ ai nhận được câu trả lời 13?
Câu trả lời đúng là 13. Bạn có
0 ID, 1 thuộc tính lớp (màu đỏ), và 3 selectors (ul h1 li)
Đó là "bổ sung," để nói chuyện, với 013. Bây giờ, kiddies, những người có thể giải thích làm thế nào bạn có được một sự cụ thể của 1 cho các định nghĩa chọn sau đây?
H1 {color: blue;}
Sau khi tính xác thực đã được xác định, con số cao hơn sẽ thắng. Giả sử hai kiểu có mâu thuẫn bởi vì cả hai đều xác định màu của H1, nhưng xác định nó một cách khác. Nhưng vì một định nghĩa có giá trị độ đặc hiệu là 13 và chỉ khác là 1, thì dòng tiêu đề H1 là màu vàng, chứ không phải màu xanh lam.
Điều gì sẽ xảy ra nếu hai quy tắc trở nên có cùng độ đặc hiệu? Trong trường hợp đó (giả định rằng cả hai đều nằm trong một trang tính, hoặc cách khác là "gần gũi" với thẻ HTML), quy tắc được xác định cuối cùng sẽ giành chiến thắng.
