O documento introduz os principais conceitos da linguagem CSS3, incluindo seu uso para definir estilos, layouts e variações de exibição em diferentes dispositivos. Explica como funciona a estrutura CSS com seletores e declarações e demonstra exemplos de como formatar elementos, textos, cores, bordas e cantos arredondados.

1. Professora Evelyn Silva
2ª SÉRIE INFORMÁTICA
► Introdução ao CSS3

2. CSS3
CSS3 é a mais recente evolução da linguagem Cascading Style
Sheets (Folhas de Estilo em Cascata)
CSS é usado para definir estilos para suas páginas da web,
incluindo o design, layout e as variações na exibição para
diferentes dispositivos e tamanhos de tela.
O CSS é um arquivo externo ao HTML com extensão: .css
CSS economiza um monte de trabalho . Ele pode controlar o
layout de várias páginas da Web de uma só vez em apenas
um arquivo!

3. CSS3

4. CSS3
COMO FAÇO PARA FUNCIONAR?
O chamado do arquivo CSS DEVE FICAR dentro do arquivo
HTML
Arquivo CSS que irá
configurar todo estilo
do arquivo HTML

5. CSS3
As regras de uso do CSS é simples e consiste em:
Seletor e o bloco de declaração.
Para toda tag do HTML existe uma formatação no CSS
PROPRIEDADE VALOR

6. CSS3
Seletores CSS são usados para "encontrar" (ou selecionar)
elementos HTML com base no nome do elemento, id, classe,
atributo, e muito mais.
No exemplo foi selecionado todas as tag <p> da página, ou
seja, todos os elementos <p> terão a cor BLUE (AZUL) e
FONT-SIZE (TAMANHO DA FONTE = 18px)

7. CSS3
Quando várias tags tem as mesmas configurações?
Qual forma mais fácil e rápido de resolver?
Observe que as configurações
das tags : <p>, <h1> e <h2>
são iguais e estão consumindo
12 linhas de código.
Como fazer a mesma coisa com
menos linha de código?

8. CSS3
Se tiver elementos com as mesmas definições de estilo,
utilizamos o AGRUPAMENTO DE SELETORES
Isso em verde é
um comentário
no CSS. /* */

9. CSS3
CORES:
Para uma melhor variação de cores é interessante utilizarmos os
valores HEXADECIMAIS para as cores
É identificada por #C71585
(https://www.w3schools.com/colors/colors_picker.asp)
Para colocar uma cor no fundo da página:
background-color
Para colocar cor em textos:
color

10. CSS3
Investigue e descubra
que cores são essas.

11. CSS3
FONTE:
Para estilizar as tags que possuem texto temos as
propriedades:
font-family: ;
font-style: italic ;
font-size: ; #tamanho
font-weight: ;

12. CSS3
COMO FICA NO
NAVEGADOR
CÓDIGO CSS

13. CSS3
BORDAS:
Para aplicar borda em qualquer tag utilizamos a
propriedade:
border

14. CSS3
BORDAS:
Podemos especificar qual borda iremos estilizar:
COMO FICA NO
NAVEGADOR
LARGURA
ESTILO
COR

15. CSS3
ALINHAMENTO PARA TEXTO:
Para aplicar um alinhamento em tags que possuem texto
utilizamos:
text-align: center;
text-align: left;
text-align: right;
text-align: justify;

16. CSS3
COMO FICA NO NAVEGADOR
A tag h3 centralizado
A tag p (parágrafo)
alinhada para esquerda

17. CSS3
DECORAÇÃO:
Para aplicar alguma linha em tags que possuem texto
utilizamos:
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
Essa propriedade é interessante para tag a, pois podemos
tirar a linha que caracteriza um link

18. CSS3
NAVEGADOR - ANTES NAVEGADOR - DEPOIS

19. CSS3
CANTOS ARREDONDADOS:
Com CSS3, você pode dar a qualquer elemento “cantos arredondados”,
usando a propriedade border-radius.
Pode colocar cantos arredondados para borda, para elementos com
cor de fundo, para imagem.
border-radius: 15px 50px 30px 5px;
Quatro valores: primeiro valor aplica-se a parte superior esquerda,
segundo valor aplica-se a parte superior direita, o terceiro valor aplica-
se inferior direito, e quarto valor se aplica ao canto inferior esquerdo

20. CSS3
border-radius: 15px 50px 30px;
Três valores: primeiro valor aplica-se a parte superior
esquerda, o segundo valor aplica-se superior direito e
inferior esquerdo, e terceiro valor aplica-se a parte inferior
direita.
border-radius: 15px 50px;
Dois valores: o primeiro valor refere-se para o canto superior
esquerdo e inferior direito, e o segundo valor aplica-se
superior direito e canto inferior esquerdo

21. CSS3
Pode ser colocado somente um valor
para a propriedade:
border-radius: 20px;
Todos os cantos irão ter o mesmo valor

22. CSS3