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

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Khám phá các quy trình công 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 phần Xem và thay đổi CSS để tìm hiểu kiến thức 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 từng phần tử một.

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

Trên ảnh chụp màn hình, phần tử h1 được làm nổi bật 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ử được làm nổi bật trong khung nhìn, chỉ khi chuột di chuột qua 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 nhìn, hãy nhấp chuột phải vào phần tử rồi chọn Inspect (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), sau đó nhấp vào phần tử trong khung nhìn.
  • 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ả, sau đó chọn Hiển thị trong bảng điều khiển Phần tử.

Xem CSS

Sử dụng các thẻ Phần tử > Kiểu và Đã 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, đến 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 giảm kích thước, hãy xem phần Làm cho tệp được rút gọn có thể đọc được.
  • Trong phần Kế thừa từ ..., đến các phần tử mẹ.
  • Trong các lệnh gọi var(), đến nội dung 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ú giải công cụ của tài liệu.
  • Và hơn thế nữa.

Dưới đây là một số cột trong số đó được đánh dấu:

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 một nội dung nào đó có phải là đường liên kết hay không, hãy thử nhấp vào nội dung đó để tìm hiểu.

Xem chú giải công cụ kèm theo tài liệu về CSS, đặc điểm và giá trị thuộc tính tuỳ chỉnh

