Ghi đè kiểu CSS hoạt động như thế nào?

Bạn có thể đã thực hiện khái niệm ưu tiên trong nhiều lĩnh vực của cuộc sống, tôi. e. , ưu tiên công việc, nhà cửa và những thứ cá nhân của bạn. Trong lập trình HTML, trình duyệt cần dự đoán mức độ ưu tiên của các phần tử hoặc hướng dẫn để hiển thị tương ứng. Khái niệm này được gọi là “CSS Override”. Dường như có nhiều quy tắc khác nhau quyết định xem một kiểu có thay thế kiểu khác hay không dựa trên kiểu bộ chọn được sử dụng để thiết kế một thành phần. Sử dụng kỹ thuật ghi đè, chúng ta có thể ưu tiên các phần tử cùng loại có cùng thuộc tính trong tệp HTML. Vì vậy, nếu bạn chưa quen với kiểu ghi đè CSS, bài viết này sẽ giúp bạn rất nhiều. Hãy xem xét một số ví dụ được triển khai trên VS Code

ví dụ 1
Hãy bắt đầu với ví dụ đầu tiên để minh họa việc sử dụng ghi đè để tạo kiểu dáng trong HTML với sự trợ giúp của CSS. Trong ví dụ này, chúng ta sẽ xem xét quyền ưu tiên ghi đè của biểu định kiểu bên trong và bên ngoài cũng như CSS được sử dụng trong thẻ kiểu. Vì vậy, chúng tôi đã bắt đầu minh họa này bằng thẻ “HTML” chính. Thẻ head chứa liên kết và thẻ style bên trong nó. Bắt đầu giải thích về chương trình này từ thẻ “body” chính. Vùng cơ thể bao gồm năm tiêu đề cho năm kích cỡ khác nhau, tôi. e. , lớn nhất đến nhỏ nhất

Sau tất cả các tiêu đề, thẻ body đã được đóng và phần đóng HTML theo sau nó. Bây giờ chúng ta hãy xem qua thẻ “head”. Chúng tôi đã sử dụng thẻ “tiêu đề” bên trong nó để đặt tiêu đề cho trang HTML là “Kiểu ghi đè”. Sau đó, chúng tôi đã sử dụng thẻ “liên kết” để tham chiếu biểu định kiểu bên ngoài có tên “thử nghiệm. css” từ cùng một thư mục bằng thuộc tính “href”. Sau này, chúng ta có thẻ “Kiểu” thuộc loại “văn bản/CSS”. Thẻ này đã được sử dụng để tạo kiểu cho vùng nội dung của tệp HTML này. Trong đó, chúng tôi đã sử dụng các tiêu đề h1, h3 và h5 và chỉ định thuộc tính “color” để tô màu chúng là “maroon”. Ở đây, thẻ style và head gần nhau

Ghi đè kiểu CSS hoạt động như thế nào?

Bây giờ, hãy nhìn vào tệp CSS bên ngoài, “test. css”. Chúng tôi đã sử dụng phần tử nội dung, tiêu đề h2 và h4 để tạo kiểu. Màu nền của thuộc tính được sử dụng để gán màu cho phần thân HTML. Thuộc tính color và margin-left đã được sử dụng để hiển thị tiêu đề 1 và 4 bằng màu tím và đặt lề trái là 10 pixel. Thẻ kiểu trong HTML chứa các màu khác nhau cho tất cả các tiêu đề, trong khi tệp bên ngoài này chứa các màu khác nhau cho tiêu đề 2 và 4

Ghi đè kiểu CSS hoạt động như thế nào?

Hãy lưu mã và gỡ lỗi bằng nút menu “Chạy” từ thanh tác vụ mã Visual Studio. Đầu ra hiển thị trang HTML với tiêu đề “Kiểu ghi đè”. Các tiêu đề 1, 3 và 5 chuyển sang màu hạt dẻ, trong khi các tiêu đề 4 và 5 chuyển sang màu tím. Điều này là do kiểu thẻ kiểu được ưu tiên đầu tiên và bị HTML ghi đè thay vì biểu định kiểu bên ngoài

Ghi đè kiểu CSS hoạt động như thế nào?

Hãy cập nhật mã một lần nữa. Chúng tôi đã cập nhật màu cho tiêu đề 1, 3 và 5 của tệp HTML này trong thẻ kiểu trong thẻ đầu. Phần còn lại sẽ không thay đổi ngay bây giờ

Ghi đè kiểu CSS hoạt động như thế nào?

Trong biểu định kiểu bên ngoài, chúng tôi đã sử dụng tất cả năm tiêu đề để thay đổi màu sắc và lề thành màu tím và 30 pixel tương ứng. Lưu tệp CSS này và chạy lại mã

Ghi đè kiểu CSS hoạt động như thế nào?

Lần này, chỉ các tiêu đề 1, 3 và 5 có màu “xanh cỏ” do việc sử dụng và ưu tiên tạo kiểu bên trong tệp thay vì tệp CSS bên ngoài

Ghi đè kiểu CSS hoạt động như thế nào?

