aula 4 css
TRANSCRIPT
CSS
• CSS - Cascading Style Sheets
• É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
CSS
• “Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.”
Maujor (o dinossauro da CSS) http://www.maujor.com/
CSS
• Tipos de CSS
• Linkadas ou Importadas • Incorporadas • Inline
CSS
• Linkadas ou Importadas
CSS
• Linkadas ou Importadas
CSS
• Incorporadas
CSS
• Inline
CSS
• Exemplo
CSS
• Sintaxe
seletor { propriedade: valor; }
seletor_2 {
propriedade_1: valor;propriedade_2: valor;
}
CSS
• Seletores (principais)
tag {}
• Ex.: table
{background-color: #cdcdcd;text-align: center;
}
CSS
• Seletores (principais)
#id {}
• Ex.: #id_tabela
{background-color: #cdcdcd;text-align: center;
}
• <table id=“id_tabela”></table>
CSS
• Seletores (principais)
.classe {}
• Ex.: .classe_tabela
{background-color: #cdcdcd;text-align: center;
}
• <table class=“classe_tabela”></table>
CSS
• Seletores (principais)
tag_pai tag_filho {}
• Ex.: table tr td { color: #FF0000; }
• <table> <tr>
<td>Texto modificado</td> </tr> <tr>
<td>Texto modificado</td> </tr>
</table>
CSS
• Seletores (principais)
tag_pai tag_filho.classe {}
• Ex.: table tr td.textoVermelho { color: #FF0000; }
• <table> <tr>
<td>Texto</td> </tr> <tr>
<td class=“textoVermelho”>Texto modificado</td> </tr>
</table>
CSS
• Propriedades
• Font
CSS
• Propriedades
• Text
CSS
• Propriedades
• Margin
CSS
• Propriedades
• Border
CSS
• Propriedades
• Padding
CSS
• Propriedades
• Background
CSS
• Propriedades
• List
CSS
Mão na massa! Crie uma folha de es/lo para o layout criado com HTML.
CSS
Mão na massa! Pra/que!! Agora que tem o conhecimento de HTML e CSS, desenvola o seu próprio site.