Hướng dẫn how do i open a css website? - làm cách nào để mở một trang web css?

Học tập là niềm vui và tìm hiểu về một trang web bạn thích trên internet sẽ thêm niềm vui. Bạn đã bao giờ choáng váng với một yếu tố trên một trang web và quan tâm đến việc tìm hiểu làm thế nào nó được tạo ra? Bạn không cần phải tìm kiếm những cuốn sách HTML hoặc CSS của bạn cho điều đó !!! Các trình duyệt hiện đại như Chrome cung cấp các công cụ rất dễ dàng và tiềm năng để phân tích một trang web. Đây là một kỹ năng thực tế rất cần thiết để phân tích giải phẫu của một trang web.

Mặc dù mục tiêu chính của các công cụ này là khắc phục sự cố của riêng bạn, nhưng thiết kế nó cũng có thể được sử dụng để hiểu cách các chuyên gia đang thiết kế nội dung của họ để bạn có thể tìm hiểu các khái niệm. Trong bài viết này, chúng ta hãy thảo luận & nbsp; từng bước minh họa về việc xem mã nguồn HTML của trang web bằng trình duyệt web Google Chrome.

Chúng tôi đề cập các chủ đề sau trong bài viết này:

1. Các thành phần khác nhau của trang web
2. Xem mã nguồn HTML, nội tuyến và CSS nội bộ
3. Xem bảng hiệu kiểu bên ngoài trên trang web
4. Phím tắt Chrome để xem nguồn trang
5. Sử dụng các công cụ phát triển
6. Nhận CSS di động
7. Tìm chế độ xem in đẹp của CSS và JavaScript Minified
8. Chỉnh sửa trang web trực tuyến

Hãy để chúng tôi thảo luận chi tiết về từng chủ đề trong các phần sau.

1. Các thành phần của trang web

A & NBSP; Trang web bao gồm các phần sau đây nói chung:

• Nội dung trang - văn bản, hình ảnh, video, vv được đánh dấu bằng & nbsp; html.
• Căn chỉnh và giao diện trực quan - thường được kiểm soát với CSS.
• Tập lệnh - kích hoạt hành động ở phía máy khách hoặc máy chủ.

CSS có thể được sử dụng theo ba cách khác nhau trên trang web:

• Phong cách nội tuyến - ảnh hưởng đến giao diện trực quan của một yếu tố riêng lẻ.
• Nội bộ & nbsp; kiểu - ảnh hưởng đến tất cả các yếu tố trên một trang.
• Kiểu dáng bên ngoài - ảnh hưởng đến tất cả các yếu tố trên một trang web.

Bạn có thể tìm hiểu cách thứ tự của CSS Styles & NBSP; sẽ ảnh hưởng đến giao diện của một trang web. Các tập lệnh cũng có thể được sử dụng theo các cách khác nhau tương tự như CSS. & NBSP; Mã nguồn trang web chứa tất cả các thành phần này và bạn có thể xem chúng theo các cách khác nhau.

2. Xem các kiểu HTML, Inline và Internal & NBSP; CSS

Để xem nội dung HTML, nội tuyến và kiểu nội bộ của trang web, hãy mở trang web trong trình duyệt Chrome. Nhấp chuột phải vào bất kỳ vị trí nào trên trang và chọn tùy chọn Nguồn xem trang Xem trang như trong hình bên dưới:

Xem nguồn trang trong Google Chrome

Lưu ý: Nếu bạn nhấp chuột phải vào bên trong IFRAME, các trình duyệt sẽ hiển thị tùy chọn Nguồn khung hình khung hình thay vì nguồn xem trang xem trang. If you right click inside an iframe, browsers will show “View Frame Source” option instead of “View Page Source“.

Điều này sẽ mở một cửa sổ mới sẽ hiển thị nội dung và kiểu HTML được đánh dấu của từng yếu tố được sử dụng trên trang web đó. Một số trang web sẽ hiển thị cho bạn chế độ xem nguồn khá rõ ràng nhưng hầu hết các trang web gần đây sẽ hiển thị mã nguồn mà không bị hỏng dòng và không gian. Đây là phiên bản được thu nhỏ và nén của mã nguồn, ngày nay hầu như tất cả các trang web đều sử dụng định dạng này để giảm kích thước và cải thiện tốc độ tải trang.

Như bạn có thể thấy trong ảnh chụp màn hình dưới đây, Chrome hiển thị tất cả các mã nguồn trong một dòng mà không bị phá vỡ và không gian.

Mã nguồn được xem xét trong chrome

3. Xem bảng hiệu kiểu bên ngoài

Cách sử dụng CSS phổ biến và được khuyến nghị nhất là liên kết các kiểu dáng bên ngoài với nội dung HTML. Để tìm ra các bảng kiểu bên ngoài được sử dụng trên trang web, hãy tìm các thẻ liên kết trên mạng trên mã nguồn. Nhấp vào các liên kết kết thúc bằng cách.

Liên kết biểu định kiểu trong một nguồn trang

Một trang web có thể sử dụng một bảng kiểu bên ngoài ở định dạng khác nhau. Hầu hết các lần các tệp CSS sẽ kết thúc với số phiên bản hoặc văn bản bổ sung như .css? Ver1.3. Đôi khi, phiên bản thu nhỏ của tệp CSS kết thúc như là .min.css, cũng có thể được sử dụng để tải trang nhanh.

Mặc dù các liên kết đang hiển thị là tương đối trên mã nguồn, nhấp vào nó sẽ mở bảng kiểu nguồn với URL tuyệt đối (URL hoàn chỉnh với tên miền).

4. Phím tắt Chrome để xem mã nguồn trang

Bạn có thể xem bất kỳ mã nguồn nào trực tiếp từ thanh địa chỉ Chrome Trình duyệt Chrome bằng cách thêm tiền tố trực tiếp xem nguồn: vào bất kỳ URL trang nào. Bằng cách này, bạn thậm chí có thể xem mã nguồn của các trang được bảo vệ bên phải.

view-source:webpage URL

URL đã nhập sẽ được chuyển hướng tự động để tìm nạp nội dung, nếu trang có chuyển hướng 301 thích hợp. Ví dụ: nhập vào View View-Source: yoursite.com, có thể được tự động chuyển hướng đến View View-Source: https: //www.yoursite.com.

5. Xem mã nguồn với các công cụ phát triển

Phương thức được giải thích ở trên sẽ cung cấp mã HTML / CSS nguồn mà không liên kết với một phần tử riêng lẻ có trên trang web. Đó là một nhiệm vụ khó khăn để tìm ra các kiểu được sử dụng cho bất kỳ yếu tố cụ thể nào với chế độ xem mã CSS nguồn.

Tương tự như các trình duyệt khác, Google Chrome cung cấp các công cụ phát triển để truy cập mã CSS được liên kết với bất kỳ yếu tố cụ thể nào trên trang web. Nhấp chuột phải vào bất kỳ yếu tố nào trên trang web và chọn tùy chọn Kiểm tra phần tử hoặc kiểm tra trực tuyến để mở bảng điều khiển nhà phát triển ở dưới cùng của trang web như trong hình dưới đây. Bạn cũng có thể mở bảng điều khiển nhà phát triển từ đường dẫn menu Cài đặt> Công cụ khác> Công cụ phát triển.

Các công cụ phát triển trong Google Chrome để xem nguồn trang

1. Nhấp chuột phải vào một phần tử và chọn tùy chọn Kiểm tra trên mạng.
2. Xem các kiểu HTML và nội tuyến trong tab Phần tử.
3. Xem các kiểu bên ngoài trong phần Kiểu của Kiểu.
4. Nhấp vào biểu tượng của Mobile Mobile để xem trang web trên thiết bị di động và kiểm tra HTML / CSS nguồn tương ứng cho nội dung di động.

Bảng điều khiển được chia thành hai phần với các tab khác nhau có sẵn trong mỗi phần. Phần bên trái hiển thị nội dung HTML của một trang trong tab phần tử của các phần tử và phần bên phải hiển thị CSS trong tab Kiểu kiểu. Nhấp vào bất kỳ liên kết CSS nào sẽ mở bảng kiểu trong phần bên trái trong tab Nguồn.

Để xem mã CSS của bất kỳ phần tử cụ thể nào, hãy chọn hộp Mũi tên trên góc trên cùng bên trái (tìm ống kính ở phía dưới trên nền tảng Windows) của bảng điều khiển và nhấp vào bất kỳ phần tử nào sẽ được tô sáng trên di chuột. Điều này sẽ tự động hiển thị mã CSS được liên kết với & nbsp; phần tử được chọn.

6. Xem CSS di động

Vì các kiểu cho một phần tử trên máy tính để bàn và thiết bị di động có thể thay đổi, bảng điều khiển nhà phát triển cung cấp một tùy chọn để chuyển đổi màn hình sang hầu hết các thiết bị phổ biến như iPhone, iPad, Samsung Galaxy và Google Nexus. Khi thiết bị cần thiết được chọn từ thả xuống, các mã CSS tương ứng có sẵn trên trang đó cho thiết bị đó được hiển thị.

Xem CSS di động trong Chrome

1. Nhấp vào nút thanh công cụ chuyển đổi thiết bị.
2. Chọn thiết bị từ danh sách thả xuống hoặc nhấp vào tùy chọn Chỉnh sửa Chỉnh sửa để thêm thiết bị của riêng bạn không có trong danh sách mặc định. Bạn có thể kiểm tra kích thước thiết bị của thiết bị đã chọn.
3. Tăng hoặc giảm tỷ lệ phần trăm để điều chỉnh màn hình trình duyệt.
4. Nhấp vào nút Xoay Xoay để chuyển đổi giữa chế độ xem chân dung và cảnh quan.
5. Kiểm tra bản xem trước của lựa chọn của bạn. Nhấp chuột phải vào phần tử bạn muốn xem nguồn di động và nhấp vào tùy chọn Kiểm tra trên mạng.
6. Thay đổi phần tử để xem nguồn. Di chuột qua mã HTML & nbsp; sẽ làm nổi bật phần tử tương ứng trên ngăn trình duyệt xem trước.
7. Tìm mã CSS nguồn của phần tử đã chọn & NBSP; CSS di động nên bắt đầu với quy tắc của @Media. Nếu không có quy tắc của @Media, thì CSS chung cũng sẽ được áp dụng trên các thiết bị di động.

7. Chế độ xem in đẹp của & NBSP; Các tệp CSS và JavaScript được thu nhỏ

Ngày nay, nó phổ biến để sử dụng các phiên bản Minified của các tệp CSS và JavaScript trên các trang web. Điều này sẽ loại bỏ các nhận xét, không gian, ngắt dòng không cần thiết và làm cho tệp là .min.css hoặc .min.js. Ngoài ra, cơ chế bộ nhớ đệm được sử dụng trên trang web không loại bỏ không gian tương tự. Mặc dù tất cả những điều này được thực hiện để cải thiện tốc độ trang, điều này làm cho CSS và tập lệnh không thể đọc được cho những người tìm kiếm nguồn trang. Chrome giải quyết vấn đề này bằng cách cung cấp nút in Pretty Pretty in. Nhấp vào nút in Pretty Pretty in sẽ khôi phục các tệp được thu nhỏ thành phiên bản có thể đọc được để bạn có thể dễ dàng đi qua nó.

Dưới đây là một ví dụ về cách tập lệnh nhỏ trông giống như bảng điều khiển nhà phát triển. Xem bảng kiểu hoặc tập lệnh được liên kết trong tab Nguồn. Nhấp vào khung vòng đeo tay đôi {}.

Bật tùy chọn định dạng in đẹp trong chrome

Bạn sẽ thấy chế độ xem in đẹp của tập lệnh như dưới đây:

Xem chế độ xem in đẹp của CSS và tập lệnh

Lưu ý: Một số trang web Ngăn chặn nhấp chuột phải để tránh bản sao nội dung, trong trường hợp đó, bạn có thể truy cập nguồn trang bằng tùy chọn menu Bảng điều khiển nhà phát triển trong Chrome. Some webpages prevent right clicking to avoid content copy, in that case you can access page source using developer console menu option in Chrome.

8. Sửa đổi nội dung trang web trực tuyến trực tuyến

Ưu điểm lớn nhất của bảng điều khiển nhà phát triển Chrome là phát trên trang trực tiếp và xem trước các thay đổi trực tiếp trên trình duyệt. Bạn có thể trực tiếp thay đổi hoặc thêm kiểu CSS trong bảng điều khiển nhà phát triển để xem hiệu ứng trên một trang trực tiếp. Ví dụ: bạn có thể thay đổi kích thước phông chữ của các phần tử của cơ thể và thấy sự thay đổi kích thước phông chữ được căn chỉnh một cách thích hợp. Đây là tùy chọn rất hữu ích & nbsp; và & nbsp; tiết kiệm nhiều thời gian mà không ảnh hưởng đến trải nghiệm người dùng thực sự nếu không bạn có thể cần thay đổi trên một trang web trực tiếp trên cơ sở lặp để tìm phong cách phù hợp.

Ngoài ra, trình chọn màu là một trong những nhà phát triển web yêu thích. Bạn có thể thay đổi màu sắc của các yếu tố trực tuyến và xem trước ngay lập tức. Bạn có thể sao chép mã màu RGB hoặc HEX và sử dụng trên thiết kế của bạn như một pro.

Sửa đổi màu sắc trực tiếp trên các trang web

Nhấp chuột phải vào phần tử HTML và chỉnh sửa trực tiếp bằng cách sử dụng Chỉnh sửa dưới dạng tùy chọn HTML, để thêm hoặc xóa nội dung trực tuyến.

Chỉnh sửa mã nguồn HTML trực tiếp trong Chrome

Tìm hiểu thêm về cách xem cấu trúc phản hồi HTTP trên bảng điều khiển nhà phát triển Chrome.

Từ cuối cùng

Chúng tôi hy vọng bài viết này đã giúp bạn hiểu cách xem mã nguồn trong Chrome. Hãy nhớ rằng, xem mã nguồn là hành động rất chung chung và bất kỳ người dùng nào cũng có thể làm điều này. Nhưng sử dụng bảng điều khiển nhà phát triển cần bạn đầu tư nhiều thời gian vào học tập. Ngoài ra Chrome cập nhật các tính năng trên mỗi phiên bản làm cho quá trình học tập liên tục. Nhưng điều này nên rất thú vị và thú vị để hiểu và khắc phục các khái niệm thiết kế web.