1. Podstawowe pojęcia CSS w web scraping
Dla udanego web scrapingu zrozumienie struktury HTML i klas CSS na stronie jest kluczowym czynnikiem. Wiedza o tym, jak elementy stron są stylizowane i strukturyzowane za pomocą CSS, pozwala precyzyjniej wybrać potrzebne dane i je wyciągnąć. Omówmy, jak podłączenie CSS do HTML, użycie selektorów oraz atrybuty style, class, id i name pomagają w pracy ze strukturą stron webowych dla scrapingu.
CSS odpowiada za stylizację stron internetowych, jednakże dla celów web scrapingu możemy traktować CSS jako narzędzie do zrozumienia struktury i wyboru elementów. Omówmy kluczowe koncepcje CSS, które są ważne dla scrapingu:
- Selektory — to reguły wskazujące na konkretne elementy HTML. Ich użycie pomaga dokładnie identyfikować potrzebne dane.
-
Atrybuty
class,id, iname— to unikalne identyfikatory, które pomagają wyróżniać i rozróżniać elementy. Dla scrapingu są szczególnie użyteczne, ponieważ pomagają izolować potrzebne elementy, co upraszcza wyciąganie danych.
2. Podłączenie CSS do dokumentu HTML
CSS można podłączyć do HTML na różne sposoby. Ważne jest, aby rozumieć te sposoby do nawigacji po elementach i określenia ich stylów i klas, ponieważ to pomoże wyodrębnić docelowe dane.
Zewnętrzny plik
CSS często podłączany jest jako zewnętrzny plik, co można zobaczyć w dokumencie HTML poprzez tag <link> w sekcji <head>. Zewnętrzne pliki CSS definiują style dla całej strony, w tym identyfikatory i klasy, co ułatwia nawigację przy scrapingu.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Style wewnętrzne
Czasami style mogą być zdefiniowane wewnątrz strony za pomocą tagu <style>. Style wewnętrzne można znaleźć w <head> strony i używać jako wskazówkę do zrozumienia klas i identyfikatorów, dzięki którym można wybrać potrzebne elementy.
<head>
<style>
.price {
color: red;
}
</style>
</head>
Style wbudowane (atrybut style)
Style wbudowane znajdują się bezpośrednio w tagach HTML i wpływają tylko na konkretny element. Atrybut style również często zawiera unikalne właściwości, które mogą być przydatne do identyfikacji docelowych danych.
<p style="color: red; font-size: 18px;">Tekst ze stylem wbudowanym</p>
<p style="color: red; font-size: 18px;">Tekst ze stylem wbudowanym</p>
3. Selektory w CSS
Selektory w CSS używane są do stosowania stylów do elementów, jednakże w web scrapingu ich główne zastosowanie to precyzyjny wybór elementów, które zawierają potrzebne dane. Omówmy główne typy selektorów, które można użyć przy web scrapingu.
Główne typy selektorów
Selektor po tagu: Ten selektor wybiera wszystkie elementy określonego tagu (na przykład <p> lub
<div>). W web scrapingu selektory po tagu są użyteczne do wyciągania informacji z tagów, które mogą zawierać tekst, obrazy i inne informacje.
p {
color: blue;
}
Selektor po klasie: Ten selektor wybiera elementy z określoną wartością atrybutu class.
Klasa oznaczana jest kropką (.) przed nazwą. W web scrapingu klasy są wyjątkowo użyteczne, ponieważ mogą identyfikować elementy z tymi samymi stylami, na przykład listę produktów.
.price {
color: red;
}
.price {
color: red;
}
<p class="price">Cena: $99</p>
Selektor po identyfikatorze (ID): Ten selektor wybiera element z unikalnym atrybutem id, oznaczanym symbolem #. W web scrapingu id jest szczególnie użyteczny do wyboru unikalnych elementów, takich jak nagłówek lub przycisk na stronie.
#product-title {
font-size: 24px;
}
<h1 id="product-title">Nazwa produktu</h1>
Selektory atrybutowe: Te selektory wybierają elementy według określonych atrybutów, takich jak name,
type, i inne. W web scrapingu selektory atrybutowe są przydatne do wyboru elementów formularzy lub określonych pól, na przykład wyboru pól z określonym name.
input[name="email"] {
border: 2px solid blue;
}
Selektory kombinowane: Te selektory pozwalają dokładniej wybierać elementy, łącząc kilka kryteriów. Na przykład, .product-list .price wybierze tylko ceny produktów wewnątrz kontenera product-list.
O selektorach atrybutowych i kombinowanych dowiesz się więcej w kolejnych wykładach.
4. Atrybuty style, class, id i name
Atrybut style
Atrybut style jest używany do dodawania wbudowanych stylów do elementów, co może służyć jako cecha wyróżniająca dla elementów trudnych do zidentyfikowania innymi atrybutami. W web scrapingu można go używać jako dodatkowy filtr do wyszukiwania konkretnych elementów na stronie.
<p style="color: red; font-size: 18px;">Ten tekst jest wyróżniony wbudowanym stylem</p>
Atrybut class
Atrybut class oznacza grupę elementów z tymi samymi stylami, takich jak produkty, ceny lub opisy. Przy scrapingu class pomaga wybierać grupę elementów mających tę samą wizualną strukturę, co upraszcza masowe wyciąganie danych.
<p class="price">Cena: $99</p>
<p class="price">Cena: $89</p>
.price {
color: red;
}
Atrybut id
Atrybut id jest unikalny dla każdego elementu, co czyni go wartościowym wskaźnikiem przy wyciąganiu unikalnych danych. Na przykład, tytuł produktu na stronie może mieć unikalny id, i ten identyfikator można używać do dokładnego wyboru tego tytułu.
<h1 id="main-title">Nazwa produktu</h1>
#main-title {
font-size: 30px;
}
Atrybut name
Atrybut name jest często używany w elementach formularzy i można go stosować do precyzyjnego wyboru pól wejściowych, takich jak pola na e-mail lub numer telefonu. Dla web scrapingu name jest użyteczny przy wyciąganiu danych z formularzy.
<input type="text" name="username" placeholder="Wpisz nazwę użytkownika">
input[name="username"] {
border: 1px solid #333;
}
5. Przykład strony z użyciem CSS i HTML
Poniżej przedstawiono przykład dokumentu HTML, w którym używane są różne selektory i atrybuty, aby wyróżnić i zorganizować elementy, które mogą być przydatne dla web scrapingu.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład strony dla web scrapingu</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Produkt tygodnia</h1>
<p class="price">Cena: $99</p>
<p class="description">To unikalny produkt z doskonałymi charakterystykami.</p>
<form action="/submit" method="post">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<button type="submit">Wyślij</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład strony dla web scrapingu</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Produkt tygodnia</h1>
<p class="price">Cena: $99</p>
<p class="description">To unikalny produkt z doskonałymi charakterystykami.</p>
<form action="/submit" method="post">
<label for="username">Nazwa użytkownika:</label>
<input type="text" id="username" name="username">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
<button type="submit">Wyślij</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION