Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introdução a CSS

767 views

Published on

Aula de introdução a CSS

Published in: Design
  • Be the first to comment

  • Be the first to like this

Introdução a CSS

  1. 1. cssCascading Style Sheets Tiago Santos tiago.santos@iscte.pt @tiagomssantos www.scoop.it/t/ccsbucket Escola de Tecnologias e Arquitetura
  2. 2. C SS Estilo & AparênciaHT MLEstrutura & Conteúdo
  3. 3. Boas Práticas<!DOCTYPE html><html><head><title>CSS demo</title>  <!DOCTYPE html> <html> <head> <title>CSS demo</title>  <!DOCTYPE html> <html> <head> <title>CSS demo</title> <link rel=”stylesheet” href=”cssfile.css”> <style type=”text/css”> </head></head> .header { color: red; } <body><body> </style> </head> <h1 style=”color: red;”>This is a header</h1><h1 class=”header”>This is a header</h1> <body> </body></body> <h1 class=”header”>This is a header</h1> </html></html> </body> </html> Ficheiro CSS externo EVITAR* CSS embebido EVITAR* INLINE CSS& declaração de classes no HTML * (excepto em newsletters e-mail)
  4. 4. Síntaxe selector propriedade valor } a { background-color: yellow; } início separador fim declaração propriedade / valor declaração declaration block
  5. 5. Selectores selector exemplo ID #header Class .promo Type div Adjacent sibling h2 + p, ul + p Child li > ul, div#container > ul Descendant ul a, li a Universal * #container * , Attribute [type="text"] Pseudo-classes/-elements a:hover, :first-child, :nth-child; :nth-of-type http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize
  6. 6. Prioridade entre Selectores selector style id class attribute priority * 0 0 0 0 0 p 0 0 0 1 1 div a 0 0 0 2 2 div a.color 0 0 1 2 12 div .color .text 0 0 2 1 21 div .color p #news 0 1 1 2 112 style=”” 1 0 0 0 1000 !important #amesmacoisa { #amesmacoisa { color: red !important; color: #000; } }
  7. 7. Valores e Unidades em → font-size: 2em valor calculado do tipo de letra px → font-size: 2px tamanho em pixeis pt → font-size: 2pt tamanho em pontos %→ font-size: 80% acho que perceberam a ideia... border: 0 não precisa de unidade
  8. 8. Corred = rgb(255,0,0) = rgb(100%,0%,0%) = #ff0000 = #f00 div { color: blue; background-color: green; border: 1px solid red; }
  9. 9. Texto font-family: arial, helvetica, “Times New Roman”... font-size: px | em font-weight: bold | normal | bolder | lighter | 100, ..., 900 font-style: normal | italic text-decoration: none | underline | line-through | overline text-transform: none | lowercase | uppercase | capitalize letter-spacing: px | em word-spacing: px | em line-height: 1.5 text-align: left | right | center | justify.
  10. 10. @font-face @font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat Modes */ src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */ url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */ url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */ url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */ } body { font-family: ‘MyWebFont’ , Verdana, sans-serif; } http://sixrevisions.com/css/font-face-guide/
  11. 11. Border border: 1px solid red; border-style dotted solid dashed double div { border-radius: 10px; } http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/
  12. 12. Background background: red url(image.jpg) 50% 0 repeat-y; background-color: blue | #0000ff | rgb(0, 0, 255) background-image: url(images/image.jpg); eixo x eixo y background-position: left | center | right top|center|bottom; background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit background-attachment: fixed | scroll | inherit http://coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/
  13. 13. Box Model Margin Padding Width Border div { border: 4px solid red; height: 300px; margin: 20px 20px 20px 20px; } top, right, bottom, left padding: 20px 20px 20px 20px; }
  14. 14. Position: Fixed Positioning .child .parent .child { .parent { position: fixed; position: relative; top: 0; } right: 0; left: 0; }
  15. 15. Position: Absolute Positioning .child .parent .child { .parent { position: absolute; position: relative; top: 10px; } left: 10px; } http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/
  16. 16. Floats .container .content .nav .footer .container { .content { .nav { .footer { width: 960px; background: green; background: blue; background: red; margin: 0 auto; float: left; float: right; clear: both; } width: 660px; width: 300px; } } } http://alistapart.com/article/css-floats-101
  17. 17. Clear Floats .clearfix:after { content: “.” ; visibility: hidden; display: block; height: 0; clear: both; } http://css-tricks.com/all-about-floats/
  18. 18. Z-index & Opacity .one .two .one { .two { background: red; background: blue; position: absolute; position: absolute; z-index: 1; margin: 10px; opacity: 0.35; } } http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
  19. 19. Display Sed ut perspiciatis unde inline inline omnis iste natus error sit Sed ut perspiciatis unde Sed ut unde block block omnis iste natus error sit omnis voluptatem accusantium voluptatem accusantium iste natus error sit voluptatem doloremque laudantium. doloremque laudantium, accusantium doloremque sit totam rem aperiam, eaque ipsa laudantium, totam rem quae ab illo inventore veritatis aperiam, eaque ipsa quae ab Totam rem aperiam, eaque et quasi architecto beatae illo inventore quasi architecto ipsa quae ab illo inventore vitae dicta sunt explicabo. beatae vitae dictant explicabo. veritatis et quasi architecto. inline inline - block block <span> <em> <b> <div> <ul> <p> <h1> .div { display: none | inline | inline-block | block; } http://css-tricks.com/almanac/properties/d/display/
  20. 20. Overflow Sed ut perspiciatis Sed ut perspiciatis Sed ut perspiciatis unde omnis iste natus unde omnis iste natus unde omnis iste natus error sit voluptatem error sit voluptatem error sit voluptatem accusantium accusantium accusantium doloremque doloremque doloremque laudantium, totam rem laudantium, totam rem laudantium, totam rem aperiam, eaque ipsa aperiam, eaque ipsa aperiam, eaque ipsa quae ab illo inventore quae ab illo inventore quae ab illo inventore veritatis et quasi veritatis et quasi architecto beatae vitae architecto beatae vitae dicta sunt explicabo. dicta sunt explicabo. visible hidden scroll auto .div { display: visible (default) | hidden | scroll | auto } http://css-tricks.com/the-css-overflow-property/
  21. 21. Preprocessors http://lesscss.org http://sass-lang.com http://learnboost.github.com/stylus http://css-tricks.com/sass-vs-less http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
  22. 22. Setup LESS <link rel=”stylesheet/less” type=”text/css” href=”style.less”> <script src=”less.js” type=”text/javascript”></script> http://lesscss.org/#usage
  23. 23. Import & Variáveis @import “prefixer.less”; @red: #ff0000; Import variáveis http://lesscss.org/#docs
  24. 24. Mixins .gradients { background: #eaeaea; background: linear-gradient(top, #eaeaea, #ccc); background: -o-linear-gradient(top, #eaeaea, #ccc); background: -ms-linear-gradient(top, #eaeaea, #ccc); background: -moz-linear-gradient(top, #eaeaea, #ccc); background: -webkit-linear-gradient(top, #eaeaea, #ccc); } div { .gradients; border: 1px solid #555; border-radius: 3px; }
  25. 25. Nesting div { a{ &:hover { border: 1px solid #555; } } }
  26. 26. Operações @height: 100px; @base: 5%; @filler: (@base * 2); .element-A { height: @height; .element-A { } color: (#888 / 4); .element-B { height: (100% / 2 + @filler); height: @height * 2; } } .element-C { height: @height + 2; } .element-D { height: @height - 2; } .element-E { height: @height / 2; }
  27. 27. Funções @base: #f04615; @width: 0.5; .class { width: percentage(0.5); // returns `50%` color: saturate(@base, 5%); background-color: spin(lighten(@base, 25%), 8); } http://lesscss.org/#reference
  28. 28. Frameworks http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks

×