image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
Pedro Agostini
Pedro Agostini29/11/2024 07:43
Compartilhe

Fundamentos do CSS

  • #CSS

CSS é a base para estilizar páginas web, proporcionando controle sobre a aparência e o layout dos elementos. Este artigo aborda os fundamentos essenciais do CSS, como seletores, combinadores, e propriedades de dimensionamento e espaçamento.

1. Seletores

Os seletores permitem aplicar estilos a elementos específicos em um documento HTML. Aqui estão os tipos mais comuns:

  • Seletor de Tags: Aplica estilos a todas as instâncias de uma tag HTML específica.
    p {
      color: blue;
    }
  • Seletor de ID: Aplica estilos a um elemento com um ID único.
    #titulo {
      font-size: 24px;
    }
  • Seletor de Classes: Permite aplicar estilos a um grupo de elementos com a mesma classe.
    .botao {
      background-color: green;
    }
  • Seletor Universal: Aplica estilos a todos os elementos da página.
    * {
      margin: 0;
      padding: 0;
    }
  • Seletor de Atributo: Estiliza elementos com base em seus atributos.
    input[type="text"] {
      border: 1px solid gray;
    }

2. Combinadores

Combinadores definem relações entre seletores, permitindo maior controle sobre a estilização.

  • Agrupamento de Seletores: Aplica o mesmo estilo a múltiplos seletores.
    h1, h2, h3 {
      color: navy;
    }
  • Combinador Descendente: Estiliza elementos que estão dentro de outros.
    div p {
      font-style: italic;
    }
  • Combinador Filho: Aplica estilos apenas aos elementos filhos diretos.
    ul > li {
      list-style-type: none;
    }
  • Combinador Irmão:
  • Imediato: Estiliza o primeiro elemento irmão imediatamente após o anterior.
    h1 + p {
      margin-top: 10px;
    }
  • Geral: Estiliza todos os irmãos posteriores.
    h1 ~ p {
      color: gray;
    }

3. Propriedades de Dimensionamento e Espaço

Essas propriedades controlam o tamanho e o espaçamento dos elementos:

  • width e height: Definem a largura e altura de um elemento.
    div {
      width: 200px;
      height: 100px;
    }
  • max-width e max-height: Limitam o tamanho máximo.
    img {
      max-width: 100%;
    }
  • min-width e min-height: Garantem um tamanho mínimo.
    div {
      min-width: 150px;
    }
  • margin: Define o espaçamento externo de um elemento.
    p {
      margin: 10px 20px;
    }
  • padding: Define o espaçamento interno de um elemento.
    button {
      padding: 5px 15px;
    }
  • box-sizing: Controla como o tamanho total do elemento é calculado.
    div {
      box-sizing: border-box;
    }
Compartilhe
Comentários (0)