1. Conceptos básicos de CSS para web scraping
Para un web scraping exitoso, entender la estructura de HTML y las clases CSS en la página es clave.
Comprendiendo cómo los elementos de las páginas son estilizados y estructurados con CSS, puedes seleccionar
con precisión los datos necesarios y extraerlos. Veamos cómo la conexión de CSS a HTML, el uso de selectores
y los atributos style, class, id y name ayudan en el manejo
de la estructura de las páginas web para scraping.
CSS se encarga de estilizar las páginas web, sin embargo, para los propósitos del web scraping, podemos ver CSS como una herramienta para entender la estructura y seleccionar elementos. Vamos a ver los conceptos clave de CSS que son importantes para el scraping:
- Selectores — son reglas que apuntan a elementos específicos de HTML. Su uso ayuda a identificar con precisión los datos necesarios.
-
Atributos
class,id, yname— son identificadores únicos que ayudan a destacar y diferenciar elementos. Para el scraping son especialmente útiles ya que ayudan a aislar los elementos necesarios, lo que facilita la extracción de datos.
2. Conectando CSS a un documento HTML
CSS puede ser conectado a HTML de varias formas. Es importante entender estos métodos para navegar por los elementos y determinar sus estilos y clases, ya que esto ayudará a aislar los datos objetivo.
Archivo externo
CSS a menudo se conecta como un archivo externo, lo que se puede ver en un documento HTML a través de la etiqueta
<link> en la sección <head>. Los archivos externos de CSS definen estilos
para la página completa, incluyendo identificadores y clases, lo que facilita la navegación al hacer scraping.
<head>
<link rel="stylesheet" href="styles.css">
</head>
Estilos internos
A veces los estilos pueden ser definidos dentro de la página utilizando la etiqueta <style>.
Los estilos internos pueden encontrarse en el <head> de la página y ser utilizados como pista
para entender los clases e identificadores por los cuales puedes elegir los elementos necesarios.
<head>
<style>
.price {
color: red;
}
</style>
</head>
Estilos en línea (atributo style)
Los estilos en línea se encuentran directamente en las etiquetas HTML y afectan solo al elemento específico.
El atributo style también frecuentemente contiene propiedades únicas que pueden ser útiles para
identificar los datos objetivo.
<p style="color: red; font-size: 18px;">Texto con estilo en línea</p>
<p style="color: red; font-size: 18px;">Texto con estilo en línea</p>
3. Selectores en CSS
Los selectores en CSS se usan para aplicar estilos a los elementos, sin embargo para el web scraping su uso principal es elegir con precisión los elementos que contienen los datos necesarios. Veamos los tipos básicos de selectores que se pueden usar en el web scraping.
Tipos básicos de selectores
Selector por etiqueta: Este selector elige todos los elementos de una etiqueta específica (por ejemplo,
<p> o <div>). En el web scraping, los selectores por etiqueta son útiles
para extraer información de etiquetas que pueden contener texto, imágenes y otra información.
p {
color: blue;
}
Selector por clase: Este selector elige elementos con un valor específico del atributo class.
La clase se denota con un punto (.) antes del nombre. En el web scraping, las clases son
especialmente útiles ya que pueden identificar elementos con estilos iguales, por ejemplo, una lista de
productos.
.price {
color: red;
}
.price {
color: red;
}
<p class="price">Precio: $99</p>
Selector por identificador (ID): Este selector elige un elemento con un atributo id único,
indicado por el símbolo #. En el web scraping, el id es especialmente útil para elegir
elementos únicos, como un título o un botón en la página.
#product-title {
font-size: 24px;
}
<h1 id="product-title">Nombre del producto</h1>
Selectores de atributos: Estos selectores eligen elementos por atributos específicos, como
name, type, y otros. En el web scraping, los selectores de atributos son útiles para
seleccionar elementos de formularios o ciertos campos, por ejemplo, elegir campos con un name
específico.
input[name="email"] {
border: 2px solid blue;
}
Selectores combinados: Estos selectores permiten elegir elementos con mayor precisión, combinando varios
criterios. Por ejemplo, .product-list .price seleccionará solo los precios de productos dentro del
contenedor product-list.
Aprenderás más sobre los selectores de atributos y combinados en las próximas lecciones.
4. Atributos style, class, id y name
Atributo style
El atributo style se utiliza para agregar estilos en línea a los elementos, lo que puede servir
como distintivo para elementos que son difíciles de identificar con otros atributos. En el web scraping, se
puede usar como un filtro adicional para encontrar elementos específicos en la página.
<p style="color: red; font-size: 18px;">Este texto está destacado con estilo en línea</p>
Atributo class
El atributo class designa un grupo de elementos con estilos iguales, tales como productos, precios
o descripciones. Al hacer scraping, class ayuda a seleccionar un grupo de elementos con la misma
estructura visual, lo que facilita la extracción masiva de datos.
<p class="price">Precio: $99</p>
<p class="price">Precio: $89</p>
.price {
color: red;
}
Atributo id
El atributo id es único para cada elemento, lo que lo convierte en una referencia valiosa al
extraer datos únicos. Por ejemplo, el título de un producto en una página puede tener un id único,
y este identificador se puede usar para seleccionar con precisión dicho título.
<h1 id="main-title">Nombre del producto</h1>
#main-title {
font-size: 30px;
}
Atributo name
El atributo name se usa a menudo en elementos de formularios y se puede aplicar para seleccionar
con precisión campos de entrada, como campos para correo electrónico o número de teléfono. Para el web scraping,
name es útil al extraer datos de formularios.
<input type="text" name="username" placeholder="Introduce el nombre de usuario">
input[name="username"] {
border: 1px solid #333;
}
5. Ejemplo de página usando CSS y HTML
A continuación se muestra un ejemplo de documento HTML que utiliza varios selectores y atributos para resaltar y estructurar elementos que pueden ser útiles para el web scraping.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de página para web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Producto de la semana</h1>
<p class="price">Precio: $99</p>
<p class="description">Este es un producto único con excelentes características.</p>
<form action="/submit" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo de página para web scraping</title>
<link rel="stylesheet" href="styles.css">
<style>
.price {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="main-title">Producto de la semana</h1>
<p class="price">Precio: $99</p>
<p class="description">Este es un producto único con excelentes características.</p>
<form action="/submit" method="post">
<label for="username">Nombre de usuario:</label>
<input type="text" id="username" name="username">
<label for="email">Correo electrónico:</label>
<input type="email" id="email" name="email">
<button type="submit">Enviar</button>
</form>
</body>
</html>
#main-title {
font-size: 24px;
color: green;
}
input[name="username"] {
border: 1px solid #333;
padding: 5px;
}
GO TO FULL VERSION