CSS - introdução - Speaker Deck

Slide 1

Slide 1 text

@omadson

Slide 2

Slide 2 text

Introdução CSS - @omadson 2

Slide 3

Slide 3 text

• Uma folha de estilos é um conjunto de regras que informa a um programa, responsável pela formatação de um documento, como organizar a página, como posicionar e expor o texto e, dependendo de onde é aplicada, como organizar uma coleção de documentos. CSS - @omadson 3

Slide 4

Slide 4 text

• Separar apresentação da estrutura • Controle absoluto da aparência da página • Páginas mais leves • Manutenção de um grande site CSS - @omadson 4

Slide 5

Slide 5 text

• Lista de regras • Seletor • Folha de estilos CSS - @omadson 5 seletores { declarações; }

Slide 6

Slide 6 text

• As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. CSS - @omadson 6 propriedade: valor;

Slide 7

Slide 7 text

• As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. CSS - @omadson 7 h1 { font-size: 24pt; } h1 { color: blue; } h1 { font-size: 18pt; }

Slide 8

Slide 8 text

• As regras podem estar dentro de um arquivo de texto com extensão “.css” ou embutidas em um arquivo HTML. CSS - @omadson 8 h1 { font-size: 24pt; color: blue; font-size: 18pt; }

Slide 9

Slide 9 text

• Inline • Tag style • Tag link CSS - @omadson 9

Slide 10

Slide 10 text

• Inline • Tag style • Tag link CSS - @omadson 10

...

Slide 11

Slide 11 text

• Inline • Tag style • Tag link CSS - @omadson 11 p { color: red; }

Slide 12

Slide 12 text

• Inline • Tag style • Tag link CSS - @omadson 12

Slide 13

Slide 13 text

• O atributo media. o all o print o screen o aural o handheld CSS - @omadson 13

Slide 14

Slide 14 text

• Os comentários em CSS podem ser da seguinte forma: CSS - @omadson 14 /* comentários */

Slide 15

Slide 15 text

• Os estilos “herdam” propriedades de várias maneiras. Uma das formas é através da própria hierarquia do HTML. CSS - @omadson 15 body { color: red; background-color: blue; }

Slide 16

Slide 16 text

class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 16

Slide 17

Slide 17 text

class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 17 HTML

...

Slide 18

Slide 18 text

class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 18 CSS .p1 { color: #000; }

Slide 19

Slide 19 text

class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 19

Slide 20

Slide 20 text

class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 20 HTML

...

Slide 21

Slide 21 text

class id • Você também pode definir seus próprios seletores utilizando os atributos class e id. CSS - @omadson 21 CSS #p1 { color: #000; }

Slide 22

Slide 22 text

• http://goo.gl/Av799 • http://goo.gl/KKCSA • http://goo.gl/bIpa7 • http://goo.gl/tMu8P • http://goo.gl/Pw1h • http://goo.gl/kqIf • http://goo.gl/5aVWN • http://goo.gl/QvWMN CSS - @omadson 22

Slide 23

Slide 23 text

• http://omadson.wordpress.com @omadson • http://yagoacp.wordpress.com @Yago_A • http://jedersonsecundino.wordpress.com @JedersonS CSS - @omadson 23

Slide 24

Slide 24 text

Obrigado! CSS - @omadson 24