---------
Phần 10.
Tìm và sửa lỗi HTML & CSS
Từ đầu tới giờ, chủ yếu là nghe, xem, và làm theo, nên ít
thấy lỗi khi lập trình. Nếu có lỗi, chỉ cần xem lại phần hướng dẫn, xem mình
làm sai chỗ nào và làm lại là được.
Khi mình không biết gì, thì nên xem và làm theo, vì nó giúp
mình dễ hình dung, dễ hiểu về đối tượng mình đang học. Tuy nhiên, khi đã hiểu
sơ sơ rồi, thì nên tự mình tìm tòi, thử nghiệm, rồi tự rút ra các bài học cho
bản thân.
Thường thì sẽ học được nhiều hơn khi tìm cách sửa các lỗi
gặp phải lúc viết mã.
Mặc dù chưa thử hết các trình duyệt, nhưng thấy Chrome,
Firefox, IE đều có developer tools. Đây là một công cụ hữu ích, giúp tìm và sửa
lỗi; ngoài ra nó cũng giúp cho việc học, phân tích để hiểu sâu hơn về HTML, CSS
và nhiều thứ khác.
Xem 17 phút đầu tiên của clip sau:
Theo clip, để mở developer tools, cần mở trình duyệt Chrome lên, bấm tổ hợp ba phím Ctrl+Shift+I, hoặc F12, hoặc vào menu của trình duyệt\More tools rồi chọn Developer tools hoặc chuột phải vào trang web, chọn Inspect. Xem hình developer tools đã được mở.
Mới chỉ biết HTML và CSS, nên chỉ cần quan tâm tới ba mục
sau: Elements, Styles và CSS box model (các phần khoanh đỏ ở hình trên).
Elements: chính là cây DOM, cũng là nội dung mã HTML của
trang web hiện tại.
Styles: là nội
dung của CSS.
CSS box model: là
hình ảnh trực quan của mỗi thành phần hay phần tử (element) của trang HTML, dựa
vào đây để tìm hiểu về các khái niệm margin, border, padding.
Một số kĩ năng
nên biết gồm:
– Dùng công cụ
chọn (cái hình mũi tên phía trên, bên trái, gần chữ Elements), để chọn một đối
tượng trên trang web, rồi xem mã HTML tương ứng. Hoặc chỉ cần chuột phải vào
đối tượng trên trang web và chọn Inspect.
– Thay đổi nội
dung trong các cửa sổ Elements, Styles và CSS box model, rồi xem kết quả thay
đổi của trang web.
– Biết được các
CSS nào đang tác động lên một phần tử trên trang web.
– Sử dụng Ctrl +
F để tìm kiếm một phần tử trên cửa sổ Elements (nhớ bấm chuột vào cửa sổ Elements, trước khi bấm Ctrl + F, nếu không sẽ là tìm kiếm trên trang web).
– Sau khi chọn
một phần tử bên cửa sổ Elements, thì bên cửa sổ Styles sẽ là toàn bộ CSS đang
tác động lên phần tử đó.
– Quan sát các
trạng thái hiển thị (hover, visited, active, focus) của một element (state),
bấm vào mục “:hov” ở cửa sổ Styles.
– Lưu ý là các chỉnh
sửa ở trên chỉ ảnh hưởng (áp dụng) tạm thời lên trang web ở trình duyệt, chứ nó
không lưu lại vào tập tin mã nguồn.
– Tại cửa sổ của
developer tools, bấm vào dấu ba chấm ở góc trên bên phải, chọn dock side để xem
các các cửa sổ ở nhiều chế độ khác nhau.
– Tại cửa sổ của
developer tools, bấm vào biểu tượng có hai hình chữ nhật ở góc trên bên trái để
xem trang web ở các thiết bị khác nhau với kích thước màn hình khác nhau. Sau
khi chọn thiết bị, chọn thêm chế độ xoay ngang và dọc để quan sát (biểu tượng
nút xoay ở góc trên bên phải).
– Tại tab Styles, các định nghĩa CSS càng ở
phía trên càng có độ ưu tiên cao hơn so với các định nghĩa CSS ở phía dưới.
-----------
Cập nhật [1/9/2020]
-----------