Và bạn có thể thấy bảng màu hoặc phông chữ trên một trang web cụ thể mà bạn muốn kết hợp vào blog hoặc ứng dụng web của mình. Nhưng bạn sẽ cần một tiện ích mở rộng trình duyệt để xem bảng màu của trang web và các tính năng CSS khác Show
Tính năng tổng quan về CSS trong Công cụ dành cho nhà phát triển của Chrome cho phép bạn xem các thuộc tính CSS này Trong bài đăng này, chúng tôi sẽ giới thiệu cách sử dụng tính năng tổng quan về CSS trong Công cụ dành cho nhà phát triển Chrome. Chúng ta cũng sẽ tìm hiểu cách sử dụng tổng quan về CSS để lấy màu và các thuộc tính CSS khác mà bạn muốn sử dụng khi tạo trang web Bắt đầu nào. 💃 Bảng tổng quan CSS là gì?Bảng tổng quan CSS là một trong những tính năng mới nhất của Công cụ dành cho nhà phát triển Chrome. Nó phục vụ như một công cụ xem trước cho phép bạn xem các thuộc tính CSS khác nhau được sử dụng để tạo một trang web Nó hiển thị các thuộc tính CSS như
Công cụ dành cho nhà phát triển Chrome là gì?Công cụ dành cho nhà phát triển Chrome còn được gọi là Công cụ dành cho nhà phát triển Chrome Chrome Dev Tools là bộ công cụ dành cho nhà phát triển web được cài đặt sẵn trong trình duyệt Chrome Hãy xem bài viết này để biết thêm về các công cụ dành cho nhà phát triển Chrome Dưới đây là một số ưu điểm của việc sử dụng Chrome Dev Tools
Cách truy cập Công cụ dành cho nhà phát triển Chrome trong trình duyệt của bạnBạn có thể truy cập Công cụ dành cho nhà phát triển Chrome theo ba cách khác nhau
Sau khi bạn nhấp vào các phím tắt, công cụ dành cho nhà phát triển sẽ mở ra Khi bạn nhấn Theo mặc định, Cách sử dụng Tổng quan về CSS trong Công cụ dành cho nhà phát triển ChromeCác bước bên dưới sẽ hướng dẫn bạn cách sử dụng tính năng tổng quan về CSS để lấy các thuộc tính CSS được sử dụng trên trang web Bước 1 - Mở công cụ Chrome DevChúng tôi đã đề cập đến các phương pháp khác nhau để truy cập các công cụ dành cho nhà phát triển Chrome. Bạn nên làm quen với chúng bây giờ Xin nhắc lại, bạn có thể mở các công cụ dành cho nhà phát triển Chrome bằng cách nhấn Bước 2 - Nhấp vào Công cụ khácNhấp vào ba dấu chấm dọc nằm ở phía trên bên phải của công cụ dành cho nhà phát triển Chrome Chọn "Công cụ khác" từ trình đơn thả xuống Bạn sẽ khám phá ra nhiều tùy chọn khi nhấp vào "Công cụ khác. " Từ các tùy chọn khác nhau, hãy chọn tính năng tổng quan về CSS Bước 3 - Nhấp vào Chụp tổng quanKhi bạn nhấp vào Tổng quan về CSS, bạn sẽ thấy danh sách các chức năng của nó Các chức năng như
Nhấp vào nút Chụp tổng quan Một menu có năm phần xuất hiện sau khi nhấp vào nút Chụp tổng quan Năm phần là
Chúng ta hãy lần lượt đi qua từng phần trong số năm phần để xem chúng hoạt động như thế nào Tổng quan về CSS Tóm tắtBản tóm tắt Tổng quan chứa danh sách các thành phần CSS được sử dụng để xây dựng trang web Tóm tắt Tổng quan hiển thị tóm tắt CSS trên trang web của bạn, chẳng hạn như
Ví dụ trên cho thấy các thành phần CSS khác nhau được sử dụng để xây dựng trang web Màu sắcBảng màu hiển thị tất cả các màu được sử dụng để tạo trang web. Nó có một bảng màu cho nền, văn bản, màu tô và đường viền. Nó cũng làm nổi bật các vấn đề văn bản có độ tương phản thấp trên trang web Hình ảnh trên cho bạn thấy các màu khác nhau được sử dụng để tạo trang web Vẻ đẹp của bảng Màu là mỗi màu có thể nhấp được. Nếu bạn bấm vào một màu cụ thể trong bảng Màu, một danh sách các thành phần sử dụng màu đó sẽ xuất hiện. Khi bạn nhấp vào từng phần tử, nó sẽ đưa bạn đến bảng điều khiển phần tử để kiểm tra Tôi đã nhấp vào màu Bạn cũng có thể di chuột qua một phần tử trong danh sách các phần tử được hiển thị. Khi bạn di chuyển con trỏ qua phần tử, nó sẽ tô sáng phần tử đó trên trang web Khi tôi di chuột qua phần tử Chỉ cần một lưu ý nhanh chóng. di chuột đề cập đến việc di chuyển con trỏ của bạn qua bất kỳ thứ gì. Nó có nghĩa là đặt con trỏ lên văn bản, hình ảnh hoặc các đối tượng khác trên màn hình mà không cần nhấp vào chúng Thông tin phông chữBảng thông tin phông chữ hiển thị các kiểu chữ được sử dụng trong quá trình phát triển trang web. Nó hiển thị cho bạn Hình ảnh trên cho bạn thấy các kiểu chữ khác nhau được sử dụng để tạo trang web Tuyên bố không sử dụngBạn có thể tìm các kiểu CSS không ảnh hưởng đến trang web bằng cách sử dụng các khai báo không sử dụng Hình ảnh trên là số lượng khai báo chưa sử dụng trên trang web. Căn dọc được áp dụng cho phần tử không nằm trong dòng hoặc ô của bảng sẽ không ảnh hưởng đến trang Bạn cũng có thể nhấp vào các lần xuất hiện để xem danh sách các yếu tố bị ảnh hưởng, chẳng hạn như thông tin về phông chữ và bảng màu Truy vấn phương tiện truyền thôngBảng truy vấn phương tiện hiển thị danh sách tất cả các truy vấn phương tiện được sử dụng để tạo trang web. Bạn sẽ có thể kiểm tra các độ rộng và độ phân giải màn hình khác nhau được sử dụng để tạo trang web Ví dụ trên hiển thị số lượng truy vấn phương tiện được sử dụng để tạo trang web. Nó liệt kê các độ phân giải màn hình được sử dụng theo thứ tự xuất hiện, từ cao nhất đến thấp nhất. Nếu bạn nhấp vào các lần xuất hiện, bạn sẽ thấy danh sách các phần tử bị ảnh hưởng Phần kết luậnKhi nói đến việc đánh giá các thuộc tính CSS trên một trang web, công cụ tổng quan về CSS rất hữu ích. Nó cho phép các nhà phát triển và nhà thiết kế front-end kiểm tra các thuộc tính CSS trên một trang web Cảm ơn bạn đã đọc 💙. Nếu bạn muốn trò chuyện hoặc có bất kỳ câu hỏi nào, xin vui lòng liên hệ với tôi bất cứ lúc nào trên Twitter. @cessss_ và LinkedIn. Sự thành công Ngoài ra, hãy theo dõi blog của tôi để đọc một số nội dung khác của tôi @cesscode Mã hóa vui vẻ. 💙 QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Nhà phát triển web và nhà văn kỹ thuật Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu |
