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 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 kiến thức cơ bản.

Chọn một phần tử

Bảng điều khiển Elements (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 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, kiểu của phần tử sẽ xuất hiện trong thẻ Kiểu. Ở bên trái, phần tử được đánh dấu trong khung nhìn, nhưng chỉ vì chuột đang di chuột qua phần tử đó trong Cây DOM.

Hãy xem bài viết 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), 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 Console (Bảng điều khiển), nhấp chuột phải vào kết quả rồi chọn Reveal in Elements panel (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ẻ Styles (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. Các đườ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 Inherited from ... (Kế thừa từ...), hãy chuyển đến các phần tử mẹ.
• Trong các 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 animation, thành @keyframes.
• Đường liên kết Tìm hiểu thêm trong 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:

Đường liên kết có thể được tạo kiểu theo cách khác. Nếu bạn không chắc chắn liệu một thành phần 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 hiệu và giá trị thuộc tính tuỳ chỉnh

Elements (Phần tử) > Styles (Kiểu) sẽ cho thấy chú thích 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 về 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 về 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 chọn Settings > Preferences > Elements > Show CSS documentation tooltip (Cài đặt > Lựa chọn ưu tiên > Phần tử > Hiện chú thích tài liệu CSS).

Xem mức độ cụ thể của bộ chọn

Di chuột qua một bộ chọn trong thẻ Styles (Kiểu) – bao gồm cả bộ chọn gốc trong quy tắc CSS lồng nhau, quy tắc lồng nhau kế thừa và quy tắc @nested-declarations – để xem chú giải công cụ có trọng số độ cụ thể và làm nổi bật các phần tử khớp trong khung nhìn.

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

Di chuột qua một --custom-property để xem giá trị của nó trong chú giải công cụ.

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

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

Xem 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ẻ Styles (Kiểu) cho bạn thấy tất 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ự đượ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 tất cả để xem tất cả các tài sản.

Xem phần Tìm hiểu về CSS trong thẻ Computed (Đã 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 kế thừa

Đánh dấu vào hộp kiểm Show All (Hiển thị 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ử.

Ngoài ra, hãy di chuyển thẻ Styles (Kiểu) và tìm các mục có tên là Inherited from <element_name>.

Xem quy tắc CSS at-rule

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. Elements (Phần tử) > Styles (Kiểu) cho thấy các quy tắc sau đây trong các phần riêng:

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

Xem @property quy tắc @

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

Di chuột qua tên của thuộc tính đó trong thẻ Styles để xem chú thích có giá trị, phần mô tả của thuộc tính 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ẻ Styles.

Để 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 quy tắc at-rule

Thẻ Styles (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:

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 quy tắc at-rule

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

Quy tắc @ @scope mới là một phần của quy cách CSS Cascading and Inheritance Level 6. 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.

Trong ví dụ này, quy tắc @scope ghi đè nội dung khai báo CSS chung 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 quy tắc at-rule

Quy tắc CSS @font-palette-values 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-at 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 mục @font-palette-values.

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

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

Xem @position-try quy tắc at-rule

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ề API định vị neo CSS.

Elements (Phần tử) > Styles (Kiểu) 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 phụ, tức là nhấp vào TÀI KHOẢN CỦA BẠN rồi nhấp vào MẶT TIỀN CỬA HÀNG.
2. Kiểm tra phần tử có id="submenu" trong bản xem trước.
3. Trong phần 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 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() tương tự. Bảng điều khiển 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ẻ Styles (Kiểu) rồi nhấp vào nút Show sidebar (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à Đã tính toán để tìm các bộ chọn CSS cụ thể (bao gồm cả bộ chọn mẹ trong các quy tắc lồng nhau), thuộc tính hoặc giá trị.

Để 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ẻ Đã tính toán, hãy nhóm các thuộc tính được lọc thành 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, thì 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 một trang được đặt 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 đặt 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. Lấy 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 được lấy tiêu điểm thay vì trang, vì vậy, phần tử này 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 lấy 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 Kết xuất.

Để khám phá thêm nhiều 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 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 Thành phần, 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 Công cụ cho nhà phát triển áp dụng nội dung khai báo background-color cho phần tử, ngay cả khi phần tử đó không thực sự đượ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ẽ 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ử) 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 phần 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ả đánh dấu đượ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, kiểu xếp 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ả đánh dấu đượ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ả đánh dấu 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ẻ Styles (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 chồ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 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 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. Trong trình đơn thả xuống Mô phỏng nội dung nghe nhìn CSS, hãy chọn print (in).

Xem CSS đã dùng và chưa dùng bằng 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 ở chế độ tiêu điểm để mở Trình đơn lệnh.

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

   

3. Chọn Show Coverage (Hiện mức độ phù hợp). 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ẻ Phạm vi áp dụng sẽ 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 đại diện cho CSS đã dùng. Màu đỏ đại diện cho 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 sử dụng, trong khi các dòng từ 59 đến 63 được sử 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ẻ Styles (Kiểu), bạn có thể sao chép riêng các quy tắc, nội dung 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 trong cú pháp JavaScript. Lựa 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 (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 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 mọi 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 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ị được 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 bạn có thể thay đổi CSS trong Elements (Phần tử) > Styles (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 cục bộ trong 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 phức tạp hơn của các thuộc tính CSS, chẳng hạn như hiệu ứng chuyển màu hoặc đổ bóng hộp 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 làm 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. Khai báo cùng dòng có tính cụ thể cao hơn khai báo bên ngoài, vì vậy, quy trình cùng dòng đảm bảo rằng các thay đổi sẽ 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 tra cụ thể điều gì sẽ xảy ra khi một khai báo được xác định ở nhiều nơi, hãy sử dụng quy trình khác.

Thêm một khai báo cùng dòng

Cách thêm một 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ỏ 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 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 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 định kiểu

Cách thêm nội dung khai báo vào một 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ỏ 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.

Trên ảnh chụp màn hình, một quy tắc định 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. 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 giá trị có thể liệt kê của một nội dung khai báo, ví dụ: font-size, bạn có thể sử dụng các phím tắt sau để tăng giá trị theo một lượng cố định:

• Option+Up (Mac) hoặc Alt+Up (Windows, Linux) để tăng thêm 0,1.
• Mũi tên lên để thay đổi giá trị thêm 1 hoặc thêm 0, 1 nếu giá trị hiện tại nằm trong khoảng từ -1 đến 1.
• Shift+Mũi tên 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.

Bạn cũng có thể giảm giá trị. Bạn chỉ cần thay thế mỗi trường hợp của Up đã đề cập trước đó bằng Down.

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

Bạn có thể 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ị đo chiều dài:

1. Di chuột qua tên đơn vị và lưu ý rằng 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ị độ dài:

1. Di chuột qua giá trị đơn vị và lưu ý rằng con trỏ của bạn 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 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 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à Giao diện 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 (Phần tử) > Styles (Kiểu), hãy nhấp vào biểu tượng 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 trong danh sách thả xuống:

   • prefers-color-scheme: light. Cho biết người dùng thích 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 không 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 các tuỳ 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ẻ Hiển thị.

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

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ụ 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 để thêm quy tắc

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

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ẻ Styles (Kiểu), hãy di chuột lên quy tắc xác định 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 vào hộp 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ẽ gạch bỏ nội dung đó để cho biết rằng nội dung đó 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 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 API Chuyển đổi khung hiển thị.

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 HDR và không phải HDR 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 để 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ẻ Styles (Kiểu), hãy tìm nội dung 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 Angle Clock (Đồ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 đổ

Shadow Editor (Trình chỉnh sửa bóng) cung cấp một GUI để 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ó 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 mờ bên cạnh nội dung 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:

   • Type (Loại) (chỉ dành cho box-shadow). Chọn Outset (Bên ngoài) hoặc Inset (Bên trong).
   • Độ 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 các thay đổi được áp dụng cho phần tử.

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

Easing Editor (Trình chỉnh sửa hiệu ứng chuyển đổi) cung cấp một GUI để thay đổi 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ẻ Styles (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 này để mở Trình chỉnh sửa gia 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 Easing Editor (Trình chỉnh sửa gia tốc):

1. Trong Easing Editor (Trình chỉnh sửa hàm easing), để đặt giá trị từ khoá, hãy nhấp vào một trong các nút chọn:
   • tuyến tính
   • 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:

   • 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	Đườ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)
	Tăng tốc rồi giảm tốc, bậc hai	cubic-bezier(0.46, 0.03, 0.52, 0.96)
	Tăng tốc rồi giảm tốc, hàm bậc ba	cubic-bezier(0.65, 0.05, 0.36, 1)
	Nhanh ra, chậm vào	cubic-bezier(0.4, 0, 0.2, 1)
	Vào ra, lùi	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)
	Tăng tốc, bậc hai	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)
	Fast Out, Linear In	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)
	Giảm tốc, Bậc hai	cubic-bezier(0.25, 0.46, 0.45, 0.94)
	Giảm tốc theo hàm bậc ba	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)
	Đi và về	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 hàm thời gian, hãy sử dụng các điểm điều khiển trên đườ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 kẻ để thêm một điểm điều khiển rồi 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 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 lê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 mọi thay đổi 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.