CSS (Cascading Style Sheets) - 2ª parte

421 views
357 views

Published on

Desenvolvimento na prática, níveis de elementos, floats, position, libertando floats, problema tabela, seletores exóticos, propriedades proprietárias.

Material de estudos elaborado por Marcos César // www.marcoscesar.com

Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.

cc 2013 Construsite Brasil - Desenvolvimento web.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
421
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS (Cascading Style Sheets) - 2ª parte

  1. 1. Construsite Brasil Criação de sites PARTE II Desenvolvimento na prática
  2. 2. Construsite Brasil Criação de sites PRINCIPAIS Níveis de elementos HTML (table, block, list-item, inline, inline-block)
  3. 3. Construsite Brasil Criação de sites Elementos invisíveis (base, link, meta, script, style, title) NÃO SÃO ELEMENTOS DE CONTEÚDO REAL PARA O USUÁRIO, SÃO ESPECIFICAÇÕES E ORIENTAÇÕES PARA OS NAVEGADORES E MECANISMOS DE BUSCA ORGÂNICA.
  4. 4. Construsite Brasil Criação de sites Elementos a nível de bloco {títulos (h1, h2, h3...), p, div, section, article, header, footer} ELEMENTOS QUE CARREGAM CONTEÚDO REAL EM BLOCO.
  5. 5. Construsite Brasil Criação de sites Elementos em linha (a, b, br, img, input, label, span, textarea, tt) ELEMENTOS QUE CARREGAM CONTEÚDO SEGUIDOS, EM LINHA. Lorem ipsum dolor sit amet consectetuer adipiscing ipsum dolor sit amet Não permite estilos de bloco, como margin.
  6. 6. Construsite Brasil Criação de sites Elementos de tabela (table, inclui tr, td e tudo mais) Endentamento Tempo longo para renderização. Um elemento é dependente do outro para se posicionar. ELEMENTOS ENDENTADOS E QUE CAUSAM “DEPENDÊNCIA“ Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor sit amet, consectetuer adipiscing Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Problema! Mesmo se você definir a altura do elemento da tabela ele será adaptado de acordo com o tamanho do conteúdo. yoooop (travado)
  7. 7. Construsite Brasil Criação de sites Elementos de lista (ul, li) ELEMENTOS DE ORDEM, LISTAGEM Lorem ipsum dolor sit amet consectetuer adipiscing elit Sed diam nonummy nibh Euismod tincidunt ut laoreet Dolore magna aliquam erat volutpat Ut wisi enim ad minim veniam Quis nostrud exerci tation Ullamcorper suscipit lobortis Nisl ut aliquip ex ea commodo consequat Duis autem vel eum iriure Olor in hendrerit in
  8. 8. Construsite Brasil Criação de sites USO DE ELEMENTOS FLUTUANTES (FLOATS) Sinônimos: boiar, sobrenadar e vogar.
  9. 9. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit. float: right float: left margin Observação: Maior tempo de renderização se comparado com position, pois o texto depende do bloco para se posicionar.
  10. 10. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit. float: right float: left Os elementos definidos com a propriedade float passam a “boiar“ em relação aos outros elementos. Imagine um naufrágio, onde os textos são os lixos que flutuam ao lado das boias, mas não sobrepõem uns aos outros sobre a água (mesma camada).
  11. 11. Construsite Brasil Criação de sites USO DE ELEMENTOS posicionados (position)
  12. 12. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. position: absolute; top:0; left:0; position: absolute; bottom:0; right:0; Os elementos com a propriedade position de valor absolute é “tirado da camada natural“ e posicionado. Observação: Menor tempo de renderização se comparado com float, pois o texto não depende do bloco para se posicionar. Porém seria impossível criar o efeito anterior.
  13. 13. Construsite Brasil Criação de sites Libertando elementos flutuantes/flutuados (floats)
  14. 14. Construsite Brasil Criação de sites <div id=”blocoGeral”> <div id=”blocoVerde”></div> <div id=”blocoTexto”> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat [...] </div> </div> #blocoVerde { width:200px; height:400px; background: #A3CC52; float: left; } #blocoTexto { clear:both; }
  15. 15. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu float: left clear: both
  16. 16. Construsite Brasil Criação de sites <div id=”blocoGeral”> <div class=”bloco verde fl”></div> <div class=”bloco azul fr”></div> </div> #blocoGeral { background: #333 } .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } .fl { float: left;} .fr { float: right;}
  17. 17. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. float: left; float: right; Problema! O blocoGeral não aparece.
  18. 18. Construsite Brasil Criação de sites <div id=”blocoGeral”> <div class=”bloco verde fl”></div> <div class=”bloco azul fr”></div> </div> #blocoGeral { background: #333; display: table; } .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } Solução 1 Definir a propriedade display com o valor table. display:table;
  19. 19. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Problema! O blocoGeral está se comportando como tabela, a renderização é dependente.
  20. 20. Construsite Brasil Criação de sites <div id=”blocoGeral”> <div class=”bloco verde fl”></div> <div class=”bloco azul fr”></div> </div> #blocoGeral { background: #333; display: table; width: 100%; } .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } Solução 1 Definir a propriedade width com o valor 100% por exemplo. width:100%;
  21. 21. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Problema! O blocoGeral está se comportando como tabela, a renderização é dependente.
  22. 22. Construsite Brasil Criação de sites Problema Tabela! Mesmo se você definir a altura do elemento a nível de tabela ele será adaptado de acordo com o tamanho do conteúdo que está endentado. Isso causa mais dependência entre elementos.
  23. 23. Construsite Brasil Criação de sites <div id=”blocoGeral”> <div class=”bloco verde fl”></div> <div class=”bloco azul fr”></div> </div> #blocoGeral { background: #333; display: table; width: 100%; height:400px; } .bloco { width:200px; height:400px; } .verde { height:600px; background: #A3CC52; } .azul { background: #3B9CD7; } Exemplo: Definimos a propriedade height com o valor 400px e mudamos a propriedade height da class .verde para 600px. height:400px = #blocoGeral height:600px = .verde
  24. 24. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Problema! O blocoGeral está se comportando como tabela, a renderização é dependente. Problema Tabela! Mesmo se você definir a altura do elemento da tabela ele será adaptado de acordo com o tamanho do conteúdo. Problema Navegador! A renderização de elementos a nível de tabela variam e causam mais problemas em diferentes navegadores. Solução? Esquecer tabela para casos como este. Elemento a nível de tabela é para tabelas e algumas exceções.
  25. 25. Construsite Brasil Criação de sites <div id=”blocoGeral”> <div class=”bloco verde fl”></div> <div class=”bloco azul fr”></div> <div class=”cb”></div> </div> #blocoGeral { background: #333; } .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } .cb { clear:both; } .fl { float: left;} .fr { float: right;} Solução 2 Adicionar qualquer elemento a nível de bloco, definir a propriedade clear com o valor both. clear:both; Libertando de verdade.
  26. 26. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. O blocoGeral está se comportando como elemento a nível de bloco, a renderização é menos dependente. Solução Simples! Você pode reutilizar a classe criada para blocos sucessores no layout, reaproveitar é sempre a melhor opção.
  27. 27. Construsite Brasil Criação de sites Prova de fogo! Mesmo que você defina a altura do elemento a nível de bloco, ele será mantido de acordo com a definição das css, sem dependência dos elementos flutuantes, sendo assim os elementos flutuantes vão transbordar o seu elemento pai.
  28. 28. Construsite Brasil Criação de sites Exemplo: Definimos a propriedade height com o valor 400px e mudamos a propriedade height da class .verde para 600px. height:400px = #blocoGeral height:600px = .verde <div id=”blocoGeral”> <div class=”bloco verde fl”></div> <div class=”bloco azul fr”></div> <div class=”cb”></div> </div> #blocoGeral { background: #333; height: 400px; } .bloco { width:200px; height:400px; } .verde { background: #A3CC52; height: 600px; } .azul { background: #3B9CD7; }
  29. 29. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi.
  30. 30. Construsite Brasil Criação de sites Manter o nível natural dos elementos é a melhor opção! Exemplo: Quanto definimos uma propriedade display com o valor table e esse elemento originalmente é um elemento a nível de bloco (display: block; ex.: div) o navegador tem de processar ele de forma diferente do padrão, levando mais tempo para a renderização do layout.
  31. 31. Construsite Brasil Criação de sites DICAS ÚTEIS QUE VOCÊ NÃO APRENDE NA ESCOLA
  32. 32. Construsite Brasil Criação de sites Porque utilizamos * para fazer um reset do html nas CSS? *SELECIONA TODOS OS ELEMENTOS DESCENDENTES. Atenção! O grau de importância das css selecionadas com * é maior. Exemplo: <div id=”blocoGeral”> <div class=”bloco verde”>Bloco01 <div class=”subBloco”></div> </div> <div class=”bloco azul”> Bloco02</div> </div> #blocoGeral {background: #333;} .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } .subBloco { background: #C40303; }
  33. 33. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Bloco01 Bloco02 subBloco
  34. 34. Construsite Brasil Criação de sites #blocoGeral * {background: #333;} .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } .subBloco { background: #C40303; } Se definirmos o #blocoGeral seguido pelo seletor * ele aplica a formatação a todos os elementos descendentes. #blocoGeral *
  35. 35. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Bloco01 Bloco02 subBloco
  36. 36. Construsite Brasil Criação de sites SELECIONANDO ELEMENTOS FILHOS COM > Exemplo: <div id=”blocoGeral”> <div class=”bloco verde”>Bloco01 <div class=”subBloco”></div> </div> <div class=”bloco azul”> Bloco02</div> </div> #blocoGeral {background: #333;} .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } .subBloco { background: #C40303; }
  37. 37. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Bloco01 Bloco02 subBloco
  38. 38. Construsite Brasil Criação de sites #blocoGeral > div {background: #333;} .bloco { width:200px; height:400px; } .verde { background: #A3CC52; } .azul { background: #3B9CD7; } .subBloco { background: #C40303; } Se definirmos o #blocoGeral seguido pelo seletor > para os elementos div ele aplica a formatação a todos os div filhos. #blocoGeral > div
  39. 39. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi. Bloco01 Bloco02 subBloco
  40. 40. Construsite Brasil Criação de sites SELECIONANDO ELEMENTOS COM + Exemplo: <div>Bloco01</div> <div>Bloco02</div> <div>Bloco03</div> <div>Bloco04</div> div { width:200px; height:200px; background: #333; } Conseguimos selecionar elemento determinado e seus adjacentes.
  41. 41. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi.
  42. 42. Construsite Brasil Criação de sites SELECIONANDO ELEMENTOS COM + Exemplo: <div>Bloco01</div> <div>Bloco02</div> <div>Bloco03</div> <div>Bloco04</div> div { width:200px; height:200px; background: #333; } div+div { background: #C40303; } Conseguimos selecionar elemento determinado e seus adjacentes.
  43. 43. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi.
  44. 44. Construsite Brasil Criação de sites SELECIONANDO ELEMENTOS COM + Exemplo: <div>Bloco01</div> <div>Bloco02</div> <div>Bloco03</div> <div>Bloco04</div> div { width:200px; height:200px; background: #333; } div+div+div { background: #C40303; } Conseguimos selecionar elemento determinado e seus adjacentes.
  45. 45. Construsite Brasil Criação de sites cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci- lisi.
  46. 46. Construsite Brasil Criação de sites SELETORES DE ATRIBUTOS Conseguimos selecionar os elemento de acordo com seus atributos. Exemplo: input[type=”text”] { propriedade:valor; } a[href^=”http”] { propriedade:valor; } a[href$=”.html”] { propriedade:valor; } seleciona todos os inputs de texto. seleciona todos os elementos a que começam com o valor http. seleciona todos os elementos a que terminam com o valor .html.
  47. 47. Construsite Brasil Criação de sites PROPRIEDADES PROPRIETÁRIAS Conseguimos definir propriedades para um browser específico. As propriedades proprietárias passaram a existir porque cada grupo de desenvolvedores cria novas funcionalidades para as css mas só podem aplicar ao seu motor e não em todos. Por exemplo: A equipe de desenvolvedores da Apple (Webkit) criaram a funcionalidade de transição entre estados de formatação para os elementos, a propriedade -webkit-transtition. A equipe apresenta a solução para o orgão responsável pelo padrão de desenvolvimento web (w3c) esses funcionalidades aos poucos vão sendo desenvolvidas e implementadas para os motores de outros browsers como firefox (gecko), ie ou ópera. Quando o processo de desenvolvimento chega ao término e funciona perfeitamente em todos os browsers ele passa a ser aceito sem as propriedades proprietárias, sendo padronizada pelo w3c. Exemplo: -moz -o -webkit
  48. 48. Construsite Brasil Criação de sites PROPRIEDADES PROPRIETÁRIAS Conseguimos definir propriedades para browser específico. Outro exemplo: -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; Exemplo: -moz -o -webkit Já está sendo implementado como padrão e reconhecido pelos navega- dores com os motores gecko e webkit sem a necessidade da utilização de propriedades proprietárias. Cuidado ao utilizar geradores de código automáico, talvez sejam desnecessários.
  49. 49. Construsite Brasil Criação de sites CSS VALIDO É SEMPRE IMPORTANTE CSS Validation Service W3C http://jigsaw.w3.org/css-validator/
  50. 50. Construsite Brasil Criação de sites Créditos Construsite Brasil Criação de sites www.construsitebrasil.com Marcos César Desenvolvedor front-end e Designer Material elaborado por:
  51. 51. Construsite Brasil Criação de sites Referêcias 6 estratégias para melhorar a organização do seu CSS/ Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil manutenção. Tabeless. [acesso em 26 de novembro de 2012]. Disponível em: http://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/ Christopher Schmitt. Livro: CSS Cookbook/Soluções rápidas para problemas comuns com CSS. Novatec Editora Ltda. 2010. Eric A. Meyer, CSS: The Definitive Guide. O’Reilly Media; Third Edition edition (November 14, 2006). Diego Eis Elcio Ferreira. Livro: HTML5 e CSS3 com farinha e pimenta. W3C, CSS Validation Service. Disponível em: http://jigsaw.w3.org/css-validator/acess Bernard De Luna - Sexy web projects specialist | Web design speaker and teacher. Disponível em: http://bernarddeluna.com/ Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/ CSS3 Generator. Disponível em: http://css3generator.com/ WebPlatform Docs. Disponível em: http://docs.webplatform.org

×