Trang web của bạn sẽ đẹp hơn nếu biểu trưng được di chuyển năm pixel sang bên phải hoặc có nền màu xanh lam? Việc thêm đường viền hoặc bóng vào hình ảnh trong các bài đăng nổi bật của bạn có làm cho chúng nổi bật hơn không? Các trình duyệt hiện đại như Firefox đi kèm với Công cụ dành cho nhà phát triển web cho phép bạn kiểm tra hoạt động bên trong của trang web và thực hiện các chỉnh sửa trực tiếp, xem kết quả trong thời gian thực.
Trong hướng dẫn này, bạn sẽ học cách sử dụng Công cụ dành cho nhà phát triển web của Firefox để chỉnh sửa trực tiếp bất kỳ trang web nào.
Lưu ý :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.
Làm quen với Công cụ dành cho nhà phát triển web
Công cụ dành cho nhà phát triển web của Firefox là một bộ công cụ toàn diện, từ việc hiển thị tất cả các phần tử DOM đến khả năng đo tốc độ của nó. Đối với hướng dẫn này, bạn chỉ cần các công cụ “Trình kiểm tra” và “Trình chỉnh sửa kiểu”.
Khởi động Firefox và truy cập bất kỳ / trang web nào 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 Shift + F7 trên bàn phím của bạn.
Bảng điều khiển Nhà 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ần dưới cùng. Bạn có thể thay đổi vị trí của nó bằng cách nhấp vào nút ba chấm ở trên cùng bên phải của bảng điều khiển và chọn “Dock to Right / Left” hoặc “Separate Window”.
Lưu ý :Hướng dẫn này không chỉ cho bạn cách viết mã HTML và CSS. Bạn có thể tìm hiểu những điều cơ bản tại đây.
Kiểm tra phần tử
Để có thể ảnh hưởng đến giao diện của một phần tử, 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ụ của nó hoặc nhấn Ctrl + Shift + C trên bàn phím của bạn để bật chế độ chọn phần tử.
Di chuyển chuột của bạn xung quanh trang web để xem các phần tử khác nhau của trang web được đánh dấu. Bên cạnh họ, bạn sẽ thấy số nhận dạng chính của họ di chuột trong cửa sổ bật lên.
Khi bạn nhấp vào một phần tử, phần tử đó sẽ được chọn trong tab Thanh tra của Công cụ dành cho nhà phát triển.
Khi bạn tìm thấy yếu tố bạn muốn tinh chỉnh, hãy 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.”
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 khay nhớ tạm, hãy quay lại tab Trình chỉnh sửa kiểu trong cửa sổ Công cụ dành cho nhà phát triển. Nhấp vào nút “+” ở trên cùng bên trái để “Tạo và nối một biểu định kiểu mới vào tài liệu.”
Dán Bộ chọn CSS của bạn bên trong biểu định kiểu trống, mới. Thêm một khoảng trắng, theo sau là một tập hợp các dấu ngoặc nhọn mở và đóng.
Trong CSS, ngoại hình của một phần tử được xác định bằng cách "nhắm mục tiêu nó" trước tiên bằng cách sử dụng một số nhận dạng như Bộ chọn CSS đó, sau đó thêm một số quy tắc ảnh hưởng đến hình thức của phần tử, được nhóm bên trong dấu ngoặc nhọn. Mọi thứ được đặt giữa dấu ngoặc nhọn mở và đóng đề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 bên dưới:
display: none;
Điều này sẽ ẩn khỏi chế độ xem phần tử nơi nó được sử dụng. Đâ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, đó thực sự là quy tắc bạn muốn và bạn có thể xóa quy tắc này để thử những quy tắc khác. Nếu nó không biến mất, đã đến lúc quay lại Trình kiểm tra và chọn một cái gì đó khác.
Chúng tôi sẽ không hướng dẫn bạn cách viết mã CSS ở đây, nhưng bạn có thể thực hiện một số quy tắc phổ biến như:
border: 2px solid rgba(255,0,0,0.5); color: #333; font-size:20px;
Bạn sẽ nhận thấy rằng phần tử của trang web thay đổi khi bạn thêm quy tắc vào biểu định kiểu CSS.
Như một lưu ý cuối cùng, hãy nhớ rằng không có gì được lưu. Nếu bạn thích giao diện của các chỉnh sửa, hãy sao chép mã của bạn ở đâu đó - trong tệp TXT hoặc ứng dụng ghi 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 mã đó vào biểu định kiểu của trang web của bạn để thực hiện các thay đổi vĩnh viễn. Nếu bạn cần tìm hiểu về CSS, hãy xem một số trò chơi trực tuyến để giúp bạn thành thạo kỹ năng này.