1. Các khái niệm cơ bản của CSS cho web scraping
Để web scraping thành công, hiểu cấu trúc HTML và các CSS class trên trang là yếu tố quan trọng. Hiểu cách các phần tử trang được định dạng và cấu trúc bằng CSS sẽ giúp bạn lựa chọn chính xác dữ liệu cần thiết và trích xuất chúng. Nào, hãy cùng tìm hiểu cách kết nối CSS với HTML, sử dụng các selector, cũng như các thuộc tính style, class, id và name giúp cho công việc với cấu trúc trang web để scraping.
CSS chịu trách nhiệm cho việc định dạng trang web, tuy nhiên, với mục đích web scraping, chúng ta có thể xem CSS như một công cụ để hiểu cấu trúc và lựa chọn phần tử. Hãy cùng tìm hiểu các khái niệm CSS quan trọng cho scraping:
- Selectors — 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 xác định chính xác dữ liệu cần thiết.
- Các thuộc tính
class,id, vàname— chúng là các định danh duy nhất, giúp làm nổi bật và phân biệt các phần tử. Đối với scraping, chúng rất hữu ích vì giúp cô lập các phần tử cần thiết, đơn giản hóa việc trích xuất dữ liệu.
2. Kết nối CSS với tài liệu HTML
CSS có thể được kết nối với HTML bằng nhiều cách khác nhau. Hiểu những cách này là quan trọng để điều hướng qua các phần tử và xác định phong cách và class của chúng, vì điều này sẽ giúp cô lập dữ liệu mục tiêu.
Tệp ngoại vi
CSS thường được kết nối dưới dạng tệp ngoại vi, có thể thấy trong tài liệu HTML thông qua thẻ <link> trong phần <head>. Các tệp CSS ngoại vi xác định các phong cách cho toàn bộ trang, bao gồm các định danh và class, giúp dễ dàng điều hướng khi scraping.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Phong cách nội bộ
Đôi khi các phong cách có thể được định nghĩa bên trong trang với thẻ <style>. Phong cách nội bộ có thể được tìm thấy trong <head> của trang và 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>
Phong cách nhúng (thuộc tính style)
Phong cách nhúng nằm trực tiếp trong các thẻ HTML và chỉ ảnh hưởng đến phần tử cụ thể đó. Thuộc tính style cũng thường chứa các thuộ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;">Nội dung với phong cách nhúng</p>
<p style="color: red; font-size: 18px;">Nội dung với phong cách nhúng</p>
3. Các selector trong CSS
Các selector trong CSS được sử dụng để áp dụng phong cách cho các phần tử, tuy nhiên, với web scraping, ứng dụng chính của chúng là lựa chọn chính xác các phần tử chứa dữ liệu cần thiết. Hãy xem xét các loại selector chính, mà có thể sử dụng trong web scraping.
Các loại selector cơ bản
Selector theo thẻ: Selector 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, các selector theo thẻ hữu ích để trích xuất thông tin từ các thẻ, nơi có thể chứa văn bản, hình ảnh và thông tin khác.
p {
color: blue;
}
Selector theo class: Selector này chọn các phần tử có giá trị thuộc tính class cụ thể. Class được định dạng bởi dấu chấm (.) trước tên. Trong web scraping, classes rất hữu ích, vì chúng có thể xác định các phần tử có cùng phong cách, chẳng hạn danh sách các sản phẩm.
.price {
color: red;
}
.price {
color: red;
}
<p class="price">Giá: $99</p>
Selector theo định danh (ID): Selector này chọn phần tử có thuộc tính id duy nhất, được định nghĩa bằng ký tự #. Trong web scraping, id đặc biệt hữu ích để chọn các phần tử duy nhất, chẳng hạn như tiêu đề hoặc nút trên trang.
#product-title {
font-size: 24px;
}
<h1 id="product-title">Tên sản phẩm</h1>
Các selector theo thuộc tính: Các selector này chọn phần tử theo các thuộc tính cụ thể, như name, type, và các thuộc tính khác. Trong web scraping, các selector theo thuộc tính hữu ích để chọn các phần tử trong form hoặc các trường cụ thể, chẳng hạn chọn các trường có name nhất định.
input[name="email"] {
border: 2px solid blue;
}
Các selector kết hợp: Những selector này cho phép bạn chọn phần tử chính xác hơn, bằng cách kết hợp nhiều tiêu chí. Ví dụ, .product-list .price sẽ chọn chỉ các giá của sản phẩm nằm trong container product-list.
Bạn sẽ tìm hiểu thêm về các selector theo thuộc tính và kết hợp trong các bài giảng tiếp theo.
4. Thuộc tính style, class, id và name
Thuộc tính style
Thuộc tính style được sử dụng để thêm phong cách nhúng vào các phần tử, có thể là dấu hiệu phân biệt cho các phần tử khó xác định bằng các thuộc tính khác. Trong web scraping, nó có thể được sử dụng như một bộ lọc bổ sung để tìm kiếm các phần tử cụ thể trên trang.
<p style="color: red; font-size: 18px;">Văn bản này được tô sáng bằng phong cách nhúng</p>
Thuộc tính class
Thuộc tính class biểu thị một nhóm các phần tử có cùng phong cách, như sản phẩm, giá cả hoặc mô tả. Khi scraping, class giúp chọn nhóm các phần tử có cùng cấu trúc trực quan, đơn giản hóa việc trích xuất dữ liệu số lượng lớn.
<p class="price">Giá: $99</p>
<p class="price">Giá: $89</p>
.price {
color: red;
}
Thuộc tính id
Thuộc tính id là duy nhất cho mỗi phần tử, khiến nó trở thành một điểm tham chiếu quý giá khi trích xuất dữ liệu độc nhất. Ví dụ, tiêu đề sản phẩm trên trang có thể có một id duy nhất, và định danh này có thể được sử dụng để chọn chính xác tiêu đề đó.
<h1 id="main-title">Tên sản phẩm</h1>
#main-title {
font-size: 30px;
}
Thuộc tính name
Thuộc tính name thường được sử dụng trong các phần tử form, và có thể áp dụng để chọn chính xác các trường nhập liệu, như các trường cho email hoặc số điện thoại. Đối với web scraping, name hữu ích khi trích xuất dữ liệu từ form.
<input type="text" name="username" placeholder="Nhập tên người dùng">
input[name="username"] {
border: 1px solid #333;
}
5. Ví dụ về trang sử dụng CSS và HTML
Dưới đây là một ví dụ về tài liệu HTML mà sử dụng các selector và thuộc tính khác nhau, để làm nổi bật và cấu trúc các phần tử có thể hữu ích cho web scraping.
<!DOCTYPE html>
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<title>Trang ví dụ cho web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Sản phẩm của tuần</h1>
<p class="price">Giá: $99</p>
<p class="description">Đây là một sản phẩm độc đáo với các đặc điểm tuyệt vời.</p>
<form action="/submit" method="post">
<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="vi-VN">
<head>
<meta charset="UTF-8">
<title>Trang ví dụ cho web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Sản phẩm của tuần</h1>
<p class="price">Giá: $99</p>
<p class="description">Đây là một sản phẩm độc đáo với các đặc điểm tuyệt vời.</p>
<form action="/submit" method="post">
<label for="username">Tên đăng nhập:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Gửi</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION