Curso CSS 3 - Aula Introdutória com conceitos básicos
0 gostou786 visualizações
O documento discute conceitos de CSS como incorporação em HTML, seletores, propriedades e boas práticas. Aborda tags como <link> e <style> para adicionar folhas de estilo, e o uso de IDs, classes e estilos inline. Também menciona validação CSS e problemas de compatibilidade entre navegadores.
Curso CSS 3 - Aula Introdutória com conceitos básicos
- 2. • Entender os conceitos de: – Incorporação de CSS no HTML • Tag <link> • Estilos “in-line” em cada tag. • Atributos HTML para trabalhar com CSS: – id – class – style – O conceito de Seletor. – Propriedades CSS mais comuns e utilizadas. – Novas propriedades do CSS 3.
- 3. • O que são? – Lista de regras de formatação. Separam a estrutura do documento, da formatação. – Linguagem de Estilo, interpretada pelo Browser. – Folhas de estilo para formatação de documentos HTML e XML. • Lançada pela W3C: – CSS 1 (Level 1): 1996 (Autores: Håkon e Bert Bos). – CSS 2 (Level 2): 1998. – CSS 3 (Level 3): 2006 – Atualmente.
- 4. • Boas Práticas: – Sempre deixar as folhas de estilo em um arquivo externo. • Problemas Comuns: – Interpretação divergente entre os navegadores: • Problemas comuns com unidades de medida e posicionamento. – Falta no reconhecimento de propriedades. – Interpretação fora dos padrões da W3C. • Solução dos Problemas: – Folhas de estilo para navegadores problemáticos: “Hacks”.
- 5. • Utilização de tags e atributos HTML: • Folhas externas: – Tag <link> • Incorporação: – Tag <style> • Estilos “in-line”: – Atributo style – <input type=“text” style=“border: 1px” />
- 6. • Tag <link>, filha da tag head com os atributos: – href • Especifica a localização do documento. – media • Específica em que tipo de device o documento CSS em questão será utilizado para estilização. – rel • Atributo obrigatório, especifica qual a relação do documento CSS com o documento que ele foi “lincado”. – type • Tipo MIME do documento que se quer “linkar”, pra CSS: “text/css”
- 7. • Tag <link>, operadores para o atributo device – Operadores: • and Operador lógico “e”. • not Operador lógico de negação. • , Operador “um ou”. – Valores do atributo ou tipos de device. – Combinações de operadores com valores: <link media="screen and (device-height:500px)“ />
- 8. Tag <link>, valores para o atributo device Valor: Descrição: all Padrão. Apropriado para todos os dispositivos. aural Sintetizadores de voz. braille Dispositivos de feedback de Braille. handheld Dispositivos portáteis de mão (tela pequena, limitada largura de banda). projection Projetores. print Modo de visualização de impressão /páginas impressas. screen Telas de Computador. tty Teletipos e meios de comunicação similares usando uma grade de caracteres de passo fixo. tv Dispositivos tipo televisão (baixa resolução, capacidade limitada de rolagem).
- 9. • Tag <link>, valores para o atributo rel – alternate – archives – author – bookmark – external – first – help – icon – last – licence – next – nofollow – noreferrer – pingback – prefetch – prev – search – sidebar – stylesheet – tag – up
- 10. • Tag style com os atributos: – Media: • Mesmos valores da tag link – Type • Mesmo valor da tag link • A marcação CSS pode ficar entre as tags: <style type=“text/css” media=“all”> p { padding: 5px; } </style>
- 11. • Estilos “in-line” com o atributo global style – Sobrepõe as folhas de estilo incorporadas (tag style) e as folhas de estilo externas (tag link). – A marcação CSS feita como valor do atributo style <input type=“text” style=“color:#000; border: 1px solid #FFF” />
- 12. • Atributos globais HTML ligados diretamente com o CSS. Ambos trabalham em conjunto com o conceito de Seletores: – id • Deve ser único para cada elemento HTML. – class • Um elemento HTML pode conter mais de uma classe, separadas por espaços. <div id=“id_unica” class=“classe1 classe2”> Sou um Texto </div>
- 13. • Baseada no conceito de Seletor: – Veja o Apêndice - Lista de Tipos de Seletores. • Conceito de Pseudo-classe: – Semelhante ao conceito de classe abstrata. – Opcional. seletor:pseudo-classe { propriedade:valor; }
- 14. • O que são? – Conjunto de regras que contém uma ou mais propriedades CSS. – Pode-se combinar os tipo de seletores. • No que se aplica? – A um, ou a um conjunto de elementos de linguagem de marcação: HTML ou XML. – Elemento específico de um conjunto de elementos: utilização de pseudo-classes.
- 15. • Combinação de tipo se seletores, sem a utilização de pseudo-classes: header > * { color:#000; font: bold; padding: 5px; } header é o seletor de tag. O sinal de maior ( > ) seleciona um dado filho do elemento. O asterisco ( * ) seleciona todos os elementos. Como se lê? “Selecione todos os elementos filhos da tag header.”
- 16. • Pseudo-classes CSS: – Veja o Apêndice - Lista de Tipos de Seletores. – Pseudo-classes mais utilizadas: • :hover – Quando o ponteiro do mouse está sobre o elemento. • :focus – Quando o elemento tem o foco do cursor do mouse. • :first-child – Primeiro filho de um dado elemento.
- 17. Exemplo de Seletor sem Pesudo- classe Exemplo de Seletor com Pseudo- classe ul li { color:#0FF; } ul:first-child { color:#0FF; } Todos os elementos li foram estilizados Apenas o primeiro elemento li foi estilizado
- 18. • O que são? – Regras para a formatação de elementos. – Ver Apêndice - Lista de Propriedades. • Características: – Sempre ficam dentro do bloco do Seletor, ou seja das chaves. – As propriedades podem ser multivaloradas. ul li { color:#0FF; } Seletor ul li
- 19. • Veja a lista de todos os valores das propriedades: – http://www.pageresource.com/dhtml/cssprops.htm • Veja a tabela de cores enviada gentilmente pela aluna Adriana: – CSS 3 - Apêndice - Tabela de Cores
- 20. Unidade: Descrição: % Porcentagem in Polegada cm Centímetro mm Milímetro em 1em é igual ao tamanho da fonte de corrente. 2em significa duas vezes o tamanho da fonte atual. Por exemplo, se um elemento é exibido com uma fonte de 12 pt, em seguida, '2 em 'é 24 pt. O 'em' é uma unidade muito útil em CSS, uma vez que pode adaptar-se automaticamente para a fonte que o leitor utilize. ex um ex é a altura-x de uma fonte (altura x geralmente é cerca de metade do tamanho da fonte) pt Ponto (1 pt é o mesmo que 1/72 de polegada) pc Pica (1 pc é o mesmo que 12 pontos) px Pixels (um ponto na tela do computador)
- 21. • Após o documento HTML ser seccionado, utiliza-se o CSS para posicionamento dos elementos: – Propriedades mais utilizadas: • width • height • float • margin • padding • clean
- 22. • Código CSS que produziria o posicionamento dos elementos como na figura: header, footer { width: 100%; } nav, aside, article { float: left; } nav { width: 30%; } article { width: 50%; } aside {width: 20%;}
- 23. • As folhas de estilo também são validadas. • Ferramenta de validação da W3C: – http://jigsaw.w3.org/css-validator • Importância de validar? – Garantir que seu código está conforme as regras, aumentando a probabilidade de ser renderizado igual em todos os (bons) navegadores.
- 24. • Qual a função dos hacks? – Maneiras de corrigir as imperfeições dos navegadores não compatíveis • Como são implementados: – Comentários HTML – Asterisco na propriedades CSS
- 25. • O que é? – É um teste que observa a compatibilidade do navegador em questão com os padrões W3C. • Para que serve? – Testar compatibilidade entre navegadores. • Como testar? – http://acid2.acidtests.org – http://acid3.acidtests.org/