1. Concetti base di CSS per web scraping
Per fare un buon web scraping, capire la struttura di una pagina HTML e dei suoi CSS class è fondamentale.
Sapere come gli elementi di una pagina sono strutturati e stilizzati con CSS ti permette di scegliere con cura i dati di interesse e di estrarli. Vediamo come il collegamento di CSS ad HTML, l'uso dei selectors e degli attributi
style, class, id e name possono aiutare a lavorare con la struttura delle pagine web per il scraping.
Il CSS si occupa dello stile delle pagine web, ma per il web scraping possiamo anche vederlo come uno strumento utile per capire la struttura e selezionare gli elementi. Analizziamo i concetti di CSS fondamentali per chi fa scraping:
- Selectors — sono regole che puntano a specifici elementi HTML. Il loro uso ti permette di identificare i dati che ti servono con precisione.
-
Attributi
class,id, ename— sono identificatori unici che aiutano a distinguere e selezionare gli elementi. Sono molto utili nello scraping perchè permettono di isolare con facilità gli elementi desiderati, semplificando il lavoro.
2. Collegare CSS a un documento HTML
Esistono diversi modi per collegare CSS a HTML. È importante capire questi metodi per navigare tra gli elementi e definire i loro stili e class, dato che ciò ti aiuterà a isolare i dati target.
File esterno
Spesso i CSS sono collegati come file esterni, visibili in un file HTML tramite il tag <link> nella sezione <head>. I file CSS esterni definiscono lo stile di tutta la pagina, incluso identificatori e class, facilitando la navigazione per chi fa scraping.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Stili interni
A volte gli stili sono definiti direttamente nella pagina utilizzando il tag <style>. Gli stili interni sono presenti di solito nella sezione <head> e possono servire da guida per capire i class e identificatori da usare per selezionare gli elementi corretti.
<head>
<style>
.price {
color: red;
}
</style>
</head>
Stili inline (attributo style)
Gli stili inline si trovano direttamente nei tag HTML e influenzano solo l'elemento specifico. L'attributo style spesso contiene proprietà uniche che possono essere utili per identificare i dati target.
<p style="color: red; font-size: 18px;">Testo con stile inline</p>
3. Selectors in CSS
Gli selectors in CSS vengono usati per applicare stili agli elementi, ma nel web scraping il loro scopo principale è selezionare con precisione gli elementi che contengono i dati necessari. Ecco i principali tipi di selectors che puoi usare per lo scraping.
Tipi principali di selectors
Selector per tag: Questo selector seleziona tutti gli elementi con un determinato tag (ad esempio <p> o <div>). Nel web scraping, i selectors per tag sono utili per ottenere informazioni dai tag che possono contenere testo, immagini e altre informazioni.
p {
color: blue;
}
Selector per class: Questo selector seleziona gli elementi con un valore specifico nell'attributo class. Una class è indicata con un punto (.) davanti al nome. Nel web scraping, le class sono molto utili perchè possono identificare gruppi di elementi con lo stesso stile, come ad esempio una lista di prodotti.
.price {
color: red;
}
<p class="price">Prezzo: $99</p>
Selector per identificatore (ID): Questo selector seleziona un elemento con un attributo unico id, indicato dal simbolo #. Nel web scraping id è particolarmente utile per scegliere elementi unici come un titolo o un bottone su una pagina.
#product-title {
font-size: 24px;
}
<h1 id="product-title">Nome Prodotto</h1>
Selector per attributo: Questi selectors selezionano elementi in base a determinati attributi, come name, type, ecc. Per il web scraping, i selectors per attributo sono utili per individuare elementi form o specifici campi, come ad esempio campi con un determinato name.
input[name="email"] {
border: 2px solid blue;
}
Selectors combinati: Questi selectors permettono di selezionare elementi in modo più preciso combinando diversi criteri. Ad esempio, .product-list .price seleziona solo i prezzi dei prodotti all'interno del contenitore product-list.
Imparerai di più sugli attributi e i selectors combinati nelle prossime lezioni.
4. Attributi style, class, id e name
Attributo style
L'attributo style viene usato per aggiungere stili inline agli elementi, fungendo da distintivo unico per elementi difficili da identificare con altri attributi. Nel web scraping, può essere un filtro aggiuntivo per trovare elementi specifici su una pagina.
<p style="color: red; font-size: 18px;">Questo testo ha uno stile inline</p>
Attributo class
L'attributo class designa gruppi di elementi con lo stesso stile, come prodotti, prezzi o descrizioni. Nel web scraping, class aiuta a selezionare gruppi di elementi con la stessa struttura visiva, semplificando l'estrazione massiva di dati.
<p class="price">Prezzo: $99</p>
<p class="price">Prezzo: $89</p>
.price {
color: red;
}
Attributo id
L'attributo id è unico per ogni elemento, quindi è molto utile per estrarre dati unici. Ad esempio, l'header di un prodotto in una pagina può avere un id unico, che puoi usare per selezionarlo con precisione.
<h1 id="main-title">Nome Prodotto</h1>
#main-title {
font-size: 30px;
}
Attributo name
L'attributo name è spesso usato negli elementi delle form e può essere applicato per selezionare con precisione i campi di input, come quelli per email o nome utente. Per il web scraping, name è utile per estrarre dati dai campi di input.
<input type="text" name="username" placeholder="Inserisci il nome utente">
input[name="username"] {
border: 1px solid #333;
}
5. Esempio di una pagina che utilizza CSS e HTML
Di seguito un esempio di documento HTML che utilizza vari selectors e attributi per evidenziare e strutturare gli elementi utili per il web scraping.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Esempio di pagina per web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Prodotto della settimana</h1>
<p class="price">Prezzo: $99</p>
<p class="description">Questo è un prodotto unico con caratteristiche eccezionali.</p>
<form action="/submit" method="post">
<label for="username">Nome utente:</label>
<input type="text" id="username" name="username">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Invia</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION