Português

English
Español
中文
हिन्दी
日本語
한국어

Português

English
Español
中文
हिन्दी
日本語
한국어

Appearance

Interactive coursesLearn by building 🚀 Hundreds of hours of interactive lessons, coding challenges, and projects across web, Python, and AI. Pause, tweak the code, and build along in the browser. See all courses
This page has been auto-translated and may contain errors.View in English

Como o CSS funciona ​

docs.scrimba.com

Uma página HTML simples chega com as próprias opiniões do navegador já aplicadas: links azuis sublinhados, texto preto sem serifa, títulos que diminuem de tamanho. CSS é como você pega essa estrutura bruta e decide como ela deve parecer. Antes de você poder mudar uma única cor ou mover uma única caixa, porém, você precisa saber como seus estilos chegam à página em primeiro lugar, e o que acontece quando duas de suas regras discordam sobre o mesmo elemento.

Anexando CSS a uma página ​

Existem três formas de adicionar CSS a uma página, e a diferença é principalmente sobre onde você escreve os estilos.

A primeira é um estilo inline, escrito diretamente no elemento com um atributo style:

html
<p style="color: teal;">Um único parágrafo azul-petróleo.</p>

Isso estiliza um parágrafo e nada mais. A segunda forma é um bloco <style> interno na <head> da página, que pode estilizar muitos elementos de uma vez. A terceira, e a que você deve usar, é um arquivo CSS separado vinculado à página. Você escreve seus estilos uma vez nesse arquivo, e toda página que se conecta a ele os pega. Pense nisso como um guarda-roupa: em vez de descrever uma roupa em cada pessoa uma por uma, você escreve o código de vestuário uma vez e todos o seguem.

O CSS chega a uma página de três formas, e elas não são iguais. Um estilo inline fica no próprio elemento em um atributo style e afeta apenas aquele elemento. Uma folha de estilo interna é um bloco <style> na <head> que pode direcionar elementos em toda a página. Uma folha de estilo externa é um arquivo .css vinculado da <head>:

html
<link rel="stylesheet" href="styles.css">

Use a folha de estilo externa como padrão. Ela mantém seu estilo em um lugar em vez de espalhado pela marcação, então a estrutura fica em HTML e a apresentação fica em CSS, a mesma separação descrita em o que é CSS. O navegador também armazena o arquivo em cache, então um visitante passando entre páginas baixa seus estilos uma vez e os reutiliza, e você escreve uma regra como seu estilo de botão uma única vez em vez de copiá-la em cada botão.

Três mecanismos anexam CSS, e cada um mapeia para um lugar na cascata que você encontrará mais adiante neste capítulo. Um estilo inline (um atributo style no elemento) se aplica apenas a esse elemento e tem peso muito alto em conflitos, que é exatamente por que confiar nisso o prejudica: é difícil sobrescrever limpa mente de uma folha de estilo. Um bloco <style> interno tem escopo para um documento. Uma folha de estilo externa, vinculada com <link rel="stylesheet">, é o padrão de produção por razões além da organização.

Arquivos externos lhe dão três coisas ao mesmo tempo: separação de responsabilidades, então a marcação e o estilo mudam independentemente; cache HTTP, então um visitante que retorna reutiliza o arquivo já baixado em toda página em vez de re-buscar estilos incorporados em cada resposta HTML; e reutilização, então uma regra criada serve um site inteiro. A compensação é uma solicitação separada, que é por isso que estilos críticos muito pequenos às vezes são incorporados para a primeira pintura, mas a regra geral se mantém: crie em uma folha de estilo externa e trate estilos inline como uma exceção direcionada, não um hábito.

Aqui está a abordagem externa em completo: um arquivo HTML que vincula uma folha de estilo, e a folha de estilo em si.

html
<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p class="intro">Bem-vindo ao site.</p>
</body>
css
/* styles.css */
.intro {
  color: teal;
  font-size: 1.25rem;
}
JunoAnexando CSS a uma página Existem três formas de adicionar CSS: no elemento com style, em um bloco <style>, ou em um arquivo separado que você vincula com <link>. Use o arquivo separado. Você escreve seus estilos uma vez e toda página que se conecta a ele parece a mesma.
JunoAnexando CSS a uma página Estilos inline atingem um elemento, um bloco <style> cobre uma página, e um arquivo externo .css cobre seu site inteiro. Padrão para o arquivo externo: mantém a apresentação fora de sua marcação, o navegador o armazena em cache, e uma regra serve cada elemento correspondente. Estilos inline são a exceção, não a rotina.
JunoAnexando CSS a uma página Crie em uma folha de estilo externa: separação, cache e reutilização em um movimento. Estilos inline têm peso pesado na cascata, então eles são dolorosos de sobrescrever depois; mantenha-os como uma exceção deliberada. A única vez para incorporar é um pequeno bloco de estilos críticos para a primeira pintura, e mesmo assim a maior parte do seu CSS fica no arquivo vinculado.

A anatomia de uma regra ​

Um pedaço de CSS é escrito como uma regra, e toda regra tem a mesma forma. Aqui está uma que estiliza um cartão:

css
.card {
  color: navy;
  padding: 16px;
}

O .card na frente é o seletor: ele escolhe quais elementos a regra se aplica, neste caso qualquer coisa com a classe card. Tudo dentro das chaves é o bloco de declaração. Cada linha dentro, como color: navy;, é uma declaração: uma propriedade (color) e o valor que você quer que ela tenha (navy), separados por dois-pontos e terminados com ponto-e-vírgula. Leia a regra toda como uma frase: "para cada cartão, faça a cor marinha e o preenchimento 16 pixels."

Toda regra é construída das mesmas partes, e nomeá-las torna o resto do CSS mais fácil de falar.

css
.card {
  color: navy;
  padding: 16px;
}

O seletor (.card) escolhe os elementos que a regra direciona. As chaves contêm o bloco de declaração. Dentro dele, cada par property: value; é uma declaração: color é a propriedade, navy é o valor, o dois-pontos os une e o ponto-e-vírgula os termina. O ponto-e-vírgula é um separador entre declarações, então a última tecnicamente não precisa dele, mas mantenha-o mesmo assim: adicionar a próxima declaração depois se torna uma mudança de uma linha em vez de duas. Quais elementos um seletor corresponde, e o quão específico é, é o assunto do capítulo de seletores.

A gramática é pequena e vale a pena ser declarada precisamente, porque todo conceito posterior é definido nesses termos. Uma regra é um seletor (o padrão que decide quais elementos a regra se aplica) seguido por um bloco de declaração (as chaves). Dentro do bloco fica uma lista de declarações, cada uma uma propriedade emparelhada com um valor por um dois-pontos e terminada por um ponto-e-vírgula.

css
.card {
  color: navy;
  padding: 16px;
}

Precisão aqui compensa na depuração. Uma declaração malformada, digamos uma propriedade digitada incorretamente ou um valor inválido, é descartada pelo analisador por conta própria, e o resto do bloco ainda se aplica; CSS falha por declaração, não por regra, que é por isso que um único erro de digitação discretamente remove uma linha em vez de quebrar o cartão inteiro. O ponto-e-vírgula é um separador, não um terminador, então é opcional após a declaração final, mas mantê-lo previne uma regra quebrada no dia em que você acrescenta outra linha e esquece de adicioná-lo acima. Quando você encontrar a cascata em seguida, lembre-se que "qual declaração vence" sempre opera neste nível de declaração, propriedade por propriedade.

JunoA anatomia de uma regra Uma regra é um seletor mais um conjunto de declarações em chaves. O seletor como .card escolhe os elementos, e cada declaração como color: navy; é uma propriedade e um valor com um dois-pontos entre eles e um ponto-e-vírgula no final. Uma vez que você pode nomear essas partes, toda regra que você lê parece a mesma.
JunoA anatomia de uma regra Seletor, bloco de declaração, e declarações property: value; dentro dele: essa é toda regra. O ponto-e-vírgula separa declarações, então mantenha-o também na última e adicionar a próxima linha continua sendo uma edição de uma linha. Como os seletores correspondem e o quão específicos eles são vem a seguir no capítulo de seletores.
JunoA anatomia de uma regra Uma regra é um seletor e um bloco de declarações property: value;, e CSS falha por declaração: uma linha inválida é descartada, o resto do bloco sobrevive. É por isso que um erro de digitação furtivo remove silenciosamente um único estilo em vez de quebrar o cartão. Mantenha o ponto-e-vírgula final e acrescentar uma declaração nunca o morde.

