O documento fornece uma introdução sobre CSS, explicando que CSS não é uma linguagem de programação e sim de folhas de estilo. Ele descreve a anatomia básica de uma regra CSS, incluindo seletores, declarações, propriedades e valores de propriedade. O documento também discute como modificar fontes, textos, layouts e resetar estilos padrão dos navegadores.
2. Quem sou?
Karol Suzuki
Graduada em Sistemas de Informações
Desenvolvedora Front – MJV
Coordenadora do Caqui Coders
Organizadora/Palestrante/Writer do
Nerdzão/Nerdgirlz
Amante de caveiras, unicórnios, bebidas
azuis e com gosto peculiares
12. Anatomia
CSS
Seletor :
O nome do elemento HTML no começo do
conjunto de regras. Ele seleciona o(s) elemento(s) a
serem estilizados (nesse caso, elementos <p>).
Para dar estilo a um outro elemento, é só mudar o
seletor.
13. Anatomia
CSS
Propriedade :
Forma pela qual você estiliza um elemento HTML.
(Nesse caso, color é uma propriedade dos
elementos <p>.) Em CSS, você escolhe quais
propriedades você deseja afetar com sua regra.
14. Anatomia
CSS
Valor da propriedade :
À direita da propriedade, depois dos dois pontos,
nós temos o valor de propriedade, que escolhe
uma dentre muitas aparências possíveis para uma
determinada propriedade (há muitos valores
color(cor) além do red(vermelho)).
16. Anatomia
CSS
Observações Importantes :
Toda declaração de css fica dentro de Chaves {}
Dentro de cada declaração você deve usar : (dois
pontos) para seprar propriedade de valor de
propriedade
Dentro de cada conjunto de regras você usa o ;
(ponto e vírgula) para separar cada declaração da
próxima.
20. Diferença
entre
Seletores
Atributo
ex: no Css - img[src]
no HTML - <img src=“imagem.jpg”>
e não tags que sejam só <img>
Pseudo-classe
ex: no Css - a:hover
no HTML - <a> quando passar o
mouse sobre a tag
21. Fontes
e
textos
- font-family (a fonte que
deseja usar nos textos);
- font-size (tamanho);
- color (cor do texto);
- text-decoration
(italico,sublinhado,negrito);
- letter-spacing(espaçamento
entre letras);
26. Fontes
e
textos
Nessa seção ainda podemos alterar algumas
propriedades de cada um desses elementos,
como por exemplo :
- width (largura do elemento)
- background-color (cor de fundo)
- color (cor do conteúdo do elemento)
- text-shadow (cria uma sombra dentro do texto)
- display (maneira de dispor o elemento no html)
27. Fontes
e
textos
O que não te explicaram sobre esse tipo de
declaração!
text-shadow: 3px 3px 1px black;
● O primeiro valor em pixel define o deslocamento horizontal da
sombra do texto — até onde ele se move: um valor negativo deve
movê-la para a esquerda.
● O segundo valor em pixel define o deslocamento vertical da
sombra do texto — o quanto ela se move para baixo, neste exemplo;
um valor negativo deve movê-la para cima.
● O terceiro valor em pixel define o raio de desfoque da sombra —
um valor maior significará uma sombra mais borrada.
● O quarto valor define a cor base da sombra.
28. Reset
do
Css!!!
Você sabia que os navegadores já colocam
alguns estilos por default nas páginas?
Mas você resetar esses configurações logo no
começo do seu css.
só usar o que tem nesse site:
https://meyerweb.com/eric/tools/css/reset/
29. E para funcionar no seu HTML
Você precisa declarar o import
dele, dentro da sua tag
<head><head/>
30. Para funciona
no seu HTML
Lembre se de declarar corretamente as
tags no corpo do HTML e CSS!!!
Use boas práticas de re-uso de código para
que não precise ficar escrevendo código que
não precisa! Procuro por Code Clean!
E se precisar de ajuda, procure ajuda de
pessoas que conhece, videos, artigos,
documentação etc, não tenha vergonha de
pedir ajuda!
31. E agora é só partir pro code
e aprender na prática como
funciona tudo!