![Page 1: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/1.jpg)
Cascading Style SheetsP R O F. M E . H É L I O E S P E R I D I Ã O
![Page 2: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/2.jpg)
CSSCascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento.
![Page 3: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/3.jpg)
QUAL É A DIFERENÇA ENTRE CSS E HTML?
HTML é usado para estruturar conteúdos.
1
CSS é usado para formatar conteúdos estruturados.
2
![Page 4: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/4.jpg)
No que eles podem nos ajudar?
Economizar o seu tempo.
Diminuir o tamanho do código
de sua página.
Sua página irá carregar mais rapidamente.
Mais facilidade de manter e fazer alterações na
página.
Mais controle no layout da página
![Page 5: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/5.jpg)
A SINTAXE BÁSICA DO CSS.
![Page 6: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/6.jpg)
Melhor dizendoCada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe
![Page 7: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/7.jpg)
Entendendo melhorElemento ou seletor ◦ Descreve o elemento de design ao qual o estilo será aplicado.
◦ Pode ser a mesma tag HTML mas, sem os sinais de maior e menor.
◦ Essa parte da regra é às vezes chamada de seletor.
Atributo◦ Aspecto específico do elemento que você quer usar como estilo.
◦ Deve ser um nome de atributo CSS válido, como o atributo font-size.
![Page 8: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/8.jpg)
Entendendo melhor
Valor
◦ A configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt (20 pontos) para font-size.
![Page 9: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/9.jpg)
Exemplos CSSFont-size
![Page 10: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/10.jpg)
Exemplos CSSFont-size
![Page 11: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/11.jpg)
Exemplos CSScolor
![Page 12: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/12.jpg)
Tabela de cores Básica
![Page 13: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/13.jpg)
CSSFont-Style / font-weight
Itálico
Negrito
Tamanho da fonte
![Page 14: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/14.jpg)
CSSFont-Family Caso a primeira não
esteja disponível pula parasegunda, caso a segundanão esteja disponível pula para terceira e assim sucessivamente
![Page 15: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/15.jpg)
CSSbackground-color
Altera a cor do fundodo seletor H1
![Page 16: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/16.jpg)
Exemplo com vários seletores
![Page 17: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/17.jpg)
Cores em CSSAs cores em css podem ser representados por nomes.◦ Blue, gray, red, etc.
As cores em css podem ser representadas por números Hexadecimais
Estes números Hexadecimais são arranjados no padrão RGB
![Page 18: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/18.jpg)
RGB é a abreviatura de RED, GREEN e BLUE.◦ Vermelho, verde e azul.
A mistura dessas cores pode gerar qualquer cor.
Dois algarismos Hexadecimais são utilizados para representar cada cor ◦ 2 para Vermelho
◦ 2 para Verde
◦ 2 para Azul
RGB
![Page 19: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/19.jpg)
números Hexadecimais
![Page 20: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/20.jpg)
Definindo uma cor em css
Quantidade deVermelho
Quantidade deverde
Quantidade máxima deAzul
![Page 21: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/21.jpg)
Definindo uma cor em css
Quantidade deVermelho
Quantidade deverde
Quantidade de Azul
![Page 22: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/22.jpg)
Definindo uma cor em css
Quantidade deVermelho
Quantidade deverde
Quantidade de Azul
![Page 23: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/23.jpg)
Misturando as cores
![Page 24: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/24.jpg)
Definindo uma cor em css
Quantidade deVermelho
Quantidade deverde
Quantidade de Azul
![Page 25: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/25.jpg)
Definindo uma cor em css
Quantidade deVermelho
Quantidade deverde
Quantidade de Azul
![Page 26: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/26.jpg)
Definindo uma cor em css
Quantidade deVermelho
Quantidade deverde
Quantidade de Azul
![Page 27: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/27.jpg)
Representação dobradaNa notação abreviada cada um dos três dígitos é automaticamente dobrado conforme exemplos a seguir:
![Page 28: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/28.jpg)
A propriedade borderDefine borda de componentes
border-width - espessura da borda◦ thin: borda fina
◦ medium: borda média
◦ thick: borda grossa
◦ length: uma medida reconhecida pelas CSS (px)
![Page 29: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/29.jpg)
A propriedade
border
border-style: estilo da borda
◦ none: nenhuma borda
◦ hidden: equivalente a none
◦ dotted: borda pontilhada
◦ dashed: borda tracejada
◦ solid: borda contínua
◦ double: borda dupla
◦ groove: borda entalhada
◦ ridge: borda em ressalto
◦ inset: borda em baixo relevo
◦ outset: borda em alto relevo
border-color
◦ cor da borda em hexadecimal
![Page 30: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/30.jpg)
Exemplo: border
![Page 31: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/31.jpg)
A propriedade padding
A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.
Padding é responsável por definir o espaço entre o conteúdo do elemento HTML e sua borda,
padding-top
◦ define a espaçamento superior;
padding-right
◦ define a espaçamento direita;
padding-bottom
◦ define a espaçamento inferior;
padding-left
◦ define a espaçamento esquerda;
Padding
◦ maneira abreviada para todas os espaçamentos
![Page 32: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/32.jpg)
Exemplo: padding
50px
![Page 33: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/33.jpg)
Exemplo padding
50px
50px
![Page 34: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/34.jpg)
A propriedade Margin
1
Margin é responsável por definir o espaço entre os elementos HTML. Para que fique claro as diferenças, dê uma olhada na imagem abaixo, ela representa
2
margin-top
•define a margem superior;
3
margin-right
•define a margem direita;
4
margin-bottom
•define a margem inferior;
5
margin-left
•define a margem esquerda;
6
Margin
•maneira abreviada para todas as margens
![Page 35: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/35.jpg)
Exemplo Margin
![Page 36: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/36.jpg)
Exemplo Margin
![Page 37: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/37.jpg)
Exemplo Margin
![Page 38: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/38.jpg)
Classes CSSConsiste em definir um conjunto de estilos que poderão ser utilizados por objetos distintos.
![Page 39: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/39.jpg)
TAGDIVA tag <div> define um elemento do tipo bloco.
É um mecanismo genérico para agrupar componentes em um documento html
![Page 40: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/40.jpg)
Exemplo de div
![Page 41: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/41.jpg)
Identificando componentes de forma única
![Page 42: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/42.jpg)
Identificar componentes de forma única
![Page 43: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/43.jpg)
SpansSpans também são utilizados para agrupamento de componentes.
Não funcionam como blocos como os divs
Funciona para agrupar informações em uma mesma linha ou região
![Page 44: Cascading Style SheetsTabela de cores Básica. CSS Font-Style / font-weight ... Altera a cor do fundo do seletor H1. Exemplo com vários seletores. Cores em CSS As cores em css podem](https://reader030.vdocuments.pub/reader030/viewer/2022040808/5e4c449df387ac706d135dc2/html5/thumbnails/44.jpg)
Spans Exemplo