html&css 3 - introduction to css

100

Click here to load reader

Upload: dinis-correia

Post on 17-Dec-2014

1.074 views

Category:

Technology


8 download

DESCRIPTION

Slides for my in-house HTML & CSS trainning at SAPO. The basics of CSS: definition, brief history, benefits, syntax and how to insert on HTML.

TRANSCRIPT

Page 1: HTML&CSS 3 - Introduction to CSS

&DINIS CORREIA 2011

cbn

3HTMLCSS

Page 2: HTML&CSS 3 - Introduction to CSS

CSS DEFINIÇÃO1HISTÓRIA

(MUITO, MUITO BREVE)2BENEFÍCIOS34

Page 3: HTML&CSS 3 - Introduction to CSS

CSS

BENEFÍCIOS3ANATOMIA4

SINTAXE5HTML + CSS6

Page 4: HTML&CSS 3 - Introduction to CSS

CSS

Page 5: HTML&CSS 3 - Introduction to CSS

ascadingC S Style heets

Page 6: HTML&CSS 3 - Introduction to CSS

“A simple mechanism for adding style (for example, fonts, color, spacing) to web documents.http://www.w3.org/Style/CSS

Page 7: HTML&CSS 3 - Introduction to CSS

Uma simples frase.

Page 8: HTML&CSS 3 - Introduction to CSS

Uma simples frase.

Page 9: HTML&CSS 3 - Introduction to CSS

Uma simples frase.

Page 10: HTML&CSS 3 - Introduction to CSS

Uma simples frase.

Page 11: HTML&CSS 3 - Introduction to CSS

Uma simples frase.

Page 12: HTML&CSS 3 - Introduction to CSS
Page 13: HTML&CSS 3 - Introduction to CSS

HISTÓRIA

Page 14: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998

Page 15: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998

CSS 1

Design com tabelas

Page 16: HTML&CSS 3 - Introduction to CSS

A NECESSIDADE É A MÃE DE TODA A INVENÇÃOFOTO DE JLA KLICHÉ c HTTP://FLIC.KR/P/5CDVVD

Page 17: HTML&CSS 3 - Introduction to CSS

2000

Page 18: HTML&CSS 3 - Introduction to CSS

2000

Page 19: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998

CSS 1

Design com tabelas

Page 20: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998CSS 2: Recomendação

Page 21: HTML&CSS 3 - Introduction to CSS

1996 20002002 2007

20011998

Explorer 5 para Mac com suporte para CSS 1

Page 22: HTML&CSS 3 - Introduction to CSS

CSS: INCONSISTENTE

ENTRE BROWSERS

Page 23: HTML&CSS 3 - Introduction to CSS

1996 20002002 2007

20011998

CSS 2.1

Page 24: HTML&CSS 3 - Introduction to CSS

JEFFREY ZELDMANFOTO DE JOHN MORRISON c HTTP://FLIC.KR/P/8MU2NM

Page 25: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998

CSS 2.1Candidate Recommendation

Page 26: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998

CSS 2.1Candidate Recommendation

Page 27: HTML&CSS 3 - Introduction to CSS

1996 2000 2002 2007

20011998

Primeiros drafts CSS 3

Page 28: HTML&CSS 3 - Introduction to CSS

BENEFÍCIOS

Page 29: HTML&CSS 3 - Introduction to CSS

WEB

Page 30: HTML&CSS 3 - Introduction to CSS

CONTEÚDOHTML

COMPORTAMENTOJavaScript

APRESENTAÇÃOCSS

Page 31: HTML&CSS 3 - Introduction to CSS

CONTEÚDOHTML

COMPORTAMENTOJavaScript

APRESENTAÇÃOCSS

Page 32: HTML&CSS 3 - Introduction to CSS

1. Acessibilidade

2. Flexibilidade

3. Largura de banda

Separação do conteúdo e apresentação

BENEFÍCIOS

Page 33: HTML&CSS 3 - Introduction to CSS

BENEFÍCIOS 1. Acessibilidade

2. Flexibilidade

3. Largura de banda

Separação do conteúdo e apresentação

Page 34: HTML&CSS 3 - Introduction to CSS
Page 35: HTML&CSS 3 - Introduction to CSS

BENEFÍCIOS 1. Acessibilidade

2. Flexibilidade

3. Largura de banda

Separação do conteúdo e apresentação

Page 36: HTML&CSS 3 - Introduction to CSS

BENEFÍCIOS 1. Acessibilidade

2. Flexibilidade

3. Largura de banda

Separação do conteúdo e apresentação

Page 37: HTML&CSS 3 - Introduction to CSS

BENEFÍCIOS 1. Acessibilidade

2. Flexibilidade

3. Largura de banda

Separação do conteúdo e apresentação

Page 38: HTML&CSS 3 - Introduction to CSS

TABELAS CSS

- 50KB- 2TB/dia

Page 39: HTML&CSS 3 - Introduction to CSS

1. Acessibilidade

2. Flexibilidade

3. Largura de banda

Separação do conteúdo e apresentação

BENEFÍCIOS

Page 40: HTML&CSS 3 - Introduction to CSS
Page 41: HTML&CSS 3 - Introduction to CSS
Page 42: HTML&CSS 3 - Introduction to CSS

ANATOMIADE UMA REGRA DE CSS

Page 43: HTML&CSS 3 - Introduction to CSS

selector  {propriedade1:  valor;

}

Page 44: HTML&CSS 3 - Introduction to CSS

p  {color:  blue;

}

Page 45: HTML&CSS 3 - Introduction to CSS

p  {color:  blue;

}

SELECTOR

DECLARAÇÃO

Page 46: HTML&CSS 3 - Introduction to CSS

p  {color:  blue;

}

SELECTOR

DECLARAÇÃO

PROPRIEDADE

VALOR

Page 47: HTML&CSS 3 - Introduction to CSS

p  {color:  blue;

}

SELECTOR

DECLARAÇÃO

PROPRIEDADE

VALOR

REGRA

Page 48: HTML&CSS 3 - Introduction to CSS

SINTAXE

Page 49: HTML&CSS 3 - Introduction to CSS

SINTAXEselectores

Page 50: HTML&CSS 3 - Introduction to CSS

1. Elemento

2. Class

3. ID

selectoresSINTAXE

Page 51: HTML&CSS 3 - Introduction to CSS

1. Elemento

2. Class

3. ID

selectoresSINTAXE

Page 52: HTML&CSS 3 - Introduction to CSS

p  {  ...  }

Page 53: HTML&CSS 3 - Introduction to CSS

h2  {  ...  }

Page 54: HTML&CSS 3 - Introduction to CSS

li  {  ...  }

Page 55: HTML&CSS 3 - Introduction to CSS

1. Elemento

2. Class

3. ID

selectoresSINTAXE

Page 56: HTML&CSS 3 - Introduction to CSS

.lead  {  ...  }

Page 57: HTML&CSS 3 - Introduction to CSS

1. Elemento

2. Class

3. ID

selectoresSINTAXE

Page 58: HTML&CSS 3 - Introduction to CSS

#logo  {  ...  }

Page 59: HTML&CSS 3 - Introduction to CSS

p  {  color:  blue;  }h2  {  color:  blue;  }

Page 60: HTML&CSS 3 - Introduction to CSS

p  {  color:  blue;  }h2  {  color:  blue;  }

p,  h2  {  color:  blue;  }

Page 61: HTML&CSS 3 - Introduction to CSS

SINTAXEselectores  avançados

Page 62: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 63: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 64: HTML&CSS 3 - Introduction to CSS

div  strong  {  color:  blue;  }

HTML

CSS

<div><strong>Alerta!</strong></div><div><h2><strong>Alerta!</strong></h2></div>

Page 65: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 66: HTML&CSS 3 - Introduction to CSS

div  >  strong  {  color:  blue;  }

HTML

CSS

<div><strong>Alerta!</strong></div><div><h2><strong>Alerta!</strong></h2></div>

Page 67: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 68: HTML&CSS 3 - Introduction to CSS

*  {  ...  }

Page 69: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 70: HTML&CSS 3 - Introduction to CSS

h2  +  p  {  color:  blue;  }

HTML

CSS

<h2>Título</h2><p>Lorem  ipsum  dolor....</p><p>Lorem  ipsum  dolor....</p>

Page 71: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 72: HTML&CSS 3 - Introduction to CSS

img[alt]  {  margin:  5px;  }

HTML

CSS

<img  src="foto.jpg"  alt="Um  rio">

Page 73: HTML&CSS 3 - Introduction to CSS

img[src=foto.jpg]  {  margin:  5px;  }

HTML

CSS

<img  src="foto.jpg"  alt="Um  rio">

Page 74: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 75: HTML&CSS 3 - Introduction to CSS

.lead.destaque  {  color:  blue;  }

HTML

CSS

<p  class="lead">Lorem  ipsum  dolor....</p><p  class="destaque">Lorem  ipsum  dolor....</p><p  class="lead  destaque">Lorem  ipsum  dolor....</p>

Page 76: HTML&CSS 3 - Introduction to CSS

.destaque  {  color:  blue;  }.lead  {  margin:  2px;  }

HTML

CSS

<p  class="lead">Lorem  ipsum  dolor....</p><p  class="destaque">Lorem  ipsum  dolor....</p><p  class="lead  destaque">Lorem  ipsum  dolor....</p>

Page 77: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 78: HTML&CSS 3 - Introduction to CSS

a:link  {  ...  }a:visited  {  ...  }a:focus  {  ...  }a:hover  {  ...  }a:active  {  ...  }

Page 79: HTML&CSS 3 - Introduction to CSS

li:first-­‐child  {  color:  blue;  }

HTML

CSS

<ul><li>Lorem  ipsum  dolor</li><li>Situm  amer  ipsum</li>

</ul>

Page 80: HTML&CSS 3 - Introduction to CSS

1. Descendent

2. Child

3. Universal

4. Adjacent sibling

5. Attribute

6. Multiple classes

7. Pseudo-classes

8. Pseudo-elements

selectores  avançadosSINTAXE

Page 81: HTML&CSS 3 - Introduction to CSS

p:first-­‐letter  {  ...  }p:first-­‐line  {  ...  }

:before  {  ...  }:after  {  ...  }

Page 82: HTML&CSS 3 - Introduction to CSS

SINTAXEdeclaração

Page 83: HTML&CSS 3 - Introduction to CSS

colorbordermarginfont...

Page 84: HTML&CSS 3 - Introduction to CSS

color:  red;

color:  #ff0000;

color:  rgb(255,0,0);

Page 85: HTML&CSS 3 - Introduction to CSS
Page 86: HTML&CSS 3 - Introduction to CSS

p  {font-­‐family:  Arial;font-­‐size:  12px;

}

Page 87: HTML&CSS 3 - Introduction to CSS

p  {font:  12px  Arial;

}

Page 88: HTML&CSS 3 - Introduction to CSS

p  {margin:  5px;

}

Page 89: HTML&CSS 3 - Introduction to CSS

p  {margin-­‐top:  5px;margin-­‐right:  10px;margin-­‐bottom:  15px;margin-­‐left:  20px;

}

Page 90: HTML&CSS 3 - Introduction to CSS

p  {margin:  5px  10px  15px  20px;

}

=

p  {margin-­‐top:  5px;margin-­‐right:  10px;margin-­‐bottom:  15px;margin-­‐left:  20px;

}

Page 91: HTML&CSS 3 - Introduction to CSS

p  {margin:  5px  10px;

}

Page 92: HTML&CSS 3 - Introduction to CSS

p  {margin:  5px  10px  15px;

}

Page 93: HTML&CSS 3 - Introduction to CSS

HTML + CSS

Page 94: HTML&CSS 3 - Introduction to CSS

1. Inline

2. Embed

3. External

HTML + CSS

Page 95: HTML&CSS 3 - Introduction to CSS

1. Inline

2. Embed

3. External

HTML + CSS

Page 96: HTML&CSS 3 - Introduction to CSS

<p  style="color:  blue;">Lorem  ipsum  dolor.</p>

Page 97: HTML&CSS 3 - Introduction to CSS

1. Inline

2. Embed

3. External

HTML + CSS

Page 98: HTML&CSS 3 - Introduction to CSS

<head><title>Um  título</title>

<meta  name="description"  content="A  descrição  da  página"><meta  name="keywords"  content="vídeos,fotos,pesquisa">

<style>p  {

color:  blue;}

</style></head>

Page 99: HTML&CSS 3 - Introduction to CSS

1. Inline

2. Embed

3. External

HTML + CSS

Page 100: HTML&CSS 3 - Introduction to CSS

<head><title>Um  título</title>

<meta  name="description"  content="A  descrição  da  página"><meta  name="keywords"  content="vídeos,fotos,pesquisa">

<link  type="text/css"  rel="stylesheet"  media="screen"  href="style.css"></head>