Tin tức và phân tích của tất cả các thiết bị di động

Cách chỉnh sửa trang web với Công cụ phát triển web của Firefox

Trang web của bạn sẽ đẹp hơn nếu logo được di chuyển năm pixel sang phải hoặc có nền màu xanh? Họ sẽ thêm một khung hoặc bóng cho hình ảnh trong bài viết nổi bật của bạn? Các trình duyệt hiện đại như Firefox đi kèm với các công cụ dành cho nhà phát triển web cho phép bạn kiểm tra chức năng nội bộ của trang web và thực hiện các thay đổi trực tiếp và xem kết quả trong thời gian thực.

Trong hướng dẫn này, bạn sẽ tìm hiểu cách sử dụng Công cụ phát triển web của Firefox để chỉnh sửa trực tiếp một trang web.

Note: Hướng dẫn này áp dụng cho hầu hết các trình duyệt, bao gồm Chrome, Opera và Safari.

Gặp gỡ các nhà phát triển web

Công cụ phát triển web của Firefox là một bộ công cụ toàn diện, từ hiển thị tất cả các yếu tố DOM đến đo tốc độ. Đối với hướng dẫn này, bạn chỉ cần các công cụ "Inspector" và "Style Editor".

Khởi chạy Firefox và truy cập bất kỳ / trang web của bạn. Từ menu hamburger của Firefox (trên cùng bên phải theo mặc định), chọn "Nhà phát triển web -> Trình chỉnh sửa kiểu" hoặc nhấn tổ hợp Shift + F7 trên bàn phím.

Trang web chỉnh sửa trực tiếp với Firefox Launch Style Editor

Bảng điều khiển phát triển web của Firefox sẽ xuất hiện ở một bên của cửa sổ, thường là ở phía dưới. Bạn có thể thay đổi vị trí của nó bằng cách nhấp vào nút ba điểm ở góc trên bên phải của bảng điều khiển và chọn "Dock phải / trái" hoặc "Cửa sổ riêng biệt".

Trang web chỉnh sửa trực tiếp với cửa sổ riêng biệt của Firefox

Note: Hướng dẫn này không chỉ ra cách mã hóa HTML và CSS. Bạn có thể tìm hiểu những điều cơ bản ở đây.

Kiểm tra phần tử

Để ảnh hưởng đến một yếu tố trông như thế nào, bạn phải có khả năng xác định nó. Nhấp vào nút đầu tiên trên thanh công cụ hoặc nhấn Ctrl + Shift + C trên bàn phím để kích hoạt bộ chọn thành phần.

Trang web chỉnh sửa trực tiếp với Firefox Element Picker

Di chuyển chuột xung quanh trang web để xem các phần khác nhau của trang web được tô sáng. Bên cạnh họ, bạn sẽ thấy các định danh chính của họ nổi trong một cửa sổ bật lên.

Trang web chỉnh sửa trực tiếp với Firefox Chọn logo

Khi bạn nhấp vào một yếu tố, nó sẽ được chọn trên tab Thanh tra của Công cụ dành cho nhà phát triển.

Trang web chỉnh sửa trực tiếp với Firefox Inspector

Khi bạn tìm thấy phần tử bạn muốn điều chỉnh, nhấp chuột phải vào mục nhập của nó trong Trình kiểm tra công cụ dành cho nhà phát triển và chọn từ cửa sổ bật lên xuất hiện "Sao chép -> Bộ chọn CSS".

Trang web chỉnh sửa trực tiếp với Firefox Copy Selector

Bắt đầu chỉnh sửa trực tiếp của bạn

Với bộ chọn CSS của phần tử của bạn được sao chép vào bảng tạm, hãy quay lại tab Trình chỉnh sửa kiểu của cửa sổ Nhà phát triển. Nhấp vào nút "+" ở phía trên bên trái để "Tạo và đính kèm một biểu định kiểu mới vào tài liệu."

Trang web chỉnh sửa trực tiếp với Firefox Trang mẫu mới

Dán Bộ chọn CSS của bạn vào kiểu mới, trống. Thêm một khoảng trắng theo sau là một bộ dấu ngoặc nhọn mở và đóng.

Trang web chỉnh sửa trực tiếp với Firefox Paste Selector

Trong CSS, sự xuất hiện của một thành phần được xác định bằng cách "nhắm mục tiêu" đầu tiên bằng cách sử dụng một mã định danh như bộ chọn CSS đó và sau đó thêm một số quy tắc ảnh hưởng đến diện mạo của nó, được nhóm trong dấu ngoặc nhọn. Bất cứ điều gì được đặt giữa mở và đóng dấu ngoặc nhọn đều ảnh hưởng đến "phần tử được nhắm mục tiêu".

Ví dụ: nếu bạn thêm quy tắc dưới đây:

Điều này ẩn phần tử nơi nó được sử dụng từ hình ảnh. Đây có lẽ là cách dễ nhất để biết rằng bạn đang nhắm mục tiêu đúng yếu tố trên trang của mình. Nếu nó biến mất, nó thực sự là thứ bạn muốn và bạn có thể loại bỏ quy tắc này để thử người khác. Nếu nó không biến mất, đã đến lúc quay lại với thanh tra và chọn một cái gì đó khác.

Trang web chỉnh sửa trực tiếp với Firefox Thay đổi màu nền

Chúng tôi sẽ không chỉ cho bạn cách mã CSS ở đây, nhưng bạn có thể chơi với một số quy tắc phổ biến như:

viền: rpxba 2px (255,0,0,0.5); màu: # 333; cỡ chữ: 20px;

Bạn sẽ nhận thấy rằng các thành phần trang web thay đổi khi bạn thêm quy tắc vào biểu định kiểu CSS.

Hãy nhớ rằng, không có gì được lưu dưới dạng một ghi chú cuối cùng. Nếu bạn thích giao diện của bạn, hãy sao chép mã của bạn ở đâu đó trong tệp TXT hoặc chương trình danh sách yêu thích của bạn để bạn hoặc nhà thiết kế / nhà phát triển có thể thêm nó vào biểu định kiểu trang web của bạn để thay đổi vĩnh viễn. Nếu bạn cần tìm hiểu thêm về CSS, hãy xem một số trò chơi trực tuyến sẽ giúp bạn thành thạo kỹ năng này.

Đọc tiếp:

Bài viết này có hữu ích không?