Materiais de… / ...

/ Principais Pro… Criado com o

Principais Propriedades

Propriedades de texto
Nessa sessão veremos algumas das principais propriedades utilizadas para customizar textos em
páginas HTML.
text

A propriedade text e suas variações são propriedades independentes que são utilidadas
para controlar diferentes aspectos do texto em um elemento HTML.

• text-align

Controla o alinhamento do texto dentro de um elemento. Pode ter valores como left ,
right , center e justify .

Exemplo:

JavaScript

p { text-align: center; }

• text-transform : Define a transformação do texto, como torná-lo maiúsculo, minúsculo

ou capitalizado.

Valores que o text-transform pode receber:

1. uppercase : Transforma todo o texto para letras maiúsculas.

CSS

p { text-transform: uppercase; }

2. lowercase : Transforma todo o texto para letras minúsculas.

CSS

p { text-transform: lowercase; }

3. capitalize : Transforma a primeira letra de cada palavra em maiúscula.

CSS

p { text-transform: capitalize; }
4. none : Não aplica nenhuma transformação ao texto. O texto é exibido conforme está na
fonte.

CSS

p { text-transform: none; }

Estes valores são utilizados para modificar o caso das letras no texto, proporcionando
diferentes estilos de exibição. Escolha o valor que melhor atenda aos requisitos de design do
seu projeto.

• text-indent : Define o recuo da primeira linha de um bloco de texto

Exemplo:

JavaScript

p { text-indent: 20px; }

Nota: Os valores podem ser definidos em pixels , em porcentagem , e em valores

relativos . (Mais detalhes em Unidades de Medidas)
color

A propriedade color é utilizada para definir a cor de um texto.

As cores podem ser especificadas de diversas maneiras, incluindo os formatos RGB,
hexadecimal, nome da cor e outros. Abaixo temos alguns exemplos.

1. Hexadecimal:
O formato hexadecimal é uma maneira comum de representar cores no CSS. Consiste em
seis caracteres, onde os dois primeiros representam a intensidade da cor vermelha, os
dois seguintes a intensidade da cor verde, e os dois últimos a intensidade da cor azul.

CSS

p { color: #ff0000; /* Vermelho */ }

2. RGB:

O formato RGB representa a cor usando os componentes de vermelho (R), verde (G) e azul
(B). Cada componente pode variar de 0 a 255.

CSS

p { color: rgb(255, 0, 0); /* Vermelho */ }

3. RGBA:

O formato RGBA é semelhante ao RGB, mas inclui um valor de opacidade (alfa) que varia
de 0 a 1. Isso permite tornar a cor parcialmente transparente.

CSS

p { color: rgba(255, 0, 0, 0.5); /* Vermelho com 50% de opacidade */ }

4. Nome da Cor:
Algumas cores têm nomes associados, como red , blue , green , entre outros.

CSS

p { color: red; /* Vermelho */ }

Exemplo de aplicação:
 CSS

h1 { color: #2413dc; } h2 { color: red; }

Resultado:
font

A propriedade font é uma propriedade composta que permite ao desenvolvedor definir

várias propriedades em uma únida declaração.
Dentre as mais usadas variações das propriedades relacionadas a fonte temos:

1. font-style : Define o estilo da fonte, como normal, itálico ou oblíquo.

CSS

p { font-style: italic; }

2. font-variant : Define a variante da fonte, como normal ou small-caps.

CSS

p { font-variant: small-caps; }

3. font-weight : Define a espessura da fonte, como normal, bold ou um valor numérico.

CSS

p { font-weight: bold; }

4. font-size : Define o tamanho da fonte. Pode ser especificado em unidades como pixels,
em, rem, porcentagem, etc.

CSS

p { font-size: 16px; }

5. font-family : Define a família de fontes, indicando uma ou mais fontes preferidas.

CSS

cssCopy code p { font-family: "Helvetica", sans-serif; }

Você pode combinar essas propriedades conforme necessário para ajustar a aparência da
fonte no seu documento HTML. Por exemplo:
 CSS

cssCopy code p { font-style: italic; font-weight: bold; font-size: 18px; fon

t-family: "Times New Roman", serif; }

Agora, se preferir agrupar essas propriedades usando a propriedade font , isso seria feito
assim:

CSS

cssCopy code p { font: italic bold 18px "Times New Roman", serif; }

Ambas as abordagens são válidas, e a escolha dependerá da complexidade do seu estilo de

fonte e de suas preferências pessoais.

Exemplo:

CSS

h1 { font-size: 50px; font-family: 'Courier New', Courier, monospace; font-

style: italic }

Resultado:
letter-spacing

A proprieddade letter-spacing é utilizada para controlar o espaçamento entre caracteres

de um texto.
Exemplo:

CSS

p { letter-spacing: 2px; /* Aumenta o espaçamento entre os caracteres em 2 p

ixels */ }

CSS

p { letter-spacing: -1px; /* Reduz o espaçamento entre os caracteres em 1 pi

xel */ }

Essa propriedade é útil quando você deseja ajustar sutilmente o espaçamento entre as letras
para melhorar a legibilidade ou obter um efeito de design específico.

Exemplo:

CSS

h1 { letter-spacing: 4.9px; }

Resultado:
line-height

A propriedade line-height define a altura da linha em um bloco de texto. Pode ser definida
como um número puro (múltiplo da altura da fonte) ou como uma unidade específica.
Exemplo:

CSS

p { line-height: 1.5; /* Define a altura da linha como 1,5 vezes a altura da

fonte */

CSS

p { line-height: 24px; /* Define a altura da linha como 24 pixels */ }

O line-height é crucial para o espaçamento vertical entre linhas de texto. Um valor

adequado pode melhorar a legibilidade do texto e afetar a aparência geral do layout. Quando o
valor é unitless (um número puro), ele é multiplicado pelo tamanho da fonte do elemento, o
que permite que a altura da linha seja proporcional ao tamanho da fonte.

Exemplo:

CSS

h1 { line-height: 90px; }

Resultado:
Unidades de medida
As unidades de medida no CSS são utilizadas para especificar tamanhos e distâncias em
propriedades como largura, altura, margens, espaçamento, entre outras. Existem diferentes tipos
de unidades de medida no CSS, e elas podem ser classificadas em unidades absolutas e unidades
relativas.
Unidades de medida absolutas

1. Pixels ( px ):

• Descrição: Uma unidade absoluta que representa um pixel no dispositivo.

• Exemplo:

CSS

p { font-size: 16px; margin-left: 10px; }

2. Polegadas ( in ):

• Descrição: Uma unidade absoluta que representa uma polegada física.

• Exemplo:

CSS

div { width: 2in; }

3. Centímetros ( cm ):

• Descrição: Uma unidade absoluta que representa um centímetro.

• Exemplo:

CSS

img { height: 5cm; }

4. Milímetros ( mm ):

• Descrição: Uma unidade absoluta que representa um milímetro.

• Exemplo:

CSS

section { margin-top: 10mm;

5. Pontos ( pt ):

• Descrição: Uma unidade absoluta comum em impressão, onde 1 ponto é

aproximadamente 1/72 de polegada.

• Exemplo:

CSS

h1 { font-size: 18pt; }

6. Picas ( pc ):

• Descrição: Uma unidade absoluta usada principalmente em impressão, onde 1 pica é

igual a 12 pontos.

• Exemplo:

CSS

p { line-height: 1.5pc; }
Unidades de medida relativas

1. Em ( em ):

• Descrição: Representa o tamanho da fonte do elemento pai.

• Exemplo:

CSS

p { margin-left: 2em; }

2. Rem ( rem ):

• Descrição: Representa o tamanho da fonte do elemento raiz (normalmente, o tamanho

da fonte do elemento <html> ).

• Exemplo:

CSS

body { font-size: 16px; } p { margin-left: 1.5rem; /* Será 1.5 vezes o

tamanho da fonte do elemento raiz (16px) */ }

3. Porcentagem ( % ):

• Descrição: Representa uma porcentagem do valor da propriedade do elemento pai.

• Exemplo:

CSS

div { width: 50%; }

4. Viewport Width ( vw ):

• Descrição: Representa uma porcentagem da largura da viewport.

• Exemplo:

CSS

section { width: 50vw; }

5. Viewport Height ( vh ):

• Descrição: Representa uma porcentagem da altura da viewport.

• Exemplo:

CSS

aside { height: 80vh; }

6. Viewport Minimum ( vmin ) e Viewport Maximum ( vmax ):

• Descrição: vmin é a menor das unidades vw e vh , enquanto vmax é a maior.

• Exemplo:

CSS

img { width: 50vmin; }

Considerações finais

• Escolha da Unidade:

◦ Escolha a unidade de medida com base nos requisitos de design e no comportamento

desejado.

◦ Unidades relativas são frequentemente preferidas para criar layouts responsivos.

• Combinação de Unidades:

◦ É possível combinar unidades em propriedades diferentes para obter resultados mais

complexos.

CSS

div { margin: 1em 2rem; /* Margem superior/inferior de 1em e margem esque

rda/direita de 2rem */ }

Lembre-se de que a escolha da unidade depende do contexto e das necessidades específicas

do seu projeto. As unidades relativas são frequentemente preferidas em ambientes
responsivos, pois ajudam a manter proporções consistentes em relação ao tamanho da fonte
ou à largura/altura da janela de exibição.
Opacidade e transparência
Opacidade e transparência são conceitos relacionados que permitem ajustar a visibilidade dos
elementos em uma página web.
opacity

1. Opacidade ( opacity ):
A propriedade opacity permite ajustar a opacidade de um elemento, variando de 0
(totalmente transparente) a 1 (totalmente opaco).
Exemplo:

CSS

div { opacity: 0.7; /* Define a opacidade para 70% */ }

Neste exemplo, o elemento <div> terá uma opacidade de 70%, tornando-o parcialmente
transparente.

2. Transparência de Cores:
Outra maneira de alcançar a transparência é utilizando cores RGBA (Red, Green, Blue, Alpha),
onde o componente alfa ( A ) controla a opacidade da cor. O valor alfa varia de 0 (totalmente
transparente) a 1 (totalmente opaco).

Exemplo:

CSS

p { background-color: rgba(255, 0, 0, 0.5); /* Fundo vermelho com 50% de opa

cidade */ }

Neste exemplo, o fundo do elemento <p> será vermelho com 50% de opacidade.

3. Transições de Opacidade:
É possível criar efeitos de transição suaves na opacidade usando a propriedade transition .

Exemplo:

CSS

div { opacity: 1; transition: opacity 0.5s ease-in-out; } div:hover { opacit

y: 0.5; /* Opacidade reduzida ao passar o mouse */

Neste exemplo, a opacidade da <div> é reduzida suavemente ao passar o mouse sobre ela,
graças à transição configurada.
 4. Pseudo-elemento ::before e ::after com Opacidade:
É possível aplicar opacidade a pseudo-elementos ::before e ::after para criar camadas
adicionais de elementos com diferentes níveis de transparência.

Exemplo:

CSS

div::before { content: ""; display: block; width: 100px; height: 100px; back
ground-color: blue; opacity: 0.8; }

Neste exemplo, um pseudo-elemento ::before é adicionado a um elemento <div> , criando

uma camada azul com 80% de opacidade.

5. Propriedade backdrop-filter :
A propriedade backdrop-filter permite aplicar efeitos visuais, como desfoque ou
escurecimento, na área atrás de um elemento.

Exemplo:

CSS

div { backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.

5); /* Fundo com 50% de opacidade */ }

Neste exemplo, a área atrás do elemento <div> é desfocada utilizando backdrop-filter ,

enquanto o próprio elemento tem um fundo semitransparente.

Flexibilidade e Espaçamento
A flexibilidade e o espaçamento são aspectos cruciais no design de layouts em CSS,
especialmente quando se trata de criar interfaces responsivas e atraentes.
Flexbox

Flexibilidade com Flexbox:

O modelo de layout flexível, conhecido como Flexbox, é uma poderosa ferramenta para criar
designs flexíveis e responsivos. Ele permite organizar elementos em um contêiner de maneira
que eles possam crescer, encolher e se alinhar dinamicamente.

Propriedades do Flexbox:
1. display: flex; ou display: inline-flex; :

• Descrição: Define um contêiner como um contêiner flexível ou inline-flexível.

CSS

.container { display: flex; }

2. flex-direction :

• Descrição: Define a direção dos itens flexíveis no contêiner (linha ou coluna).

CSS

.container { flex-direction: row; /* Itens dispostos em linha (padrão) */

}

3. justify-content :

• Descrição: Controla o alinhamento dos itens flexíveis ao longo do eixo principal.

CSS

.container { justify-content: space-between; /* Espaço uniforme entre os

itens */ }

4. align-items e align-self :

• Descrição: Controlam o alinhamento dos itens flexíveis ao longo do eixo transversal.

CSS

.container { align-items: center; /* Itens centrados no eixo transversal

*/ } .item { align-self: flex-end; /* Item específico alinhado à extremid
ade do eixo transversal */ }
5. flex :

• Descrição: Especifica como os itens flexíveis devem crescer ou encolher para

preencher o espaço disponível.

CSS

.item { flex: 1; /* Cresce para ocupar o espaço disponível */ }

Grid

O sistema de layout de grade (Grid Layout) é uma poderosa ferramenta no CSS para criar
layouts bidimensionais, ou seja, layouts em duas dimensões: linhas e colunas. Ele fornece
uma maneira eficiente de organizar elementos em uma grade, facilitando a criação de designs
complexos e responsivos.
Conceitos Básicos
1. Contêiner de Grade ( display: grid; ):

• O elemento pai que recebe a propriedade display: grid; torna-se um contêiner

de grade, onde seus filhos diretos se tornam itens da grade.

CSS

.grid-container { display: grid; }

2. Linhas e Colunas:

• O layout de grade é definido por linhas (horizontais) e colunas (verticais).

• Você pode especificar o número de linhas e colunas usando grid-template-rows

e grid-template-columns .

CSS

.grid-container { display: grid; grid-template-rows: 100px 200px; /* D

uas linhas com alturas específicas */ grid-template-columns: 1fr 2fr;
/* Duas colunas com larguras fracionadas */ }

3. Áreas da Grade:

• Você pode nomear áreas na grade usando grid-template-areas e, em seguida,

atribuir esses nomes aos itens usando grid-area .

CSS

.grid-container { display: grid; grid-template-areas: "header header"

"sidebar main" "footer footer"; } .header { grid-area: header; } .side
bar { grid-area: sidebar; } .main { grid-area: main; } .footer { grid-
area: footer; }
Propriedades de Alinhamento

1. justify-items e align-items :

• Controlam o alinhamento dos itens da grade ao longo do eixo principal e

transversal, respectivamente.

CSS

.grid-container { display: grid; justify-items: center; /* Centraliza

os itens ao longo do eixo principal */ align-items: start; /* Alinha o
s itens no início ao longo do eixo transversal */ }

2. justify-content e align-content :

• Controlam o alinhamento do conteúdo da grade dentro do contêiner de grade ao

longo do eixo principal e transversal, respectivamente.

CSS

.grid-container { display: grid; justify-content: space-around; /* Dis

tribui o espaço ao redor dos itens ao longo do eixo principal */ align
-content: center; /* Centraliza o conteúdo ao longo do eixo transversa
l */ }

3. justify-self e align-self :

• Controlam o alinhamento individual de itens dentro da grade.

CSS

.item { justify-self: end; /* Alinha o item à extremidade ao longo do

eixo principal */ align-self: stretch; /* Estica o item ao longo do ei
xo transversal */ }

Unidades de Fração fr

A unidade fr (fração) é uma unidade relativa que representa a fração do espaço

disponível. Ela é frequentemente usada para criar layouts flexíveis e responsivos.

CSS

.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* T

rês colunas, a segunda é o dobro da largura das outras */ }
Proriedades de espaçamento
width e height

Estão ligados a largura e altura dos elementos.

CSS

width: 10px; /* Controla a largura do elemento */ min-width: 25rem; /* Co

ntrola a largura mínima que um elemento pode ter*/ max-width: 1vw; /* Con
trola a largura máxima que um elemento pode ter */ height: 3em; /* Contro
la a altura do elemento */ min-height: 25%; /* Controla a altura mínima q
ue um elemento pode ter */ max-height: 20px; /* Controla a altura máxima
que um elemento pode ter */

Exemplo:

CSS

h1 { background-color: blue; width: 30%; height: 200px; }

Resultado:
margin

Define o espaçamento externo ao redor de um elemento. Pode ser aplicado

individualmente para cada lado ( margin-top , margin-right , margin-bottom , margin-
left ) ou de uma só vez usando a propriedade margin .

CSS

.box { margin: 10px; /* Aplica 10 pixels de margem em todos os lados */ }

Exemplo:

CSS

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

left: 80px; }

Resultado:
 padding

Define o espaçamento interno ao redor do conteúdo de um elemento. Assim como

margin , pode ser aplicado individualmente para cada lado ( padding-top , padding-
right , padding-bottom , padding-left )ou de uma só vez padding .

CSS

.box { padding: 20px; /* Aplica 20 pixels de preenchimento em todos os la

dos */ }

Exemplo:

CSS

Se a propriedade padding tiver quatro valores: p { border: 2px solid red;

padding: 10px 5px 150px 50px; } /* preenchimento superior (padding-top) é
10px /* preenchimento direito (padding-right) é 5px /* preenchimento
inferior (padding-bottom) é de 150px /* preenchimento esquerdo (padding-
left) é 50px

Resultado:

Listas e Estilização de cursor

listas

Estilizar listas em HTML é uma prática comum para melhorar a aparência visual e a
usabilidade. As listas podem ser estilizadas de várias maneiras usando CSS.

1. Remover Padrões de Estilo de Lista:

Por padrão, as listas em HTML têm algum estilo padrão. Você pode remover esses estilos
padrão usando o seguinte CSS:

CSS

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

Este trecho de CSS remove os marcadores e a margem/preenchimento padrão de listas não

ordenadas ( ul ) e ordenadas ( ol ).

2. Estilização de Listas Não Ordenadas:

CSS

ul { list-style: none; padding: 0; margin: 0; } ul li { padding-left: 20px;

/* Adiciona espaço à esquerda para simular um marcador */ position: relativ
e; } ul li:before { content: "\2022"; /* Código do caractere de marcador cir
cular */ color: #007BFF; /* Cor do marcador */ font-size: 1.2em; /* Tamanho
do marcador */ position: absolute; left: 0; top: 50%; transform: translateY
(-50%); }

Este exemplo estiliza uma lista não ordenada removendo os marcadores padrão e
adicionando um marcador circular personalizado para cada item da lista.

3. Estilização de Listas Ordenadas:

CSS

ol { list-style: none; padding: 0; margin: 0; } ol li { counter-increment: i

tem; padding-left: 30px; /* Adiciona espaço à esquerda para acomodar o númer
o */ } ol li:before { content: counter(item) ". "; /* Adiciona números aos i
tens */ color: #28A745; /* Cor do número */ font-weight: bold; }

Este exemplo estiliza uma lista ordenada removendo os números padrão e adicionando
números personalizados para cada item da lista.
4. Estilização de Listas Aninhadas:
CSS

ul ul { margin-top: 10px; /* Espaçamento entre listas aninhadas */ } ul ul l

i { padding-left: 30px; /* Adiciona espaço à esquerda para níveis aninhados
*/ position: relative; } ul ul li:before { content: "\25CF"; /* Código do ca
ractere do marcador do ponto preto */ color: #DC3545; /* Cor do marcador do
ponto preto */ font-size: 0.8em; /* Tamanho do marcador */ position: absolut
e; left: 0; top: 50%; transform: translateY(-50%); }

Este exemplo estiliza listas aninhadas, adicionando marcadores diferentes para os itens
aninhados e ajustando o espaçamento entre eles.
Estas são apenas algumas técnicas básicas, e a estilização de listas pode ser adaptada de
acordo com as necessidades específicas do design. Ao estilizar listas, é importante
considerar a acessibilidade e garantir que a hierarquia da lista seja mantida para os leitores de
tela e outros dispositivos.
cursor

O cursor em uma página web é um indicador visual que mostra a posição onde uma ação do
usuário pode ser executada (como clicar, selecionar texto, etc.). O CSS oferece uma variedade
de valores para a propriedade cursor , permitindo que você personalize o cursor de acordo
com a ação esperada.

1. auto :

• Descrição: O navegador decide o cursor.

• Uso: Normalmente, usado como valor padrão.

CSS

.link { cursor: auto; }

2. pointer :

• Descrição: Indica que a mão deve ser mostrada, indicando que o elemento é clicável.

• Uso: Em links, botões e outras interações clicáveis.

CSS

.button { cursor: pointer; }

3. default :

• Descrição: O cursor padrão do sistema operacional.

• Uso: Geralmente desnecessário, pois é o valor padrão.

CSS

.normal-text { cursor: default; }

4. move :

• Descrição: Indica que algo pode ser movido.

• Uso: Em elementos arrastáveis, como janelas modais ou barras de rolagem.

CSS

.draggable { cursor: move; }

5. text :

• Descrição: Indica que o texto pode ser selecionado.

• Uso: Em elementos de texto ou campos de entrada.

CSS

.selectable { cursor: text; }

6. crosshair :

• Descrição: Mostra um cursor em forma de cruz.

• Uso: Em jogos, ou para indicar a seleção de uma área.

CSS

.selection-area { cursor: crosshair; }

7. not-allowed :

• Descrição: Indica que a ação não é permitida.

• Uso: Em botões desativados ou áreas onde a interação não é permitida.

CSS

.disabled-button { cursor: not-allowed; }

8. wait :

• Descrição: Indica que o navegador está ocupado e o usuário deve aguardar.

• Uso: Em botões ou áreas onde ocorre um carregamento.

CSS

.loading { cursor: wait; }

Esses são apenas alguns exemplos, e existem muitos outros valores de cursor disponíveis. A
escolha do valor depende da ação que você deseja indicar ao usuário e do contexto do seu
design. Personalizar o cursor pode melhorar a experiência do usuário e fornecer pistas visuais
sobre a interatividade de certos elementos na sua página.
Propriedades de Layout
display

A propriedade CSS display controla como um elemento HTML é exibido na página. Ela
determina se o elemento se comportará como um bloco, um elemento em linha ou de alguma
outra maneira específica. Aqui estão alguns dos valores mais comuns para a propriedade
display :

display: block :

• Elementos com display: block são exibidos como blocos retangulares e normalmente
começam em uma nova linha. Eles ocupam toda a largura disponível e podem ter
margens, preenchimento e bordas.

display: inline :

• Elementos com display: inline são exibidos em linha com o texto ou outros
elementos em linha. Eles não iniciam uma nova linha e geralmente não podem ter
margens, preenchimento e bordas.

display: inline-block :

• Elementos com display: inline-block são semelhantes a elementos em linha, mas

podem ter margens, preenchimento e bordas, como elementos de bloco. Eles são exibidos
em linha e ocupam apenas o espaço necessário.

display: none :

• Elementos com display: none são totalmente ocultos e não ocupam espaço na página.
Eles não são renderizados.

display: flex :

• A propriedade display: flex cria um contêiner flexível e permite que os elementos

dentro dele se ajustem dinamicamente para preencher o espaço disponível. É usado para
criar layouts flexíveis e responsivos.

display: grid :
• A propriedade display: grid cria um contêiner de layout em grade, onde você pode
definir linhas e colunas para organizar elementos em um layout de grade. É útil para criar
layouts complexos e alinhados.

Essas são apenas algumas das opções de valores para a propriedade display . A escolha do
valor de display afeta o comportamento e a apresentação do elemento na página, e é uma
parte fundamental do design de layout em CSS.
background

CSS

.elemento { background-color: *hexadecimal, nome, rgb, rgba*; /* Controla a

cor de fundo */ background-image: *url()*; /* Coloca uma imagem como plano d
e fundo */ background-size: *x y, x/y, cover, contain, %, px, rem, em *; /*
Controla o tamanho do plano de fundo. Dois valores podem ser colocados, x e
y ou apenas o valor de x que ele será adicionado/removido proporcionalmente
em y */ background-repeat: *repeat, no-repeat*; /* Controla se a imagem de f
undo vai sofrer repetição*/ background-position: *top right bottom left, top