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

Khám phá 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 Công cụ cho nhà phát triển của Chrome liên quan đến xem và thay đổi CSS.

Xem bài viết 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.

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

Xem phần Xem CSS của 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 phần tử hoặc nhấn Command+Shift+C (Mac) hoặc Ctrl+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 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 Phần tử > Thẻ 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.

Đ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, đế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 Sources (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 mục Được 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 phần chú thích 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:

Kiểu đường liên kết có thể khác. Nếu bạn không chắc chắn 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 đường liên kết đó để 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

Phần tử > Kiểu hiển thị phần chú thích kèm theo 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 qua 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 MDN về 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ú thích cho 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ú giải công cụ kèm theo trọng số đặc tả.

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

Hãy di chuột qua biểu tượng --custom-property để xem giá trị của biểu tượng này 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 bài viết 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ẻ 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ả nội dung khai báo đã bị ghi đè. Khi bạn không quan tâm đến nội dung khai báo bị ghi đè, hãy sử dụng thuộc tính 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ẻ Đã tính toán trong bảng điều khiển Phần tử.

Đá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 cơ sở lưu trú 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 Show All (Hiển thị tất cả) trong thẻ Computed (Đã 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ử.

Ngoài ra, hãy di chuyển thẻ Kiểu rồi tìm các phần có tên Inherited from <element_name>.

Xem quy tắc tại CSS

Quy tắc tại là các câu lệnh CSS cho phép bạn kiểm soát hoạt động của CSS. Phần tử > Kiểu cho thấy các quy tắc sau trong các phần riêng:

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

Xem @property quy tắc gốc

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

Hãy di chuột qua tên của tài sản đó trong thẻ Kiểu để xem phần chú thích về giá trị, phần mô tả của tài sản và đường liên kết đến phần đăng ký của tài sản đó trong mục @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ụ: 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ử sẽ có màu xanh lục, nếu không thì phần tử sẽ có màu tím.

Xem @scope quy tắc gốc

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 @scope mới là một phần của thông số kỹ thuật Phân tầng và kế thừa cấp 6 của CSS. Các quy tắc này cho phép bạn xác định phạm vi của các kiểu CSS, nói cách khác là áp dụng rõ ràng 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 đè phần 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 gốc

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 cho thấy quy tắc này trong một mục 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.

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 các giá trị tuỳ chỉnh, hãy nhấp đúp vào các giá trị đó.

Xem @position-try quy tắc gố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 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.

Phần tử > Kiểu phân giải và liên kết các đường liên kết sau:

• Giá trị thuộc tính position-try-options cho một phần @position-try --name chuyên biệt.
• 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.

Hãy 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 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 lớp 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ẻ Styles (Kiểu) sẽ đưa bạn đến phần @position-try tương ứng.
4. Nhấp vào đường liên kết đến giá trị position-anchor hoặc các đối số anchor() tương tự. 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ử.

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

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

Để xem mô hình hộp của một phần tử, hãy chuyển đến thẻ Kiểu và 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 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à Đã tính toán để tìm kiếm CSS cụ thể thuộc tính hoặc giá trị.

Để tìm cả các tài sản kế thừa trong thẻ Đã tính toán, hãy đánh dấu vào hộp Hiện tất cả.

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

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 đượ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 trang có tiêu điểm cho phép bạn gỡ lỗi cho một phần tử như vậy như thể phần tử đó đang được đặt tiêu điểm.

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

1. Lấy tiêu điểm 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 được đặt tiêu điểm thay vì trang, do đó phần tử sẽ biến mất lần nữa.
3. Trong mục Phần tử > Kiểu, nhấp vào :hov, đánh dấu check_box Mô phỏng trang có tiêu điểm và đảm bảo phần tử đầu vào đã được chọn. Bây giờ, bạn có thể kiểm tra phần tử bên dưới.

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 mộ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ử, mặc dù phần tử này không thực sự di chuột qua.

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àm 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ử. Làm nổi bật phần tử giả là các phần tài liệu có phần tử "đã chọn" được làm nổi bật và đượ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ư 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 dưới đây.

   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 văn bản ở trên.

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

Xem các lớp tầ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 rồi 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.

Để 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 trưng cao nhất, do đó nền của phần tử có màu xanh lục.

Xem trang ở chế độ in

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ẻ Mức độ phù hợp cho bạn thấy CSS mà một trang thực sự sử dụng.

1. Nhấn Command+Shift+P (Mac) hoặc Control+Shift+P (Windows, Linux, ChromeOS) trong khi Công cụ cho nhà phát triển là 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 xuất hiện.

   

4. Nhấp vào Tải lại. Trang tải lại và thẻ Phạm vi bao phủ cung cấp thông tin tổng quan về số 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ị cho CSS đã sử dụng. Màu đỏ đại diện cho CSS không được sử dụng.

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.

   

   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 phần Phần tử > Thẻ 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 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 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 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 bằng cú pháp JavaScript: ```js propertyInCamelCase: "giá trị", propertyInCamelCase: "giá trị", ...

   • Sao chép tất 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. Đưa bạn đến thẻ Đã tính toán.

Thay đổi CSS

Phần này liệt kê tất cả các cách thay đổi CSS trong mục 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 địa phương của bạn trong một không gian làm việc.

Thêm phần khai báo CSS vào 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 nội dung khai báo trong các cách khác nhau:

• 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 nội dung 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 có thể muốn sử dụng thuộc tính cùng dòng quy trình khai báo. Nội dung khai báo cùng dòng có tính cụ thể cao hơn nội dung khai báo bên ngoài, vì vậy nội dung khai báo cùng dòng quy trình làm việc đảm bảo rằng các thay đổi sẽ có hiệu lực trong phần tử như bạn mong đợi. Xem Bộ chọn Loại để tìm hiểu 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à bạn cần kiểm thử cụ thể điều gì sẽ xảy ra khi được xác định ở nhiều nơi, hãy sử dụng quy trình làm việc khác.

Thêm phần 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 của phần element.style. Con trỏ đặt tiêu điểm để 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 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ử được 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 phần khai báo. Con trỏ đặt tiêu điểm để bạn có thể 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.

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 giá trị hoặc tên 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 nội dung đó. Xem Thay đổi các giá trị có thể liệt kê bằng phím tắt cho các phím tắt để 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 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+Mũi tên lên (máy Mac) hoặc Alt+Mũi tên lên (Windows, Linux) để tăng thêm 0,1.
• Up (Lên) để thay đổi giá trị thêm 1 hoặc tăng thêm 0, 1 nếu giá trị hiện tại nằm trong khoảng từ -1 đến 1.
• Nhấn tổ hợp phím 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 có tác dụng. Chỉ cần thay thế từng bản sao của Up (Lên) được đề cập trước đó bằng 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ó độ 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ị độ 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ị từ 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ị thêm 10, hãy giữ phím Shift khi kéo.

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

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 của lớp vào hộp Add New Class (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

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

1. Trên thẻ Phần tử > Thẻ Kiểu, 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 trong danh sách thả xuống:

   • pưu-tân-màu-sắc: ánh sáng. Cho biết rằng người dùng thích giao diện sáng.
   • ưu tiên-màu-lược: tối. 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 không triển khai. 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 lớp học

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ử. Hãy xem bài viết Thêm lớp vào phần tử. Bên dưới hộp Thêm mới Hộp (class) bao gồm 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

Để 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 . Công cụ cho nhà phát triển 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ữ Quy tắc kiểu mới để chọn biểu định kiểu để thêm quy tắc 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 tiếp theo cho mỗi khai báo.
3. Đánh dấu hoặc bỏ đánh dấu hộp bên cạnh phần khai báo. Khi bạn xoá một phần khai báo, Công cụ cho nhà phát triển gạch bỏ để cho biết rằng trang này không còn hoạt động nữa.

Trên ảnh chụp màn hình, thuộc tính color của 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

Hãy 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 bài viết Kiểm tra lưới 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ẻ 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 của -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 cuộn chuột đến 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 ngăn Kiểu phím tắt.

Thay đổi 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ẻ 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 các thuộc tính của bóng:

   • Type (Chỉ dành cho box-shadow). Chọn Lối nhỏ 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ị.
   • Spread (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à thời gian chuyển đổi bằng Trình chỉnh sửa tốc độ

Trình chỉnh sửa tốc độ 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 tốc độ):

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ẻ Styles (Kiểu), hãy tìm biểu tượng màu tím bên cạnh các phần 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 tốc độ):

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 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 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 nhận ra
   • Dễ dàng kết nối
   • dễ dàng

2. Trong Trình chuyển đổi giá trị đặt trước, hãy nhấp vào 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 cho 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)
	Bên ngoài, bậc hai	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Xuất ra, lập phương	cubic-bezier(0.65, 0.05, 0.36, 1)
	Tua nhanh, chậm lại	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)
	In, Lập phương	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	Bên ngoài, hình sin	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)
	Ra, 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 kẻ để thêm điểm điều khiển và kéo điểm đó. Nhấp đúp để xóa điểm.

  

• Đối với các 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 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ật thử nghiệm này, thẻ 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 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 Copy (Sao chép).

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

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