1. Grundlagen von CSS für Webscraping
Für erfolgreiches Webscraping ist das Verständnis der HTML-Struktur und der CSS-Klassen auf der Seite ein
entscheidender Faktor.
Wenn du verstehst, wie Seiten mit CSS gestaltet und strukturiert sind, kannst du einfacher die benötigten
Daten auswählen und extrahieren. Schauen wir uns an, wie die Einbindung von CSS in HTML, der Einsatz von Selektoren
sowie die Attribute style, class, id und name bei der Arbeit mit
der Struktur von Webseiten beim Scraping helfen.
CSS ist verantwortlich für die Gestaltung von Webseiten. Für das Webscraping können wir CSS jedoch eher als Werkzeug betrachten, um die Struktur zu verstehen und Elemente auszuwählen. Hier sind die wichtigsten Konzepte von CSS, die für Webscraping relevant sind:
- Selektoren — Regeln, die auf bestimmte HTML-Elemente zeigen. Mit ihrer Hilfe kannst du gezielt die benötigten Daten identifizieren.
-
Attribute
class,id, undname— sie sind einzigartige Identifikatoren, die helfen, Elemente hervorzuheben und voneinander zu unterscheiden. Beim Scraping sind sie besonders nützlich, da sie das Isolieren der benötigten Elemente und damit die Datenextraktion erleichtern.
2. Einbinden von CSS in ein HTML-Dokument
CSS kann auf verschiedene Arten in HTML eingebunden werden. Es ist wichtig, diese Möglichkeiten zu verstehen, um durch Elemente zu navigieren und ihre Stile und Klassen zu bestimmen, da dies hilft, die Ziel-Daten zu isolieren.
Externe Datei
CSS wird oft als externe Datei eingebunden, was im HTML-Dokument durch das Tag <link> im
<head>-Bereich sichtbar ist. Externe CSS-Dateien definieren die Stile für die gesamte Seite,
einschließlich Identifikatoren und Klassen, was die Navigation beim Scraping erleichtert.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Interne Stile
Manchmal können Stile direkt in der Seite mit dem Tag <style> definiert werden. Interne Stile
findet man im <head>-Bereich der Seite. Sie können als Hinweis für das Verständnis von Klassen
und Identifikatoren dienen, anhand derer du die benötigten Elemente auswählen kannst.
<head>
<style>
.price {
color: red;
}
</style>
</head>
Inline-Stile (Attribut style)
Inline-Stile befinden sich direkt in den HTML-Tags und wirken sich nur auf das spezifische Element aus. Das
Attribut style enthält oft auch einzigartige Eigenschaften, die nützlich sein können, um Ziel-Daten
zu identifizieren.
<p style="color: red; font-size: 18px;">Text mit Inline-Stil</p>
3. Selektoren in CSS
Selektoren in CSS werden verwendet, um Stile auf Elemente anzuwenden. Beim Webscraping sind sie jedoch hauptsächlich dazu da, gezielt Elemente auszuwählen, die die benötigten Daten enthalten. Hier sind die Haupttypen von Selektoren, die du beim Scraping nutzen kannst:
Haupttypen von Selektoren
Tag-Selektor: Dieser Selektor wählt alle Elemente eines bestimmten Tags (z. B. <p> oder
<div>) aus. Beim Scraping sind Tag-Selektoren nützlich, um Informationen aus Tags zu extrahieren, die
Text, Bilder oder andere Informationen enthalten können.
p {
color: blue;
}
Klassen-Selektor: Dieser Selektor wählt Elemente mit einem bestimmten Wert des Attributs class aus.
Der Klassenname wird mit einem Punkt (.) vor dem Namen angegeben. Beim Scraping sind Klassen besonders nützlich,
da sie Elemente mit denselben Stilen identifizieren können, wie z. B. eine Liste von Produkten.
.price {
color: red;
}
<p class="price">Preis: $99</p>
ID-Selektor: Dieser Selektor wählt ein Element mit einem einzigartigen id-Attribut aus, das mit einem
Hash-Zeichen (#) angegeben wird. Beim Scraping ist id nützlich, um einzigartige Elemente wie
Überschriften oder Schaltflächen auf einer Seite auszuwählen.
#product-title {
font-size: 24px;
}
<h1 id="product-title">Produktname</h1>
Attribut-Selektoren: Diese Selektoren wählen Elemente aufgrund bestimmter Attribute wie
name,
type und anderer aus. Beim Scraping sind Attribut-Selektoren nützlich, um Formular-Elemente oder bestimmte
Felder wie das Feld mit einem bestimmten name auszuwählen.
input[name="email"] {
border: 2px solid blue;
}
Kombinierte Selektoren: Diese Selektoren erlauben dir, Elemente präziser auszuwählen, indem mehrere Kriterien
kombiniert werden. Zum Beispiel wählt .product-list .price nur Preise von Produkten innerhalb des Containers
product-list.
Mehr über Attribut- und kombinierte Selektoren erfährst du in den nächsten Vorlesungen.
4. Attribute style, class, id und name
Attribut style
Das Attribut style wird verwendet, um Inline-Stile auf Elemente anzuwenden, was als Unterscheidungsmerkmal
für Elemente dienen kann, die schwer mit anderen Attributen zu identifizieren sind. Beim Scraping kann es als zusätzlicher
Filter dienen, um bestimmte Elemente auf einer Seite zu finden.
<p style="color: red; font-size: 18px;">Dieser Text ist mit Inline-Stil hervorgehoben</p>
Attribut class
Das Attribut class kennzeichnet eine Gruppe von Elementen mit denselben Stilen, wie Produkte, Preise oder
Beschreibungen. Beim Scraping hilft class, eine Gruppe von Elementen mit derselben visuellen Struktur
auszuwählen, was die Massenextraktion von Daten erleichtert.
<p class="price">Preis: $99</p>
<p class="price">Preis: $89</p>
Attribut id
Das Attribut id ist für jedes Element einzigartig, was es zu einem wertvollen Orientierungspunkt für die
Extraktion einzigartiger Daten macht. Beispielsweise kann der Titel eines Produkts auf einer Seite eine einzigartige
id haben, die zur präzisen Auswahl dieses Titels verwendet werden kann.
<h1 id="main-title">Produkt der Woche</h1>
Attribut name
Das Attribut name wird häufig in Formular-Elementen verwendet und kann zur präzisen Auswahl von Eingabefeldern
wie E-Mail oder Telefonnummer verwendet werden. Für Webscraping ist name nützlich bei der Datenextraktion aus
Formularen.
<input type="text" name="username" placeholder="Benutzernamen eingeben">
5. Beispielseite mit CSS und HTML
Unten ist ein Beispiel für ein HTML-Dokument, das verschiedene Selektoren und Attribute verwendet, um Elemente hervorzuheben und zu strukturieren, die für das Webscraping nützlich sein können.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispielseite für Webscraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Produkt der Woche</h1>
<p class="price">Preis: $99</p>
<p class="description">Dies ist ein einzigartiges Produkt mit großartigen Funktionen.</p>
<form action="/submit" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" name="email">
<button type="submit">Senden</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION