Post on 17-Dec-2014
description
&DINIS CORREIA 2011
cbn
3HTMLCSS
CSS DEFINIÇÃO1HISTÓRIA
(MUITO, MUITO BREVE)2BENEFÍCIOS34
CSS
BENEFÍCIOS3ANATOMIA4
SINTAXE5HTML + CSS6
CSS
ascadingC S Style heets
“A simple mechanism for adding style (for example, fonts, color, spacing) to web documents.http://www.w3.org/Style/CSS
Uma simples frase.
Uma simples frase.
Uma simples frase.
Uma simples frase.
Uma simples frase.
HISTÓRIA
1996 2000 2002 2007
20011998
1996 2000 2002 2007
20011998
CSS 1
Design com tabelas
A NECESSIDADE É A MÃE DE TODA A INVENÇÃOFOTO DE JLA KLICHÉ c HTTP://FLIC.KR/P/5CDVVD
2000
2000
1996 2000 2002 2007
20011998
CSS 1
Design com tabelas
1996 2000 2002 2007
20011998CSS 2: Recomendação
1996 20002002 2007
20011998
Explorer 5 para Mac com suporte para CSS 1
CSS: INCONSISTENTE
ENTRE BROWSERS
1996 20002002 2007
20011998
CSS 2.1
JEFFREY ZELDMANFOTO DE JOHN MORRISON c HTTP://FLIC.KR/P/8MU2NM
1996 2000 2002 2007
20011998
CSS 2.1Candidate Recommendation
1996 2000 2002 2007
20011998
CSS 2.1Candidate Recommendation
1996 2000 2002 2007
20011998
Primeiros drafts CSS 3
BENEFÍCIOS
WEB
CONTEÚDOHTML
COMPORTAMENTOJavaScript
APRESENTAÇÃOCSS
CONTEÚDOHTML
COMPORTAMENTOJavaScript
APRESENTAÇÃOCSS
1. Acessibilidade
2. Flexibilidade
3. Largura de banda
Separação do conteúdo e apresentação
BENEFÍCIOS
BENEFÍCIOS 1. Acessibilidade
2. Flexibilidade
3. Largura de banda
Separação do conteúdo e apresentação
BENEFÍCIOS 1. Acessibilidade
2. Flexibilidade
3. Largura de banda
Separação do conteúdo e apresentação
BENEFÍCIOS 1. Acessibilidade
2. Flexibilidade
3. Largura de banda
Separação do conteúdo e apresentação
BENEFÍCIOS 1. Acessibilidade
2. Flexibilidade
3. Largura de banda
Separação do conteúdo e apresentação
TABELAS CSS
- 50KB- 2TB/dia
1. Acessibilidade
2. Flexibilidade
3. Largura de banda
Separação do conteúdo e apresentação
BENEFÍCIOS
ANATOMIADE UMA REGRA DE CSS
selector {propriedade1: valor;
}
p {color: blue;
}
p {color: blue;
}
SELECTOR
DECLARAÇÃO
p {color: blue;
}
SELECTOR
DECLARAÇÃO
PROPRIEDADE
VALOR
p {color: blue;
}
SELECTOR
DECLARAÇÃO
PROPRIEDADE
VALOR
REGRA
SINTAXE
SINTAXEselectores
1. Elemento
2. Class
3. ID
selectoresSINTAXE
1. Elemento
2. Class
3. ID
selectoresSINTAXE
p { ... }
h2 { ... }
li { ... }
1. Elemento
2. Class
3. ID
selectoresSINTAXE
.lead { ... }
1. Elemento
2. Class
3. ID
selectoresSINTAXE
#logo { ... }
p { color: blue; }h2 { color: blue; }
p { color: blue; }h2 { color: blue; }
p, h2 { color: blue; }
SINTAXEselectores avançados
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
div strong { color: blue; }
HTML
CSS
<div><strong>Alerta!</strong></div><div><h2><strong>Alerta!</strong></h2></div>
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
div > strong { color: blue; }
HTML
CSS
<div><strong>Alerta!</strong></div><div><h2><strong>Alerta!</strong></h2></div>
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
* { ... }
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
h2 + p { color: blue; }
HTML
CSS
<h2>Título</h2><p>Lorem ipsum dolor....</p><p>Lorem ipsum dolor....</p>
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
img[alt] { margin: 5px; }
HTML
CSS
<img src="foto.jpg" alt="Um rio">
img[src=foto.jpg] { margin: 5px; }
HTML
CSS
<img src="foto.jpg" alt="Um rio">
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
.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>
.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>
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
a:link { ... }a:visited { ... }a:focus { ... }a:hover { ... }a:active { ... }
li:first-‐child { color: blue; }
HTML
CSS
<ul><li>Lorem ipsum dolor</li><li>Situm amer ipsum</li>
</ul>
1. Descendent
2. Child
3. Universal
4. Adjacent sibling
5. Attribute
6. Multiple classes
7. Pseudo-classes
8. Pseudo-elements
selectores avançadosSINTAXE
p:first-‐letter { ... }p:first-‐line { ... }
:before { ... }:after { ... }
SINTAXEdeclaração
colorbordermarginfont...
color: red;
color: #ff0000;
color: rgb(255,0,0);
p {font-‐family: Arial;font-‐size: 12px;
}
p {font: 12px Arial;
}
p {margin: 5px;
}
p {margin-‐top: 5px;margin-‐right: 10px;margin-‐bottom: 15px;margin-‐left: 20px;
}
p {margin: 5px 10px 15px 20px;
}
=
p {margin-‐top: 5px;margin-‐right: 10px;margin-‐bottom: 15px;margin-‐left: 20px;
}
p {margin: 5px 10px;
}
p {margin: 5px 10px 15px;
}
HTML + CSS
1. Inline
2. Embed
3. External
HTML + CSS
1. Inline
2. Embed
3. External
HTML + CSS
<p style="color: blue;">Lorem ipsum dolor.</p>
1. Inline
2. Embed
3. External
HTML + 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>
1. Inline
2. Embed
3. External
HTML + 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>