Tài liệu tham khảo về các tính năng của CSS

Kayce Basques
Kayce Basques
X GitHub
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Khám phá các quy trình làm việc mới trong tài liệu tham khảo toàn diện này về các tính năng của Chrome DevTools liên quan đến việc xem và thay đổi CSS.

Hãy xem bài viết Xem và thay đổi CSS để tìm hiểu những thông tin cơ bản.

Chọn một phần tử

Bảng điều khiển Phần tử của Công cụ cho nhà phát triển cho phép bạn xem hoặc thay đổi CSS của một phần tử tại một thời điểm.

Ví dụ về một phần tử được chọn.

Trên ảnh chụp màn hình, phần tử h1 được làm nổi bật bằng màu xanh dương trong Cây DOM là phần tử đã chọn. Ở bên phải, các kiểu của phần tử sẽ xuất hiện trong thẻ Kiểu. Ở bên trái, phần tử này được đánh dấu trong khung nhìn, nhưng chỉ vì chuột đang di chuột lên phần tử đó trong Cây DOM.

Hãy xem phần Xem CSS của một phần tử để biết hướng dẫn.

Có nhiều cách để chọn một phần tử:

  • Trong khung hiển thị, hãy nhấp chuột phải vào phần tử rồi chọn Kiểm tra.
  • Trong Công cụ cho nhà phát triển, hãy nhấp vào Chọn một phần tử Chọn một phần tử hoặc nhấn tổ hợp phím Command+Shift+C (Mac) hoặc Control+Shift+C (Windows, Linux), rồi nhấp vào phần tử trong khung hiển thị.
  • Trong Công cụ cho nhà phát triển, hãy nhấp vào phần tử trong Cây DOM.
  • Trong Công cụ cho nhà phát triển, hãy chạy một truy vấn như document.querySelector('p') trong Bảng điều khiển, nhấp chuột phải vào kết quả rồi chọn Hiện trong bảng điều khiển Phần tử.

Xem CSS

Sử dụng thẻ Elements (Thành phần) > Styles (Kiểu) và Computed (Được tính toán) để xem các quy tắc CSS và chẩn đoán các vấn đề về CSS.

Thẻ Kiểu hiển thị các đường liên kết ở nhiều vị trí đến nhiều vị trí khác, bao gồm nhưng không giới hạn ở:

  • Bên cạnh các quy tắc CSS, đối với biểu định kiểu và nguồn CSS. Những đường liên kết như vậy sẽ mở bảng điều khiển Nguồn. Nếu biểu định kiểu được rút gọn, hãy xem phần Giúp tệp rút gọn dễ đọc.
  • Trong phần Kế thừa từ ..., đến các phần tử mẹ.
  • Trong các lệnh gọi var(), đến các khai báo thuộc tính tuỳ chỉnh.
  • Trong các thuộc tính viết tắt animation, thành @keyframes.
  • Đường liên kết Tìm hiểu thêm trong chú thích của công cụ.
  • Và hơn thế nữa.

Dưới đây là một số điểm nổi bật:

Nhiều đường liên kết được làm nổi bật.

Các đường liên kết có thể được tạo kiểu khác nhau. Nếu bạn không chắc chắn một thành phần nào đó có phải là đường liên kết hay không, hãy thử nhấp vào thành phần đó để tìm hiểu.

Xem chú giải công cụ có tài liệu CSS, độ cụ thể và giá trị thuộc tính tuỳ chỉnh

Elements (Phần tử) > Styles (Kiểu) sẽ hiển thị chú giải công cụ chứa thông tin hữu ích khi bạn di chuột qua các phần tử cụ thể.

Xem tài liệu CSS

Để xem chú thích có nội dung mô tả ngắn về CSS, hãy di chuột lên tên thuộc tính trong thẻ Kiểu.

Chú giải công cụ có tài liệu về một thuộc tính CSS.

Nhấp vào Tìm hiểu thêm để chuyển đến Tài liệu tham khảo về CSS của MDN cho thuộc tính này.

Để tắt chú thích, hãy đánh dấu vào Hộp đánh dấu. Không hiển thị.

Để bật lại, hãy đánh dấu vào Cài đặt. Settings > Preferences > Elements > Hộp đánh dấu. Show CSS documentation tooltip (Hiện chú thích tài liệu CSS).

