Xem và thay đổi CSS

Kayce Basques

Sofia Emelianova

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ử

1. 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é!

2. Quan sát phần tử Inspect me! được đánh dấu màu xanh dương trong Cây DOM.

   

3. Trong Cây DOM, hãy tìm giá trị của thuộc tính data-message cho phần tử Inspect me!.

4. Nhập giá trị của thuộc tính vào hộp văn bản dưới đây.

5. 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!.

6. Lớp aloha đang khai báo giá trị cho padding. 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ử.

1. 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!

2. Nhấp vào element.style ở gần đầu ngăn Styles (Kiểu).

3. Nhập background-color rồi nhấn phím Enter.

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

1. 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!

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

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

1. 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!

2. Nhấp chuột phải vào văn bản Hover over me! rồi chọn Kiểm tra.

3. Trong ngăn Styles (Kiểu), hãy nhấp vào :hov.

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

1. 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!

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

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

4. 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à -.

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