Hoàn thành các hướng dẫn tương tác này để tìm hiểu kiến thức cơ bản về cách xem và thay đổi CSS của trang bằng Công cụ của Chrome cho nhà phát triển.
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 rồi chọn Kiểm tra. Bảng điều khiển Phần tử của Công cụ cho nhà phát triển sẽ mở ra.Kiểm tra tôi nhé!
Quan sát phần tử
Inspect me!
được đánh dấu màu xanh dương trong Cây DOM.Trong Cây DOM, hãy tìm giá trị của thuộc tính
data-message
cho phần tửInspect me!
.Nhập giá trị của thuộc tính vào hộp văn bản dưới đây.
Trong ngăn Elements > Styles (Phần tử), hãy tìm quy tắc lớp
aloha
.Ngăn Kiểu liệt kê các quy tắc CSS đang được áp dụng cho bất kỳ phần tử nào được chọn trong Cây DOM, đây vẫn phải là phần tử
Inspect me!
.Lớp
aloha
đang khai báo giá trị chopadding
. Nhập giá trị này và đơn vị của giá trị không có dấu cách vào hộp văn bản bên dưới.
Nếu bạn muốn gắn cửa sổ Công cụ cho nhà phát triển vào bên phải khung nhìn của bạn, như trên ảnh chụp màn hình ở bước 1, hãy xem bài viết Thay đổi vị trí Công cụ cho nhà phát triển.
Thêm nội dung khai báo CSS vào phần tử
Sử dụng ngăn Kiểu khi bạn muốn thay đổi hoặc thêm nội dung khai báo CSS vào một phần tử.
Nhấp chuột phải vào văn bản
Add a background color to me!
bên dưới rồi chọn Kiểm tra.Thêm màu nền cho tôi!
Nhấp vào
element.style
ở gần đầu ngăn Styles (Kiểu).Nhập
background-color
rồi nhấn phím Enter.Nhập
honeydew
rồi nhấn phím Enter. Trong cây DOM, bạn có thể thấy phần khai báo kiểu cùng dòng đã được áp dụng cho phần tử.
Thêm lớp CSS vào phần tử
Sử dụng ngăn Styles (Kiểu) để xem phần tử trông như thế nào khi áp dụng hoặc xoá lớp CSS khỏi một phần tử.
Nhấp chuột phải vào phần tử
Add a class to me!
bên dưới rồi chọn Kiểm tra.Thêm lớp học cho tôi!
Nhấp vào .cls. Công cụ cho nhà phát triển hiển thị một hộp văn bản để bạn có thể thêm các lớp vào phần tử đã chọn.
Nhập
color_me
vào hộp văn bản Add new class (Thêm lớp mới) rồi nhấn Enter. Một hộp đánh dấu sẽ xuất hiện bên dưới hộp văn bản Add new class (Thêm lớp mới) để bạn có thể bật và tắt lớp này. Nếu phần tửAdd a class to me!
có bất kỳ lớp nào khác được áp dụng, bạn cũng có thể bật/tắt các lớp đó từ đây.
Thêm giả trạng thái (pseudostate) vào một lớp
Sử dụng ngăn Styles (Kiểu) để áp dụng giả lập CSS cho một phần tử. Công cụ cho nhà phát triển hỗ trợ :active
, :focus
, :focus-within
, :target
, :hover
, :visited
hoặc focus-visible
.
Di chuột qua văn bản
Hover over me!
bên dưới. Màu nền sẽ thay đổi.Di chuột qua tôi!
Nhấp chuột phải vào văn bản
Hover over me!
rồi chọn Kiểm tra.Trong ngăn Styles (Kiểu), hãy nhấp vào :hov.
Chọn hộp kiểm :hover. Màu nền thay đổi như trước, mặc dù bạn thực sự không di chuột qua phần tử đó.
Thay đổi kích thước của một phần tử
Sử dụng sơ đồ tương tác Box Model trong ngăn Styles (Kiểu) để thay đổi chiều rộng, chiều cao, khoảng đệm, lề hoặc độ dài đường viền của một phần tử.
Nhấp chuột phải vào phần tử
Change my margin!
bên dưới rồi chọn Kiểm tra.Thay đổi lề của tôi!
Để xem Box Model (Mô hình hộp), hãy nhấp vào nút ShowToolbar (Hiện thanh bên) trong thanh thao tác trên ngăn Styles (Kiểu).
Trong sơ đồ Box Model (Mô hình hộp) trong ngăn Styles (Kiểu), hãy di chuột qua khoảng đệm. Khoảng đệm của phần tử được làm nổi bật trong khung nhìn.
Nhấp đúp vào lề trái trong Box Model (Mô hình hộp). Phần tử hiện không có lề, vì vậy
margin-left
có giá trị là-
.Nhập
100
rồi nhấn phím Enter.
Box Model mặc định sử dụng pixel, nhưng cũng chấp nhận các giá trị khác, chẳng hạn như 25%
hoặc 10vw
.