Mức độ cụ thể của bộ chọn chế độ xem

Di chuột lên một bộ chọn để xem chú thích có trọng số cụ thể của bộ chọn đó.

Chú thích có trọng số cụ thể của một bộ chọn khớp.

Xem giá trị của thuộc tính tuỳ chỉnh

Di chuột lên một --custom-property để xem giá trị của đó trong chú thích.

Giá trị của một thuộc tính tuỳ chỉnh trong chú giải công cụ.

Xem CSS không hợp lệ, bị ghi đè, không hoạt động và các CSS khác

Thẻ Kiểu nhận diện nhiều loại vấn đề về CSS và làm nổi bật các vấn đề đó theo nhiều cách.

Xem phần Tìm hiểu về CSS trong thẻ Styles (Kiểu).

Chỉ xem CSS thực sự được áp dụng cho một phần tử

Thẻ Kiểu cho bạn thấy tất cả các quy tắc áp dụng cho một phần tử, bao gồm cả những khai báo đã bị ghi đè. Khi bạn không quan tâm đến các khai báo bị ghi đè, hãy sử dụng thẻ Đã tính toán để chỉ xem CSS thực sự đang được áp dụng cho một phần tử.

  1. Chọn một phần tử.
  2. Chuyển đến thẻ Đã tính toán trong bảng điều khiển Phần tử.

Thẻ Đã tính toán.

Đánh dấu vào hộp Hiện tất cả để xem tất cả các tài sản.

Xem phần Tìm hiểu về CSS trong thẻ Đã tính toán.

Xem các thuộc tính CSS theo thứ tự bảng chữ cái

Sử dụng thẻ Đã tính toán. Xem phần Chỉ xem CSS thực sự được áp dụng cho một phần tử.

Xem các thuộc tính CSS được kế thừa

Đánh dấu vào hộp Show All (Hiện tất cả) trong thẻ Computed (Đã tính toán). Xem Chỉ xem CSS thực sự được áp dụng cho một phần tử.

Hoặc di chuyển đến thẻ Kiểu rồi tìm các phần có tên Inherited from <element_name>.

Xem phần Inherited from... (Kế thừa từ...) trong thẻ Styles (Kiểu).

Xem các quy tắc @ của CSS

At-rule là các câu lệnh CSS cho phép bạn kiểm soát hành vi của CSS. Phần tử > Kiểu cho thấy các quy tắc @ sau đây trong các phần riêng biệt:

Xem @property quy tắc @

Quy tắc @ @property CSS cho phép bạn xác định rõ ràng các thuộc tính tuỳ chỉnh CSS và đăng ký chúng trong một biểu định kiểu mà không cần chạy bất kỳ JavaScript nào.

Di chuột lên tên của thuộc tính đó trong thẻ Kiểu để xem chú thích có giá trị, nội dung mô tả và đường liên kết đến thông tin đăng ký của thuộc tính đó trong phần @property có thể thu gọn ở cuối thẻ Kiểu.

Để chỉnh sửa một quy tắc @property, hãy nhấp đúp vào tên hoặc giá trị của quy tắc đó.

Xem @supports quy tắc @

Thẻ Kiểu cho bạn biết các quy tắc @ @supports CSS nếu chúng được áp dụng cho một phần tử. Ví dụ: kiểm tra phần tử sau:

Xem các quy tắc @supports.

Nếu trình duyệt của bạn hỗ trợ chức năng lab(), phần tử này sẽ có màu xanh lục, nếu không thì sẽ có màu tím.

Xem @scope quy tắc @

Thẻ Kiểu cho bạn biết các quy tắc @ @scope CSS nếu chúng được áp dụng cho một phần tử.

@scope-rule mới là một phần của CSS Cascading and Inheritance Level 6 specification. Các quy tắc này cho phép bạn xác định phạm vi của kiểu CSS, tức là áp dụng kiểu một cách rõ ràng cho các phần tử cụ thể.

Xem quy tắc @scope trong bản xem trước sau:

  1. Kiểm tra văn bản trên thẻ trong bản xem trước.
  2. Trên thẻ Kiểu, hãy tìm quy tắc @scope.

Quy tắc @scope.

Trong ví dụ này, quy tắc @scope sẽ ghi đè khai báo CSS background-color chung cho tất cả các phần tử <p> bên trong các phần tử có lớp card.

Để chỉnh sửa quy tắc @scope, hãy nhấp đúp vào quy tắc đó.

Xem @font-palette-values quy tắc @

Quy tắc @font-palette-values CSS at-rule cho phép bạn tuỳ chỉnh các giá trị mặc định của thuộc tính font-palette. Elements (Phần tử) > Styles (Kiểu) cho thấy quy tắc @ này trong một phần riêng.

Xem phần @font-palette-values trong bản xem trước tiếp theo:

  1. Kiểm tra dòng văn bản thứ hai trong bản xem trước.
  2. Trong phần Kiểu, hãy tìm phần @font-palette-values.

Quy tắc @font-palette-values.

Trong ví dụ này, các giá trị bảng phông chữ --New sẽ ghi đè các giá trị mặc định của phông chữ có màu.

Để chỉnh sửa các giá trị tuỳ chỉnh, hãy nhấp đúp vào các giá trị đó.

Xem @position-try quy tắc @

Quy tắc CSS @position-try cùng với thuộc tính position-try-options cho phép bạn xác định các vị trí neo thay thế cho các phần tử. Để tìm hiểu thêm, hãy xem bài viết Giới thiệu về CSS Anchor Positioning API.

Elements > Styles (Phần tử > Kiểu) sẽ phân giải và liên kết những nội dung sau:

  • giá trị thuộc tính position-try-options cho một phần @position-try --name chuyên dụng.
  • Giá trị thuộc tính position-anchor và đối số anchor() cho các phần tử tương ứng có thuộc tính popovertarget.

Kiểm tra các giá trị position-try-options và phần @position-try trong bản xem trước tiếp theo:

Bản minh hoạ sử dụng phần tử neo có popover
  1. Trong bản xem trước, hãy mở trình đơn con, tức là nhấp vào TÀI KHOẢN CỦA BẠN rồi nhấp vào CỬA HÀNG TRỰC TUYẾN.
  2. Kiểm tra phần tử bằng id="submenu" trong bản xem trước.
  3. Trong Styles (Kiểu), hãy tìm thuộc tính position-try-options rồi nhấp vào giá trị --bottom của thuộc tính đó. Thẻ Kiểu sẽ đưa bạn đến mục @position-try tương ứng.
  4. Nhấp vào đường liên kết giá trị position-anchor hoặc các đối số anchor() tương tự. Bảng Elements (Phần tử) chọn phần tử có thuộc tính popovertarget tương ứng và thẻ Styles (Kiểu) cho thấy CSS của phần tử.

Thuộc tính position-try-options, phần @position-try và phần tử có thuộc tính mục tiêu của cửa sổ bật lên.

Để chỉnh sửa giá trị, hãy nhấp đúp vào giá trị đó.

Xem mô hình hộp của một phần tử

Để xem mô hình hộp của một phần tử, hãy chuyển đến thẻ Kiểu rồi nhấp vào nút Hiện thanh bên. Hiện thanh bên trong thanh thao tác.

sơ đồ Mô hình hộp.

Để thay đổi một giá trị, hãy nhấp đúp vào giá trị đó.

Tìm kiếm và lọc CSS của một phần tử

Sử dụng hộp Bộ lọc trên thẻ Kiểu và Được tính toán để tìm các thuộc tính hoặc giá trị CSS cụ thể.

Lọc thẻ Kiểu.

Để tìm kiếm cả các thuộc tính được kế thừa trong thẻ Computed (Đã tính toán), hãy đánh dấu vào hộp Show All (Hiện tất cả).

Lọc các thuộc tính được kế thừa trong thẻ Đã tính toán.

Để chuyển đến thẻ Được tính toán, hãy nhóm các thuộc tính được lọc vào các danh mục có thể thu gọn bằng cách đánh dấu vào Nhóm.

Nhóm các tài sản được lọc.

Mô phỏng một trang được đặt tiêu điểm

Nếu bạn chuyển tiêu điểm từ trang sang Công cụ cho nhà phát triển, một số phần tử lớp phủ sẽ tự động ẩn nếu chúng được kích hoạt bằng tiêu điểm. Ví dụ: danh sách thả xuống, trình đơn hoặc bộ chọn ngày. Tuỳ chọn Mô phỏng một trang được đặt trọng tâm cho phép bạn gỡ lỗi một phần tử như vậy giống như khi phần tử đó đang ở trọng tâm.

