1. Các khái niệm cơ bản về CSS trong web scraping
Để thực hiện web scraping thành công, việc hiểu cấu trúc HTML và các class CSS trên trang là một yếu tố
quan trọng.
Hiểu cách các phần tử của trang được định kiểu và cấu trúc bằng CSS sẽ giúp bạn chọn chính xác dữ liệu cần thiết
và
trích xuất chúng. Hãy xem xét cách kết nối CSS với HTML, sử dụng các bộ chọn, cũng như các thuộc tính
style, class, id và name hỗ trợ công việc với cấu trúc
trang web trong scraping.
CSS chịu trách nhiệm định kiểu cho các trang web, nhưng đối với mục đích web scraping, ta có thể coi CSS như một công cụ để hiểu cấu trúc và chọn các phần tử. Dưới đây là những khái niệm quan trọng về CSS đối với scraping:
- Bộ chọn (Selector) — Đây là các quy tắc chỉ định các phần tử HTML cụ thể. Việc sử dụng chúng giúp bạn nhận diện chính xác dữ liệu cần thiết.
-
Các thuộc tính
class,id, vàname— Đây là các định danh duy nhất giúp phân biệt các phần tử. Chúng đặc biệt hữu ích trong scraping vì giúp cô lập các phần tử cần thiết, qua đó việc trích xuất dữ liệu trở nên dễ dàng hơn.
2. Kết nối CSS với tài liệu HTML
CSS có thể được kết nối với HTML theo nhiều cách khác nhau. Việc hiểu các cách này rất quan trọng để điều hướng qua các phần tử và xác định kiểu và class của chúng, giúp bạn cô lập dữ liệu mục tiêu.
Tệp ngoài
CSS thường được kết nối dưới dạng tệp bên ngoài, có thể thấy trong tài liệu HTML thông qua thẻ
<link>
trong phần <head>. Các tệp CSS bên ngoài này xác định kiểu dáng cho toàn bộ trang, bao gồm
các định danh
và class, giúp điều hướng trong scraping dễ dàng hơn.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Kiểu nội bộ
Đôi khi kiểu dáng có thể được định nghĩa bên trong trang bằng thẻ <style>. Các kiểu nội bộ
này có thể được
tìm thấy trong phần <head> của trang và được sử dụng như một gợi ý để hiểu các class và
định danh,
theo đó bạn có thể chọn các phần tử cần thiết.
<head>
<style>
.price {
color: red;
}
</style>
</head>
Kiểu nội tuyến (thuộc tính style)
Kiểu nội tuyến nằm trực tiếp bên trong các thẻ HTML và chỉ ảnh hưởng tới phần tử cụ thể. Thuộc tính
style cũng thường chứa các đặc tính duy nhất, có thể hữu ích để xác định dữ liệu mục tiêu.
<p style="color: red; font-size: 18px;">Văn bản có kiểu nội tuyến</p>
<p style="color: red; font-size: 18px;">Văn bản có kiểu nội tuyến</p>
3. Bộ chọn trong CSS
Bộ chọn trong CSS được sử dụng để áp dụng kiểu dáng cho phần tử, tuy nhiên với web scraping, ứng dụng chính của chúng là chọn chính xác các phần tử chứa dữ liệu cần thiết. Dưới đây là các loại bộ chọn chính có thể sử dụng trong scraping.
Các loại bộ chọn chính
Bộ chọn thẻ: Bộ chọn này chọn tất cả các phần tử của một thẻ cụ thể (ví dụ: <p> hoặc
<div>). Trong web scraping, bộ chọn thẻ đặc biệt hữu ích nếu cần trích xuất thông tin từ các
thẻ chứa văn bản, hình ảnh và thông tin khác.
p {
color: blue;
}
Bộ chọn class: Bộ chọn này chọn các phần tử có giá trị thuộc tính class cụ thể. Class được
biểu thị bằng dấu chấm (.) trước tên. Trong web scraping, class rất hữu ích để xác định các phần
tử có cùng kiểu, ví dụ như danh sách sản phẩm.
.price {
color: red;
}
.price {
color: red;
}
<p class="price">Giá: $99</p>
Bộ chọn định danh (ID): Bộ chọn này chọn phần tử có thuộc tính id duy nhất, biểu thị bằng
ký hiệu #. Trong web scraping, id đặc biệt hữu ích để chọn những phần tử duy nhất, ví dụ:
tiêu đề hoặc nút trên trang.
#product-title {
font-size: 24px;
}
#product-title {
font-size: 24px;
}
<h1 id="product-title">Tên sản phẩm</h1>
GO TO FULL VERSION