Aula 6 Html – 6 CSS · Aula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 08/04/15...
22
Aula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 08/04/15 © P C F de Oliveira 2015 1
Transcript of Aula 6 Html – 6 CSS · Aula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 08/04/15...
Aula 6Html – 6
CSS
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
08/04/15 © P C F de Oliveira 2015 1
08/04/15 © P C F de Oliveira 2015 2
Lembrete
CSS = cascading style sheets(folhas de estilo em cascata)
08/04/15 © P C F de Oliveira 2015 3
ConceitoMecanismo simples para adicionar estilo (e.g. tipos de letra (fonts), cores ou espaçamento) a documentos web
www.w3.org/Style/CSS
08/04/15 © P C F de Oliveira 2015 4
O chapéu está legal. Que tal
colocar um pouco mais de estilo no
seu “HTML”?
Uma frase simples.
08/04/15 © P C F de Oliveira 2015 5
Uma frase simples.
08/04/15 © P C F de Oliveira 2015 6
Uma frase simples.
08/04/15 © P C F de Oliveira 2015 7
Uma frase simples.
08/04/15 © P C F de Oliveira 2015 8
Uma frase simples.
08/04/15 © P C F de Oliveira 2015 9
08/04/15 © P C F de Oliveira 2015 10
quarto { cortina: azul; carpete: cinza;
}
banheiro { cortina: rosa; azulejo: branco;
}
08/04/15 © P C F de Oliveira 2015 11
seletor { property: value; }
declaração
propriedade valor
08/04/15 © P C F de Oliveira 2015 12
seletor { property1: value1;property2: value2;property3: value3;
}
bloco de declaração
08/04/15 © P C F de Oliveira 2015 13
h1 { color: green;
}
p {font-size: small;font-family: sans-serif;
}
08/04/15 © P C F de Oliveira 2015 14
SerifaO que é?
Sans-serif
Serif
08/04/15 © P C F de Oliveira 2015 15
p {background-color: red; border: 1px solid gray;
}
08/04/15 © P C F de Oliveira 2015 16
h1, h2 {font-family: sans-serif; color: gray; border-bottom: 1px solid black;
}
08/04/15 © P C F de Oliveira 2015 17
1. Em linha2. Embutido3. Externo
08/04/15 © P C F de Oliveira 2015 18
CSS
em linha
<p style="color: blue;">Lorem ipsum dolor.</p>
08/04/15 © P C F de Oliveira 2015 19
CSS
embutido
<head> <title>Um título qualquer</title> <style type=“text/css”>
p { color: blue; } </style>
</head>
08/04/15 © P C F de Oliveira 2015 20
CSS
externo
<head> <title>Um título qualquer</title> <link type=“text/css”rel=“stylesheet” href=“estilo.css”>
</head>
08/04/15 © P C F de Oliveira 2015 21
Em linha
Folha de Estilo Externa
Folha de Estilo Interna
Orde
m d
e Pr
eced
ência
Default do Navegador (Browser)
* Se um link para uma folha de estilo externa
é colocado após uma folha de estilo interna,
a externa terá precedência!
CSS Zen Garden (www.csszengarden.com)
CSS Beauty (www.cssbeauty.com)
08/04/15 © P C F de Oliveira 2015 22