ví dụ 2
Chúng tôi đã bắt đầu ví dụ này với thẻ HTML theo sau là thẻ đầu và thẻ tiêu đề. Thẻ body của tệp HTML này chứa tiêu đề duy nhất 1 sẽ được hiển thị trên trang web HTML. Thẻ chính nội dung và HTML đã bị đóng tại đây sau khi sử dụng các phần tử nội dung. Thẻ kiểu trong thẻ đầu chứa kiểu cho tiêu đề 1, tôi. e. , màu được chỉ định là “tím”. Phong cách và thẻ đầu được đóng ở đây. Hãy chạy mã HTML này bằng menu “Run” sau tùy chọn “Start Debugging”

Ghi đè kiểu CSS hoạt động như thế nào?

Việc thực thi tệp này đã hiển thị một tiêu đề đơn giản có kích thước 1 màu tím tại tab mới của trình duyệt Chrome của chúng tôi như được hiển thị bên dưới

Ghi đè kiểu CSS hoạt động như thế nào?

Hãy thực hiện một số kiểu ghi đè trong tệp HTML này. Vì vậy, chúng tôi đã chỉ định lớp “A” cho tiêu đề 1 trong phần mở thẻ h1. Ngoài ra, trong thẻ kiểu, chúng tôi đã sử dụng lớp “a” này để tô màu tiêu đề màu nâu, tôi. e. , sử dụng thuộc tính màu. Hãy lưu và chạy mã này

Ghi đè kiểu CSS hoạt động như thế nào?

Bây giờ, đầu ra cho thấy màu của tiêu đề đã được cập nhật thành màu nâu. Điều này có nghĩa là phần tử lớp ghi đè lên các phần tử kiểu dáng đơn giản

Ghi đè kiểu CSS hoạt động như thế nào?

Bây giờ, chúng tôi đã sử dụng một lớp khác trong cùng thẻ h1 của phần thân HTML của tệp này. Tên lớp đã được chỉ định là “b” sau lớp “a”. Mặt khác, chúng tôi đã sử dụng lớp “b” để chỉ định màu “xanh cỏ” cho tiêu đề 1

Ghi đè kiểu CSS hoạt động như thế nào?

Sau khi lưu tập lệnh cập nhật HTML này, chúng tôi đã thực thi nó và nhận được kết quả sau. Đầu ra cho thấy màu của tiêu đề 1 đã được cập nhật thành “xanh cỏ”. Đó là bằng chứng cho thấy phần tử lớp có thể ghi đè phần tử lớp khác

Ghi đè kiểu CSS hoạt động như thế nào?

Hãy cập nhật lại mã và sử dụng phần tử “id” trong tiêu đề h1 của mã HTML. “Id” này có thể được sử dụng sau và trước các thành phần của lớp, như chúng tôi đã làm bên dưới. Sau này, trong thẻ kiểu, chúng tôi đã chỉ định màu “xanh dương” cho tiêu đề 1 bằng cách sử dụng id “c”

Ghi đè kiểu CSS hoạt động như thế nào?

Sau khi thực thi mã được cập nhật này, chúng tôi đã nhận được trang HTML được cập nhật. Màu của tiêu đề 1 đã được cập nhật thành xanh lam từ xanh cỏ. Điều này cho thấy phần tử “id” có thể ghi đè kiểu dáng phần tử “class”

Ghi đè kiểu CSS hoạt động như thế nào?

Bây giờ, chúng ta sẽ sử dụng kiểu nội tuyến cho mã HTML này và sử dụng thuộc tính “color” để biến tiêu đề 1 thành màu “hotpink” mà không cần thêm nó vào thẻ “style” bên ngoài. Thẻ kiểu nội tuyến này đã được sử dụng trước phần tử “id” của tiêu đề 1

Ghi đè kiểu CSS hoạt động như thế nào?

Sau khi chạy tệp HTML được cập nhật này, chúng tôi đã nhận được màu “hotpink” cho tiêu đề đã ghi đè phần tử “id”

Ghi đè kiểu CSS hoạt động như thế nào?

Sử dụng ". quan trọng” cùng với bất kỳ thuộc tính nào sẽ ưu tiên thuộc tính đó trước so với các thuộc tính khác. Chúng tôi đã sử dụng “. quan trọng” với thuộc tính màu của tiêu đề 1 và lưu nó

Ghi đè kiểu CSS hoạt động như thế nào?

Ưu tiên đã được trao cho thuộc tính màu “tím” được chỉ định cho “h1”

Ghi đè kiểu CSS hoạt động như thế nào?

Phần kết luận

Bài viết này giải thích thứ tự ưu tiên của các phần tử để thể hiện kiểu ghi đè CSS trong mã HTML. Đoạn giới thiệu giải thích chi tiết về ghi đè và mức độ ưu tiên cũng như việc sử dụng ghi đè kiểu cho các loại bộ chọn khác nhau một cách chi tiết bằng cách sử dụng các kỹ thuật tạo kiểu khác nhau. Đối với điều này, chúng tôi đã cố gắng triển khai các ví dụ khác nhau có chứa kiểu dáng nội tuyến, đường viền và biểu định kiểu bên ngoài. Chúng tôi đã thử các loại phần tử bộ chọn khác nhau cho các phần tử chủ yếu giống nhau để thực hiện kiểu dáng ghi đè

Các quy tắc ghi đè CSS là gì?

Sau đây là quy tắc ghi đè bất kỳ Quy tắc biểu định kiểu nào. .
Bất kỳ biểu định kiểu nội tuyến nào đều có mức độ ưu tiên cao nhất. .
Any rule defined in