Instrutor: Tarso Nunes Aires [email protected] HTML foi escrito para definir o conteúdo de um documento Porém, tags como <font>, 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 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 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 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 Existem 3 maneiras de inserir um estilo CSS: CSS externo <head> <link rel=“stylesheet” type=“text/css” href=“estilo.css”> </head> 6 Existem 3 maneiras de inserir um estilo CSS: CSS interno <head> <style type=“text/css”> ... estilos </style> </head> 7 Existem 3 maneiras de inserir um estilo CSS: CSS inline <p style=“color: red; text-align: center;”> Texto </p> Observação: Múltiplos estilos são aplicados em cascata Ordem de prioridade: inline, interno, externo 8 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 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 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 É possível também especificar que apenas elementos HTML específicos devem ser afetados por uma classe Exemplo: /* Afeta apenas elementos <p class=“centralizado”></p> */ p.centralizado { text-align: center; } 12 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 Referência de CSS: http://www.w3schools.com/css/css_reference.asp Famílias de fontes: http://www.w3schools.com/css/css_websafe_font s.asp Unidades CSS: http://www.w3schools.com/css/css_units.asp Cores CSS: http://www.w3schools.com/css/css_colors.asp 15 Aplicar estilos à aplicação AgendaJSF, desenvolvida durante o curso Usar predominantemente estilos externos, sendo permitidos estilos internos ou inline em situações particulares 16
Download
