HTML, CSS và JavaScript được gửi đến máy tính của bạn khi bạn yêu cầu chúng trên giao thức HTTP [ví dụ: khi bạn nhập url trên trình duyệt của mình], do đó, bạn có những phần này và có thể sao chép trên máy tính hoặc máy chủ của riêng mình. Nhưng nếu trang web có mã phía máy chủ [cơ sở dữ liệu, một số loại xác thực, v.v.], bạn sẽ không có quyền truy cập vào mã đó và do đó, sẽ không thể sao chép trên máy tính/máy chủ của riêng bạn
Trình duyệt tải xuống và giải thích nhiều tệp để hiển thị đúng trang web. Các tệp này thường chứa các phần tử HTML để cấu trúc trang web và mã CSS để hiển thị trực quan bên trong trình duyệt. Trong hầu hết các trường hợp, các kiểu cùng với các đoạn mã khác được nhúng bên trong các trang HTML và được kết hợp với các phần tử khác
Vì mã CSS có thể được triển khai trong các trang web ở nhiều định dạng khác nhau nên việc trích xuất các kiểu trang web có xu hướng trở thành một nhiệm vụ khó khăn. Kiểm tra Nguồn trang và sử dụng Công cụ dành cho nhà phát triển thường hữu ích để xem và trích xuất kiểu CSS cho trang web
Chúng tôi đã phát triển một hướng dẫn thực tế với các hướng dẫn từng bước để xem kiểu CSS cho toàn bộ trang web, một trang web cụ thể và một thành phần bên trong trang
Trước tiên, chúng tôi trình bày tổng quan ngắn gọn về CSS và cách sử dụng CSS trong HTML. Điều này khá quan trọng để hiểu đầu ra của từng phương pháp .
trong bài viết này
1. CSS là gì?
Để hiển thị chính xác bất kỳ trang web nào, các trình duyệt sẽ nhận nhiều tài liệu từ máy chủ web và diễn giải chúng. Mỗi tài liệu chứa các đoạn mã tác động đến các khía cạnh cụ thể của trang web
Vì mã này chạy trên trình duyệt của người dùng nên nó được gọi là mã phía máy khách [hoặc giao diện người dùng]. Nó bao gồm những gì người dùng nhìn thấy và tương tác, chẳng hạn như văn bản, hình ảnh, danh sách, tiêu đề, liên kết, menu, v.v.
Về cơ bản, có ba kỹ thuật/ngôn ngữ phía máy khách chính
- HTML. xác định cấu trúc của trang web, thứ bậc của các thành phần và nội dung của chúng
- JavaScript. xác định cách các phần tử HTML thay đổi để đáp ứng với các tương tác hoặc sự kiện cụ thể
- CSS. xác định cách các phần tử HTML được định vị và hiển thị trực quan
Theo đó, CSS [Cascading Style Sheets] là một kỹ thuật phía máy khách thể hiện bố cục và giao diện trực quan của trang web. Nó chỉ định cách các phần tử được định vị cạnh nhau và văn bản, màu nền và phông chữ của chúng trông như thế nào khi được người dùng truy cập
Điều đó nói rằng, không có kiểu, trình duyệt sẽ hiển thị các thành phần trang thô cạnh nhau mà không có bất kỳ kiểu hoặc bố cục nào
Thông thường, mã CSS bao gồm nhiều quy tắc, mỗi quy tắc chứa hai phần tử
- Bộ chọn. chỉ định [các] phần tử HTML bị ảnh hưởng bởi kiểu
- Tính chất. kiểu được áp dụng cho/các phần tử đã chọn
2. Ví dụ về mã CSS
Chúng tôi trình bày một ví dụ về quy tắc CSS và cách quy tắc này ảnh hưởng đến một phần tử HTML cụ thể như trong ảnh chụp nhanh bên dưới
Trong ví dụ này, chúng tôi thay đổi background color
và font weight
của bất kỳ phần tử HTML nào có thuộc tính class
bằng selected
. Cung cấp phần tử này là phần tử con của phần tử ul
, phần tử này lại là phần tử con của một phần tử HTML khác có thuộc tính id
bằng với categories
, với phần tử cuối cùng này là phần tử con của phần tử cha mẹ div
Tất cả các phần tử khác không tuân theo hệ thống phân cấp này sẽ không được nhắm mục tiêu theo quy tắc này và sẽ không triển khai kiểu.
Để biết thêm chi tiết về cách hoạt động của bộ chọn, chúng tôi khuyên bạn nên tham khảo hướng dẫn này của W3Schools
3. Ba cách để sử dụng mã CSS
Để xem và hiểu kiểu trang web, trước tiên chúng ta cần biết các phương pháp khác nhau về cách trang web có thể triển khai các quy tắc CSS
Các quy tắc CSS có thể được chèn vào các trang web theo ba cách khác nhau
3. 1. CSS bên ngoài
Với phong cách bên ngoài, các quy tắc được viết trong một tài liệu riêng [tệp biểu định kiểu bên ngoài] với phần mở rộng .css
. Sau đó, một link
cho tài liệu này được chèn vào bên trong phần font weight
0 của trang web HTML
Tệp .css
này thường được tải như một phần của tệp trang và được giải thích trong trình duyệt khi người dùng truy cập trang web
Quy tắc CSS được viết trong tệp bên ngoài ảnh hưởng đến tất cả các trang web bao gồm liên kết tới tệp này. Do đó, phong cách bên ngoài thường được sử dụng để thay đổi giao diện trực quan của toàn bộ trang web.
3. 2. CSS nội bộ
Với kiểu nội bộ, các quy tắc được chèn trực tiếp vào phần font weight
0 [hoặc đôi khi là font weight
3] của trang web, bên trong thẻ font weight
4
Trong trường hợp này, quy tắc chỉ ảnh hưởng đến phần tử HTML bên trong trang web lưu trữ . Vì lý do này, nó được sử dụng để xác định giao diện trực quan của một trang web cụ thể có kiểu dáng độc đáo.
3. 3. CSS nội tuyến
Trong các kiểu nội tuyến, các thuộc tính được đưa trực tiếp vào một phần tử HTML riêng lẻ trong thuộc tính kiểu của nó. Ở đây, phong cách chỉ tác động đến yếu tố này. Do đó, nó được sử dụng để áp dụng một kiểu duy nhất cho một phần tử
Ở đây, không cần bộ chọn vì các thuộc tính đã được thêm vào phần tử HTML cụ thể .
Cuối cùng, điều quan trọng cần đề cập là ba kiểu có sẵn có thể được triển khai đồng thời trên bất kỳ trang web nào. Nhưng chúng xếp tầng chống lại nhau dựa trên mức độ ưu tiên giảm dần. CSS nội tuyến [ưu tiên cao nhất] -> CSS nội bộ -> CSS bên ngoài
4. Cách xem CSS của trang web
Vì mã CSS là một phần của kỹ thuật phía máy khách nên nó được tải xuống trình duyệt và có thể được kiểm tra theo nhiều cách
4. 1. Xem Kiểu CSS trong Nguồn Trang
Nguồn trang chứa mã HTML, CSS và JavaScript thô của trang web, nó cũng bao gồm các tham chiếu đến các nguồn bên ngoài khác được sử dụng để hiển thị trang
Đối với người dùng không có kỹ thuật, việc kiểm tra nguồn trang có xu hướng khá áp đảo. Tuy nhiên, khách truy cập bình thường vẫn có thể xác định mã kiểu dáng trong nguồn trang khi biết
Cách xem mã CSS trong nguồn trang
- mở trang web
- Nhấp chuột phải vào bất kỳ vùng trống nào bên trong trang web
- Chọn
font weight
5,font weight
6 hoặc các tùy chọn tương tự khác. Nếu không tìm thấy, bấm vào khu vực khác - Nguồn trang HTML sẽ mở ra, hãy cố gắng xác định các phần
font weight
7 vàfont weight
8 - Xem các tệp CSS bên ngoài. nhìn vào bên trong phần
font weight
7 để biết phần tửclass
0 [hoặc nhấnclass
1 để mở hộp tìm kiếm, sau đó nhậpclass
2]. Sao chép liên kết bên trongclass
3 hoặc mở nó để xem biểu định kiểu CSS bên ngoài trong tab mới.
—————————————————————————————— - Xem quy tắc CSS nội bộ. tìm bên trong mã nguồn để tìm thẻ
class
4 [hoặc nhấnclass
1 để mở hộp tìm kiếm, sau đó nhậpfont weight
4]. Các quy tắc CSS nội bộ nằm bên trong các thẻ này.
—————————————————————————————— - Xem mã CSS nội tuyến. xem bên trong phần
font weight
8 để biết bất kỳ phần tử HTML nào có thuộc tínhclass
8 [hoặc nhấnclass
1 để mở hộp tìm kiếm, sau đó nhậpselected
0]. Giá trị của thuộc tính này đại diện cho CSS nội tuyến cho phần tử.
——————————————————————————————
Nếu mã nguồn của trang có vẻ không đọc được, nó có thể được thu nhỏ để tiết kiệm một số kích thước. Để xem và đọc rõ, nhấn selected
1 để chọn tất cả và nhấn selected
2 để sao chép. Sau đó, dán nó vào bất kỳ trình định dạng HTML trực tuyến nào như Trình định dạng HTML này
Ngoài ra, nếu bất kỳ mã CSS nào được thu nhỏ, chúng tôi có thể sao chép mã đó vào CSS Beautifier này để có thể dễ dàng xem mã đó
4. 2. Xem Kiểu CSS bằng Kiểm tra phần tử [Công cụ dành cho nhà phát triển]
Hầu hết các trình duyệt đều có công cụ tích hợp dành cho nhà phát triển và bất kỳ ai muốn kiểm tra hiệu suất và chức năng của trang web. Thông thường, chúng ta có thể sử dụng công cụ này để xem mã CSS của trang web
Cách xem mã CSS bằng Công cụ dành cho nhà phát triển
- mở trang web
- Nhấp chuột phải vào bất kỳ đâu bên trong trang web
- Chọn
selected
3,selected
4 hoặc các tùy chọn tương tự khác. Nếu không tìm thấy, bấm vào khu vực khác - _
selected
5 sẽ mở. Nếu cách này không hiệu quả, hãy tìm cách mở công cụ dành cho nhà phát triển trong trình duyệt của bạn. Công cụ này có nhiều tab, đảm bảo rằng tab đầu tiênselected
6 [hoặcselected
7] hiện đang hoạt động - Tab này có hai bảng, hãy nhìn vào bên trong bảng bên trái nơi mã HTML của trang được liệt kê
- Cố gắng xác định vị trí các phần
font weight
7 vàfont weight
8. Nhấp vào mũi tên nhỏ bên cạnh mỗi cái để gấp/mở nó cho không gian gọn gàng hơn - Xem các tệp CSS bên ngoài. mở phần
font weight
7 và tìm phần tửclass
0 bên trong phần đó [hoặc nhấnclass
1 để mở hộp tìm kiếm bên trong công cụ dành cho nhà phát triển , sau đó nhậpclass
2]. Sao chép liên kết bên trongclass
3 hoặc mở nó để xem biểu định kiểu CSS bên ngoài trong tab mới.
—————————————————————————————— - Xem quy tắc CSS nội bộ. mở các phần của
font weight
7 [vàfont weight
8] và xem bên trong chúng để tìm phần tửclass
4 [hoặc nhấnclass
1 để mở hộp tìm kiếm bên trong công cụ dành cho nhà phát triển , sau đó nhậpfont weight
4]. Mở thẻ này ra và bạn sẽ thấy các quy tắc CSS nội bộ.
—————————————————————————————— - Xem mã CSS nội tuyến. mở phần
font weight
8 và tìm bất kỳ thành phần HTML nào có thuộc tínhclass
8 bên trong phần đó [hoặc nhấnclass
1 để mở hộp tìm kiếm bên trong công cụ dành cho nhà phát triển , sau đó nhậpclass
8 . Giá trị của thuộc tính này đại diện cho CSS nội tuyến cho phần tử.
——————————————————————————————
Khi mở biểu định kiểu CSS bên ngoài hoặc duyệt biểu định kiểu bên trong và nếu nó bị thu nhỏ hoặc không thể đọc được, hãy sao chép mã CSS vào CSS Beautifier này để có thể dễ dàng xem được
4. 3. Tìm tệp CSS bên ngoài trong Kiểm tra phần tử
Sử dụng công cụ dành cho nhà phát triển, chúng tôi cũng có thể tìm thấy trình duyệt yêu cầu và tải xuống để hiển thị trang web
Cách tìm tệp CSS bên ngoài trong phần tử kiểm tra
- mở trang web
- Nhấp chuột phải vào bất kỳ đâu bên trong trang web
- Chọn
selected
3,selected
4 hoặc các tùy chọn tương tự khác. Nếu không tìm thấy, bấm vào khu vực khác - _
selected
5 sẽ mở. Nếu cách này không hiệu quả, hãy tìm cách mở công cụ dành cho nhà phát triển trong trình duyệt của bạn - Chọn tab
id
7 - Chọn
id
8 từ danh sách bộ lọc trong thanh bộ lọc [như trong ảnh chụp màn hình] - Tải lại trang web [nhấn
id
9] để buộc tải tất cả các tài nguyên bên ngoài - Điều này sẽ tải một danh sách các yêu cầu tới các tệp CSS bên ngoài. Nhấp đúp vào bất kỳ liên kết nào để mở nó trong một tab mới và xem các quy tắc CSS bên trong
- Nếu nội dung CSS không thể đọc được, hãy sao chép nội dung đó vào Công cụ làm đẹp CSS để có thể dễ dàng xem nội dung đó
4. 4. Nhận tất cả kiểu CSS cho một phần tử
Giống như trên một trang web, mọi phần tử HTML đơn lẻ có thể có các quy tắc CSS được triển khai nội tuyến, bên trong và bên ngoài cùng một lúc
Do đó, kiểm tra [thủ công] tất cả các quy tắc CSS của phần tử là một nhiệm vụ cực kỳ khó khăn, đặc biệt khi có các quy tắc được bao gồm trong biểu định kiểu bên ngoài, đây là tình huống mặc định trong hầu hết các trang web
Để có được tất cả các kiểu CSS cho một phần tử, các trình duyệt cung cấp một bảng điều khiển bên trong công cụ dành cho nhà phát triển nơi chúng tôi có thể xem trước tất cả các quy tắc CSS cho bất kỳ phần tử HTML nào bất kể chúng được triển khai như thế nào và ở đâu
Cách lấy tất cả CSS cho một phần tử HTML
- mở trang web
- Nhấp chuột phải vào thành phần bạn cần lấy CSS của nó .
- Chọn
selected
3,selected
4 hoặc các tùy chọn tương tự khác - _
selected
5 sẽ mở. Nếu cách này không hiệu quả, hãy tìm cách mở công cụ dành cho nhà phát triển trong trình duyệt của bạn. Công cụ này có nhiều tab, đảm bảo rằng tab đầu tiênselected
6 [hoặcselected
7] hiện đang hoạt động - Phần tử phải được chọn theo mặc định bên trong bảng điều khiển bên trái nơi mã HTML được liệt kê. Nếu không, hãy thử xác định vị trí và chọn nó bên trong bảng điều khiển này
- Tất cả các kiểu CSS của phần tử sẽ được hiển thị trong bảng bên phải, bên trong tab ________ 65
- Để xem các quy tắc CSS cho một thành phần HTML khác, hãy thử tìm và chọn nó bên trong bảng điều khiển bên trái
Cách chỉnh sửa kiểu CSS của phần tử
Công cụ dành cho nhà phát triển không chỉ cho phép chúng tôi xem kiểu cơ bản của phần tử mà còn sửa đổi nó, xóa một số quy tắc và thêm quy tắc mới. Điều này đặc biệt hữu ích cho các nhà thiết kế và nhà phát triển trang web để kiểm tra tác động tức thì của việc thao túng các quy tắc CSS trên trang web được hiển thị.
Sửa đổi kiểu CSS của phần tử thường yêu cầu một số kiến thức kỹ thuật. Tuy nhiên, trong ảnh chụp nhanh này, chúng tôi giải thích một số phần và chức năng của công cụ kiểm tra CSS của phần tử
Tất nhiên, các sửa đổi diễn ra tạm thời trên trang web được hiển thị bên trong trình duyệt. Khi trang web được làm mới, tất cả các kiểu được khôi phục về phiên bản gốc của chúng khi nhận được từ máy chủ web
Vẫn còn một cách thân thiện với người dùng khác để xem kiểu CSS của một phần tử bằng cách sử dụng a , bạn có thể tìm thấy nó trong phần sau
4. 5. Trình xem mã CSS của trang web
Bên cạnh công cụ dành cho nhà phát triển được tích hợp sẵn, còn có một số trình xem mã CSS hữu ích dưới dạng công cụ của bên thứ ba hoặc tiện ích mở rộng trình duyệt. Những công cụ này giúp chúng tôi kiểm tra mã kiểu dáng của các thành phần HTML ngay bên trong trang web.
Trình xem CSS [Tiện ích mở rộng của Chrome]
CSS Viewer là một addon trình duyệt rất hiệu quả để hiển thị các thuộc tính CSS của bất kỳ thành phần HTML nào trên trang web đã truy cập. Khi bạn di chuột qua phần tử, một cửa sổ bật lên sẽ xuất hiện để cho biết loại phần tử và tất cả các lớp cũng như thuộc tính CSS của phần tử đó một cách rõ ràng và thân thiện với người dùng
CSS Peeper [Tiện ích mở rộng của Chrome]
CSS Peeper là một addon hữu ích để dễ dàng kiểm tra các kiểu phần tử bên trong trình duyệt. Khi bạn nhấp vào một phần tử HTML, tiện ích mở rộng sẽ hiển thị một cửa sổ nhỏ trong đó các lớp, kích thước và các kiểu CSS khác của phần tử được liệt kê theo cách dễ hiểu
CSS đã sử dụng [Tiện ích mở rộng của Chrome]
CSS Đã sử dụng là một tiện ích mở rộng khác của Chrome để nhận tất cả các quy tắc CSS cho một phần tử HTML đã chọn và phần tử con của nó ở định dạng thô . Nó thêm một bảng điều khiển mới vào công cụ dành cho nhà phát triển trình duyệt nơi các quy tắc CSS từ mỗi nguồn được liệt kê. Rõ ràng, công cụ này ít thân thiện với người dùng hơn những công cụ đã đề cập trước đó.
Quét CSS [Trả phí]
CSS Scan là công cụ trả phí để kiểm tra, sao chép và chỉnh sửa các quy tắc CSS bên trong trình duyệt. Nó đi kèm như một gói tiện ích mở rộng trình duyệt bao gồm Chrome, Firefox và Safari. Trang web của công cụ cung cấp khả năng kiểm tra công cụ trực tuyến trên trang chủ của nó
5. Tải xuống CSS từ một trang web
Tất cả mã phía máy khách bao gồm các biểu định kiểu CSS cuối cùng được tải vào trình duyệt để hiển thị trang web. Các tệp này nằm trong trình duyệt trừ khi chúng tôi lưu chúng vào máy tính của mình
Vì có , cách tốt nhất để tải xuống tất cả mã CSS là lưu toàn bộ trang vào thiết bị của chúng tôi
Tuy nhiên, chúng tôi vẫn có thể tải xuống từng biểu định kiểu cụ thể và sao chép mã CSS trong khi xem chúng bằng cách thực hiện theo các phương pháp trên
Cách tải xuống các kiểu CSS từ một trang web
- mở trang web
- Nhấp chuột phải vào bất kỳ vùng trống nào bên trong trang web
- Chọn
categories
6,categories
7 hoặc các tùy chọn tương tự khác. Nếu không tìm thấy, bấm vào khu vực khác. Ngoài ra, bạn chỉ cần nhấncategories
8 để lưu trang - Một hộp thoại sẽ mở ra để nhập các tùy chọn lưu, chỉ định nơi lưu tệp trang web
- Mở danh sách thả xuống
categories
9 và chọn tùy chọn hoàn chỉnh.div
0.
—————————————————————————————— - Nhấp vào
div
1 - Tìm trang đã tải xuống trên thiết bị của bạn. Nên có tệp HTML chính và thư mục chứa các tệp đính kèm khác [thường có cùng tên].
- Các biểu định kiểu CSS bên ngoài đã tải xuống. điều hướng bên trong thư mục tệp đính kèm và sắp xếp tệp theo loại, bạn sẽ tìm thấy tất cả các tệp CSS đã tải xuống. Sử dụng bất kỳ trình soạn thảo văn bản nào để mở tệp được yêu cầu.
—————————————————————————————— - Đã tải xuống mã CSS nội bộ và nội tuyến. vì các loại kiểu này được nhúng trong trang web, chúng có thể được kiểm tra bên trong các tệp HTML đã tải xuống. Bạn có thể kiểm tra chúng trong tệp HTML chính hoặc bất kỳ tệp HTML nào khác bên trong thư mục tệp đính kèm [tệp này có thể chứa các phần cụ thể của trang web]. Sau đó, sử dụng bất kỳ trình soạn thảo văn bản nào để mở và đọc nội dung HTML
Nếu bất kỳ tệp HTML hoặc CSS nào đã tải xuống bị thu nhỏ hoặc không thể đọc được, hãy sao chép nội dung của chúng vào Trình định dạng HTML hoặc Trình làm đẹp CSS tương ứng để có thể dễ dàng xem chúng
Cuối cùng, bên cạnh việc xem các kiểu CSS, người dùng cũng có thể quan tâm đến việc kiểm tra cách tắt hoặc tắt kiểu CSS của trang web. Với mục đích này, chúng tôi đã phát triển một hướng dẫn đầy đủ về các kỹ thuật hữu ích để hủy kích hoạt các kiểu trang web
Cách Tắt Kiểu CSS Trang Web [Chrome, Firefox, Edge,…]
Bài viết này mô tả một số kỹ thuật hữu ích để hủy kích hoạt các kiểu trang web để thử nghiệm và các mục đích khác
đọc bài viết
6. Phần kết luận
CSS là một kỹ thuật quan trọng để phát triển web, các nhà phát triển và người dùng hệ thống quản lý nội dung như WordPress đôi khi cần xem mã CSS của trang web họ đang truy cập. Chủ yếu là để biết cách một phần tử cụ thể được thiết kế hoặc sao chép kiểu dáng của phần tử đó và sử dụng lại phần tử đó trên trang web của họ
Có nhiều cách để triển khai CSS và do đó để xem cách triển khai CSS. Trong bài viết này, chúng tôi đã cung cấp hướng dẫn từng bước về các phương pháp có sẵn để xem và kiểm tra mã CSS của trang web