Resumo CSS – w3schools.pdf

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

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

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

<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

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

linhas
*/
Obs comentários HTML  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

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)

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 {
}
h1 {
background-color: green;
}
div {
}
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 {
opacity: 0.3;
}

 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-position: right top; → posiciona a imagem no canto superior direito
} → neste caso evitou atrapalhar o texto que estava por cima

CSS Background Attachment
 define se ao rolar a tela a imagem de fundo rolará junto ou não
body {
background-position: right top;
background-attachment: fixed; → não rola (fica fixa)
}
body {
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;
}
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 (***)

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-width: medium;

}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-width: thick;
}
p.one {
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
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-color: green;
}
p.three { → pontilhada azul (sup e inf) e nada (esq e dir)
border-color: blue transparent;
}
p.one { → sólida de 4 cores (sup, dir, inf e esq)
border-color: red green blue yellow;
}
p.one {
border-color: #ff0000; → vermelho em Hexadecimal
}
p.one {
border-color: rgb(255, 0, 0); → vermelho em RGB
}
p.one {

border-color: hsl(0, 100%, 50%); → vermelho em HSL
}
p.four {
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

CSS Rounded Borders
 bordas arredondadas (border-radius)
 é setada a parte → não incluída em border (não Shorthand)
p {
border-radius: 5px; → leve arredondado → 12px (bastante)
}
Resumo: CSS Border
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

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;
}
valor Inherit
 herda a margem do elemento-pai
div {
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

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
◦ % → % da largura do elemento
 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;

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)
◦ % → % 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
}
max-width
 largura máxima do elemento → sobrepõe width
 valores
◦ % → % 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)
}
div {
height: 200px;
max-width: 50%; → funciona igual a width 50%

}
min-width
div {
height: 100px;
min-width: 500px; → se largura browser menor = barra de rolagem horizontal
→ se maior = assume largura total do container
}
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
}
div {
max-width: 400px;
min-width: 300px; → se largura browser menor = barra de rolagem horizontal
→ se maior = assume largura max-width sempre
}
max-height e min-height
div {
height: 100px; → ocupa toda altura disponível
width: 500px;
}
div {
max-height: 100px; → ocupa apenas altura necessária
width: 500px;
}
OBS: ambos geram barra rolagem vertical se reduzidos
Resumo: CSS Dimension
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

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)

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

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

 espaço transparente entre a outline e a borda
p {
margin: 30px;
background: yellow;
outline: 1px solid red;
outline-offset: 15px;
}
Resumo: CSS Outline
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;
}

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
 unicode-bidi → ??? → usar junto com direction
p {
direction: rtl;

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
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
◦ text-decoration-style → estilo
▪ solid → default: linha simples
▪ double → linha dupla
▪ dotted → linha pontilhada
▪ dashed → linha tracejada
▪ wavy → linha ondulada
h1 {
text-decoration: underline overline wavy; → ondulado em cima e em baixo (sublinhado)
}
h2 {
text-decoration: line-through blue; → riscado azul

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

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
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
h1 {
text-shadow: 2px 2px; → sombra com cor padrão (preta)
}

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

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

◦ Georgia, serif
◦ Garamond, serif
◦ "Palatino Linotype", "Book Antiqua", Palatino, serif
.sansserif {
font-family: Arial, Helvetica, sans-serif;
◦ 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;
◦ "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

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 */
}

 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

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>

<li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>
◦ ícones animados → classes fa-spin (rotação) e fa-pulse (rotação em 8 passos)
→ IE8 e 9 não suportam animações CSS3
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
◦ rotação (fa-rotate-*) e invertidos (fa-flip-*)
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
◦ empilhamentos de ícones (sobrepor ícones)
<span class="fa-stack fa-lg"> → icone do twitter sobre um círculo sólido
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
◦ ícones com largura fixa (bom para alinhamento) → classe fa-fw
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>
 ícones Bootstrap (Bootstrap glyphicons)
◦ adicionar na seção <header>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
 ícones Google
◦ adicionar na seção <header>

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

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;

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

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

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

 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
} → borda preta (fica uma borda dobrada)
 remover borda dobrada→ border-collapse
table {
border-collapse: collapse;
}
TAMANHO → width e height

 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
}

 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
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)

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;
}

Resumo: propriedades Display x Visibility
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
}
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;

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;
}
 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;
}
 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;
}
div.absolute { → no HTML esta <div> está aninhada dentro da anterior
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
}
 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

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

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

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
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;
}

.div2 {
background: yellow;
}
.div3 {
background: green;
}
→ 3 quadrados enfileirados horizontalmente: vermelho, amarelo e verde
<div class="div1">Div 1</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

xxxxxxxxxxxxxxxxxxxxxxx
HTML5 - w3schools
(https://www.w3schools.com/html/default.asp)

Resumo CSS – w3schools.pdf

Recomendados

Mais conteúdo relacionado

Mais procurados (7)

Semelhante a Resumo CSS – w3schools.pdf (20)

Resumo CSS – w3schools.pdf