CSS – CASCADING STYLE SHEETS Ivanethe Carvalho Rocha CSS – Cascading Style Sheets HTML e CSS são linguagens que utilizamos para criar páginas Web. Os servidores Web armazenam e servem páginas, que são criadas com HTML e CSS. HTML é a abreviação para HyperText Markup Language (Linguagem Marcação de Texto) e é usada para estruturar a página Web. CSS – Cascading Style Sheets CSS é a abreviação de Cascading Style Sheets – Folhas de Estilo em Cascata e são utilizadas para controlar a apresentação do documento HTML. As CSS podem ser adicionadas à pagina Web HTML colocando- se suas regras dentro do elemento <style>. O elemento <style> deve estar obrigatoriamente sempre dentro do elemento <head>. Você especifica as características do estilo dos elementos em seu HTML utilizando as CSS. 1. <html> 2. <head> 3. <title>Bar Use a Cabeça</title> 4. <style type="text/css"> 5. body { 6. font-family: sans-serif; 7. } 8. h1, h2 { 9. color: red; 10. } 11. h2 { 12. font-family: times-new-roman; 13. } 14. h1 { 15. border-bottom: 1px solid red; 16. } 17. p { 18. color: blue; 19. } 20. </style> 21. </head> 22. <body> 23. <h1>Bem-vindo ao Novo e Melhorado Bar Use a Cabeça </h1> 24. <img src="images/drinks.gif" alt="Drinks" /> 25. <p> 26. Junte-se a nós em qualquer noite dessas para beber 27. <a href="bebidas/elixir.html">elixires</a > refrescantes, 28. ter um bom papo e talvez algumas partidas de 29. <em>Dance Dance Revolution</em>. 30. O acesso wireless está sempre disponível; 31. TSPSW (Traga Seu Próprio Servidor Web). 32. </p> 33. <h2>Como chegar</h2> 34. <p> 35. Você nos encontrará bem no centro 36. da cidade de Weblândia. Se precisar de ajuda para nos localizar, 37. verifique nossas 38. <a href=“sobre\instrucoes.html">instruç ões detalhadas</a>. 39. Junte-se a nós! 40. </p> 41. </body> 42. </html> CSS – Cascading Style Sheets Analisando o arquivo exemplo 1- Na linha 4 temos adição de uma nova tag: a abertura do elemento <style>. Na linha 20 a tag de fechamento correspondente. 2 – Ainda na linha 4 o elemento tem um type=“text/css” 3 – Na linha 5 temos o que chamamos de regras que se aplicará às propriedades para o elemento body. 4 - Adicionamos propriedades das linhas, 5 a 20, que afetarão o estilo de apresentação deste elemento. CSS – Cascading Style Sheets Estrutura de regras Um estilo consiste de uma ou mais regras que descrevem como os elementos das página são apresentados. Cada regra tem duas partes fundamentais: o seletor e a declaração do bloco. Assim temos: CSS – Cascading Style Sheets Exemplos de tags, que posso ter no meu documento HTML ? Com adiciono propriedades de estilo a estas tags que compõe meu documento HTML ? tag { Propriedades } CSS – Cascading Style Sheets Suponhamos que desejamos aplicar um determinada estilo a um parágrafo. Qual seria a declaração dentro meu style? E que dentro deste estilo para este parágrafo deseja- se aplicar uma determinada cor ao texto? CSS – Cascading Style Sheets Agrupando estilos Os títulos são conhecidos pelas tags <hX>, onde X é nível do seu título. Suponhamos temos dois títulos h1 e h2. H1{ font-family: sans-serif color: gray } H2{ font-family: sans-serif color: gray } CSS – Cascading Style Sheets Agrupando estilos Como os títulos tem estilos exatamente iguais podemos organizá-los da seguinte forma: H1,H2{ font-family: sans-serif color: gray } CSS – Cascading Style Sheets Agrupando estilos Suponhamos a seguinte situação: para o titulo H1, desejamos adicionar uma nova propriedade presente somente no titulo H1? H1{ Border-bottom: 1px solid black } CSS – Cascading Style Sheets Criando arquivo CSS externo Todas as regras adicionadas no próprio arquivo HTML serão adicionadas diretamente em um arquivo de extensão “.css”. No arquivo HTML fazemos a ligação (link) com o arquivo “css” criado. CSS – Cascading Style Sheets 1.h1, h2 { 2. color: red; 3. } 4. h2 { 5. font-family: times-new- roman; 6. } 7. h1 { 8. border-bottom: 1px solid red; 9. } 10. p { 11. color: blue; 12. } O arquivo “CSS” CSS – Cascading Style Sheets Alterando o arquivo HTML Inicialmente adicionamos uma nova tag: link que terá a seguinte estrutura: <link type = “text/css” rel = “stylesheet” href= “bar.css”> As tags para o elemento “style” não serão mais necessárias no arquivo HTML. CSS – Cascading Style Sheets Analisando: <link type = “text/css” rel = “stylesheet” href= “bar.css”> Onde: link : o elemento link é usando para criar um link(ligação) com as informações externas; Type: indica o tipo de informação a ser ligada externamente, neste caso folhas de estilo CSS; Rel: este atributo especifica o relacionamento entre o arquivo HTML e para onde o link está sendo criado. Neste caso estamos criando um link para uma folha de estilo; Href: informamos o local onde a folha de estilo pode ser localizada. CSS – Cascading Style Sheets Herança em CSS Inicialmente analisemos a estrutura do nosso arquivo HTML. HTML HEAD TITLE BODY H1 P P aimg a em H2 P CSS – Cascading Style Sheets Herança em CSS Analisando a figura quem será modificado? HTML HEAD TITLE BODY H1 P P aimg a em H2 P CSS – Cascading Style Sheets Herança em CSS Dentro da nossa estrutura temos os elementos p e dentro deles temos outros elementos. No primeiro parágrafo temos uma imagem, no segundo os elementos <a> e <em>, e no terceiro outro elemento <a>. Dizemos que esses elementos são filhos dos elementos <p>, acima deles. Isso implica que algumas regras aplicadas a estes parágrafos afetará quem estiver abaixo deles na árvore. Lembrando que somente algumas regras são herdadas, no exemplo, temos o font-family e color. E o que acontece com elemento img ? CSS – Cascading Style Sheets Herança em CSS O que aconteceria se aplicássemos a regra para a propriedade de font-family no elemento body ? Como ficaria o novo arquivo css? CSS – Cascading Style Sheets 1.body { 2. font-family: times-new- roman; 3.} 4.h1, h2 { 5. color: red; 6. } 7. h1 { 8. border-bottom: 1px solid red; 9. } 10. p { 11. color: blue; 12. } CSS – Cascading Style Sheets Ignorando heranças em CSS Como posso fazer com que elemento filho não herde as propriedades do pai? Em CSS podemos fazer com que as propriedades dos pais sejam ignoradas pelos filhos adicionando regras mais especificas. Estas regras especificas são adicionadas criando a mesma regra para o elemento desejado. CSS – Cascading Style Sheets Ignorando heranças em CSS – Arquivo modificado body{ font-family: verdana; color: blue; } h2 { color: red; } h2 { font-family: times-new-roman; } h1 { border-bottom: 1px solid black; } p { color: yellow; font-family: sans-serif; } CSS – Cascading Style Sheets Algumas propriedades Text-align: controla a propriedade para alinhar o texto. ◦ Ex: p {text-align : left | center | right | justify} CSS – Cascading Style Sheets Color: usada para definir a cor da fonte dos elementos de texto. Algumas maneira de especificar cores: Especificar pelo nome: ◦ Ex: p { color: silver} Especificar em termos das cores básicas ◦ Ex: p { color: rgb(80%,40%,0%)} ◦ p { color: rgb(204,102,0} Especificar em hexadecimal ◦ p {color: #cc6600} Background-color: controla a cor de fundo de um elemento. Utiliza os mesmos valores para color. CSS – Cascading Style Sheets Font-size: controla o tamanho do texto. ◦ Especificando fontes em pixles p {font-size: 14px} ◦ Especificando em porcentagem p {font-size: 150%} ◦ Usando um fator de escala “em” p {font-size: