Cách sử dụng Google Chrome để gỡ lỗi CSS
Công cụ Kiểm tra phần tử rất tuyệt khi gỡ lỗi các trang web của bạn trong thời gian thực. Bạn có thể sử dụng công cụ này để giúp xem trước và thay đổi thiết kế của một trang web. Nó cũng cho phép bạn làm như vậy mà không cần tải lại trang, hiển thị các thay đổi CSS của bạn ngay lập tức.
Bài viết này sẽ trình bày về cách xem các lớp CSS và các kiểu áp dụng của chúng trong cửa sổ Kiểm tra phần tử. Nó cũng sẽ trình bày cách bạn có thể sử dụng điều này để xem trước các thay đổi bạn thực hiện đối với CSS của mình trong thời gian thực.
Mục Lục
Mở phần tử Kiểm tra trong Google Chrome
Bạn có thể truy cập bất kỳ trang web nào và mở cửa sổ Kiểm tra phần tử để xem mã HTML hoặc CSS của nó trông như thế nào. Hướng dẫn này sẽ sử dụng một trang web mẫu để chứng minh.
Bạn có thể mở cửa sổ Kiểm tra phần tử trong Google Chrome bằng cách nhấn vào F12 Chìa khóa. Bạn cũng có thể nhấp chuột phải vào bất kỳ đâu trên trang và nhấp vào Quan sát.
Cửa sổ Kiểm tra phần tử sẽ mở ra đối với mã HTML cho một phần của trang web nơi bạn nhấp chuột phải. Đây là nơi bạn cũng có thể chỉnh sửa văn bản trang web bằng Google Chrome.
Tab Kiểu trong Cửa sổ Kiểm tra Phần tử
Trong cửa sổ Kiểm tra phần tử, bên dưới Các yếu tố , có một nơi để xem cả mã HTML và CSS. Bạn có thể thấy mã HTML ở bên trái của cửa sổ Kiểm tra phần tử. Bạn có thể tìm thấy mã CSS ở bên phải, bên dưới Phong cách chuyển hướng.
Giả sử bạn có một phần tử HTML với một lớp được gọi là “card-padding”, với đệm phải và trái được áp dụng cho nó:
.card-padding {
padding-right: 0vh;
padding-left: 0vh;
}Nếu bạn đã xem trước trang web này trong trình duyệt, bạn sẽ có thể chọn div phần tử có lớp “card-padding”. Mọi kiểu dáng được áp dụng cho lớp “card-padding” sẽ hiển thị ở bên phải, bên dưới Phong cách chuyển hướng.
Khi bạn di chuột qua một phần tử trong chế độ xem mã HTML, phần đó của trang web sẽ đánh dấu trong trình duyệt web. Loại phần tử HTML, cùng với bất kỳ tên lớp nào cũng sẽ hiển thị trong hộp thoại bên cạnh phần tử.
Trong trường hợp này, bạn sẽ thấy vùng chứa div với các tên lớp “row”, “card-padding” và “pb-5” được đánh dấu trên trang.
Cách thực hiện thay đổi đối với CSS trong thời gian thực
Bạn có thể thay đổi CSS trực tiếp từ tab Kiểu:
- Sử dụng trang web này, nhấp chuột phải vào tiêu đề đầu tiên.
- Trên tiêu đề h4 cụ thể đó, bạn sẽ thấy một lớp được áp dụng cho nó được gọi là “văn bản xám” với màu # 8a8a8a.
- Thay vào đó, hãy thay đổi màu thành màu khác, chẳng hạn như màu cam. Bạn chỉ muốn thay đổi giá trị của chính nó chứ không phải tên của thuộc tính, “color”.
- Bạn sẽ thấy tiêu đề thay đổi từ màu xám đậm sang màu da cam.
- Nếu bạn muốn tắt một kiểu CSS cụ thể, hãy bỏ chọn hộp bên trái của kiểu đó.
- Bạn cũng có thể thêm nhiều kiểu vào tập hợp ban đầu. Nhấp vào ngay bên dưới hoặc bên phải của một thuộc tính để bắt đầu thêm một thuộc tính mới. Bạn nên sử dụng cú pháp tương tự như trong tệp CSS thông thường khi thêm các kiểu mới.
- Nếu bạn đang xem trước một trang web địa phương, bạn có thể tiếp tục thực hiện các thay đổi CSS cho đến khi bạn gần hơn với giao diện cần thiết cho giao diện người dùng của mình. Sau đó, bạn có thể sao chép các thay đổi CSS mà bạn đã thực hiện trở lại vào mã cục bộ của mình.
Cách sửa đổi CSS từ thư viện hoặc khung của bên thứ ba
Bạn cũng có thể thực hiện các thay đổi đối với các phần tử HTML nếu bạn đang sử dụng các thư viện hoặc khuôn khổ của bên thứ ba như Bootstrap.
- Sử dụng trang web này, nhấp chuột phải vào một trong các nút Bootstrap trên trang.
- Bạn sẽ thấy hai lớp được áp dụng cho nút, “btn” và “btn-primary”. Bootstrap đã có kiểu riêng áp dụng cho cả hai lớp này. Màu đang được sử dụng làm màu nền và màu viền là màu # 007bff. Thay đổi điều này thành một cái gì đó khác, chẳng hạn như Violet.
- Nếu bạn đang xem trước một trang web địa phương, thì bạn có thể thêm lại các thay đổi mới vào mã địa phương của mình. Tùy thuộc vào thứ tự CSS của bạn, bạn có thể cần sử dụng bộ chọn CSS cụ thể hơn. Ví dụ: đặt tiền tố bộ chọn bằng “.btn”. Điều này sẽ ghi đè kiểu Bootstrap ban đầu.
.btn.btn-primary {
background-color: violet;
border-color: violet;
}
Yếu tố.style có nghĩa là gì trong tab Kiểu?
Mỗi phần tử HTML mà bạn đánh dấu trong cửa sổ Kiểm tra phần tử có một khối element.styles. Điều này tương đương với việc thêm kiểu nội tuyến vào phần tử HTML, thay vì nhắm mục tiêu nó bằng bộ chọn.
- Nhấp chuột phải vào một phần tử HTML. Thêm bất kỳ kiểu nào vào phần element.style, chẳng hạn như:
color: whitesmoke; - Bạn sẽ thấy rằng mã cho phần tử HTML cũng đã thay đổi. Mã trong phần tử HTML hiện có dòng mới:
style="color: whitesmoke;"
Cách các phần tử HTML con kế thừa tạo kiểu
Nếu bạn có hai giá trị kiểu khác nhau được áp dụng cho phần tử mẹ và phần tử con, thì giá trị trong phần tử con sẽ được ưu tiên.
- Sử dụng trang web này, nhấp chuột phải vào bất kỳ đâu trên các cạnh bên ngoài của trang web.
- Trong phần HTML của cửa sổ Kiểm tra phần tử, hãy tập trung vào hai phần tử HTML cụ thể. Có một phần tử div cha với một lớp “nội dung” được áp dụng cho nó. Phần tử HTML này có phần tử con h4, với một lớp “văn bản màu xám” được áp dụng cho nó.
- Chọn phần tử HTML h4 con và tắt kiểu màu trong lớp “xám văn bản”.
- Chọn Phần tử HTML gốc có lớp “nội dung”. Thêm kiểu CSS sau vào lớp:
color: red;Tất cả văn bản trong div mẹ sẽ chuyển sang màu đỏ. Thay đổi này cũng sẽ phân chia thành các phần tử con, nghĩa là h4 cũng sẽ có màu đỏ.
- Chọn phần tử HTML h4 con và thêm một kiểu mới vào lớp “text-xám”:
color: green;Điều này sẽ ghi đè kiểu dáng của bất kỳ lớp cha nào. Phần tử HTML h4 sẽ chuyển từ màu đỏ sang màu xanh lá cây.
- Bạn cũng sẽ thấy thông báo nếu bạn xem kiểu cho lớp “nội dung”. Điều này xác nhận rằng phần tử con h4 đang ghi đè màu của phần tử cha.
Lợi ích của việc gỡ lỗi CSS của bạn trong trình duyệt
Gỡ lỗi CSS trong trình duyệt của bạn có thể tiết kiệm rất nhiều thời gian và tăng tốc quy trình viết mã của bạn. Điều này đặc biệt đúng nếu bạn cần xem các thay đổi CSS mới của mình tác động như thế nào đến giao diện người dùng trên trang web của bạn trong thời gian thực.
Bạn có thể sử dụng kỹ thuật này thay vì thực hiện các thay đổi đối với mã cục bộ và tải lại ứng dụng của mình. Điều này sẽ giúp bạn không phải đoán những giá trị CSS nào sẽ hoạt động, vì bây giờ bạn có thể xem các thay đổi giao diện người dùng của mình khi bạn thực hiện chúng.
Bạn có thể thực hiện các thay đổi đối với cửa sổ Kiểm tra phần tử cho đến khi bạn gần đạt được thiết kế mong muốn của mình. Sau khi có, bạn có thể sao chép mã từ cửa sổ Kiểm tra phần tử, trở lại mã cục bộ của bạn. Bạn vẫn có thể chạy lại ứng dụng của mình để kiểm tra xem các thay đổi CSS mới của bạn vẫn hoạt động.
Hướng dẫn này bao gồm những điều cơ bản về cách gỡ lỗi CSS của một trang web bằng cửa sổ Kiểm tra phần tử, bao gồm cả vị trí tìm CSS trong tab Kiểu.
Nó cũng bao gồm cách thực hiện các thay đổi đối với CSS và xem các thay đổi trực quan đối với giao diện người dùng trong thời gian thực. Hy vọng rằng bạn cũng hiểu cách thực hiện các thay đổi khi CSS sử dụng thư viện của bên thứ ba và cách hoạt động của kế thừa kiểu dáng.
Có rất nhiều điều thú vị khác mà bạn có thể làm với cửa sổ Kiểm tra phần tử.
Đọc tiếp
Giới thiệu về tác giả
