CSS

24
DESENVOLVIMENTO DE APLICAÇÕES PARA WEB PROF. ANDRÉ COSTA CSS e JavaScript [email protected]

Transcript of CSS

Page 1: CSS

DESENVOLVIMENTO DE APLICAÇÕES PARA WEB

PROF. ANDRÉ COSTA

CSS e JavaScript

[email protected]

Page 2: CSS

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.

Page 3: CSS

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/

Page 4: CSS

CSS

•  Tipos de CSS

•  Linkadas ou Importadas •  Incorporadas •  Inline

Page 5: CSS

CSS

•  Linkadas ou Importadas

Page 6: CSS

CSS

•  Linkadas ou Importadas

Page 7: CSS

CSS

•  Incorporadas

Page 8: CSS

CSS

•  Inline

Page 9: CSS

CSS

•  Exemplo

Page 10: CSS

CSS

•  Sintaxe

seletor { propriedade: valor; }

seletor_2 {

propriedade_1: valor;propriedade_2: valor;

}

Page 11: CSS

CSS

•  Seletores (principais)

tag {}

•  Ex.: table

{background-color: #cdcdcd;text-align: center;

}

Page 12: CSS

CSS

•  Seletores (principais)

#id {}

•  Ex.: #id_tabela

{background-color: #cdcdcd;text-align: center;

}

•  <table id=“id_tabela”></table>

Page 13: CSS

CSS

•  Seletores (principais)

.classe {}

•  Ex.: .classe_tabela

{background-color: #cdcdcd;text-align: center;

}

•  <table class=“classe_tabela”></table>

Page 14: CSS

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>

Page 15: CSS

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>

Page 16: CSS

CSS

•  Propriedades

•  Font

Page 17: CSS

CSS

•  Propriedades

•  Text

Page 18: CSS

CSS

•  Propriedades

•  Margin

Page 19: CSS

CSS

•  Propriedades

•  Border

Page 20: CSS

CSS

•  Propriedades

•  Padding

Page 21: CSS

CSS

•  Propriedades

•  Background

Page 22: CSS

CSS

•  Propriedades

•  List

Page 23: CSS

CSS

Mãonamassa!Crieumafolhadees/loparaolayoutcriadocomHTML.

Page 24: CSS

CSS

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