A cascata ​

Às vezes duas regras tentam estilizar o mesmo elemento, e o CSS precisa de uma forma de decidir qual vence. Essa decisão é a cascata, e é de onde o C em CSS vem.

css
.card {
  color: navy;
}

.card {
  color: teal;
}

Ambas as regras visam o cartão e ambas definem a cor. O cartão acaba azul-petróleo, porque quando duas regras têm a mesma força, a escrita depois vence. A ordem importa, e ela flui para baixo no arquivo como água, que é de onde o nome cascata vem. Há um segundo critério de desempate também: um seletor mais específico bate um mais geral, então uma regra visando precisamente seu cartão pode sobrescrever uma regra mais ampla mesmo que a mais ampla venha depois. Você encontrará essa especificidade em detalhes no capítulo de seletores.

Quando várias regras definem a mesma propriedade no mesmo elemento, a cascata é o processo que escolhe um vencedor. Dois fatores decidem isso aqui: especificidade e ordem de origem.

css
.card {
  color: navy;
}

.card {
  color: teal;
}

Essas duas regras têm especificidade idêntica, então a ordem de origem quebra o empate e a regra posterior vence: o cartão é azul-petróleo. Quando a especificidade difere, porém, ela toma prioridade sobre a ordem: um seletor mais específico bate um mais geral mesmo quando a regra geral vem depois no arquivo. Mais específico vence; em um empate de especificidade, posterior vence. É por isso que empilhar sobreposições no final de um arquivo é um hábito frágil, e por que entender a especificidade do capítulo de seletores é o que torna a cascata previsível em vez de um jogo de adivinhação.

A cascata é o algoritmo que resolve declarações concorrentes para uma propriedade em um elemento, e ele passa por um conjunto ordenado de critérios até que uma declaração permaneça em pé.

css
.card {
  color: navy;
}

.card {
  color: teal;
}

Os dois critérios mais comuns são especificidade (um peso que o navegador calcula a partir do seletor) e ordem de origem (posteriormente vence em um empate), e o exemplo acima se baseia no segundo: especificidade igual, então o teal posterior vence. Mas esses dois ficam dentro de uma ordenação maior. A cascata primeiro classifica por origem e importância: estilos padrão do navegador, depois seus estilos de autor, depois quaisquer estilos de usuário, com uma camada normal-versus-importante no topo. Uma declaração marcada com !important salta para uma banda superior, que é precisamente por que existe e precisamente por que evitá-la. !important vence deixando a ordenação normal em vez de estar correto, então não é uma sobreposição mas uma saída de emergência, e uma vez que uma !important aparece, a próxima correção é muitas vezes outra. Alcance-a apenas para derrotar estilos que você não controla, como um estilo inline ou um widget de terceiros, e caso contrário deixe a especificidade e a ordem fazer o trabalho. Quando você encontrar o modelo de caixa e começar a colocar em camadas muitas regras, essa ordenação é o que mantém o resultado previsível.

JunoA cascata A cascata é como o CSS resolve uma luta quando duas regras estilizam a mesma coisa. Se as regras têm força igual, a escrita depois vence, então a ordem conta. Um seletor mais específico também pode vencer sobre um mais geral, e essa parte está chegando no capítulo de seletores.
JunoA cascata Quando as regras colidem, a especificidade decide primeiro e a ordem de origem quebra o empate: mais específico vence, e em uma correspondência mesmo a regra posterior vence. Empilhar sobreposições no final de um arquivo funciona até não funcionar, que é por isso que o capítulo de seletores sobre especificidade vale a pena ler antes de você confiar na cascata.
JunoA cascata A cascata classifica por origem e importância primeiro, depois especificidade, depois ordem de origem, e resolve isso por propriedade. !important vence saltando as bandas, não por estar certo, então trate-o como uma saída de emergência para estilos que você não controla, nunca uma sobreposição rotineira. Uma !important tende a gerar a próxima.

Herança ​

Defina uma cor em uma caixa e o texto dentro dela muitas vezes vira aquela cor também, embora você nunca tenha estilizado aquele texto diretamente. Esse repasse é chamado herança.

css
.site-header {
  color: white;
  font-family: Georgia, serif;
}

Cada pedaço de texto dentro do cabeçalho, um título, um link, um lema, pega essa cor branca e essa fonte sem uma regra própria, porque color e font-family são propriedades herdadas. Nem tudo passa para baixo, porém. Propriedades de espaçamento como padding não herdam: o preenchimento que você coloca no cabeçalho fica no cabeçalho e não aparece nos elementos dentro dele. Como uma guia aproximada, estilos relacionados a texto fluem para os filhos, e estilos relacionados a caixa como espaçamento e bordas permanecem no lugar.

Algumas propriedades passam seu valor para elementos descendentes automaticamente, e algumas não. Esse comportamento é herança, e saber quais propriedades herdam economiza muitas regras repetidas.

css
.site-header {
  color: white;
  font-family: Georgia, serif;
}

Propriedades relacionadas a texto herdam: color, font-family, font-size, line-height, e similares todas fluem para descendentes, então defini-las uma vez em um container estiliza tudo dentro dele. Propriedades relacionadas a caixa não: padding, margin, border, e background se aplicam apenas ao elemento em que você os define. Quando você quer que um valor herde que normalmente não o faria, a palavra-chave inherit força-o, pegando o valor computado da propriedade do pai. Herança e a cascata são sistemas separados que funcionam juntos: a cascata decide a declaração vencedora para um elemento, e a herança é o que um filho volta quando nenhuma regra define aquela propriedade nele. A tipografia se baseia muito nisso, que o capítulo de tipografia constrói.

Herança é o mecanismo pelo qual uma propriedade sem valor cascateado em um elemento toma seu valor do pai daquele elemento. Cada propriedade CSS é definida como herdada ou não: a maioria das propriedades de texto (color, font-family, font-size, line-height, text-align) herdam; a maioria das propriedades de caixa (padding, margin, border, background) não, porque herdar espaçamento para cada descendente seria inutilizável.

css
.site-header {
  color: white;
  font-family: Georgia, serif;
}

Quatro palavras-chave explícitas controlam isso por declaração quando os padrões não são o que você quer: inherit pega o valor computado do pai mesmo em uma propriedade não-herdada, initial redefine para o padrão de especificação da propriedade, unset atua como inherit para propriedades herdadas e initial para o resto, e revert reverte para o estilo padrão do navegador. A imagem maior é que herança e a cascata juntas produzem o valor computado de um elemento: a cascata seleciona uma declaração vencedora onde uma existe, e onde nenhuma existe, uma propriedade herdada puxa do seu pai enquanto uma não-herdada cai para seu valor inicial. Esse único valor computado por propriedade, por elemento é o que layout e pintura realmente consomem, e o capítulo de propriedades customizadas se apoia diretamente na herança para fazer tokens de design fluírem através de uma árvore de componentes.

JunoHerança Herança é estilos de texto fluindo para dentro dos elementos dentro de uma caixa: defina color ou font-family em um cabeçalho e o texto dentro pega-o gratuitamente. Espaçamento como padding não passa para baixo, ele fica onde você o coloca. Regra aproximada: estilos de texto viajam para filhos, estilos de caixa permanecem.
JunoHerança Propriedades de texto como color e font-family herdam para descendentes; propriedades de caixa como padding e border não. Estilize um container uma vez e tudo relacionado a texto dentro dele segue. Quando você precisa de um valor que normalmente não herdaria, a palavra-chave inherit puxa do pai.
JunoHerança Cada propriedade é herdada ou não por definição: propriedades de texto herdam, propriedades de caixa não. As palavras-chave inherit, initial, unset, e revert deixam você sobrescrever isso por declaração. Herança e a cascata juntas resolvem em um valor computado por propriedade por elemento, e esse valor é o que layout e pintura realmente usam.