DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

CSS e JavaScript

andre.costa@pro.unifacs.br

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ãonamassa!Crieumafolhadees/loparaolayoutcriadocomHTML.

CSS

Mãonamassa!Pra/que!!AgoraquetemoconhecimentodeHTMLeCSS,desenvolaoseuprópriosite.