Instrutor: Tarso Nunes Aires  HTML foi escrito para definir o conteúdo de um documento  Porém, tags como, atributos de cores e etc.

Apresentação em tema: "Instrutor: Tarso Nunes Aires  HTML foi escrito para definir o conteúdo de um documento  Porém, tags como, atributos de cores e etc."— Transcrição da apresentação:

1 Instrutor: Tarso Nunes Aires tnaires@gmail.com

2  HTML foi escrito para definir o conteúdo de um documento  Porém, tags como, atributos de cores e etc. foram introduzidos ao HTML 3.2  Isso se tornou um pesadelo para os designers  Mistura de conteúdo com apresentação  Definições e cores eram adicionados a cada página, complicando a manutenção 2

3  A tecnologia CSS foi adicionada ao HTML 4.0 para resolver esses problemas  Cascade Style Sheets, ou folhas de estilos em cascata  Define como exibir elementos HTML  Permite que toda a formatação seja removida de documentos HTML, separando conteúdo de apresentação 3

4  Exemplo: h1 { color: blue; font-size: 12px; }  h1 é um seletor  O texto entre chaves é um conjunto de declarações  O que está antes dos dois pontos é uma propriedade  E o que está depois dos dois pontos é um valor 4

5  Seletores são, geralmente, o elemento HTML que queremos estilizar  Cada declaração consiste em uma propriedade e um valor  Declarações terminam com ponto-e-vírgula 5

6  Existem 3 maneiras de inserir um estilo CSS:  CSS externo 6

7  Existem 3 maneiras de inserir um estilo CSS:  CSS interno... estilos 7

8  Existem 3 maneiras de inserir um estilo CSS:  CSS inline Texto  Observação:  Múltiplos estilos são aplicados em cascata  Ordem de prioridade: inline, interno, externo 8

9  Comentários em CSS situam-se entre /* e */  Exemplo: /* Todos os parágrafos centralizados e com fonte vermelha */ p { color: red; text-align: center; } 9

10  Utilizado para ajustar o estilo para um único elemento  Referencia o atributo id do elemento HTML  É definido com um “#”  Exemplo: #titulo { text-align: center; color: red; } 10

11  Usado para definir um estilo para um grupo de elementos  Ajusta o mesmo estilo para elementos HTML com a mesma classe  Referencia o atributo class do elemento HTML  É definido com um “.”  Exemplo:.centralizado { text-align: center; } 11

12  É possível também especificar que apenas elementos HTML específicos devem ser afetados por uma classe  Exemplo: /* Afeta apenas elementos */ p.centralizado { text-align: center; } 12

13  Elementos HTML podem ser considerados como caixas (boxes)  Em CSS, o termo “box model” é usado quando falamos de design e layout  O box model é essencialmente uma caixa que fica ao redor dos elementos HTML, e consistem em: margens, bordas, espaçamentos e conteúdo 13

14 14

15  Referência de CSS:  http://www.w3schools.com/css/css_reference.asp http://www.w3schools.com/css/css_reference.asp  Famílias de fontes:  http://www.w3schools.com/css/css_websafe_font s.asp http://www.w3schools.com/css/css_websafe_font s.asp  Unidades CSS:  http://www.w3schools.com/css/css_units.asp http://www.w3schools.com/css/css_units.asp  Cores CSS:  http://www.w3schools.com/css/css_colors.asp http://www.w3schools.com/css/css_colors.asp 15

16  Aplicar estilos à aplicação AgendaJSF, desenvolvida durante o curso  Usar predominantemente estilos externos, sendo permitidos estilos internos ou inline em situações particulares 16