Xem và thay đổi CSS

Kayce Basques

Sofia Emelianova

Hãy 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 một 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!

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

   

3. Trong DOM Tree (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 bên dưới.

5. Trong thẻ Elements (Phần tử) > Styles (Kiểu), hãy tìm quy tắc lớp aloha.

   Thẻ 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. Phần tử nà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 neo cửa sổ DevTools ở bên phải khung nhìn, như trong ảnh chụp màn hình ở bước 1, hãy xem phần Thay đổi vị trí của DevTools.

Thêm phần khai báo CSS vào phần tử

Sử dụng thẻ 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 thẻ Kiểu.

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

4. Nhập honeydew rồi nhấn Enter. Trong cây DOM, bạn có thể thấy rằng 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 một phần tử

Sử dụng thẻ Kiểu để xem giao diện của một phần tử khi áp dụng hoặc xoá lớp CSS khỏi 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 Inspect (Kiểm tra).

   Thêm lớp học cho tôi!

2. Nhấp vào .cls. DevTools sẽ 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 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 Thêm lớp mới, nơi bạn có thể bật và tắt lớp. Nếu phần tử Add a class to me! có bất kỳ lớp nào khác được áp dụng cho phần tử đó, bạn cũng có thể bật và tắt các lớp đó từ đây.

Thêm trạng thái giả vào một lớp

Sử dụng thẻ Kiểu để áp dụng trạng thái giả CSS cho một phần tử.

1. Di chuột qua văn bản Hover over me! bên dưới. Màu nền sẽ thay đổi.

   Hãy 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 thẻ Kiểu, hãy nhấp vào :hov.

4. Chọn hộp kiểm :hover. Màu nền sẽ thay đổi như trước, mặc dù bạn không thực sự di chuột qua phần tử.

Để biết thêm thông tin, hãy xem phần Bật/tắt lớp giả.

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 thẻ 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 Inspect (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 Show profile (Hiện thanh bên) trong thanh thao tác trên thẻ Styles (Kiểu).

3. Trong biểu đồ Box Model (Mô hình hộp) trong thẻ Styles (Kiểu), hãy di chuột qua padding (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ị -.

5. Nhập 100 rồi nhấn phím Enter.

Mô hình hộp mặc định là pixel, nhưng cũng chấp nhận các giá trị khác, chẳng hạn như 25% hoặc 10vw.

Lưu ý quan trọng: Ngoài ra, trong phần khai báo quy tắc trên thẻ Styles (Kiểu), bạn có thể thay đổi các thuộc tính chiều dài và đơn vị của các thuộc tính đó bằng con trỏ.