Introdução ao CSS
CSS, ou Cascading Style Sheets, é uma linguagem de estilo utilizada para
definir a apresentação de páginas web. Ele determina como os elementos de
uma página são exibidos, incluindo cores, fontes, tamanhos, espaçamentos e
muito mais.
O CSS é crucial para criar páginas web esteticamente agradáveis e
organizadas, permitindo que desenvolvedores web controlem o visual de seus
sites de forma consistente e eficiente.
by Aristides Martins
O que é CSS?
Linguagem de Estilo
CSS, ou Cascading Style Sheets, é uma
linguagem de estilo que define a
aparência e o layout das páginas web.
Ela controla elementos como cores,
fontes, tamanhos, espaçamento e
posicionamento de elementos.
Separação de Conteúdo e
Estilo
O CSS separa a estrutura do conteúdo
(HTML) da sua apresentação visual. Isso
facilita a manutenção, atualização e
personalização do site, além de melhorar
a acessibilidade.
Flexibilidade e Personalização
O CSS oferece uma grande flexibilidade para criar designs personalizados e adaptáveis a
diferentes dispositivos. Permite aplicar estilos específicos a diferentes partes da página,
como cabeçalhos, parágrafos e imagens.
Sintaxe básica do CSS
1
Regras CSS
As regras CSS são compostas por um seletor, uma chave e um valor. O seletor
indica qual elemento HTML será estilizado. A chave define a propriedade CSS a
ser modificada. O valor é o novo valor que será atribuído à propriedade.
2
Sintaxe básica
A sintaxe básica de uma regra CSS é a seguinte: seletor { propriedade: valor; } Por
exemplo, a regra h1 { color: blue; } define que o texto de todos os elementos h1 da
página deverá ser azul.
3
Múltiplas propriedades
É possível definir múltiplas propriedades CSS em uma única regra, separando-as
por ponto e vírgula. Por exemplo, a regra p { color: red; font-size: 16px; } define que
o texto de todos os elementos p deverá ser vermelho e ter um tamanho de fonte
de 16 pixels.
Seletores CSS
Selecionando elementos
Seletores CSS são como endereços específicos que permitem
que você encontre e manipule elementos HTML. Eles agem como
uma ponte entre suas regras CSS e os elementos que você
deseja estilizar. Essa capacidade de selecionar elementos
específicos é crucial para controlar a aparência e o
comportamento de seu site.
Tipos de Seletores
Existem vários tipos de seletores, cada um com sua própria
sintaxe e especificidade. Seletores simples, como "p" ou "h1",
selecionam todos os elementos com esse nome. Seletores mais
complexos, como "#meu-id" ou ".minha-classe", permitem que
você selecione elementos específicos com base em seus IDs ou
classes.
Tipos de Seletores
Seletores Universais
O seletor universal, representado por um
asterisco (*), seleciona todos os
elementos HTML na página. É útil quando
você deseja aplicar estilos a todos os
elementos, como definir uma fonte padrão
para todo o site.
Seletores de Elemento
Seletores de elemento são usados para
selecionar elementos HTML específicos,
como `
`, `
` ou ``. Eles são usados para aplicar
estilos a elementos do mesmo tipo. Por
exemplo, você pode usar `p` para aplicar
estilos a todos os parágrafos.
Seletores de ID
Seletores de ID são usados para
selecionar elementos HTML específicos
com base em seu atributo ID, que deve ser
único em toda a página. Eles são usados
para aplicar estilos a elementos
específicos. Por exemplo, você pode usar
`#my-element` para aplicar estilos a um
elemento com o ID "my-element".
Seletores de Classe
Seletores de classe são usados para
selecionar elementos HTML específicos
com base em seu atributo class. Eles são
usados para aplicar estilos a grupos de
elementos com características
semelhantes. Por exemplo, você pode
usar `.my-class` para aplicar estilos a
todos os elementos com a classe "my-
class".
Propriedades CSS
Definição de Estilo
As propriedades CSS determinam a aparência e o comportamento dos elementos da página.
Elas definem cores, fontes, tamanhos, espaçamentos e muito mais.
Aplicações Específicas
Cada propriedade CSS possui um conjunto de valores específicos que podem ser aplicados para
alcançar o efeito desejado. Esses valores podem ser números, cores, unidades de medida,
palavras-chave ou até mesmo funções.
Combinação e Interação
As propriedades CSS podem ser combinadas para criar estilos complexos e personalizados. A
ordem em que as propriedades são aplicadas pode influenciar o resultado final, e as
propriedades podem interagir entre si de forma complexa.
Valores das propriedades
Os valores das propriedades CSS são os elementos que determinam como a propriedade vai funcionar. Eles podem ser valores
numéricos, strings, cores, unidades de medida, ou até mesmo outras propriedades CSS.
Por exemplo, a propriedade color pode ter como valor uma cor, como red, blue, ou green, ou ainda um código hexadecimal, como
#ff0000 para vermelho. A propriedade font-size pode ter como valor um tamanho em pixels, como 16px, ou em porcentagem, como
100%.
Unidades de medida
Pixels (px)
Pixels são a unidade de
medida mais comum em
CSS. Um pixel representa um
ponto na tela do dispositivo.
Os pixels são usados para
definir o tamanho, a margem
e o espaçamento de
elementos.
A resolução da tela
influencia o tamanho dos
pixels. Uma tela com
resolução maior possui mais
pixels por polegada, o que
torna os pixels menores. Em
telas de alta resolução, pixels
menores podem resultar em
elementos mais nítidos e
detalhados.
Porcentagem (%)
Porcentagem é uma unidade
de medida relativa que define
um tamanho em relação ao
tamanho do elemento pai. Os
tamanhos dos elementos
são calculados com base no
tamanho do seu elemento
pai, o que torna a
porcentagem uma unidade
de medida flexível e
adaptável.
Por exemplo, se um
elemento tem uma largura de
50%, ele ocupa 50% da
largura do seu elemento pai.
Esta unidade é útil para criar
layouts que se adaptam a
diferentes tamanhos de tela,
pois os tamanhos dos
elementos respondem
automaticamente às
mudanças de tamanho do
elemento pai.
Em (em)
Em (em) é uma unidade de
medida relativa que se
baseia no tamanho da fonte
do elemento pai. O tamanho
de um elemento em ems é
calculado em relação ao
tamanho da fonte do
elemento pai.
Por exemplo, se um
elemento tem uma largura de
2em, ele tem uma largura
duas vezes maior que a
altura da fonte do seu
elemento pai. Essa unidade é
útil para criar layouts que se
adaptam a diferentes
tamanhos de fonte, pois os
tamanhos dos elementos
respondem
automaticamente às
mudanças de tamanho da
fonte do elemento pai.
Outras unidades
Outras unidades de medida
disponíveis em CSS incluem:
cm (centímetros), mm
(milímetros), pt (pontos) e pc
(picas).
Essas unidades são usadas
para definir tamanhos de
elementos em unidades de
medida físicas, o que é útil
em cenários específicos,
como quando você precisa
definir tamanhos precisos
para impressão.
Cascata e especificidade
A cascata é um conceito fundamental no CSS, que define a ordem em que as regras de estilo são aplicadas a um elemento. As regras
de estilo são aplicadas em uma ordem hierárquica, com as regras mais específicas tendo prioridade sobre as regras menos
específicas.
A especificidade é uma medida que determina a prioridade das regras de estilo. As regras com maior especificidade terão prioridade
sobre as regras com menor especificidade. A especificidade é calculada com base em vários fatores, como a seleção de elementos, o
uso de IDs e classes, e a localização das regras no arquivo CSS.
1
Especificidade mais alta
Regras dentro do elemento
2Especificidade média
Regras em arquivos CSS
3Especificidade mais baixa
Regras no navegador
Herança
11. Passagem de Estilos
A herança no CSS permite que
elementos HTML herdem estilos de
seus ancestrais. Se um elemento pai
possui uma propriedade específica,
seus filhos podem herdar essa
propriedade, a menos que seja
explicitamente definida como não
herdada.
22. Hierarquia de Estilos
A herança cria uma hierarquia de
estilos, onde elementos filhos podem
modificar estilos herdados de seus
pais, criando uma cascata de estilos
que se aplicam a elementos aninhados.
33. Simplificação do CSS
A herança facilita a manutenção e organização do CSS, pois você pode definir estilos
gerais para elementos pai e deixar que seus filhos herdem esses estilos, reduzindo a
necessidade de repetições.
Posicionamento de elementos
1Introdução
O posicionamento de elementos é uma das partes mais importantes do CSS,
pois permite controlar onde e como os elementos são posicionados na página.
Compreender os diferentes tipos de posicionamento é fundamental para criar
layouts eficientes e atraentes.
2Tipos de Posicionamento
O CSS oferece vários tipos de posicionamento, cada um com suas próprias
características e aplicações. Os principais tipos são: estático, relativo, absoluto,
fixo e sticky. A escolha do tipo de posicionamento depende do efeito desejado e
da complexidade do layout.
3Utilizando o Posicionamento
Para definir o posicionamento de um elemento, use a propriedade `position` e
especifique o tipo desejado. Além disso, pode ser necessário utilizar outras
propriedades, como `top`, `right`, `bottom` e `left`, para ajustar a posição do
elemento em relação a outros elementos ou à página.
Posicionamento Estático
Padrão Predefinido
O posicionamento estático é o padrão para todos os elementos
HTML. Ele coloca o elemento exatamente onde ele estaria no
fluxo normal do documento. A propriedade position: static; é
aplicada por padrão. É como se o elemento estivesse "preso" ao
seu lugar no fluxo normal do documento.
Sem Manipulação
Elementos com posicionamento estático não podem ser
manipulados usando as propriedades top, bottom, left e right.
Essas propriedades só têm efeito em elementos com
posicionamento diferente de estático.
Posicionamento Relativo
Ponto de Partida
O posicionamento relativo é o ponto de
partida para entender o posicionamento
de elementos em CSS. Ele fornece a base
para outros tipos de posicionamento,
como absoluto e fixo. Com o
posicionamento relativo, você define um
ponto de referência para outros
elementos, mas o elemento em si
permanece no seu fluxo normal.
Flexibilidade e Controle
O posicionamento relativo permite que
você mova um elemento em relação à sua
posição original usando as propriedades
top, right, bottom e left. Essas
propriedades definem o deslocamento do
elemento em relação à sua posição
normal no fluxo do documento.
Influenciando Outros Elementos
O posicionamento relativo é
especialmente útil quando você deseja
posicionar elementos em relação a outros
elementos na página. Por exemplo, você
pode usar o posicionamento relativo para
colocar um elemento acima ou abaixo de
outro elemento, ou para alinhar um
elemento a outro.
Posicionamento Absoluto
Sem Referência ao Fluxo Normal
Elementos com posicionamento absoluto são removidos do fluxo normal do documento. Eles
não ocupam espaço na página, e sua posição é definida em relação ao elemento pai mais
próximo com posicionamento diferente de static.
Posição Relativa ao Pai
O posicionamento absoluto permite definir a posição exata de um elemento usando
propriedades como top, right, bottom e left. Essas propriedades especificam a distância do
elemento em relação às bordas do elemento pai.
Posicionamento Flexível
O posicionamento absoluto é útil para criar layouts flexíveis, onde elementos podem ser
posicionados em relação a outros elementos sem depender da ordem do código. Isso permite
criar layouts criativos e responsivos.
Posicionamento Fixo
O Que É?
Posicionamento fixo é um valor da
propriedade `position` em CSS que
permite que um elemento fique fixo
em relação à janela do navegador. Ele
não se move quando a página é
rolada.
Aplicações Práticas
O posicionamento fixo é
frequentemente usado para
elementos como menus de
navegação, barras laterais ou botões
de ação. Esses elementos
permanecem visíveis mesmo quando
o usuário rola para baixo na página,
oferecendo uma experiência de
usuário mais fluida e consistente.
Coisas Importantes
Ao usar o posicionamento fixo, é
importante garantir que o elemento
tenha uma altura definida. Caso
contrário, ele pode sobrepor outros
elementos da página. Além disso, é
crucial lembrar que elementos fixos
não se movem com o fluxo normal do
documento.
Posicionamento Sticky
Introdução
Posicionamento *sticky* é uma combinação de *static* e
*fixed*. O elemento permanece *static* até que atinja um ponto
de referência definido. Em seguida, o elemento "gruda" na tela e
se comporta como *fixed*. Isso é ideal para manter elementos
importantes visíveis enquanto o usuário rola a página.
Exemplos de Uso
Um menu de navegação que fica fixo na parte superior da tela
quando o usuário rola a página para baixo. Uma barra lateral de
filtros que fica fixa no lado da tela enquanto o usuário navega
por uma lista de produtos. Um botão "Voltar ao topo" que
aparece quando o usuário rola a página para baixo e permite
que ele volte ao topo com um clique.
Propriedade z-index
Controlando a Camada
A propriedade z-index é
essencial para organizar a
ordem de elementos
sobrepostos em um layout.
Define qual elemento fica em
cima dos outros. Valores
maiores significam elementos
que ficam mais à frente.
Empilhando Elementos
É como definir a ordem de pilha
de um baralho. O elemento com
z-index maior fica na parte
superior, enquanto aqueles com
valores menores ficam embaixo.
Essa propriedade é fundamental
para criar layouts complexos.
Valor Padrão
O valor padrão para z-index é 0. Se você não definir um valor específico,
a ordem dos elementos segue o fluxo natural do HTML. A propriedade só
funciona para elementos posicionados.
Alinhamento de elementos
Alinhamento horizontal
O alinhamento horizontal é fundamental
para organizar e organizar os elementos
dentro de um layout. Permite que você
posicione elementos para a esquerda,
centro ou direita, criando um equilíbrio
visual e uma estética mais agradável.
Alinhamento vertical
O alinhamento vertical é usado para
alinhar elementos na direção vertical.
Você pode alinhar elementos ao topo, ao
centro ou à parte inferior de um contêiner,
criando uma estrutura organizada e um
fluxo visual harmonioso.
Alinhamento de texto
O alinhamento de texto é aplicado para
ajustar a disposição do texto dentro de
um elemento. Você pode alinhar o texto à
esquerda, à direita, ao centro ou justificar,
proporcionando um visual mais
profissional e legível.
Centralização de elementos
Centralizar elementos em uma página web é essencial para criar layouts visuaismente agradáveis e equilibrados. O CSS oferece
diversas propriedades para realizar essa tarefa, permitindo que você posicione elementos no centro horizontalmente, verticalmente ou
em ambas as direções.
Ao centralizar elementos, você garante que eles se destaquem no layout e que a página tenha um visual harmonioso. Essa técnica é
particularmente útil para títulos, imagens, botões e outros elementos importantes que você deseja destacar.
1Centralização horizontal
Utilizando a propriedade `text-align: center;`.
2Centralização vertical
Usando a propriedade `margin: auto;`.
3Centralização horizontal e vertical
Combinando as propriedades anteriores.
Flutuação de elementos
Criando layout flexível
Flutuação permite que elementos
"saiam" do fluxo normal do documento.
Isso abre portas para layouts mais
flexíveis, onde elementos podem ser
posicionados lado a lado ou em
posições personalizadas.
Controlando o fluxo
Elementos flutuantes não ocupam
espaço no fluxo normal, permitindo que
outros elementos se movam ao redor
deles. Essa flexibilidade é ideal para criar
colunas, sidebars ou outros layouts
complexos.
Limitações a considerar
É crucial ter em mente que flutuação pode causar quebra de layout em alguns casos. É
fundamental usar a propriedade clear para garantir um layout estável e previsível.
Exibição de elementos
Exibição em linha
Elementos com 'display: inline' são exibidos
em linha, como texto. Ao usar 'display: inline-
block', você combina as vantagens de ambos
os tipos de exibição, permitindo que o
elemento tenha largura e altura definidas,
além de poder ser formatado com margens e
espaçamento.
Exibição em bloco
Elementos com 'display: block' ocupam toda a
largura disponível na linha. Eles geralmente
são usados para criar seções, parágrafos e
outros elementos estruturais. A propriedade
'display: block' também permite que você
defina margens e espaçamento ao redor do
elemento.
Flexbox
O modelo de layout Flexbox é uma maneira
poderosa de organizar elementos em uma
página. Ele usa uma propriedade chamada
'display: flex' para criar um contêiner flexível
que permite que os elementos dentro dele se
adaptem ao espaço disponível.
Grid
O modelo de layout Grid é uma maneira
eficiente de organizar elementos em uma
página em uma estrutura de linhas e colunas.
Ao usar 'display: grid' você pode criar layouts
complexos e responsivos com facilidade.
Propriedade display
inline-block
A propriedade `display: inline-block` combina
características de `display: inline` e `display:
block`. Elementos com essa propriedade
podem ser alinhados como elementos em
linha, mas também podem ter largura, altura,
margens e preenchimentos definidos, como
elementos em bloco.
block
Elementos com `display: block` são exibidos
em bloco, ocupando toda a largura disponível
e quebrando a linha após seu conteúdo. Eles
podem ter largura e altura definidas e podem
ser formatados com margens e
preenchimentos.
inline
Elementos com `display: inline` são exibidos
em linha, lado a lado com outros elementos
em linha, e não ocupam toda a largura
disponível. Eles não têm largura ou altura
definidas e não podem ser formatados com
margens e preenchimentos.
flex
A propriedade `display: flex` ativa o modelo de
layout Flexbox, permitindo que os elementos
dentro de um contêiner sejam posicionados e
redimensionados de forma flexível,
adaptando-se a diferentes tamanhos de tela e
orientações.
Modelo de caixa
1O que é?
O modelo de caixa é um conceito fundamental no CSS. Ele define como os
elementos HTML são renderizados na página. Cada elemento é considerado
uma caixa, com dimensões e propriedades que afetam seu espaço na página. As
bordas, o preenchimento e as margens são os principais componentes do
modelo de caixa.
2Componentes
As bordas (border) delimitam o elemento, o preenchimento (padding) define o
espaço entre o conteúdo e a borda, e a margem (margin) controla o espaço entre
o elemento e outros elementos adjacentes.
3Importância
Compreender o modelo de caixa é crucial para o controle preciso do layout de
uma página. Ele permite que os elementos sejam dimensionados, posicionados
e espaçados de maneira eficaz, criando um layout estético e organizado.
Padding
O que é padding?
Padding é uma propriedade CSS que
define o espaço entre o conteúdo de um
elemento e sua borda. Ele cria uma área
vazia ao redor do conteúdo, permitindo
que ele respire e não fique colado à
borda do elemento.
Exemplo de uso
Imagine um botão com texto. Você pode
usar padding para criar um espaço entre
o texto e a borda do botão, tornando-o
mais atraente e legível. Você também
pode usar padding para criar uma
margem ao redor de imagens, imagens e
outros elementos.
Margin
Espaçamento Externo
O Margin define o espaço vazio entre a
borda de um elemento e o elemento
adjacente. É como criar uma área invisível
ao redor do elemento, deixando um
espaço livre entre ele e os outros
elementos na página. A propriedade
Margin é aplicada ao redor do elemento
inteiro, criando um espaço uniforme em
todos os lados.
Controle de Layout
O Margin pode ser usado para controlar o
layout da página, posicionando elementos
de forma mais organizada e atraente. Ele
permite criar espaços entre elementos,
ajustando o espaçamento entre seções,
colunas e linhas, além de criar efeitos
visuais interessantes, como recuos e
bordas.
Margin Negativa
A Margin negativa é uma técnica
avançada que permite mover um
elemento para dentro de outro elemento.
Em vez de aumentar o espaço, a Margin
negativa o diminui, sobrepondo o
elemento à margem do elemento pai.
Essa técnica exige cuidado para não
causar sobreposição indesejada, mas
pode ser usada para criar efeitos visuais
criativos e complexos.
Borda
Definição
A borda é um elemento fundamental do
modelo de caixa CSS, que define a
aparência e a espessura da linha que
circunda um elemento. Ela oferece
flexibilidade na personalização de
elementos, permitindo a criação de
visuais distintos e a delimitação clara
dos componentes da página.
Propriedades
A borda é controlada por um conjunto de
propriedades CSS, como border-width,
border-style e border-color. Através
delas, você pode determinar a
espessura, o estilo (contínuo, pontilhado,
tracejado etc.) e a cor da borda,
adicionando detalhes visuais à sua
página.
Combinação
A propriedade border-width, por exemplo,
define a largura da borda, podendo ser
expressa em pixels, pontos ou outras
unidades de medida. Já a propriedade
border-style permite definir o estilo da
borda, que pode ser sólido, tracejado,
pontilhado, duplo ou até mesmo nenhum
estilo.
Efeitos
Utilizando as propriedades border-radius
e box-shadow, você pode adicionar
efeitos visuais adicionais às bordas,
como cantos arredondados e sombras.
Essas opções permitem criar elementos
com um visual moderno e atraente,
aprimorando o design da sua página.
Conclusão
Neste curso, aprendemos os fundamentos essenciais do CSS, uma linguagem
de estilo fundamental para o desenvolvimento web.
Codificamos elementos HTML, aplicando estilos e posicionamento.
Com este conhecimento, você pode criar páginas web atraentes e interativas,
personalizando a aparência e o layout de seus projetos.
