O documento resume os principais conceitos de CSS, incluindo: 1) CSS é usado para estilizar elementos HTML, 2) Regras CSS contêm seletores e declarações, 3) Existem diferentes maneiras de inserir CSS em uma página, e 4) O modelo de caixa CSS descreve como os elementos são renderizados.

1. Prof. Pedro Clarindo da Silva Neto
IFMT

2. CSS
Prof. Pedro Clarindo da Silva Neto
• Maujor
Abreviação para o termo em inglês Cascading
Style Sheet, traduzido para o português como
Folhas de Estilo em Cascata.
Definição

3. CSS
Prof. Pedro Clarindo da Silva Neto
• W3C
Folha de estilo em cascata é um mecanismo
simples para adicionar estilos (por exemplo:
fontes, cores, espaçamentos) aos documentos
web.
Definição

4. CSS
Prof. Pedro Clarindo da Silva Neto
Não cabe à HTML fornecer informações ao
agente do usuário* sobre a apresentação dos
elementos.
Finalidade
*Qualquer dispositivo capaz de interpretar um documento
escrito em linguagem de marcação. Ex: Navegador,
leitores de tela, robôs de indexação, etc.

5. CSS
Prof. Pedro Clarindo da Silva Neto
Unidade básica de uma folha de estilo, menor
porção de código capaz de produzir efeito de
estilização.
Uma regra CSS é composta de 2 partes:
Seletor e Declaração.
Regra CSS

6. CSS
Prof. Pedro Clarindo da Silva Neto
seletor { propriedade: valor;}
Regra CSS
Regra CSS
Declaração

7. CSS
Prof. Pedro Clarindo da Silva Neto
Seletor: alvo da regra;
Declaração: determina os parâmetros de estilização;
Propriedade: define qual característica do seletor
será estilizada;
Valor: quantificação da propriedade.
Regra CSS

8. CSS
Prof. Pedro Clarindo da Silva Neto
p {
color: red;
background-color: black;
font-size: 12px;
}
Regra CSS
Seletor
Propriedades
Declaração
Regra CSS

9. CSS
Prof. Pedro Clarindo da Silva Neto
NÃO é CaSe SeNsItIvE;
M ú l t i p l o s e s p a ç o s são tratados como espaços simples;
/* Comentário de uma linha*/;
/* Comentário
de mais de
uma linha*/.
Tipos de Componentes de
Regra CSS

10. CSS
Prof. Pedro Clarindo da Silva Neto
p { font-family: Arial, Sans-serif; }
estiliza p com fonte da família sem serifas.
p { width: 400px; }
estiliza p com largura 400px.
Tipos de Componentes de
Regra CSS

11. CSS
Prof. Pedro Clarindo da Silva Neto
p { font-size: 120%; }
estiliza p com tamanho de fonte 1.2 vezes o valor
de referência.
p { background-color: red; }
estiliza p com fundo na cor vermelha.
Tipos de Componentes de
Regra CSS

12. CSS
Prof. Pedro Clarindo da Silva Neto
p { height: 2em; }
estiliza p com altura 2 vezes o valor de referência.
Tipos de Componentes de
Regra CSS

13. Componentes textuais
Prof. Pedro Clarindo da Silva Neto
Do tipo palavra-chave quando expresso por
uma string predefinida nas especificações.
p {
color: red;
background-color: acqua;
border-color: teal;
}
Tipos de Componentes de
Regra CSS

14. Prof. Pedro Clarindo da Silva Neto
Tipos de Componentes de
Regra CSS

15. Componentes textuais
Prof. Pedro Clarindo da Silva Neto
Outros exemplos de componentes textuais:
inherit: de
fi
ne uma propriedade herdada;
collapse: bordas de células de tabelas unidas;
italic: fonte em itálico;
uppercase: de
fi
ne texto em CAIXA ALTA.
Tipos de Componentes de
Regra CSS

16. Strings
Prof. Pedro Clarindo da Silva Neto
Devem ser grafados com aspas simples(‘) ou
duplas(“). Uma não pode ocorrer dentro de outra, a
menos que seja escapada com uma barra invertida ().
“Esta é uma ‘string’.”
‘ Esta é uma “string”.’
“Esta é uma ” string”.”
Tipos de Componentes de
Regra CSS

