Download - CSS
![Page 2: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/4.jpg)
CSS
• Tipos de CSS
• Linkadas ou Importadas • Incorporadas • Inline
![Page 5: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/5.jpg)
CSS
• Linkadas ou Importadas
![Page 6: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/6.jpg)
CSS
• Linkadas ou Importadas
![Page 7: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/7.jpg)
CSS
• Incorporadas
![Page 8: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/8.jpg)
CSS
• Inline
![Page 9: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/9.jpg)
CSS
• Exemplo
![Page 10: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/10.jpg)
CSS
• Sintaxe
seletor { propriedade: valor; }
seletor_2 {
propriedade_1: valor;propriedade_2: valor;
}
![Page 11: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/11.jpg)
CSS
• Seletores (principais)
tag {}
• Ex.: table
{background-color: #cdcdcd;text-align: center;
}
![Page 12: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/12.jpg)
CSS
• Seletores (principais)
#id {}
• Ex.: #id_tabela
{background-color: #cdcdcd;text-align: center;
}
• <table id=“id_tabela”></table>
![Page 13: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/13.jpg)
CSS
• Seletores (principais)
.classe {}
• Ex.: .classe_tabela
{background-color: #cdcdcd;text-align: center;
}
• <table class=“classe_tabela”></table>
![Page 14: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/16.jpg)
CSS
• Propriedades
• Font
![Page 17: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/17.jpg)
CSS
• Propriedades
• Text
![Page 18: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/18.jpg)
CSS
• Propriedades
• Margin
![Page 19: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/19.jpg)
CSS
• Propriedades
• Border
![Page 20: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/20.jpg)
CSS
• Propriedades
• Padding
![Page 21: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/21.jpg)
CSS
• Propriedades
• Background
![Page 22: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/22.jpg)
CSS
• Propriedades
• List
![Page 23: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/23.jpg)
CSS
Mãonamassa!Crieumafolhadees/loparaolayoutcriadocomHTML.
![Page 24: CSS](https://reader033.vdocuments.com.br/reader033/viewer/2022052915/588195441a28ab0d358b661f/html5/thumbnails/24.jpg)
CSS
Mãonamassa!Pra/que!!AgoraquetemoconhecimentodeHTMLeCSS,desenvolaoseuprópriosite.