Tecnologias para Internet - 2014.2 - Aula 4

  • Published on
    22-Jun-2015

  • View
    126

  • Download
    1

Embed Size (px)

DESCRIPTION

Tecnologias para Internet - 2014.2 - Aula 4

Transcript

  • 1. Tecnologias para InternetProf. Thyago MaiaGesto da TI 2014.2

2. ObjetivosAula 4: Folhas de Estilo Introduzir o conceito de folhas de estilo Apresentar alguns recursos datecnologia Definir e apresentar as principaispropriedades CSS Fazer com que o aluno crie seuprimeiro projeto Web HTML + CSS2 3. Introduo ao CSS 4. Introduo ao CSS Folha de Estilo A partir do HTML 4.0, toda formatao de umapgina HTML pode ser definida em uma folha deestilo; Quando um navegador l uma folha de estilo, omesmo formata o documento HTML de acordocom as especificaes definidas na folha deestilo;4 5. Introduo ao CSS O que CSS? Sigla para Cascading Style Sheets; Estilos definem como os elementos HTML seroapresentados/formatados; Estilos foram adicionados no HTML 4.0 pararesolver um problema: Separar o contedo da sua formatao! Folhas de estilo podem ser armazenadas emarquivos .css ao serem definidas em documentosHTML;5 6. Arquitetura de Sistemas Web Qual camada o CSS se enquadra?6 7. Arquitetura de Sistemas Web Qual camada o CSS se enquadra?7 8. Introduo ao CSS Sintaxe CSS Uma regra CSS possui duas partes: Um seletor euma ou mais declaraes; O seletor normalmente um elemento HTMLque ir seguir as especificaes definidas nasdeclaraes (h1, body, p, a, etc.);8h1{Color: blue;Font-size: 12px;}SeletorDeclaraoPropriedade Valor 9. Introduo ao CSS Tag usada em um documento HTML parareferenciar um arquivo CSS: Tal tag dever ser declarada entre as tags e (cabealho de uma pginaHTML; 10. Algumas propriedades CSS 11. Algumas propriedades CSS A propriedade Background Utilizada para definir efeitos de fundo em umelemento CSS; Alguns possveis efeitos: background-color (corde fundo), background-image (imagem defundo), background-repeat (repetio da imagemde fundo);11body{background-color: #b0c4de;background-image:url('paper.gif');} 12. Algumas propriedades CSS Formatao de texto com CSS Utilizamos a propriedade color para setar umacor no texto de um determinado elemento; Com CSS, uma cor pode ser especificada com: Um valor hexadecimal (Ex.: #FF0000) Um valor RGB (Ex.: rgb(255,0,0)) O nome da cor em ingls (Ex.: red)12body{color: blue;} 13. Algumas propriedades CSS Alinhamento de texto com CSS Utilizamos a propriedade text-align para definir oalinhamento horizontal em textos; O texto pode ser centralizado (center), alinhado aesquerda ou direita (left ou right) ou justificado (justify);13h1{text-align: right;}P{text-align: center;} 14. Algumas propriedades CSS Decorao de textos com CSS A propriedade text-decoration usada para setarou remover decoraes em textos;14a { text-decoration: none; }h1 { text-decoration: line-through; }h2 { text-decoration: underline; }h3 { text-decoration: overline; } 15. Algumas propriedades CSS Transformaes de textos A propriedade text-transform usada paramanter textos em caixa alta ou caixa baixa;15p {text-transform: uppercase;}#area {text-transform: lowercase;}#area2 {text-transform: capitalize;} 16. Algumas propriedades CSS Indentao A propriedade text-indent usada paraespecificar a indentao da primeira linha de umtexto;16p{text-indent: 50px;} 17. Algumas propriedades CSS Tipos de Fonte A propriedade font-family usada para setar otipo de fonte a ser utilizado em um texto; Podemos definir vrios tipos de fonte para amesma propriedade. Caso um ou mais navegadores no suporte um dostipos listados;17p{font-family: Times new Roman, Times, Serif;} 18. Algumas propriedades CSS Estilos de Fonte A propriedade font-style usada para definir oestilo de fonte a ser utilizado em um texto;18p{font-style: italic;}#exemplo{font-style: oblique;} 19. Algumas propriedades CSS Tamanho de Fonte A propriedade font-size seta o tamanho do texto;19p{font-size: 40px;}#exemplo{font-size: 14px;} 20. Algumas propriedades CSS Largura e altura de um elemento As propriedades width e height (largura e altura)setam, respectivamente, a largura e altura de umdeterminado elemento;20p{width: 240px;height: 100px;} 21. Algumas propriedades CSS Bordas Atravs da propriedade border (borda) podemosinserir bordas em elementos CSS;21p{border: 5px solid red;}#exemplo{border: 1px dotted blue;} 22. Algumas propriedades CSS Margens Atravs da propriedade margin podemos inserirmargens em elementos CSS;22#exemplo{margin-top: 100px;margin-bottom: 100px;margin-left: 100px;margin-right: 100px;} 23. Algumas propriedades CSS Padding A propriedade padding define o espao entre aborda de um elemento e seu contedo;23#exemplo{padding-top: 100px;padding-bottom: 100px;padding-left: 100px;padding-right: 100px;} 24. Introduo ao CSS Os seletores id e class Alm dos seletores de elementos HTML, CSStambm permite que ns criemos nossosprprios seletores, chamados id e class;24 25. Introduo ao CSS Os seletores id Seletores id so usados para especificar um estilopara um elemento nico; Seletores id formatam elementos HTML que osinvocam a partir do atributo id;25/* no css */#paragrafos{color: red;}

26. Introduo ao CSS Os seletores class Seletores class so usados para especificar umestilo para um grupo de elementos; Seletores class formatam elementos HTML que osinvocam a partir do atributo class;26/* no css */.centro{text-align:center;}

27. Introduo ao CSS Os seletores class Tambm podemos especificar que apenas algunstipos de elementos HTML devero ser afetadospela classe;27/* no css */p.centro{text-align:center;}

28. Prtica em LaboratrioOBS.: Todas as atividades devero ser enviadas para o e-mailprovas@thyagomaia.net 29. Prtica em Laboratrio Faa uma folha de estilo que padronize aformatao do documento HTML criado naatividade prtica 01. (0,0 a 2,0 pontos) Data de entrega: At 09/09/2014; Critrios de avaliao: Substituio das tags HTML de formatao porseletores CSS. Tal substituio ser classificada como: Total: Toda a formatao foi definida no arquivo CSS criado(2,0 pontos); Parcial: O CSS define parte da formatao do documentoHTML. Algumas tags HTML ainda formatam parte docontedo (0,0 a 1,5 pontos); 29 30. Prtica em Laboratrio Faa uma folha de estilo que padronize aformatao do documento HTML criado naatividade prtica 01. (0,0 a 2,0 pontos) O(s) arquivo(s) CSS devero ser editados APENASatravs dos softwares Notepad++, Notepad ouGEdit; A atividade em questo individual;30