Elements (Phần tử) > Styles (Kiểu) hiển thị chú giải công cụ có 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ú giải công cụ có nội dung mô tả ngắn về CSS, hãy di chuột qua tên thuộc tính trong thẻ Styles (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 CSS của MDN về thuộc tính này.

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

Để bật lại các tính năng này, hãy kiểm tra Cài đặt. Cài đặt > Lựa chọn ưu tiên > Phần tử > Hộp đánh dấu. Hiển thị chú thích tài liệu về CSS.

Xem tính cụ thể của bộ chọn

Hãy di chuột qua một bộ chọn để xem chú thích kèm theo trọng số đặc tả.

Chú giải công cụ 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 qua --custom-property để xem giá trị của biểu tượng đó trong chú giải công cụ.

Giá trị của thuộc tính tuỳ chỉnh trong chú thích.

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 ra 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ẻ Kiểu.

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

Thẻ Styles (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ả các nội dung khai báo đã bị ghi đè. Khi bạn không quan tâm đến các nội dung khai báo bị ghi đè, hãy sử dụng thẻ Computed (Đã 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ẻ Computed (Đã tính toán) trong bảng điều khiển Elements (Thành phần).

Thẻ Đã tính toán.

Đánh dấu vào hộp Show All (Hiển thị tất cả) để xem tất cả các cơ sở lưu trú.

Xem bài viết 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. Hãy 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 kế thừa

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

Ngoài ra, hãy cuộn thẻ Styles (Kiểu) và tìm các phần có tên Inherited from <element_name>.

Xem phần Kế thừa từ... của thẻ Kiểu.

Xem quy tắc at-rules của CSS

Quy tắc tại là các câu lệnh CSS cho phép bạn kiểm soát hành vi của CSS. Elements (Phần tử) > Styles (Kiểu) hiển thị các quy tắc at-rules sau đây trong các phần chuyên biệt:

Xem quy tắc tại @property

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

Di chuột qua tên của thuộc tính đó trong thẻ Kiểu để xem chú giải công cụ có giá trị, nội dung mô tả của thuộc tính và đường liên kết đến thông tin đăng ký 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 gốc

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

Xem quy tắc @supports.

Nếu trình duyệt của bạn hỗ trợ hàm 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 quy tắc tại @scope

Thẻ Kiểu cho bạn thấy các quy tắc @scope của CSS nếu các quy tắc đó được áp dụng cho một phần tử.

Quy tắc tại @scope mới là một phần của quy cách CSS cấp 6 về Lớp kế thừa và xếp chồng. Nói cách khác, 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ẻ Styles (Kiểu), hãy tìm quy tắc @scope.

Quy tắc @scope.

Trong ví dụ này, quy tắc @scope ghi đè phần khai báo background-color CSS toàn cục cho tất 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 quy tắc tại @font-palette-values

Quy tắc tại CSS @font-palette-values cho phép bạn tuỳ chỉnh các giá trị mặc định của tài sản font-palette. Phần tử > Kiểu hiển thị 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 Styles (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ữ màu.

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

Xem quy tắc tại @position-try

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 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ề API định vị quảng cáo cố định cuối màn hình CSS.

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

  • Giá trị thuộc tính position-try-options vào 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:

Minh hoạ cách sử dụng phần tử neo bằng popover
  1. Trong phần xem trước, hãy mở trình đơn phụ, tức là nhấp vào TÀI KHOẢN CỦA BẠN, rồi nhấp vào TÁC TRẠNG CỬA HÀNG.
  2. Kiểm tra phần tử có id="submenu" trong bản xem trước.
  3. Trong 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 phần @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() giống nhau. Bảng điều khiển Phần tử chọn phần tử có thuộc tính popovertarget tương ứng và thẻ Kiểu cho thấy CSS của phần tử.

Thuộc tính vị trí-thử-options, mục @vị trí-thử và phần tử có thuộc tính mục tiêu 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 Filter (Bộ lọc) trên các thẻ Styles và Computed (Kiểu) để 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 kế thừa trong thẻ Đã tính, hãy đánh dấu vào hộp đánh dấu Hiển thị tất cả.

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

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

Nhóm các tài sản đã 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ố thành phần lớp phủ sẽ tự động ẩn nếu đượ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 tiêu điểm cho phép bạn gỡ lỗi một phần tử như thể phần tử đó đang ở tiêu điể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ử đó.
  2. Mở Công cụ cho nhà phát triển. Cửa sổ DevTools hiện đang ở tiêu điểm thay vì trang, vì vậy phần tử này lại biến mất.
  3. Trong Phần tử > Kiểu, hãy nhấp vào :hov, đánh dấu vào Mô phỏng trang được đặt tiêu điểm và nhớ 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 tuỳ 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 tuỳ chọn tương tự trên bảng điều khiển Rendering (Hiển thị).

Để khám phá thêm nhiều cách cố định một phần tử, hãy xem phần Cố định màn hình và kiểm tra các phần tử biến mất.

Bật/tắ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 điều khiển 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ả lập 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 phần khai báo background-color cho phần tử, mặc dù phần tử này không thực sự được di chuột qua.

Thẻ Styles (Kiểu) hiển thị 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ẽ hiển thị phần Force specific element state (Buộc thực thi trạng thái cụ thể của phần tử). Bạn có thể mở rộng và bật các lớp giả dành riêng cho phần tử đó.

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

Xem phần Thêm trạng thái giả vào một lớp để biết hướng dẫn tương tác.

Xem các phần tử giả lập 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ử. Các phần tử giả lập làm nổi bật là các phần tài liệu có trạng thái "đã chọn" và được tạo kiểu là "nổi bật" để 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 thông số kỹ thuật, khi nhiều kiểu xung đột với nhau, kiểu phân 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ủa nội dung nổi bật đượ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 gốc của phần tử giả. Hãy chọn tôi!

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

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

Xem mục Kế thừa trong thẻ Kiểu.

Xem các lớp xếp chồng

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

Để xem các lớp tầng, hãy kiểm tra phần tử tiếp theo và mở Phần tử > Kiểu.

Trong thẻ Kiểu, hãy xem 3 lớp tầng và kiểu của các lớp đó: page, component và base.

Các lớp tầng.

Để xem thứ tự lớp, hãy nhấp vào tên lớp hoặc nút Chuyển đổi lớp. Bật/tắt chế độ xem lớp CSS.

Lớp page có mức độ cụ thể cao nhất, do đó, nền của phần tử có màu xanh lục.

Cách xem một trang ở chế độ in:

  1. Mở Trình đơn lệnh.
  2. Bắt đầu nhập Rendering rồi chọn Show Rendering.
  3. Trong trình đơn thả xuống Emulate CSS Media (Mô phỏng CSS Media), hãy chọn print.

Xem CSS đã sử dụng và không sử dụng qua thẻ Phạm vi bao phủ

Thẻ Phạm vi cho bạn biết CSS mà một trang thực sự sử dụng.

  1. Nhấn tổ hợp phím Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) khi DevTools đang ở tiêu điểm để mở Trình đơn lệnh.

  2. Bắt đầu nhập coverage.

    Mở thẻ Mức độ sử dụng trong trình đơn Lệnh.

  3. Chọn Hiển thị mức độ phù hợp. Thẻ Coverage (Phạm vi bao phủ) sẽ xuất hiện.

    Thẻ Phạm vi.

  4. Nhấp vào Bắt đầu đo lường phạm vi và tải lại trang. Tải lại. Trang sẽ tải lại và thẻ Coverage (Mức độ sử dụng) cung cấp thông tin tổng quan về lượng CSS (và JavaScript) được sử dụng từ mỗi tệp mà trình duyệt tải.

    Tổng quan về mức độ sử dụng và không sử dụng CSS (và JavaScript).

    Màu xanh lục biểu thị CSS đã sử dụng. Màu đỏ đại diện cho CSS không dùng đến.

  5. Bạn có thể nhấp vào một tệp CSS để xem bảng chi tiết từng dòng về CSS mà tệp đó sử dụng trong bản xem trước ở trên.

    Bảng chi tiết từng dòng về CSS đã sử dụng và không sử dụng.

    Trên ảnh chụp màn hình, các dòng 55 đến 57 và 65 đến 67 của devsite-google-blue.css không được sử dụng, trong khi các dòng 59 đến 63 được sử dụng.

Buộc dùng chế độ xem trước bản in

Xem bài viết Buộc Công cụ cho nhà phát triển vào chế độ xem trước bản in.

Sao chép CSS

Từ một trình đơn thả xuống trong thẻ Kiểu, bạn có thể sao chép các quy tắc, nội dung khai báo, thuộc tính, giá trị của CSS riêng biệt

Ngoài ra, bạn có thể sao chép các thuộc tính CSS trong cú pháp JavaScript. Tuỳ chọn này rất hữu ích nếu bạn đang sử dụng thư viện CSS-in-JS.

Cách sao chép CSS:

  1. Chọn một phần tử.
  2. Trong thẻ Elements (Thành phần) > Styles (Kiểu), hãy nhấp chuột phải vào một thuộc tính CSS. Trình đơn thả xuống Sao chép CSS.

  3. Chọn một trong các tuỳ chọn sau từ trình đơn thả xuống:

    • Sao chép nội dung khai báo. Sao chép thuộc tính và giá trị của thuộc tính đó theo cú pháp CSS: css property: value;
    • Sao chép thuộc tính. Chỉ sao chép tên của property.
    • Sao chép giá trị. Chỉ sao chép value.
    • Sao chép quy tắc. Sao chép toàn bộ quy tắc CSS: css selector[, selector] { property: value; property: value; ... }
    • Sao chép nội dung khai báo dưới dạng JS. Sao chép thuộc tính và giá trị của thuộc tính đó trong cú pháp JavaScript: js propertyInCamelCase: 'value'
    • Sao chép tất cả nội dung khai báo. Sao chép tất cả các thuộc tính và giá trị của các thuộc tính đó trong quy tắc CSS: css property: value; property: value; ...

    • Sao chép tất cả nội dung khai báo dưới dạng JS. Sao chép tất cả thuộc tính và giá trị của các thuộc tính đó theo cú pháp JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

    • Sao chép tất cả các thay đổi về CSS. Sao chép các thay đổi mà bạn thực hiện trong thẻ Kiểu trên tất cả nội dung khai báo.

    • Xem giá trị đã tính. Chuyển bạn đến thẻ Đã tính.

Thay đổi CSS

Phần này liệt kê tất cả các cách bạn có thể thay đổi CSS trong Elements (Phần tử) > Styles (Kiểu).

Ngoài ra, bạn có thể:

Thêm nội dung khai báo CSS vào một phần tử

Vì thứ tự khai báo ảnh hưởng đến cách tạo kiểu cho một phần tử, nên bạn có thể thêm các phần khai báo theo nhiều cách:

Bạn nên sử dụng quy trình công việc nào? Trong hầu hết các trường hợp, bạn nên sử dụng quy trình khai báo cùng dòng. Nội dung khai báo nội tuyến có độ cụ thể cao hơn nội dung khai báo bên ngoài, vì vậy, quy trình công việc nội tuyến đảm bảo rằng các thay đổi có hiệu lực trong phần tử như bạn mong đợi. Hãy xem phần Các loại bộ chọn để biết thêm về mức độ cụ thể.

Nếu bạn đang gỡ lỗi kiểu của một phần tử và cần kiểm thử cụ thể điều gì sẽ xảy ra khi phần khai báo được xác định ở nhiều vị trí, hãy sử dụng quy trình công việc khác.

Thêm nội dung khai báo cùng dòng

Cách thêm nội dung khai báo cùng dòng:

  1. Chọn một phần tử.
  2. Trong thẻ Kiểu, hãy nhấp vào giữa các dấu ngoặc đơn của mục element.style. Con trỏ sẽ lấy tiêu điểm, cho phép bạn nhập văn bản.
  3. Nhập tên thuộc tính rồi nhấn phím Enter.

  4. Nhập một giá trị hợp lệ cho thuộc tính đó rồi nhấn phím Enter. Trong DOM Tree (Cây DOM), bạn có thể thấy thuộc tính style đã được thêm vào phần tử.

    Thêm nội dung khai báo cùng dòng.

    Trên ảnh chụp màn hình, các thuộc tính margin-top và background-color đã được áp dụng cho phần tử đã chọn. Trong Cây DOM, bạn có thể thấy các nội dung khai báo được phản ánh trong thuộc tính style của phần tử.

Thêm nội dung khai báo vào quy tắc kiểu

Cách thêm nội dung khai báo vào quy tắc kiểu hiện có:

  1. Chọn một phần tử.
  2. Trong thẻ Kiểu, hãy nhấp vào giữa các dấu ngoặc của quy tắc kiểu mà bạn muốn thêm nội dung khai báo. Con trỏ sẽ lấy tiêu điểm, cho phép bạn nhập văn bản.
  3. Nhập tên thuộc tính rồi nhấn phím Enter.
  4. Nhập một giá trị hợp lệ cho thuộc tính đó rồi nhấn phím Enter.

Thay đổi giá trị của một nội dung khai báo.

Trên ảnh chụp màn hình, một quy tắc kiểu sẽ nhận được nội dung khai báo border-bottom-style:groove mới.

Thay đổi tên hoặc giá trị khai báo

Nhấp đúp vào tên hoặc giá trị của nội dung khai báo để thay đổi. Hãy xem phần Thay đổi các giá trị có thể liệt kê bằng phím tắt để biết các phím tắt giúp tăng hoặc giảm nhanh một giá trị thêm 0, 1, 1, 10 hoặc 100 đơn vị.

Thay đổi các giá trị có thể liệt kê bằng phím tắt

Khi chỉnh sửa một giá trị có thể liệt kê của nội dung khai báo, chẳng hạn như font-size, bạn có thể sử dụng các phím tắt sau để tăng giá trị theo số lượng cố định:

  • Option+Up (Mac) hoặc Alt+Up (Windows, Linux) để tăng 0,1.
  • Up (Lên) để thay đổi giá trị thêm 1 hoặc 0, 1 nếu giá trị hiện tại nằm trong khoảng từ -1 đến 1.
  • Shift+Up để tăng thêm 10.
  • Shift+Command+Up (Mac) hoặc Control+Shift+Page Up (Windows, Linux) để tăng giá trị thêm 100.

Việc giảm cũng hoạt động. Bạn chỉ cần thay thế từng thực thể của Up (Lên) được đề cập trước đó bằng Down (Xuống).

Thay đổi giá trị độ dài

Bạn có thể sử dụng con trỏ để thay đổi bất kỳ thuộc tính nào có chiều dài, chẳng hạn như chiều rộng, chiều cao, khoảng đệm, lề hoặc đường viền.

Cách thay đổi đơn vị chiều dài:

  1. Di chuột qua tên đơn vị và chú ý rằng đơn vị đó được gạch chân.

  2. Nhấp vào tên đơn vị để chọn một đơn vị trong trình đơn thả xuống.

Cách thay đổi giá trị độ dài:

  1. Di chuột qua giá trị đơn vị và để ý rằng con trỏ chuyển thành mũi tên hai đầu nằm ngang.

  2. Kéo theo chiều ngang để tăng hoặc giảm giá trị.

Để điều chỉnh giá trị theo mức 10, hãy giữ phím Shift khi kéo.

Thêm một lớp vào một phần tử

Cách thêm một lớp vào một phần tử:

  1. Chọn phần tử trong Cây DOM.
  2. Nhấp vào .cls.
  3. Nhập tên của lớp vào hộp Add New Class (Thêm lớp mới).
  4. Nhấn Enter.

Phần Lớp phần tử.

Mô phỏng lựa chọn ưu tiên về giao diện sáng và tối, đồng thời bật chế độ tối tự động

Cách bật/tắt chế độ tối tự động hoặc mô phỏng lựa chọn ưu tiên của người dùng về giao diện sáng hoặc tối:

  1. Trên thẻ Elements (Thành phần) > Styles (Kiểu), hãy nhấp vào Bật/tắt các quy trình mô phỏng kết xuất phổ biến.Toggle common rendering emulations (Bật/tắt tính năng mô phỏng hoạt động kết xuất thông thường). Bật/tắt tính năng mô phỏng hoạt động kết xuất thông thường.

  2. Chọn một trong các mục sau trong danh sách thả xuống:

    • prefers-color-scheme: light. Cho biết rằng người dùng thích giao diện sáng.
    • prefers-color-rental: tối. Cho biết rằng người dùng thích giao diện tối hơn.
    • Chế độ tối tự động. Hiển thị trang của bạn ở chế độ tối ngay cả khi bạn chưa triển khai chế độ này. Ngoài ra, hãy tự động đặt prefers-color-scheme thành dark.

Trình đơn thả xuống này là lối tắt cho Mô phỏng tính năng đa phương tiện của CSS prefers-color-scheme và các tuỳ chọn Bật chế độ tối tự động của thẻ Kết xuất.

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

Cách bật hoặc tắt một lớp trên một phần tử:

  1. Chọn phần tử trong Cây DOM.
  2. Mở phần Lớp phần tử. Xem phần Thêm lớp vào một phần tử. Bên dưới hộp Add New Class (Thêm lớp mới) là tất cả các lớp đang được áp dụng cho phần tử này.
  3. Đánh dấu vào hộp bên cạnh lớp mà bạn muốn bật hoặc tắt.

Thêm quy tắc kiểu

Để thêm quy tắc kiểu mới, hãy làm như sau:

  1. Chọn một phần tử.
  2. Nhấp vào Quy tắc kiểu mới Quy tắc kiểu mới.. Công cụ dành cho nhà phát triển sẽ chèn một quy tắc mới bên dưới quy tắc element.style.

Thêm quy tắc kiểu mới.

Trên ảnh chụp màn hình, Công cụ cho nhà phát triển thêm quy tắc kiểu h1.devsite-page-title sau khi nhấp vào Quy tắc kiểu mới.

Chọn trang tính kiểu để thêm quy tắc

Khi thêm quy tắc kiểu mới, hãy nhấp và giữ biểu tượng Quy tắc kiểu mới Quy tắc kiểu mới. để chọn trang tính kiểu mà bạn muốn thêm quy tắc kiểu.

Chọn một biểu định kiểu.

Bật/tắt nội dung khai báo

Cách bật hoặc tắt một nội dung khai báo:

  1. Chọn một phần tử.
  2. Trong thẻ Kiểu, hãy di chuột qua quy tắc xác định nội dung khai báo. Hộp đánh dấu sẽ xuất hiện bên cạnh mỗi nội dung khai báo.
  3. Đánh dấu hoặc bỏ đánh dấu hộp bên cạnh nội dung khai báo. Khi bạn xoá một nội dung khai báo, DevTools sẽ gạch ngang nội dung đó để cho biết nội dung đó không còn hoạt động nữa.

Bật/tắt nội dung khai báo.

Trên ảnh chụp màn hình, thuộc tính color cho phần tử đang được chọn đã bị tắt.

Chỉnh sửa các phần tử giả ::view-transition trong khi tạo ảnh động

Xem phần tương ứng trong phần Ảnh động.

Để biết thêm thông tin, hãy xem bài viết Chuyển đổi suôn sẻ và đơn giản bằng View Transitions API.

Căn chỉnh các mục trong lưới và nội dung của chúng bằng Trình chỉnh sửa lưới

Xem phần tương ứng trong lưới Kiểm tra CSS.

Thay đổi màu sắc bằng Công cụ chọn màu

Xem Kiểm tra và gỡ lỗi màu HD và không phải HD bằng Công cụ chọn màu.

Thay đổi giá trị góc bằng Đồng hồ góc

Đồng hồ góc cung cấp một GUI (Giao diện người dùng đồ hoạ) để thay đổi <angle> trong giá trị thuộc tính CSS.

Cách mở Đồng hồ góc:

  1. Chọn một phần tử có khai báo góc.

  2. Trong thẻ Styles (Kiểu), hãy tìm phần khai báo transform hoặc background mà bạn muốn thay đổi. Nhấp vào hộp Xem trước góc bên cạnh giá trị góc.

    Xem trước góc.

    Đồng hồ nhỏ ở bên trái -5deg và 0.25turn là bản xem trước góc.

  3. Nhấp vào bản xem trước để mở Đồng hồ góc.

    Đồng hồ góc.

  4. Thay đổi giá trị góc bằng cách nhấp vào vòng tròn Angle Clock hoặc cuộn chuột để tăng / giảm giá trị góc đi 1.

  5. Có nhiều phím tắt khác để thay đổi giá trị góc. Tìm hiểu thêm trong phần Phím tắt của ngăn Kiểu.

Thay đổi bóng hộp và bóng văn bản bằng Trình chỉnh sửa bóng

Trình chỉnh sửa bóng cung cấp một GUI (Giao diện người dùng đồ hoạ) để thay đổi nội dung khai báo CSS text-shadow và box-shadow.

Cách thay đổi bóng bằng Trình chỉnh sửa bóng:

  1. Chọn một phần tử có phần khai báo bóng đổ. Ví dụ: chọn phần tử tiếp theo.

  2. Trong thẻ Styles (Kiểu), hãy tìm biểu tượng Bóng. đổ bóng bên cạnh phần khai báo text-shadow hoặc box-shadow.

    Biểu tượng bóng.

  3. Nhấp vào biểu tượng bóng để mở Trình chỉnh sửa bóng.

    Trình chỉnh sửa bóng.

  4. Thay đổi các thuộc tính của bóng:

    • Loại (chỉ dành cho box-shadow). Chọn Phần ngoài hoặc Phần lồng ghép.
    • Độ lệch X và Y. Kéo chấm màu xanh dương hoặc chỉ định giá trị.
    • Mờ. Kéo thanh trượt hoặc chỉ định một giá trị.
    • Trải (chỉ dành cho box-shadow). Kéo thanh trượt hoặc chỉ định một giá trị.

  5. Quan sát những thay đổi được áp dụng cho phần tử.

Chỉnh sửa thời gian chuyển đổi và ảnh động bằng Trình chỉnh sửa chuyển đổi

Easing Editor (Trình chỉnh sửa hiệu ứng chuyển động) cung cấp một giao diện người dùng để thay đổi các giá trị của transition-timing-function và animation-timing-function.

Cách mở Easing Editor (Trình chỉnh sửa hiệu ứng chuyển động):

  1. Chọn một phần tử có nội dung khai báo hàm thời gian, chẳng hạn như phần tử <body> trên trang này.
  2. Trong thẻ Kiểu, hãy tìm biểu tượng Dễ dàng. màu tím bên cạnh phần khai báo transition-timing-function, animation-timing-function hoặc thuộc tính viết tắt transition. Biểu tượng Trình chỉnh sửa Easing.
  3. Nhấp vào biểu tượng để mở Easing Editor (Trình chỉnh sửa tốc độ): Trình chỉnh sửa Easing.

Sử dụng giá trị đặt trước để điều chỉnh thời gian

Để điều chỉnh thời gian bằng một cú nhấp chuột, hãy sử dụng các chế độ đặt trước trong Easing Editor (Trình chỉnh sửa tốc độ):

  1. Trong Easing Editor (Trình chỉnh sửa hiệu ứng chuyển động), để đặt giá trị từ khoá, hãy nhấp vào một trong các nút bộ chọn:
    • tuyến tính Nút tuyến tính.
    • Nút mở ra dễ dàng. dễ dàng nhận ra
    • Dễ dàng kết nối Nút làm chậm đầu.
    • dễ dàng Nút giảm dần.

  2. Trong Presets switcher (Trình chuyển đổi chế độ cài đặt trước), hãy nhấp vào nút Trái. hoặc Phải. để chọn một trong các chế độ cài đặt trước sau:

    • Giá trị đặt trước tuyến tính: elastic, bounce hoặc emphasized.
    • Giá trị đặt trước Cubic Bezier:
Từ khoá về thời gian Chế độ đặt sẵn Đá Cubic Bezier
chuyển động có khởi đầu và kết thúc chậm Bên ngoài, hình sin cubic-bezier(0.45, 0.05, 0.55, 0.95)
Trong ra, Bậc hai cubic-bezier(0.46, 0.03, 0.52, 0.96)
Bên ngoài, lập phương cubic-bezier(0.65, 0.05, 0.36, 1)
Ra nhanh, vào chậm cubic-bezier(0.4, 0, 0.2, 1)
Đi vào, quay lại cubic-bezier(0.68, -0.55, 0.27, 1.55)
chuyển động nhanh dần In, Sin cubic-bezier(0.47, 0, 0.75, 0.72)
Trong, Bậc hai cubic-bezier(0.55, 0.09, 0.68, 0.53)
Inch, khối cubic-bezier(0.55, 0.06, 0.68, 0.19)
Vào cửa, quay lại cubic-bezier(0.6, -0.28, 0.74, 0.05)
Đi nhanh, theo đường thẳng vào cubic-bezier(0.4, 0, 1, 1)
chuyển động chậm dần Ra ngoài, Sine cubic-bezier(0.39, 0.58, 0.57, 1)
Bên ngoài, Hai chiều cubic-bezier(0.25, 0.46, 0.45, 0.94)
Out, Cubic cubic-bezier(0.22, 0.61, 0.36, 1)
Đi theo tuyến tính, chậm lại cubic-bezier(0, 0, 0.2, 1)
Ngoài, quay lại cubic-bezier(0.18, 0.89, 0.32, 1.28)

Định cấu hình thời gian tuỳ chỉnh

Để đặt giá trị tuỳ chỉnh cho các hàm thời gian, hãy sử dụng các điểm điều khiển trên đường kẻ:

  • Đối với các hàm tuyến tính, hãy nhấp vào vị trí bất kỳ trên đường thẳng để thêm một điểm điều khiển rồi kéo điểm đó. Nhấp đúp để xoá điểm.

    Kéo một điểm điều khiển của hàm tuyến tính.

  • Đối với các hàm Cubic Bezier, hãy kéo một trong các điểm điều khiển.

    Kéo các điểm điều khiển của hàm Cubic Bezier.

Bất kỳ thay đổi nào cũng sẽ kích hoạt ảnh động quả bóng trong mục Xem trước ở đầu trình chỉnh sửa.

(Thử nghiệm) Sao chép các thay đổi về CSS

Khi bạn bật thử nghiệm này, thẻ Kiểu sẽ đánh dấu các thay đổi về CSS bằng màu xanh lục.

Để sao chép một thay đổi trong nội dung khai báo CSS, hãy di chuột qua nội dung khai báo được đánh dấu rồi nhấp vào nút Sao chép. Copy (Sao chép).

Sao chép nội dung thay đổi về phần khai báo CSS.

Để sao chép tất cả các thay đổi về CSS trong các nội dung khai báo cùng một lúc, hãy nhấp chuột phải vào một nội dung khai báo bất kỳ rồi chọn Copy all CSS changes (Sao chép tất cả các thay đổi về CSS).

Sao chép tất cả thay đổi về CSS.

Ngoài ra, bạn có thể theo dõi các thay đổi mà bạn thực hiện bằng thẻ Thay đổi.