review-basic-css
Voltar à Trilha

revisão dos fundamentos de css

Noções básicas de CSS

  • O que é CSS?: Cascading Style Sheets (CSS) é uma linguagem de folha de estilos usada para aplicar estilos a elementos HTML. CSS é usado para cores, imagens de fundo, layouts e mais.
  • Basic Anatomy of a CSS Rule: A CSS rule is made up of two main parts: a selector and a declaration block. Um seletor é um padrão usado em CSS para identificar e direcionar elementos HTML específicos para estilização. Um bloco de declaração aplica um conjunto de estilos para um ou mais seletores.
Aqui está a sintaxe geral de uma regra CSS: 
selector {
    property: value;
}
  • Elemento meta name="viewport": Este elemento meta fornece ao navegador instruções sobre como controlar as dimensões da página e o escalonamento em diferentes dispositivos, particularmente em telefones celulares e tablets.
  • Estilos Padrão do Navegador: Cada elemento HTML terá estilos padrão do navegador aplicados a ele. Isso geralmente inclui itens como margens e espaçamentos padrão.

CSS Inline, Interno e Externo

  • CSS Inline: Esses estilos são escritos diretamente dentro de um elemento HTML usando o atributo style. Na maioria das vezes você não usará CSS inline devido à separação de responsabilidades.
Aqui está um exemplo de CSS inline: 
<link rel="stylesheet" href="styles.css">
<p style="color: red;">This is a red paragraph.</p>
  • CSS Interno: Esses estilos são escritos dentro das tags <style> na seção head de um documento HTML. Isso pode ser útil para criar exemplos de código curtos, mas geralmente você não precisará usar CSS interno.
  • CSS Externo: Esses estilos são escritos em um arquivo CSS separado e vinculados ao documento HTML usando o elemento link na seção head. Para a maioria dos projetos, você usará um arquivo CSS externo em vez de CSS interno ou inline.

Trabalhando com as propriedades width e height

  • Propriedade width: Esta propriedade especifica a largura de um elemento. Se você não especificar uma largura, o padrão será definido como auto. Isso permite que o navegador determine a largura do elemento com base no seu conteúdo, pai e tipo de exibição.
  • Propriedade min-width: Esta propriedade especifica a largura mínima para um elemento.
  • Propriedade max-width: Esta propriedade especifica a largura máxima para um elemento.
  • Propriedade height: Esta propriedade especifica a altura de um elemento. Da mesma forma, a altura é auto por padrão, o que significa que ela se ajustará ao conteúdo interno.
  • Propriedade min-height: Esta propriedade especifica a altura mínima para um elemento.
  • Propriedade max-height: Esta propriedade especifica a altura máxima para um elemento.

Diferentes Tipos de Combinadores CSS

  • Combinador Descendente: Este combinador é usado para direcionar elementos que são descendentes de um elemento pai especificado. O exemplo a seguir irá direcionar todos os itens li dentro dos elementos ul.
<link rel="stylesheet" href="styles.css">
<ul>
    <li>Example item one</li>
    <li>Example item two</li>
    <li>Example item three</li>
</ul>
ul li {
    background-color: yellow;
}
  • Combinador Filho (>): Este combinador é usado para selecionar elementos que são filhos diretos de um elemento pai especificado. O exemplo a seguir irá direcionar todos os elementos p que são filhos diretos da classe container.
<link rel="stylesheet" href="styles.css">
<div class="container">
  <p>This will get styled.</p>

  <div>
    <p>This will not get styled.</p>
  </div>
</div>
.container > p {
  background-color: black;
  color: white;
}
  • Combinador de próximo-irmão (+): Este combinador seleciona um elemento que segue imediatamente um elemento irmão especificado. O exemplo a seguir selecionará o elemento parágrafo que segue imediatamente o elemento h2.
<link rel="stylesheet" href="styles.css">
<h2>I am a sub heading</h2>

<p>This paragraph element will get a red background.</p>
h2 + p {
  background-color: red;
}
  • Combinador de Irmão Subsequente (~): Este combinador seleciona todos os irmãos de um elemento especificado que vêm depois dele. O exemplo a seguir estilizará apenas o segundo elemento p porque ele é o único que é irmão do elemento ul e compartilha o mesmo pai.
<link rel="stylesheet" href="styles.css">
<div class="container">
  <p>This will not get styled.</p>
  <ul>
    <li>Example item one</li>
    <li>Example item two</li>
    <li>Example item three</li>
  </ul>
  <p>This will get styled.</p>
</div>
<p>This will not get styled.</p>
ul ~ p {
  background-color: green;
}

Elementos em Nível Inline, Block e Inline-Block

  • Elementos de nível inline: Elementos inline ocupam apenas a largura que precisam e não começam em uma nova linha. Esses elementos fluem dentro do conteúdo, permitindo que texto e outros elementos inline apareçam ao lado deles. Elementos inline comuns são os elementos span, a e img.
  • Elementos de nível de bloco: Elementos de nível de bloco começam em uma nova linha e ocupam toda a largura disponível por padrão, estendendo-se pela largura do seu contêiner. Alguns elementos comuns de nível de bloco são os elementos div, p e section.
  • Elementos de nível inline-block: Você pode definir um elemento como inline-block usando a propriedade display. Esses elementos se comportam como elementos inline mas podem ter width e height definidos como elementos de nível bloco.

Margem e Preenchimento

  • Propriedade margin: Esta propriedade é usada para aplicar espaço fora do elemento, entre a borda do elemento e os elementos ao redor.
  • Propriedade padding: Esta propriedade é usada para aplicar espaço dentro do elemento, entre o conteúdo e sua borda.
  • Abreviação de margin: Você pode especificar de 1 a 4 valores para definir os lados da margem. Um valor se aplica aos quatro lados; dois valores definem top e bottom e depois right e left; três valores definem top, horizontal (right e left) e depois bottom; quatro valores definem top, right, bottom, left.
  • Atalho de padding: Você pode especificar de 1 a 4 valores para definir os lados do padding. Um valor se aplica aos quatro lados; dois valores definem top e bottom e depois right e left; três valores definem top, horizontal (right e left) e depois bottom; quatro valores definem top, right, bottom, left.

Especificidade do CSS

  • Especificidade do CSS Inline: O CSS inline tem a especificidade mais alta porque é aplicado diretamente ao elemento. Ele substitui qualquer CSS interno ou externo. O valor de especificidade para estilos inline é (1, 0, 0, 0).
  • Especificidade do CSS Interno: O CSS interno é definido dentro de um style elemento na head seção do documento HTML. Ele tem especificidade menor do que estilos inline. Tanto o CSS interno quanto o externo compartilham o mesmo nível de especificidade, que é determinado pelos seus seletores, não pela sua localização.
  • Especificidade do CSS Externo: O CSS externo é vinculado via um elemento link na seção head e é escrito em arquivos .css separados. Assim como o CSS interno, sua especificidade é determinada pelos seletores usados. Quando duas regras têm especificidade igual, a ordem de origem determina o vencedor: a regra que aparece mais tarde no documento tem precedência. O CSS externo oferece a melhor manutenção para projetos maiores.
  • Seletor Universal (*): Um tipo especial de seletor CSS que corresponde a qualquer elemento no documento. É frequentemente usado para aplicar um estilo a todos os elementos na página, o que pode ser útil para redefinir ou normalizar estilos entre diferentes navegadores. O seletor universal tem o menor valor de especificidade de qualquer seletor. Ele contribui com 0 para todas as partes do valor de especificidade (0, 0, 0, 0).
  • Seletores de Tipo: Esses seletores têm como alvo elementos com base no nome da tag. Seletores de tipo têm uma especificidade relativamente baixa em comparação com outros seletores. O valor de especificidade para um seletor de tipo é (0, 0, 0, 1).
  • Seletores de Classe: Esses seletores são definidos por um ponto (.) seguido pelo nome da classe. O valor de especificidade para um seletor de classe é (0, 0, 1, 0). Isso significa que seletores de classe podem substituir seletores de tipo, mas podem ser substituídos por seletores de ID e estilos inline.
  • Seletores de ID: Seletores de ID são definidos por um símbolo de cerquilha (#) seguido pelo nome do ID. Seletores de ID têm uma especificidade muito alta, maior do que seletores de tipo e seletores de classe, mas menor do que estilos inline. O valor de especificidade para um seletor de ID é (0, 1, 0, 0).
  • Palavra-chave !important: usada para dar a uma regra de estilo a mais alta prioridade, permitindo que ela substitua quaisquer outras declarações para uma propriedade. Quando usada, força o navegador a aplicar o estilo especificado, independentemente da especificidade de outros seletores. Você deve ter cautela ao usar !important porque isso pode tornar seu CSS mais difícil de manter e depurar.
  • Algoritmo de Cascata: Um algoritmo usado para decidir quais regras CSS aplicar quando há múltiplos estilos direcionados ao mesmo elemento. Ele garante que os estilos mais apropriados sejam usados, com base em um conjunto de regras bem definidas.
  • Herança CSS: O processo pelo qual estilos são passados de elementos pai para seus filhos. A herança permite que você defina estilos em um nível superior na árvore do documento e os aplique a múltiplos elementos sem especificá-los explicitamente para cada elemento.