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 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ông cụ của Chrome cho nhà phát triển 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 các 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 một phần tử mỗi lần.

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

Xem hướng dẫn trong bài viết Xem CSS của một phần tử.

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 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 (máy 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ả rồi chọn Hiển thị trong bảng điều khiển Phần tử.

Xem CSS

Sử dụng thẻ Phần tử > Kiểu và Tính toán để xem các quy tắc CSS và chẩn đoán 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 nơi đế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ằm ở 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 Giúp tệp đã giảm kích thước có thể đọc được.
• Trong phần Kế thừa từ ..., tới các phần tử mẹ.
• Trong lệnh gọi var(), đến phần khai báo thuộc tính tuỳ chỉnh.
• Trong các thuộc tính viết tắt của animation, để @keyframes.
• Đường liên kết Tìm hiểu thêm trong phần chú thích tài liệu.
• 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ó kiểu khác nhau. Nếu bạn không chắc liệu mục nào đó có phải là đường liên kết hay không, hãy thử nhấp vào đường liên kết đó để tìm hiểu.

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

Phần tử > 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ú 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ẻ Kiểu.

Nhấp vào Tìm hiểu thêm để chuyển đến một Tài liệu tham khảo về CSS trên tài sản 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 chọn Cài đặt > Lựa chọn ưu tiên > Phần tử > Hiện chú giải công cụ tài liệu CSS.

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

Di chuột qua một bộ chọn để xem chú giải công cụ có trọng số đặc tả của chú thích.

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

Hãy di chuột qua --custom-property để xem giá trị của thuộc tính đó trong phần chú thích.

Xem CSS không hợp lệ, bị ghi đè, không hoạt động và 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 được áp dụng thực sự cho một phần tử

Thẻ Kiểu cho bạn thấy mọi 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 đang thực sự đượ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 (Phần tử).

Đánh dấu vào hộp Hiển thị tất cả để xem tất 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 tài sản CSS theo thứ tự bảng chữ cái

Sử dụng thẻ Computed (Tính toán). Xem Chỉ xem CSS thực sự áp dụng cho một phần tử.

Xem các tài sản CSS kế thừa

Chọn hộp kiểm Show All (Hiển thị tất cả) trong thẻ Computed (Tính toán). Xem phần Chỉ xem CSS đang thực sự áp dụng cho một phần tử.

Ngoài ra, bạn có thể cuộn thẻ Styles (Kiểu) rồi tìm các phần có tên Inherited from <element_name>.

Xem quy tắc tại chỗ CSS

Quy tắc 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 hiển thị các quy tắc at sau đây trong các phần riêng:

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

Xem @property tại quy tắc

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

Di chuột qua tên của thuộc tính đó trong thẻ Kiểu để xem chú giải công cụ với giá trị, phần 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 quy tắc @property, hãy nhấp đúp vào tên hoặc giá trị của quy tắc đó.

Xem @supports tại quy tắc

Thẻ Kiểu cho bạn thấy các quy tắc CSS @supports nếu các quy tắc này đượ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ợ hàm lab() thì 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 tại quy tắc

Thẻ Kiểu cho bạn thấy quy tắc CSS @scope 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 trong quy cách CSS tầng lớp và tính kế thừa cấp 6. Các quy tắc này cho phép bạn xác định phạm vi của kiểu CSS, nói cách khác là áp dụng rõ ràng các kiểu cho các phần tử cụ thể.

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

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 ghi đè nội dung khai báo chung CSS background-color 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 tại quy tắc

@font-palette-values CSS theo quy tắc cho phép bạn tuỳ chỉnh các giá trị mặc định của thuộc tính font-palette. Phần tử > Kiểu cho thấy quy tắc theo 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ữ màu.

Để chỉnh sửa giá trị tuỳ chỉnh, hãy nhấp đúp vào các 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 tới thẻ Kiểu rồi nhấp vào nút Hiển thị 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 và lọc CSS của một phần tử

Sử dụng hộp Filter (Bộ lọc) trên thẻ Styles (Kiểu) và Computed (Tính toán) để tìm kiếm các thuộc tính hoặc giá trị CSS cụ thể.

Để tìm kiếm các thuộc tính 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ả).

Để sử dụng thẻ Đã tính toán, hãy nhóm các thuộc tính đã lọc vào các danh mục có thể thu gọn bằng cách chọn 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 lấy tiêu điểm cho phép bạn gỡ lỗi một phần tử như vậy như thể phần tử đó đang được lấy 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ập trung vào phần tử đầu vào. Một phần tử khác sẽ xuất hiện bên dưới đó.
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 được đặt tiêu điểm thay vì trang, vì vậy phần tử 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 check_box Mô phỏng một trang được lấy tiêu điểm và đảm bảo bạn đã chọn phần tử dữ liệu đầu vào. Bây giờ, bạn có thể kiểm tra phần tử trong đó.

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

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

