![Page 1: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/1.jpg)
Aula 6Html – 6
CSS
Prof. Paulo Cesar F. De Oliveira, BSc, PhD
05/08/16 © P C F de Oliveira 2016 1
![Page 2: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/2.jpg)
05/08/16 © P C F de Oliveira 2016 2
Lembrete
![Page 3: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/3.jpg)
05/08/16 © P C F de Oliveira 2016 3
Conceito
![Page 4: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/4.jpg)
05/08/16 © P C F de Oliveira 2016 4
O chapéu está legal. Que tal
colocar um pouco mais de estilo no
seu “HTML”?
![Page 5: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/5.jpg)
Uma frase simples.
05/08/16 © P C F de Oliveira 2016 5
![Page 6: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/6.jpg)
Uma frase simples.
05/08/16 © P C F de Oliveira 2016 6
![Page 7: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/7.jpg)
Uma frase simples.
05/08/16 © P C F de Oliveira 2016 7
![Page 8: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/8.jpg)
Uma frase simples.
05/08/16 © P C F de Oliveira 2016 8
![Page 9: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/9.jpg)
Uma frase simples.
05/08/16 © P C F de Oliveira 2016 9
![Page 10: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/10.jpg)
05/08/16 © P C F de Oliveira 2016 10
quarto { cortina: azul; carpete: cinza;
}
banheiro { cortina: rosa; azulejo: branco;
}
![Page 11: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/11.jpg)
05/08/16 © P C F de Oliveira 2016 11
seletor { property: value; }
declaração
propriedade valor
![Page 12: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/12.jpg)
05/08/16 © P C F de Oliveira 2016 12
seletor { property1: value1;property2: value2;property3: value3;
}
bloco de declaração
![Page 13: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/13.jpg)
05/08/16 © P C F de Oliveira 2016 13
h1 { color: green;
}
p {font-size: small;font-family: sans-serif;
}
![Page 14: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/14.jpg)
05/08/16 © P C F de Oliveira 2016 14
Sans-serif
Serif
![Page 15: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/15.jpg)
05/08/16 © P C F de Oliveira 2016 15
p {background-color: red; border: 1px solid gray;
}
![Page 16: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/16.jpg)
05/08/16 © P C F de Oliveira 2016 16
h1, h2 {font-family: sans-serif; color: gray; border-bottom: 1px solid black;
}
![Page 17: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/17.jpg)
05/08/16 © P C F de Oliveira 2016 17
![Page 18: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/18.jpg)
05/08/16 © P C F de Oliveira 2016 18
<p style="color: blue;">Lorem ipsum dolor.</p>
![Page 19: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/19.jpg)
05/08/16 © P C F de Oliveira 2016 19
<head> <title>Um título qualquer</title> <style type=“text/css”>
p { color: blue; } </style>
</head>
![Page 20: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/20.jpg)
05/08/16 © P C F de Oliveira 2016 20
<head> <title>Um título qualquer</title> <link type=“text/css”rel=“stylesheet” href=“estilo.css”>
</head>
![Page 21: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/21.jpg)
05/08/16 © P C F de Oliveira 2016 21
Em linha
Folha de Estilo Externa
Folha de Estilo Interna
Default do Navegador (Browser)
![Page 22: Aula 6 Html – 6 CSS - · PDF fileAula 6 Html – 6 CSS Prof. Paulo Cesar F. De Oliveira, BSc, PhD 05/08/16 © P C F de Oliveira 2016 1](https://reader031.vdocuments.com.br/reader031/viewer/2022030506/5ab478ae7f8b9a2f438b93ba/html5/thumbnails/22.jpg)
CSS Zen Garden (www.csszengarden.com)
CSS Beauty (www.cssbeauty.com)
05/08/16 © P C F de Oliveira 2016 22