CSS (Cascading Style Sheets) - 1ª parte

705

Published on

Impácto visual, retroatividade, padronização de código (classes), w3c validator, CSS3.

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 2012 Construsite Brasil - Desenvolvimento web.

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

No Downloads
Views
Total Views
705
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

CSS (Cascading Style Sheets) - 1ª parte

  1. 1. Construsite Brasil Criação de sites
  2. 2. Construsite Brasil Criação de sites HIERARQUIA DOS PONTOS MAIS IMPORTANTES HOJE EM UM SITE: IMPACTO VISUAL IDENTIFICAÇÃO VISUAL AMBIENTAÇÃO E CONFORTABILIDADE VISÃO DO TODO 1º NAVEGABILIDADE VISUAL LEITURA DA INFORMAÇÃO VISÃO FRAGMENTADA 2º FUNÇÃO VISUAL CONTEÚDO 3º
  3. 3. Construsite Brasil Criação de sites FUNCIONA? 4º HIERARQUIA DOS PONTO MAIS IMPORTANTES HOJE EM UM SITE: A VERDADEIRA FUNÇÃO DE UM SITE COMEÇA NO PRIMEIRO IMPÁCTO ATÉ A ÚLTIMA AÇÃO DO USUÁRIO. MUNDO CONTEMPORÂNEO MAIOR IMPORTÂNCIA ESTÉTICA O FUNCIONAR NÃO SE LIMITA APENAS EM AÇÕES DO USUÁRIO É TÃO IMPORTANTE QUANDO O VISUAL
  4. 4. Construsite Brasil Criação de sites CSS FOI CRIADO PARA FACILITAR E CENTRALIZAR e o mais óbvio FAZER O ESTILO FUNÇÕES ATUAIS: HTML = CONTEÚDO CSS = ESTILO
  5. 5. Construsite Brasil Criação de sites AMBIENTAÇÃO VALOR Arial, Verdana, sans-serif #FFF 20% 10% 15% 10% SELETOR h1 .class #div PROPRIEDADE font-family: color: padding: TROCANDO EM MIÚDOS seletor {propriedade: valor;}
  6. 6. Construsite Brasil Criação de sites FORMAS DE APLICAÇÃO DE ESTILO EXTERNAMENTE <link href=”style.css” rel=”stylesheet” type=”text/css” /> INTERNAMENTE <style type=”text/css”> seletor {propriedade:valor;} </style> EM LINHA (INLINE) <h1 style=”font-size:20px; color:#FFF; border:solid 1px ”>Construsite Brasil</h1> PADRÃO CONSTRUSITE NUNCA NUNCA É DE MAIS PRA NÓS DESENVOLVEDORES! TODA REGRA TEM SUA EXCEÇÃO!
  7. 7. Construsite Brasil Criação de sites | HOME | QUEM SOMOS | SERVIÇOS | CONTATO HOME | QUEM SOMOS | SERVIÇOS | CONTATO PSEUDOCLASSES: PROBLEMA: Você deseja criar um menu com borda de separação somente entre os elementos. Você define a propriedade border-left na lista: li { border-left:solid 1px #333; } li:first-child { border-left:none; } SOLUÇÃO: Você define a poseudoclasse :first-child no seletor li. Você define a propriedade border-left com o valor none. A PSEUDOCLASSE :LAST-CHILD FOI IMPLEMENTADA EM CSS3 *ver as novas pseudoclasses no livro CSS Cookbook pg.: 76-77.
  8. 8. Construsite Brasil Criação de sites PSEUDOELEMENTOS: ::FIRST-LETTER ::FIRST-LINE ::BEFORE ::AFTER
  9. 9. Construsite Brasil Criação de sites REDUZIR E REAPROVEITAR
  10. 10. Construsite Brasil Criação de sites backgrond: url(img.jpg) top center no-repeat #333; backgrond-repeat: no-repeat; backgrond-color: #333; backgrond-position: top center; EXEMPLO DE PROPRIEDADE ABREVIADA: backgrond-image: url(img.jpg);
  11. 11. Construsite Brasil Criação de sites CSS RETROATIVO
  12. 12. Construsite Brasil Criação de sites EXEMPLO DE PROPRIEDADE ABREVIADA: PROPRIEDADE ABREVIADA TEM MAIS RELEVÂNCIA. QUANDO NÃO UTILIZAR? TEMOS UM BOTÃO COM UM ÍCONE, COMO NO EXEMPLO ABAIXO, PORÉM EXISTE UMA VARIAÇÃO DE COR. PODEMOS REAPROVEITAR O MESMO ÍCONE MUDANDO APENAS O BACKGROUND-COLOR. botão botão <a href=”#” class=”bt green”>botão</a> <a href=”#” class=”bt red”>botão</a> .bt { background-image:url(img.jpg); background-position: top left; background-repeat: padding:10px 10px 10px 30px; } .green { background-color: green; } .red { background-color: red; }
  13. 13. Construsite Brasil Criação de sites EVITEM UTILIZAR HERANÇA .content h2 {} .title {} <div class=”content”> <h2 class=”title”>Lorem ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum bibendum porta. Nulla congue cursus dolor at facilisis. Nunc nisl lorem, gravida at fringilla sed, mattis id ligula. Cras eget nunc velit, in luctus ligula. Vivamus fringilla dapibus gravida. Nulla vel lacus sit amet tellus condimentum interdum a vitae quam. Morbi sit amet urna est, at ullamcorper ligula.</p> </div> REUTILIZAÇÃO DO CÓDIGO ATRAVÉS DA CLASSE DIFÍCIL REUTILIZAÇÃO DO CÓDIGO
  14. 14. Construsite Brasil Criação de sites Evite utilizar IDs para estilização #submit {} .bt {} enviar enviar SE EXISTIR MAIS DE UM BOTÃO COM ESTILOS IGUAIS O ID NÃO PODERÁ SER REUTILIZADO. Utilize classes ao invés de criar seletores semelhantes, diminui o tamanho e ajuda o estilo a ser reaproveitado. ID NÃO PODE SER UTILIZADO MAIS DE UMA VEZ NUMA MESMA PÁGINA!
  15. 15. Construsite Brasil Criação de sites REUTILIZE SEUS CÓDIGOS! utilize classes botão botão botão <a href=”#” class=”bt”>botão</a> <a href=”#” class=”bt yellow”>botão</a> <a href=”#” class=”bt red”>botão</a> Sempre relacionem imagem, estrutura e estilo ao nomear. <style type=”text/css”> .bt {padding:20px, backgroud:#FFF; color: blue;} .yellow { background: yellow;} .red { background: red;} .btBorder { border:solid 4px #333;} </style>botão <a href=”#” class=”bt red btBorder”>botão</a> “Uma boa nomeclatura vale ouro”. BERNARD DE LUNA
  16. 16. Construsite Brasil Criação de sites VANTAGENS DA UTILIZAÇÃO DE SPRITES RETROATIVIDADE APENAS UMA REQUISIÇÃO AO SERVIDOR CENTRALIZAÇÃO DAS IMAGENS MELHOR MANIPULAÇÃO, AUMENTANDO A PRODUTIVIDADE
  17. 17. Construsite Brasil Criação de sites UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS HTML CSS estruturar estilizar comportar a informação escrita (hipertextualidade) comportar a informação visual (criar interação visual)
  18. 18. Construsite Brasil Criação de sites UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS IMAGENSDE ÍCONES, BOTÕES, MARCADORES, SETAS, ETC. SÃO INFORMAÇÕES VISUAIS
  19. 19. Construsite Brasil Criação de sites UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS - DEVEMOS CRIAR PÁGINAS QUE SOBRE TUDO CARREGUEM INFORMAÇÃO. - DEVEMOS CRIAR ELEMENTOS QUE MANTENHAM A RESPONSABILIDADE COM A ACESSIBILIDADE, NAVEGABILIDADE E VISIBILIDADE AOS MECANISMOS DE BUSCA ORGÂNICA.
  20. 20. Construsite Brasil Criação de sites UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS EXEMPLO SIMPLES: <input type=”submit” value=”enviar”> Enviar Botão normal Como foi projetado pelo designer
  21. 21. Construsite Brasil Criação de sites <input type=”submit” value=”enviar”> É INTERESSANTE REMOVER OU DEFINIR O VALUE COMO NULO? UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
  22. 22. Construsite Brasil Criação de sites SE NÃO DEFINIRMOS VALUE COMO NULO: En- UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS
  23. 23. Construsite Brasil Criação de sites <input type=”submit” value=”enviar”> UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS MANTENDO A ESTRUTURA BÁSICA: - O GOOGLE AGRADECE - OS LEITORES DE TELA AGRADECEM - A ACESSIBILIDADE AGRADECE
  24. 24. Construsite Brasil Criação de sites <input type=”submit” value=”enviar”> UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS <style type=”text/css”> input[type=”submit”] { width:50px; height:50px; background: url(bt.jpg) top center; text-indent:9999px; overflow:hidden; } </style> Ocultar elementos que transbordam Recuo de texto OBS.: PODEMOS UTILIZAR A MESMA TÉCNICA EM QUAISQUER OUTROS ELEMENTOS, COMO CONTROLES DE SLIDE, PAGERS, SETAS. ASSIM MANTEMOS A INFORMAÇÃO ESCRITA E A VISUAL.
  25. 25. Construsite Brasil Criação de sites <input type=”submit” value=”enviar”> UTILIZAÇÃO DE ELEMENTOS VISUAIS EM CSS Como foi projetado pelo designer
  26. 26. Construsite Brasil Criação de sites PADRONIZAÇÃO DE ESCRITA E RELAÇÃO ENTRE NOMENCLATURAS elementoSecao Exemplos: #slideshow .slideImages .slideNav .slidePrev .slideNext .slidePager . . .
  27. 27. Construsite Brasil Criação de sites Sempre relacionem imagem, estrutura e estilo ao nomear. .slideNav slideNav.jpg .slidePager slidePager.jpg . .
  28. 28. Construsite Brasil Criação de sites PADRONIZAÇÃO DE ESCRITA E RELAÇÃO ENTRE NOMENCLATURAS seletor { [fonte e propriedades de texto] [plano de fundo] [tamanho] [bordas] [espaçamentos] [posicionamento] }
  29. 29. Construsite Brasil Criação de sites CSS VALIDO É SEMPRE IMPORTANTE CSS Validation Service W3C http://jigsaw.w3.org/css-validator/
  30. 30. Construsite Brasil Criação de sites
  31. 31. Construsite Brasil Criação de sites UM NOVO CONCEITO COM NOVOS RECURSOS
  32. 32. Construsite Brasil Criação de sites OLD RADIO Pure CSS3 20 Things I Learned About Browsers and the Web OUR SOLAR SYSTEM CAN HAZ UR CURSOR? EXEMPLOS:
  33. 33. Construsite Brasil Criação de sites border-radius transition transform background text-shadow / box-shadow RGBA content NOVOS PARÂMETROS QUE VAMOS UTILIZAR COM MAIS FREQUÊNCIA: background-color: rgba(0,181,173,0.74); alpha HEX: #FFFFFF RGB: 255,255,255 ur(img01.jpg), url(img02.jpg)ur(img03.jpg), url(img04);
  34. 34. Construsite Brasil Criação de sites 30minutos PORQUE UTILIZAR UM FRAMEWORK COMO O LESS? 5minutos sem framework com framework 83% + produtividade =
  35. 35. 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:
  36. 36. 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/

×