Post on 07-Jul-2015
Introdução a MicroinformáticaTurma J
• Cascading Style Sheets (Folhas de Estilos em Cascata)
• Arquivo complementar ao HTML, que forneceformas de apresentação do conteúdo
• Muito útil para sites com muitas páginas quepossuem as mesmas propriedades
• Assim como o HTML, pode ser escrito em editoresde texto simples, como Bloco de Notas
• Ao salvar o arquivo, é preciso salvar como formato".css"
Folha de Estilo Externa
O estilo é linkado ou importado de um arquivo separado. Assim, as alterações de um mesmo elemento presente em várias páginas são editadas em um único arquivo.
Folha de Estilo Externa
Vinculação ao arquivo de estilo por link
<head>...<link rel="stylesheet" type="text/css" href="arquivo.css">...
</head>
Folha de Estilo Externa
Vinculação ao arquivo de estilo por importação
<head>...<style type="text/css">
@import url("arquivo.css");</style>...
</head>
Folha de Estilo Externa
Vinculação ao arquivo de estilo por importação
<head>...<style type="text/css">
@import url("arquivo.css");</style>...
</head>
Folha de Estilo Interna
As definições do estilo são feitas na própria páginaHTML, e nesse caso, o estilo só funciona nela
<head>...<style type="text/css">
body {background-color: #000000;}</style>...
</head>
Folha de Estilo Inline
O estilo é definido em um elemento específicopara funcionar apenas nele
<elemento style="código CSS">
◦ O código de uma folha de estilos é constituído de comandos denominados regras CSS
◦ Uma regra CSS é formada de um seletor que antecede as chaves e de uma declaração que fica dentro das chaves
◦ A declaração é constituída de propriedade e valor separados por dois-pontos
seletor {propriedade1: valor;propriedade2: valor;
}
Seletores do tipo elemento HTML:
body {background-color: #0000FF;margin: 20px;padding-top: 10px;font-size: large;color: yellow;
}
p {color: white;}
Seletores do tipo classe:
p.estilo1 {color: white;text-align: center;font-size: 30px;
}
p.estilo2 {color: yellow; font-size: 50px;}
Seletores do tipo classe:
...<body>
<p class=“estilo1”>Esse parágrado tem estilo 1</p><p class=“estilo2”>Esse parágrafo tem estilo 2</p>
</body>...
Seletores do tipo id:
#topo {background-color: black; text-align: center; font-size: 50px;color: white;}
#menu {width: 30%; float: left; background-color: green;font-size: 30px;}
#corpo {width: 70%; float: right; font-size: 20px;}
Seletores do tipo id:
<body><div id="topo">TOPO</div><div id="menu">
<ul><a href="#"><li>Home</li></a><a href="#"><li>Página 1</li></a><a href="#"><li>Página 2</li></a>
</ul></div><div>Corpo da página com conteúdo principal.</div>
</body>
Agrupamento de seletores:
h1, h2, h3 {color: blue;font-weight: bold;
}
h4, h5, h6 {color: green;
}