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ử.
- Chọn một phần tử.
- 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:
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:
- Kiểm tra văn bản trên thẻ trong bản xem trước.
- 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:
- Kiểm tra dòng văn bản thứ hai trong bản xem trước.
- 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 @position-try
tại 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 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.
Phần tử > Kiểu phân giải các giá trị position-try-options
và liên kết từng tuỳ chọn với một phần @position-try --name
riêng.
Kiểm tra các giá trị position-try-options
và các phần @position-try
trong bản xem trước tiếp theo:
- Trong bản xem trước, hãy mở trình đơn phụ, tức là nhấp vào YOUR ACCOUNT (TÀI KHOẢN CỦA BẠN), rồi nhấp vào STOREFRONT.
- Kiểm tra phần tử bằng
id="submenu"
trong bản xem trước. - Trong mục 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.
Để chỉnh sửa giá trị trong phần này, 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:
- 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 đó.
- 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.
- 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
:
- Chọn một phần tử.
- Trên bảng điều khiển Phần tử, hãy chuyển đến thẻ Kiểu.
- Nhấp vào :hov.
- 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:
-
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!
Chọn một phần văn bản ở trên.
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:
- Mở Trình đơn lệnh.
- Bắt đầu nhập
Rendering
rồi chọnShow Rendering
. - Đố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.
- 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.
Bắt đầu nhập
coverage
.Chọn Hiển thị mức độ phù hợp. Thẻ Mức độ phù hợp sẽ xuất hiện.
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.
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:
- Chọn một phần tử.
- Trong thẻ Phần tử > Kiểu, hãy nhấp chuột phải vào một thuộc tính CSS.
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).
- 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:
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:
- Chọn một phần tử.
- 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.
- Nhập tên thuộc tính rồi nhấn phím Enter.
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ínhstyle
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ó:
- Chọn một phần tử.
- 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.
- Nhập tên thuộc tính rồi nhấn phím Enter.
- 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:
- Di chuột qua tên đơn vị và để ý rằng tên đơn vị này được gạch chân.
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:
- 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.
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ử:
- Chọn phần tử trong Cây DOM.
- Nhấp vào .cls.
- Nhập tên lớp học vào hộp Thêm lớp mới.
- 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:
- 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.
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ànhdark
.
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ử:
- Chọn phần tử trong Cây DOM.
- 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.
- 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:
- Chọn một phần tử.
- 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:
- Chọn một phần tử.
- 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.
- Đá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:
- Chọn một phần tử có khai báo góc.
Trong thẻ Styles (Kiểu), hãy tìm phần khai báo
transform
hoặcbackground
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.Nhấp vào bản xem trước để mở Đồng hồ góc.
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.
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:
Chọn một phần tử có khai báo bóng. Ví dụ: chọn phần tử tiếp theo.
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ặcbox-shadow
.Nhấp vào biểu tượng bóng để mở Trình chỉnh sửa bóng.
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ị.
- Loại (chỉ dành cho
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):
- 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. - 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ắttransition
. - 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:
- 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
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ặcemphasized
. - Giá trị đặt trước Cubic Bezier:
- Giá trị đặt trước tuyến tính:
Từ khoá về thời gian | Chế độ đặt 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.