css introdução - madson dias

@omadson

Introdução

CSS - @omadson 2

• 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

• 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

• Lista de regras

• Seletor

• Folha de estilos

CSS - @omadson 5

seletores { declarações; }

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

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

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

}

• Inline

• Tag style

• Tag link

CSS - @omadson 9

• Inline

• Tag style

• Tag link

CSS - @omadson 10

<p style=“color: red;”>...</p>

• Inline

• Tag style

• Tag link

CSS - @omadson 11

<style>

p {

color: red;

}

</style>

• Inline

• Tag style

• Tag link

CSS - @omadson 12

<link

rel=stylesheet

type=text/css

href=local/arquivo.css

>

• O atributo media.

o all

o print

o screen

o aural

o handheld

CSS - @omadson 13

• Os comentários em CSS podem ser da seguinte forma:

CSS - @omadson 14

/*

comentários

*/

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

}

class id

• Você também pode definir seus próprios seletores

utilizando os atributos class e id.

CSS - @omadson 16

class id

• Você também pode definir seus próprios seletores

utilizando os atributos class e id.

CSS - @omadson 17

HTML

<p class=p1>...</p>

class id

• Você também pode definir seus próprios seletores

utilizando os atributos class e id.

CSS - @omadson 18

CSS

.p1 { color: #000; }

class id

• Você também pode definir seus próprios seletores

utilizando os atributos class e id.

CSS - @omadson 19

class id

• Você também pode definir seus próprios seletores

utilizando os atributos class e id.

CSS - @omadson 20

HTML

<p id=p1>...</p>

class id • Você também pode definir seus próprios seletores

utilizando os atributos class e id.

CSS - @omadson 21

CSS

#p1 { color: #000; }

• 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

• http://omadson.wordpress.com @omadson

• http://yagoacp.wordpress.com @Yago_A

• http://jedersonsecundino.wordpress.com @JedersonS

CSS - @omadson 23

Obrigado!

CSS - @omadson 24