Để bật/tắt một lớp giả, chẳng hạn như :active, :focus, :focus-within, :target, :hover, :visited hoặc focus-visible:

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. Kiểm tra lớp giả mà bạn muốn bật.

Trong khung nhìn, bạn có thể thấy Công cụ cho nhà phát triển áp dụng nội dung khai báo background-color cho phần tử này, mặc dù phần tử này thực sự không được di chuột qua.

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

Xem các phần tử giả nổi bật 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ả được làm nổi bật là các phần của tài liệu có trạng thái "đã chọn" và được tạo kiểu là "được làm 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ư ::selection, ::spelling-error, ::grammar-error và ::highlight.

Như đã đề cập trong quy cách, khi nhiều kiểu xung đột, 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 quy tắc, bạn có thể xem các phần tử giả nổi bật kế thừa:

1. Kiểm tra văn bản dưới đây.

   Tôi đã kế thừa kiểu của phần tử giả làm nổi bật phần tử nổi bật của cha 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 cuộn xuống để tìm phần Inherited from ::selection pseudo of....

Xem các lớp tầng

Lớp phủ lớp cho phép kiểm soát các tệp CSS của bạn một cách rõ ràng hơ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ý các kiểu của bên thứ ba trong các ứng dụng.

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

Trong thẻ Styles (Kiểu), hãy xem 3 lớ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ó tính đặc trưng cao nhất, do đó nền của phần tử có màu xanh lục.

Xem trang ở chế độ in

Để 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. Đối với trình đơn thả xuống Emulate CSS Media (Mô phỏng nội dung đa phương tiện CSS), hãy chọn print.

Xem CSS đã sử dụng và không được sử dụng thông qua thẻ Mức độ phù hợp

Thẻ Mức độ phù hợp 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 (máy Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) trong khi Công cụ cho nhà phát triển đang ở tiêu điểm để mở Trình đơn lệnh.

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

   

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

   

4. Nhấp vào Tải lại. Trang sẽ tải lại và thẻ Phạm vi lập chỉ mục cung cấp thông tin tổng quan về lượng CSS (và JavaScript) được sử dụng trong mỗi tệp mà trình duyệt tải.

   

   Màu xanh lục biểu thị CSS đã qua sử dụng. Màu đỏ biểu thị CSS không được sử dụng.

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

   

   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 dùng chế độ xem trước bản in cho công cụ cho nhà phát triển.

Sao chép CSS

Trên 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ị 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ẻ Phần tử > 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 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 đó trong 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 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 tài sản 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 thuộc tính JS. Sao chép tất cả thuộc tính và giá trị của các thuộc tính đó trong 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 bạn thực hiện trong thẻ Styles (Kiểu) trên tất cả các nội dung khai báo.

   • Xem giá trị đã tính. Đưa bạn đến thẻ Computed (Tính toán).

Thay đổi CSS

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

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

• Ghi đè CSS trên các lượt tải trang.
• Lưu CSS đã sửa đổi vào các nguồn tại địa phương của bạn trong một không gian làm việc.

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

Do thứ tự của nội dung 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 nội dung khai báo theo nhiều cách:

• Thêm nội dung khai báo cùng dòng. Tương đương với việc thêm thuộc tính style vào HTML của phần tử.
• Thêm phần 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, bạn nên sử dụng quy trình khai báo cùng dòng. Nội dung khai báo cùng dòng có tính đặc trưng cao hơn so với nội dung khai báo bên ngoài. Vì vậy, quy trình làm việc cùng dòng đảm bảo rằng các thay đổi có hiệu lực trong phần tử như dự kiến. Vui lòng xem phần Các loại bộ chọn để biết thêm thông tin về mức độ cụ thể.

Nếu đang gỡ lỗi kiểu của một phần tử và bạn cần kiểm thử cụ thể xem điều gì sẽ xảy ra khi một 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ẻ Styles (Kiểu), hãy nhấp vào giữa các dấu ngoặc của phần element.style. Con trỏ tập trung, 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 giá trị hợp lệ cho thuộc tính đó rồi nhấn phím Enter. Trong Cây DOM, bạn có thể thấy 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 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 phần khai báo vào quy tắc kiểu

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

