O que você precisa saber sobre CSS

CSS
O que você precisa saber
Copyright © 2017
Fábio Nogueira de Lucena
Instituto de Informática (UFG)

Conteúdo (1/2)
1. Introdução: definição e referências
2. Sintaxe
3. Onde depositar conteúdo em CSS?
4. Seletor
5. Documento HTML é uma árvore
6. O que faço com CSS?
7. <span> é um elemento que não possui estilo senão via CSS
8. Como “limpar” a formatação padrão?

Conteúdo (2/2)
12.float
13.Botões
14.Mais seletores
15.Portal responsivo?
16.Boas práticas para escrever regras em CSS
17.Layout
18.Font-family
19.Cores e gradientes

Introdução:
definição e
referências

O que é CSS?
● CSS é acrônimo de
Cascading Style Sheet = “folhas de estilo”
● CSS permite remover formatação de uma página HTML
CSS define como exibir
elementos HTML

CSS (exemplo)
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 1em 40px; }
hr { box-sizing: content-box; height: 0; }
pre { overflow: auto; }
Conjunto de regras
(rule set)

CSS (alvo móvel)
-webkit, -mox, -o, ...

Sintaxe (seletor seguido por declarações)
● seletor
O elemento que receberá o estilo, o que está sendo formatado “lá” no documento
HTML
● propriedade : valor ;
Todas as declarações em CSS terminam em ;
Cada declaração estabelece como formatar uma característica de um elemento.
seletor { propriedade : valor ; }

Exemplo
seletor { propriedade : valor ; }
h1 { color : gray ; }
Declaração

Onde depositar
conteúdo em
CSS?

Há três “locais” de uso de CSS
1. Depositar o código em CSS em arquivos externos
aos documentos HTML
2. Depositar código em CSS no próprio documento
HTML
a. Usando <style> para todo o documento.
b. Específico por elemento por meio da propriedade style.
(não recomendada)

Arquivo externo, <style> e propriedade “style”

Seletor
(identifica elemento
que recebe o estilo)

Seletores mais comuns
● Nome de um elemento
p { color : green; }
(todos os parágrafos em verde)
● Identificador único
#nomeUnico { color : blue; }
(elemento cujo id tem como valor nomeUnico)
● Classe
.classe { color : red; }
(elementos cujo atributo class tem como valor classe)
● Classe para determinado elemento

Todo p descendente direto de div

p, div > p e div > div > p são diferentes

Simples variação do caso anterior

p descendente de div descendente de div ou
div ancestral de div que é ancestral de p
Maiúsculas e
Minúsculas não fazem
diferença, mas siga
um padrão.

Um documento HTML é uma "árvore"

Document Object Model (visão geral)

Document Object Model (DOM)
(API para acesso e manipulação de HTML)

Tabela formatada (table)
table { width: 100%; }
faz com que tabela ocupe toda a extensão da janela

Tabela (table) (primeira coluna ocupa 65%)
Tabela ocupa 90% da janela e a primeira coluna
ocupa 65% da tabela

Tabela (table) (agora com header)
Agora a primeira linha (tr) contém elementos th
(indica header em vez de dados).

Tabela (table) (agora com header)
O valor da segunda linha foi removido (td), valor repetido,
e na primeira linha é indicado quantos linhas farão parte da “união”

<span> é um
elemento que não
possui estilo
senão via CSS

span agrupa ou relaciona elementos

Como limpar a
formatação
padrão?

Ordem de
prioridade entre
regras
“conflitantes”

Regra prática
● !important
● Inline
● ID
● Classe ou pseudo-classe
● Elemento
● Seletor universal (*)

Qual o impacto das regras abaixo?
* {
color: blue !important;
}
#vermelho {
color: red;
}
<span style=”color:red;” id=”vermelho”>Um teste</span>

style (inline) e #x “perdem” para !important

Qual a cor do texto “TESTE”?

E agora, com a inserção de “id”?

Elementos do box model
● Elementos possuem uma largura (width) e altura (height) ou “caixa” na qual está
inserido.
● Ao redor desta caixa há um espaço chamado de preenchimento (padding). Este
espaço não possui “background” próprio.
● Ao redor do preenchimento (padding) há uma borda (border).
● Ao redor da borda (border) há uma margem (margin).
● Por último, ao redor da borda (border) há um contorno (outline).

Elementos do modelo de caixa ilustrados

Com preenchimento
Caixa com preenchimento torna-se maior.
Observe espaço entre o C o canto
superior esquerdo.

box-sizing: border-box;
Caixa com preenchimento mas mesmo tamanho
Observe espaço entre o b o canto superior
esquerdo.

Chrome DevTools
padding: 10px;
e a ilustração correspondente
na direita.

Chrome DevTools
padding: 30px 5px;
Superior e inferir com 30px e
esquerda/direita com 5px.

Bordas de cores, tipos e espessuras distintos

Margem
Margens superior/inferior: 10px
Esquerda/direita: 20px;
Padding superior/inferior: 30px;
Padding laterais: 5px

A propriedade mais importante: "display"
● Todo elemento possui um valor padrão para display.
● h1 e footer, por exemplo, o valor é block.
● a e span, por outro lado, o valor padrão é inline.
● block
○ Inicia uma nova linha
○ Ocupa todo o espaço disponível à esquerda e à direita.
● inline
○ Não altera o fluxo de posição dos elementos.

block (nova linha, todo o espaço)

p (estende-se por toda a largura)
span (apenas para acomodar o conteúdo)

script por padrão é none
(que pode ser alterado)

Imagem, título, texto e link (repetidos)
Queremos o título ao redor da bola.
A bola permanece na esquerda.

Imagem, título, texto e link (repetidos)
Queremos o título ao redor da bola.
A bola permanece na esquerda.
img {
float:left;
width: 50px;
}

Conteúdo centralizado (parte de toda página)
Conteúdo atual é
<body>
<div>...</div><div>...</div>
</body>
<div class=”wrapper”>
<div>...</div><div>...</div>
</div>
CSS
.wrapper { width: 90%; margin: 0 auto; }

Conteúdo em duas colunas
Conteúdo atual é
<div class=”col”>...</div>
</div>
CSS
.col { float: left; width: 40%; }

Conteúdo em X colunas (tamanho fixo)
Conteúdo atual é
</div>
CSS
.col { float: left; width: 300px; }

Float
Cria um problema
(sem altura, no height)

Queremos margem antes e após as colunas
Conteúdo atual é
</div>
CSS
.wrapper { width: 90%; margin: 0 auto;
margin-top: 50px; margin-bottom: 50px;}
div da classe wrapper não possui
altura. Margem superior e inferior
estão unidas.

Estratégia preferida por especialistas
<div class=”wrapper grouping”>
</div>
CSS
.grouping::after, .grouping::before {
content:” “; display:table; }
.grouping::after { clear:both; }
.wrapper { width: 90%; margin: 0 auto;
margin-top: 50px; margin-bottom: 50px;}
Margin superior e inferior agora
devidamente consideradas.

Alterando apresentação quando sob o mouse

Apresentação diferente conforme botão

Transição das cores é instantânea
Como suavizar?
Acrescente ao seletor .botao conforme abaixo, a estratégia de consumir .25s, de forma
linear, para alterar todas as propriedades do elemento em questão.
transition: .25s all linear;

Ampliar o tamanho do botão sob o mouse?
transform: scale(1.1, 1.1);
Amplia o botão em 10% no eixo X
e outros 10% no eixo Y.

Mouse “sobre” elemento :hover

nth-child(odd) ímpares
nth-child(even) pares

O que precede e sucede um elemento

Exemplo de portal não responsivo?
http://cursohtml.top
(no iPhone 6)

Um portal mais responsivo
https://kyriosdata.github.io/id/

Meta
<meta name="viewport"
content="width=device-width, initial-scale=1.0,
minimum-scale=1.0">
O browser não tentará “diminuir” ou “reduzir” as dimensões
proporcionalmente para acomodar a página na tela do
dispositivo.

Padrões e outros
recursos para obter
“responsividade”

Boas práticas para
escrever regras em CSS

Qual a motivação para o BEM?
De acordo com https://goo.gl/WE7i5o
O portal trulia.com possuía:
● > 16.000 regras
● 3920 propriedades “color”
● 4888 propriedades “background”, ...

Seguindo
“boas”
práticas?

Como
centralizar?
E na vertical?

Google Fonts
@font-face
(para profissionais)

Gerador de
gradiente
/* Permalink - use to edit and share this gradient:
http://colorzilla.com/gradient-
editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue
+Gloss+Default */
background: rgb(30,87,153); /* Old browsers */
background: -moz-linear-gradient(top, rgba(30,87,153,1)
0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%,
rgba(125,185,232,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(30,87,153,1)
0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1)
51%,rgba(125,185,232,1) 100%); /* Chrome10-25,Safari5.1-
6 */
background: linear-gradient(to bottom, rgba(30,87,153,1)
0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1)
51%,rgba(125,185,232,1) 100%); /* W3C, IE10+, FF16+,
Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient(
startColorstr='#1e5799',
endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Ferramentas
https://goo.gl/LvuMZJ

Ferramentas
https://goo.gl/dZn3iE

Ferramentas
https://coolors.co/

Font Awesome (exemplo de uso)
O último fica
“girando”

Unsplash
(fotos de
qualidade
gratuitas,
inclusive
para uso
comercial)

Métodos de design
● Algumas questões básicas de design em 4 minutos
● Mobile first
● Um exemplo completo (web design)
● UX (uma infinidade de métodos)
● Métodos mais comuns

Observe e ambiente-se com os exemplos

O que você precisa saber sobre CSS

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie O que você precisa saber sobre CSS

Ähnlich wie O que você precisa saber sobre CSS (20)

Mehr von Fábio Nogueira de Lucena

Mehr von Fábio Nogueira de Lucena (20)

O que você precisa saber sobre CSS