Conhecendo o CSS
CSS é uma linguagem complexa que desempenha um pouco de poder.
Isso permite-nos adicionar um layout e um design às nossas páginas, e isso permite-nos compartilhar esses estilos de elemento para elemento e de página para página. Antes de poder desbloquear todos os seus recursos, no entanto, existem alguns aspectos do idioma que devemos entender completamente.
Primeiro, é crucial saber exatamente como os estilos são renderizados. Especificamente, precisamos de saber como funcionam os diferentes tipos de seletores e como a ordem desses seletores pode afetar a forma como os nossos estilos são renderizados. Também devemos entender alguns valores de propriedade comuns que aparecem continuamente dentro do CSS, particularmente aqueles que lidam com cor e comprimento.
Procuremos sob o "capô" do CSS para ver exatamente o que acontece.
A Cascata
Começaremos por mostrar exatamente como os estilos são renderizados, observando o que é conhecido como a cascata e estudando alguns exemplos da cascata em ação. Dentro do CSS, todos os estilos são apresentados em cascata a partir da parte superior de uma folha de estilos para a parte inferior, permitindo que outros estilos sejam adicionados ou substituídos à medida que a folha de estilo avança.
Por exemplo, digamos que selecionámos todos os elementos do parágrafo no topo da nossa folha de estilo e definimos a cor de fundo para laranja e seu tamanho de letra para 24 pixels. Em seguida, em direção à parte inferior da nossa folha de estilos, selecionámos todos os elementos do parágrafo novamente e definimos a cor do fundo como verde, como visto aqui.
p {
background: orange;
font-size: 24px;
}
p {
background: green;
}
Como o seletor de parágrafo que define a cor de fundo para o verde vem após o seletor de parágrafo que define a cor de fundo para laranja, terá prioridade na cascata. Todos os parágrafos aparecerão com um fundo verde. O tamanho da letra permanecerá 24 pixels porque o seletor do segundo parágrafo não identificou um novo tamanho de fonte.
Propriedades em cascata
A cascata também funciona com propriedades dentro de seletores individuais. Novamente, por exemplo, digamos que selecionámos todos os elementos do parágrafo e definimos a cor de fundo para a laranja. Então, diretamente abaixo da declaração de propriedade e valor de fundo laranja, adicionámos outra declaração de propriedade e valor definindo a cor do plano de fundo como verde, como visto aqui.
p {
background: orange;
background: green;
}
Como a declaração de cor de fundo verde vem após a declaração de cor de fundo laranja, ele irá anular o fundo laranja e, como antes, os nossos parágrafos aparecerão com um fundo verde.
Todos os estilos entrarão em cascata do topo da nossa folha de estilos para a parte inferior da nossa folha de estilo. Há, no entanto, momentos em que a cascata não funciona tão bem. Esses tempos ocorrem quando diferentes tipos de seletores são usados e a especificidade desses seletores quebra a cascata. Como iremos ver.
Especificação de cálculo
Cada seletor em CSS tem um peso de especificidade. O peso de especificidade de um seletor, juntamente com a sua colocação na cascata, identifica como os seus estilos serão renderizados.
Na Lição 1, "Construindo a primeira página Web", falamos sobre três tipos diferentes de seletores: os seletores de tipo, classe e ID. Cada um desses seletores possui um peso de especificidade diferente.
O seletor de tipo tem o menor peso de especificidade e mantém um valor de ponto de 0-0-1. O seletor de classe possui um peso de especificidade média e possui um valor de ponto de 0-1-0. Por fim, o seletor ID possui um alto peso de especificidade e mantém um valor de ponto de 1-0-0. Como podemos ver, os pontos de especificidade são calculados usando três colunas. A primeira coluna conta com os seletores ID, a segunda coluna conta os seletores de classe e a terceira coluna conta com os seletores de tipos.
O que é importante observar aqui é que o seletor de ID tem um peso de especificidade maior do que o seletor de classe e o seletor de classe possui um peso de especificidade maior do que o seletor de tipos.
Pontos de especificidade
Os pontos de especificidade são hifenizados intencionalmente, pois os seus valores não são calculados a partir de uma base de 10. Os seletores de classe não possuem um valor de ponto de 10, e os seletores de ID não possuem um valor de ponto de 100. Em vez disso, esses pontos devem ser lidos como 0 -1-0 e 1-0-0, respectivamente. Examinaremos mais de perto por que estes valores de ponto são divididos em hífen em breve, quando combinamos os seletores.
Quanto maior o peso de especificidade de um seletor, mais superioridade o seletor é dado quando ocorre um conflito de estilo. Por exemplo, se um elemento de parágrafo for selecionado usando um seletor de tipo num lugar e um seletor de ID noutro, o seletor de identificação terá precedência sobre o seletor de tipos, independentemente de onde o seletor de identificação aparecer na cascata.
HTML
<p id="food">...</p>
CSS
#food {
background: green;
}
p {
background: orange;
}
Aqui temos um elemento de parágrafo com um valor de atributo id de alimentos. Dentro do nosso CSS, esse parágrafo está selecionado por dois tipos diferentes de seletores: seletor de tipo e um seletor ID. Embora o seletor de tipo venha após o seletor ID na cascata, o seletor ID tem precedência sobre o seletor de tipos porque possui um peso de especificidade superior; consequentemente, o parágrafo aparecerá com um fundo verde.
Os pesos de especificidade de diferentes tipos de seletores são incrivelmente importantes para lembrar. Às vezes, os estilos podem não aparecer nos elementos conforme o previsto, e as chances são de que os pesos de especificação dos nossos seletores estão a quebrar a cascata, portanto os nossos estilos não estão a aparecer corretamente.
Compreender como funciona a cascata e a especificidade é um enorme obstáculo, e continuaremos a abordar esse tópico. Por enquanto, vejamos como ser um pouco mais particular e intencional com os nossos seletores, combinando-os. Tenha em mente que, ao combinarmos os seletores, também mudaremos a sua especificidade.
Combinando Seletores
Até agora, analisámos como usar diferentes tipos de seletores individualmente, mas também precisamos de saber como usar esses seletores juntos. Ao combinar os seletores, podemos ser mais específicos sobre qual elemento ou grupo de elementos gostaríamos de selecionar.
Por exemplo, digamos que queremos selecionar todos os elementos do parágrafo que residem dentro de um elemento com um valor de atributo de classe de hotdog e definir a cor de fundo para marrom. No entanto, se um desses parágrafos tiver o valor de atributo de classe da mostarda, queremos definir a cor de fundo para amarelo. O nosso HTML e CSS podem ser os seguintes:
HTML
<div class="hotdog">
<p>...</p>
<p>...</p>
<p class="mustard">...</p>
</div>
CSS
.hotdog p {
background: brown;
}
.hotdog p.mustard {
background: yellow;
}
Quando os seletores são combinados, eles devem ser lidos da direita para a esquerda. O seletor mais distante à direita, diretamente antes do suporte de curvatura de abertura, é conhecido como o seletor de teclas. O seletor de teclas identifica exatamente em qual elemento os estilos serão aplicados. Qualquer seletor à esquerda do seletor de teclas servirá como um pré-qualificador.
O primeiro seletor combinado acima, .hotdog p, inclui dois seletores: uma classe e um seletor de tipos. Estes dois seletores são separados por um único espaço. O seletor de chave é um seletor de tipo que alinha os elementos do parágrafo. E porque este seletor de tipo é pré-qualificado com um seletor de classe de hotdog, o seletor combinado completo selecionará apenas elementos de parágrafo que residam dentro de um elemento com um valor de atributo de classe de hotdog.
O segundo seletor acima, .hotdog p.mustard, inclui três seletores: dois seletores de classe e um seletor de tipo. A única diferença entre o segundo seletor e o primeiro seletor é a adição do seletor de classe de mostarda ao final do seletor de tipo de parágrafo. Como o novo seletor de classe, mostarda, cai completamente à direita do seletor combinado, é o seletor de teclas e todos os seletores individuais que se apresentam antes que são agora os pré-qualificadores.
Espaços dentro dos seletores
Dentro do seletor combinado anterior, .hotdog p.mustard, há um espaço entre o seletor de classe hotdog e o seletor de tipo de parágrafo, mas não entre o seletor de tipo de parágrafo e o seletor de classe de mostarda. O uso e omissão de espaços faz uma grande diferença em seletores.
Uma vez que não há um espaço entre o seletor de tipo de parágrafo e o seletor da classe de mostarda, o que significa que o seletor selecionará somente os elementos do parágrafo com a classe de mostarda. Se o seletor de tipo de parágrafo fosse removido e o seletor de classe de mostarda tivesse espaços em ambos os lados, selecionaria qualquer elemento com a classe de mostarda e não apenas parágrafos.
A melhor prática é não prefixar um seletor de classe com um seletor de tipos. Geralmente, queremos selecionar qualquer elemento com uma determinada classe, não apenas um tipo de elemento. E seguindo esta prática recomendada, o nosso novo seletor combinado seria melhor como .hotdog .mustard.
Ao ler o seletor combinado da direita para a esquerda, está segmentando parágrafos com um valor de atributo de classe de mostarda que residem dentro de um elemento com o valor de atributo de classe de hotdog.
Diferentes tipos de seletores podem ser combinados para segmentar qualquer elemento numa página. À medida que continuamos a escrever diferentes seletores combinados, veremos os seus poderes ganharem vida. Antes de fazer isso, vamos dar uma olhada em como a combinação de seletores muda o peso de especificação de um seletor.
Especificidade dentro dos seletores combinados
Quando os seletores são combinados, são combinados também os pesos de especificidade dos seletores individuais. Estes pesos de especificidade combinados podem ser calculados contando cada tipo de seletor diferente dentro de um seletor combinado.
Olhando para os nossos seletores combinados de antes, o primeiro seletor, .hotdog p, possui um seletor de classe e um seletor de tipos. Sabendo que o valor do ponto de um seletor de classe é 0-1-0 e o valor do ponto de um seletor de tipo é 0-0-1, o valor total do ponto combinado seria 0-1-1, encontrado somando cada tipo de seletor.
O segundo seletor, .hotdog p.mustard, tinha dois seletores de classe e um seletor de um tipo. Combinado, o seletor possui um valor de ponto de especificação de 0-2-1. O 0 na primeira coluna é para zero seletores de ID, o 2 na segunda coluna é para dois seletores de classe e o 1 na última coluna é para um seletor de um tipo.
Comparando os dois seletores, o segundo seletor, com as suas duas classes, tem um peso ponderado e um valor pontual visivelmente mais elevados. Como tal, terá precedência dentro da cascata. Se mudássemos a ordem desses seletores dentro da nossa folha de estilos, colocando o seletor mais ponderado acima do seletor de ponderação inferior como mostrado aqui, a aparência dos seus estilos não seria afetada devido ao peso de especificação de cada seletor.
.hotdog p.mustard {
background: yellow;
}
.hotdog p {
background: brown;
}
Em geral, queremos sempre observar os pesos de especificidade dos nossos seletores. Quanto maiores forem os nossos pesos de especificidade, mais provável se torna que a nossa cascata quebre.
Dispor em camadas estilos com várias classes
Uma maneira de manter os pesos de especificidade dos nossos seletores baixos é ser o mais modular possível, compartilhando estilos semelhantes de elemento para elemento. E uma maneira de ser o mais modular possível é a camada em diferentes estilos usando várias classes.
Elementos dentro de HTML podem ter mais de um valor de atributo de classe, desde que cada valor seja separado do espaço. Com isso, podemos colocar certos estilos em todos os elementos de um tipo enquanto colocamos outros estilos apenas em elementos específicos desse tipo.
Podemos amarrar estilos que queremos reutilizar continuamente para uma classe e camada em estilos adicionais de outra classe.
Vamos dar uma olhada nos botões, por exemplo. Digamos que queremos que todos os nossos botões tenham um tamanho de letra de 16 pixels, mas queremos que a cor de fundo dos nossos botões varie dependendo de onde os botões são usados. Podemos criar algumas classes e colocá-las num elemento conforme necessário para aplicar os estilos desejados.
HTML
<a class="btn btn-danger">...</a>
<a class="btn btn-success">...</a>
CSS
.btn {
font-size: 16px;
}
.btn-danger {
background: red;
}
.btn-success {
background: green;
}
Aqui podemos ver dois elementos de âncora, ambos com vários valores de atributo de classe. A primeira classe, btn, é usada para aplicar um tamanho de letra de 16 pixels a cada um dos elementos. Então, o primeiro elemento âncora usa uma classe adicional de btn-danger para aplicar uma cor de fundo vermelha enquanto o segundo elemento âncora usa uma classe adicional de btn-sucesso para aplicar uma cor de fundo verde. Os nossos estilos aqui são limpos e modulares.
Usando várias classes, podemos aplicar a camada de estilos como desejamos, mantendo o nosso código pequeno e a nossa especificidade baixa. Muito como entender a cascata e calcular a especificidade, esta é uma prática que levará tempo para absorver completamente, mas melhoraremos com cada lição.
Valores comuns da propriedade CSS
Utilizámos já um punhado de valores de propriedade CSS comuns, como os valores de cor da palavra-chave de vermelho e verde. Talvez não tenha pensado demais neles; tudo bem. Vamos tirar um tempo agora para examinar alguns valores de propriedade anteriormente utilizados, bem como para explorar alguns dos valores de propriedade mais comuns que em breve vamos utilizar.
Especificamente, vamos analisar valores de propriedades que se relacionam com medidas de cores e comprimento.
Cores
Todos os valores de cores dentro do CSS são definidos num espaço de cores sRGB (ou padrão vermelho, verde e azul). As cores dentro deste espaço são formadas pela mistura de canais de cores vermelho, verde e azul juntos, refletindo a maneira como televisores e monitores geram todas as cores diferentes que exibem. Ao misturar diferentes níveis de vermelho, verde e azul, podemos criar milhões de cores - e encontrar quase todas as cores que gostaríamos.
Atualmente, existem quatro formas principais de representar as cores sRGB no CSS: palavras-chave, notação hexadecimal e valores RGB e HSL.
Palavras-chave de cores
Os valores das cores das palavras-chave são nomes (como vermelho, verde ou azul) que mapeiam para uma determinada cor. Esses nomes de palavras-chave e as suas cores correspondentes são determinados pela especificação CSS. As cores mais comuns, juntamente com algumas raridades, possuem nomes de palavras-chave.
Uma lista completa destes nomes de palavras-chave pode ser encontrada dentro da especificação CSS.
Aqui estamosa aplicar um fundo marrom (castanho) para qualquer elemento com o valor do atributo da classe da tarefa e um fundo amarelo para qualquer elemento com o valor do atributo da classe de contagem.
.task {
background: maroon;
}
.count {
background: yellow;
}
Embora os valores das cores das palavras-chave sejam de natureza simples, eles oferecem opções limitadas e, portanto, não são as opções de valor de cor mais populares.
Cores Hexadecimais
Os valores de cor hexadecimais consistem numa libra, ou hash, #, seguido por uma figura de três ou seis caracteres. As figuras usam os números de 0 a 9 e as letras de a a f, maiúsculas e minúsculas. Esses valores mapeiam os canais de cores vermelho, verde e azul.
Na notação de seis caracteres, os dois primeiros caracteres representam o canal vermelho, os caracteres terceiro e quarto representam o canal verde e os dois últimos representam o canal azul. Na notação de três caracteres, o primeiro caractere representa o canal vermelho, o segundo caractere representa o canal verde e o último caractere representa o canal azul.
Se na notação de seis caracteres os dois primeiros caracteres são um par correspondente, o terceiro e quarto são um par correspondente e os dois últimos são um par correspondente, a figura de seis caracteres pode ser encurtada numa figura de três caracteres. Para fazer isso, o caráter repetido de cada par deve ser usado uma vez. Por exemplo, uma sombra de laranja representada pela cor hexadecimal # ff6600 também pode ser escrita como # f60.
Os pares de caracteres são obtidos convertendo 0 a 255 num formato base-16, ou hexadecimal. A matemática é um pouco complicada - e digna do seu próprio livro -, mas ajuda a saber que 0 é igual a preto e f é igual a branco.
Os Milhões de Cores Hexadecimais
Existem milhões de cores hexadecimais, mais de 16,7 milhões para ser exato.
Existem 16 opções para cada personagem numa cor hexadecimal,de 0 a 9 e de a através de f. Com os caracteres agrupados em pares, existem 256 opções de cores por par (16 multiplicadas por 16 ou 16 quadrados).
E com três grupos de 256 opções de cores, temos um total de mais de 16,7 milhões de cores (256 multiplicados por 256 multiplicados por 256 ou 256 cubos).
Para criar as mesmas cores de fundo marrom e amarelo de antes, podemos substituir os valores de cor da palavra-chave por valores de cores hexadecimais, como vemos aqui.
.task {
background: #800000;
}
.count {
background: #ff0;
}
Os valores de cor hexadecimais foram durante algum tempo e tornaram-se bastante populares porque oferecem uma grande quantidade de opções de cores. No entanto, eles são um pouco difíceis de trabalhar, especialmente se não está familiarizado com eles. Felizmente, a Adobe criou o Adobe Kuler, uma aplicação gratuita que fornece uma roda de cores para nos ajudar a encontrar qualquer cor que desejamos e o seu valor hexadecimal correspondente.
Além disso, a maioria das aplicações de edição de imagem, como o Adobe Photoshop, fornecem a capacidade de localizar valores de cores hexadecimais.
Cores RGB e RGB
Os valores de cor RGB são indicados usando a função rgb (), que significa vermelho, verde e azul. A função aceita três valores separados por vírgulas, cada um dos quais é um número inteiro de 0 a 255. Um valor de 0 seria puro preto; um valor de 255 seria puro branco.
Como podemos esperar, o primeiro valor dentro da função rgb () representa o canal vermelho, o segundo valor representa o canal verde e o terceiro valor representa o canal azul.
Se fossemos recriar a sombra de laranja de antes como um valor de cor RGB, seria representado como rgb (255, 102, 0).
Além disso, usando as mesmas cores de fundo marrom e amarelo de antes, podemos substituir a palavra-chave ou valores de cores hexadecimais por valores de cores RGB.
.task {
background: rgb(128, 0, 0);
}
.count {
background: rgb(255, 255, 0);
}
Os valores de cor RGB também podem incluir um canal alfa, ou transparência, usando a função rgba (). A função rgba () requer um quarto valor, que deve ser um número entre 0 e 1, incluindo decimais. Um valor de 0 cria uma cor totalmente transparente, o que significa que seria invisível, e um valor de 1 cria uma cor completamente opaca. Qualquer valor decimal entre 0 e 1 criaria uma cor semi-transparente.
Se quisermos que a nossa sombra de laranja apareça 50% opaca, deviamos utilizar um valor de cor RGBa de rgba (255, 102, 0, .5).
Também podemos alterar a opacidade das nossas cores de fundo marrom e amarelo. O código a seguir define a cor de fundo marrom até 25% opaco e deixa a cor de fundo amarelo 100% opaca.
.task {
background: rgba(128, 0, 0, .25);
}
.count {
background: rgba(255, 255, 0, 1);
}
Os valores de cores RGB estão a tornar-se mais populares, especialmente devido à capacidade de criar cores semi-transparentes com a utilização do RGBa.
Cores HSL e HSLa
Os valores de cores HSL são indicados ao utilizar a função hsl (), que significa tonalidade, saturação e leveza. Dentro dos parênteses, a função aceita três valores separados por vírgulas, bem como rgb ().
O primeiro valor, a tonalidade, é um número sem unidade de 0 a 360. Os números 0 a 360 representam a roda de cores e o valor identifica o grau de uma cor na roda de cores.
O segundo e terceiro valores, a saturação e a leveza, são valores percentuais de 0 a 100%. O valor de saturação identifica como está saturado com a cor da tonalidade, com 0 em escala de cinza e 100% totalmente saturado. A leveza identifica quão escuro ou leve o valor da tonalidade, com 0 sendo completamente preto e 100% sendo completamente branco.
Voltando à nossa sombra de laranja, como um valor de cor HSL, seria escrito como hsl (24, 100%, 50%).
As cores de fundo marrom e amarelo também podem ser indicadas como valores de cores HSL, como vou mostrar aqui.
.task {
background: hsl(0, 100%, 25%);
}
.count {
background: hsl(60, 100%, 50%);
}
Os valores de cores HSL, como RGBa, também podem incluir um canal alfa ou de transparência com o uso da função hsla (). O comportamento do canal alfa é exatamente como a função rgba (). Um quarto valor entre 0 e 1, incluindo decimais, deve ser adicionado à função para identificar o grau de opacidade.
A sombra de laranja como uma cor HSLa definida como 50% opaca seria representada como hsla (24, 100%, 50%, .5).
A mesma cor de fundo marrom opaco de 25% e a cor de fundo amarelo opaco de 100% de antes pareciam os seguintes valores de cor HSLa.
.task {
background: hsla(0, 100%, 25%, .25);
}
.count {
background: hsla(60, 100%, 50%, 1);
}
O valor da cor HSL é o mais novo valor de cor disponível no CSS. Devido à sua idade e suporte dentro dos navegadores, no entanto, não é tão amplamente utilizado como os outros valores.
Por enquanto, os valores de cor hexadecimais permanecem os mais populares, pois são amplamente suportados; embora seja necessário um canal alfa para a transparência, os valores de cores RGBa são os preferidos. Essas preferências podem mudar no futuro, mas, por enquanto, vamos utilizar valores de cores hexadecimais e RGBa.
Comprimentos
Os valores de comprimento dentro do CSS são semelhantes às cores, na medida em que existem vários tipos de valores diferentes para o comprimento, todos com objetivos distintos. Os valores de comprimento vêm em duas formas diferentes, absolutas e relativas, cada uma das quais usa diferentes unidades de medida.
Vamos manter os valores mais comuns e mais diretos no momento, pois valores mais complexos proporcionam muito mais poder do que precisamos por enquanto.
Comprimentos absolutos
Os valores de comprimento absoluto são os valores de comprimento mais simples, uma vez que são fixados numa medida física, como polegadas, centímetros ou milímetros. A unidade de medida absoluta mais popular é conhecida como o pixel e é representada pela notação de unidade px.
Píxeis
O pixel é igual a 1/96 de polegada; portanto, há 96 píxeis numa polegada. A medida exata de um pixel, no entanto, pode variar ligeiramente entre dispositivos de visualização de alta densidade e baixa densidade.
Os píxeis existem há bastante tempo e são comumente usados com um punhado de propriedades diferentes. O código aqui está a utilizar píxeis para definir o tamanho da fonte de todos os parágrafos para 14 píxeis.
p {
font-size: 14px;
}
Com a mudança da paisagem dos dispositivos de visualização e os seus diferentes tamanhos de tela, os píxeis perderam a popularidade. Como uma unidade de medida absoluta, eles não fornecem muita flexibilidade. Os píxeis são, no entanto, confiáveis e ótimos para começar. Nós vamos apoiar um pouco, pois estamos a aprender as cordas de HTML e CSS.
Comprimentos relativos
Além dos valores absolutos do comprimento, também há valores de comprimento relativos. Os valores de comprimento relativos são um pouco mais complicados, uma vez que não são unidades de medidas fixas; eles dependem do comprimento de outra medida.
Percentagens
As percentagens, representadas pela notação de% de unidade, são um dos valores relativos mais populares. Os comprimentos percentuais são definidos em relação ao comprimento de outro objeto. Por exemplo, para definir a largura de um elemento para 50%, devemos conhecer a largura do seu elemento pai, o elemento que está junto e, em seguida, identificar 50% da largura do elemento pai.
.col {
width: 50%;
}
Aqui estabelecemos a largura do elemento com o valor de atributo de classe de col para 50%. Que 50% serão calculados em relação à largura do elemento pai.
As percentagens são extremamente úteis para definir a altura e a largura dos elementos e criar o layout de uma página web. Vamos confiar neles frequentemente para nos ajudar nessas áreas.
Em
A unidade em é também um valor relativo muito popular. A unidade em é representada pela notação da unidade em, e o seu comprimento é calculado com base no tamanho de fonte de um elemento.
Uma única unidade em é equivalente ao tamanho de fonte de um elemento. Assim, por exemplo, se um elemento tiver um tamanho de fonte de 14 píxeis e uma largura definida como 5em, a largura seria igual a 70 píxeis (14 píxeis multiplicados por 5).
.banner {
font-size: 14px;
width: 5em;
}
Quando um tamanho de fonte não é explicitamente indicado para um elemento, a unidade em será relativa ao tamanho da fonte do elemento pai mais próximo com um tamanho de fonte declarado.
A unidade em é freqüentemente utilizada para texto de texto, incluindo tamanhos de fonte, bem como espaçamento em torno de texto, incluindo margens e preenchimentos. Vamos explorar o texto um pouco mais na Lição 6, "Trabalhando com Tipografia".
Existem unidades de medida muito mais absolutas e relativas do que as mencionadas aqui. No entanto, estas unidades de três píxeis, percentagens e em são as mais populares e as que vamos usar principalmente.
Resumo
Infelizmente, o nosso site da Conferência de Estilos está inactivo nesta lição. Concentrámos-nos nos fundamentos do CSS, abrangendo exatamente o que funciona e alguns valores comuns que certamente usaremos.
Para recapitular brevemente, nesta lição discutimos o seguinte:
Como as folhas de estilo caiem de cima para baixo de um arquivo
Qual a especificidade e como podemos calcular
Como combinar seletores para direcionar elementos específicos ou grupos de elementos
Como usar várias classes em um único elemento para camada em estilos diferentes para um código mais modular
Os diferentes valores de cores disponíveis para usar dentro de CSS, incluindo valores de palavra-chave, hexadecimal, RGB e HSL
Os diferentes valores de comprimento disponíveis para usar dentro de CSS, incluindo pixels, porcentagens e unidades em.
Ainda temos muito a descobrir, mas os fundamentos estão a começar a cair no lugar. Dentro das próximas lições, continuaremos a mergulhar no CSS, e o nosso site realmente vai começar a ganhar alguma forma.