Hãy thử mô phỏng một trang được đặt tiêu điểm trên trang minh hoạ này:

  1. Đặt tiêu điểm vào phần tử đầu vào. Một phần tử khác sẽ xuất hiện bên dưới phần tử này.
  2. Mở Công cụ cho nhà phát triển. Cửa sổ Công cụ cho nhà phát triển hiện đang là trọng tâm thay vì trang, nên phần tử sẽ biến mất một lần nữa.
  3. Trong Elements (Phần tử) > Styles (Kiểu), hãy nhấp vào :hov, đánh dấu vào Emulate a focused page (Mô phỏng một trang được đặt tiêu điểm) và đảm bảo bạn đã chọn phần tử đầu vào. Giờ đây, bạn có thể kiểm tra phần tử bên dưới.

Trước và sau khi bật lựa chọn &quot;Mô phỏng một trang được đặt tiêu điểm&quot;.

Bạn cũng có thể tìm thấy lựa chọn tương tự trên bảng điều khiển Rendering (Kết xuất).

Để khám phá thêm các cách đóng băng một phần tử, hãy xem bài viết Đóng băng màn hình và kiểm tra các phần tử biến mất.

Bật/tắt một lớp giả

Cách bật/tắt một lớp giả:

  1. Chọn một phần tử.
  2. Trên bảng Phần tử, hãy chuyển đến thẻ Kiểu.
  3. Nhấp vào :hov.
  4. Đánh dấu vào lớp giả mà bạn muốn bật.

Bật/tắt trạng thái giả di chuột trên một phần tử.

Trong ví dụ này, bạn có thể thấy rằng DevTools áp dụng khai báo background-color cho phần tử, mặc dù phần tử đó thực sự không được di chuột qua.

Thẻ Styles (Kiểu) cho thấy các lớp giả sau đây cho tất cả các phần tử:

Ngoài ra, một số phần tử có thể có các lớp giả riêng. Khi bạn chọn một phần tử như vậy, thẻ Styles (Kiểu) sẽ cho thấy một phần Force specific element state (Buộc thực thi trạng thái cụ thể của thành phần) mà bạn có thể mở rộng và bật các lớp giả dành riêng cho phần tử đó.

Mục &quot;Buộc thực thi trạng thái cụ thể của thành phần&quot; của một phần tử &quot;textarea&quot;.

Hãy xem bài viết Thêm trạng thái giả vào một lớp để xem hướng dẫn tương tác.

Xem các phần tử giả làm nổi bật được kế thừa

Phần tử giả cho phép bạn tạo kiểu cho các phần cụ thể của phần tử. Phần tử giả đánh dấu là những phần của tài liệu có trạng thái "đã chọn" và được tạo kiểu là "được đánh dấu" để cho người dùng biết trạng thái này. Ví dụ: các phần tử giả như vậy là ::selection, ::spelling-error, ::grammar-error và ::highlight.

Như đã đề cập trong quy cách, khi nhiều kiểu xung đột, tầng sẽ xác định kiểu chiến thắng.

Để hiểu rõ hơn về tính kế thừa và mức độ ưu tiên của các quy tắc, bạn có thể xem các phần tử giả được kế thừa:

  1. Kiểm tra văn bản bên dưới.

    Tôi đã kế thừa kiểu của phần tử giả làm nổi bật của phần tử mẹ. Chọn tôi!

  2. Chọn một phần văn bản ở trên.

  3. Trong thẻ Kiểu, hãy di chuyển xuống để tìm phần Inherited from ::selection pseudo of....

Xem phần Inherited (Kế thừa) của thẻ Styles (Kiểu).

Xem các lớp xếp tầng

Lớp xếp tầng cho phép bạn kiểm soát rõ ràng hơn các tệp CSS để ngăn chặn xung đột về độ cụ thể của kiểu. Điều này hữu ích cho các cơ sở mã lớn, hệ thống thiết kế và khi quản lý các kiểu của bên thứ ba trong ứng dụng.

Để xem các lớp xếp tầng, hãy kiểm tra phần tử tiếp theo rồi mở Elements (Phần tử) > Styles (Kiểu).

Trong thẻ Styles (Kiểu), hãy xem 3 lớp xếp tầng và kiểu của chúng: