Lições
Iniciar
Começar a aprender
CodeGym /Cursos /Python SELF PT /Introdução ao CSS

Introdução ao CSS

Python SELF PT
Nível 30 , Lição 0
Disponível

1. Conceitos básicos de CSS para web scraping

Para um web scraping bem-sucedido, entender a estrutura HTML e as classes CSS em uma página é um fator chave. Compreendendo como os elementos da página são estilizados e estruturados com CSS, é possível selecionar com mais precisão os dados necessários e extraí-los. Vamos analisar como conectar CSS ao HTML, utilizando seletores e atributos como style, class, id e name para trabalhar com a estrutura das páginas web para scraping.

O CSS é responsável pela estilização das páginas web. No entanto, para fins de web scraping, podemos considerar o CSS como uma ferramenta para entender a estrutura e selecionar elementos. Vamos explorar os principais conceitos de CSS importantes para web scraping:

  • Seletores — São regras que apontam para elementos HTML específicos. Eles ajudam a identificar os dados necessários com precisão.
  • Atributos class, id e name — São identificadores únicos que ajudam a destacar e diferenciar elementos. Para o web scraping, eles são especialmente úteis, pois ajudam a isolar os elementos necessários, simplificando a extração de dados.

2. Conectar CSS ao documento HTML

O CSS pode ser conectado ao HTML de diversas formas. É importante entender esses métodos para navegar pelos elementos e determinar seus estilos e classes, pois isso ajudará a isolar os dados alvo.

Arquivo externo

O CSS é frequentemente conectado como um arquivo externo, visível em um documento HTML através da tag <link> na seção <head>. Arquivos CSS externos definem estilos para toda a página, incluindo identificadores e classes, facilitando a navegação durante o scraping.

HTML

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Estilos internos

Às vezes, os estilos podem ser definidos diretamente na página usando a tag <style>. Estilos internos podem ser encontrados no <head> da página e usados como dicas para entender classes e identificadores, pelos quais é possível selecionar os elementos certos.

HTML

<head>
<style>
  .price {
    color: red;
  }
</style>
</head>

Estilos embutidos (atributo style)

Estilos embutidos estão diretamente nos elementos HTML e afetam apenas o elemento específico. O atributo style frequentemente contém propriedades únicas que podem ser úteis para identificar os dados alvo.

HTML

<p style="color: red; font-size: 18px;">Texto com estilo embutido</p>
HTML

<p style="color: red; font-size: 18px;">Texto com estilo embutido</p>

3. Seletores no CSS

Seletores no CSS são usados para aplicar estilos aos elementos, mas para web scraping seu uso principal é escolher os elementos que contêm os dados desejados com precisão. Vamos explorar os principais tipos de seletores que podem ser usados no web scraping.

Principais tipos de seletores

Seletor por tag: Este seletor seleciona todos os elementos de uma determinada tag (por exemplo, <p> ou <div>). No web scraping, seletores por tag são úteis para extrair informações de tags que podem conter texto, imagens e outras informações.

CSS

p {
  color: blue;
}

Seletor por classe: Este seletor seleciona elementos com um valor específico do atributo class. Classes são identificadas por um ponto (.) antes do nome. No web scraping, classes são particularmente úteis, pois podem identificar elementos com os mesmos estilos, como uma lista de produtos.

CSS
      
        .price {
            color: red;
          }
CSS
      
        .price {
            color: red;
          }
HTML
      
        <p class="price">Preço: $99</p>

Seletor por identificador (ID): Este seletor seleciona um elemento com um atributo único id, identificado com o símbolo #. No web scraping, id é especialmente útil para selecionar elementos únicos como cabeçalhos ou botões em uma página.

CSS

    #product-title {
        font-size: 24px;
      }
CSS

    #product-title {
        font-size: 24px;
      }
HTML
  
    <h1 id="product-title">Nome do produto</h1>

Seletores de atributo: Esses seletores escolhem elementos com base em atributos como name, type, e outros. No web scraping, seletores de atributo são úteis para selecionar elementos de formulários ou campos específicos, como campos com um determinado name.

CSS

input[name="email"] {
  border: 2px solid blue;
}

Seletores combinados: Esses seletores permitem selecionar elementos com maior precisão, combinando vários critérios. Por exemplo, .product-list .price selecionará apenas os preços de produtos dentro do contêiner product-list.

Você aprenderá mais sobre seletores de atributo e seletores combinados em futuras aulas.

4. Atributos style, class, id e name

...
Comentários
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION