Upload
andreluizlc
View
492
Download
4
Embed Size (px)
Citation preview
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.
JS
• JS - JavaScript
• É uma linguagem client-side baseada no ECMAScript para navegadores web.
• Dá mais inteligência às páginas web • Dá suporte a Orientação a Objetos (OO) • Sintaxe semelhante à PHP, JAVA, C/C++, etc.
JS
• Como utilizar? • Incorporado ao HTML
JS
• Como utilizar? • Importado de um arquivo JavaScript
JS
• Exemplo
JS
• Exemplo
JS
• Exemplo
JS
• Função
JS
• Interagindo com HTML (DHTML)
JS
• Interagindo com HTML (DHTML)
• onClick • onChange • onSubmit • onBlur / onFocus • onMouseOver / onMouseOut • onKeyPress / onKeyDown / onKeyUp
JS
• Interagindo com HTML (DHTML)
• document.getElementById(“id”).value • document.getElementById(“id”).innerHTML • document.getElementById(“id”).src • document.getElementById(“id”).style.display
JS
JS
• jQuery
• É um framework JavaScript amplamente utilizado que fornece diversos componentes prontos para os usuários. Vale a pena estudar o jQuery!!!
JS
Mão na massa! Pra/que!! Agora que você conhece JavaScript, faça a validação da página de cadastro na Agenda desenvolvida em sala de aula.