Capítulo 2: Seletores em CSS

2.1 O que são Seletores?

Os seletores são usados para "apontar" para elementos HTML específicos e aplicar estilos a eles. Existem diferentes tipos de seletores no CSS:

• Seletores Básicos: Selecionam elementos pelo nome da tag, id ou classe.
• Seletores Combinadores: Selecionam elementos baseados em relações hierárquicas.
• Seletores de Atributos: Selecionam elementos com base nos atributos.

2.2 Exemplos Práticos

Exemplo de seletores básicos:

/* Seleciona todos os elementos <p> */
p {
  color: blue;
}

/* Seleciona o elemento com id "principal" */
#principal {
  background-color: yellow;
}

/* Seleciona elementos com a classe "destaque" */
.destaque {
  font-weight: bold;
}
Neste exemplo, todos os elementos <p>  serão centralizados, com uma cor de texto vermelha:

    p {
      color: red;
      text-align: center;
    }

Seletores em CSS

Capítulo 3: Trabalhando com Cores

3.1 Representações de Cores

Você pode especificar cores no CSS de várias maneiras:

• Palavras-chave: red, blue, green, etc.
• Valores Hexadecimais: #ff0000 (vermelho), #00ff00 (verde).
• RGB: rgb(255, 0, 0) (vermelho).
• HSL: hsl(0, 100%, 50%) (vermelho).

3.2 Exemplo de Uso

/* Cor de fundo azul */
body {
  background-color: blue;
}

/* Cor do texto branco */
h1 {
  color: white;
}

/* Estilizando botões com gradiente */
button {
  background: linear-gradient(to right, red, yellow);
}

Capítulo 4: Seletores CSS

Um seletor CSS seleciona o(s) elemento(s) HTML que você deseja estilizar.

Seletores CSS

Os seletores CSS são usados ​​para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar.

Podemos dividir os seletores CSS em cinco categorias:

• Seletores simples: selecionam elementos com base no nome, id ou classe.
• Seletores combinadores: selecionam elementos com base em um relacionamento específico entre eles.
• Seletores de pseudoclasse: selecionam elementos com base em um determinado estado.
• Seletores de pseudoelementos: selecionam e estilizam uma parte de um elemento.
• Seletores de atributos: selecionam elementos com base em um atributo ou valor de atributo.

Esta página explicará os seletores CSS mais básicos.

O seletor de elementos CSS

O seletor de elementos seleciona elementos HTML com base no nome do elemento.

Exemplo:

p {
    text-align: center;
    color: red;
}
            

Aqui, todos os elementos <p> na página serão centralizados, com uma cor de texto vermelha.

O seletor de id CSS

O seletor id usa o atributo id de um elemento HTML para selecionar um elemento específico.

O id de um elemento é único dentro de uma página, então o seletor id é usado para selecionar um elemento único!

Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido do id do elemento.

Exemplo:

#para1 {
    text-align: center;
    color: red;
}
            

A regra CSS abaixo será aplicada ao elemento HTML com id="para1":

Observação: um nome de ID não pode começar com um número!

Capítulo 5: Seletores CSS Avançados

O seletor de classe CSS

O seletor de classe seleciona elementos HTML com um atributo de classe específico.

Para selecionar elementos com uma classe específica, escreva um ponto (.), seguido do nome da classe.

Exemplo 1 - Seletor de classe:

Você também pode especificar que apenas elementos HTML específicos devem ser afetados por uma classe.

Exemplo 2 - Seletor de classe específico (apenas para <p>):

Os elementos HTML também podem se referir a mais de uma classe.

Exemplo 3 - Elemento com múltiplas classes:

Observação: um nome de classe não pode começar com um número!

O seletor universal CSS

O seletor universal (*) seleciona todos os elementos HTML na página.

Exemplo 4 - Seletor universal:

O seletor de agrupamento CSS

O seletor de agrupamento seleciona todos os elementos HTML com as mesmas definições de estilo.

Observe o seguinte código CSS (os elementos h1, h2 e p têm as mesmas definições de estilo):

Exemplo 5 - Seletor de agrupamento:

Será melhor agrupar os seletores para minimizar o código.

Para agrupar seletores, separe cada seletor com uma vírgula.

Exemplo 6 - Seletor de agrupamento com vírgula:

Todos os seletores simples CSS

Capítulo 6: CSS Interno, Embutido e Externo

CSS Interno

Uma folha de estilo interna pode ser usada se uma única página HTML tiver um estilo único. O estilo interno é definido dentro do elemento <style>, dentro da seção <head>.

Exemplo 1 - CSS Interno:

CSS Embutido

Um estilo embutido pode ser usado para aplicar um estilo exclusivo para um único elemento. Para usar estilos inline, adicione o atributo style ao elemento relevante.

Exemplo 2 - CSS Embutido:

Dica: Um estilo inline perde muitas das vantagens de uma folha de estilo (por misturar conteúdo com apresentação). Use esse método com moderação.

Várias Folhas de Estilo

Se algumas propriedades tiverem sido definidas para o mesmo seletor (elemento) em folhas de estilo diferentes, o valor da última folha de estilo lida será usado.

Exemplo 3 - Várias folhas de estilo:

Entretanto, se o estilo interno for definido antes do link para a folha de estilo externa, os elementos h1 serão "navy".

Exemplo 4 - Estilo interno antes do externo:

Ordem em Cascata

Qual estilo será usado quando houver mais de um estilo especificado para um elemento HTML?

Todos os estilos em uma página serão "em cascata" em uma nova folha de estilo "virtual" pelas seguintes regras, onde o número um tem a maior prioridade:

• Estilo embutido (dentro de um elemento HTML)
• Folhas de estilo externas e internas (na seção <head>)
• Navegador padrão

Portanto, um estilo embutido tem a maior prioridade e substituirá os estilos externos e internos, bem como os padrões do navegador.

Três Maneiras de Inserir CSS

Existem três maneiras de inserir uma folha de estilo:

• CSS externo
• CSS interno
• CSS embutido

CSS Externo

Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro alterando apenas um arquivo! Cada página HTML deve incluir uma referência ao arquivo de folha de estilo externo dentro do elemento <link>, dentro da seção <head>.

Exemplo 5 - CSS Externo:

Uma folha de estilo externa pode ser escrita em qualquer editor de texto e deve ser salva com uma extensão .css. O arquivo .css externo não deve conter nenhuma tag HTML.

Exemplo 6 - Conteúdo do arquivo CSS externo:

Nota: Não adicione um espaço entre o valor da propriedade (20) e a unidade (px).
Exemplo incorreto: margin-left: 20 px;
Exemplo correto: margin-left: 20px;

Capítulo 7: Comentários CSS

Comentários CSS

Os comentários CSS não são exibidos no navegador, mas podem ajudar a documentar seu código-fonte.

Comentários CSS são usados para explicar o código e podem ser úteis quando você editar o código-fonte posteriormente. Comentários são ignorados pelos navegadores.

Um comentário CSS é colocado dentro do elemento <style> e começa com /* e termina com */.

Exemplo 1 - Comentário de uma linha:

Exemplo 2 - Comentário no meio de uma linha de código:

Exemplo 3 - Comentário multi-linha:

Comentários HTML e CSS

No tutorial de HTML, você aprendeu que pode adicionar comentários ao seu código-fonte HTML usando a sintaxe .

Exemplo 4 - Comentários HTML e CSS combinados:

Capítulo 8: Cores em CSS

Especificando Cores

As cores em CSS podem ser especificadas usando nomes de cores predefinidos ou valores RGB, HEX, HSL, RGBA, HSLA.

Nomes de Cores CSS

Em CSS, uma cor pode ser especificada usando um nome de cor predefinido. Aqui estão 40 cores com seus respectivos nomes:

Cor de Fundo CSS

Você pode definir a cor de fundo para os elementos HTML:

Olá Mundo
Lorem ipsum...
    

Cor do Texto CSS

Você pode definir a cor do texto:

Olá Mundo
Lorem ipsum...
Ut wisi enim...
    

Cor da Borda CSS

Você pode definir a cor das bordas:

Olá Mundo
Olá Mundo
Olá Mundo
    

Valores de Cor CSS

Em CSS, as cores também podem ser especificadas usando valores RGB, HEX, HSL, RGBA e HSLA:

• RGB: rgb(255, 99, 71)
• HEX: #ff6347
• HSL: hsl(9, 100%, 64%)

Mesma cor do nome "Tomato", mas 50% transparente:

• RGBA: rgba(255, 99, 71, 0.5)
• HSLA: hsla(9, 100%, 64%, 0.5)

Exemplo:

...
...
...

...
...
    

Capítulo 9: Fundos CSS

Propriedades de Fundo

As propriedades de fundo CSS são usadas para adicionar efeitos de fundo aos elementos.

Neste capítulo, você aprenderá sobre as seguintes propriedades de fundo CSS:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background (propriedade abreviada)

Cor de Fundo CSS

A propriedade background-color especifica a cor de fundo de um elemento.

Exemplo:

Com CSS, uma cor pode ser geralmente especificada por:

• Nome de cor válido (ex: "vermelho")
• Valor HEX (ex: "#ff0000")
• Valor RGB (ex: "rgb(255,0,0)")

Outros Elementos

Você pode definir a cor de fundo para qualquer elemento HTML:

Exemplo:

Opacidade / Transparência

A propriedade opacity especifica a opacidade ou transparência de um elemento. Pode assumir valores entre 0,0 e 1,0, onde 0,0 é totalmente transparente e 1,0 é totalmente opaco.

Exemplo:

Nota: Ao usar a propriedade opacity, todos os elementos filhos herdam a mesma transparência.

Transparência usando RGBA

Se você não quiser aplicar opacidade aos elementos filhos, use valores de cor RGBA. O exemplo a seguir define a opacidade para a cor de fundo, mas não para o texto:

Exemplo:

Um valor de cor RGBA é especificado com: rgba(red, green, blue, alpha), onde o parâmetro alpha é um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

Propriedade Abreviada background

A propriedade background é uma forma abreviada para definir todas as propriedades de fundo de uma vez. Isso pode incluir background-color, background-image, background-repeat, background-attachment, e background-position.

Exemplo:

Capítulo 10: Imagem de Fundo CSS

Imagem de Fundo CSS

A propriedade background-image especifica uma imagem a ser usada como plano de fundo de um elemento.

Por padrão, a imagem é repetida para cobrir todo o elemento.

Exemplo:

Observação: ao usar uma imagem de fundo, utilize uma que não atrapalhe o texto.

Imagem de Fundo em Elementos Específicos

A imagem de fundo também pode ser definida para elementos específicos, como o elemento <p>:

Exemplo:

Propriedades de Imagem de Fundo CSS

Capítulo 11: Repetição de Imagem de Fundo CSS

Repetição de Imagem de Fundo CSS

Por padrão, a propriedade background-image repete uma imagem horizontal e verticalmente.

Algumas imagens devem ser repetidas apenas na horizontal ou na vertical, ou ficarão estranhas, como esta:

Exemplo:

Repetição Horizontal

Se a imagem acima for repetida apenas na horizontal, o fundo ficará melhor:

Exemplo:

Dica: Para repetir a imagem verticalmente, defina background-repeat: repeat-y;

Sem Repetição de Imagem de Fundo CSS

Mostrar a imagem de fundo apenas uma vez também é especificado pela propriedade background-repeat:

Exemplo:

No exemplo acima, a imagem de fundo é colocada no mesmo lugar que o texto. Queremos mudar a posição da imagem, para que ela não perturbe muito o texto.

Posição de Fundo CSS

A propriedade background-position é usada para especificar a posição da imagem de fundo.

Exemplo:

Capítulo 12: Anexo de Fundo CSS

Anexo de Fundo CSS

A propriedade background-attachment especifica se a imagem de fundo deve rolar ou ser fixa (não rolará com o resto da página):

Exemplo: Imagem de Fundo Fixa

Exemplo: Imagem de Fundo Rolando

Propriedade de Anexo de Fundo CSS

Resumo do Contexto CSS

Contexto CSS - Propriedade Abreviada

Para encurtar o código, também é possível especificar todas as propriedades de fundo em uma única propriedade. Isso é chamado de propriedade abreviada.

Exemplo: Usando a Propriedade Abreviada

Ao usar a propriedade abreviada, a ordem dos valores deve ser a seguinte:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Não importa se um dos valores está faltando, desde que os outros estejam nesta ordem. Note que não usamos a propriedade background-attachment nos exemplos acima, pois ela não tem um valor definido.

Todas as Propriedades de Fundo CSS

Capítulo 13: Bordas CSS

Propriedades de Bordas CSS

As propriedades de borda CSS permitem que você especifique o estilo, a largura e a cor da borda de um elemento.

Exemplos de Bordas

• Tenho fronteiras por todos os lados.
• Tenho uma borda inferior vermelha.
• Eu tenho bordas arredondadas.
• Tenho uma borda esquerda azul.

Estilo de Borda CSS

A propriedade border-style especifica que tipo de borda será exibida.

Os seguintes valores são permitidos:

• dotted - Define uma borda pontilhada.
• dashed - Define uma borda tracejada.
• solid - Define uma borda sólida.
• double - Define uma borda dupla.
• groove - Define uma borda ranhurada 3D. O efeito depende do valor border-color.
• ridge - Define uma borda 3D com sulcos. O efeito depende do valor border-color.
• inset - Define uma borda de inserção 3D. O efeito depende do valor border-color.
• outset - Define uma borda de início 3D. O efeito depende do valor border-color.
• none - Não define nenhuma borda.
• hidden - Define uma borda oculta.

A propriedade border-style pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e borda esquerda).

Exemplo: Demonstração dos diferentes estilos de borda

Observação: Nenhuma das outras propriedades de borda CSS (sobre as quais você aprenderá mais nos próximos capítulos) terá efeito, a menos que a propriedade border-style seja definida.

Largura da Borda CSS

A propriedade border-width especifica a largura das quatro bordas.

A largura pode ser definida como um tamanho específico (em px, pt, cm, em, etc.) ou usando um dos três valores predefinidos: fino, médio ou grosso.

Exemplo: Demonstração das diferentes larguras de borda

Resultado:

• 5px de largura de borda
• Largura de borda média
• 2px de largura de borda
• Largura de borda grossa

Larguras Laterais Específicas

A propriedade border-width pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e borda esquerda):

Exemplo: Largura de borda especificando os lados

Capítulo 14: Cor da Borda CSS

Propriedade de Cor da Borda CSS

A propriedade border-color é usada para definir a cor das quatro bordas.

A cor pode ser definida de várias formas:

• Nome - especifique um nome de cor, como "vermelho".
• HEX - especifique um valor HEX, como "#ff0000".
• RGB - especifique um valor RGB, como "rgb(255,0,0)".
• HSL - especifique um valor HSL, como "hsl(0, 100%, 50%)".
• Transparente - especifique a cor como transparente.

Nota: Se border-color não for definido, ele herda a cor do elemento.

Exemplo: Demonstração das diferentes cores de borda

Resultado:

• Borda vermelha
• Borda verde
• Borda azul

Cores Laterais Específicas

A propriedade border-color pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e borda esquerda).

Exemplo: Definindo cores específicas para os lados da borda

Resultado: Borda superior vermelha, borda direita verde, borda inferior azul e borda esquerda amarela.

Valores de Cor HEX, RGB e HSL

Você também pode especificar a cor da borda usando valores HEX, RGB ou HSL.

Exemplo: Usando valores HEX

Exemplo: Usando valores RGB

Exemplo: Usando valores HSL

Lados Individuais de Bordas CSS

Pelos exemplos das páginas anteriores, você viu que é possível especificar uma borda diferente para cada lado.

Em CSS, também existem propriedades para especificar cada uma das bordas (superior, direita, inferior e esquerda):

Exemplo: Definindo bordas diferentes para cada lado

Resultado: Bordas com estilos diferentes para cada lado.

Propriedade border-style com Vários Valores

A propriedade border-style pode ter de um a quatro valores:

Exemplo com Quatro Valores

Exemplo com Três Valores

Exemplo com Dois Valores

Exemplo com Um Valor

Esses exemplos mostram como a propriedade border-style pode ser combinada com diferentes valores para os quatro lados da borda.

Capítulo 15: Lados de Borda CSS

Borda CSS - Lados Individuais

Em CSS, você pode especificar uma borda diferente para cada lado de um elemento. Para isso, existem propriedades específicas para cada uma das bordas (superior, direita, inferior e esquerda).

Exemplo: Definindo bordas diferentes para cada lado

Resultado: Bordas com estilos diferentes para cada lado.

Explicação dos Valores de Estilo de Borda

O exemplo acima pode ser escrito de forma mais compacta usando a propriedade border-style com múltiplos valores.

Exemplo de uso de border-style com diferentes números de valores

Explicação dos Valores:

• Se a propriedade border-style tiver quatro valores: A borda superior é pontilhada, a borda direita é sólida, a borda inferior é dupla e a borda esquerda é tracejada.
• Se a propriedade border-style tiver três valores: A borda superior é pontilhada, as bordas direita e esquerda são sólidas, e a borda inferior é dupla.
• Se a propriedade border-style tiver dois valores: As bordas superior e inferior são pontilhadas, e as bordas direita e esquerda são sólidas.
• Se a propriedade border-style tiver um valor: Todas as quatro bordas terão o estilo pontilhado.

