Bây giờ bạn đã bắt đầu quen với việc sử dụng một số quy tắc CSS cơ bản, đã đến lúc bắt đầu tìm hiểu các "khái niệm lớn" của CSS. Kế thừa, Cascade và Tính đặc hiệu là ba yếu tố lớn. Hiểu những khái niệm này sẽ cho phép bạn viết các biểu định kiểu rất mạnh mẽ và cũng tiết kiệm thời gian bằng cách viết ít quy tắc CSS hơn
Trong CSS, một số kiểu được kế thừa xuống cây tài liệu HTML trong khi những kiểu khác thì không
Mặc dù điều này có thể gây nhầm lẫn, nhưng nguyên tắc đằng sau nó thực sự được thiết kế để cho phép viết ít quy tắc CSS hơn
Phong cách kế thừa
Các kiểu được kế thừa thường liên quan đến kiểu của văn bản tài liệu
Thuộc tính phông chữ được kế thừa. Đây là lý do tại sao chúng tôi thường sử dụng phần tử để đính kèm các kiểu phông chữ của mình
Phần tử body trong HTML của chúng tôi là phần tử gốc của tất cả các phần tử HTML khác của chúng tôi [không bao gồm phần]. Đặt thuộc tính phông chữ trên phần tử body cho phép phần còn lại của tài liệu kế thừa quy tắc phông chữ
Sử dụng quy tắc trên, tất cả văn bản [trừ khi chúng tôi chỉ định khác] sẽ có kích thước 14px với chiều cao dòng 18px và là Helvetica hoặc Verdana
Các kiểu không được kế thừa
Các kiểu không được kế thừa thường liên quan đến sự xuất hiện của các phần tử
Ví dụ: thuộc tính đường viền không được kế thừa vì nó sẽ không có ý nghĩa. Hãy nhớ điều gì xảy ra khi chúng ta sử dụng bộ chọn chung để đặt thuộc tính đường viền?
Trang tham khảo thừa kế
Nói chung, bạn chỉ cần sử dụng lẽ thường để tìm hiểu xem một tài sản có được thừa kế hay không. Hãy tự nghĩ: "Có nên thừa kế tài sản này không?"
Nếu lý luận đơn giản không thành công, trang tham chiếu CSS sau đây sẽ liệt kê nhiều thuộc tính CSS. Cột bên phải cho biết tài sản có được thừa kế hay không
Các quy tắc CSS thường xung đột với nhau. Trong thực tế, đây là những gì chúng tôi muốn. Bí quyết là hiểu các quy tắc xung đột sẽ được áp dụng như thế nào
Tính cụ thể là một trong những cách mà các quy tắc xung đột được áp dụng
Bộ chọn có các giá trị quan trọng [hoặc tính đặc hiệu] khác nhau. Đây là danh sách ngắn [được liệt kê theo thứ tự quan trọng]
- bộ chọn id
- bộ chọn lớp và lớp giả
- bộ chọn phần tử
Nếu nhiều quy tắc CSS xung đột với nhau, thì bộ chọn cụ thể hoặc quan trọng nhất sẽ được áp dụng
Tính toán mức độ cụ thể
Thông thường, chúng tôi kết hợp các loại bộ chọn khác nhau trong CSS của mình để tạo quy tắc. Chúng ta có thể sử dụng một kỹ thuật tương đối đơn giản để đánh giá mức độ cụ thể của từng quy tắc
Giả sử chúng ta có đoạn mã HTML sau
________1Bây giờ, giả sử chúng ta có các quy tắc CSS sau [số dòng được thêm vào để rõ ràng]
- link
- link
Có một hệ thống tính điểm đơn giản cho từng kiểu mà bạn đưa vào bố cục ba giá trị như thế này
A - B - C
Đây là cách hệ thống tính điểm hoạt động
- Thêm một vào A cho mỗi ID trong bộ chọn
- Thêm một vào B cho mỗi lớp hoặc lớp giả trong bộ chọn
- Thêm một vào C cho mỗi tên thành phần
- Đọc kết quả dưới dạng số có ba chữ số
Vì vậy, tất cả các quy tắc CSS 1-3 trong đoạn mã trên đều áp dụng cho cùng một thẻ
- link
- link
- link
- link
Như chúng ta có thể thấy, bộ chọn
- link
- link
- link
- link
Đối với những bạn không thiên về toán học, luôn có phương pháp đồ thị này
Chúng ta đã nói về cách có thể có nhiều nguồn phong cách CSS khác nhau. Làm thế nào để chúng ta biết cái nào sẽ được sử dụng?
Trong CSS, các biểu định kiểu xếp tầng theo thứ tự quan trọng. Nếu các quy tắc trong các biểu định kiểu khác nhau xung đột với nhau, thì quy tắc từ biểu định kiểu quan trọng nhất sẽ thắng
Dưới đây là danh sách các nguồn có thể có của quy tắc CSS. Chúng được liệt kê theo thứ tự quan trọng. Là người tạo biểu định kiểu, bạn là tác giả
- Kiểu nội tuyến của tác giả
- Kiểu nhúng của tác giả [còn gọi là. biểu định kiểu bên trong]
- Tác giả biểu định kiểu bên ngoài
- Biểu định kiểu người dùng
- Biểu định kiểu trình duyệt mặc định
Chúng tôi đã thấy thác trong hành động. Tất cả các trình duyệt đều có biểu định kiểu mặc định, được chỉ định là ít quan trọng nhất
Điều gì xảy ra khi xung đột xảy ra?
Đôi khi có thể áp dụng hai hoặc nhiều khai báo cho cùng một phần tử. Cũng có thể giữa họ có mâu thuẫn. Khi xung đột như thế này xảy ra, khai báo có trọng số cao nhất được sử dụng. Vậy trọng lượng được xác định như thế nào?
Các quy tắc Cascade
- Tìm tất cả các khai báo có bộ chọn khớp với một phần tử cụ thể
- Sắp xếp các tờ khai này theo trọng lượng và xuất xứ
- Sắp xếp các bộ chọn theo tính đặc hiệu
- Sắp xếp theo thứ tự được chỉ định
Để biết mô tả đầy đủ về các quy tắc này, hãy xem Điều gì xảy ra khi xung đột xảy ra?
Các vấn đề về đơn đặt hàng CSS
Trong CSS, thứ tự mà chúng tôi chỉ định các quy tắc của mình rất quan trọng
Nếu tồn tại một quy tắc từ cùng một biểu định kiểu, có cùng mức độ cụ thể, thì quy tắc được khai báo cuối cùng trong tài liệu CSS sẽ là quy tắc được áp dụng
Một ví dụ sẽ minh họa điều này tốt nhất
- link
- link
Trong đoạn mã trên, chúng tôi đã tạo quy tắc cho các đoạn văn có ba màu khác nhau. Rõ ràng, các quy tắc này mâu thuẫn với nhau
Quy tắc #3 là quy tắc cụ thể nhất vì nó chỉ định tất cả các đoạn cũng có giá trị thuộc tính lớp là
- link
- link
Quy tắc #4 được khai báo cuối cùng trong tài liệu CSS và do đó, ghi đè Quy tắc #1 đã khai báo trước đó