17. Componentes Numéricos
Prof. Pedro Clarindo da Silva Neto
Um componente é do tipo numérico quando
expresso por um número inteiro, um número
real ou em porcentagem.
<integer> - inteiro
<number> - reais
<percentage> - porcentagem
Tipos de Componentes de
Regra CSS

18. De
fi
nição
Prof. Pedro Clarindo da Silva Neto
São utilizados para "encontrar" (ou selecionar)
elementos HTML com base em seu nome de
elemento, id, classe, atributo, e muito mais.
Seletores

19. Seletor de elemento
Prof. Pedro Clarindo da Silva Neto
O seletor de elemento seleciona elementos com base no nome do elemento.
Você pode selecionar todos os elementos <p> em uma página como esta
(neste caso, todos os elementos <p> será o centro-alinhados, com uma cor
de texto vermelho):
p {
text-align: center;
color: red;
}
Seletores

20. Seletor id
Prof. Pedro Clarindo da Silva Neto
O seletor id usa o atributo id de um elemento HTML para selecionar um elemento
específico.
O id de um elemento deve ser único dentro de uma página, para que o seletor id seja
usado para selecionar um elemento único!
Para selecionar um elemento com um id específico, escreva o caracter “#”, seguido
da identificação do elemento.
#para1 {
text-align: center;
color: red;
}
Seletores

21. Seletor class
Prof. Pedro Clarindo da Silva Neto
O seletor de classe seleciona elementos com um atributo de classe
específico.
Para selecionar elementos com uma classe específica, escreva o
caractere “ .” , seguido do nome da classe.
.center {
text-align: center;
color: red;
}
Seletores

22. Seletor class
Prof. Pedro Clarindo da Silva Neto
Você também pode especificar que elementos HTML específicos
deverão ser afetados por uma classe.
p.centralizado {
text-align: center;
color: red;
}
Seletores

23. CSS
Prof. Pedro Clarindo da Silva Neto
•Folha de estilo externa;
•Folha de estilo interna;
•Estilo em linha.
Maneiras de Inserir uma
CSS

24. Folha de estilo externa
Prof. Pedro Clarindo da Silva Neto
Com uma folha de estilo externa, você pode alterar a
aparência de um site inteiro, alterando apenas um arquivo!
Cada página deve incluir uma referência para o arquivo de
folha de estilo externa no interior do elemento <link>.
Maneiras de Inserir uma
CSS

25. Folha de estilo interna
Prof. Pedro Clarindo da Silva Neto
Uma folha de estilo interna pode ser usado se uma
página tem um estilo único.
Maneiras de Inserir uma
CSS

26. Estilos inline
Prof. Pedro Clarindo da Silva Neto
Um estilo inline pode ser usado para aplicar um
modelo exclusivo de um único elemento.
Maneiras de Inserir uma
CSS

27. Quem prevalece?
Prof. Pedro Clarindo da Silva Neto
Se algumas propriedades forem definidas para o mesmo
seletor (elemento) em folhas de estilo diferentes, o valor
da última folha de estilo de leitura será usado.
Várias folhas de estilo

28. Ordem de cascateamento
Prof. Pedro Clarindo da Silva Neto
Várias folhas de estilo
Maior prioridade!
Um estilo inline (dentro de um elemento HTML especí
fi
co) tem a prioridade
mais alta, o que signi
fi
ca que ele irá substituir um estilo de
fi
nido dentro da
tag <head>, ou em uma folha de estilo externa, ou um valor padrão do
navegador.

29. Ordem de cascateamento
Prof. Pedro Clarindo da Silva Neto
Várias folhas de estilo
Um estilo inline (dentro de um elemento HTML específico)
tem a prioridade mais alta, o que significa que ele irá
substituir um estilo definido dentro da tag <head>, ou em uma
folha de estilo externa, ou um valor padrão do navegador.

30. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
• W3C
Todos os elementos da HTML podem ser
considerados como caixas. Em CSS, o termo
“box model" é usado quando se fala de design e
layout.
BOX MODEL

31. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
• W3C
O modelo de caixa CSS é essencialmente uma
caixa que envolve todos os elementos HTML. É
constituída por: margens, bordas, preenchimento
e conteúdo.
Box Model

32. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model

33. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Content: O conteúdo da caixa, onde texto e imagens aparecem;
Padding: Limpa uma área em torno do conteúdo. O
preenchimento é transparente;
Border: A fronteira que gira em torno do preenchimento e
conteúdo;
Margin: Limpa uma área fora da fronteira. A margem é
transparente.
Box Model

34. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model

35. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model
Para definir a largura e a altura de um elemento
corretamente em todos os navegadores, você precisa saber
como funciona o modelo de caixa.

36. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model
320 px (largura)
+ 20 px ( preenchimento esquerdo + direito)
+10 px (borda esquerda + direita)
+ 0 px (margem esquerda + direita)
= 350 px
Aqui está o cálculo:

37. Modelo CSS
Prof. Pedro Clarindo da Silva Neto
Box Model
A largura total de um elemento deve ser calculada assim:
Largura total do elemento = largura + preenchimento
esquerdo + preenchimento direito + borda esquerda + borda
direita + margem esquerda + margem direita
A altura total de um elemento deve ser calculada assim:
Altura total do elemento = altura + preenchimento superior +
preenchimento inferior + borda superior + borda inferior +
margem superior + margem inferior

38. De
fi
nição
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
A propriedade position especifica o
tipo de método de posicionamento
usado para um elemento (estático,
relativo, fixo, absoluto ou aderente).

39. Posicionamento CSS
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Existem cinco valores de posição diferentes:
static, relative, fixed, absolute e sticky.
Os elementos são posicionados usando as propriedades
superior, inferior, esquerda e direita. No entanto, essas
propriedades não funcionarão a menos que
a propriedade position seja definida primeiro. Eles
também funcionam de forma diferente dependendo do
valor da posição.

40. Posicionamento CSS - static
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Os elementos HTML são posicionados estáticos por padrão.
Os elementos posicionados estáticos não são afetados
pelas propriedades superior, inferior, esquerda e direita.
Um elemento com position: static; não é posicionado de
nenhuma maneira especial; está sempre posicionado de
acordo com o fluxo normal da página:

41. Posicionamento CSS - static
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS

42. Posicionamento CSS - relative
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Um elemento com position: relative; está posicionado
em relação à sua posição normal.
Definir as propriedades superior, direita, inferior e
esquerda de um elemento relativamente posicionado fará
com que ele seja ajustado para longe de sua posição
normal. Outro conteúdo não será ajustado para caber em
qualquer lacuna deixada pelo elemento.

43. Posicionamento CSS - relative
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS

44. Posicionamento CSS -
fi
xed
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Um elemento com position: fixed; é posicionado em
relação à janela de visualização, o que significa que
ele sempre permanece no mesmo lugar, mesmo se a
página for rolada. As propriedades superior, direita,
inferior e esquerda são usadas para posicionar o
elemento.
Um elemento fixo não deixa uma lacuna na página
onde normalmente estaria localizado.

45. Posicionamento CSS -
fi
xed
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS

46. Posicionamento CSS - absolute
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Um elemento com position: absolute; é posicionado em
relação ao ancestral posicionado mais próximo (em vez de
posicionado em relação à janela de visualização, como fixo).
Contudo; se um elemento posicionado de forma absoluta
não tiver ancestrais posicionados, ele usará o corpo do
documento e se moverá junto com a rolagem da página.
Nota: Um elemento "posicionado" é aquele cuja posição é
qualquer coisa exceto static.

47. Posicionamento CSS - absolute
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS

48. Posicionamento CSS - sticky
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Um elemento com position: sticky; é posicionado
com base na posição de rolagem do usuário.
Um elemento sticky (aderente) alterna entre relative
e fixed, dependendo da posição de rolagem. Ele é
posicionado em relação até que uma determinada
posição de deslocamento seja encontrada na janela
de exibição - então, ele "se fixa" no lugar (como a
posição: fixa).

49. Posicionamento CSS - sticky
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS
Observação: o Internet
Explorer não oferece suporte para
posicionamento
fi
xo. O Safari requer um pre
fi
xo
-webkit- . Você também deve especi
fi
car pelo menos um
de top, right, bottom ou left para o posicionamento
sticky funcionar.

50. Posicionamento CSS - sticky
Prof. Pedro Clarindo da Silva Neto
Posicionamento CSS

51. CSS - W3C
Prof. Pedro Clarindo da Silva Neto
Referências
Disponível em:<https://www.w3schools.com/css/>