1. CSS – w3schools
(https://www.w3schools.com/css/default.asp)
Introdução
define estilos e formatação
geralmente salvos em arquivos externos .css
sintaxe CSS → Seletor e Bloco de Declaração
selector → aponta p/ o elemento HTML que vai estilizar
bloco de declaração
◦ envolvido por 1 par de chaves
◦ uma ou mais declarações separadas por ponto e vírgula ao final
◦ cada declaração → 1 propriedade CSS e 1 valor, separados por 2 pontos
◦ para melhor visibilidade pode ser dividido em várias linhas
Ex: para todos os parágrafos: centralizar e aplicar fonte vermelha
p { → seletor CSS que aponta p/ elemento HTML <p>
color: red; → color e text-align são propriedades com valores red e center
text-align: center;
}
CSS Selectors
Seleciona os elementos HTML que se quer estilizar
podem ser de 5 categorias
◦ Simple selectors → baseado name, id ou class
◦ Combinator selectors → baseado relação específica entre elementos
◦ Pseudo-class selectors → baseado em certos estados
◦ Pseudo-elements selectors → baseado em partes de um elemento
◦ Attribute selectors → baseado num atributo ou no valor de um atributo
OBS: para casos específicos e sofisticados ver
https://www.w3schools.com/cssref/css_selectors.asp
Simple selectors
1) CSS element Selector → seleciona um elemento pelo seu name
2. p { → para todos os parágrafos: centralizar e aplicar fonte vermelha
text-align: center;
color: red;
}
2) CSS id Selector → seleciona um elemento pelo seu ID
O ID é único dentro de uma página e não pode iniciar com um dígito → logo o id
Selector seleciona apenas um elemento
Sintaxe → #ID
#para1 { → apenas p/ elemento com ID = “#para1”
text-align: center;
color: red;
}
3) CSS class Selector → seleciona todos os elementos de uma classe
sintaxe → .className (ponto + nomeClasse)
nomeClasse não pode iniciar com um dígito
.center { → todos elementos com class="center"
text-align: center;
color: red;
}
p.center { → todos parágrafos com class="center"
text-align: center;
color: red;
}
Obs: no HTML → <p class="center large"> Parágrafo com 2 classes</p> → Este
parágrafo poderá ser formato usando 2 classes center e large
4) CSS Universal Selector (*) → seleciona todos os elementos de uma página
* { → resultado semelhante trocando * por body ?
text-align: center;
color: blue;
}
5) CSS Grouping Selector → seleciona elementos que atendam a uma lista de seletores
separar seletores por vírgula
h1, h2, p { → todos elementos h1/h2 (títulos) e parágrafos
text-align: center;
color: red;
}
Resumo: CSS Simple Selectors
Selector Examplo Selecionam
3. .class .intro Todos elementos com class="intro"
#id #firstname Todos elementos com id="firstname"
* * Todos os elementos
element p Todos os parágrafos → <p>
element,element,.. div, p Todos os parágrafos e divs → <p> e <div>
https://www.devmedia.com.br/integrando-jsf-e-css/4577
Tipo de Seletor Descrição Sintaxe
Elemento
Especifica o nome de um elemento HTML que
receberá o estilo e questão.
elemento {Bloco de
declaração;}
Elementos
Múltiplos
Define o nome de vários elementos HTML que
receberão as informações de estilo.
elemento1,element
o2 {Bloco de
declaração;}
Universal
Através de um asterisco, determina que todos os
elementos de um documento receberão as
definições.
* {Bloco de
declaração;}
Elementos
adjacentes
Seleciona um elemento somente quando estiver
imediatamente após o outro.
elemento1+elemen
to2{Bloco de
declaração;}
Elementos-filho Elementos contidos em outros elementos.
elemento1>elemen
to2{Bloco de
declaração;}
Classes
Será definido no atributo CLASS de um elemento
HTML. Para isso ocorrer, basta criar um CLASS
nas definições de estilo, e depois associar essa
classe a um elemento.
.nome da classe
{Bloco de
declaração;}
ID
Deve ser semelhante ao atributo ID de um
elemento HTML, para isso, basta em um elemento
HTML, colocar seu ID como mesmo nome do
elemento CSS.
#ID do elemento
{Bloco de
declaração;}
3 Formas de inserir CSS
1) External CSS
arquivo texto com extensão .css
não deve conter nenhuma tag HTML
um único arquivo pode modificar todo um website
cada página HTML deve referenciar o arquivo .css → usar elemento link dentro da
seção head
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
4. <h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
"mystyle.css"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px; → não colocar espaços entre o valor e a unidade (não 20 px)
}
2) Internal CSS
pode ser usado para estilos específicos a apenas uma página
usar elemento <style> dentro da seção head
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3) Inline CSS
aplica um estilo a um elemento específico
usa o atributo style dentro do elemento → pode conter qualquer propriedade CSS
usar apenas quando realmente necessário → mistura conteúdo com estilo
5. <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Obs: múltiplas definições CSS
se a mesma propriedade for definida para o mesmo seletor (elemento) em
diferentes CSS, será utilizado o último lido
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> → define h1 { color: navy; }
}
<style>
h1 {
color: orange;
}
</style>
</head> → elementos h1 ficarão orange
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head> → elementos h1 ficarão navy
Obs: ordem de prioridade (Cascading Order)
se mais de um estilo for aplicado a um mesmo elemento HTML será aplicado nesta
ordem
◦ inline CSS → definido dentro do elemento HTML
◦ external / internal CSS (regra última leitura) → definido dentro da seção head
◦ defaults do browser
Comentários em CSS
São comentários de múltiplas linhas /* xxxxx */
num arquivo CSS → em qualquer lugar
/* comentário de uma linha*/
p {
color: red; /* comentário dentro do seletor */
}
/*
comentário de muitas
6. linhas
*/
Obs comentários HTML <!--. xxx --> e CSS misturados no código HTML
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* seta cor para vermelho*/ → CSS
}
</style>
</head>
<body>
<h2>My Heading</h2>
<!-- Estes parágrafos serão vermelhos → → HTML
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
<p>CSS comments are not shown in the output.</p>
</body>
</html>
Cores em CSS
Várias formas: nome da cor (140 cores) ou valores RGB, HEX, RGB, HSL, RGBA,
HSLA
CSS Background Color → cor de fundo (atrás do texto)
<h1 style="background-color:DodgerBlue;">Hello World</h1>
CSS Text Color → cor do texto
<h1 style="color:Tomato;">Hello World</h1>
CSS Border Color → cor da borda ao redor do texto
<h1 style="border:2px solid Violet;">Hello World</h1>
várias formas de usar a cor tomato
<h1 style="background-color:Tomato;">...</h1> → Nome cor
<h1 style="background-color:rgb(255, 99, 71);">...</h1> → RGB
<h1 style="background-color:#ff6347;">...</h1> → Hexadecimal
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1> → HSL
várias formas de usar a cor tomato com 50% de transparência
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> → RGBA
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1> → HSLA
7. CSS RGB Colors
uma cor é especificada em CSS usando RGB através da fórmula
rgb(vermelho, verde, azul) → cada parâmetro de 0 (nada) a 255 (tudo)
Rgb(255, 0, 0) Vermelho Rgb(0, 255, 0) Verde
Rgb(0, 0, 255) Azul Rgb(0, 0, 0) Preto
Rgb(255, 255, 255) Branco Rgb(60, 60, 60) Cinza escuro
Rgb(120, 120, 120) Cinza pouco escuro Rgb(180, 180, 180) Cinza claro
rgb(240, 240, 240) Cinza muito claro
OBS: valores iguais dão diferentes tons de cinza
para usar opacidade (clareia a cor) através de um canal alpha → usar fórmula
rgba(vermelho, verde, azul, alpha) → 3 primeiros idem, alpha: 0 = totalmente
transparente e 1 totalmente opaco (a cor não é alterada)
rgba(255, 99, 71, 0) transparente rgba(255, 99, 71, 0.4) Laranja claro
rgba(255, 99, 71, 0.7) Laranja médio rgba(255, 99, 71, 1 Laranja escuro
CSS HEX Colors
uma cor é especificada em CSS usando valores hexadecimais usando
#rrggbb → rr (vermelho), gg (verde) e bb (azul) → valores de 00 a ff (que
equivalem em decimal de 0 a 255)
#ff0000 Vermelho #00ff00 Verde
#0000ff Azul #000000 Preto
#ffffff Branco #3c3c3c Cinza escuro
#b4b4b4 Cinza pouco escuro #f0f0f0 Cinza claro
rgb(240, 240, 240) Cinza muito claro
OBS: valores iguais dão diferentes tons de cinza
CSS HSL Colors
cor definida por HSL → usar fórmula
hsl(hue, saturation, lightness)
◦ Tonalidade (hue) → de 0 a 360 → vermelho(0), verde (120), azul (240)
◦ Saturação (saturation) → intensidade da cor → de 0% (totalmente cinza) a
100% (cor pura)
◦ Brilho (lightness) → luminosidade da cor → de 0% (preto), 50% (nem claro nem
escuro) a 100% (branco)
8. Hsl(0, 100%, 50%) Vermelho vivo hsl(147, 50%, 47%) Verde claro
hsl(240, 100%, 50%) Azul vivo hsl(0, 100%, 0%) Preto
hsl(0, 100%, 100%) Branco hsl(0, 0%, 24%) Cinza escuro
Hsl(0, 0%, 47%) Cinza pouco escuro hsl(0, 0%, 71%) Cinza claro
hsl(0, 0%, 94%) Cinza muito claro
OBS: tons de cinza → saturação = 0% e ajustar brilho de 0% (preto) a 100% (branco)
para usar opacidade (clareia a cor) através de um canal alpha → usar fórmula
hsla(hue, saturation, lightness, alpha) → 3 primeiros idem, alpha: 0 = totalmente
transparente e 1 totalmente opaco (a cor não é alterada)
hsla(9, 100%, 64%, 0) transparente hsla(9, 100%, 64%, 0.4) Laranja claro
hsla(9, 100%, 64%, 0.8) Laranja médio hsla(9, 100%, 64%, 1) Laranja escuro
CSS Backgrounds
Diversas propriedades que definem efeitos no fundo de um elemento → dentre
elas: background-color / imagem / repeat / attachment / position
CSS background-color
cor de fundo do elemento
geralmente usando nomeCor (red), hexadecimal (#ff0000) ou rgb( rgb(255,0,0) )
body {
background-color: lightblue;
}
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
opacidade / transparência com propriedade opacity de 0.0 (transparente) a 1.0
(opaco / cor sem alteração) → problema: todos os elementos filho herdam a
mesma transparência tornando a leitura difícil
div {
background-color: green;
opacity: 0.3;
}
9. opacidade / transparência com RGBA → OK: altera a cor de fundo sem alterar a
cor dos elementos filho como a da fonte
div {
background: rgba(0, 128, 0, 0.3) /* fundo verde com 30% de opacidade */
}
CSS Background Image
insere uma imagem de fundo no elemento
o ideal é uma imagem que não atrapalhe a leitura de texto que já esteja no
elementos
body { → insere a figura em background na página toda
background-image: url("paper.gif");
}
p { → insere a figura em background em todos os parágrafos
background-image: url("paper.gif");
}
CSS Background Repeat
Controlando a repetição da imagem de fundo
◦ por default a imagem é repetida cobrindo todo o elemento → tanto vertical
quanto horizontalmente
◦ para repetir apenas horizontalmente → background-repeat: repeat-x;
◦ para apenas verticalmente → background-repeat: repeat-y;
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; → ou repeat-y
}
◦ para não repetir → background-repeat: no-repeat;
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top; → posiciona a imagem no canto superior direito
} → neste caso evitou atrapalhar o texto que estava por cima
10. CSS Background Attachment
define se ao rolar a tela a imagem de fundo rolará junto ou não
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed; → não rola (fica fixa)
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll; → rola
}
CSS Background Shorthand
as propriedades de background podem ser especificadas em uma única linha
seguir a ordem
◦ background-color
◦ background-image
◦ background-repeat
◦ background-attachment
◦ background-position
OBS: caso alguma delas não tenha valor não precisa ser especificada mas as que tiverem
tem que seguir está ordem
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
body {
background: #ffffff url("img_tree.png") no-repeat right top;
} → background-attachment não tinha valor e foi omitida
Resumo: CSS Background
Propriedade Descrição
background Seta todas background conjuntamente
background-
attachment
se background image é fixa ou rola com resto da página
background-clip Quanto a imagem/cor de fundo se extende c/ o elemento (***)
11. background-color Cor de fundo de um elemento
background-image Imagem de fundo de um elemento
background-origin
Posição original da imagem de fundo (para attachment <> fixed)
(***)
background-position Posição inicial da imagem de fundo
background-repeat Se imagem de fundo se repete
background-size Tamanho da imagem de fundo (4 formas de usar) (***)
CSS Borders
CSS Border Style
Tipo de borda a exibir
Dotted Pontilhada Dashed Tracejada
Solid Sólida Double dupla
Groove 3D com sulco Ridge 3D alto relevo
Inset borda embutida 3D
(inferior e direita)
Outset borda embutida 3D (superior e
esquerda)
none Sem borda hidden oculta
Podem ser especificadas de 1 a 4 posições, nesta ordem: superior, direita, inferior
e esquerda → se apenas 1 seta as 4, 1ª seta 3ª se esta omissa, 2ª seta 4ª se esta
omissa
As demais propriedades de borda só funcionam se definida border-style
p.dotted {border-style: dotted;} → tudo pontilhado
p.dashed {border-style: dashed solid;} → tracejado (sup / inf) e sólido (dir / esq)
p.none {border-style: none double solid;} → sem (sup), dupla (dir / esq) e solido (inf)
p.hidden {border-style: hidden;} → toda oculta
p.mix {border-style: dotted dashed solid double;} → pontilhado (sup), tracejado (dir), sólido
(inf) e dupla (esq)
CSS Border Width
Largura da borda para de 1 a 4 posições (similar Tipo de Borda)
Pode usar diversas unidades de medida (px, pt, cm, em, …) ou 3 valores pré-
definidos thin, medium, or thick (fina, média ou grossa)
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
12. }
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
CSS Border Color
Cor da borda para de 1 a 4 posições (similar Tipo de Borda)
Pode pelo Nome da Cor, Hexadecimal, RGB, HSL ou transparent (sem cor) →
pode misturar os sistemas de cor
Se não setada herda a cor do elemento
p.two { → solida verde
border-style: solid;
border-color: green;
}
p.three { → pontilhada azul (sup e inf) e nada (esq e dir)
border-style: dotted;
border-color: blue transparent;
}
p.one { → sólida de 4 cores (sup, dir, inf e esq)
border-style: solid;
border-color: red green blue yellow;
}
p.one {
border-style: solid;
border-color: #ff0000; → vermelho em Hexadecimal
}
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); → vermelho em RGB
}
p.one {
border-style: solid;
13. border-color: hsl(0, 100%, 50%); → vermelho em HSL
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255); → 4 cores (hexa e RGB)
}
CSS Border – lados individuais (específicos)
Existem propriedades específicas para as 4 posições de borda ou pode-se usar
como acima (em border-style, border-width e border-color)
Ideal para notação abreviada (Shorthand)
p { → tracejada (sup e inf) e sólida (dir e esq)
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
p { → idem
border-style: dotted solid;
}
Para style → border-XXX-style (top, right, bottom, left)
Para color → border-XXX-color (top, right, bottom, left)
Para width → border-XXX-with (top, right, bottom, left)
CSS Border Shorthand
as propriedades de border podem ser especificadas em uma única linha
seguir a ordem
◦ border-width
◦ border-style (obrigatória se houver alguma outra)
◦ border-color
OBS: caso alguma delas não tenha valor não precisa ser especificada (exceto border-
style) mas as que tiverem tem que seguir está ordem
p { → todas as bordas: largura 5px, sólida e vermelha
border: 5px solid red;
}
p {
border-left: 6px solid red; → esquerda: largura 6 px, sólida e vermelha
background-color: lightgrey; → cor de fundo cinza claro
}
p {
border-style: solid; → bordas dir, inf e esq: sólida (default preta)
border-top: thick double #ff0000; → borda sup: grossa, dupla e vermelha
}
/* setando borda inferior de alguns parágrafos */
p { border-style: solid; } → todas bordas de todos parágrafos: sólida
p.none { border-bottom-style: none; } → <p> classe “none”: borda inferior: nenhuma
p.dotted { border-bottom-style: dotted; }→ <p> classe “dotted”: borda inferior: pontilhada
14. CSS Rounded Borders
bordas arredondadas (border-radius)
é setada a parte → não incluída em border (não Shorthand)
p {
border: 2px solid red;
border-radius: 5px; → leve arredondado → 12px (bastante)
}
Resumo: CSS Border
Propriedade Descrição
border Todas propriedades de borda de uma vez (4 posições) → short
border-color Cor (4 posições)
border-radius Arredondamento (único não pode escolher a posição)
border-style Estilo (4 posições)
border-width Largura (4 posições)
OBS: todas acima (exceto radius) podem ter top, right, bottom ou left (específicas)
CSS Margins
Cria espaços fora da borda → “margem EXTERNA”
valores
◦ auto → o browser calcula
◦ length → especificada numa unidade de medida (px, pt, cm, …)
◦ % → % da largura do container
◦ inherit → herda do elemento-pai
pode ter valores negativos (diminui a margem padrão / atual)
Margens individuais
margin-top, margin-right, margin-bottom e margin-left
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - Shorthand
15. p {
margin: 25px 50px 75px 100px; → 4 valores
}
p {
margin: 25px 50px; → sup / inf (25) e esq / dir (50)
}
p {
margin: 25px; → geral
}
valor Auto
junto com width centraliza horizontalmente o elemento
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
valor Inherit
herda a margem do elemento-pai
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 { → no html há um <p> da classe “ex1” dentro de uma div
margin-left: inherit; → herda 100px
}
CSS Margin Collapse
Ocorre apenas para as margens superior e inferior (não esq / dir) → se 2
elementos vizinhos verticalmente tem margem inferior (o de cima) e superior (o de
baixo) diferentes a margem entre eles não é a soma mas a maior entre elas
h1 {
margin: 0 0 50px 0; → inferior = 50px
}
h2 {
margin: 20px 0 0 0; → superior = 20px
} → no html h2 está logo abaixo de h1 → a margem entre eles é 50px e não 50+20px
Resumo: CSS Margin
16. Propriedade Descrição
margin Todas propriedades de margem de uma vez (4 posições) → short
margin-XXX Margens individuais → top, left, bottom ou right
CSS Padding
Espaço interno de um elemento dentro da borda → “margem INTERNA”
valores
◦ length → especificada numa unidade de medida (px, pt, cm, …)
◦ % → % da largura do elemento
◦ inherit → herda do elemento-pai
NÃO pode ter valores negativos
Padding individuais
padding-top, padding-right, padding-bottom e padding-left
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
p.padding {
padding-top: 2cm; → 2 cm de margem superior
}
p.padding2 {
padding-left: 50%; → inicia texto no centro da página
}
Padding - Shorthand
div {
padding: 25px 50px 75px 100px;
}
div {
padding: 25px 50px 75px; → sup (25), esq / dir (50) inf (75)
}
div {
padding: 25px 50px; → sup / inf (25) e esq / dir (50)
}
div {
padding: 25px; → geral
}
Padding e elemento Width (largura)
o espaço do elemento será width + padding
div {
width: 300px;
17. padding: 25px;
} → largura real desta div = 300 + 25 (esq) + 25 (dir) = 350px
para manter a largura real = width → usar box-sizing (força diferença para o
conteúdo do elemento (texto ou imagem) → “comprime” conteúdo e pode aumentar
altura do elemento (crescendo verticalmente mas não horizontalmente)
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
CSS Height and Width
height / width → altura / largura da “área interna” do elemento
NÃO inclui margin, padding nem border → que estão fora da “área interna”
valores
◦ auto → default (o brower calcula)
◦ length → especificada numa unidade de medida (px, pt, cm, …)
◦ % → % do bloco contêiner em que está inserido o elemento
◦ inherit → herda do elemento pai
div {
height: 200px;
width: 50%; → qualquer redução largura browser reacomoda (responsivo)
background-color: powderblue;
}
div {
height: 100px;
width: 500px; → se largura browser menor = barra de rolagem horizontal
background-color: powderblue;
}
max-width
largura máxima do elemento → sobrepõe width
valores
◦ length → especificada numa unidade de medida (px, pt, cm, …)
◦ % → % do bloco contêiner em que está inserido o elemento
◦ none → default (sem largura máxima)
div {
height: 100px;
max-width: 500px; → se largura browser menor = acomoda verticalmente (responsivo)
background-color: powderblue;
}
div {
height: 200px;
max-width: 50%; → funciona igual a width 50%
18. background-color: powderblue;
}
min-width
div {
height: 100px;
min-width: 500px; → se largura browser menor = barra de rolagem horizontal
→ se maior = assume largura total do container
background-color: powderblue;
}
div {
height: 100px;
min-width: 50%; → sempre assume largura total do contêiner
→ nunca tem barra de rolagem horizontal
→ está sempre acomodando o texto verticalmente
background-color: powderblue;
}
div {
max-width: 400px;
min-width: 300px; → se largura browser menor = barra de rolagem horizontal
→ se maior = assume largura max-width sempre
background-color: powderblue;
}
max-height e min-height
div {
height: 100px; → ocupa toda altura disponível
width: 500px;
background-color: powderblue;
}
div {
max-height: 100px; → ocupa apenas altura necessária
width: 500px;
background-color: powderblue;
}
OBS: ambos geram barra rolagem vertical se reduzidos
Resumo: CSS Dimension
Propriedade Descrição
height Seta Altura do elemento
min-height Seta Altura mínima do elemento
max-height Seta Altura máxima do elemento
width Seta Largura do elemento
min-width Seta Largura mínima do elemento
max-width Seta Largura máxima do elemento
OBS: ver detalhes nos exemplos acima
19. CSS Box Model
todos elementos HTML podem ser considerados caixas
este modelo permite colocar borda ao redor de um elemento e definir espaços
entre elementos e entre a borda e o conteúdo
CONTEÚDO → onde é colocado texto ou imagem
Padding → limpa uma área (sempre transparente) ao redor do Conteúdo
Border → borda ao redor do Paddring e do Conteúdo
Padding → limpa uma área (sempre transparente) ao redor da Borda
BORDA (border)
MARGEM INTERNA (padding)
CONTEÚDO
MARGEM EXTERNA (margin)
20. div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
largura e altura de um elemento
div {
width: 320px; → largura apenas do conteúdo
height: 400px; → altura apenas do conteúdo
padding: 10px;
border: 5px solid gray;
margin: 0;
}
largura real = 350px → 320 (width) + 20 (left + right padding) + 10 (left + right
border) + 0 (left + right margin)
altura real = 430px → 400 (height) + 20 (top + bottom padding) + 10 (top + bottom
border) + 0 (top + bottom margin)
CSS Outline
É uma linha que circula um elemento fora da borda (border) e dentro da margem
externa (margin)
Diferenças da borda
◦ pode sobrepor outros conteúdos → aumentar margin pode evitar isso
◦ não altera a largura/altura reais do elemento → apenas “flutua”
4 propriedades → outline-style, outline-color, outline-width, outline-offset e outline
outline-style
Tipo de outline a exibir → igual a border-style
Dotted Pontilhada Dashed Tracejada
Solid Sólida Double dupla
Groove 3D com sulco Ridge 3D alto relevo
Inset borda embutida 3D
(inferior e direita)
Outset borda embutida 3D (superior e
esquerda)
none Sem borda hidden oculta
NÃO podem ser especificadas posições → apenas um valor afeta as 4 posições
As demais propriedades de outline só funcionam se definida outline-style
21. p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
outline-width
largura da outline
◦ thin (geralmente 1px)
◦ medium ( geralmente 3px)
◦ thick ( geralmente 5px)
◦ valor específico (px, pt, cm, …)
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
outline-color
Cor a outline → pode ser: pelo Nome da Cor, Hexadecimal, RGB, HSL ou Invert
(inverte cor do background ?? → sempre preto)
or da borda para de 1 a 4 posições (similar Tipo de Borda)
Pode pelo Nome da Cor, Hexadecimal, RGB, HSL ou transparent (sem cor) →
pode misturar os sistemas de cor
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue; → #ff0000 rgb(255, 0, 0) hsl(0, 100%, 50%) (vermelho) ou invert
}
CSS Outline Shorthand
as propriedades de outline podem ser especificadas em uma única linha
engloba as seguintes, em qualquer ordem:
◦ outline-width
◦ outline-style (obrigatória se houver alguma outra)
◦ outline-color
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
outline-offset
22. espaço transparente entre a outline e a borda
p {
margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
}
Resumo: CSS Outline
Propriedade Descrição
outline Shorthand → seta outline-width, outline-style e outline-color juntos
outline-color Seta cor da linha
outline-offset Espaço transparente entre a outline e a borda
outline-style Seta estilo da linha
outline-width Seta largura da linha
CSS Text → qualquer texto contido em qualquer tag: <p>, <div>, <h1>, ...
Text Color
define a cor do texto → nome da cor, RGB, HEX, RGB, HSL, RGBA, HSLA
body { → cor padrão do texto desta página
color: blue;
}
h1 {
color: green;
}
Background Color
segundo a especificação da W3C, sempre que for definida a propriedade color
também deve ser definida background-color
cor de fundo do texto
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
23. h1 {
text-align: center;
text-transform: uppercase;
color: hsl(39, 100%, 50%);
}
p {
text-indent: 50px;
text-align: justify;
letter-spacing: 3px;
}
a {
text-decoration: none;
color: #008CBA;
}
text-align
alinhamento horizontal → left, right, center ou justify
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
text-align: justify;
}
Text Direction
direction
◦ ltr → left to right (esquerda para direita0
◦ rtl → right to left (direita para esquerda)
◦ initial → valor inicial
◦ inherit → herda do elemento-pai
unicode-bidi → ??? → usar junto com direction
p {
direction: rtl;
24. unicode-bidi: bidi-override;
}
vertical-align
alinhamento vertical de um texto / imagem
◦ baseline → default: alinha na mesma altura vertical (baseline) do elemento pai
◦ length → aumenta / diminui elemento com valor+unidade (pode valor negativo)
◦ % → aumenta / diminui com % (pode valor negativo)
◦ sub → subscrito em relação ao elemento pai
◦ super → sobrescrito em relação ao elemento pai
◦ top → alinha ao elemento mais alto desta linha
◦ text-top → alinha ao elemento mais alto do pai
◦ middle → centraliza em relação ao elemento pai
◦ bottom → alinha ao elemento mais baixo desta linha
◦ text-bottom → alinha ao elemento mais baixo do pai
◦ nitial → valor inicial
◦ inherit → herda do elemento-pai
img.top {
vertical-align: top;
}
text-decoration
shorthand para
◦ text-decoration-line (required) → tipo. Pode combinar + de um tipo
▪ none → default: nenhum
▪ underline → sublinhado (cuidado ao sublinhar texto que não seja um link)
▪ overline → linha acima do texto
▪ line-through → texto riscado (“anulado”)
▪ nitial → valor inicial
▪ inherit → herda do elemento-pai
◦ text-decoration-color → cor da decoração
▪ color → cor da decoração
▪ nitial → valor inicial
▪ inherit → herda do elemento-pai
◦ text-decoration-style → estilo
▪ solid → default: linha simples
▪ double → linha dupla
▪ dotted → linha pontilhada
▪ dashed → linha tracejada
▪ wavy → linha ondulada
▪ nitial → valor inicial
▪ inherit → herda do elemento-pai
h1 {
text-decoration: underline overline wavy; → ondulado em cima e em baixo (sublinhado)
}
h2 {
text-decoration: line-through blue; → riscado azul
25. }
h3 {
text-decoration: underline double red; → sublinhado duplo vermelho
}
/* retira sublinhado de um link */
a {
text-decoration: none; → retira sublinhado (que já seria automático)
}
<a href="css_text.asp">Link não sublinhado</a> → texto HTML correspondente
text-transform
controle de maiúsculas e minúsculas
◦ none → default: nada
◦ capitalize → 1ª letra de cada palavra em maiúscula
◦ uppercase → tudo em maiúscula
◦ lowercase → tudo em minúscula
◦ nitial → valor inicial
◦ inherit → herda do elemento-pai
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
CSS Text Spacing → várias propriedades (abaixo)
text-indent
Indentação da 1ª linha do texto
p {
text-indent: 50px;
}
letter-spacing
espaço entre as letras, pode ser negativo
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
line-height
espaço interlinhas
26. p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
word-spacing
espaço entre as palavras, pode ser negativo
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
white-space
controla uso de espaços em branco
◦ normal → default: sequência de espaços vira apenas um. Quebra de linha
automática
◦ nowrap → sequência de espaços vira apenas um. Não quebra de linha: texto
continua até encontrar um <br>
◦ pre → preserva todos espaços. Texto quebra ao encontrar caractere de fim de
linha (semelhante a <pre> do HTML)
◦ pre-line → sequência de espaços vira apenas um. Texto quebra sempre que
necessário e também ao encontrar caractere de fim de linha
◦ pre-wrap → o browser preserva os espaços. Texto quebra sempre que
necessário e também ao encontrar caractere de fim de linha
◦ nitial → valor inicial
◦ inherit → herda do elemento-pai
p {
white-space: nowrap;
}
text-shadow
adiciona sombreado ao texto → pode haver + de um sombreado (separar por
vírgula)
◦ h-shadow → obrigatório. Posição da sombra horizontal. Pode ser negativo
◦ v-shadow → obrigatório. Posição da sombra vertical. Pode ser negativo
◦ blur-radius → opcional. Borrão (default: 0 não tem)
◦ color → opcional. Cor da sombra
◦ none → default: nenhuma
◦ nitial → valor inicial
◦ inherit → herda do elemento-pai
h1 {
text-shadow: 2px 2px; → sombra com cor padrão (preta)
}
27. h1 {
text-shadow: 2px 2px red; → sombra vermelha
}
h1 {
text-shadow: 2px 2px 5px red; → sombra vermelha com borrão
}
h1 { → sombra com borrão, vermelha e azul neon
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
text-overflow
Define como texto que extrapolar a área de conteúdo será exibido
◦ clip → default: texto cortado e não acessível
◦ ellipsis → elipse é colocada no lugar do texto eliminado
◦ string → uma string é colocada no lugar do texto eliminado (só Firefox)
◦ nitial → valor inicial
◦ inherit → herda do elemento-pai
div {
white-space: nowrap; → não quebra de linha automática → NECESSÁRIO
overflow: hidden; → oculta texto que extrapolar → NECESSÁRIO
text-overflow: ellipsis; /* clip ou ‘ *** ‘ */
}
/* Text-overflow com efeito hover
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible; → exibe texto ao passar mouse
}
Resumo: CSS Text
Propriedade Descrição
color Cor do texto
direction Direção do texto
letter-spacing Espaço entre letras, pode ser negativo
line-height Espaço interlinhas
text-align Alinhamento horizontal
text-
decoration
Tipo, cor e estilo
text-indent Indentação da 1ª linha do texto
text-shadow Adiciona sombreado ao texto
text-transform Controle de maiúsculas e minúsculas
text-overflow Define como texto que extrapolar a área de conteúdo será exibido
28. unicode-bidi
Usado junto com direction. Se o texto deve ser substituído para suportar
vários idiomas no mesmo documento.
vertical-align Alinhamento vertical de um texto / imagem
white-space Controla uso de espaços em branco
word-spacing Espaço entre as palavras, pode ser negativo
CSS Fonts
define a família da fonte, negrito, tamanho e estilo
font-family
uma ou mais famílias de fonte separadas por vírgula → se o browser não suportar
uma fonte, tenta a próxima → começar com a fonte desejada e terminar com a
família genérica
Se o nome da família tiver + de uma palavra, colocar entre aspas
em css há 2 tipos de nome de famílias de fonte
◦ Família Genérica → grupos de famílias de fonte com visual parecido
◦ Família de Fonte → uma família de fonte específica
Família Genérica Família de Fonte Descrição
Serif
Times New Roman
Georgia
Garamond
Fontes serifadas têm pequenas linhas no
final de alguns caracteres
Sans-serif
Arial
Verdana
Helvetica
Fontes não serifadas
Monospace
Courier New
Lucida Console
Monaco
Todos os caracteres possuem a mesma
largura
Cursive
Brush Script MT
Lucida Handwriting
Imita escrita manuscrita
Fantasy
Copperplate
Papyrus
Fonte decorativa
Web Safe Fonts
◦ fontes universalmente instaladas → não existem 100% seguras → sempre usar
fallback (lista de fontes terminando com família genérica) e testar em diversos
navegadores e dispositivos
◦ mais seguras
▪ Serif → Times New Roman, Georgia e Garamond
▪ Sans-serif → Arial, Verdana, Helvetica, Tahoma e Trebuchet MS
▪ Monospace → Courier New
▪ Cursive → Brush Script MT
OBS: em telas de computador Fontes NÂO Serifadas são mais legíveis
/* fontes de 3 parágrafos */
.serif {
font-family: "Times New Roman", Times, serif;
} → outras combinações
29. ◦ Georgia, serif
◦ Garamond, serif
◦ "Palatino Linotype", "Book Antiqua", Palatino, serif
.sansserif {
font-family: Arial, Helvetica, sans-serif;
} → outras combinações
◦ Tahoma, Verdana, sans-serif
◦ "Trebuchet MS", Helvetica, sans-serif
◦ Georgia, Verdana, sans-serif
◦ "Arial Black", Gadget, sans-serif
◦ "Comic Sans MS", cursive, sans-serif
◦ Impact, Charcoal, sans-serif
◦ "Lucida Sans Unicode", "Lucida Grande", sans-serif
◦ Tahoma, Geneva, sans-serif
◦ Verdana, Geneva, sans-serif
.monospace {
font-family: "Lucida Console", Courier, monospace;
} → outras combinações
◦ "Courier New", Courier, monospace
◦ "Lucida Console", Monaco, monospace
.cursive {
font-family: "Brush Script MT", cursive;
}
.fantasy {
font-family: Copperplate, Papyrus, fantasy;
}
OBS: também podem usadas Google Fonts
font-style
valores
◦ normal → default
◦ italic → itálico (fonte já criada inclinada)
◦ oblique → inclinado (fonte normal que foi inclinada de forma automática)
p.estilo {
font-style: normal; * italic ou oblique *
}
font-weight
“peso” de uma fonte (negrito)
◦ normal → default
◦ bold → grossos
◦ bolder → mais grossos
◦ lighter → mais legíveis (igual a normal ?)
◦ 100, 200, 300, 400 (normal), 500, 600, 700 (bold), 800, 900
30. p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
font-variant
define se deve ser usada uma fonte small-caps → todas as letras minúsculas são
convertidas em maiúscula (caixa alta) mas numa fonte de tamanho menor
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
font-size
tamanho da fonte do texto
mesmo um parágrafo podendo ser do mesmo tamanho de algum subtítulo usar as
tags corretas → <p>, <h1>, <h2>, …
o tamanho pode ser
◦ absoluto → não permite que todos os browsers façam ajustes → deve-se saber
o tamanho físico do dispositivo onde será exibido
◦ relativo → tamanho relacionados entre os elementos → o usuário pode mudar o
tamanho através do browser
se não definido o tamanho do <p> = 16px = 1em
em pixels → controle total sobre o tamanho do texto → ainda é possível usar
ferramenta de zoom
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
em em → 1em = 16px → permite que o usuário mude o tamanho pelo browser
h1 { → size = pixel / 16
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
31. Os tamanhos acima são equivalentes → usando em é possível ajustar tamanho em
quase todos os browsers → mas algumas versões antigos do IE têm problemas
Solução para todos os browsers → definir uma font-size default % no <body> e o
restante com em
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
font-size responsiva → usar em vw (viewport width) → o tamanho do texto segue
o tamanho da janela do browser → 1vw = 1% da largura do viewport (largura do
browser) → se largura do viewport = 50cm então 1vw = 0,5cm
<h1 style="font-size:10vw">Hello World</h1>
Google Fonts
ao invés de usar as fontes padrão HTML pode-se usar as centenas (1020) de
fontes do Google através da Google Fonts API
pode-se experimentar várias fontes em
https://www.w3schools.com/howto/howto_google_fonts.asp
adicionar um link stylesheet especificando a família de fonte escolhida
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 22px;
}
</style>
</head>
<body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</body>
</html>
para usar múltiplas fontes do Google separar por pipe (“|”) → pode deixar site lento
32. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|
Sofia|Trirong">
Regras de pareamento de fontes
Complementar → as fontes devem se harmonizar sem ser diferente ou similar
demais
Usar Superfamílias de Fontes (criadas para se harmonizar) → Ex: superfamília
Lucida: Lucida Sans, Lucida Serif, Lucida Typewriter Sans, Lucida Typewriter Serif
and Lucida Math
Contraste na dose certa → uma boa superfamília deve incluir fontes Serif e
SansSerif → Ex: Lucida e Lucida Sans
Escolha apenas uma chefe → isso cria uma hierarquia na página. Isso é feito
variando size, weight e color
Ex de bom pareamento e com fontes seguras
◦ Georgia nos cabaçalhos e Verdana no texto
◦ Helvetica nos cabaçalhos e Garamond no texto
Font
Shorthand para
◦ font-style (obrigatório)
◦ font-variant
◦ font-weight
◦ font-size/line-height
◦ font-family (obrigatório)
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic small-caps bold 12px/30px Georgia, serif;
}
Resumo: CSS Font
Propriedade Descrição
font Seta tudo numa declaração
font-family Família da fonte
font-size Tamanho
font-style Estilo (itálico)
font-variant Define se deve ser usada uma fonte small-caps
font-weight “Peso” de uma fonte (negrito)
33. CSS Icons
Modo + simples de incluir ícones numa pag HTML → biblioteca de ícones
◦ imagens vetoriais que podem ser customizadas via CSS (size, color, shadow,
etc.)
◦ a classe css do ícone deve ser adicionada a qualquer elemento HTML inline
(por ex, <i> ou <span>)
ícones Font Awesome
◦ versão 5 → PRO (7842 ícones) e FREE (1588 ícones)
◦ 2 formas de usar:
▪ vá em fontawesome.com, cadastra-se e obtenha um código (KIT CODE ) p/
adicionar na seção <head> da pagina
<script src="https://kit.fontawesome.com/yourcode.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<i class="fas fa-clock"></i> → exibe um relógio
</body>
</html>
▪ download das fontes → como usar ???
◦ prefixos
▪ fas → ícone sólido.
▪ far → ícone regular
<i class="fas fa-clock"></i> → relógio sólido
<i class="far fa-clock"></i> → relógio vazado
◦ aplicando estilo
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
◦ classes de tamanho → fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x,
fa-8x, fa-9x, or fa-10x
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
◦ lista de ícones → classes fa-ul e fa-li em listas não ordenadas
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
35. <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
CSS Links
links podem ser estilizados c/ qualquer propriedade CSS (Ex: color, font-family,
background, etc)
a {
color: hotpink; → link sempre rosa
}
estilizado diferentemente dependendo dos seus 4 estados:
◦ a:link → normal, não visitado
◦ a:visited → já visitado
◦ a:hover → com mouse sobre ele
◦ a:active → no momento em que é clicado
OBS: se + de um definido, ordem obrigatória:
1 a.link ou a.visited
2 a.hover
3 a.active
a:link {
color: red; → ainda não visitado = vermelho
}
a:visited {
color: green; → já visitado = verde
}
a:hover {
color: hotpink; → mouse sobre = rosa
}
a:active {
color: blue; → ao se clicado = azul
}
propriedade text-decoration → geralmente p/ remover sublinhado
36. a:link, a:visited {
text-decoration: none; → não sublinhado
}
a:hover, a:active {
text-decoration: underline; → sublinhado
}
propriedade background-color → cor de fundo do link
a:hover {
background-color: lightgreen;
}
* Link Buttom: simular um botão com um link
a:link, a:visited { → botão
background-color: #f44336; → fundo vermelho escuro
color: white; → texto branco
padding: 14px 25px; → margem interna texto
text-align: center; → texto centralizado
text-decoration: none; → não sublinhado
display: inline-block; → ver CSS Display abaixo
}
a:hover, a:active { → demais propriedades se mantém como acima
background-color: red; → fundo vermelho vivo
}
Exemplos diversos:
a.one:link {color: #ff0000;}
a.one:hover {color: #ffcc00;} → muda cor de azul p/ amarelo
a.two:link {color: #ff0000;}
a.two:hover {font-size: 150%;} → aumenta tamanho da fonte
a.three:link {color: #ff0000;}
a.three:hover {background: #66ff66;} → muda cor de fundo de branco p/ verde
a.four:link {color: #ff0000;}
a.four:hover {font-family: monospace;} → muda família da fonte
a.five:link {color: #ff0000; text-decoration: none;}
a.five:hover {text-decoration: underline;} → sublinhado apenas quando mouse sobre
Exemplo Link Buttom
a:link, a:visited { botão c/ fundo branco, borda verde, texto preto centralizado
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
37. text-align: center;
text-decoration: none; → sem sublinhado
display: inline-block;
}
a:hover, a:active { → ao passar o mouse fica com fundo verde e texto branco
background-color: green;
color: white;
}
Mudança de cursor do mouse
a.five:hover { → ao passar mouse link sublinhado e c/ cursor em Cruz
text-decoration:underline;
cursor: crosshair;
}
Obs: Abaixo tem diferentes cursores do mouse. Nestes exemplos ao passar o mouse
sobre a palavra → também pode ser usado p/ links
<span style="cursor: auto">Automático (Texto)</span><br>
<span style="cursor: crosshair">Cruz</span><br>
<span style="cursor: default">Default (Seta)</span><br>
<span style="cursor: e-resize">Redimensionar Horizontal</span><br>
<span style="cursor: help">Help (Seta c/ Interrogação)</span><br>
<span style="cursor: move">Mover (4 setas em cruz)</span><br>
<span style="cursor: n-resize">Redimensionar Vertical</span><br>
<span style="cursor: ne-resize">Redimensionar csd-cie</span><br>
<span style="cursor: nw-resize">Redimensionar cse-cid</span><br>
<span style="cursor: pointer">Mãozinha</span><br>
<span style="cursor: progress">Seta c/ Circulo processando</span><br>
<span style="cursor: s-resize">Redimensionar Vertical</span><br>
<span style="cursor: se-resize">Redimensionar cse-cid</span><br>
<span style="cursor: sw-resize">Redimensionar csd-cie</span><br>
<span style="cursor: text">Texto</span><br>
<span style="cursor: w-resize">Redimensionar Horizontal</span><br>
<span style="cursor: wait">Circulo processando </span>
CSS Lists
em HTML há 2 tipos principais de lista
◦ <ul> = Unordered Lists lista não ordenada (marcada com símbolos)
◦ <ol> = Ordered Lists → lista ordenada (marcada com números ou letras)
para ambas os itens são <li> = List Item
tipo de marcador da lista → list-style-type
ul.a { → lista não ordenada
list-style-type: circle; → circulo vazado
}
38. ul.b { → lista não ordenada
list-style-type: square; → quadrados maciços
}
ol.c { → lista ordenada
list-style-type: upper-roman; → algarismos romanos maiúsculos (I, II, III, IV, ...)
}
ol.d { → lista ordenada
list-style-type: lower-alpha; → letras minúculas (a, b, c, ...)
}
definir uma imagem como marcador → list-style-image
ul {
list-style-image: url('sqpurple.gif');
}
posição do marcador → list-style-position
◦ outside = o marcador fica fora do item da lista → default
item 111
descrição 111
item 222
descrição 222
◦ inside = o marcador fica dentro fazendo parte do item da lista. A margem não é
removida
item 111
descrição 111
item 222
descrição 222
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
remover configurações default: remove os marcadores mas mantém as margens
interna (padding) e externa (margin) → list-style-type:none
ul {
list-style-type: none → remove marcadores
margin: 0; → remove margem externa
padding: 0; → remove margem interna
}
CSS Lists Shorthand → list-style
◦ as propriedades podem ser especificadas em uma única linha
◦ engloba as seguintes e na seguinte ordem
▪ list-style-type → se também for especificada list-style-image é exibida se a
imagem desta não puder ser exibida
▪ list-style-position
▪ list-style-image
39. ul {
list-style: square inside url("sqpurple.gif");
}
colorindo uma lista
◦ se adicionado a <ol> ou <ul> → aplicado a toda a lista
◦ se adicionado a <li> → aplicado aos itens da lista
ol { → lista ordenada com fundo rosa escuro e margem interna dos itens de 20px
background: #ff9999;
padding: 20px;
}
ul { → lista não ordenada com fundo azul escuro e margem interna dos itens de 20px
background: #3399ff;
padding: 20px;
}
ol li { → na <ol> acima
background: #ffe5e5; → cor fundo itens rosa claro
padding: 5px; → distãncia vertical entre os itens → rosa claro
margin-left: 35px; → margem antes dos números da lista → rosa escuro
}
ul li { → na <ul> acima
background: #cce5ff; → cor fundo azul claro
margin: 5px; → distância vertical entre os itens → azul escuro
}
Ex: margem com borda vernelha
ul {
border-left: 5px solid red;
background-color: #f1f1f1;
list-style-type: none;
padding: 10px 20px;
}
Resumo: CSS List
Propriedade Descrição
list-style Seta tudo numa declaração
list-style-image Define uma imagem como marcador
list-style-position Posição do marcador
List-style-type Tipo de marcador da lista
CSS Tables
40. os elementos HTML de uma tabela são:
◦ <table> → a tabela inteira
◦ <tr> → linha
◦ <th> → célula de cabeçalho
◦ <td> → célula de dados
Exemplo: tabela clientes c/ 2 colunas, 1 linha de cabeçalho e 2 linhas de dados
<table id="clientes">
<tr> <th>Empresa</th> <th>Contato</th> </tr>
<tr> <td>Azul Aviação</td> <td>Maria Silva</td> </tr>
<tr> <td>Petrobras</td> <td>Christina</td> </tr>
</table>
#clientes { → formatação geral da tabela → # referencia o id de um elemento
font-family: Arial, Helvetica, sans-serif; → fonte
border-collapse: collapse; → remove bordas duplicadas
width: 100%; → ocupa todo o espaço disponível
}
#clientes td, #clientes th { → células de dados e de cabeçalho
border: 1px solid #ddd; → borda
padding: 8px; → margem interna (sup / inf / esq / dir)
}
#clientes tr:nth-child(even){background-color: gray;} → linhas par em cinza
#clientes tr:hover {background-color: #ddd;} → ao passar mouse linha fica cinza claro
#clientes th { → celulas do cabaçalho
padding-top: 12px; → margem interna superior
padding-bottom: 12px; → margem interna inferior
text-align: left; → texto alinhado à esquerda
background-color: #4CAF50; → fundo verde
color: white; → letra branca
}
BORDAS
borda da tabela→ border
table, th, td { → externa, celulas cabeçalho e de dados
border: 1px solid black;
} → borda preta (fica uma borda dobrada)
remover borda dobrada→ border-collapse
table {
border-collapse: collapse;
}
TAMANHO → width e height
41. tabela que ocupa toda a largura disponível e altura do cabeçalho de 70px
table {
width: 100%; → largura total → p/ metade= 50%
}
th {
height: 70px;
}
ALINHAMENTO
horizontal → text-align = left, right, ou center
Obs: default cabeçaçlho <th> = center e dados <td> = left
td {
text-align: center; → centraliza celulas dados
}
th {
text-align: left; → cabeçalho à esquerda
}
vertical → vertical-align = top, bottom, ou middle
Obs: default cabeçaçlho <th> e dados <td> = middle
td {
height: 50px;
vertical-align: bottom; → dados alinhamento inferior
}
ESTILIZANDO
margem interna (espaço entre borda e conteúdo da célula → padding
th, td {
padding: 15px; → margem intena
text-align: left; → texto à esquerda
}
separação apenas com linhas horizontais → border-bottom
th, td {
border-bottom: 1px solid #ddd;
}
linha colorida ao passar o mouse → tr:hover
tr:hover {
background-color: #f5f5f5; → cinza claro
}
42. linhas zebradas → tr:nth-child
tr:nth-child(even) { → apenas linhas pares → odd p/. ímpares
background-color: #f2f2f2; → cinza claro
}
tabelas coloridas
th { → cabeçalho c/ fundo verde e texto branco
background-color: #4CAF50;
color: white;
}
tabela com caption abaixo da tabela e alinhado à direita
<table>
<caption>Tabela 1.1 Clientes</caption> → tem que ser colocado logo após <table>
<tr> …… </tr>
</table>
caption { → por default o texto fica centralizado e acima da tabela
caption-side: bottom; → posiciona abaixo da tabela
text-align: right; → alinha texto à direita
}
RESPONSIVA
cria uma barra de scroll horizontal se não couber na tela
<div style="overflow-x:auto;"> → qualquer container não apenas <div>
<table>
... table content ...
</table>
</div>
Resumo: CSS Table
Propriedade Descrição
border Seta toda borda numa declaração
border-
collapse
Unifica ou não as bordas (separate* ou collapse)
border-
spacing
Disttância entre as bordas das células adjacentes
caption-side Localização do caption (top* ou bottom)
empty-cells
Define se exibe ou não bordas e cor de funto para células vazias (hide ou
show*)
table-layout Sea algoritmo usado na tabela (auto ou fixed)
43. CSS Layout → display:e visibility
display
◦ define se um elemento é ou não exibido
◦ todo elemento HTML possui essa propriedade
◦ Existem 2 tipos de elementos HTML:
▪ block-level
sempre inicia uma nova linha e ocupa toda a largura disponível à
esquerda e á direita
default → display: block;
Ex: <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
▪ inline
não inicia uma nova linha e ocupa apenas a largura necessária
default → display: inline; → setar height e width não tem efeito
Ex: <span>, <a>, <img>
◦ Display: none
▪ usado junto com JavaScript p/ ocultar / exibir elementos sem deletá-los /
recriá-los
▪ default p/ elemento <script>
◦ Display: inline-block → igual a inline mas permite setar height e width
◦ existem muitos outros valores p/ Display → principais (none, inline, block e
inline-block)
◦ override da propriedade Display
▪ altera como o elemento é exibido mas não altera a categoria do elemento.
Por ex, um elemento inline com a display: block;não pode ter elementos
block dentro dele
▪ útil p/ criar visuais específicos mas dentro dos padrões web
▪ Ex: criação de elementos inline <li> p/ menus horizontais
li {
display: inline;
}
▪ Ex: <span> e <a> como elementos block
span {
display: block;
}
a {
display: block;
}
◦ p/ ocultar um elemento
▪ display:none → oculta o elemento e é como se fosse removido da página
(não ocupa espaço)
h1.hidden {
display: none;
}
◦ outaos valores p/ display
◦
▪ visibility:hidden→ oculta o elemento mas ele continua ocupando seu espaço
h1.hidden {
visibility: hidden;
}
44. Resumo: propriedades Display x Visibility
Propriedade Descrição
display Como o elemento será exibido
visibility
Quando um elemento será exibido /
ocultado
CSS Layout → width, max-width e margin: auto
em elementos block-level como <div> → default ocupar largura total disponível p/
esq e dir
◦ setando width → evita expandir fora dos limites do container
◦ margin: auto → centraliza horizontalmente dentro do container → respeita a
largura definida em width e o espaço restante é dividido igualmente em ambas
as margens → PROBLEMA: se a janela do browser for menor que a width
definida gera um scroolbar horizontal
◦ para evitar esse PROBLEMA → setar max-width: em janelas pequenas (como
no celular) acomoda p/ baixo e não cria scroolbar
div.ex1 {
width: 500px; → cria scroolbar horizontal se janela menor que width
margin: auto; → centraliza
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px; → corrige problema
margin: auto; → centraliza
border: 3px solid #73AD21;
}
CSS Layout → position
define o tipo de posicionamento a ser aplicado ao elementos
◦ static → default
◦ relative
◦ fixed
◦ absolute
◦ sticky
demais propriedades de posicionamento (top, bottom, left e right) dependem de
antes setar position
position: static
◦ elemento não afetado por top, bottom, left e right → sempre posicionado
segundo o fluxo normal da página
div.static {
position: static;
border: 3px solid #73AD21;
45. top: 100px; → não afeta nada (e nem deve ser usado p/ não confundir)
}
position: relative
◦ elemento é posicionado em relação a sua posição normal (“cursor atual” na
tela) → o espaço deixado pelo elemento não é ocupado pelos demais
div.relative {
position: relative;
left: 30px;
top: 50px;
border: 3px solid #73AD21;
}
position: fixed
◦ elemento se mantém posicionado sempre em relação ao viewport (parte visível
da janela do navegador) → se mantém sempre no mesmo lugar mesmo que a
tela seja rolada (scroolled) ou redimensionada→ fica parado na mesma
posição flutuando
div.fixed { → <div> fica flutuando no canto inferior direito do browser
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
position: absolute
◦ posição em relação ao elemento-pai “posicionado” (c/ position <> fixed) do
atual, se não houver, em relação a <body>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute { → no HTML esta <div> está aninhada dentro da anterior
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
position: sticky
◦ pociciona inicialmente = relative enquanto o rolar (scroll) da tela não tenta
ocultá-lo. Nesse momento mantém fixo (= fixed)
div.sticky {
position: -webkit-sticky; /* exigido pelo Safari, não funciona do IE */
position: sticky;
top: 0; → fica fixo no topo ao tentar rolar p/ cima
background-color: green;
46. border: 2px solid #4CAF50;
}
sobrepondo elementos (Overlapping)
◦ um elemento pode sobrepor outro
◦ propriedade z-index define a ordem de sobreposição → geralmente p/ colocar
no backgroup setar p/ z-index → p/ colar um terceiro elemento atrás desse
setar z-index = -2
◦ se não definido o z-index, os elementos definidos primeiro são sobrepostos
pelos definidos depois
h1 { → titulo cinza e não definiu z-index
color: grey;
}
img {
position: absolute; → em relação à janela
left: 0px; → cse
top: 0px;
z-index: -1; → atrás do título
}
p.fundo { . → quadrado verde no fundão
background-color: green;
padding: 50px 200px;
position: absolute;
left: 0px;
top: 0px;
z-index: -2; → atrás da imagem
}
sobrepondo e alinhando um texto sobre uma imagem
◦ colocar todos os elementos num container → <div>
◦ esmaecer a imagem
◦ posicionar o texto
.container { → qualquer elemento container
position: relative; → elementos aninhados tem o mesmo “topo” (cse)
}
.topleft { → no topo e à esquerda
position: absolute;
top: 8px;
left: 16px;
font-size: 18px;
}
.topright { → no topo e à direita
position: absolute;
top: 8px;
right: 16px;
font-size: 18px;
}
.bottomleft { → inferior e à esquerda
position: absolute;
bottom: 8px;
left: 16px;
47. font-size: 18px;
}
.bottomright { → inferior e à direita
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
img {
width: 100%;
height: auto;
opacity: 0.3; → permite que o texto seja visto
}
cortando uma parte de uma imagem
img {
position: absolute;
clip: rect(0px,60px,200px,0px); → remove um retângulo da imagem
}
Resumo: propriedades de posicionamento
Propriedade Descrição
bottom Margem inferior do box
clip Corta um elemento c/ position = absolute
left Margem esquerda do box
position Define o tipo de posicionamento do elemento
right Margem direita do box
top Margem superior do box
z-index Nível de sobreposição (negativo = p/ trás e positivo = p/ frente)
CSS Layout → Overflow
controla o que acontece com um conteúdo (texto) que é muito grande p/ caber
numa área definida
só funciona para elementos block com height (altura) definida
4 opções:
◦ visible (default) o excedente não é truncado e é exibido extrapolando
◦ hidden: o excedente é truncado
◦ scroll : o excedente é truncado mas pode ser visto rolando o scrollbar (sempre
são exibidos os scrollbar horizontal e vertical mesmo que não necessários)
◦ auto: similar a scroll mas os scrollbar só são exibidos se necessário
div {
width: 200px;
height: 50px;
background-color: #eee;
48. overflow: visible;
}
overflow-x and overflow-y → define como será o overflow apenas horizontal (x) ou
vertical (y)
div {
overflow-x: hidden; → esconde scrollbar horizontal
overflow-y: scroll; → exibe scrollbar vertical perrmanente
}
Resumo: propriedades de Overflow
Propriedade Descrição
overflow Define o que ocorre com texto que extrapola elemento
overflow-x Idem mas apenas na horizontal
overflow-y Idem mas apenas na vertical
CSS Layout → float e clear
float
◦ define como um elemento deve se posicionar em relação ao restante do
conteúdo
◦ usado p/ posicionar texto ao redor de uma imagem
◦ 4 opções:
▪ left: elemento flutua à esquerda do seu container
▪ right : idem, à direita
▪ none (default):- elemento não flutua. Apenas aparece na sua posição
normal junto do texto
▪ inherit : herda do elemento pai
img {
float: right;
width:170px;
height:170px;
margin-left:15px;"
}
<p><img src="abacaxi.jpg" alt="Abacaxi" >
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaa </p>
posicionar lista de elementos um ao lado do outro → usar float: left em todos eles
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
49. .div2 {
background: yellow;
}
.div3 {
background: green;
}
→ 3 quadrados enfileirados horizontalmente: vermelho, amarelo e verde
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
clear
◦ define que uma posição de float não deve ocorrer
◦ geralmente desfaz um float feito anteriormente
◦ 5 opções:
▪ none (default): permite float de ambos os lados
▪ left: não permite float à esquerda
▪ right: não permite float à direita
▪ both: não permite float
▪ inherit : herda do elemento pai
https://www.w3schools.com/css/css_float_clear.asp