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

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.

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ử 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.

Điều hướng bằng đường liên kết

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:

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.

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 Không hiển thị.

Để bật lại, hãy đánh dấu vào Settings > Preferences > Elements > 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 đó.

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.

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ử.

Đá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 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:

• @property
• @supports
• @scope
• @font-palette-values
• @position-try

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:

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.

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.

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:

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ử.

Để 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 trong thanh thao tác.

Để 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ể.

Để 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ả).

Để 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.

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 check_box 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 check_box 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.

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.

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ử:

• :active
• :focus
• :focus-within
• :target
• :hover
• focus-visible

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ử đó.

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 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: page, component và base.

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

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

Xem trang ở chế độ in

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

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

Xem CSS đã dùng và chưa dùng bằng thẻ Mức sử dụng

Thẻ Mức sử dụng 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 ở trọng tâm để mở Trình đơn lệnh.

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

   

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

   

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

   

   Màu xanh lục biểu thị CSS đã dùng. Màu đỏ biểu thị CSS không dùng đến.

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

   

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

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

Xem phần Buộc Công cụ cho nhà phát triển chuyển sang chế độ xem trước khi in.

Sao chép CSS

Trong một trình đơn thả xuống duy nhất trong thẻ Kiểu, bạn có thể sao chép riêng các quy tắc, khai báo, thuộc tính, giá trị CSS

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

Cách sao chép CSS:

1. Chọn một phần tử.
2. Trong thẻ Elements (Phần tử) > Styles (Kiểu), hãy nhấp chuột phải vào một thuộc tính CSS.