1. Chọn một phần tử.
2. Trong thẻ Styles (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 phần khai báo. Con trỏ 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 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, quy tắc kiểu sẽ lấy 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 một nội dung khai báo để thay đổi. 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ị theo 0, 1, 1, 10 hoặc 100 đơn vị.

Thay đổi các giá trị có thể đếm được bằng phím tắt

Khi chỉnh sửa 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 một số tiền cố định:

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

Bạn cũng có thể giảm dầ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à để ý rằng tên đơn vị này đượ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ỏ sẽ thay đổi 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ị thêm 10, hãy giữ phím Shift khi kéo.

Thêm lớp vào thành phần

Cách thêm 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 lớp học 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ẻ Phần tử > 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.

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

   • prefers-color-lược đồ: ánh sáng. Cho biết người dùng ưu tiên giao diện sáng.
   • prefers-color- Scheme: tối. Cho biết người dùng ưu tiên 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 không triển khai trang đó. 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 để Mô phỏng tính năng đa phương tiện của CSS prefers-color-scheme và Bật chế độ tối tự động của thẻ Hiển thị.

Bật/tắt lớp

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

1. Chọn phần tử trong Cây DOM.
2. Mở mục Lớp phần tử. Xem phần Thêm lớp vào 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. Bật hoặc tắt hộp đánh dấu 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 biểu tượng Quy tắc kiểu mới . Công cụ 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 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 biểu định kiểu để thêm quy tắc

Khi thêm quy tắc kiểu mới, hãy nhấp và giữ New Style Rule (Quy tắc kiểu mới) để chọn biểu định kiểu cần thêm quy tắc kiểu vào.

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

Cách bật/tắt một nội dung khai báo:

1. Chọn một phần tử.
2. Trong thẻ Styles (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ỏ chọn hộp đánh dấu bên cạnh nội dung khai báo. Khi bạn xoá một nội dung khai báo, Công cụ cho nhà phát triển sẽ làm mờ phần đó để cho biết rằng Công cụ cho nhà phát triển 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 đang tắt.

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

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

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

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

Xem phần 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

Angle Clock 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.

   

   Các đồng hồ nhỏ ở bên trái -5deg và 0.25turn là hình 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 Angle Clock (Đồng hồ góc) 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ím tắt của ngăn Kiểu.

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

Shadow Editor cung cấp một GUI (Giao diện người dùng đồ hoạ) để thay đổi các phần 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ẻ Styles (Kiểu), hãy tìm biểu tượng bóng bên cạnh phần 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 thuộc tính bóng:

   • Loại (chỉ dành cho box-shadow). Chọn Phần phụ 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ị.
   • Làm mờ. Kéo thanh trượt hoặc chỉ định một giá trị.
   • Trải rộng (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 ảnh động và dấu thời gian chuyển đổi bằng Easing Editor

Easing Editor cung cấp một GUI (Giao diện người dùng đồ hoạ) để 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 gia tốc):

1. Chọn một phần tử có phần 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 nội dung 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 đó để mở Easing Editor (Trình chỉnh sửa gia tốc):

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

Để điều chỉnh thời gian chỉ bằng một lần nhấp, hãy sử dụng giá trị đặt trước trong Easing Editor:

1. Trong Trình chỉnh sửa gia tốc, để đặt giá trị từ khoá, hãy nhấp vào một trong các nút trong bộ chọn:
   • tuyến tính
   • dễ dàng bắt đầu
   • dễ dàng bắt đầu
   • giải phóng

2. Trong Trình chuyển đổi giá trị đặt trước, hãy nhấp vào các nút hoặc để chọn một trong các giá trị đặ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	Mẫu soạn sẵn	Khối Bezier
chuyển động có khởi đầu và kết thúc chậm	Trong ngoài, Sin	cubic-bezier(0.45, 0.05, 0.55, 0.95)
	Trong ngoài, bậc hai	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	In Out, khối	cubic-bezier(0.65, 0.05, 0.36, 1)
	Nhanh ra, chậm lại	cubic-bezier(0.4, 0, 0.2, 1)
	Ra, phía sau	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)
	In, Khối	cubic-bezier(0.55, 0.06, 0.68, 0.19)
	Phía trong, phía sau	cubic-bezier(0.6, -0.28, 0.74, 0.05)
	Nhanh ra, thẳng vào	cubic-bezier(0.4, 0, 1, 1)
chuyển động chậm dần	Ra, Sin	cubic-bezier(0.39, 0.58, 0.57, 1)
	Ra, Bậc hai	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Ra, khối	cubic-bezier(0.22, 0.61, 0.36, 1)
	Tắt dần, chậm lại	cubic-bezier(0, 0, 0.2, 1)
	Ra, Quay lại	cubic-bezier(0.18, 0.89, 0.32, 1.28)

Định cấu hình dấu 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 các dòng:

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

  

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

  

Bất kỳ thay đổi nào sẽ kích hoạt ảnh động 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 CSS

Khi bật thử nghiệm này, tab Kiểu sẽ làm nổi bật các thay đổi CSS của bạn bằng màu xanh lục.

Để sao chép một thay đổi đối với phần khai báo CSS, hãy di chuột qua phần khai báo được làm nổi bật 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 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 các thay đổi mình đã thực hiện bằng thẻ Thay đổi.