Introdução a CSS-Fundamentos

Prévia do material em texto

Introdução à CSS
Introdução ao desenvolvimento Web!
Introdução à Web!
Agenda
O que vamos aprender?
• Definição e utilidade
• Seletores
• Propriedades
• Pseudo-elementos
• Pseudo-classes
• Cascata, Especificidade e 
Herança
• Cores
• Dica
Definição e Utilidade
Quais as vantagens de usar CSS?
Introdução à Web!
Criada por Hakon Wium Lie e Bert Boss, o CSS, é 
uma linguagem de estilo.
Definição e Utilidade
https://www.w3.org/Style/CSS/Overview.en.html
https://www.w3.org/Style/CSS/Overview.en.html
Introdução à Web!
Mudanças visuais e de estilo 
fáceis e rápidas.
Responsividade
Quais as vantagens?
Folhas de estilo(arquivos .css)
Introdução à Web!
Animações
Efeitos visuais
O que posso fazer?
Sites visualmente dinâmicos
Introdução à Web!
Inline: É acrescido diretamente no HTML, mas dentro de cada tag que deve ser estilizada.
Como Incluir? 
Apesar de simples, os estilos não podem ser reaproveitados, gerando repetição de código e 
piorando a manutenção.
 O que é CSS?
 O que é CSS? 
Introdução à Web!
Interno: É aquele que é inserido dentro do código HTML através de uma tag .
Como Incluir? 
Boa opção quando o estilo será aplicado várias vezes para a mesma página!
 h1 {
 color: red; 
 font-style: italic;
 }
E se a intenção for estilizar várias páginas?
Introdução à Web!
Externo: É criado um arquivo .css totalmente separado do arquivo .html.
Como Incluir? 
É a melhor 
opção em termos 
de performance 
e agilidade.
 h1 {
 color: red; 
 font-style: italic;
 }
