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!
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
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
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