Senior Front End @ Arezzo&Co - fit.faccat.brfpereira/pagina/autoria/css3.pdf · “O Cascading Style Sheets (CSS) ... XML, HTML e XHTML e etc..).” ... formatação a vários elementos

11

[email protected]

Daniel Röhers MouraSenior Front End @ Arezzo&Co

2

3

CSSCascading Style Sheet

4

O que é?“O Cascading Style Sheets (CSS) é uma linguagem utilizada para definir a apresentação (aparência) de d o c u m e n t o s q u e a d o t a m p a r a o s e u desenvolvimento linguagens de marcação (como XML, HTML e XHTML e etc..).”

http://tableless.github.io/iniciantes/manual/css

5

Algumas vantagens…

• Separação HTML -> Estilo

• Reaproveitamento de estilo (código)

• Animações e muito mais

6

Onde se aplica

• Tags HTML

• ID’s

• Classes

7

#id vs

.class8

http://goo.gl/TIxYkP

ID

9

“As ids são uma forma de identificar um elemento, e devem ser únicas.”

Class

“As classes são uma forma de identificar um grupo de elementos. Através delas, pode-se atribuir formatação a vários elementos de uma vez.”

10

Sintaxe

seletor {

propriedade: valor;

}

11

…exemplo

h1 {

font-size: 20px;

}

12

Mas como iniciar?

13

index.html style.css

Exemplo básico

14

Efeito cascata / especificidadeindex.html style.css

15

Agrupamento de seletores

16

Seletor Classe/ID

17

Comentário

18

Box Model

19

http://goo.gl/Ea5fcD20

MAUJORO dinossauro das CSS

http://maujor.com21

http://css-tricks.com22

http://w3schools.com23

http://css-weekly.com24

25

Media Queries

26

BEM Block Element Modifier

https://goo.gl/lrNsnE http://getbem.com

.block

.block__element

.block__element—modifier

27

Frameworks“Framework é um conjunto de componentes que provêm uma estrutura básica de elementos reutilizáveis, tendo uma arquitetura consistente de funcionalidade genérica sob a qual a aplicação será construída.”

http://tableless.com.br/quando-utilizar-ou-nao-frameworks-css

28

29

https://goo.gl/WE3qbr

Vamos codar?Não… Prototipar ;)

30

https://wireframe.cc31

Protótipo pronto=

codar

32

Obrigado :)

33

@danielrohers