Được xuất bản vào Thứ Năm, ngày 8 tháng 6 năm 2017 • Cập nhật vào Thứ Năm, ngày 4 tháng 8 năm 2022• Updated on Thursday, August 4, 2022 Hoàn thành các hướng dẫn tương tác này để tìm hiểu những điều cơ bản về việc xem và thay đổi CSS của một trang bằng Chrome Devtools. Xem CSS của một phần tửNhấp chuột phải vào văn bản Inspect me! bên dưới và chọn Kiểm tra. Bảng điều khiển yếu tố của Devtools mở ra.Inspect. The Elements panel of DevTools opens. Kiểm tra tôi! Quan sát phần tử Inspect me! được tô sáng trong cây Dom.DOM Tree. Trong cây Dom, tìm giá trị của thuộc tính data-message cho phần tử Inspect me!.DOM Tree, find the
value of the data-message attribute for the Inspect me! element. Nhập giá trị của thuộc tính vào hộp văn bản bên dưới.
Trong ngăn phần tử> Kiểu, hãy tìm quy tắc lớp aloha.Elements > Styles pane, find the aloha class rule. Khung Styles liệt kê các quy tắc CSS được áp dụng cho bất kỳ yếu tố nào hiện đang được chọn trong cây Dom, vẫn phải là phần tử Inspect me!.Styles pane lists the CSS rules being applied to whatever element is currently selected in the DOM Tree, which should still be the Inspect me! element. Lớp aloha đang khai báo giá trị cho padding. Nhập giá trị này và đơn vị của nó không có khoảng trắng trong hộp văn bản bên dưới. Nếu bạn muốn gắn cửa sổ DevTools của mình ở bên phải chế độ xem của bạn, như trên ảnh chụp màn hình ở bước một, hãy xem thay đổi vị trí của DevTools. Thêm khai báo CSS vào một phần tửSử dụng khung kiểu khi bạn muốn thay đổi hoặc thêm khai báo CSS vào một phần tử.Styles pane when you want to change or add CSS declarations to an
element. Nhấp chuột phải vào văn bản Add a background color to me! bên dưới và chọn Kiểm tra.Inspect. Thêm một màu nền cho tôi! Nhấp vào element.style gần đỉnh của khung kiểu.Styles pane. Nhập Inspect me!0 và nhấn Enter. Nhập Inspect me!1 và nhấn Enter. Trong cây Dom, bạn có thể thấy rằng một khai báo kiểu nội tuyến đã được áp dụng cho phần tử.DOM tree, you can see that an inline style declaration was applied to the element.
Thêm lớp CSS vào một phần tửSử dụng khung kiểu để xem một phần tử trông như thế nào khi lớp CSS được áp dụng hoặc loại bỏ khỏi một phần tử.Styles pane to see how an element looks when a CSS class is applied to or removed from an element. Nhấp chuột phải vào phần tử Inspect me!2 bên dưới và chọn Kiểm tra.Inspect. Thêm một lớp học cho tôi! Nhấp vào .cls. DevTools tiết lộ một hộp văn bản nơi bạn có thể thêm các lớp vào phần tử đã chọn..cls. DevTools reveals a text box where you can add classes to the selected element. Nhập Inspect me!3 trong hộp văn bản thêm lớp mới và sau đó nhấn Enter. Hộp kiểm xuất hiện bên dưới hộp văn bản Thêm lớp mới, nơi bạn có thể bật và tắt lớp. Nếu phần tử Inspect me!2 có bất kỳ lớp nào khác được áp dụng cho nó, bạn cũng có thể chuyển đổi chúng từ đây.Add new class text box and then press Enter. A checkbox appears
below the Add new class text box, where you can toggle the class on and off. If the Inspect me!2 element had any other classes applied to it, you'd also be able to toggle them from here.
Thêm một pseudostate vào một lớp họcSử dụng khung Styles để áp dụng vĩnh viễn Pseudostate CSS cho một phần tử. DevTools hỗ trợ Inspect me!5, Inspect me!6, Inspect me!7, Inspect me!8 và những người khác.Styles pane to permanently apply a CSS pseudostate to an element. DevTools supports Inspect me!5, Inspect me!6, Inspect me!7, Inspect me!8, and others. Di chuột qua văn bản Inspect me!9 dưới đây. Màu nền thay đổi. Di chuột qua tôi! Nhấp chuột phải vào văn bản Inspect me!9 và chọn Kiểm tra.Inspect. Trong khung kiểu, nhấp vào: HOV.Styles pane, click :hov. Kiểm tra: Hộp kiểm di chuột. Màu nền thay đổi như trước đây, mặc dù bạn không thực sự lơ lửng trên phần tử.:hover checkbox. The background color changes like before, even though you're not actually hovering over the element.
Thay đổi kích thước của một phần tửSử dụng sơ đồ tương tác mô hình hộp trong khung kiểu để thay đổi chiều rộng, chiều cao, đệm, lề hoặc chiều dài đường viền của một phần tử.Box Model interactive diagram in the Styles pane to change the width, height, padding, margin, or border length of an element. Nhấp chuột phải vào phần tử data-message1 bên dưới và chọn Kiểm tra.Inspect. Thay đổi lề của tôi! Để xem mô hình hộp, nhấp vào nút hiển thị thanh bên trong thanh hành động trên ngăn kiểu.Box Model, click the Show sidebar button in the action bar on the Styles pane. Trong sơ đồ mô hình hộp trong khung kiểu, di chuột qua đệm. Phần đệm của phần tử được tô sáng trong chế độ xem.Box Model diagram in the Styles pane, hover over padding. The element's padding is
highlighted in the viewport.
Bấm đúp vào lề trái trong mô hình hộp. Phần tử hiện không có tỷ suất lợi nhuận, vì vậy data-message2 có giá trị data-message3.Box Model. The element currently doesn't have margins, so the data-message2 has a value of data-message3. Loại data-message4 và nhấn Enter.
Mô hình hộp mặc định là các pixel, nhưng nó cũng chấp nhận các giá trị khác, chẳng hạn như data-message5 hoặc data-message6.Box Model
defaults to pixels, but it also accepts other values, such as data-message5, or data-message6. Cập nhật vào Thứ Năm, ngày 4 tháng 8 năm 2022 • Cải thiện bài viết• Improve article | 
