1. Grundkonzepte von CSS für Web-Scraping
Um erfolgreiches Web-Scraping durchzuführen, ist das Verständnis der HTML-Struktur und der CSS-Klassen auf einer Seite ein Schlüsselfaktor. Wenn du verstehst, wie Seitenelemente mit CSS gestylt und strukturiert sind, kannst du gezielter die notwendigen Daten auswählen und extrahieren. Lass uns anschauen, wie CSS in HTML eingebunden wird, wie Selektoren verwendet werden und wie die Attribute style, class, id und name beim Arbeiten mit der Struktur von Webseiten für Scraping helfen.
CSS ist für die Gestaltung von Webseiten verantwortlich, aber für Web-Scraping-Zwecke können wir CSS als Werkzeug zum Verständnis der Struktur und zur Auswahl von Elementen betrachten. Lass uns die wichtigen CSS-Konzepte durchgehen, die für das Scraping relevant sind:
- Selektoren — dies sind Regeln, die auf bestimmte HTML-Elemente hinweisen. Ihre Verwendung hilft dabei, die benötigten Daten genau zu identifizieren.
-
Attribute
class,idundname— sie sind einzigartige Kennungen, die helfen, Elemente hervorzuheben und zu unterscheiden. Für Scraping sind sie besonders nützlich, da sie helfen, die gewünschten Elemente zu isolieren, wodurch die Datenextraktion vereinfacht wird.
2. Einbindung von CSS in ein HTML-Dokument
CSS kann auf verschiedene Arten in HTML eingebunden werden. Es ist wichtig, diese Methoden zu verstehen, um durch Elemente zu navigieren und deren 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 über das Tag <link> im <head>-Bereich zu sehen ist. Externe CSS-Dateien legen die Stile für die gesamte Seite fest, einschließlich Kennungen und Klassen, was die Navigation beim Scraping erleichtert.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Interne Stile
Manchmal können Stile innerhalb der Seite mit dem Tag <style> definiert werden. Interne Stile können im <head> der Seite gefunden und als Hinweis für das Verständnis der Klassen und Kennungen verwendet werden, die zur Auswahl der erforderlichen Elemente verwendet werden können.
<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 einzigartige Eigenschaften, die nützlich sein können, um die Ziel-Daten zu identifizieren.
<p style="color: red; font-size: 18px;">Text mit eingebautem Stil</p>
<p style="color: red; font-size: 18px;">Text mit eingebautem Stil</p>
3. CSS-Selektoren
CSS-Selektoren werden verwendet, um Stile auf Elemente anzuwenden, aber für Web-Scraping besteht ihre Hauptanwendung darin, Elemente präzise auszuwählen, die die benötigten Daten enthalten. Lassen Sie uns die Haupttypen von Selektoren betrachten, die beim Web-Scraping verwendet werden können.
Haupttypen von Selektoren
Tag-Selektor: Dieser Selektor wählt alle Elemente eines bestimmten Tags (z.B. <p> oder <div>). Beim Web-Scraping sind Tag-Selektoren nützlich, um Informationen aus Tags zu extrahieren, die Text, Bilder und andere Informationen enthalten können.
p {
color: blue;
}
Klassen-Selektor: Dieser Selektor wählt Elemente mit einem bestimmten Attributwert class aus. Die Klasse wird mit einem Punkt (.) vor dem Namen bezeichnet. Beim Web-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;
}
.price {
color: red;
}
<p class="price">Preis: $99</p>
ID-Selektor: Dieser Selektor wählt ein Element mit einem einzigartigen Attribut id aus, das mit dem Symbol # bezeichnet wird. Beim Web-Scraping ist id besonders nützlich, um einzigartige Elemente wie einen Titel oder Button auf der Seite auszuwählen.
#product-title {
font-size: 24px;
}
<h1 id="product-title">Produktname</h1>
Attribut-Selektoren: Diese Selektoren wählen Elemente anhand bestimmter Attribute aus, wie name, type usw. Beim Web-Scraping sind Attribut-Selektoren nützlich für die Auswahl von Formularelementen oder bestimmten Feldern, z.B. Auswahl von Feldern mit einem bestimmten name.
input[name="email"] {
border: 2px solid blue;
}
Kombinierte Selektoren: Diese Selektoren ermöglichen eine präzisere Auswahl von Elementen, indem mehrere Kriterien kombiniert werden. Zum Beispiel, .product-list .price wählt nur Preise von Produkten innerhalb des Containers product-list aus.
Über Attribut- und kombinierte Selektoren erfährst du mehr in den nächsten Vorlesungen.
4. Attribute style, class, id und name
Attribut style
Das Attribut style wird verwendet, um Inline-Stilelemente hinzuzufügen, was als Unterscheidungsmerkmal für Elemente dienen kann, die schwer mit anderen Attributen zu identifizieren sind. Beim Web-Scraping kann es als zusätzlicher Filter zum Finden spezifischer Elemente auf der Seite verwendet werden.
<p style="color: red; font-size: 18px;">Dieser Text ist mit einem eingebauten Stil hervorgehoben</p>
Attribut class
Das Attribut class bezeichnet eine Gruppe von Elementen mit denselben Stilen, wie Produkte, Preise oder Beschreibungen. Beim Scraping hilft class, eine Gruppe von Elementen auszuwählen, die dieselbe visuelle Struktur haben, was die Massenextraktion von Daten erleichtert.
<p class="price">Preis: $99</p>
<p class="price">Preis: $89</p>
.price {
color: red;
}
Attribut id
Das Attribut id ist für jedes Element einzigartig, was es zu einem wertvollen Anhaltspunkt bei der Extraktion einzigartiger Daten macht. Zum Beispiel kann der Titel eines Produkts auf der Seite eine eindeutige id haben, und diese Kennung kann verwendet werden, um diesen Titel genau auszuwählen.
<h1 id="main-title">Produktname</h1>
#main-title {
font-size: 30px;
}
Attribut name
Das Attribut name wird häufig in Formularelementen verwendet und kann zur genauen Auswahl von Eingabefeldern verwendet werden, wie z.B. Felder für E-Mail oder Telefonnummer. Für Web-Scraping ist name nützlich für die Extraktion von Daten aus Formularen.
<input type="text" name="username" placeholder="Benutzernamen eingeben">
input[name="username"] {
border: 1px solid #333;
}
5. Beispielseite mit CSS und HTML
Unten ist ein Beispiel für ein HTML-Dokument dargestellt, in dem verschiedene Selektoren und Attribute verwendet werden, um Elemente hervorzuheben und zu strukturieren, die für Web-Scraping nützlich sein könnten.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispielseite für Web-Scraping</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 hervorragenden Funktionen.</p>
<form action="/submit" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<button type="submit">Absenden</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Beispielseite für Web-Scraping</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 hervorragenden Funktionen.</p>
<form action="/submit" method="post">
<label for="username">Benutzername:</label>
<input type="text" id="username" name="username">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<button type="submit">Absenden</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION