Title:

[[CSS]]
Main
Topic:
CSS
Subtopic:
[[Front-
End
Mod-
erno]]
Tags:
#Pro-
gram-
ming
#Study

Atributos/Tags CSS
Reset do site Um navegador, modifica os estilos de um site naturalmente,
mesmo não havendo arquivo CSS, por isso temos de resetá-lo, para começar
com o site limpo. Nesse caso usa-se: (O asterisco seleciona todos os elementos
da página)
[[Pasted image 20220507151041.png]]

Estilizando Fontes
• font-size: Manipular o tamanho da fonte
• font-style: Estilo de fonte que queres usar
• font-family: O tipo de fonte (Arial, Helvética, etc)
• font-weight: Grossura da fonte (bold, light, 500, 600, etc)

Usando Classes e ids

• .(Nome da Classe(Sem parenteses))
• #IDaqui
• As boas práticas dizem que é melhor usar classes no CSS, e Ids no
JavaScript

Atributos
• Atributos criados pelo programador
– Exemplo: name=“paragrafo”
– Para chamá-lo se usaria: [name=paragrafo] ou [name]

1
Tags de Background
• background-color: muda a cor do fundo
– A cor pode ser mudada usando:
∗ Nome
∗ RGB e RGBA
∗ Hex
• Background-image: Coloca uma imagem como plano de fundo
• Background-repeat:
– no-repeat: Faz com que a imagem, se não for do tamanho da tela,
apareça só uma vez (não repita)
– repeat (default): Faz com que a imagem se menor do que a tela,
repita
• Background-position: Especifica onde deve ficar a imagem (menor do que
a tela)
– center
∗ top center
∗ top right
∗ etc
• background-size: Define o tamanho que o background deve tomar
– Pode ser feito com syntax: auto, percentage, initial
– Com porcentagem: 100%; 100% 100%; 50% 100%; etc (Width|Height)
– Ou com unidades, como o px (pixel)

Dimensões Foram criadas 3 divs com 300px de “área”, mas mesmo a tela
tendo espaço elas ficaram uma embaixo da outra:
[[Pasted image 20220518192636.png]]
Isso acontece porque a configuração default faz com que elas fiquem assim.
Para arrumar isso é bem simples, é só usar o display: inline-block. Então ficam
assim: [[Pasted image 20220518192932.png]]
O uso da propriedade display: inline-block é normalmente feito com porcent-
agem

Alinhamento
• Padding: Espaçamento interno do elemento [[Pasted image 20220518194116.png]]
• margin: Espaçamento externo do elemento
[[Pasted image 20220518194228.png]]

Flexbox Flexbox é a nova maneira de alinhar as coisas com css, é usado

até em [[Desenvolvimento APP]] com o React Native. É melhor do que os
antigos métodos de alinhamento, pois é responsivo e não precisa usar float ou
positioning.

2
Na web ele pode ser aplicado assim: - display: flex - Define um container como
flex - Normalmente é usado um elemento pai como “container flex”, onde es-
tarão os elementos filhos - [[Pasted image 20220519141254.png]] - Vê-se que a
div “container” “Encapsula” a d1, d2 e d3 sendo essas três os “Itens flex” - Para
personalizar como o container funciona e como os elementos são posicionados
pode-se usar: - flex-direction: value - define como os elementos vão ser “stacka-
dos” - O “value” pode ser: row; column; column-reverse; row-reverse - Exemplo
de column: - [[Pasted image 20220519141839.png]] - align-items: onde os itens
ficam - flex-wrap: wrap - Deixa as % “literais” (default é nowrap: não deixa as
dimensões de algo atrapalharem as outras - fica sempre na mesma linha) - flex:
outra maneira de dividir uma seção - Exemplo: - d1 - flex: 0.5; d2 - flex: 0.25;
d3- flex: 0.25 - No final dá 1 - que é o total

Níveis de Importância No css quando se atribui dois valores a um elemento,

toma-se o valor com mais Importância, como por exemplo se botarmos estilo
em uma tag h2 assim: [[Pasted image 20220522151237.png]]
A cor que prevalecerá (independente de estar mais para baixo ou para cima) é
a amarela, pois ataca o h2 e não só ele, mas também sua classe!
O elemento com a tag prevalece até mesmo do: - .classe-de-div h2 {color: blue};
Essa só “ganharia” se fosse: - .classe-de-div h2.teste {color:blue};
Dá pra procurar também algo que está Diretamente em uma div usando: -
.classe-de-div > h2.teste /[…]
Se houver outra div dentro dela que encapsula o h2.teste o atributo não acontecerá

Animações Hoje em dia o CSS é muito poderoso, por isso consegue até mesmo
fazer animações, até mesmo complicadas
Declara se uma animação usando: @keyframes nome-da-animação { } E é
colocado no elemento a ser animado algumas tags (Só há algumas aqui, vide
W3Schools): - animation-name: nome-da-anim-> Declara a animação no ele-
mento - animation-duration: Xs (segundos) -> Declara o tempo de duração da
animação - animation-delay: Xs -> Declara quando tempo demora desde a aber-
tura do site até o começo da animação - animation-fill: valor (ex: Both) -> De-
fine o que acontece quando a animação termina - animation-iteration-count: nu-
mero/infinito -> Quantas vezes a animação vai acontecer - animation-direction:
valor -> Como a animação se “movimenta”, para onde ela vai
Um exemplo de uma animação seria: [[Pasted image 20220523194151.png]]
Há também a possibilidade de controlar a animação keyframe por keyframe:
@keyframe anim1 { 0% (valor) 1% (valor) . . . 100% (valor) }

Variáveis no CSS Alguns navegadores não as carregam

3
 • As variáveis são um jeito de agrupar uma característica (ou características)
em uma “palavra” que pode ser usada em outras partes do CSS
• É usada para facilitar o uso de características muito usadas [[Pasted image
20220620191824.png]] Ela é declarada assim, com o nome (boas práticas
botar os “–” antes do nome) e a característica depois
Sendo assim ela é usada dessa maneira (depois de declarada) [[Pasted image
20220620191927.png]]