No arquivo .html
No arquivo .css
Introdução à Web!
Regras de sintaxe: 
Toda regra deve ser envolvida com chaves { e }
Toda declaração deve terminar com ponto e vírgula “;"
A propriedade e o valor devem ser separados por dois 
pontos: “:”
Regras do CSS 
Introdução à Web!
Seletor: Nome do elemento em que a estilização será 
aplicada. Pode ser uma identificação de tag, uma classe, um 
id, um atributo, * (todos os elementos), etc. Pode conter mais 
de um elemento, sendo separado por vírgula.
Declaração: Cada um dos conjuntos de propriedade e valor 
que está aplicado a regra.
Propriedade: Atributo pela qual o elemento será estilizado.
Valor da propriedade: Valor pelo qual o elemento será 
estilizado com a propriedade.
Regras do CSS 
Seletores
Os principais tipos de seletores!
Introdução à Web!
Existem algumas formas diferentes de 
selecionarmos elementos no CSS.
Seletor de elemento: Seleciona todos os 
elementos(tag) de um tipo.
Seletor de ID: Seleciona(#) os elementos 
com o id especificado. Este seletor não é 
recomendado, pois não é possível seu 
reaproveitamento.
Seletores
Introdução à Web!
Seletor de classe: Esse seletor é o mais 
utilizado e o mais recomendado para a 
estilização. Seleciona(.) todos os elementos 
que contém a classe especificada. 
Seletor de atributo: Seleciona([ ]) todos os 
elementos que contenham o determinado 
atributo.
Seletores
Podemos combinar mais de um tipo de 
seletor, por exemplo: img[src], 
input.control, h1#my-id, etc.
Introdução à Web!
Adicione dois botões na página e 
imagine as possibilidades dos 
seletores a serem usados. 
Botão Ativo
Botão Inativo
button {
background-color: yellow;
}
button[disabled] {
background-color: lightyellow;
}
Todos os botões que tiverem o 
atributo [disabled] receberão o 
estilo de cor amarelo claro. 
Seletores
Introdução à Web!
Outra forma de estilização, e a mais 
usada, é utilizando classes, porque a 
mesma classe pode ser usada em 
vários elementos e cada elemento 
pode ter múltiplas classes.
Seletor por classe
.azul {
 color: blue;
}
Seletores
Pseudo-Classes
Seleciona um elemento HTML de acordo com o estado deste elemento!
Introdução à Web!
Pseudo-Classes
É possível estilizar elementos 
utilizando pseudo-classes, que 
são palavras chave que 
especificam um estado especial 
de um elemento.
:hover: Adiciona estilos para quando 
o cursor (mouse) está sobre o 
elemento.
button:hover{
background-color: #888;
}
button[disabled]:hover{
background-color: #888;
}
Botão Ativo
Botão Inativo
Introdução à Web!
Pseudo-Classes
:active: Aplica os estilos quando o 
elemento está ativo. (Clica e segura o 
elemento, por exemplo).
:focus: Aplica os estilos quando o elemento 
está recebendo foco. Geralmente usamos 
para botões e controles de formulário (input, 
select, por exemplo).
:not: Aplica os estilos quando o elemento 
não corresponde ao seletor
:has: Seletor recente na especificação. Aplica 
estilos se o elemento pai tem algum elemento 
filho que se enquadre na regra do seletor.
:root: Seletor do elemento raiz do documento. 
No caso de documentos HTML, porém com 
especificidade maior. Geralmente utilizamos 
para declarar as variáveis do CSS.
Introdução à Web!
Pseudo-Classes
:empty: Seleciona o elemento se não 
houver nenhum elemento filho (seja 
outros elementos ou algum texto).
:only-child: Seleciona o elemento se ele 
é o único descendente do elemento pai.
:nth-child, :nth-last-child: Seleciona o 
elemento de acordo com sua posição no 
elemento pai. Para a contagem, ele considera 
todos os elementos filhos, porém para a 
seleção, apenas os elementos do tipo 
especificado no seletor. Como argumento, 
podemos utilizar uma fórmula no padrão (An+B) 
ou as palavras-chave “odd” (ímpar) ou “even” 
(par).
:first-child, :last-child: Seleciona o 
primeiro/último elemento filho.
Introdução à Web!
Pseudo-Classes
:autofill: Seletor específico para elementos para 
quando tem seu valor preenchido automaticamente pelo 
navegador.
:checked: Seleciona elementos de input do tipo “checkbox" ou 
“radio” ou elementos de um , porém não tem 
suporte de nenhum grande navegador.
:valid, :invalid: Aplica estilo em elementos de formulário 
quando estão válidos / inválidos.
:required, :optional: Seleciona elementos que tenham (ou não 
tenham o atributo required).
:link: Seleciona links que ainda não foram visitados pelo 
usuário.
:visited: Seleciona links que já foram visitados pelo usuário.
:any-link: Seleciona tanto os links visitados, quanto os não 
visitados.
:local-link: Seleciona os links para o mesmo documento. Não 
possui suporte de nenhum navegador ainda.
:target: seleciona o elemento referenciado no fragmento da 
URL. 
Pseudo-Elementos
Estilize uma parte específica do seu elemento!
Introdução à Web!
Pseudo-Elementos
São seletores utilizados para 
selecionar uma parte específica de 
um elemento. Utilizamos a notação de 
:: (dois dois-pontos).
::before, ::after: São criados elementos 
“virtuais” antes / depois do elemento em si. 
Geralmente utilizamos para adicionar um 
elemento cosmético ao componente, sem 
valor semântico. Para ficar visível, essa 
regra deve conter a declaração da 
propriedade “content".
Introdução à Web!
Pseudo-Elementos
::first-line: Seleciona a primeira linha 
de um texto para estilização.
::marker: Aplica estilos ao marcador de 
elementos de lista. As propriedades que 
podem ser utilizadas são limitadas.
::placeholder: Aplica estilos no texto de 
placeholder de elementos input.
::selection: Aplica estilos ao trecho de texto 
selecionado
::first-letter: Estiliza a primeira letra do 
conteúdo dentro do elemento.
Cascata, 
Especificidade e Herança
A maioria das propriedades aplicadas a um elemento, irá passar aos seus "herdeiros“.
Introdução à Web!
O Efeito cascata junto com a 
especificidade e a herança são importantes 
conceitos do CSS, que o fazem muito 
inteligente e poderoso.
Efeito Cascata
Efeito Cascata (Cascade)! 
É a lei do CSS. 
(Cascading Style Sheets).
Introdução à Web!
Isso significaque a origem, a camada em 
cascata e a ordem das regras CSS são 
importantes.
Efeito Cascata
Quando houver mais de uma declaração 
de uma mesma propriedade, o CSS usa a 
lógica em cascata para definir qual regra 
será aplicada. 
Portanto, existe uma lista de regras para 
determinar a prioridade.
Introdução à Web!
Efeito Cascata
Caso haja conflito de regras, o seu navegador pode executar até quatro passos:
1. Analisa todas as regras.
2. Vê o nível de importância e a origem do elemento.
3. Compara a especificidade das declarações com mesmo nível de importância(Aqui entra o 
cálculo de especificidade).
4. Caso tenha um empate no grau da especificidade, ele olha a ordem de declaração, a que 
for declarada por último será selecionado.
Introdução à Web!
O "Cascading" também significa 
dizer que a maioria das 
propriedades aplicadas num 
elemento, irá passar aos seus 
"herdeiros", ou seja, os elementos 
que estão contidos naquele.
Herança
Apesar da propriedade color ter sido 
aplicada à div "texto", esta 
propriedade passou para o parágrafo p 
e para o destaque também. 
 
 Texto exemplo com 
um destaque.
 
.texto {
 color: #F00;
}
Introdução à Web!
Uma utilização comum da cascata 
é definir uma fonte para a página 
inteira. 
Herança
body {
 font-family: Arial, sans-serif;
}
Portanto, todos os elementos que 
estão dentro de body irão usar a fonte 
Arial ou, se não estiver disponível, a 
fonte sans serifa padrão do sistema 
operacional. 
Introdução à Web!
Quando várias regras se aplicam a 
um mesmo elemento, o navegador 
precisa decidir qual delas tem 
precedência.
Especificidade
O seletor #sidebar p tem precedência. 
Vamos analisar melhor especificidade! 
 
 Texto exemplo para falar 
de especificidade!
 
div p.descricao {
 color: #F00;
}
#sidebar p {
 color: #F90;
}
Introdução à Web!
Especificidade
Por que ele é mais específico? 
Existem algumas regras gerais:
Regras em tags tem precedência sobre regras em arquivos externos CSS;
Regras em linha (atributo style) tem precedência sobre regras em tags ou arquivos 
externos CSS;
0 pontos: O seletor universal (*) não pontua, ou seja, qualquer outra regra irá substituí-la.
1 ponto: Seletores de elemento(tag) ou pseudo-elementos
10 pontos: Seletores de classe, pseudo-classe ou atributo.
100 pontos: Seletor de ID.
1.000 pontos: Estilização “inline" (atributo style=“").
10.000 pontos: !important.
Introdução à Web!
Especificidade
div p.descricao {
 color: #F00;
}
#sidebar p {
 color: #F90;
}
Utilizando a escala, observa-se:
div p.descrição → 12 pontos!
dois seletores de elemento(2), mais um de 
classe(10).
 
#sidebar p → 101 pontos!
um seletor de id(100) mais um seletor de 
elemento(1). 
Introdução à Web!
Especificidade
Analise o exemplo, qual deve ser a precedência de cores e fonte?
 
 Cor1
 
 
 
 Cor2
 
 
 
 Cor3
 
body {
 font-size: 10px; }
#conteudo p.primeiro {
 color: green; } 
#conteudo p {
 color: blue; 
 font-size: 18px; } 
p {
 color: red; 
 font-size: 26px; } 
Introdução à Web!
Especificidade
#conteudo p.primeiro {
 color: green; } 
#conteudo p.primeiro → 111 pontos!
um seletor de id(100), um de elemento(1), mais um de 
classe(10).
 
#conteudo p {
 color: blue; 
 font-size: 18px; }
#conteudo p → 101 pontos!
um seletor de id(100) mais um seletor de elemento(1). 
p {
 color: red; 
 font-size: 26px; }
p → 1 ponto!
um seletor de elemento(1). 
body {
 font-size: 10px; }
body → 1 ponto!
um seletor de elemento(1).
 
Introdução à Web!
Conclusão
Conhecer os diferentes tipos de 
seletores, classes e ids e as 
regras de cascata e precedência 
são aspectos fundamentais para 
que possamos construir websites 
sólidos, com código leve, funcional 
e fácil de manter.
Cores
sistema de cores, opacidade, degradê
Introdução à Web!
Cores
Existem algumas formas diferentes de 
declarar as cores com CSS.
Ex: usando o nome das cores.
A forma mais comum é através da 
notação hexadecimal representando 
cores em RGB. 
Ex:
#B71540
Em sua forma “extensa" é representada por um 
“#” e 6 dígitos hexadecimais (de 0 a F). 
Dois primeiros dígitos: quantidade” de vermelho 
Dois dígitos do meio: quantidade de verde
Dois últimos dígitos: quantidade de azul.
Numa faixa de 0 a 255.
Para colocar transparência, podemos também 
adicionar mais 2 dígitos. (#B7154080)
Introdução à Web!
Cores
Podemos também utilizar de funções de 
cores.
Temos a função RGB, que aceita 3 
parâmetros, cada um com a 
respectiva cor de vermelho (R), verde 
(G) e azul (B).
#B71
Também é possível usar a função RGBA, 
que aceita 4 parâmetros, sendo o último 
como o valor de transparência.
#B71A
Existem formas de representar cores em 
outros sistemas.
Introdução à Web!
Propriedades de Cores
transparent: Remove a cor do elemento, deixando-o transparente.
currentColor: Atribui o mesmo valor da propriedade color. Podemos usar para deixar a cor 
da borda com a mesma cor do texto.
color: Define a cor do texto.
background-color: Define a cor de fundo do texto.
border-color: Define a cor da borda do elemento.
outline-color: Define a cor da linha de fora do elemento.
box-shadow: Aplica uma sombra no elemento
accent-color: Aplica cor em alguns elementos de UI padrão do navegador.
Introdução à Web!
Propriedades de Cores
E também usamos as cores na função linear-gradient para aplicar “degradê” de cores.
Dica!
Introdução à Web!
Dica!
https://medium.com/jaguaribetech/efeito-
cascata-no-css-c55bda0a2ed4
https://medium.com/jaguaribetech/efeito-cascata-no-css-c55bda0a2ed4
https://medium.com/jaguaribetech/efeito-cascata-no-css-c55bda0a2ed4
Referências!
Introdução à Web!
[1] P. Balduino; Dominando JavaScript com jQuery. 2012. Ed. Casa do Código.
[2] Tutorial JavaScript W3Schools. Learn to code. https://www.w3schools.com/js/default.asp. Acessado 
em Julho/2023. 
[3] Douglas Crockford. Javascript: The world’s most misunderstood programming language, 2001. 
https://www.crockford.com/javascript/. Curso acessado em Julho/2023. 
[4] A partir do zero: HTML e CSS para projetos web. Acessado Agosto/2023: 
https://cursos.alura.com.br/formacao-html-css 
[5] Linguagem JavaScript: Curso acessado em Julho/2023: https://www.cursoemvideo.com/ 
[6] Dheeraj Singh; HTML & JavaScript Practice Questions. Edição 2017.
Referências
https://www.w3schools.com/js/default.asp
https://www.crockford.com/javascript/
Até a próxima!
	Slide 1: Introdução à CSS
	Slide 2: Agenda
	Slide 3: Definição e Utilidade
	Slide 4: Definição e Utilidade
	Slide 5: Quais as vantagens?
	Slide 6: O que posso fazer? 
	Slide 7: Como Incluir? 
	Slide 8: Como Incluir? 
	Slide 9: Como Incluir? 
	Slide 10: Regras do CSS 
	Slide 11: Regras do CSS 
	Slide 12: Seletores
	Slide 13: Seletores
	Slide 14: Seletores
	Slide 15: Seletores
	Slide 16: Seletores
	Slide 17: Pseudo-Classes
	Slide 18: Pseudo-Classes
	Slide 19: Pseudo-Classes
	Slide 20: Pseudo-Classes
	Slide 21: Pseudo-Classes
	Slide 22: Pseudo-Elementos
	Slide 23: Pseudo-Elementos
	Slide 24: Pseudo-Elementos
	Slide 25: Cascata, Especificidade e Herança
	Slide 26: Efeito Cascata 
	Slide 27: Efeito Cascata 
	Slide 28: Efeito Cascata 
	Slide 29: Herança
	Slide 30: Herança
	Slide 31: Especificidade
	Slide 32: Especificidade
	Slide 33: Especificidade
	Slide 34: Especificidade
	Slide 35: Especificidade
	Slide 36: Conclusão
	Slide 37: Cores
	Slide 38: Cores
	Slide 39: Cores
	Slide 40: Propriedades de Cores
	Slide 41: Propriedades de Cores
	Slide 42: Dica!
	Slide 43: Dica!
	Slide 44: Referências!
	Slide 45: Referências
	Slide 46: Até a próxima!