Ưu tiên CSS nội tuyến so với CSS bên ngoài

Một phần để hiểu cách CSS 'xếp tầng' là hiểu các mức độ ưu tiên và cách chúng thực sự hoạt động. Vì vậy, hãy bắt đầu

Ghi chú. Để đơn giản hóa mọi thứ, chúng tôi sẽ không nói về từ khóa !important vì đây được coi là một phương pháp hay để hạn chế việc sử dụng từ khóa. Sau khi đọc bài viết này, bạn có thể muốn đọc ở đây khi có thể nên sử dụng !important

Các cách khác nhau để tạo kiểu cho một phần tử

Một phần tử HTML có thể được tạo kiểu theo 3 cách sau

• Di sản
• Biểu định kiểu (được nhúng hoặc bên ngoài)
• kiểu dáng nội tuyến

Di sản

Các phần tử con kế thừa một số kiểu từ phần tử cha của chúng. Không phải tất cả các phong cách đều có thể được kế thừa một cách tự nhiên (e. g đường viền, phần đệm, lề, v.v.). Tại đây bạn có thể đọc thêm về Kế thừa và tìm danh sách các thuộc tính có thể kế thừa

Chúng tôi có mã này

We are styling the parent (

)

Đây là kết quả

The child (

) was colored

Vì chúng tôi chưa chỉ định bất kỳ quy tắc nào cho

, nên nó sẽ bị 'chịu ảnh hưởng' bởi

Biểu định kiểu

Chúng ta có thể viết các quy tắc CSS trong một tệp bên ngoài và liên kết với nó bằng phần tử hoặc nhúng các quy tắc đó vào phần của trang bằng cách sử dụng phần tử