3. Chọn một trong các lựa chọn sau trong 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 tài sản. Chỉ sao chép tên 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 thuộc tính JS. Sao chép thuộc tính và giá trị của thuộc tính đó theo 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 chúng 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ả các thuộc tính và giá trị của chúng theo cú pháp JavaScript: ```js propertyInCamelCase: 'value', propertyInCamelCase: 'value', ...

   • Sao chép mọi 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ả các khai báo.

   • Xem giá trị đã tính. Chuyển bạn đến thẻ Dữ liệu được tính toán.

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ể:

• Ghi đè CSS trong các lần tải trang.
• Lưu CSS đã sửa đổi vào các nguồn cục bộ trong một không gian làm việc.

Thay đổi CSS bằng tính năng hoàn tất mã

Để thử nghiệm các tổ hợp thuộc tính CSS phức tạp hơn, chẳng hạn như hiệu ứng chuyển màu hoặc bóng đổ, mà không cần nhớ cú pháp chính xác của chúng, hoặc để nhanh chóng tạo bố cục lưới và bố cục linh hoạt, dựa vào nhiều thuộc tính có liên quan, bạn có thể bắt đầu nhập một thuộc tính CSS và sử dụng tính năng hoàn thành mã.

Thêm một 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 khai báo theo nhiều cách:

• Thêm một khai báo nội tuyến. Tương đương với việc thêm thuộc tính style vào HTML của phần tử.
• Thêm một khai báo vào quy tắc kiểu.

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, có lẽ bạn muốn sử dụng quy trình khai báo nội tuyến. Khai báo nội tuyến có độ đặc hiệu cao hơn khai báo bên ngoài, vì vậy, quy trình 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ề tính 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 một khai báo được xác định ở nhiều vị trí, hãy sử dụng quy trình khác.

Thêm một khai báo nội tuyến

Cách thêm một khai báo nội tuyến:

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 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 tài sản rồi nhấn 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 rằng thuộc tính style đã được thêm vào phần tử.

   

   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 DOM Tree (Cây DOM), bạn có thể thấy các khai báo được phản ánh trong thuộc tính style của phần tử.

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

Cách thêm một 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 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 tài sản rồi nhấn Enter.
4. Nhập một giá trị hợp lệ cho thuộc tính đó rồi nhấn phím Enter.

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

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

Nhấp đúp vào tên hoặc giá trị của một khai báo để thay đổi. Hãy xem phần Thay đổi 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ị theo 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

Trong khi chỉnh sửa một giá trị có thể liệt kê của một 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 một số lượng cố định:

• Option+Up (Mac) hoặc Alt+Up (Windows, Linux) để tăng 0,1.
• 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+Lên để tăng thêm 10.
• Shift+Command+Up (Mac) hoặc Control+Shift+Page Up (Windows, Linux) để tăng giá trị thêm 100.

Thao tác giảm cũng hoạt động. Bạn chỉ cần thay thế từng trường hợp Up đã đề cập trước đó bằng Down.

Thay đổi giá trị chiều dài

Bạn có thể dùng con trỏ để thay đổi mọi thuộc tính có độ 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ị đo chiều dài:

1. Di chuột lên tên đơn vị và bạn sẽ thấy tên đơ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ị chiều dài:

1. Di chuột lên giá trị đơn vị và bạn sẽ thấy con trỏ thay đổi thành mũi tên hai chiều ngang.

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

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

Thêm một lớp vào 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 Thêm lớp mới.
4. Nhấn Enter.

Mô phỏng các 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

Để 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 (Phần tử) > Styles (Kiểu), hãy nhấp vào 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).

2. Chọn một trong các lựa chọn sau đây trong danh sách thả xuống:

   • prefers-color-scheme: light. Cho biết rằng người dùng ưu tiên giao diện sáng.
   • prefers-color-scheme: dark. Cho biết rằng người dùng thích giao diện tối.
   • 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ệ thống sẽ tự động đặt prefers-color-scheme thành dark.

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

Bật/tắt một lớp học

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ở mục Element Classes (Lớp phần tử). Xem phần Thêm một lớp vào phần tử. Bên dưới hộp 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 hoặc bỏ đá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

Cách thêm quy tắc kiểu mới:

1. Chọn một phần tử.
2. Nhấp vào 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.

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

Chọn biểu định kiểu mà bạn muốn thêm quy tắc

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

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

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

1. Chọn một phần tử.
2. Trong thẻ Kiểu, hãy di chuột lên quy tắc xác định khai báo. Hộp đánh dấu 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 vào hộp kiểm bên cạnh nội dung khai báo. Khi bạn xoá một khai báo, DevTools sẽ gạch ngang khai báo đó để cho biết khai báo đó không còn hoạt động nữa.

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

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

Hãy xem phần tương ứng trong Ảnh động.

Để biết thêm thông tin, hãy xem bài viết Chuyển đổi mượt mà 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 các mục đó bằng Trình chỉnh sửa lưới

Hãy xem phần tương ứng trong bài viết Kiểm tra lưới CSS.

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

Xem phần Kiểm tra và gỡ lỗi màu sắc ở chế độ 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 để thay đổi <angle> trong các giá trị thuộc tính CSS.

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

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

2. Trong thẻ Kiểu, hãy tìm 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.

   

   Cá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.

   

4. Thay đổi giá trị góc bằng cách nhấp vào vòng tròn Đồng hồ góc hoặc di chuyển chuột để tăng / giảm giá trị góc thêm 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 của hộp và 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 để thay đổi các 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ó khai báo bóng. Ví dụ: chọn phần tử tiếp theo.

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

   

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

   

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

   • Loại (chỉ dành cho box-shadow). Chọn Outset (Bắt đầu) hoặc Inset (Lồng ghép).
   • Độ lệch X và Y. Kéo chấm màu xanh dương hoặc chỉ định giá trị.
   • Làm 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 của ảnh động và hiệu ứng chuyển đổi bằng Trình chỉnh sửa gia tốc

Easing Editor (Trình chỉnh sửa gia tốc) cung cấp một GUI để 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 đường cong tăng tốc):

1. Chọn một phần tử có 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 màu tím bên cạnh các khai báo transition-timing-function, animation-timing-function hoặc thuộc tính viết tắt transition.
3. Nhấp vào biểu tượng này để mở Trình chỉnh sửa đường cong tăng tốc:

Sử dụng chế độ đặt sẵn để đ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 sẵn trong Trình chỉnh sửa gia tốc:

1. Trong Easing Editor (Trình chỉnh sửa đường cong tăng tốc), để đặt một giá trị từ khoá, hãy nhấp vào một trong các nút chọn:
   • linear
   • ease-in-out
   • ease-in
   • ease-out

2. Trong Bộ chuyển đổi chế độ cài sẵn, hãy nhấp vào nút hoặc để chọn một trong các chế độ cài sẵn sau:

   • Chế độ đặt sẵn tuyến tính: elastic, bounce hoặc emphasized.
   • Các chế độ đặt sẵn Cubic Bezier:

Từ khoá về thời gian	Chế độ đặt sẵn	Đường cong Bezier bậc ba
chuyển động có khởi đầu và kết thúc chậm	In Out, Sine	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Vào ra, Bậc hai	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, Cubic	cubic-bezier(0.65, 0.05, 0.36, 1)
	Nhanh dần, chậm dần	cubic-bezier(0.4, 0, 0.2, 1)
	In Out, Back	cubic-bezier(0.68, -0.55, 0.27, 1.55)
chuyển động nhanh dần	In, Sine	cubic-bezier(0.47, 0, 0.75, 0.72)
	In, Quadratic	cubic-bezier(0.55, 0.09, 0.68, 0.53)
	In, Cubic	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Vào, Quay lại	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Làm mờ nhanh, tăng dần	cubic-bezier(0.4, 0, 1, 1)
chuyển động chậm dần	Out, Sine	cubic-bezier(0.39, 0.58, 0.57, 1)
	Ra ngoài, Bậc hai	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Out, Cubic	cubic-bezier(0.22, 0.61, 0.36, 1)
	Tuyến tính, tăng tốc từ từ	cubic-bezier(0, 0, 0.2, 1)
	Ra, Vào	cubic-bezier(0.18, 0.89, 0.32, 1.28)

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

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

• Đố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 kiểm soát và kéo điểm đó. Nhấp đúp để xoá điểm.

  

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

  

Mọi thay đổi sẽ kích hoạt một ảnh động về quả bóng trong phần 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ẽ làm nổi bật các thay đổi về CSS bằng màu xanh lục.

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

Để sao chép tất cả các thay đổi về CSS trên 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 Sao chép tất cả các thay đổi về CSS.

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