Propriedade de Bordas Abreviada CSS

Para encurtar o código, você pode especificar todas as propriedades de borda individuais usando uma única propriedade abreviada chamada border.

Exemplo: Usando a propriedade border abreviada

Resultado: Uma borda de 5px, estilo sólido e cor vermelha em todos os lados.

Bordas Específicas com a Propriedade Abreviada

Você também pode especificar todas as propriedades de borda para apenas um lado usando a propriedade abreviada, como border-left, border-bottom, etc.

Exemplo: Borda Esquerda

Resultado: Borda esquerda de 6px, estilo sólido e cor vermelha.

Exemplo: Borda Inferior

Resultado: Borda inferior de 6px, estilo sólido e cor vermelha.

Capítulo 16: Bordas Arredondadas CSS

Bordas Arredondadas CSS

A propriedade border-radius é usada para adicionar bordas arredondadas a um elemento.

Exemplo: Bordas Arredondadas

Borda normal

Borda redonda

Borda mais redonda

Borda ainda mais redonda

Exemplo de Código

    p {
        border: 2px solid red;
        border-radius: 5px;
    }
    

Mais Exemplos

Aqui estão alguns exemplos de como definir diferentes propriedades de borda usando propriedades abreviadas.

Todas as propriedades da borda superior em uma declaração

Definir o estilo da borda inferior

Definir a largura da borda esquerda

Definir a cor das quatro bordas

Definir a cor da borda direita

Todas as Propriedades de Borda CSS

Lista de todas as propriedades relacionadas a bordas em CSS:

Capítulo 17: Margens CSS

Margens CSS

Margens são usadas para criar espaço ao redor de elementos, fora de quaisquer bordas definidas.

Exemplo:

Margens CSS

As propriedades CSS margin são usadas para criar espaço ao redor dos elementos, fora de quaisquer bordas definidas.

Com CSS, você tem controle total sobre as margens. Há propriedades para definir a margem para cada lado de um elemento (superior, direito, inferior e esquerdo).

Margem - Lados Individuais

CSS tem propriedades para especificar a margem de cada lado de um elemento:

• margin-top
• margin-right
• margin-bottom
• margin-left

Valores de Margem

As propriedades de margem podem ter os seguintes valores:

• auto - o navegador calcula a margem.
• comprimento - especifica uma margem em px, pt, cm, etc.
• % - especifica uma margem em % da largura do elemento que contém.
• herdar - especifica que a margem deve ser herdada do elemento pai.

Dica: Valores negativos são permitidos.

Exemplo de Margens Diferentes

    p {
        margin-top: 100px;
        margin-bottom: 100px;
        margin-right: 150px;
        margin-left: 80px;
    }
    

Margem - Propriedade de Taquigrafia

Para encurtar o código, é possível especificar todas as propriedades de margem em uma única propriedade.

A propriedade margin é uma propriedade abreviada para as seguintes propriedades de margem individuais:

• margin-top
• margin-right
• margin-bottom
• margin-left

Funcionamento da Propriedade Abreviada

Então, é assim que funciona:

• Se a propriedade margin tiver quatro valores: margin: 25px 50px 75px 100px;
• A margem superior será 25px.
• A margem direita será 50px.
• A margem inferior será 75px.
• A margem esquerda será 100px.

Exemplo de Quatro Valores

Se a propriedade margin tiver três valores:

• A margem superior será 25px.
• As margens direita e esquerda serão 50px.
• A margem inferior será 75px.

Exemplo de Três Valores

Se a propriedade margin tiver dois valores:

• A margem superior e inferior serão 25px.
• As margens direita e esquerda serão 50px.

Exemplo de Dois Valores

Se a propriedade margin tiver um valor:

• Todas as quatro margens serão 25px.

Exemplo de Um Valor

O Valor Auto

Você pode definir a propriedade margin para auto para centralizar horizontalmente o elemento dentro de seu contêiner.

O elemento ocupará a largura especificada e o espaço restante será dividido igualmente entre as margens esquerda e direita.

Exemplo de Margin Auto

O Valor Herdado

Este exemplo permite que a margem esquerda do elemento <p class="ex1"> seja herdada do elemento pai (<div>).

Exemplo de Uso do Valor Herdado

Capítulo 18: Colapso de Margem e Preenchimento CSS

Colapso de Margem

Às vezes, duas margens se transformam em uma única margem.

As margens superior e inferior dos elementos às vezes são reduzidas a uma única margem, que é igual à maior das duas margens.

Isso não acontece nas margens esquerda e direita! Só nas margens superior e inferior!

Exemplo de Colapso de Margem

No exemplo acima, o elemento <h1> tem uma margem inferior de 50px e o elemento <h2> tem uma margem superior definida como 20px.

O senso comum sugeriria que a margem vertical entre <h1> e <h2> seria de 70px (50px + 20px), mas devido ao colapso da margem, a margem real acaba sendo 50px.

Todas as Propriedades de Margem CSS

Preenchimento CSS

O preenchimento é usado para criar espaço ao redor do conteúdo de um elemento, dentro de quaisquer bordas definidas.

Exemplo de Preenchimento

Preenchimento CSS

As propriedades CSS padding são usadas para gerar espaço ao redor do conteúdo de um elemento, dentro de quaisquer bordas definidas.

Com CSS, você tem controle total sobre o padding. Há propriedades para definir o padding para cada lado de um elemento (topo, direita, base e esquerda).

Acolchoamento - Lados Individuais

CSS tem propriedades para especificar o preenchimento para cada lado de um elemento:

• padding-top
• padding-right
• padding-bottom
• padding-left

Valores de Preenchimento

As propriedades de preenchimento podem ter os seguintes valores:

• comprimento - especifica um preenchimento em px, pt, cm, etc.
• % - especifica um preenchimento em % da largura do elemento que o contém.
• herdar - especifica que o preenchimento deve ser herdado do elemento pai.

Observação: valores negativos não são permitidos.

Exemplo de Preenchimento Diferente

Padding - Propriedade de Taquigrafia

Para encurtar o código, é possível especificar todas as propriedades de preenchimento em uma única propriedade.

A propriedade padding é uma propriedade abreviada para as seguintes propriedades de preenchimento individuais:

• padding-top
• padding-right
• padding-bottom
• padding-left

Funcionamento da Propriedade Abreviada

Então, é assim que funciona:

• Se a propriedade padding tiver quatro valores: padding: 25px 50px 75px 100px;
• O preenchimento superior será 25px.
• O preenchimento direito será 50px.
• O preenchimento inferior será 75px.
• O preenchimento esquerdo será 100px.

Exemplo de Quatro Valores

Se a propriedade padding tiver três valores:

• O preenchimento superior será 25px.
• Os preenchimentos direito e esquerdo serão 50px.
• O preenchimento inferior será 75px.

Exemplo de Três Valores

Se a propriedade padding tiver dois valores:

• Os preenchimentos superior e inferior serão 25px.
• Os preenchimentos direito e esquerdo serão 50px.

Exemplo de Dois Valores

Se a propriedade padding tiver um valor:

• Todos os quatro preenchimentos serão 25px.

Exemplo de Um Valor

Preenchimento e Largura do Elemento

A propriedade CSS width especifica a largura da área de conteúdo do elemento. A área de conteúdo é a porção dentro do padding, border e margin de um elemento (o box model).

Então, se um elemento tem uma largura especificada, o padding adicionado a esse elemento será adicionado à largura total do elemento. Esse é frequentemente um resultado indesejável.

Exemplo de Preenchimento e Largura

No exemplo acima, o elemento <div> recebe uma largura de 300px. No entanto, a largura real do elemento será 350px (300px + 25px de preenchimento esquerdo + 25px de preenchimento direito).

Usando box-sizing para Manter a Largura

Para manter a largura em 300px, não importa a quantidade de padding, você pode usar a propriedade box-sizing. Isso faz com que o elemento mantenha sua largura real, mesmo se o padding aumentar.

Mais Exemplos

Defina o preenchimento esquerdo:

Defina o preenchimento direito:

Defina o preenchimento superior:

Defina o preenchimento inferior:

Todas as Propriedades de Preenchimento CSS

Capítulo 19: Altura, Largura e Largura Máxima CSS

O CSS height e width são propriedades usadas para definir a altura e a largura de um elemento.

A max-width propriedade CSS é usada para definir a largura máxima de um elemento.

Este elemento tem uma altura de 50 pixels e uma largura de 100%.

Configuração CSS de Altura e Largura

As propriedades height e width são usadas para definir a altura e a largura de um elemento.

As propriedades height e width não incluem padding, bordas ou margens. Elas definem a altura/largura da área dentro do padding, borda e margem do elemento.

Valores de Altura e Largura CSS

As propriedades height e width podem ter os seguintes valores:

• auto - Este é o padrão. O navegador calcula a altura e a largura.
• length - Define a altura/largura em px, cm, etc.
• % - Define a altura/largura em porcentagem do bloco que o contém.
• initial - Define a altura/largura para seu valor padrão.
• inherit - A altura/largura será herdada do valor pai.

Exemplos de Altura e Largura CSS

Este elemento tem uma altura de 200 pixels e uma largura de 50%:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Este elemento tem uma altura de 100 pixels e uma largura de 500 pixels:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Nota: Lembre-se de que as propriedades height e width não incluem padding, bordas ou margens! Elas definem a altura/largura da área dentro do padding, borda e margem do elemento.

Configurando max-width

A max-width propriedade é usada para definir a largura máxima de um elemento.

Pode max-width ser especificado em valores de comprimento, como px, cm, etc., ou em porcentagem (%) do bloco que o contém, ou definido como nenhum (este é o padrão. Significa que não há largura máxima).

O problema com o <div> acima ocorre quando a janela do navegador é menor que a largura do elemento (500px). O navegador então adiciona uma barra de rolagem horizontal à página.

Usar max-width em vez disso, nessa situação, melhorará o manuseio de janelas pequenas pelo navegador.

Dica: Arraste a janela do navegador para uma largura menor que 500px para ver a diferença entre os dois divs!

Este elemento tem uma altura de 100 pixels e uma largura máxima de 500 pixels:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Experimente Você Mesmo - Exemplos

Definir a altura e a largura dos elementos

Este exemplo demonstra como definir a altura e a largura de diferentes elementos.

Definir a altura e a largura de uma imagem usando porcentagem

Este exemplo demonstra como definir a altura e a largura de uma imagem usando um valor percentual.

Definir largura mínima e largura máxima de um elemento

Este exemplo demonstra como definir uma largura mínima e uma largura máxima de um elemento usando um valor de pixel.

Definir altura mínima e altura máxima de um elemento

Este exemplo demonstra como definir uma altura mínima e uma altura máxima de um elemento usando um valor de pixel.

Todas as Propriedades de Dimensão CSS

Capítulo 20: Modelo de Caixa CSS

Todos os elementos HTML podem ser considerados caixas.

O Modelo de Caixa CSS

Em CSS, o termo "modelo de caixa" é usado quando se fala em design e layout.

O modelo de caixa CSS é essencialmente uma caixa que envolve cada elemento HTML. Ele consiste em: conteúdo, preenchimento, bordas e margens. A imagem abaixo ilustra o modelo de caixa:

Explicação das Diferentes Partes:

• Conteúdo - O conteúdo da caixa, onde aparecem texto e imagens.
• Padding - Limpa uma área ao redor do conteúdo. O padding é transparente.
• Borda - Uma borda que circunda o preenchimento e o conteúdo.
• Margem - Limpa uma área fora da borda. A margem é transparente.

O modelo de caixa nos permite adicionar uma borda ao redor dos elementos e definir o espaço entre eles.

Exemplo

Demonstração do modelo de caixa:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Largura e Altura de um Elemento

Para definir a largura e a altura de um elemento corretamente em todos os navegadores, você precisa saber como o modelo de caixa funciona.

Importante: Quando você define as propriedades width e height de um elemento com CSS, você apenas define a largura e altura da área de conteúdo. Para calcular a largura e altura totais de um elemento, você também deve incluir o padding e as bordas.

Exemplo

Este elemento <div> terá uma largura total de 350px e uma altura total de 80px:

div {
  width: 320px;
  height: 50px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Cálculo

Aqui está o cálculo:

• 320px (largura da área de conteúdo)
• + 20px (preenchimento esquerdo + preenchimento direito)
• + 10px (borda esquerda + borda direita)
• = 350px (largura total)

• 50px (altura da área de conteúdo)
• + 20px (preenchimento superior + preenchimento inferior)
• + 10px (borda superior + borda inferior)
• = 80px (altura total)

Cálculos de Largura e Altura Total

A largura total de um elemento deve ser calculada assim:

Largura total do elemento = largura + preenchimento esquerdo + preenchimento direito + borda esquerda + borda direita

A altura total de um elemento deve ser calculada assim:

Altura total do elemento = altura + preenchimento superior + preenchimento inferior + borda superior + borda inferior

Nota

A propriedade margin também afeta o espaço total que a caixa ocupará na página, mas a margem não está incluída no tamanho real da caixa. A largura e a altura totais da caixa param na borda.

Capítulo 21: Esboço CSS

Um contorno é uma linha desenhada fora da borda do elemento.

Esboço CSS

Um contorno é uma linha desenhada ao redor de elementos, FORA das bordas, para fazer o elemento "se destacar".

CSS tem as seguintes propriedades de estrutura:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Nota: O outline é diferente de borders! Diferentemente de border, o outline é desenhado fora da borda do elemento e pode sobrepor outro conteúdo. Além disso, o outline NÃO é parte das dimensões do elemento; a largura e altura totais do elemento não são afetadas pela largura do outline.

Estilo de Estrutura de Tópicos CSS

A outline-style propriedade especifica o estilo do contorno e pode ter um dos seguintes valores:

• dotted - Define um contorno pontilhado
• dashed - Define um contorno tracejado
• solid - Define um contorno sólido
• double - Define um contorno duplo
• groove - Define um contorno ranhurado 3D
• ridge - Define um contorno 3D estriado
• inset - Define um contorno de inserção 3D
• outset - Define um esboço de início 3D
• none - Não define nenhum contorno
• hidden - Define um contorno oculto

O exemplo a seguir mostra os diferentes valores de outline-style:

Observação: Nenhuma das outras propriedades de estrutura de tópicos (sobre as quais você aprenderá mais nos próximos capítulos) terá QUALQUER efeito, a menos que a outline-style propriedade seja definida!

Largura do Contorno CSS

A outline-width propriedade especifica a largura do contorno e pode ter um dos seguintes valores:

• fino (normalmente 1px)
• médio (normalmente 3px)
• grosso (normalmente 5px)
• Um tamanho específico (em px, pt, cm, em, etc.)

O exemplo a seguir mostra alguns contornos com larguras diferentes:

Exemplo de Código

Veja abaixo o código CSS para os exemplos acima:

p.ex1 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thin;
}

p.ex2 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: medium;
}

p.ex3 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: thick;
}

p.ex4 {
  border: 1px solid black;
  outline-style: solid;
  outline-color: red;
  outline-width: 4px;
}

Capítulo 22: Cor do Contorno CSS

Cor do Contorno CSS

A outline-color propriedade é usada para definir a cor do contorno.

A cor pode ser definida por:

• nome - Especifique um nome de cor, como "vermelho"
• HEX - Especifique um valor hexadecimal, como "#ff0000"
• RGB - Especifique um valor RGB, como "rgb(255,0,0)"
• HSL - Especifique um valor HSL, como "hsl(0, 100%, 50%)"
• inverter - Executa uma inversão de cores (o que garante que o contorno fique visível, independentemente da cor de fundo)

O exemplo a seguir mostra alguns contornos diferentes com cores diferentes. Observe também que esses elementos também têm uma borda preta fina dentro do contorno:

Exemplo de Código

Veja abaixo o código CSS para os exemplos acima:

p.ex1 {
  border: 2px solid black;
  outline-style: solid;
  outline-color: red;
}

p.ex2 {
  border: 2px solid black;
  outline-style: dotted;
  outline-color: blue;
}

p.ex3 {
  border: 2px solid black;
  outline-style: outset;
  outline-color: grey;
}

Valores HEX

A cor do contorno também pode ser especificada usando um valor hexadecimal (HEX):

p.ex1 {
  outline-style: solid;
  outline-color: #ff0000; /* red */
}

Valores RGB

Ou usando valores RGB:

p.ex1 {
  outline-style: solid;
  outline-color: rgb(255, 0, 0); /* red */
}

Valores HSL

Você também pode usar valores HSL:

p.ex1 {
  outline-style: solid;
  outline-color: hsl(0, 100%, 50%); /* red */
}

Esboço CSS - Propriedade Abreviada

A outline é uma propriedade abreviada para definir as seguintes propriedades de estrutura individuais:

• outline-width
• outline-style (obrigatório)
• outline-color

A outline propriedade é especificada como um, dois ou três valores da lista acima. A ordem dos valores não importa.

O exemplo a seguir mostra alguns contornos especificados com a outline propriedade shorthand:

Exemplo de Código

Veja abaixo o código CSS para os exemplos acima:

p.ex1 {outline: dashed;}

p.ex2 {outline: dotted red;}

p.ex3 {outline: 5px solid yellow;}

p.ex4 {outline: thick ridge pink;}

Deslocamento de Contorno CSS

A outline-offset propriedade adiciona espaço entre um contorno e a borda/borda de um elemento. O espaço entre um elemento e seu contorno é transparente.

O exemplo a seguir especifica um contorno de 15px fora da borda:

p {
  margin: 30px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

O exemplo a seguir mostra que o espaço entre um elemento e seu contorno é transparente:

p {
  margin: 30px;
  background: yellow;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 15px;
}

Todas as Propriedades do CSS Outline

Capítulo 23: Texto CSS

Formatação de Texto

Este texto é estilizado com algumas das propriedades de formatação de texto. O título usa as propriedades text-align, text-transform e color. O parágrafo é recuado, alinhado e o espaço entre os caracteres é especificado. O sublinhado é removido deste link colorido "Tente você mesmo".

Cor do Texto

A color propriedade é usada para definir a cor do texto. A cor pode ser especificada por:

• um nome de cor - como "vermelho"
• um valor HEX - como "#ff0000"
• um valor RGB - como "rgb(255,0,0)"

A cor padrão do texto de uma página é definida no seletor do corpo. Exemplo:

body {
  color: blue;
}

h1 {
  color: green;
}

Cor do Texto e Cor de Fundo

Neste exemplo, definimos as propriedades background-color e color:

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

Importante: Alto contraste é muito importante para pessoas com problemas de visão. Sempre garanta que o contraste entre a cor do texto e a cor de fundo (ou imagem de fundo) seja bom.

A Propriedade CSS Text Color

Decoração de Texto CSS

Neste capítulo, você aprenderá sobre as seguintes propriedades de decoração de texto:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration

Adicionar uma Linha de Decoração ao Texto

A text-decoration-line propriedade é usada para adicionar uma linha de decoração ao texto. Você pode combinar mais de um valor, como sobrelinhado e sublinhado, para exibir linhas sobre e sob um texto.

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Observação: Não é recomendável sublinhar texto que não seja um link, pois isso geralmente confunde o leitor.

Especifique uma Cor para a Linha de Decoração

A text-decoration-color propriedade é usada para definir a cor da linha de decoração:

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Especifique um Estilo para a Linha de Decoração

A text-decoration-style propriedade é usada para definir o estilo da linha de decoração:

h1 {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Especifique a Espessura da Linha de Decoração

A text-decoration-thickness propriedade é usada para definir a espessura da linha de decoração:

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

A Propriedade Taquigráfica

A text-decoration é uma propriedade abreviada para:

• text-decoration-line (obrigatório)
• text-decoration-color (opcional)
• text-decoration-style (opcional)
• text-decoration-thickness (opcional)

Exemplo de uso:

h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}

Remover o Sublinhado dos Links

Todos os links em HTML são sublinhados por padrão. Às vezes, você pode querer estilizar os links sem o sublinhado. Use text-decoration: none; para remover o sublinhado:

a {
  text-decoration: none;
}

Todas as Propriedades de Decoração de Texto CSS

Capítulo 24: Transformação e Espaçamento de Texto CSS

Transformação de Texto

A text-transform propriedade é usada para especificar letras maiúsculas e minúsculas em um texto.

Ele pode ser usado para transformar todo o texto em letras maiúsculas ou minúsculas, ou colocar a primeira letra de cada palavra em maiúscula:

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

A Propriedade de Transformação de Texto CSS

Espaçamento de Texto

Neste capítulo você aprenderá sobre as seguintes propriedades de espaçamento de texto:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Recuo de Texto

A text-indent propriedade é usada para especificar o recuo da primeira linha de um texto:

p {
  text-indent: 50px;
}

Espaçamento entre Letras

A letter-spacing propriedade é usada para especificar o espaço entre os caracteres em um texto. O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre caracteres:

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

Altura da Linha

A line-height propriedade é usada para especificar o espaço entre as linhas:

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

Espaçamento entre Palavras

A word-spacing propriedade é usada para especificar o espaço entre as palavras em um texto. O exemplo a seguir demonstra como aumentar ou diminuir o espaço entre as palavras:

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

Espaço em Branco

A white-space propriedade especifica como o espaço em branco dentro de um elemento é tratado. Este exemplo demonstra como desabilitar a quebra de texto dentro de um elemento:

p {
  white-space: nowrap;
}

Propriedades de Espaçamento de Texto CSS

Capítulo 25: Sombra de Texto CSS

Sombra de Texto

A text-shadow propriedade adiciona sombra ao texto.

Uso Simples

Em seu uso mais simples, você especifica apenas a sombra horizontal (2px) e a sombra vertical (2px):

h1 {
  text-shadow: 2px 2px;
}

Adicionando Cor à Sombra

Agora, vamos adicionar uma cor (vermelho) à sombra:

h1 {
  text-shadow: 2px 2px red;
}

Adicionando Efeito de Desfoque

Em seguida, adicionamos um efeito de desfoque (5px) à sombra:

h1 {
  text-shadow: 2px 2px 5px red;
}

Mais Exemplos de Sombra de Texto

Exemplo 1

Sombra de texto em um texto branco:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Exemplo 2

Sombra de texto com brilho neon vermelho:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Exemplo 3

Sombra de texto com brilho neon vermelho e azul:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Exemplo 4

Texto com múltiplos efeitos de sombra:

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

A Propriedade CSS Text Shadow

Capítulo 26: A Propriedade CSS Font-Family

A propriedade font-family em CSS é usada para especificar a fonte de um texto.

Observação: Se o nome da fonte tiver mais de uma palavra, ele deve estar entre aspas, como: "Times New Roman".

Dica:

A propriedade font-family deve conter vários nomes de fontes como um sistema "fallback" para garantir compatibilidade máxima entre navegadores/sistemas operacionais. Comece com a fonte que você quer, e termine com uma família genérica (para deixar o navegador escolher uma fonte similar na família genérica, se nenhuma outra fonte estiver disponível). Os nomes das fontes devem ser separados por uma vírgula.

Leia mais sobre fontes fallback no próximo capítulo.

Exemplo

Especifique algumas fontes diferentes para três parágrafos:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}

Fontes CSS Seguras para a Web

Fontes seguras para a web são fontes instaladas universalmente em todos os navegadores e dispositivos.

Fontes de Fallback

Não existem fontes 100% seguras para a web. Há sempre uma chance de uma fonte não ser encontrada ou não estar instalada corretamente. Portanto, é muito importante sempre usar fontes alternativas.

Isso significa que você deve adicionar uma lista de "fontes de backup" semelhantes na propriedade font-family. Se a primeira fonte não funcionar, o navegador tentará a próxima, e assim por diante. Sempre termine a lista com um nome de família de fontes genérico.

Exemplo

Aqui, há três tipos de fonte: Tahoma, Verdana e sans-serif. A segunda e a terceira fontes são backups, caso a primeira não seja encontrada:

p {
  font-family: Tahoma, Verdana, sans-serif;
}

Melhores Fontes Seguras para HTML e CSS

A lista a seguir contém as melhores fontes seguras para HTML e CSS:

• Arial (sem serifa)
• Verdana (sem serifa)
• Tahoma (sem serifa)
• Trebuchet MS (sem serifa)
• Times New Roman (serifa)
• Geórgia (serifa)
• Garamond (serifa)
• Courier New (monoespaço)
• Brush Script MT (cursiva)
• Comic Sans MS (sem serifa)

Exemplos de Fontes

Arial (sem serifa)

Arial é a fonte mais amplamente usada para mídia online e impressa. É uma das fontes mais seguras e está disponível em todos os principais sistemas operacionais.

p {
  font-family: Arial, Helvetica, sans-serif;
}

Verdana (sem serifa)

Verdana é uma fonte muito popular. Ela é facilmente legível mesmo para tamanhos de fonte pequenos.

p {
  font-family: Verdana, Geneva, sans-serif;
}

Tahoma (sem serifa)

Tahoma tem menos espaço entre os caracteres.

p {
  font-family: Tahoma, Verdana, sans-serif;
}

Trebuchet MS (sem serifa)

Trebuchet MS foi criada pela Microsoft em 1996. Não é suportada por todos os sistemas operacionais móveis.

p {
  font-family: "Trebuchet MS", Arial, sans-serif;
}

Times New Roman (serifa)

Times New Roman é uma das fontes mais reconhecidas do mundo, com aparência profissional e muito utilizada em jornais.

p {
  font-family: "Times New Roman", Times, serif;
}

Geórgia (serifa)

Georgia é uma fonte serifada elegante e legível em diferentes tamanhos de fonte.

p {
  font-family: Georgia, serif;
}

Garamond (serifa)

Garamond é uma fonte clássica usada em muitos livros impressos, com boa legibilidade.

p {
  font-family: Garamond, serif;
}

Courier New (monoespaço)

Courier New é uma fonte monoespaçada, frequentemente usada em displays de codificação.

p {
  font-family: "Courier New", Courier, monospace;
}

Brush Script MT (cursiva)

Brush Script MT foi projetada para imitar a escrita à mão, elegante, mas difícil de ler em textos longos.

p {
  font-family: "Brush Script MT", cursive;
}

Comic Sans MS (sem serifa)

Comic Sans MS é uma fonte descontraída e frequentemente criticada por seu uso inadequado em contextos formais.

p {
  font-family: "Comic Sans MS", cursive, sans-serif;
}

Capítulo 27: Fontes CSS Alternativas

Fontes Alternativas Comumente Usadas

Abaixo estão algumas fontes alternativas comumente usadas, organizadas pelas 5 famílias de fontes genéricas:

Fontes Serifadas

font-family: "Times New Roman", Times, serif;

font-family: Georgia, serif;

font-family: Garamond, serif;

Fontes Sans-Serif

font-family: Arial, Helvetica, sans-serif;

font-family: Tahoma, Verdana, sans-serif;

font-family: "Trebuchet MS", Helvetica, sans-serif;

font-family: Geneva, Verdana, sans-serif;

Fontes Monoespaçadas

font-family: "Courier New", Courier, monospace;

Fontes Cursivas

font-family: "Brush Script MT", cursive;

Fontes de Fantasia

font-family: Copperplate, Papyrus, fantasy;

Estilos de Fonte CSS

Estilo da Fonte

A propriedade font-style é usada principalmente para especificar texto em itálico. Esta propriedade tem três valores:

• normal - O texto é exibido normalmente
• itálico - O texto é mostrado em itálico
• oblíquo - O texto está "inclinado" (oblíquo é muito semelhante ao itálico, mas menos suportado)

Exemplo:

p.normal { font-style: normal; }

p.italic { font-style: italic; }

p.oblique { font-style: oblique; }

Peso da Fonte

A propriedade font-weight especifica o peso de uma fonte.

Exemplo:

p.normal { font-weight: normal; }

p.thick { font-weight: bold; }

Variante de Fonte

A propriedade font-variant especifica se um texto deve ou não ser exibido em fonte de caixa baixa.

Em uma fonte small-caps, todas as letras minúsculas são convertidas em letras maiúsculas, mas com um tamanho de fonte menor do que as letras maiúsculas originais no texto.

Exemplo:

p.normal { font-variant: normal; }

p.small { font-variant: small-caps; }

Tamanho da Fonte CSS

Tamanho da Fonte

A propriedade font-size define o tamanho do texto. O valor do tamanho pode ser absoluto ou relativo:

• Tamanho absoluto: Define o texto para um tamanho especificado.
• Tamanho relativo: Define o tamanho em relação aos elementos circundantes e permite que o usuário altere o tamanho do texto nos navegadores.

Observação: Se você não especificar um tamanho de fonte, o tamanho padrão para texto normal, como parágrafos, será 16px (16px = 1em).

Definir Tamanho da Fonte com Pixels:

h1 { font-size: 40px; }

h2 { font-size: 30px; }

p { font-size: 14px; }

Definir Tamanho da Fonte com Em:

Para permitir que os usuários redimensionem o texto, muitos desenvolvedores usam em em vez de pixels.

h1 { font-size: 2.5em; }

h2 { font-size: 1.875em; }

p { font-size: 0.875em; }

Usar uma combinação de Porcentagem e Em:

body { font-size: 100%; }

h1 { font-size: 2.5em; }

p { font-size: 0.875em; }

Tamanho de Fonte Responsivo

O tamanho do texto pode ser definido com a unidade vw, que significa "largura da janela de visualização", ajustando-se ao tamanho da janela do navegador.

Exemplo:

<h1 style="font-size:10vw">Hello World</h1>

Capítulo 28: Fontes CSS do Google

Fontes do Google

Se você não quiser usar nenhuma das fontes padrão em HTML, você pode usar o Google Fonts.

O Google Fonts é gratuito e tem mais de 1.000 fontes para você escolher.

Como usar fontes do Google

Basta adicionar um link de folha de estilo especial na seção <head> e então consultar a fonte no CSS.

Exemplo 1:

Aqui, queremos usar uma fonte chamada "Sofia" do Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
  <style>
    body {
      font-family: "Sofia", sans-serif;
    }
  </style>
</head>
                    

Exemplo 2:

Aqui, queremos usar uma fonte chamada "Trirong" do Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
  <style>
    body {
      font-family: "Trirong", serif;
    }
  </style>
</head>
                    

Exemplo 3:

Aqui, queremos usar uma fonte chamada "Audiowide" do Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
  <style>
    body {
      font-family: "Audiowide", sans-serif;
    }
  </style>
</head>
                    

Nota: Ao especificar uma fonte em CSS, sempre liste no mínimo uma fonte fallback (para evitar comportamentos inesperados). Então, aqui também você deve adicionar uma família de fontes genérica (como serif ou sans-serif) ao final da lista.

Usando várias fontes do Google

Para usar várias fontes do Google, basta separar os nomes das fontes com uma barra vertical (|), assim:

Exemplo:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
  <style>
    h1.a {font-family: "Audiowide", sans-serif;}
    h1.b {font-family: "Sofia", sans-serif;}
    h1.c {font-family: "Trirong", serif;}
  </style>
</head>
                    

Nota: Solicitar várias fontes pode deixar suas páginas da web mais lentas! Então, tenha cuidado com isso.

Estilizando fontes do Google

Você pode estilizar o Google Fonts como quiser, com CSS!

Exemplo:

Estilize a fonte "Sofia":

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
  <style>
    body {
      font-family: "Sofia", sans-serif;
      font-size: 30px;
      text-shadow: 3px 3px 3px #ababab;
    }
  </style>
</head>
                    

Habilitando efeitos de fonte

O Google também habilitou diferentes efeitos de fonte que você pode usar.

Primeiro, adicione à API do Google, depois adicione um nome de classe especial ao elemento que vai usar o efeito especial. O nome da classe sempre começa com font-effect- seguido do nome do efeito.

Exemplo:

Adicione o efeito de fogo à fonte "Sofia":

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
  <style>
    body {
      font-family: "Sofia", sans-serif;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <h1 class="font-effect-fire">Sofia on Fire</h1>
</body>
                    

Exemplo com vários efeitos:

Para solicitar vários efeitos de fonte, basta separar os nomes dos efeitos com uma barra vertical (|), assim:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
  <style>
    body {
      font-family: "Sofia", sans-serif;
      font-size: 30px;
    }
  </style>
</head>

<body>
  <h1 class="font-effect-neon">Neon Effect</h1>
  <h1 class="font-effect-outline">Outline Effect</h1>
  <h1 class="font-effect-emboss">Emboss Effect</h1>
  <h1 class="font-effect-shadow-multiple">Multiple Shadow Effect</h1>
</body>
                    

Capítulo 29: CSS - Excelentes Pares de Fontes

Ótimas Combinações de Fontes

Ótimas combinações de fontes são essenciais para um ótimo design.

Regras de Pareamento de Fontes

Aqui estão algumas regras básicas para criar ótimas combinações de fontes:

• Complement: É sempre seguro encontrar pares de fontes que se complementem. Uma ótima combinação de fontes deve ser harmoniosa, sem ser muito parecida ou muito diferente.
• Use Superfamílias de Fontes: Uma superfamília de fontes é um conjunto de fontes projetadas para funcionar bem juntas. Usar fontes diferentes dentro da mesma superfamília é seguro.
• O Contraste é Rei: Dúas fontes muito parecidas frequentemente entrarão em conflito. Contrastando da maneira certa, você pode trazer o melhor de cada fonte. Por exemplo, combinar serif com sans serif é uma combinação bem conhecida.
• Escolha Apenas um Chefe: Uma fonte deve ser a "chefe". Isso estabelece uma hierarquia para as fontes na sua página, podendo ser alcançado variando o tamanho, peso e cor.

Exemplo de Fonte "Chefe"

Veja como o uso da fonte "Georgia" no título pode estabelecer uma hierarquia:

body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}
                    

Exemplos de Pares de Fontes Populares

Abaixo, mostramos alguns pares de fontes populares que combinam com muitas marcas e contextos.

Geórgia e Verdana

Georgia e Verdana é uma combinação clássica e segue os padrões de fontes seguras para a web:

<style>
  body {
    font-family: Verdana, sans-serif;
    font-size: 16px;
    color: gray;
  }
  h1 {
    font-family: Georgia, serif;
    font-size: 60px;
    color: white;
  }
</style>
<body>
  <h1>Beautiful Norway</h1>
  Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
</body>
                    

Helvetica e Garamond

Outra combinação clássica de fontes seguras para a web:

<style>
  body {
    font-family: Garamond, serif;
    font-size: 16px;
    color: gray;
  }
  h1 {
    font-family: Helvetica, sans-serif;
    font-size: 60px;
    color: white;
  }
</style>
<body>
  <h1>Beautiful Norway</h1>
  Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).
</body>
                    

Google Fonts - Pares Populares

Se você não quiser usar fontes padrão em HTML, você pode usar o Google Fonts. Aqui estão alguns pares populares de fontes do Google:

Merriweather e Open Sans

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Merriweather&family=Open+Sans&display=swap">
<style>
  h1 {
    font-family: 'Merriweather', serif;
  }
  p {
    font-family: 'Open Sans', sans-serif;
  }
</style>
<body>
  <h1>Beautiful Norway</h1>
  <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
</body>
                    

Ubuntu e Lora

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu&family=Lora&display=swap">
<style>
  h1 {
    font-family: 'Ubuntu', sans-serif;
  }
  p {
    font-family: 'Lora', serif;
  }
</style>
<body>
  <h1>Beautiful Norway</h1>
  <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
</body>
                    

Abril Fatface e Poppins

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins&display=swap">
<style>
  h1 {
    font-family: 'Abril Fatface', cursive;
  }
  p {
    font-family: 'Poppins', sans-serif;
  }
</style>
<body>
  <h1>Beautiful Norway</h1>
  <p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020).</p>
</body>
                    

Capítulo 30: Propriedade da Fonte CSS

A Propriedade da Fonte CSS

A propriedade font em CSS permite encurtar o código, especificando todas as propriedades individuais de uma fonte em uma única declaração. Ela é uma propriedade abreviada que engloba as seguintes propriedades:

• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family

Nota: Os valores font-size e font-family são obrigatórios. Se um dos outros valores estiver faltando, seus valores padrão serão usados.

Exemplo

Você pode usar a propriedade font para definir várias propriedades de fonte em uma declaração:

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}
                    

Todas as Propriedades da Fonte CSS

Abaixo está uma tabela explicando todas as propriedades da fonte em CSS:

Capítulo 31: Ícones CSS

Ícones podem ser facilmente adicionados à sua página HTML usando uma biblioteca de ícones.

Como adicionar ícones

A maneira mais simples de adicionar um ícone à sua página HTML é com uma biblioteca de ícones, como o Font Awesome.

Adicione o nome da classe de ícone especificada a qualquer elemento HTML embutido (como <i> ou <span>).

Todos os ícones nas bibliotecas de ícones abaixo são vetores escaláveis ​​que podem ser personalizados com CSS (tamanho, cor, sombra, etc.).

Ícones de Fontes Incríveis

Para usar os ícones do Font Awesome, acesse fontawesome.com, faça login e obtenha um código para adicionar na seção <head> da sua página HTML:

<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>

Observação: Não é necessário fazer download ou instalar!

Exemplo

Exemplo de código para ícones do Font Awesome:

<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>
                    

Ícones do Bootstrap

Para usar os ícones do Bootstrap, adicione a seguinte linha dentro da seção <head> da sua página HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Observação: Não é necessário fazer download ou instalar!

Exemplo

Exemplo de código para ícones do Bootstrap:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>

</body>
</html>
                    

Ícones do Google

Para usar os ícones do Google, adicione a seguinte linha dentro da seção <head> da sua página HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Observação: Não é necessário fazer download ou instalar!

Exemplo

Exemplo de código para ícones do Google:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>

</body>
</html>
                    

Capítulo 32: Links CSS

Links de Estilo

Com CSS, os links podem ser estilizados de várias maneiras. A propriedade text-decoration é usada para modificar o estilo do link, como sublinhar ou remover o sublinhado.

Exemplo de Estilização de Links

Você pode estilizar os links com várias propriedades CSS, como color, font-family, background, etc. Aqui está um exemplo básico de estilização de links:

Os Quatro Estados de Links

Os links podem ter estilos diferentes dependendo do estado em que se encontram. Os quatro estados de links são:

• a:link - Um link normal e não visitado
• a:visited - Um link que o usuário visitou
• a:hover - Um link quando o usuário passa o mouse sobre ele
• a:active - Um link no momento em que é clicado

Exemplo de Estilo de Estados de Links

Quando você define o estilo para os estados de link, algumas regras de ordem devem ser seguidas:

• a:hover deve vir depois de a:link e a:visited
• a:active deve vir depois de a:hover

Decoração de Texto

A propriedade text-decoration é usada principalmente para remover sublinhados de links:

Cor de Fundo

A propriedade background-color pode ser usada para definir uma cor de fundo para os links:

Botões de Link

Você pode exibir links como botões estilizados, combinando várias propriedades CSS:

Mais Exemplos de Links Estilizados

Aqui estão outros exemplos de como estilizar links:

Exemplo de Links como Botões

Cursores de Links

Este exemplo demonstra os diferentes tipos de cursores que podem ser usados em links:

Capítulo 33: Tipos de Cursores CSS

Este capítulo explora os diferentes tipos de cursores que podem ser usados em links, botões e outros elementos HTML.

Os cursores em CSS podem ser personalizados para indicar ao usuário o tipo de interação possível com os elementos na página. Existem diversos tipos de cursores, como o pointer para indicar links clicáveis ou o move para indicar um item que pode ser arrastado.

Exemplo 1: Diferentes tipos de cursores

Este exemplo demonstra os diferentes tipos de cursores que podem ser usados em links:

Exemplo 2: Aplicando cursores a botões

Você também pode usar os cursores em botões para melhorar a experiência do usuário. Aqui está um exemplo com o cursor pointer e move em botões de ação:

Clique aqui
Mover
                

Exemplo 3: Cursores para links interativos

Além de indicar o tipo de ação, você também pode adicionar estilo a links usando cursores, para indicar interações especiais, como no exemplo a seguir:

Link de Clique
Link de Ajuda
Link de Progresso
                

Exemplo 4: Cursores em campos de formulário

Você também pode personalizar os cursores em campos de formulário. Veja o exemplo abaixo, onde o cursor é alterado ao passar sobre o campo de texto e o botão:

Enviar
                

Conclusão

Os cursores são uma maneira eficaz de melhorar a interação do usuário com a sua página. Ao utilizar diferentes tipos de cursores, você pode fornecer pistas visuais sobre a funcionalidade dos elementos. Seja em links, botões, campos de formulário ou qualquer outro elemento HTML, o uso adequado de cursores pode tornar a navegação mais intuitiva.

Capítulo 34: Listas CSS

Este capítulo explora como estilizar listas HTML com CSS, incluindo tipos de listas, marcadores, imagens como marcadores e cores de fundo.

Exemplo 1: Listas Não Ordenadas

Este exemplo mostra uma lista não ordenada em HTML:

  
Café
  
Chá
  
Coca Cola

                

Exemplo 2: Listas Ordenadas

Este exemplo mostra uma lista ordenada em HTML:

  
Café
  
Chá
  
Coca Cola

                

Exemplo 3: Estilizando Marcadores de Lista

Este exemplo mostra como alterar os marcadores de lista utilizando a propriedade list-style-type:

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}
                

Exemplo 4: Usando Imagem como Marcador de Lista

A propriedade list-style-image pode ser usada para definir uma imagem como marcador de lista:

ul {
  list-style-image: url('sqpurple.gif');
}
                

Exemplo 5: Alterando a Posição do Marcador

Você pode alterar a posição do marcador usando a propriedade list-style-position:

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}
                

Exemplo 6: Removendo os Marcadores Padrão

Você pode remover os marcadores padrão usando a propriedade list-style-type: none:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
                

Exemplo 7: Propriedade Taquigráfica list-style

A propriedade list-style é uma forma abreviada para definir todas as propriedades de estilo de listas em uma única declaração:

ul {
  list-style: square inside url('sqpurple.gif');
}
                

Exemplo 8: Estilizando Listas com Cores

Você pode adicionar cores às listas para torná-las mais interessantes:

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  color: darkred;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  color: darkblue;
  margin: 5px;
}
                

Conclusão

As listas CSS oferecem muitas opções de personalização, permitindo que você altere marcadores, posicione itens de lista e adicione cores e imagens para melhorar a aparência das listas em sua página.

Capítulo 35: Layout CSS - A Propriedade display

A Propriedade display

A propriedade display é uma das mais importantes para controlar o layout de elementos em uma página da web.

A propriedade de exibição define como um elemento é mostrado na página. Cada elemento HTML tem um valor de exibição padrão, dependendo do tipo de elemento.

Existem diferentes valores para a propriedade display, permitindo que você altere o comportamento de exibição de um elemento HTML. A seguir, vamos explorar alguns desses valores e seus exemplos de uso.

Exemplos de Elementos de Nível de Bloco e Inline

Elementos de nível de bloco ocupam toda a largura disponível, começando sempre em uma nova linha:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Elementos inline ocupam apenas a largura necessária e não começam em uma nova linha:

• <span>
• <a>
• <img>

Valores da Propriedade display

Os principais valores para a propriedade display são:

Exemplo de Código

Veja abaixo alguns exemplos de como usar a propriedade display:

p {
  display: block;
}

span {
  display: inline;
}

div {
  display: flex;
}

Substituindo o Valor de Exibição Padrão

Você pode substituir o valor de exibição padrão de um elemento para criar layouts mais personalizados.

Por exemplo, para exibir <li> elementos inline para criar menus horizontais:

li {
  display: inline;
}

Você também pode exibir um <span> como um elemento de bloco:

span {
  display: block;
}

Exibição com o Valor none

Usar o valor none remove o elemento da exibição, mas ele ainda estará no DOM:

#meuElemento {
  display: none;
}

Todas as Propriedades do CSS display

Capítulo 36: Ocultando Elementos com display e visibility

Ocultar com display: none;

Um dos métodos para ocultar um elemento é definindo a propriedade display como none. Isso fará com que o elemento seja completamente oculto, e a página será exibida como se o elemento não estivesse lá, ou seja, ele não ocupará nenhum espaço na página.

Exemplo

O exemplo abaixo oculta um elemento <h1> usando display: none;:

h1.hidden {
  display: none;
}

Ocultar com visibility: hidden;

Outra maneira de esconder um elemento é usando a propriedade visibility com o valor hidden. No entanto, ao contrário de display: none;, o elemento ainda ocupará o mesmo espaço no layout, mas ficará oculto.

Exemplo

O exemplo abaixo usa visibility: hidden; para ocultar o elemento <h1>:

h1.hidden {
  visibility: hidden;
}

Diferenças entre display: none; e visibility: hidden;

Enquanto display: none; remove completamente o elemento da página (não ocupa nenhum espaço), visibility: hidden; apenas o oculta visualmente, mas o elemento ainda afeta o layout da página, ocupando o mesmo espaço que ocuparia se estivesse visível.

A seguir, um exemplo demonstrando as diferenças entre os dois:

#exemploDisplayNone {
  display: none;
}

#exemploVisibilityHidden {
  visibility: hidden;
}

Mostrando Mais Tipos de Exibição

Além de none e hidden, a propriedade display oferece vários outros valores para controlar a exibição de elementos, como block, inline, flex, entre outros. Cada um desses valores afeta o layout da página de maneira diferente, permitindo criar layouts complexos e interativos.

Exemplo

Veja abaixo alguns tipos de exibição que podem ser aplicados aos elementos:

div {
  display: block;
}

span {
  display: inline;
}

section {
  display: flex;
}

Capítulo 37: Layout CSS - Propriedade position

A Propriedade position

A propriedade position especifica o tipo de método de posicionamento usado para um elemento. Existem cinco valores de posição diferentes:

• static
• relative
• fixed
• absolute
• sticky

Os elementos são posicionados usando as propriedades top, bottom, left e right. No entanto, essas propriedades não funcionarão a menos que a propriedade position seja definida primeiro. Elas também funcionam de forma diferente dependendo do valor da posição.

Posição: estática;

Os elementos HTML são posicionados como estáticos por padrão.

Elementos posicionados como estáticos não são afetados pelas propriedades top, bottom, left e right.

Um elemento com position: static; não é posicionado de nenhuma maneira especial, sendo sempre posicionado de acordo com o fluxo normal da página.

Este exemplo usa position: static; em um elemento <div>:

div.static {
  position: static;
  border: 3px solid #73AD21;
}

Posição: relativa;

Um elemento com position: relative; é posicionado em relação à sua posição normal.

Definir as propriedades top, right, bottom e left em um elemento posicionado relativamente fará com que ele seja ajustado para longe de sua posição normal. Outros conteúdos não serão ajustados para caber na lacuna deixada pelo elemento.

Este exemplo usa position: relative; em um elemento <div>:

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

Posição: fixa;

Um elemento com position: fixed; é posicionado em relação à viewport, o que significa que ele sempre ficará no mesmo lugar, mesmo se a página for rolada.

As propriedades top, right, bottom e left são usadas para posicionar o elemento.

Um elemento fixo não deixa uma lacuna na página onde normalmente estaria localizado.

Este exemplo mostra um elemento fixo no canto inferior direito da página:

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

Posição: absoluta;

Um elemento com position: absolute; é posicionado em relação ao ancestral posicionado mais próximo (ao invés de ser posicionado em relação à janela de visualização, como ocorre com o fixed).

Se o elemento posicionado de forma absoluta não tiver ancestrais posicionados, ele usará o corpo do documento e se moverá com a rolagem da página.

Elementos posicionados de forma absoluta são removidos do fluxo normal e podem sobrepor outros elementos.

A seguir, um exemplo simples de um elemento com position: relative; e outro com position: absolute;:

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

Posição: pegajosa;

Um elemento com position: sticky; é posicionado com base na posição de rolagem do usuário.

Um elemento "sticky" alterna entre relative e fixed, dependendo da posição de rolagem. Ele é posicionado de forma relativa até que uma dada posição de deslocamento seja encontrada na viewport - nesse momento, ele "gruda" no lugar (como um elemento fixo).

Capítulo 38: Posicionamento Fixado e Imagens

Observação sobre o posicionamento fixo

Você deve especificar pelo menos um dos seguintes: top, right, bottom ou left para que o posicionamento fixo funcione corretamente.

No exemplo a seguir, o elemento fixo fica no topo da página (top: 0) quando você alcança sua posição de rolagem:

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

Posicionando texto sobre uma imagem

Você pode posicionar texto sobre uma imagem utilizando position: absolute; para o texto, que ficará sobreposto à imagem. O exemplo a seguir mostra como fazer isso:

O código HTML para isso seria o seguinte:

<img src="Testecss" width="300" height="200">

Todas as Propriedades de Posicionamento CSS

Capítulo 39: Layout CSS - A Propriedade z-index

A Propriedade z-index

A z-index propriedade especifica a ordem de empilhamento de um elemento.

Quando os elementos são posicionados, eles podem se sobrepor a outros elementos. A propriedade z-index define qual elemento ficará na frente ou atrás dos outros, controlando a ordem em que os elementos se empilham.

Um elemento pode ter uma ordem de pilha positiva ou negativa. Quanto maior o valor do z-index, mais "na frente" o elemento ficará em relação aos outros.

Exemplo de z-index

Este é um título. Como a imagem tem um z-index de -1, ela será colocada atrás do texto:

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

Outro exemplo de z-index

Aqui vemos que um elemento com maior ordem de pilha está sempre acima de um elemento com menor ordem de pilha:

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

Sem z-index

Se dois elementos posicionados se sobrepuserem sem uma especificação de z-index, o último elemento definido no código HTML será mostrado no topo. Veja o exemplo abaixo, onde o z-index não é especificado:

<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

Propriedade CSS

Capítulo 40: Layout CSS - Estouro

A Propriedade overflow

A propriedade overflow controla o que acontece com conteúdo que é muito grande para caber em uma área.

Este texto é muito longo e a altura do seu contêiner é de apenas 100 pixels. Portanto, uma barra de rolagem é adicionada para ajudar o leitor a rolar o conteúdo:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea comodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

Estouro de CSS

A propriedade overflow especifica se o conteúdo deve ser recortado ou se barras de rolagem devem ser adicionadas quando o conteúdo de um elemento for muito grande para caber na área especificada.

O overflow possui os seguintes valores:

• visible - Padrão. O estouro não é recortado. O conteúdo é renderizado fora da caixa do elemento.
• hidden - O estouro é recortado e o restante do conteúdo ficará invisível.
• scroll - O estouro é recortado e uma barra de rolagem é adicionada para ver o restante do conteúdo.
• auto - Semelhante a scroll, mas adiciona barras de rolagem somente quando necessário.

Observação: A propriedade overflow só funciona para elementos de bloco com uma altura especificada.

Observação: No OS X Lion (no Mac), as barras de rolagem ficam ocultas por padrão e só são exibidas quando são usadas (mesmo que overflow: scroll esteja definido).

Exemplo de overflow: visible

Por padrão, o overflow é visible, o que significa que ele não é recortado e é renderizado fora da caixa do elemento:

div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

Exemplo de overflow: hidden

Com o valor hidden, o estouro é recortado e o restante do conteúdo é oculto:

div {
  overflow: hidden;
}

Exemplo de overflow: scroll

Definindo o valor para scroll, o overflow é recortado e uma barra de rolagem é adicionada para rolar dentro da caixa. Note que isso adicionará uma barra de rolagem horizontal e verticalmente (mesmo que você não precise dela):

div {
  overflow: scroll;
}

Exemplo de overflow: auto

O valor auto é semelhante a scroll, mas adiciona barras de rolagem somente quando necessário:

div {
  overflow: auto;
}

Exemplo de overflow-x e overflow-y

As propriedades overflow-x e overflow-y especificam se o estouro de conteúdo deve ser alterado apenas horizontalmente ou verticalmente (ou ambos):

div {
  overflow-x: hidden; /* Oculta a barra de rolagem horizontal */
  overflow-y: scroll; /* Adiciona a barra de rolagem vertical */
}

Todas as Propriedades de Estouro CSS

Capítulo 41: Layout CSS - Flutuar e Limpar

Exemplo

Definindo float: none; para uma imagem:

img {
  float: none;
}

Exemplo - Flutuar um ao lado do outro

Normalmente, os elementos div serão exibidos um em cima do outro. No entanto, se usarmos float: left, podemos fazer os elementos flutuarem um ao lado do outro:

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

Exemplo

Definindo float: left; para uma imagem:

img {
  float: left;
}

Exemplo - Sem flutuação

No exemplo a seguir, a imagem será exibida exatamente onde ocorre no texto, sem flutuar, usando float: none;:

img {
  float: right;
}

Layout CSS - Flutuar e Limpar

A propriedade float especifica como um elemento deve flutuar.

A propriedade clear especifica quais elementos podem flutuar ao lado do elemento limpo e em qual lado.

A Propriedade float

A propriedade float é usada para posicionar e formatar conteúdo, como deixar uma imagem flutuar à esquerda do texto em um contêiner.

A propriedade float pode ter um dos seguintes valores:

• left - O elemento flutua à esquerda do seu contêiner.
• right - O elemento flutua à direita do seu contêiner.
• none - O elemento não flutua (será exibido apenas onde ocorre no texto). Este é o valor padrão.
• inherit - O elemento herda o valor float do seu pai.

Em seu uso mais simples, a propriedade float pode ser usada para envolver texto em torno de imagens.

Exemplo - float: direita;

O exemplo a seguir especifica que uma imagem deve flutuar para a direita em um texto:

img {
  float: right;
}

Propriedades CSS

Capítulo 42: Layout CSS - Claro e Clearfix

A Propriedade Clear

Quando usamos a propriedade float e queremos que o próximo elemento apareça abaixo (não à direita ou à esquerda), precisamos usar a propriedade clear.

A propriedade clear especifica o que deve acontecer com o elemento próximo a um elemento flutuante.

A propriedade clear pode ter os seguintes valores:

• none - O elemento não é empurrado abaixo dos elementos flutuantes à esquerda ou à direita. Este é o valor padrão.
• left - O elemento é empurrado para baixo dos elementos flutuantes à esquerda.
• right - O elemento é empurrado para baixo dos elementos flutuantes à direita.
• both - O elemento é empurrado para baixo dos elementos flutuantes à esquerda e à direita.
• inherit - O elemento herda o valor clear do seu pai.

Ao limpar floats, você deve combinar clear com float: Se um elemento estiver flutuando à esquerda, você deve limpar para a esquerda. O seu elemento flutuado continuará flutuando, mas o elemento limpo aparecerá abaixo dele na página da web.

Exemplo

Este exemplo limpa o float para a esquerda. Aqui, significa que o elemento div2 é empurrado para baixo do elemento div1, que flutua para a esquerda:

div1 {
  float: left;
}

div2 {
  clear: left;
}

O Hack do Clearfix

Se um elemento flutuante for mais alto que o elemento que o contém, ele "transbordará" para fora do seu contêiner. Podemos adicionar um hack clearfix para resolver esse problema:

.clearfix {
  overflow: auto;
}

O overflow: auto; funciona bem, desde que você consiga controlar as margens e o preenchimento (senão você pode ver barras de rolagem). O novo e moderno hack clearfix é mais seguro de usar, e o código a seguir é utilizado na maioria das páginas da web:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Propriedades CSS

Layout CSS - Exemplos de Float

Grade de Caixas / Caixas de Largura Igual

Com a propriedade float, é fácil colocar caixas de conteúdo lado a lado:

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* três caixas (use 25% para quatro, e 50% para duas, etc.) */
  padding: 50px; /* se você quiser espaço entre as imagens */
}

O que é dimensionamento de caixa?

Você pode facilmente criar três caixas flutuantes lado a lado. No entanto, quando você adiciona algo que aumenta a largura de cada caixa (por exemplo, preenchimento ou bordas), a caixa pode quebrar. A propriedade box-sizing permite incluir o preenchimento e as bordas na largura total da caixa (e altura), garantindo que o preenchimento fique dentro da caixa e não quebre.

A grade de caixas também pode ser usada para exibir imagens lado a lado:

.img-container {
  float: left;
  width: 33.33%; /* três contêineres (use 25% para quatro, e 50% para dois, etc.) */
  padding: 5px; /* se você quiser espaço entre as imagens */
}

Caixas de Altura Igual

No exemplo anterior, você aprendeu a flutuar caixas lado a lado com uma largura igual. No entanto, não é fácil criar caixas flutuantes com alturas iguais. Uma solução rápida, no entanto, é definir uma altura fixa, como no exemplo abaixo:

.box {
  height: 500px;
}

No entanto, isso não é muito flexível. Tudo bem se você puder garantir que as caixas sempre terão a mesma quantidade de conteúdo, mas muitas vezes o conteúdo pode ser diferente. Se você tentar o exemplo acima em um celular, verá que o conteúdo da segunda caixa será exibido fora da caixa. É aqui que o CSS3 Flexbox se torna útil, pois ele pode esticar automaticamente as caixas para que fiquem tão longas quanto a caixa mais longa.

Propriedades Flutuantes CSS

Capítulo 43: Layout CSS - Exibição: Bloco Embutido

A Exibição: Valor inline-block

Comparado a display: inline, a principal diferença é que display: inline-block permite definir uma largura e altura no elemento.

Além disso, com display: inline-block, as margens e preenchimentos superior e inferior são respeitados, mas com display: inline não.

Comparado a display: block, a principal diferença é que display: inline-block não adiciona uma quebra de linha após o elemento, então o elemento pode ficar próximo a outros elementos.

Exemplo

span.a {
  display: inline; /* o padrão para span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

Usando inline-block para criar links de navegação

Um uso comum para display: inline-block é exibir itens de lista horizontalmente, em vez de verticalmente. O exemplo a seguir cria links de navegação horizontais:

.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

Propriedade CSS

Layout CSS - Alinhamento Horizontal e Vertical

Centralize os Elementos

Para centralizar horizontalmente um elemento de bloco (como <div>), use margin: auto; Definir a largura do elemento evitará que ele se estique até as bordas do contêiner.

O elemento ocupará então a largura especificada, e o espaço restante será dividido igualmente entre as duas margens:

Exemplo

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

Observação: o alinhamento central não terá efeito se a propriedade width não estiver definida (ou estiver definida como 100%).

Alinhar Texto ao Centro

Para centralizar o texto dentro de um elemento, use text-align: center;

Este texto está centralizado.

Exemplo

.center {
  text-align: center;
  border: 3px solid green;
}

Centralizar Verticalmente - Usando Preenchimento

Há muitas maneiras de centralizar um elemento verticalmente em CSS. Uma solução simples é usar preenchimento superior e inferior:

Estou centralizado verticalmente.

Exemplo

.center {
  padding: 70px 0;
  border: 3px solid green;
}

Centralizar Vertical e Horizontalmente

Para centralizar vertical e horizontalmente, use padding e text-align: center:

Estou centralizado vertical e horizontalmente.

Exemplo

.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

Centralizar Verticalmente - Usando line-height

Outro truque é usar a propriedade line-height com um valor igual à propriedade height:

Estou centralizado vertical e horizontalmente.

Exemplo

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* Se o texto tiver várias linhas, adicione o seguinte: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

Centralizar Verticalmente - Usando Posição e Transformação

Se padding e line-height não forem opções, outra solução é usar o posicionamento e a propriedade transform:

Estou centralizado vertical e horizontalmente.

Exemplo

.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Dica: Você aprenderá mais sobre a propriedade transform no nosso Capítulo de Transformações 2D.

Centralizar Verticalmente - Usando Flexbox

Você também pode usar flexbox para centralizar elementos. Apenas observe que flexbox não é suportado no IE10 e versões anteriores:

Estou centralizado vertical e horizontalmente.

Exemplo

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

Capítulo 44: Combinadores e Pseudo-classes CSS

Combinadores CSS

Um combinador é algo que explica o relacionamento entre os seletores.

Existem quatro combinadores diferentes em CSS:

• Combinador descendente (espaço)
• Combinador infantil (>)
• Próximo combinador irmão (+)
• Combinador de irmãos subsequentes (~)

Combinador Descendente

O combinador descendente corresponde a todos os elementos que são descendentes de um elemento especificado.

Exemplo:

div p {
  background-color: yellow;
}

Combinador de Crianças (>)

O combinador filho seleciona todos os elementos que são filhos de um elemento especificado.

Exemplo:

div > p {
  background-color: yellow;
}

Próximo Combinador de Irmãos (+)

O próximo combinador irmão é usado para selecionar um elemento que está diretamente depois de outro elemento específico.

Elementos irmãos devem ter o mesmo elemento pai, e "adjacente" significa "imediatamente seguinte".

Exemplo:

div + p {
  background-color: yellow;
}

Combinador de Irmãos Subsequentes (~)

O combinador de irmãos subsequentes seleciona todos os elementos que são irmãos próximos de um elemento especificado.

Exemplo:

div ~ p {
  background-color: yellow;
}

Pseudo-classes CSS

Uma pseudoclasse é usada para definir um estado especial de um elemento.

Por exemplo, pode ser usado para:

• Estilizar um elemento quando um usuário move o mouse sobre ele
• Estilizar links visitados e não visitados de forma diferente
• Estilizar um elemento quando ele receber foco
• Estilizar elementos de formulário válidos/inválidos/obrigatórios/opcionais

Exemplo de pseudoclass:

a:hover {
  color: #FF00FF;
}

Sintaxe das Pseudo-classes

A sintaxe das pseudoclasses é:

selector:pseudo-class {
  property: value;
}

Pseudo-classes de Âncora

Os links podem ser exibidos de diferentes maneiras:

/* link não visitado */
a:link {
  color: #FF0000;
}

/* link visitado */
a:visited {
  color: #00FF00;
}

/* link quando o mouse passa por cima */
a:hover {
  color: #FF00FF;
}

/* link ativo */
a:active {
  color: #0000FF;
}

Nota: a:hover DEVE vir depois de a:link e a:visited na definição CSS para ser eficaz! a:active DEVE vir depois de a:hover na definição CSS para ser eficaz! Nomes de pseudoclasses não diferenciam maiúsculas de minúsculas.

Pseudo-classes e Classes HTML

Pseudoclasses podem ser combinadas com classes HTML:

Exemplo:

a.highlight:hover {
  color: #ff0000;
}

Passando o mouse sobre o link, ele mudará de cor.

Passe o Mouse Sobre <div>

Um exemplo de uso da pseudoclasse :hover em um elemento <div>:

div:hover {
  background-color: blue;
}

Dica de Ferramenta Simples

Passar o mouse sobre um elemento <div> pode mostrar um elemento <p> (como uma dica de ferramenta):

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

CSS - A Pseudoclasse :first-child

A :first-child pseudoclasse corresponde a um elemento especificado que é o primeiro filho de outro elemento.

Exemplo:

p:first-child {
  color: blue;
}

Corresponde ao Primeiro Elemento <i> em Todos os Elementos <p>

No exemplo a seguir, o seletor corresponde ao primeiro elemento <i> em todos os elementos <p>:

p i:first-child {
  color: blue;
}

Corresponde a Todos os Elementos <i> em Todos os Primeiros Elementos <p> Filhos

No exemplo a seguir, o seletor corresponde a todos os elementos <i> em elementos <p> que são o primeiro filho de outro elemento:

p:first-child i {
  color: blue;
}

CSS - A Pseudoclasse :lang

A :lang pseudoclasse permite que você defina regras especiais para diferentes idiomas.

Exemplo:

q:lang(no) {
  quotes: "~" "~";
}

Mais Exemplos

Adicionar estilos diferentes aos hiperlinks:

a:focus {
  color: #0000FF;
}

Capítulo 45: Pseudoelementos CSS

O que são Pseudoelementos?

Um pseudoelemento CSS é usado para estilizar partes específicas de um elemento.

Por exemplo, pode ser usado para:

• Estilizar a primeira letra ou linha de um elemento
• Inserir conteúdo antes ou depois de um elemento
• Estilizar os marcadores dos itens da lista
• Estilizar a viewbox atrás de uma caixa de diálogo

Sintaxe

A sintaxe dos pseudoelementos é:

selector::pseudo-element {
  property: value;
}

O Pseudoelemento ::first-line

O ::first-line pseudoelemento é usado para adicionar um estilo especial à primeira linha de um texto.

Exemplo:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Observação: o ::first-line pseudoelemento só pode ser aplicado a elementos em nível de bloco.

As seguintes propriedades se aplicam ao ::first-line pseudoelemento:

• Propriedades da fonte
• Propriedades da cor
• Propriedades de fundo
• Espaçamento entre palavras
• Espaçamento entre letras
• Decoração de texto
• Alinhamento vertical
• Transformação de texto
• Altura da linha

O Pseudoelemento ::first-letter

O ::first-letter pseudoelemento é usado para adicionar um estilo especial à primeira letra de um texto.

Exemplo:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Observação: o ::first-letter pseudoelemento só pode ser aplicado a elementos em nível de bloco.

As seguintes propriedades se aplicam ao ::first-letter pseudoelemento:

• Propriedades da fonte
• Propriedades da cor
• Propriedades de fundo
• Propriedades de margem
• Propriedades de preenchimento
• Propriedades de fronteira
• Decoração de texto
• vertical-align (somente se "float" for "none")
• Transformação de texto
• Altura da linha
• Flutuador
• Claro

Pseudoelementos e Classes HTML

Pseudoelementos podem ser combinados com classes HTML:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

O exemplo acima exibirá a primeira letra dos parágrafos com class="intro", em vermelho e em tamanho maior.

Vários Pseudoelementos

Vários pseudoelementos também podem ser combinados.

Exemplo:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

No exemplo acima, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx-large. O restante da primeira linha será azul e em small-caps. O restante do parágrafo será o tamanho e a cor de fonte padrão.

CSS - O Pseudoelemento ::before

O ::before pseudoelemento pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento.

Exemplo:

h1::before {
  content: url(smiley.gif);
}

CSS - O Pseudoelemento ::after

O ::after pseudoelemento pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.

Exemplo:

h1::after {
  content: url(smiley.gif);
}

CSS - O Pseudoelemento ::marker

O ::marker pseudoelemento seleciona os marcadores dos itens da lista.

Exemplo:

::marker {
  color: red;
  font-size: 23px;
}

CSS - O Pseudoelemento ::selection

O ::selection pseudoelemento corresponde à parte de um elemento que é selecionada por um usuário.

As seguintes propriedades CSS podem ser aplicadas a ::selection: color, background, cursor, e outline.

Exemplo:

::selection {
  color: red;
  background: yellow;
}

Capítulo 46: Pseudoelementos CSS

O que são Pseudoelementos?

Um pseudoelemento CSS é usado para estilizar partes específicas de um elemento.

Por exemplo, pode ser usado para:

• Estilizar a primeira letra ou linha de um elemento
• Inserir conteúdo antes ou depois de um elemento
• Estilizar os marcadores dos itens da lista
• Estilizar a viewbox atrás de uma caixa de diálogo

Sintaxe

A sintaxe dos pseudoelementos:

selector::pseudo-element {
  property: value;
}

O pseudoelemento ::first-line

O ::first-line pseudoelemento é usado para adicionar um estilo especial à primeira linha de um texto.

Exemplo:

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Observação: o ::first-line pseudoelemento só pode ser aplicado a elementos em nível de bloco.

As seguintes propriedades se aplicam ao ::first-line pseudoelemento:

• Propriedades da fonte
• Propriedades da cor
• Propriedades de fundo
• Espaçamento entre palavras
• Espaçamento entre letras
• Decoração de texto
• Alinhamento vertical
• Transformação de texto
• Altura da linha

Observação sobre Sintaxe

Observe a notação de dois pontos duplos - ::first-line versus :first-line. Os dois pontos duplos substituíram a notação de dois pontos simples para pseudoelementos no CSS3. Esta foi uma tentativa do W3C de distinguir entre pseudoclasses e pseudoelementos.

O pseudoelemento ::first-letter

O ::first-letter pseudoelemento é usado para adicionar um estilo especial à primeira letra de um texto.

Exemplo:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Observação: o ::first-letter pseudoelemento só pode ser aplicado a elementos em nível de bloco.

As seguintes propriedades se aplicam ao pseudoelemento ::first-letter:

• Propriedades da fonte
• Propriedades da cor
• Propriedades de fundo
• Propriedades de margem
• Propriedades de preenchimento
• Propriedades de fronteira
• Decoração de texto
• Vertical-align (somente se "float" for "none")
• Transformação de texto
• Altura da linha
• Flutuador
• Claro

Pseudoelementos e Classes HTML

Pseudoelementos podem ser combinados com classes HTML:

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

O exemplo acima exibirá a primeira letra dos parágrafos com class="intro", em vermelho e em tamanho maior.

Vários Pseudoelementos

Vários pseudoelementos também podem ser combinados.

No exemplo a seguir, a primeira letra de um parágrafo será vermelha, em um tamanho de fonte xx-large. O restante da primeira linha será azul e em small-caps. O restante do parágrafo será o tamanho e a cor de fonte padrão:

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

O Pseudoelemento ::before

O ::before pseudoelemento pode ser usado para inserir algum conteúdo antes do conteúdo de um elemento.

Exemplo:

h1::before {
  content: url(smiley.gif);
}

O Pseudoelemento ::after

O ::after pseudoelemento pode ser usado para inserir algum conteúdo após o conteúdo de um elemento.

Exemplo:

h1::after {
  content: url(smiley.gif);
}

O Pseudoelemento ::marker

O ::marker pseudoelemento seleciona os marcadores dos itens da lista.

Exemplo:

::marker {
  color: red;
  font-size: 23px;
}

O Pseudoelemento ::selection

O ::selection pseudoelemento corresponde à parte de um elemento que é selecionada por um usuário.

As seguintes propriedades CSS podem ser aplicadas a ::selection: color, background, cursor e outline.

Exemplo:

::selection {
  color: red;
  background: yellow;
}

Capítulo 47: Barra de Navegação CSS

Demonstração: Barras de Navegação

Vertical

• Lar
• Notícias
• Contato
• Sobre

Horizontal

Linha única:

• Lar
• Notícias
• Contato
• Sobre

Barras de Navegação

Ter uma navegação fácil de usar é importante para qualquer site. Com CSS você pode transformar menus HTML simples em barras de navegação atraentes.

Barra de Navegação = Lista de Links

Uma barra de navegação precisa de HTML padrão como base. Em nossos exemplos, construiremos a barra de navegação a partir de uma lista HTML padrão.

Uma barra de navegação é basicamente uma lista de links, então usar os elementos <ul> e <li> faz todo o sentido:

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Remover Marcadores, Margens e Preenchimento

Agora vamos remover os marcadores, as margens e o preenchimento da lista:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Exemplo explicado:

• list-style-type: none; - Remove os marcadores. Uma barra de navegação não precisa de marcadores de lista.
• margin: 0; e padding: 0; - Remove as configurações padrão do navegador.

Barra de Navegação Vertical CSS

Para criar uma barra de navegação vertical, você pode estilizar os elementos <a> dentro da lista, além do código da página anterior:

li a {
  display: block;
  width: 60px;
}

Exemplo explicado:

• display: block; - Exibir os links como elementos de bloco torna toda a área do link clicável (não apenas o texto) e permite especificar a largura (e preenchimento, margem, altura, etc., se desejar).
• width: 60px; - Elementos de bloco ocupam a largura total disponível por padrão. Queremos especificar uma largura de 60 pixels.

Exemplos de Barra de Navegação Vertical

Crie uma barra de navegação vertical básica com uma cor de fundo cinza e altere a cor de fundo dos links quando o usuário passar o mouse sobre eles:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #555;
  color: white;
}

Link de Navegação Ativo/Atual

Adicione uma classe "ativa" ao link atual para que o usuário saiba em qual página ele está:

.active {
  background-color: #04AA6D;
  color: white;
}

Centralizar Links e Adicionar Bordas

Adicione text-align: center ao <li> ou <a> para centralizar os links. Adicione a border à <ul> para adicionar uma borda ao redor da barra de navegação. Se você também quiser bordas dentro da barra de navegação, adicione border-bottom a todos os elementos <li>, exceto o último:

ul {
  border: 1px solid #555;
}

li {
  text-align: center;
  border-bottom: 1px solid #555;
}

li:last-child {
  border-bottom: none;
}

Barra de Navegação Vertical Fixa de Altura Total

Crie uma navegação lateral fixa e de altura total:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%;
  position: fixed;
  overflow: auto;
}

Observação: este exemplo pode não funcionar corretamente em dispositivos móveis.

Capítulo 48: Barra de Navegação Horizontal CSS

Barra de Navegação Horizontal

Lar | Notícias | Contato | Sobre

Há duas maneiras de criar uma barra de navegação horizontal: Usando itens de lista inline ou flutuantes.

Itens de Lista em Linha

Uma maneira de criar uma barra de navegação horizontal é especificar os elementos <li> como inline, além do código "padrão" da página anterior:

li {
  display: inline;
}

Exemplo explicado:

• display: inline; - Por padrão, os elementos <li> são elementos de bloco. Aqui, removemos as quebras de linha antes e depois de cada item da lista para exibi-los em uma linha.

Itens de Lista Flutuantes

Outra maneira de criar uma barra de navegação horizontal é flutuar os elementos <li> e especificar um layout para os links de navegação:

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Exemplo explicado:

• float: left; - Use float para fazer com que os elementos do bloco flutuem próximos uns dos outros.
• display: block; - Permite especificar o preenchimento (e altura, largura, margens, etc., se desejar).
• padding: 8px; - Especifique algum preenchimento entre cada elemento <a>, para que tenham uma boa aparência.
• background-color: #dddddd; - Adicione uma cor de fundo cinza a cada elemento <a>.

Exemplos de Barra de Navegação Horizontal

Crie uma barra de navegação horizontal básica com uma cor de fundo escura e altere a cor de fundo dos links quando o usuário passar o mouse sobre eles:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

Link de Navegação Ativo/Atual

Adicione uma classe "ativa" ao link atual para que o usuário saiba em qual página ele está:

.active {
  background-color: #04AA6D;
}

Alinhar Links à Direita

Alinhe os links à direita flutuando os itens da lista para a direita (float:right;):

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Divisores de Fronteira

Adicione a propriedade border-right ao <li> para criar divisores de links:

li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

Barra de Navegação Fixa

Faça com que a barra de navegação permaneça na parte superior ou inferior da página, mesmo quando o usuário rolar a página:

Topo fixo

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Fundo fixo

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Observação: a posição fixa pode não funcionar corretamente em dispositivos móveis.

Barra de Navegação Horizontal Cinza

Um exemplo de uma barra de navegação horizontal cinza com uma borda cinza fina:

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

Barra de Navegação Fixa com position: sticky

Adicione position: sticky; a <ul> para criar uma barra de navegação fixa. Um elemento sticky alterna entre relativo e fixo, dependendo da posição de rolagem. Ele é posicionado relativo até que uma dada posição de deslocamento seja encontrada na viewport, então ele "fixa" no lugar (como position:fixed).

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Nota: O Internet Explorer não suporta posicionamento fixo. O Safari requer um prefixo -webkit- (veja o exemplo acima). Você também deve especificar pelo menos um de top, right, bottom ou left para que o posicionamento fixo funcione.

Mais Exemplos

• Topnav responsivo: Como usar consultas de mídia CSS para criar uma navegação superior responsiva.
• Sidenav responsivo: Como usar consultas de mídia CSS para criar uma navegação lateral responsiva.
• Barra de navegação suspensa: Como adicionar um menu suspenso dentro de uma barra de navegação.

Já ouviu falar do W3Schools Spaces? Aqui você pode criar seu site do zero ou usar um modelo e hospedá-lo gratuitamente. Não é necessário cartão de crédito.

Capítulo 49: Menus Suspensos CSS

Crie um Menu Suspenso que Pode Ser Passado com o Mouse com CSS

Exemplos de menu suspenso. Passe o mouse sobre os exemplos abaixo:

• Texto suspenso
• Menu suspenso
• Outro: Cinque Terre

Menu Suspenso Básico

Crie uma caixa suspensa que apareça quando o usuário mover o mouse sobre um elemento.

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

</body>
</html>

Exemplo Explicado

• HTML: Use qualquer elemento para abrir o conteúdo suspenso, como <span> ou <button>.
• CSS: A classe .dropdown usa position: relative; para garantir que o conteúdo do menu suspenso seja colocado logo abaixo do botão suspenso, usando position: absolute;.
• A classe .dropdown-content contém o conteúdo do menu suspenso, que fica oculto por padrão e será exibido ao passar o mouse.
• O seletor :hover é usado para mostrar o menu suspenso quando o usuário move o mouse sobre o botão.

Menu Suspenso

Este exemplo é semelhante ao anterior, mas adicionamos links dentro da caixa suspensa e os estilizamos para caber em um botão suspenso estilizado:

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Conteúdo Suspenso Alinhado à Direita

Se você quiser que o menu suspenso vá da direita para a esquerda, em vez da esquerda para a direita, adicione:

.dropdown-content {
  right: 0;
}

Mais Exemplos

• Imagem suspensa: Como adicionar uma imagem e outro conteúdo dentro da caixa suspensa. Passe o mouse sobre a imagem.
• Barra de navegação suspensa: Como adicionar um menu suspenso dentro de uma barra de navegação.

Menu Suspenso dentro de uma Barra de Navegação

Passo a passo para criar um menu suspenso dentro de uma barra de navegação.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

Capítulo 50: Galeria de Imagens CSS

Galeria de Imagens com CSS

CSS pode ser usado para criar uma galeria de imagens de forma simples e eficiente. Aqui está um exemplo básico:

Galeria de Imagens

A seguinte galeria de imagens foi criada com CSS:

<html>
<head>
<style>
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="img_5terre.jpg">
    <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_forest.jpg">
    <img src="img_forest.jpg" alt="Forest" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_lights.jpg">
    <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

<div class="gallery">
  <a target="_blank" href="img_mountains.jpg">
    <img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

Exemplo Explicado

• HTML: Cada imagem é envolvida em uma <div> com a classe .gallery. As imagens ficam clicáveis através do <a>, abrindo em uma nova aba.
• CSS: O estilo da galeria define uma borda e define o comportamento ao passar o mouse, com destaque para o efeito de hover.
• A classe .desc é usada para adicionar uma descrição de cada imagem abaixo delas.

Galeria de Imagens Responsiva

Você pode usar consultas de mídia CSS para criar uma galeria de imagens responsiva que ficará bem em desktops, tablets e smartphones. A seguir, um exemplo básico de como fazer isso:

<style>
@media screen and (max-width: 600px) {
  .gallery {
    width: 100%;
  }
}
</style>

Sprites de Imagem CSS

Sprites de imagem são uma coleção de imagens combinadas em uma única imagem. Eles ajudam a reduzir o número de solicitações do servidor, melhorando a velocidade de carregamento da página.

Exemplo Simples de Sprite de Imagem

Ao invés de carregar várias imagens, usamos uma única imagem ("img_navsprites.gif") e especificamos qual parte da imagem deve ser exibida com CSS:

#home {
  width: 46px;
  height: 44px;
  background: url(img_navsprites.gif) 0 0;
}

Exemplo Explicado

• #home define o tamanho do item (46px x 44px) e mostra a parte específica da imagem de fundo.
• O atributo background define a imagem de fundo e sua posição.

Crie uma Lista de Navegação com Sprites de Imagem

Vamos usar sprites para criar uma lista de navegação.

#navlist {
  position: relative;
}

#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}

#navlist li, #navlist a {
  height: 44px;
  display: block;
}

#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}

#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}

#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Adicionando Efeito Hover aos Sprites de Imagem

Você pode adicionar um efeito de hover à sua navegação com sprites, usando uma imagem de sprite diferente para o estado hover:

#home a:hover {
  background: url('img_navsprites_hover.gif') 0 -45px;
}

#prev a:hover {
  background: url('img_navsprites_hover.gif') -47px -45px;
}

#next a:hover {
  background: url('img_navsprites_hover.gif') -91px -45px;
}

Exemplo Explicado

• Ao passar o mouse sobre cada item, a imagem de fundo é alterada para uma versão hover da imagem sprite, deslocando a posição do fundo para 45px para baixo.

Capítulo 51: Seletores de Atributos CSS

Estilo Elementos HTML com Atributos Específicos

É possível estilizar elementos HTML com base em atributos ou valores específicos usando seletores de atributos CSS. Aqui estão alguns dos seletores mais comuns:

Seletor CSS [atributo]

O seletor [attribute] é usado para selecionar elementos com um atributo especificado.

Exemplo:

a[target] {
  background-color: yellow;
}

Seletor CSS [atributo="valor"]

O seletor [attribute="value"] é usado para selecionar elementos com um atributo e valor especificados.

Exemplo:

a[target="_blank"] {
  background-color: yellow;
}

Seletor CSS [atributo~="valor"]

O seletor [attribute~="value"] é usado para selecionar elementos com um valor de atributo que contém uma palavra específica.

Exemplo:

[title~="flower"] {
  border: 5px solid yellow;
}

Este exemplo seleciona elementos com o atributo title que contenham a palavra "flower" (exemplo: title="summer flower", title="flower new", mas não title="my-flower").

Seletor CSS [atributo|="valor"]

O seletor [attribute|="value"] é usado para selecionar elementos com o atributo especificado, cujo valor pode ser exatamente o valor especificado, ou o valor seguido por um hífen (-).

Exemplo:

[class|="top"] {
  background: yellow;
}

Seletor CSS [atributo^="valor"]

O seletor [attribute^="value"] é usado para selecionar elementos com o atributo especificado, cujo valor começa com o valor especificado.

Exemplo:

[class^="top"] {
  background: yellow;
}

Seletor CSS [atributo$="valor"]

O seletor [attribute$="value"] é usado para selecionar elementos cujo valor de atributo termina com um valor especificado.

Exemplo:

[class$="test"] {
  background: yellow;
}

Seletor CSS [atributo*="valor"]

O seletor [attribute*="value"] é usado para selecionar elementos cujo valor de atributo contém um valor especificado.

Exemplo:

[class*="te"] {
  background: yellow;
}

Exemplo de Estilizando Formulários com Seletores de Atributos

Os seletores de atributos são úteis para estilizar formulários que não possuem classe ou ID específicos.

Exemplo:

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

Tabela de Seletores de Atributos CSS

Capítulo 52: Formulários CSS

A aparência de um formulário HTML pode ser bastante melhorada com CSS. Aqui estão algumas maneiras de estilizar os campos de entrada e botões em um formulário:

Estilizando Campos de Entrada

Use a propriedade width para determinar a largura do campo de entrada:

input {
  width: 100%;
}

O exemplo acima se aplica a todos os elementos <input>. Se você quiser estilizar apenas um tipo de entrada específico, pode usar seletores de atributos, como:

Entradas Acolchoadas

Use a propriedade padding para adicionar espaço dentro do campo de texto. Se você tem muitas entradas uma após a outra, use a propriedade margin para adicionar mais espaço fora delas:

input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Note que a propriedade box-sizing foi definida como border-box, o que garante que o preenchimento e as bordas sejam incluídos nas dimensões totais dos elementos.

Entradas com Bordas

Use a propriedade border para alterar o tamanho e a cor da borda, e a propriedade border-radius para adicionar cantos arredondados:

input[type="text"] {
  border: 2px solid red;
  border-radius: 4px;
}

Se você quiser apenas uma borda inferior, use a propriedade border-bottom:

input[type="text"] {
  border: none;
  border-bottom: 2px solid red;
}

Entradas Coloridas

Use a propriedade background-color para adicionar uma cor de fundo à entrada e a propriedade color para alterar a cor do texto:

input[type="text"] {
  background-color: #3CBC8D;
  color: white;
}

Entradas Focadas

Por padrão, alguns navegadores adicionam um contorno azul ao redor da entrada quando ela recebe foco. Você pode remover esse comportamento adicionando outline: none;.

Use o seletor :focus para estilizar o campo de entrada quando ele receber foco:

input[type="text"]:focus {
  background-color: lightblue;
}

Ou para mudar a borda:

input[type="text"]:focus {
  border: 3px solid #555;
}

Entrada com Ícone/Imagem

Se você quiser adicionar um ícone dentro da entrada, use a propriedade background-image e posicione-o com a propriedade background-position. Adicione também um padding esquerdo para reservar espaço para o ícone:

input[type="text"] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Entrada de Pesquisa Animada

Use a propriedade transition para animar a largura da entrada de pesquisa quando ela recebe foco:

input[type="text"] {
  transition: width 0.4s ease-in-out;
}

input[type="text"]:focus {
  width: 100%;
}

Estilizando Textareas

Use a propriedade resize para evitar que áreas de texto sejam redimensionadas (desativando o "grabber" no canto inferior direito):

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Selecionar Menus de Estilo

Estilize menus de seleção com a propriedade select:

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Botões de Entrada de Estilo

Estilize botões de entrada com as propriedades background-color, border, e outras. Exemplo para botões de submit:

input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

Formulário Responsivo

Redimensione a janela do navegador para ver o efeito. Quando a tela for menor que 600px, as colunas do formulário se empilharão.

@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

Exemplo Completo de Formulário Responsivo

<!DOCTYPE html>
<html>
<head>
<style>
/* Estilo CSS aqui */
</style>
</head>
<body>

<h2>Formulário Responsivo</h2>
<p>Redimensione a janela do navegador para ver o efeito. Quando a tela for menor que 600px, as duas colunas se empilham em vez de ficarem lado a lado.</p>

<div class="container">
  <form action="/action_page.php">
    <div class="row">
      <div class="col-25">
        <label for="fname">Primeiro Nome</label>
      </div>
      <div class="col-75">
        <input type="text" id="fname" name="firstname" placeholder="Seu nome..">
      </div>
    </div>
    <!-- Restante do código do formulário -->
  </form>
</div>

</body>
</html>

Capítulo 53: Atributos de Ação e Destino em Formulários HTML

Os atributos action e target são essenciais para definir o comportamento de envio e o destino de um formulário HTML. Vamos explorar como utilizá-los.

Atributo action

O atributo action especifica a URL do servidor para onde os dados do formulário serão enviados quando o formulário for submetido. Este atributo é obrigatório em formulários HTML.

Exemplo:

<form action="https://www.exemplo.com/processar-formulario" method="post">

No exemplo acima, os dados do formulário serão enviados para a URL https://www.exemplo.com/processar-formulario.

Atributo target

O atributo target define onde o resultado do formulário será exibido. Ele pode ter vários valores, como _blank, _self, _parent, ou _top.

Exemplo com target="_blank":

<form action="https://www.exemplo.com/processar-formulario" target="_blank">

O valor _blank fará com que o resultado do formulário seja aberto em uma nova aba ou janela do navegador.

Combinando action e target

Você pode combinar os atributos action e target para definir o destino e o comportamento do envio de um formulário. Aqui está um exemplo onde o formulário envia dados para uma página e exibe o resultado em uma nova aba:

<form action="https://www.exemplo.com/processar-formulario" target="_blank" method="post">

Exemplo Completo de Formulário

Veja um exemplo de como esses atributos podem ser usados em um formulário real:

<form action="https://www.exemplo.com/processar-formulario" target="_blank" method="post">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required>
        <input type="submit" value="Enviar">
    </form>

Exemplo Explicado

• action: Especifica a URL para onde os dados do formulário serão enviados.
• target: Determina onde a resposta do formulário será exibida (no exemplo, em uma nova aba).
• method: Define o método HTTP utilizado (geralmente post ou get).

Exemplo de Formulário com Ação e Destino Específicos

O formulário abaixo envia dados para uma página externa e abre o resultado em uma nova janela:

<form action="https://www.exemplo.com/processar-formulario" target="_blank" method="post">
        <label for="email">E-mail:</label>
        <input type="email" id="email" name="email" required>
        <input type="submit" value="Enviar">
    </form>

Conclusão

O uso dos atributos action e target em formulários HTML permite maior controle sobre o envio de dados e como o resultado será apresentado ao usuário. Estes atributos são fundamentais para a interação entre o cliente e o servidor em formulários.

Capítulo 54: Contadores CSS

Numeração Automática com Contadores

Contadores CSS funcionam como "variáveis" mantidas pelo CSS, cujo valor pode ser incrementado por regras CSS, permitindo rastrear quantas vezes algo foi usado. Eles são úteis para ajustar a aparência do conteúdo com base na ordem ou na colocação no documento.

Propriedades do Contador CSS

• counter-reset: Cria ou zera um contador.
• counter-increment: Incrementa um valor de contador.
• content: Insere conteúdo gerado com o valor de um contador.
• counter() ou counters(): Retorna o valor atual do contador ou valores de contadores aninhados.

Exemplo: Numeração de Seções

O exemplo a seguir cria um contador para a página (no seletor de corpo), então incrementa o valor do contador para cada elemento <h2> e adiciona "Seção < valor do contador >:" ao início de cada elemento <h2>:

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Contadores de Aninhamento

O exemplo a seguir cria um contador para a página (seção) e um contador para cada elemento <h1> (subseção). O contador "seção" será contado para cada elemento <h1> com "Seção < valor do contador da seção >.", e o contador "subseção" será contado para cada elemento <h2> com "< valor do contador da seção >.< valor do contador da subseção >":

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Contadores em Listas Delineadas

Um contador também pode ser útil para criar listas numeradas. Aqui usamos a função counters() para inserir uma string entre diferentes níveis de contadores aninhados:

ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
}

Resumo das Propriedades do Contador

Capítulo 55: Layout de Site com CSS

Layout do Site

Um site geralmente é dividido em cabeçalhos, menus, conteúdo e rodapé:

Há diversos designs de layout diferentes para escolher. No entanto, a estrutura acima é uma das mais comuns, e vamos dar uma olhada mais de perto nela neste tutorial.

Cabeçalho

Um cabeçalho geralmente fica localizado no topo do site (ou logo abaixo de um menu de navegação superior). Ele geralmente contém um logotipo ou o nome do site:

Exemplo de Cabeçalho

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Resultado do Cabeçalho

Este código cria um cabeçalho com fundo cinza claro, texto centralizado e algum espaçamento ao redor do conteúdo.

Barra de Navegação

Uma barra de navegação contém uma lista de links para ajudar os visitantes a navegar pelo seu site:

Exemplo

/* O container da navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Links da Navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - muda a cor ao passar o mouse */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Resultado da Barra de Navegação

Este código cria uma barra de navegação com links que mudam de cor quando o mouse passa sobre eles.

Layout de Página

O layout nesta seção frequentemente depende dos usuários-alvo. O layout mais comum é um (ou uma combinação deles) dos seguintes:

Criação de um Layout de 3 Colunas

Criamos um layout de 3 colunas e o alteramos para um layout de 1 coluna em telas menores:

Exemplo de Layout de 3 Colunas

/* Cria três colunas iguais que ficam ao lado uma da outra */
.column {
  float: left;
  width: 33.33%;
}

/* Limpar floats após as colunas */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Layout responsivo - faz as três colunas empilharem uma sobre a outra em telas menores (600px ou menos) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Resultado do Layout de 3 Colunas

Este layout exibirá três colunas de igual tamanho, mas em telas pequenas, elas serão empilhadas verticalmente.

Dicas

Para criar um layout de 2 colunas, altere a largura para 50%. Para criar um layout de 4 colunas, use 25%, etc.

Quer saber como a regra @media funciona? Leia mais sobre isso em nosso capítulo sobre Consultas de Mídia CSS.

Uma maneira mais moderna de criar layouts de coluna é usar o CSS Flexbox. No entanto, ele não é suportado no Internet Explorer 10 e versões anteriores. Se você precisar de suporte ao IE6-10, use floats (como mostrado acima).

Para saber mais sobre o módulo de Layout Flexível, leia nosso capítulo sobre CSS Flexbox.

Colunas Desiguais

O conteúdo principal é a parte maior e mais importante do seu site. É comum usar larguras de coluna desiguais, de modo que a maior parte do espaço seja reservada para o conteúdo principal. O conteúdo lateral (se houver) é frequentemente usado como navegação alternativa ou para fornecer informações relevantes ao conteúdo principal.

Alterando as larguras como quiser, mas lembre-se de que a soma total deve ser 100%:

Exemplo de Colunas Desiguais

.column {
  float: left;
}

/* Coluna lateral */
.column.side {
  width: 25%;
}

/* Coluna central */
.column.middle {
  width: 50%;
}

/* Layout responsivo - faz as colunas empilharem uma sobre a outra */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Resultado das Colunas Desiguais

Rodapé

O rodapé é colocado na parte inferior da sua página. Ele geralmente contém informações como direitos autorais e informações de contato:

Exemplo de Rodapé

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Resultado do Rodapé

O rodapé será exibido na parte inferior da página com o conteúdo centralizado.

Layout de Site Responsivo

Usando parte do código CSS acima, criamos um layout de site responsivo, que varia entre duas colunas e colunas de largura total, dependendo da largura da tela.

Capítulo 56: Unidades CSS

Unidades CSS

O CSS tem várias unidades diferentes para expressar um comprimento.

Muitas propriedades CSS aceitam valores de "comprimento", como largura (width), margem (margin), preenchimento (padding), tamanho da fonte (font-size), etc.

Um comprimento é representado por um número seguido por uma unidade de medida, como 10px, 2em, etc.

Exemplo

h1 {
  font-size: 60px;
}

p {
  font-size: 25px;
  line-height: 50px;
}

Nota: Um espaço em branco não pode aparecer entre o número e a unidade. No entanto, se o valor for 0, a unidade pode ser omitida.

Para algumas propriedades CSS, valores de comprimento negativos são permitidos.

Tipos de Unidades de Comprimento

Existem dois tipos principais de unidades de comprimento:

• Absolutas
• Relativas

Unidades Absolutas

As unidades de comprimento absoluto são fixas. Um comprimento expresso em qualquer uma delas será exibido exatamente no tamanho especificado.

As unidades absolutas não são recomendadas para uso em telas devido à grande variedade de tamanhos. No entanto, são úteis para layouts de impressão, onde o meio de saída é conhecido.

Tabela de Unidades Absolutas

Nota: Os pixels (px) são relativos ao dispositivo de exibição. Em dispositivos de baixa densidade de pixels, 1px corresponde a 1 ponto na tela. Em dispositivos de alta resolução, 1px pode incluir vários pixels de dispositivo.

Unidades Relativas

As unidades de comprimento relativo especificam um comprimento em relação a outra propriedade. Elas são mais adequadas para escalabilidade entre diferentes dispositivos e mídias.

Tabela de Unidades Relativas

Dica: As unidades em e rem são úteis para criar layouts escaláveis!

Viewport: É o tamanho da janela do navegador. Por exemplo, se a largura da viewport for 50cm, 1vw = 0,5cm.

Suporte dos Navegadores

A tabela a seguir mostra as versões mínimas dos navegadores que suportam totalmente as unidades de comprimento:

Capítulo 57: Especificidade CSS

O que é Especificidade?

Se houver duas ou mais regras CSS que apontam para o mesmo elemento, o seletor com a maior especificidade "vencerá", e sua declaração de estilo será aplicada a esse elemento HTML. A especificidade é uma hierarquia que determina qual declaração de estilo será aplicada.

Exemplos de Especificidade

Exemplo 1: Seletor de Elemento

O seletor de elemento possui baixa especificidade. Aqui, o texto ficará vermelho:

<html>
<head>
  <style>
    p { color: red; }
  </style>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

Exemplo 2: Seletor de Classe

O seletor de classe tem prioridade mais alta que o seletor de elemento. O texto será verde:

<html>
<head>
  <style>
    .test { color: green; }
    p { color: red; }
  </style>
</head>
<body>
  <p class="test">Hello World!</p>
</body>
</html>

Exemplo 3: Seletor de ID

O seletor de ID tem prioridade mais alta que o seletor de classe. O texto será azul:

<html>
<head>
  <style>
    #demo { color: blue; }
    .test { color: green; }
    p { color: red; }
  </style>
</head>
<body>
  <p id="demo" class="test">Hello World!</p>
</body>
</html>

Exemplo 4: Estilo Inline

O estilo inline tem a maior prioridade. O texto será rosa:

<html>
<head>
  <style>
    #demo { color: blue; }
    .test { color: green; }
    p { color: red; }
  </style>
</head>
<body>
  <p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>

Hierarquia de Especificidade

Abaixo está uma tabela que mostra a hierarquia de especificidade em CSS:

Especificidade Igual: A Regra Mais Recente Vence

Se duas regras com a mesma especificidade forem aplicadas, a última regra prevalece.

h1 { background-color: yellow; }
h1 { background-color: red; }

No exemplo acima, o fundo do h1 será vermelho.

Exemplo de Regras de Especificidade

Veja como a especificidade funciona em situações diferentes:

div#myDiv { background-color: green; }  /* Mais específica */
#myDiv { background-color: yellow; }
div[id=myDiv] { background-color: blue; }

No exemplo acima, o fundo será verde porque a primeira regra é a mais específica.

Conclusão

A especificidade é uma ferramenta essencial no CSS para resolver conflitos entre regras de estilo. Compreender a hierarquia ajuda a aplicar os estilos corretamente e evitar surpresas no design.

Capítulo 58: CSS A Regra !important

O que é !important?

A regra !important em CSS é usada para adicionar mais importância a uma propriedade/valor do que o normal.

Na verdade, se você usar a regra !important, ela substituirá TODAS as regras de estilo anteriores para aquela propriedade específica naquele elemento!

Exemplo

#myid {
  background-color: blue;
}

.myclass {
  background-color: gray;
}

p {
  background-color: red !important;
}

Exemplo Explicado

No exemplo acima, todos os três parágrafos receberão uma cor de fundo vermelha, mesmo que o seletor de ID e o seletor de classe tenham uma especificidade maior. A regra !important substitui a propriedade background-color em ambos os casos.

Importante Sobre !important

A única maneira de substituir uma regra !important é incluir outra regra !important em uma declaração com a mesma (ou maior) especificidade no código-fonte – e aqui o problema começa! Isso torna o código CSS confuso e a depuração será difícil, especialmente se você tiver uma folha de estilo grande!

Aqui criamos um exemplo simples. Não fica muito claro, quando você olha o código-fonte CSS, qual cor é considerada mais importante:

Exemplo

#myid {
  background-color: blue !important;
}

.myclass {
  background-color: gray !important;
}

p {
  background-color: red !important;
}

Dica

É bom saber sobre a regra !important, pois você pode vê-la em algum código-fonte CSS. No entanto, não a use a menos que seja absolutamente necessário.

Talvez um ou dois usos justos de !important

Uma maneira de usar !important é se você tiver que substituir um estilo que não pode ser substituído de nenhuma outra forma. Isso pode ser se você estiver trabalhando em um Sistema de Gerenciamento de Conteúdo (CMS) e não puder editar o código CSS. Então você pode definir alguns estilos personalizados para substituir alguns dos estilos do CMS.

Outra maneira de usar !important é: Suponha que você queira uma aparência especial para todos os botões em uma página. Aqui, os botões são estilizados com uma cor de fundo cinza, texto branco e algum preenchimento e borda:

Exemplo de Botões

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

A aparência de um botão pode mudar algumas vezes se o colocarmos dentro de outro elemento com maior especificidade, e as propriedades entram em conflito. Aqui está um exemplo disso:

Exemplo de Confusão de Estilos

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Para "forçar" todos os botões a terem a mesma aparência, não importa o que aconteça, podemos adicionar a regra !important às propriedades do botão, assim:

Exemplo de Botão com !important

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}

#myDiv a {
  color: red;
  background-color: yellow;
}

Capítulo 59: Funções Matemáticas CSS

As funções matemáticas CSS permitem que expressões matemáticas sejam usadas como valores de propriedade. Aqui, explicaremos as funções calc(), max() e min().

A função calc()

A função calc() executa um cálculo a ser usado como valor da propriedade.

Sintaxe CSS

Exemplo

Use calc() para calcular a largura de um elemento <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

A função max()

A função max() usa o maior valor de uma lista de valores separados por vírgulas, como o valor da propriedade.

Sintaxe CSS

Exemplo

Use max() para definir a largura de #div1 para o valor que for maior, 50% ou 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

A função min()

A função min() usa o menor valor de uma lista de valores separados por vírgulas, como o valor da propriedade.

Sintaxe CSS

Exemplo

Use min() para definir a largura de #div1 para o menor valor, 50% ou 300px:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

Capítulo 60: Cantos Arredondados CSS

Com a propriedade border-radius CSS, você pode dar a qualquer elemento "cantos arredondados".

Propriedade CSS border-radius

A propriedade border-radius define o raio dos cantos de um elemento.

Dica: Esta propriedade permite que você adicione cantos arredondados aos elementos!

Exemplos de Cantos Arredondados

Exemplo 1: Cantos arredondados com cor de fundo

#rcorners1 {
  border-radius: 25px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Exemplo 2: Cantos arredondados com borda

#rcorners2 {
  border-radius: 25px;
  border: 2px solid #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Exemplo 3: Cantos arredondados com imagem de fundo

#rcorners3 {
  border-radius: 25px;
  background: url(paper.gif);
  background-position: left top;
  background-repeat: repeat;
  padding: 20px;
  width: 200px;
  height: 150px;
}

CSS border-radius - Especificando Cada Canto

A propriedade border-radius pode ter de um a quatro valores. Aqui estão as regras:

Exemplo de Vários Valores

#rcorners1 {
  border-radius: 15px 50px 30px 5px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px 50px 30px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 15px 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners4 {
  border-radius: 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Cantos Elípticos

Você também pode criar cantos elípticos com a sintaxe:

#rcorners1 {
  border-radius: 50px / 15px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners2 {
  border-radius: 15px / 50px;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

#rcorners3 {
  border-radius: 50%;
  background: #73AD21;
  padding: 20px;
  width: 200px;
  height: 150px;
}

Propriedades de Cantos Arredondados CSS

Capítulo 61: Vários Fundos CSS

Com a propriedade CSS background, você pode adicionar múltiplos fundos a um único elemento. Essa propriedade permite a combinação de diferentes imagens e cores de fundo.

Propriedade CSS background

A propriedade background é usada para definir uma ou mais imagens de fundo, cores e posicionamentos em um único elemento.

Com o CSS moderno, você pode usar várias imagens de fundo, separadas por vírgulas.

Exemplo de Vários Fundos

Exemplo 1: Vários fundos com imagens e cor de fundo

#multiBackground1 {
  background: url('image1.jpg') no-repeat top left, 
              url('image2.jpg') no-repeat bottom right, 
              #ffcc00;
  height: 300px;
  width: 500px;
}

Exemplo 2: Vários fundos com imagens e posição específica

#multiBackground2 {
  background: url('image1.jpg') no-repeat center, 
              url('image2.jpg') no-repeat right bottom;
  height: 300px;
  width: 500px;
}

Exemplo 3: Vários fundos com tamanho e repetição diferentes

#multiBackground3 {
  background: url('image1.jpg') no-repeat center / 100px, 
              url('image2.jpg') repeat-x;
  height: 300px;
  width: 500px;
}

Especificando Posições e Tamanhos de Fundos

Você pode especificar a posição e o tamanho de cada imagem de fundo, assim como o comportamento de repetição.

Exemplo de Várias Imagens com Diferentes Posições e Tamanhos

#multiBackground4 {
  background: url('image1.jpg') no-repeat top left / 150px, 
              url('image2.jpg') no-repeat top right / cover;
  height: 300px;
  width: 500px;
}

Exemplo Adicional: Vários Fundos com CSS

Este é um exemplo de como usar múltiplos fundos CSS com diferentes imagens e propriedades de repetição e posicionamento.

<!DOCTYPE html>
<html>
<head>
<style> 
#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}
</style>
</head>
<body>

<h1>Múltiplos Fundos</h1>
<p>O seguinte elemento div possui duas imagens de fundo:</p>

<div id="example1">
  <h1>Lorem Ipsum Dolor</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

Propriedades CSS de Vários Fundos

Testando Vários Fundos

Escolha abaixo diferentes combinações de fundos para ver o efeito diretamente!

Resultado:

Capítulo 62: Cores CSS

O CSS oferece várias formas de definir cores para os elementos. Isso inclui nomes de cores, valores HEX, RGB, RGBA, HSL e HSLA.

Cores RGBA

Os valores de cor RGBA são uma extensão dos valores de cor RGB com um canal alfa, que especifica a opacidade de uma cor.

Um valor de cor RGBA é especificado com: rgba(red, green, blue, alpha), onde o parâmetro alpha é um número entre 0.0 (totalmente transparente) e 1.0 (totalmente opaco).

Exemplo de Cores RGBA

#p1 { background-color: rgba(255, 0, 0, 0.3); }  /* vermelho com opacidade */

#p2 { background-color: rgba(0, 255, 0, 0.3); }  /* verde com opacidade */

#p3 { background-color: rgba(0, 0, 255, 0.3); }  /* azul com opacidade */

Cores HSL

HSL significa Matiz, Saturação e Luminosidade. Um valor de cor HSL é especificado com: hsl(hue, saturation, lightness).

Exemplo de Cores HSL

#p1 { background-color: hsl(120, 100%, 50%); }  /* verde */

#p2 { background-color: hsl(120, 100%, 75%); }  /* verde claro */

#p3 { background-color: hsl(120, 100%, 25%); }  /* verde escuro */

Cores HSLA

Os valores de cor HSLA são uma extensão dos valores de cor HSL com um canal alfa, que especifica a opacidade da cor.

Um valor de cor HSLA é especificado com: hsla(hue, saturation, lightness, alpha), onde o parâmetro alpha define a opacidade.

Exemplo de Cores HSLA

#p1 { background-color: hsla(120, 100%, 50%, 0.3); }  /* verde com opacidade */

#p2 { background-color: hsla(120, 100%, 75%, 0.3); }  /* verde claro com opacidade */

#p3 { background-color: hsla(120, 100%, 25%, 0.3); }  /* verde escuro com opacidade */

Opacidade

A propriedade opacity no CSS define a opacidade de todo o elemento. Isso inclui tanto a cor de fundo quanto o texto do elemento.

O valor da propriedade opacity deve ser um número entre 0,0 (totalmente transparente) e 1,0 (totalmente opaco).

Exemplo de Opacidade

#p1 { background-color: rgb(255, 0, 0); opacity: 0.6; }  /* vermelho com opacidade */

#p2 { background-color: rgb(0, 255, 0); opacity: 0.6; }  /* verde com opacidade */

#p3 { background-color: rgb(0, 0, 255); opacity: 0.6; }  /* azul com opacidade */

Testando Cores

Escolha abaixo diferentes combinações de cores para ver o efeito diretamente!

Resultado:

Capítulo 63: Palavras-chave de Cores CSS

Esta página explicará as palavras-chave transparent, currentcolor e inherit.

A palavra-chave transparent

A palavra-chave transparent é usada para tornar uma cor transparente. Isso é frequentemente usado para tornar uma cor de fundo transparente para um elemento.

Exemplo 1: Fundo transparente

body {
  background-image: url("paper.gif");
}

div {
  background-color: transparent;
}

A palavra-chave currentcolor

A palavra-chave currentcolor é como uma variável que contém o valor atual da propriedade de cor de um elemento.

Exemplo 2: Usando currentcolor para borda

div {
  color: blue;
  border: 10px solid currentcolor;
}

Exemplo 3: Usando currentcolor para cor de fundo

body {
  color: purple;
}

div {
  background-color: currentcolor;
}

Exemplo 4: Usando currentcolor para borda e sombra

body {
  color: green;
}

div {
  box-shadow: 0px 0px 15px currentcolor;
  border: 5px solid currentcolor;
}

A palavra-chave inherit

A palavra-chave inherit especifica que uma propriedade deve herdar seu valor de seu elemento pai.

Exemplo 5: Herdando propriedades

div {
  border: 2px solid red;
}

span {
  border: inherit;
}

Exemplo Adicional: Teste interativo

Escolha diferentes valores para as palavras-chave e veja como elas afetam o estilo!

Resultado:

Capítulo 64: Gradientes CSS

Fundos Gradientes permitem que você crie transições suaves entre várias cores. O CSS oferece três tipos principais de gradientes: lineares, radiais e cônicos.

Gradientes Lineares CSS

Para criar um gradiente linear, você deve definir pelo menos duas paradas de cor. As paradas de cor determinam as cores entre as quais o gradiente transitará.

Exemplo 1: Gradiente Linear - De Cima para Baixo

#grad {
  background-image: linear-gradient(red, yellow);
}

Exemplo 2: Gradiente Linear - Da Esquerda para a Direita

#grad {
  background-image: linear-gradient(to right, red, yellow);
}

Exemplo 3: Gradiente Linear - Diagonal

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Exemplo 4: Gradiente Linear - Usando Ângulos

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

Exemplo 5: Gradiente Linear - Várias Paradas de Cor

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Exemplo 6: Gradiente Linear - Arco-íris

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Exemplo 7: Gradiente Linear - Usando Transparência

#grad {
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

Exemplo 8: Gradiente Linear - Repetido

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Testando Gradientes

Escolha as cores e direções para ver como os gradientes se comportam!

Resultado:

Capítulo 65: Gradientes Radiais CSS

Um gradiente radial é um gradiente que se espalha a partir de um ponto central e pode ter diferentes formas e tamanhos.

Gradiente Radial - Sintaxe

A sintaxe básica para criar um gradiente radial é a seguinte:

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Por padrão, a forma é ellipse, o tamanho é farthest-corner, e a posição é o centro.

Exemplo 1: Gradiente Radial - Paradas de cores uniformemente espaçadas

#grad {
  background-image: radial-gradient(red, yellow, green);
}

Exemplo 2: Gradiente Radial - Paradas de cores com espaçamento diferente

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

Exemplo 3: Gradiente Radial - Definindo Forma (Círculo)

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

Exemplo 4: Gradiente Radial - Definindo Tamanho

#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

Exemplo 5: Gradiente Radial Repetitivo

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Testando Gradientes Radiais

Escolha as cores e parâmetros para ver como o gradiente radial se comporta!

Resultado:

Capítulo 66: Gradientes Cônicos CSS

Os gradientes cônicos CSS permitem transições de cores giradas em torno de um ponto central. Para criar um gradiente cônico, defina pelo menos duas cores.

Gradiente Cônico - Três Cores

#grad {
  background-image: conic-gradient(red, yellow, green);
}

Gradiente Cônico - Cinco Cores

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
}

Gradiente Cônico - Três Cores e Graus

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}

Gradiente Cônico - Gráfico de Pizza

Adicione border-radius: 50% para criar gráficos de pizza.

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

Gradiente Cônico - Ângulo Especificado

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
}

Gradiente Cônico - Posição Central Especificada

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
}

Gradiente Cônico Repetitivo

#grad {
  background-image: repeating-conic-gradient(red 10%, yellow 20%);
  border-radius: 50%;
}

Funções de Gradiente CSS

A tabela a seguir lista as funções de gradiente CSS:

Teste seu gradiente cônico aqui!

Resultado:

Capítulo 67: Efeitos de Sombra CSS

Com CSS você pode criar efeitos de sombra em textos e elementos. Vamos explorar algumas formas de adicionar sombra usando as propriedades text-shadow e box-shadow.

Sombra de Texto CSS

A propriedade text-shadow aplica sombra ao texto. Aqui estão alguns exemplos de efeitos de sombra em texto:

Efeito de Sombra de Texto (Horizontal e Vertical)

h1 {
  text-shadow: 2px 2px;
}

Efeito de Sombra de Texto com Cor

h1 {
  text-shadow: 2px 2px red;
}

Efeito de Sombra de Texto com Desfoque

h1 {
  text-shadow: 2px 2px 5px red;
}

Texto Branco com Sombra Preta

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Sombra de Texto Estilo Neon

h1 {
  text-shadow: 0 0 3px #FF0000;
}

Sombras Múltiplas

Para adicionar mais de uma sombra ao texto, basta separar as sombras com vírgulas. Aqui estão alguns exemplos:

Sombra Neon Vermelha e Azul

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Texto Branco com Múltiplas Sombras

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Borda ao Redor do Texto

Você pode usar a propriedade text-shadow para criar uma borda ao redor do texto (sem sombras):

h1 {
  color: coral;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

Teste seu efeito de sombra de texto aqui!

Resultado:

Teste seu efeito de sombra de texto aqui!

Capítulo 68: Sombra da Caixa CSS

A propriedade box-shadow é usada para adicionar uma ou mais sombras a um elemento.

Especificar uma Sombra Horizontal e Vertical

div {
  box-shadow: 10px 10px;
}

Especificar uma Cor para a Sombra

div {
  box-shadow: 10px 10px lightblue;
}

Adicionar um Efeito de Desfoque à Sombra

div {
  box-shadow: 10px 10px 5px lightblue;
}

Definir o Raio de Propagação da Sombra

div {
  box-shadow: 10px 10px 5px 12px lightblue;
}

Definir o Parâmetro de Inserção

div {
  box-shadow: 10px 10px 5px lightblue inset;
}

Adicionar Múltiplas Sombras

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

Criar Cartões com Sombra

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

Propriedades de Sombra CSS

A tabela a seguir lista as propriedades de sombra CSS:

Teste sua sombra de caixa aqui!

Resultado:

Capítulo 69: Efeitos de Texto CSS

CSS Text Overflow, quebra de linha, regras de quebra de linha e modos de escrita. Neste capítulo você aprenderá sobre as seguintes propriedades:

• text-overflow
• word-wrap
• word-break
• writing-mode

Estouro de Texto CSS

A propriedade text-overflow especifica como o conteúdo excedente que não é exibido deve ser sinalizado ao usuário.

p.test1 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip;
}

p.test2 {
  white-space: nowrap;
  width: 200px;
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis;
}

Quebra de Palavras CSS

A propriedade word-wrap permite que palavras longas sejam quebradas e colocadas na próxima linha.

p {
  word-wrap: break-word;
}

Quebra de Palavras CSS

A propriedade word-break especifica regras de quebra de linha para palavras.

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

Modo de Escrita CSS

A propriedade writing-mode especifica se as linhas de texto são dispostas horizontalmente ou verticalmente.

p.test1 {
  writing-mode: horizontal-tb;
}

span.test2 {
  writing-mode: vertical-rl;
}

p.test2 {
  writing-mode: vertical-rl;
}

Propriedades do Efeito de Texto CSS

A tabela a seguir lista as propriedades do efeito de texto CSS:

Teste sua Quebra de Texto!

Resultado:

Este é um texto longo que não cabe na caixa e precisa ser testado para verificar os efeitos.

Capítulo 70: Fontes CSS para Web

A regra @font-face do CSS permite que os designers da Web usem fontes que não estão instaladas no computador do usuário.

Quando você encontrar/comprar a fonte que deseja usar, basta incluir o arquivo da fonte no seu servidor web, e ele será baixado automaticamente para o usuário quando necessário.

Diferentes Formatos de Fonte

• Fontes TrueType (TTF): Padrão mais comum para os sistemas operacionais Mac OS e Microsoft Windows.
• Fontes OpenType (OTF): Formato de fonte escalável, usado amplamente nas plataformas de computador.
• Formato WOFF: Formato de fonte para uso em páginas da web, com compressão e metadados adicionais.
• Formato WOFF 2.0: Melhoria no formato WOFF 1.0, com melhor compactação.
• Fontes SVG: Permite usar SVG como glifos para exibir texto.
• Fontes EOT: Compactadas para uso como fontes incorporadas em páginas da web.

Suporte do Navegador para Formatos de Fonte

Usando a Fonte que Você Deseja

Na regra @font-face, defina um nome para a fonte e aponte para o arquivo da fonte. Em seguida, use a propriedade font-family para aplicar a fonte aos elementos HTML.

Exemplo de Definição e Uso de Fonte

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}
    

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}
    

Descritores de Fontes CSS

A tabela a seguir lista todos os descritores de fonte que podem ser definidos dentro da regra @font-face:

Teste a Fonte

Texto de Exemplo:

Este é um exemplo de texto para testar a fonte.

Capítulo 71: Transformações CSS 2D

Com a propriedade CSS transform, você pode mover, girar, dimensionar e inclinar elementos na página. As transformações 2D permitem criar efeitos visuais dinâmicos.

Propriedade CSS transform

A propriedade transform permite aplicar várias transformações em um elemento, como translação, rotação, escalonamento e inclinação. As funções que podemos usar incluem:

• translate() - Move o elemento
• rotate() - Gira o elemento
• scale() - Ajusta o tamanho do elemento
• skew() - Inclina o elemento
• matrix() - Aplica várias transformações simultaneamente

Funções de Transformação CSS 2D

Exemplo de Transformações CSS 2D

Exemplo 1: Translação (mover)

#translateExample {
  transform: translate(50px, 100px);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
}

Exemplo 2: Rotação

#rotateExample {
  transform: rotate(45deg);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
}

Exemplo 3: Escalonamento

#scaleExample {
  transform: scale(2, 1.5);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
}

Exemplo 4: Inclinação

#skewExample {
  transform: skew(20deg, 10deg);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
}

Exemplo 5: Usando Matrix para múltiplas transformações

#matrixExample {
  transform: matrix(1, -0.3, 0.3, 1, 50, 50);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
}

Propriedades CSS para Transformações

Testando Transformações CSS 2D

Experimente as diferentes transformações para ver os efeitos diretamente!

Resultado:

Capítulo 72: Transformações CSS 3D

CSS também suporta transformações 3D. Passe o mouse sobre os elementos abaixo para ver a diferença entre uma transformação 2D e 3D:

Rotação 2D vs Rotação 3D

Funções de Transformação CSS 3D

Com a propriedade CSS transform, você pode usar as seguintes funções de transformação 3D:

Exemplo de Transformações CSS 3D

Exemplo 1: Usando rotateX()

#rotateXExample {
  transform: rotateX(150deg);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
  transition: transform 1s;
}

Exemplo 2: Usando rotateY()

#rotateYExample {
  transform: rotateY(150deg);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
  transition: transform 1s;
}

Exemplo 3: Usando rotateZ()

#rotateZExample {
  transform: rotateZ(90deg);
  width: 100px;
  height: 100px;
  background-color: #ffcc00;
  transition: transform 1s;
}

Propriedades de Transformação CSS 3D

Funções de Transformação 3D CSS

Testando Transformações CSS 3D

Experimente as transformações 3D para ver os efeitos diretamente!

Resultado:

Capítulo 73: Transições CSS

As transições CSS permitem que você altere valores de propriedades suavemente, ao longo de um determinado período.

Passe o mouse sobre o elemento abaixo para ver um efeito de transição CSS:

Como usar transições CSS?

Para criar um efeito de transição, você deve especificar duas coisas:

• A propriedade CSS à qual você deseja adicionar um efeito;
• A duração do efeito.

Observação: se a parte da duração não for especificada, a transição não terá efeito, porque o valor padrão é 0.

Exemplo 1: Transição de largura