Mẹo cho Công cụ cho nhà phát triển: Khám phá các vấn đề về CSS

Sofia Emelianova
Sofia Emelianova

Bạn đã bao giờ áp dụng CSS cho một phần tử nhưng CSS không hoạt động chưa?

Với Công cụ của Chrome cho nhà phát triển, bạn có thể phát hiện nhanh các vấn đề về CSS, gỡ lỗi và kiểm tra các vấn đề đó.

Xem video để tìm hiểu cách ngăn Phần tử > Kiểu làm nổi bật các vấn đề về CSS:

  • Cảnh báo. Thuộc tính có cú pháp không hợp lệ

  • Hộp đánh dấu. Thuộc tính bị ghi đè

  • Hộp đánh dấu. Tài sản không hoạt động Thông tin.Có gợi ý.

  • Kế thừa từ parent

    • Hộp đánh dấu. tài sản kế thừa
    • Hộp đánh dấu. Tài sản không kế thừa
  • Hộp đánh dấu. Thuộc tính viết tắt có thể mở rộng Mở rộng.

    • Hộp đánh dấu. Thuộc tính dài bị ghi đè
    • Hộp đánh dấu. Thuộc tính dài tay đang hoạt động

biểu định kiểu tác nhân người dùng

  • Tài sản không chỉnh sửa được
  • Thuộc tính không thể chỉnh sửa bị ghi đè

Các mẹo gỡ lỗi khác:

  • Sử dụng bộ lọc trong ngăn Styles (Kiểu) để tập trung vào một thuộc tính mà bạn quan tâm.
  • Sử dụng ngăn Computed (Tính toán) để xem tất cả những người chiến thắng Cascade và các giá trị được tính toán của chúng.
  • Trong ngăn Computed (Tính toán), hãy mở rộng một thuộc tính rồi nhấp vào một đường liên kết để tìm nguồn của thuộc tính đó trong ngăn Styles (Kiểu).

Để tìm hiểu thêm về tất cả các cách Công cụ cho nhà phát triển làm nổi bật các vấn đề về CSS, hãy xem bài viết Tìm CSS không hợp lệ, bị ghi đè, không hoạt động và các CSS khác.

Để nâng cao kiến thức chuyên môn về CSS, hãy xem bài viết Tìm hiểu về CSS.

Để tìm hiểu cách tạo những trang web có giao diện đẹp mắt và phù hợp với mọi người, hãy xem bài viết Tìm hiểu về thiết kế thích ứng.