Quais são os objetivos de aprendizagem da Unidade 2? Confira.

• Compreender os fundamentos básicos da linguagem de estilização CSS;

• Estilizar de maneira adequada páginas Web, utilizando os recursos da linguagem CSS;

• Construir páginas Web em blocos, utilizando os conceitos de grid e flex;

• Estilizar listas, formulários, tabelas e demais tags HTML, com a linguagem CSS.

O que é CSS, para que serve e onde é utilizado? A linguagem de marcação de hipertexto HTML é usada para descrever o conteúdo de uma página Web, e as folhas de estilo em cascata (eng. Cascading Style Sheets - CSS) afetam o aspecto dessas páginas (cores, fontes, imagens de fundo, espaçamento entre linhas, recuos, bordas, efeitos e até mesmo animação de elementos). 

Com CSS, você pode fazer alterações em todas as páginas de seu site enquanto edita apenas um único arquivo.

Em seu trabalho, você terá que resolver o problema de desenvolver páginas de sites para vários tamanhos de tela, desde pequenos smartphones até monitores widescreen e TVs. Com o crescimento da tecnologia portátil e seu uso ativo no dia a dia, a necessidade de desenvolver páginas universais adaptadas a diversos dispositivos e resoluções se tornou mais relevante do que nunca.

Analisaremos conceitos como Web design responsivo e Web design adaptativo e consideraremos suas diferenças e vantagens e situações em que é necessário utilizar essas técnicas na prática. Além disso, aprenderemos o que são consultas de mídia, como e por que você precisa usá-las em seus estilos.

Que tal se relacionar com os colegas por meio de um fórum? Esse recurso favorece o diálogo, a troca de opiniões e de saberes, estimulando o debate e a reflexão em torno de temas, situações, problemas ou ideias encontradas em nossa vida de estudos e pessoal.

Vamos à indicação de documentários e vídeos? Eles também servem para propósitos didáticos, complementando a educação formal.

O Dicionário do Programador é o quadro semanal do Canal Código Fonte TV, por meio do qual você poderá aprender mais sobre termos, tecnologias ou palavras do maravilhoso mundo da programação. Ele é uma ideia antiga, que tomou vida graças à grande ajuda da HostGator Brasil. O tema da vez é: Cascading Style Sheets (CSS).

Por fim, lembre-se de reservar uma hora do seu dia para os estudos (por meio da leitura do Livro Didático), para o desenvolvimento das Autoatividades e para buscar conhecimento por meio de outras referências bibliográficas. Restando dúvidas, entre em contato com a tutoria interna e os professores disponíveis nos diversos canais de comunicação disponibilizados.

Vamos prosseguir nossos estudos na Unidade 3?

Siga em frente!

Tópico 1 - Introdução à Linguagem de Marcação CSS

2 INTRODUÇÃO AO CSS

O que é CSS, para que serve e onde é utilizado? A linguagem de marcação de hipertexto HTML é usada para descrever o conteúdo de uma página Web, e as folhas de estilo em cascata – eng. Cascading Style Sheets (CSS) – que afetam o aspecto dessas páginas (cores, fontes, imagens de fundo, espaçamento entre linhas, recuos, bordas, efeitos e até mesmo animação de elementos). 

Com CSS, você pode fazer alterações em todas as páginas de seu site enquanto edita apenas um único arquivo

2.1 O QUE É ESTILO

Estilo em CSS define a aparência de qualquer elemento na página. Em outras palavras, trata-se de um comando que informa ao navegador como ele precisa formatar os elementos e, em seguida, exibir o resultado da alteração na página.

A definição de estilo consiste em dois elementos:

1. O elemento de uma página da Web, que é formatado diretamente pelo navegador, chamado de seletor.

2. Os comandos de formatação, que são chamados de bloco de declaração (descrição).

Os blocos de anúncios nos dão a capacidade de criar elementos exclusivos na página, estilizando-os da maneira que quisermos, usando muitas propriedades CSS diferentes, que tentaremos cobrir e aprender o máximo possível.

O seletor h1 informa ao navegador que todas as tags <h1> devem ser formatadas usando as declarações (descriptions) especificadas no bloco de declaração (description) subsequente. Esse seletor é chamado de "seletor de tipo". 

O bloco de declaração de estilo (descrição) é o código que segue o seletor e que contém os comandos de formatação aplicados a esse seletor. Observe que qualquer bloco de declaração começa com uma chave de abertura e termina com uma chave de fechamento. A ausência de chave de abertura ou fechamento resulta erros, pelos quais os estilos não serão aplicados aos elementos especificados no seletor.

A declaração de propriedade (descrição) se refere a cada declaração (descrição), que se divide em duas partes: uma propriedade CSS e um valor para essa propriedade. Você pode fazer uma analogia com atributos e seus valores em HTML. Observe que você deve separar a propriedade de seu valor com dois pontos. Cada declaração (descrição) deve terminar com um ponto e vírgula, mesmo que seja a única, ou seja, a última do bloco de declaração. A maioria dos erros ocorre porque o ponto e vírgula está faltando, o que faz com que essa descrição (a propriedade com seu valor) e as descrições subsequentes no bloco de declaração não sejam aplicadas, pois o navegador as considera uma descrição para si (comando), porque a descrição não terminou a tempo.

A propriedade consiste em uma palavra ou várias palavras escritas com um hífen. A maioria das propriedades têm nomes fáceis de entender, como color (cor do texto), background-color (cor do plano de fundo), text-align (alinhamento horizontal do texto) e assim por diante. Já encontramos essas propriedades no HTML5.

Quanto ao valor, dependendo da propriedade utilizada, os valores podem definir várias características para um elemento, como cor, largura, altura, posição e afins.

Ao aprender CSS por conveniência, para melhor perceber e compreender as folhas de estilo, vamos quebrar as declarações em linhas (qualquer navegador é fiel a isso, pois ignora espaços e hífens).

Observe que, se, mais tarde, você usar arquivos de folha de estilo grandes e quiser melhorar o desempenho do seu site, precisará preparar essas folhas de estilo de uma maneira específica. Para fazer isso, você precisa remover todas as informações desnecessárias: espaços, hífens e comentários do código. Para esses fins, existem vários otimizadores que minimizam o código. Só não se esqueça de deixar a opção humana para você.

2.2 USANDO FOLHAS DE ESTILO

As folhas de estilo se dividem em dois tipos:

• interno (as informações de estilo estão localizadas dentro da própria página da Web);

• externo (as informações de estilo estão localizadas em um arquivo separado vinculado à página da Web). 

Além disso, as folhas de estilo externas permitem que as páginas da Web carreguem mais rapidamente, devido ao fato de que os navegadores armazenam em cache (salva) a folha de estilo utilizada; e, ao acessar outra página no mesmo site, utilizam a mesma folha de estilo externa, mas já armazenada localmente no computador do usuário.

Nas tarefas práticas, você tentará adicionar folhas de estilo externas e internas por conta própria.

Uma folha de estilo interna, diferentemente de uma externa, é colocada diretamente dentro de uma página da Web. Para fazer isso, colocamos os estilos necessários dentro de um par de tags <style> , que informam ao navegador que ele contém código CSS. A tag <style>, por sua vez, deve estar dentro da tag <head>. Como regra, a tag <style> é colocada antes da tag de fechamento </head> .

As versões anteriores do HTML (até a versão 5) exigem um atributo type adicional na tag de abertura <style> , que especifica o tipo MIME do conteúdo usado (um arquivo de folha de estilo de texto). 

Em alguns casos, é possível adicionar estilos diretamente a cada tag HTML específica, sem usar uma folha de estilos externa ou interna (usamos CSS inline ao aprender HTML5). 

2.3 VINCULANDO FOLHAS DE ESTILO AO CÓDIGO HTML

O método que mais se utiliza para adicionar (vincular) uma folha de estilo externa a um documento é o uso da tag <link>. O elemento <link> define um link entre um documento e um recurso externo.

Observe que o elemento <link> é sempre colocado dentro do elemento <head> (geralmente antes de sua tag de fechamento), enquanto pode ser usado (contém folhas de estilo diferentes). O elemento não requer uma tag de fechamento e contém apenas atributos dentro de si.

A tag HTML <link> tem a seguinte sintaxe: 

Para todos os tipos de documentos em HTML5, apenas dois atributos são obrigatórios:

1. rel = "stylesheet": define a relação entre o documento atual e o documento vinculado (no nosso caso, a folha de estilo);

2. href: especifica o URL para o local do arquivo externo. O endereço pode ser relativo ou absoluto.

2.3.1 CONECTANDO USANDO A REGRA @import

A regra @import CSS é usada para importar o conteúdo de um arquivo CSS para a folha de estilo atual. Essa regra deve preceder todos os outros tipos de regras, com exceção da regra @charset, que especifica a codificação de caracteres usada na folha de estilo.

Uma folha de estilo externa pode ser vinculada a uma página da Web usando uma tag HTML <link> ou usando a regra interna @import em CSS, que basicamente faz a mesma coisa. Ambas as opções permitem anexar folhas de estilo a uma página da Web.

A principal diferença com a regra @import é que você pode anexar uma folha de estilo externa a outra, usando essa regra.

2.3.2 IMPORTANDO PARA UMA FOLHA DE ESTILO EXTERNA

Para anexar um arquivo de folha de estilo externo a outro, você precisa declarar uma regra @import dentro do arquivo ao qual o conteúdo é adicionado e especificar o caminho da URL para esse arquivo. Para definir o caminho, você deve especificar url("path/to/file") após a regra @import. Nesse caso, o caminho indicado entre parênteses pode ser absoluto ou relativo. 

Assim como você pode trabalhar com várias tags <link>, também é possível colocar várias regras @import para incluir quantas folhas de estilo externas forem necessárias. 

2.4 SELETORES 

Se você estiver familiarizado com tags HTML, será fácil definir seletores de tipo em estilos, pois eles têm os mesmos nomes com elementos formatados, por exemplo:

• p: diz ao navegador para formatar todas as tags HTML <p> (parágrafo);

• table: diz ao navegador para formatar todas as tags HTML <table> (tabela);

• li: diz ao navegador para formatar todas as tags HTML <li> (elemento de lista).

Vejamos um exemplo em que estilizamos todos os títulos de segundo nível (<h2>) usando um seletor de tipo.

Veja o resultado do código abaixo. 

Como você deve ter notado, o seletor de tipo permite que você estilize todos os elementos de um tipo semelhante de uma só vez. Mas e se precisarmos estilizar algum elemento do mesmo tipo de maneira diferente dos outros? Nesse caso, o seletor de tipo não nos servirá mais e teremos que usar o seletor de classe.

O seletor de classe é um dos seletores de CSS mais comuns e solicitados, que usaremos constantemente em estudos adicionais de CSS. Assim, queremos que um dos elementos pareça diferente dos outros. Para fazer isso, precisamos criar um seletor, dando a ele um nome que precisamos criar por conta própria.

Uma vez que criamos nossa classe na folha de estilo, precisamos aplicá-la ao elemento de interesse ou aos elementos que queremos estilizar. Para especificar uma classe para um determinado elemento, precisamos adicionar um atributo global de classe HTML a esse elemento com o valor de nossa classe, mas sem o ponto.

Veja o resultado do código abaixo. 

Preste atenção às seguintes regras que devem ser observadas ao trabalhar com seletores de classe:

• Ao contrário dos seletores de tipo, todos os nomes de seletores de classe devem começar com um ponto (devido a isso, os navegadores encontram esses seletores na folha de estilo). O ponto é necessário apenas no nome do seletor da folha de estilo (não é definido no valor do atributo global da classe HTML, tenha cuidado porque isso causa muitos erros).

• Use apenas caracteres alfabéticos (AZ, az), números, hífens, sublinhados.

• O título após o ponto deve sempre começar com um caractere (incorreto: .50cent , .-vottakvot).

• Faça distinção entre maiúsculas e minúsculas ao nomear classes de estilo, porque eles são sensíveis a isso e muito vulneráveis ​​(.vottakvot e .VotTakVot são classes diferentes).

Para isso, colocaremos essa palavra dentro do elemento <span> e atribuiremos uma classe específica a esse elemento, que descreveremos na folha de estilo interna.

2.4.1 SELETOR DE ID E SELETOR DE CLASSE

O principal objetivo do seletor de id é selecionar um elemento com um id específico. Primeiro, você precisa criar um identificador, atribuindo um nome a ele, que precisamos criar por conta própria.

Uma vez que criamos nosso identificador na folha de estilo, precisamos aplicá-lo ao elemento de interesse que queremos estilizar. Para especificar um identificador para um elemento, precisamos adicionar um atributo global de id HTML a esse elemento com o valor do nosso identificador, mas sem a treliça. 

Preste atenção às seguintes regras que devem ser observadas ao trabalhar com seletores de id:

• O valor do identificador deve ser único na página. Colocar vários identificadores com o mesmo nome na página é considerado um erro (a seleção será interrompida no primeiro identificador).

• Todos os nomes de seletores de id devem começar com um sinal de sustenido (que ajuda os navegadores a encontrar esses seletores na folha de estilo). A marca de hash é necessária apenas no nome do seletor de folha de estilo (não é definido no valor do atributo global HTML id , tenha cuidado, pois há muitos erros).

• Use apenas caracteres alfabéticos (AZ, az), números, hífens, sublinhados.

• O nome após a marca de hash deve sempre começar com um símbolo (incorreto: #50cent , #-vottakvot).

• Faça distinção entre maiúsculas e minúsculas ao nomear seletores de id. Eles são sensíveis a isso ( #vottakvot e #VotTakVot são identificadores diferentes).

Agora vamos juntar tudo em um exemplo e ver o resultado.

Veja o resultado do código abaixo. 

Atualmente, os seletores de id são usados ​​principalmente em páginas da Web, com a finalidade de manipular dinamicamente elementos, usando a linguagem de programação JavaScript.

Em CSS, é permitido definir um único estilo não apenas para um seletor, mas também para um grupo de seletores. O grupo pode incluir seletores de tipo, seletores de classe e seletores de id que consideramos. Ao listar qualquer seletor (mesmo aqueles que abordaremos posteriormente no tutorial), é imperativo separá-los com uma vírgula. Você verá o porquê mais tarde. Por exemplo:

Com o primeiro seletor de grupo, especificamos os títulos <h1> e <h2>. Os elementos com o teste de classe e o elemento com o teste de id terão uma cor de fundo verde.

Com o segundo seletor de grupo, especificamos que, além do plano de fundo, os elementos com classes test e um elemento com id test receberão a cor de texto azul.

2.4.2 SELETOR UNIVERSAL

O seletor * permite selecionar todos os elementos dentro do documento (seletor universal). Vejamos um exemplo de uso:

Nesse exemplo, usando o seletor universal, especificamos que todos os elementos da página receberão uma determinada cor de texto e terão uma fonte em itálico.

2.5 HERANÇA EM CSS

O principal objetivo agora será explicar o mecanismo de herança de estilo e quais são suas principais vantagens, além de resolver algumas questões que não são óbvias a esse respeito. Muitas vezes, se os pais da criança são excêntricos, ele não fica atrás deles; ou, como dizem: "a maçã não cai longe da árvore". Quanto à herança em CSS, ela nada mais é do que um método de replicar várias propriedades CSS relacionadas a um elemento de página para elementos aninhados (descendentes).

Vamos criar um estilo para o elemento <body> que mudará a cor e o tipo de fonte.

Nesse exemplo, para o elemento <body>, definimos a cor do texto como verde e o tipo de fonte como Arial. As propriedades CSS color e font-family são herdadas, o que significa que essas propriedades também serão aplicadas a elementos aninhados dentro do <body> (para todos os seus descendentes). 

No exemplo acima, todos os elementos localizados dentro do <body> (seus descendentes) herdaram suas propriedades. O mecanismo de herança possui um sistema multinível e se estende não apenas aos descendentes diretos do elemento, mas também é transferido para todos os elementos aninhados. Em nosso exemplo, esse elemento inclui o elemento <strong>, que, como outros elementos, herdou todas as propriedades do conjunto de estilos para o elemento <body>. Este é o principal ponto de herança, que é usado em CSS.

O mecanismo de herança reduz significativamente o código CSS, por exemplo, se nosso elemento <strong> recebesse a cor padrão – preto –, teríamos que definir separadamente um estilo para esse elemento que determinaria a cor e o tipo de fonte, o que aumenta significativamente os custos trabalhistas para desenvolver uma página específica.

Acompanhe algumas restrições.

• As propriedades que afetam o posicionamento dos elementos na página, as propriedades responsáveis ​​pelas margens externas e internas do elemento e as propriedades responsáveis ​​pelas bordas dos elementos não são herdadas. Todas essas propriedades serão discutidas em detalhes posteriormente no tutorial. Novamente, você sempre pode verificar se uma propriedade específica em um site é herdada na referência de CSS.

• Muitas propriedades não são herdadas por motivos objetivos. Imagine que criamos uma borda para o elemento pai e, depois disso, todos os descendentes, segundo essa lógica, deveriam herdar essa propriedade, o que pareceria absurdo e, ao contrário , aumentaria o trabalho de criação de estilos (seu cancelamento ou redefinição).

Acompanhe algumas nuances.

• Todos os navegadores modernos usam seus próprios estilos CSS embutidos para elementos HTML. Nesses estilos, se necessário, você pode ver um elemento específico no site na referência HTML (valor CSS padrão).

Agora, no exemplo do elemento <a> que define um hiperlink, consideraremos porquê alguns elementos não herdam algumas propriedades de seu ancestral. 

Veja o resultado do código a seguir: 

Nesse exemplo, para o elemento <body>, definimos os seguintes estilos: cor de texto verde e sem decoração de texto (removido o sublinhado da parte inferior). Observe o elemento <a> na imagem, ele não mudou completamente. Vamos ver a seguir porque isso acontece. Quando ocorre um conflito, o mais forte vence. E em CSS, esse é geralmente um estilo explicitamente definido. Vamos abrir as ferramentas do desenvolvedor (para o Chrome é F12). 

Abaixo, estão as propriedades que foram herdadas (Inherited from) pelo elemento <a> de <body>. Como você pode ver, o navegador descartou todo o estilo do elemento <body>, pois o elemento <a> tem o estilo que define a cor do texto explicitamente (estilo inline por padrão). A propriedade que define a decoração do texto não é herdada e é exibida com pouca transparência nas ferramentas do desenvolvedor. Porém, mesmo que fosse herdado, não se aplicaria por analogia com a cor do teste (o elemento <a> também define explicitamente essa propriedade).

Tais conflitos entre estilos são sempre resolvidos pelo navegador, uma vez que as regras em cascatas definem por quais regras ele determina a quem dá prioridade e como deve se comportar em cada caso. 

3 FONTES, CORES E PLANOS DE FUNDO

Para atrair a atenção dos visitantes do seu site, você pode dar uma aparência atraente ao conteúdo de texto das páginas. Para esses propósitos, o CSS possui um grande número de propriedades de formatação diferentes: fonte do texto, cor, tamanho, espaçamento entre linhas e assim por diante. Em primeiro lugar, vamos ver os métodos para trabalhar com fontes existentes (fontes web seguras).

3.1 FONTES SEGURAS DA WEB 

O estilo CSS usa a propriedade font-family para selecionar o tipo de fonte, que especifica a fonte em que você está interessado. Digamos que você queira usar a fonte Courier para parágrafos em uma página. Nesse caso, você precisará criar, por exemplo, um seletor de tipo e usar a propriedade font-family. 

A principal característica desse método é que ele funcionará desde que o visitante tenha uma fonte semelhante instalada, caso contrário, a página será exibida usando a fonte “embutida” no navegador. 

Recomenda-se que a família de fontes (generic-family) seja listada por último na lista de fontes. Se, por algum motivo, o usuário não tiver todas as fontes que você listou, nesse caso, a página será exibida pelo menos com uma fonte da mesma família, e não com uma fonte "embutida" no navegador.

Vejamos o seguinte exemplo.

Veja o resultado do código abaixo. 

Nesse exemplo, para o primeiro parágrafo, o navegador verificará se o usuário possui a fonte principal disponível, caso contrário, instalará uma fonte da família serif (serif). Para o segundo parágrafo, foi utilizada a fonte monoespaçada Courier e, como alternativa, uma família de fontes monoespaçadas (as letras têm a mesma largura). 

3.2 ESTILIZAÇÃO DE CORES EM CSS

Vamos checar quais valores podem ser usados ​​com essa propriedade separadamente e dar uma olhada parcial em exemplos de como trabalhar com a cor de fundo. Os valores de cor hexadecimais são suportados por todos os principais navegadores. Uma cor usando um sistema hexadecimal é especificada usando a seguinte sintaxe:

O valor, na verdade, contém três números hexadecimais (RR para vermelho, GG para verde, BB para azul). Cada valor (RR , GG e BB) deve estar entre 00 e FF. No sistema hexadecimal, a contagem é a seguinte: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Por exemplo, o valor #0000FF corresponde ao azul, porque o componente BB está definido para o valor mais alto (FF), e os outros são definidos para o valor mais baixo (00). O valor, na verdade, contém três números hexadecimais, o valor da cor é obtido pela mistura dos três componentes acima.

Os valores de cores RGB são suportados em todos os principais navegadores e são especificados na seguinte ordem: R (vermelho), G (verde), B (azul). Para especificar um valor no sistema RGB, você deve usar a seguinte sintaxe. 

Cada parâmetro especifica a intensidade da cor e pode ser um número inteiro de 0 a 255 . Por exemplo, o valor rgb(0,0,255) é exibido como azul, porque azul está definido para seu valor máximo (255) e vermelho e verde estão definidos para 0 (valor mínimo). 

É permitido indicar valores de cores RGB na forma de porcentagens. Por exemplo, para definir a cor laranja para todos os títulos de segundo nível usando o sistema RGB e porcentagens, você usaria os seguintes valores de parâmetro. 

O próximo sistema de cores usado no CSS é o RGBA, que usa um valor alfa em sua sintaxe e que determina a transparência de um pixel específico. RGBA é uma especificação de cores mais moderna e possui a seguinte sintaxe: 

Em que:

• R significa vermelho (vermelho);

• G significa verde (verde);

• B significa azul (azul);

• A significa alpha (o grau de mesclagem com o plano de fundo).

Esse método difere do RGB à medida que adiciona um canal alfa que permite definir o nível de transparência com valores de 0 a 1.

Em que:

• 0 - a cor é invisível;

• 1 - a cor é opaca.

4 OPÇÕES DE TEXTO

Discutiremos, agora, como o texto é formatado em CSS, técnicas de alinhamento de texto serão consideradas, como usar CSS para fazer uma linha vermelha, definir espaçamento entre linhas e entre palavras, como decorar texto, converter texto para maiúsculas ou minúsculas e como criar uma fonte capital.

4.1 ALINHAMENTO DE TEXTO

Graças à propriedade CSS text-align, você pode centralizar os títulos do seu documento, posicionar o conteúdo do texto em relação às bordas esquerda ou direita, ou talvez esteja preparando páginas para impressão e precise justificá-las em largura, semelhante a como o texto é colocados em publicações impressas.

Para definir o alinhamento do texto, use as seguintes palavras-chave com a propriedade text-align. 

4.2 CONFIGURANDO O ESPAÇAMENTO ENTRE LINHAS

Ao trabalhar com texto, muitas vezes, torna-se necessário colocar as linhas de um parágrafo mais próximas umas das outras, ou vice-versa, para esticá-las. A distância entre as linhas de base de linhas adjacentes é chamada de espaçamento entre linhas ou entrelinhas.

Em CSS, a propriedade line-height é responsável pelo espaçamento entre linhas. Quanto maior o valor dessa propriedade, maior será o intervalo entre as linhas. 

Geralmente, em todos os navegadores modernos, a altura da linha padrão é 120%.

4.3 DECORAÇÃO DE TEXTO

A propriedade CSS text-decoration nos permite adicionar decorações ao texto, como:

• sublinhado;

• tachado;

• linha acima do texto.

No entanto, um dos usos mais comuns dessa propriedade é substituir a decoração, o que requer o uso da palavra-chave none com a propriedade text-decoration: 

Nesse exemplo, removemos a decoração (sublinhado) de todos os hiperlinks. A lista completa de palavras-chave para a propriedade text-decoration está listada neste quadro a seguir. 

4.4 SOMBRA DE TEXTO EM CSS

Agora, aprenderemos como adicionar sombra e várias sombras às informações de texto. No CSS3, essa é a propriedade text-shadow, que agora é amplamente usada em páginas da Web.

A sintaxe para essa propriedade é:

Os valores obrigatórios incluem apenas h-shadow (sombra horizontal) e "v-shadow (sombra vertical). O valor do raio de desfoque é opcional, assim como a cor da sombra (preta por padrão).

Para melhor compreensão, essas informações são coletadas em um quadro, a seguir.

É permitido adicionar várias sombras de texto a um elemento. Para isso, você precisa incluir um valor adicional da sombra ou sombras, separando-as com vírgulas. Várias sombras são aplicadas no eixo z da frente para trás (com a primeira sombra dada no topo).

Um exemplo de um bloco de declaração para uma sombra múltipla é:

Tópico 2 - Bloco com CSS

2 RESPONSIVIDADE

Em seu trabalho, você terá que resolver o problema de desenvolver páginas de sites para vários tamanhos de tela, desde pequenos smartphones até monitores widescreen e TVs. Com o crescimento da tecnologia portátil e seu uso ativo no dia a dia, a necessidade de desenvolver páginas universais adaptadas a diversos dispositivos e resoluções se tornou mais relevante do que nunca.

Analisaremos conceitos como Web design responsivo e Web design adaptativo, consideraremos suas diferenças, vantagens e as situações em que é necessário utilizar essas técnicas na prática. Além disso, aprenderemos o que são consultas de mídia e como e por que você precisa usá-las em seus estilos.

2.1 CONCEITOS BÁSICOS

O que é Web design responsivo? É, principalmente, um layout de grade flexível ou, em outras palavras, "fluido" do seu site, estruturado com base em unidades de medida relativas, que permite usar um layout para diferentes tipos de dispositivos, imagens e vídeos flexíveis e consultas de mídia.

As páginas do seu site podem ser acessadas a partir de dispositivos com diferentes resoluções de tela. Criar páginas com largura fixa, nesse caso, não faz sentido, pois é necessária uma página que irá estreitar ou expandir para se adaptar a um dispositivo específico. Além disso, ao criar uma grade flexível, podemos dimensionar imagens e vídeos para caber no tamanho de tela apropriado.

CSS, em geral, são consultas de mídia, que permitem que você envie estilos diferentes para o navegador, dependendo de certas condições, como tipo de dispositivo, resolução, orientação e afins.

Assim, o Web design responsivo inclui uma grade de layout de site flexível, imagens e vídeos flexíveis, consultas de mídia e aprimoramento progressivo.

O aprimoramento progressivo deve ser entendido como uma técnica na qual criamos um site, fornecendo a todos os usuários uma visão básica do conteúdo e da funcionalidade, melhorando progressivamente a aparência e a funcionalidade, dependendo de certas condições, por exemplo, para os usuários finais que têm mais softwares modernos (navegador) ou velocidade de conexão. Como resultado, oferecemos a oportunidade de usar o site para o público mais amplo possível, adaptando-se às condições necessárias.

O Web design responsivo não é uma tecnologia separada ou um método específico de construção de páginas do site, pois contém muitos métodos de layout, graças aos quais o layout do seu site se adaptará a diferentes condições.

2.2 PREPARANDO PARA LAYOUT RESPONSIVO

Atualmente, muitos sites ainda são projetados para serem exibidos em telas de monitores. Por esse motivo, os navegadores móveis não exibem a página em 100%, mas a exibem em uma janela virtual (viewport), que geralmente é mais larga que a tela do dispositivo. Para ajustar a página na tela do dispositivo, os navegadores móveis reduzem sua escala (comprimem o resultado exibido, para que possa ser visto imediatamente). O fator de escala depende das características de um determinado dispositivo. Ao mesmo tempo, os usuários podem alterar e dimensionar a área visível para ver diferentes partes da página. 

Pela primeira vez na versão móvel do navegador Safari, apareceu a meta tag da janela de visualização, que permite que os desenvolvedores do site controlem tanto o tamanho da janela de visualização, quanto a escala da própria página. Posteriormente, outros navegadores móveis modernos implementaram suporte para essa meta tag, apesar de, na época, não fazerem parte de nenhum padrão da Web.

Anteriormente, já encontramos metas tags (elemento HTML <meta>). Elas fornecem informações adicionais ao navegador do usuário sobre o conteúdo da página e podem fornecer aos navegadores instruções adicionais sobre como exibir a página na tela. Permitem especificar uma descrição da página, palavras-chave, o autor do documento e outros metadados, que incluem a capacidade de reduzir o zoom em navegadores móveis.

Para que os navegadores mobile não redimensionem automaticamente as páginas do site, é necessário colocar uma meta tag na tag <head>, que informe ao navegador como lidar com tamanhos de página e alterar sua escala. 

Pela primeira vez na versão móvel do navegador Safari, apareceu a meta tag da janela de visualização, que permite que os desenvolvedores do site controlem tanto o tamanho da janela de visualização, quanto a escala da própria página. Posteriormente, outros navegadores móveis modernos implementaram suporte para essa meta tag, apesar de, na época, não fazerem parte de nenhum padrão da Web.

• O atributo name fornece o nome dos metadados do documento, o valor "viewport" fornece uma dica ao navegador sobre o tamanho do tamanho inicial da viewport. A função do atributo content é definir os valores para esse atributo.

• O valor width=device-width do atributo content informa que a largura da página deve ser definida para o tamanho da tela do dispositivo em pixels independentes do dispositivo (dip), o que permite que a página recalcule a posição dos elementos a serem exibidos corretamente em diferentes telas. Por analogia, é permitido especificar valores para a altura height=device-height.

• O valor initial-scale=1 do atributo content informa ao navegador para definir um mapeamento 1:1 entre pixels CSS e pixels independentes de dispositivo, independentemente da orientação do dispositivo (paisagem ou retrato).

3 ELEMENTOS EM BLOCO

Agora, classificaremos os métodos de trabalho com elementos de bloco, explicando para que serve a mudança no modelo de cálculo para a largura e altura dos elementos, como controlar o estouro de elementos de bloco e como trabalhar com tamanhos de elemento mínimo e máximo.

3.1 DIMENSIONAMENTO DE BLOCO EM CSS

Ao aprender sobre o modelo de caixa CSS, percebemos que as propriedades largura e altura definem a largura e a altura da área de conteúdo de um elemento, que pode conter texto, imagens e outros elementos.

No modelo de caixa CSS, há uma diferença entre os valores de largura e altura que você dá a um elemento e a quantidade de espaço que o navegador reserva para exibi-lo. A largura e a altura total dos elementos se referem à área da janela do navegador, que consiste na largura e na altura do preenchimento, das bordas e dos valores personalizados especificados para eles.

• A largura total de um elemento é calculada usando a fórmula: largura (largura) + preenchimento esquerdo (preenchimento esquerdo) + preenchimento direito (preenchimento direito) + borda esquerda (borda esquerda) + borda direita (borda direita).

• A altura total de um elemento é calculada usando a fórmula: altura (altura) + preenchimento superior (preenchimento superior) + preenchimento inferior (preenchimento inferior) + borda superior (borda superior) + borda inferior (borda inferior).

Digamos que temos os seguintes estilos para um elemento <div>:

Anteriormente, já encontramos metas tags (elemento HTML <meta>). Elas fornecem informações adicionais ao navegador do usuário sobre o conteúdo da página e podem fornecer aos navegadores instruções adicionais sobre como exibir a página na tela. Permitem especificar uma descrição da página, palavras-chave, o autor do documento e outros metadados, que incluem a capacidade de reduzir o zoom em navegadores móveis.

Para que os navegadores mobile não redimensionem automaticamente as páginas do site, é necessário colocar uma meta tag na tag <head>, que informe ao navegador como lidar com tamanhos de página e alterar sua escala. 

Veja o resultado do código abaixo. 

Para colocar o elemento <div>, o navegador precisa preparar o seguinte espaço:

• Largura total do elemento: 150px (largura personalizada) + 10px (preenchimento esquerdo) + 10px (preenchimento direito) + 5px (borda esquerda) + 5px (borda direita) = 180px.

• Altura total do elemento: 150px (altura personalizada) + 10px (preenchimento inferior) + 10px (preenchimento superior) + 5px (inferior) + 5px (topo) = 180px.

Assim, examinamos como classicamente ocorre o cálculo da largura e altura totais dos elementos. A desvantagem desse modelo é que você precisa realizar cálculos matemáticos para entender qual é a largura ou altura real dos elementos. É conveniente?

3.2 ELEMENTOS FLUTUANTES EM CSS

Trataremos agora dos elementos flutuantes em CSS, entenderemos o que são elementos flutuantes, como usar esses elementos para layout de páginas e como cancelar as regras de encapsulamento de elementos. Além disso, consideraremos algumas nuances importantes do trabalho com elementos flutuantes e, no final, apresentaremos um documento usando elementos flutuantes.

Uma maneira de fazer o elemento se mover para o lugar certo é usar a propriedade CSS float, que permite alinhar nosso elemento na página à esquerda ou à direita. Isso faz com que o elemento ao qual essa propriedade é aplicada flutue, fazendo com que o conteúdo abaixo do elemento flutuante flutue para cima e envolva o elemento flutuante.

4 FLEXBOX

Nada fica parado. Tecnologias e padrões se desenvolvem. Novas técnicas e métodos de layout do site aparecem e se renovam. Por exemplo, o layout com elementos tabulares, que não consideramos por motivos objetivos, foi substituído por layout com elementos flutuantes.

No tópico "Elementos flutuantes em CSS", aprendemos como construir layouts de página com base em elementos flutuantes. Eles ainda são relevantes e mais comuns, pois, em combinação com o posicionamento, permitem realizar qualquer tarefa relacionada ao layout da página. Os campos da Tecnologia da informação e do desenvolvimento de front-end em particular não são lugares onde você se sentará em uma caverna aconchegante. Às vezes, você precisa sair dela e dominar uma nova.

Nesse sentido, o box model se refere ao modo como as propriedades de CSS compõem as dimensões, em que, além do width e do height, as propriedades border e padding também influenciam no resultado final.

Enquanto uma nova e confortável grid cave está sendo preparada para nós, vamos nos preparar para o seu desenvolvimento no futuro e passar a estudar o modelo mais relevante e moderno para a construção de layouts de página, o flexbox .

4.1 O QUE É FLEXBOX?

Flexbox (abreviação de caixa flexível, "bloco flexível/borracha") é um método nativo moderno de layout de páginas de sites, que opera usando folhas de estilo em cascata. O flexbox foi introduzido como parte de um módulo separado, módulo de layout de caixa flexível CSS. Esse módulo (especificação) descreve um modelo CSS otimizado para design de interface do usuário e permite resolver rapidamente tarefas importantes ao construir um layout, como:

• O alinhamento vertical do bloco dentro do elemento pai, colocando colunas de layout da mesma altura, independentemente de como elas são preenchidas com conteúdo.

• A disposição dos elementos filhos do contêiner na direção que precisamos, enquanto distribui a largura ou altura disponíveis entre si, independentemente de sua quantidade disponível, sem causar estouro no elemento pai.

• A alteração da ordem dos elementos, independentemente da ordem em que eles são descritos no modelo de objeto do documento DOM.

A propriedade flex CSS é uma abreviação para propriedades que permitem especificar o tamanho padrão para um elemento flex, e o quanto o elemento pode crescer e diminuir em relação ao resto dos elementos flex no mesmo contêiner.

As propriedades são:

• flex-grow (padrão 0);

• flex-shrink (padrão 1);

• flex-basis (o padrão é auto).

Algumas nuances do uso da propriedade flex são:

• se um valor numérico for especificado, ele será definido para a propriedade flex-grow , se as unidades CSS forem especificadas, então para flex-basis;

• se o segundo valor for um valor numérico, ele será definido como flex-shrink, e se as unidades CSS forem especificadas, ele será definido como flex-basis.

4.1.1 COMO COMEÇAR A COMPOR COM O FLEXBOX?

Para começarmos o layout usando flexbox, precisamos colocar um contêiner flex dentro do documento; qualquer elemento semanticamente significativo pode ser usado como contêiner. Dentro do contêiner flex, colocamos os elementos necessários, enquanto todos os elementos filhos desse contêiner automaticamente se tornam elementos flex. Observe o ponto importante de que todos os filhos de um contêiner flexível se tornam itens flexíveis, nem todos os filhos aninhados, ou seja, elementos já aninhados em filhos serão itens flexíveis por padrão. 

Você pode ter uma pergunta lógica: o que é necessário para fazer um contêiner flexível? Para fazer isso, basta definir a propriedade display do elemento como flexcss3 , ou inline-flexcss3. 

Vejamos um exemplo ilustrativo: 

Veja o resultado do código abaixo. 

Nesse exemplo, definimos a propriedade display do elemento <section>html5 como flex, o que significa que ele se tornou um contêiner flex de nível de bloco e todos os seus elementos <div> aninhados se tornaram elementos flex. Para esses elementos, especificamos estilos que determinam a cor do texto (color), background (background) e margens (margin). 

Observe que, com pouco esforço, conseguimos que nossas colunas de layout estivessem à mesma altura, independentemente de como elas foram preenchidas com conteúdo, o que é ótimo. Os elementos <p> não são elementos flex por padrão e são posicionados no fluxo do terceiro elemento <div> como elementos de bloco normais. Se houver necessidade disso, para torná-los itens flexíveis, como você pode imaginar, você precisa definir seu pai como um contêiner flexível de bloco (flex) ou inline (inline-flex).

4.1.2 ALINHAMENTO HORIZONTAL

A propriedade CSS justify-content determina como o navegador distribui o espaço entre e ao redor dos itens flex ao longo do eixo principal do contêiner flex (horizontal). Essa propriedade pode ser usada nos casos em que uma largura é especificada explicitamente para itens flexíveis, e se a largura de todos os itens flexíveis dentro do contêiner não fizer com que o contêiner estoure. Caso contrário, a propriedade justify-content não terá efeito sobre esse elemento.

4..1.3 ALINHAMENTO VERTICAL

A propriedade CSS align-content determina como o navegador distribui o espaço entre e ao redor de itens flexíveis ao longo do eixo transversal do contêiner (verticalmente). 

4.1.4 ALINHAMENTO DE ALTURA DE LINHA 

A propriedade CSS align-items determina o alinhamento dos itens dentro de um contêiner flexível ao longo do eixo cruzado. A propriedade align-items funciona de forma semelhante à propriedade justify-content, mas não alinha ao longo do eixo principal, e sim ao longo do eixo transversal (perpendicular ao eixo principal). 

Tópico 3 - Estilização Adicional com CSS

2 ESTILIZAÇÃO DE TABELAS

Ao trabalhar com tabelas, você precisa entender que você pode adicionar um recuo interno (padding que separa a espessura da área que separa a borda do conteúdo) no cabeçalho ou nas células. Você só pode adicionar um recuo externo (margin) diretamente na tag <table>: 

Veja o resultado do código abaixo. 

Nesse exemplo, nós:

• Colocamos a tabela no centro, usando a técnica de centralização horizontal com margens externas (margem: 0 auto).

• Para as células da tabela (células de cabeçalho e dados), definimos uma borda sólida de 1 px com a cor hexadecimal #F50 e definimos o preenchimento para 19 pixels em todos os lados.

• Para o nome da tabela (a tag <caption> ), definimos o preenchimento da parte inferior para 19 pixels. 

2.1 ESPAÇAMENTO ENTRE CÉLULAS 

Após o exemplo acima, você deve ter notado que ainda temos uma lacuna entre todas as células da tabela. Vejamos como remover a lacuna entre as células da tabela ou aumentá-la.

Para definir a distância entre as bordas das células vizinhas, você deve usar a propriedade CSS - border-spacing. 

2.2 MOSTRAR BORDAS AO REDOR DAS CÉLULAS DA TABELA

Você pode dizer: então, removemos a lacuna entre as células usando a propriedade border-spacing com um valor de 0, mas por que agora temos bordas de células que se cruzam?

As bordas duplas são formadas devido ao fato de que a borda inferior de uma célula é adicionada à borda superior da célula abaixo dela. Uma situação semelhante ocorre nas laterais das células e isso é lógico em termos de exibição da tabela. Porém, felizmente, existe uma maneira de dizer ao navegador que não queremos ver esse comportamento atrevido das bordas das células.

Para fazer isso, você precisa usar a propriedade CSS border-collapse. Curiosamente, usar a propriedade border-collapse com o valor de colapso é a melhor maneira de remover a lacuna entre as células sem obter bordas duplas entre elas.

Considere comparar o comportamento das bordas ao usar a propriedade border-spacing com um valor de 0 e a propriedade border-collapse com um valor de colapso.

2.3 ESTILIZANDO LINHAS E COLUNAS DA TABELA

Analisaremos o uso do grupo pseudo-class :nth-child, que permite alternar estilos de linha em tabelas usando valores pares (par) e ímpares (ímpar) ou usando uma fórmula matemática elementar.

Vamos revisitar as técnicas que abordamos até agora e explorar novas maneiras de estilizar linhas e colunas em tabelas. Passemos aos exemplos.

Nesse exemplo, nós:

• Indicamos que nossa tabela ocupa 100% do elemento pai, não há espaços entre as células.

• Usando a pseudo-classe :nth-child, especificamos que todas as linhas pares têm uma borda vermelha sólida de 3 pixels.

• Usando a pseudo-classe :nth-child, definimos que cada quarta célula dos dados da tabela (a tag <td>) dentro da linha, a partir da segunda célula da tabela, será destacada ( 4n - cada quarto elemento é destacado, 2 - com qual elemento começar).

3 ESTILIZAÇÃO DE FUNDO DE ELEMENTOS

O plano de fundo de um elemento é o tamanho total do elemento, incluindo valores de preenchimento e borda, mas não incluindo o valor de margem, a propriedade margin.

Atualmente, os navegadores trabalham com três formatos gráficos:

• Eng. Graphics Interchange Format (GIF): um formato para troca de imagens.

• Joint Photographic Experts Group (JPEG): nome da organização desenvolvedora.

• Portable Network Graphics (PNG): gráficos de rede portáteis, um formato raster para armazenar informações gráficas.

Para definir uma imagem como plano de fundo, você precisa usar a propriedade background-image e especificar o caminho para o arquivo de imagem, que pode ser relativo ou absoluto. 

Vejamos um exemplo em que definimos um plano de fundo com três quadrados multicoloridos de 100 x 100 pixels para o elemento <body>: o plano de fundo usado no exemplo. 

Por padrão, a imagem de fundo é colocada no canto superior esquerdo do elemento e repetida tanto vertical, quanto horizontalmente. Em nosso exemplo, isso resultou o elemento <body> sendo completamente preenchido com a imagem de fundo. 

3.1 CONTROLE DE REPETIÇÃO DE IMAGEM DE FUNDO

Como estabelecemos a partir do exemplo, a imagem de fundo é colocada por padrão no canto superior esquerdo do elemento e é repetida vertical e horizontalmente. Vamos aprender como alterar esses valores predefinidos e, primeiro, ver como controlar a repetição de uma imagem. A propriedade CSS background-repeat nos ajudará com isso.

Essa propriedade tem os seguintes valores disponíveis:

3.2 PLANO DE FUNDO FIXO

Quando você rola o conteúdo de uma página, a imagem de fundo geralmente rola junto com o conteúdo. Esse valor é o padrão e é adequado para a maioria dos propósitos, mas você pode alterar esse comportamento de segundo plano com CSS, por exemplo, corrigindo-o.

Vamos checar como fazer um efeito "paralaxe" usando a propriedade background-attachment. 

Nesse exemplo, definimos a altura de todos os elementos <div> para 600px e colocamos três desses blocos na página. Para a caixa do meio, criamos uma classe .primerFixed que define o plano de fundo do elemento para um plano de fundo fixo, centraliza e o replica horizontalmente (eixo x). 

Uma declaração de propriedade CSS consiste em um nome de propriedade e um valor de propriedade. O nome da propriedade vem primeiro, depois um cólon, e depois o valor. 

Padding box: a imagem de fundo é posicionada a partir do canto superior esquerdo do elemento (a imagem não passa por baixo da borda do elemento nesses lados). 

Content-box: Esse é o valor inicial e padrão, conforme especificado pelo padrão CSS. As propriedades “width” e “height” incluem o conteúdo, mas não incluem o preenchimento, a borda ou a margem.

Border-box: As propriedades “width” e “height” incluem o conteúdo, o preenchimento e a borda, mas não incluem a margem.

A propriedade background-clip, ao contrário de background-origin, recorta a parte do plano de fundo que está fora dos quadros especificados. A propriedade background-origin determina apenas como a imagem de fundo é posicionada.

4 ESTILIZAÇÃO DE LISTAS

Agora nos concentraremos em trabalhar com listas em CSS. Você aprenderá como alterar o tipo de marcador e a posição do marcador em relação ao elemento da lista, como criar seus próprios marcadores e até como alterar a cor do marcador.

Você já deve saber que existem dois tipos principais de listas no HTML5 (além das listas de descrição e itens de menu).

• lista numerada (ordenada): elemento HTML <ol>;

• lista com marcadores (não ordenada): elemento HTML <ul>.

O CSS nos dá muitas opções para formatar a aparência dessas listas. Vamos ver as principais.

4.1 ALTERAR TIPO DE MARCADOR

A primeira propriedade que gostaríamos de considerar é list-style-type, que especifica o tipo de marcador do item da lista. Os menus de navegação, por exemplo, geralmente são compostos por listas regulares com marcadores (o elemento HTML <ul> ), cujo marcador padrão é exibido como um círculo preenchido. Para removê-lo, você precisa usar a propriedade CSS do tipo list-style com um valor de nenhum. 

Para listas com marcadores (não ordenadas ou com elemento HTML <ul>), existem três tipos de marcadores: na forma de um círculo preenchido (disco é o valor padrão), na forma de um círculo vazio (circular) e na forma de um quadrado (quadrado); e, para listas numeradas (ordenadas) (elemento <ol>), todas as opções restantes. 

4.2 POSIÇÃO DO MARCADOR EM RELAÇÃO AO ITEM DA LISTA

Com a propriedade CSS list-style-position, você pode especificar a posição do marcador ou o número em relação ao item da lista. Para colocar um marcador (número) dentro do elemento da lista junto com o conteúdo, você deve usar o valor dentro de; e, para colocá-lo fora do elemento da lista, você deve usar o valor fora de.

A propriedade universal border, que permite definir uma borda para todos os elementos da lista, é utilizada para entender melhor o funcionamento da propriedade list-style-position. 

4.3 CRIANDO SEUS PRÓPRIOS MARCADORES 

Mais cedo ou mais tarde, você precisará criar marcadores de lista com seu próprio design. Graças à propriedade CSS list-style-image, poderemos implementar esse desejo em seu projeto.

A sintaxe da propriedade é a seguinte:

O valor entre colchetes corresponde ao caminho para a imagem que você planeja usar como marcador. O caminho para a imagem pode ser absoluto ou relativo. Ao especificar um caminho relativo, o ponto importante é que ele deve ser especificado em relação ao local da folha de estilo, não à página.

A linguagem CSS3 oferece a possibilidade do uso de fontes da Web, ou seja, fontes que não precisam ser instaladas no computador. Atualmente, os browsers suportam diversos tipos de formatos de fonte. De modo a oferecer suporte a metadados adicionais, o formato que o W3C suporta e que se deve utilizar é o WOFF (Web Open Font Format). 

Vejamos um exemplo de uso de marcadores personalizados em um documento. 

Nesse exemplo, especificamos o caminho absoluto para a imagem que será usada como marcador. 

LEITURA COMPLEMENTAR

GANHOS VISUAIS COM O CSS3

Edu Agni 

Chris Coyier, web designer que mantém o blog CSS-Tricks, escreveu em seu perfil no Twitter que o “CSS é como o xadrez. Você pode aprender os princípios básicos em um dia, e passar a vida inteira se especializando”. De fato, o CSS é a linguagem mais fácil de ser aprendida, possuindo uma sintaxe bem simples. Porém, criar páginas com layouts bem elaborados usando CSS, assim como conhecer todos os seus macetes, exige tempo e experiência.

A forma mais correta de desenvolvermos páginas para Web é dividindo a estrutura em três camadas: conteúdo (HTML), comportamento (Javascript) e apresentação (CSS). Trabalhando o CSS em uma camada separada do restante da estrutura, conseguimos uma melhor consistência visual, uma vez que os layouts de todas as páginas estarão baseados em uma mesma folha de estilos. Também ganhamos tempo e facilidade na hora de fazer um redesign ou manutenções visuais, pois a alteração de um único arquivo terá impacto em todo o site. Com o CSS em um arquivo separado, também conseguimos fornecer maior acessibilidade ao criar folhas de estilo específicas para diferentes dispositivos como sintetizadores de fala e som, aparelhos e impressoras em Braille, celulares e outros dispositivos móveis etc. O carregamento das páginas também será mais rápido, já que após o primeiro acesso ao site, o arquivo CSS estará carregado em cache.

Um bom exemplo de como o CSS pode ser poderoso quando bem usado é o CSS Zen Garden. O site fornece um modelo de página HTML para download, e diversos designers criam folhas de estilos para essa mesma página. O resultado pode ser visto na galeria: alterando apenas a folha de estilo, diferentes layouts são aplicados na mesma página HTML.

CSS ainda deixa a desejar

Hoje, designers e desenvolvedores ainda têm que se virar para conseguir certos efeitos gráficos. Por mais poderosa que a linguagem seja, a atual versão do CSS2.1 não fornece recursos como sombras em objetos e textos, cantos arredondados, múltiplas camadas de plano de fundo, opacidade, possibilidade de diferentes familias tipográficas, colunas em textos, etc. O fato de navegadores mais antigos (e ainda utilizados) como o Internet Explorer 6 não suportarem todos os recursos do CSS2.1 acaba complicando ainda mais a nossa vida.

Para conseguir tais efeitos e recursos nas páginas, normalmente recorremos ao uso de imagens, hacks, ou inserção excessiva de marcações HTML, o que pode aumentar o tempo de desenvolvimento e carregamento das páginas, além de comprometer a semântica dos documentos.

Com a nova versão da linguagem que está por vir, teremos maior controle sobre o estilo dos elementos. Propriedades para cantos arredondados ou sombras em textos estarão disponíveis no CSS3, sem precisarmos recorrer ao uso de truques ou imagens.

O que nos trará o CSS3?

Propriedades de CSS3 já são suportadas pelas versões mais recentes de alguns navegadores, como o Safari 4 e o Firefox 3.6. Com isso podemos testar os novos recursos que estão por vir. Para que alguns dos novos recursos possam ser testados, é necessário adicionarmos os prefixos -moz- (para a renderização no Firefox) e -webkit- (para renderização no Safari).

A seguir, exemplos de algumas das novas propriedades que a nova versão da linguagem irá nos fornecer:

border-radius Com essa propriedade podemos adicionar um raio de arredondamento para todos os cantos de um elemento, como -moz-border-radius: 10px, ou valores diferentes para cada canto, como -moz-border-radius-topright: 5px.

text-shadow Com essa propriedade podemos adicionar sombras em textos, configurando a distância da sombra para a esquerda e para o topo do texto, o enevoamento e cor: text-shadow: 5px 5px 2px #999.

box-shadow Funciona da mesma maneira que o text-shadow, porém aplicando sombra aos outros elementos: -moz-box-shadow: -10px -10px 0px #333.

border-colors Podemos adicionar um efeito gradiente nas bordas de um elementos, aplicando cores em diferentes camadas: -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc.

Opacity Podemos adicionar opacidade aos elementos: opacity: 0.2.

Columns Podemos definir estilos de colunas para textos, aplicando valores para a largura, quantidade, bordas de separação e distância entre colunas: -moz-column-width: 13em; -moz-column-count: 3; -moz-column-rule: 1px solid black; -moz-column-gap: 1em.

Multiple backgrounds Podemos definir diferentes planos de fundo para um mesmo elemento: background: url(fundo-um.jpg) top left no-repeat, url(fundo-dois.jpg) top 11px no-repeat, url(fundo-tres.jpg) bottom left no-repeat, url(fundo-quatro.jpg) left repeat-y.@font-facePodemos definir uma tipografia diferenciada para os textos da página através da importação de um arquivo de fonte: @font-face {font-family: Agni; src: url(‘agni-font.otf’)}. Em seguida aplicamos essa fonte a um elemento de texto: h3 { font-family: Agni, sans-serif}.O CSS3 ainda não deve ser usado definitivamente em suas páginas. A nova versão da linguagem ainda se encontra em fase de rascunho na W3c, e a maioria dos navegadores não fornece suporte. Porém é essencial que possamos conhecer e testar os novos recursos, descobrir aos poucos o que vem por aí, e nos preparar para o momento em que o CSS3 será lançado como uma recomendação em definitivo.

FONTE: AGNI, E. Ganhos visuais com o CSS3. Medium. [S. l.], 23 mar. 2010. Disponível em: https://medium.com/@eduagni/ganhos-visuais-com-o-css3-1a47a951ebc7. Acesso em: 23 set. 2022.