cssCascading Style Sheets         Tiago Santos     tiago.santos@iscte.pt        @tiagomssantos    www.scoop.it/t/ccsbucket...
C SS                       Estilo & AparênciaHT MLEstrutura & Conteúdo
Boas Práticas<!DOCTYPE html><html><head><title>CSS demo</title>                                            <!DOCTYPE html...
Síntaxe   selector         propriedade                       valor   }     a { background-color: yellow; }         início ...
Selectores      selector                                          exemplo     ID                                          ...
Prioridade entre Selectores      selector                  style        id            class      attribute   priority     ...
Valores e Unidades     em → font-size: 2em valor calculado do tipo de letra     px → font-size: 2px tamanho em pixeis     ...
Corred = rgb(255,0,0) = rgb(100%,0%,0%) = #ff0000 = #f00                    div {                    color: blue;         ...
Texto        font-family: arial, helvetica, “Times New Roman”...        font-size: px | em        font-weight: bold | norm...
@font-face     @font-face { 	 font-family: ‘MyWebFont’; 	 src: url(‘webfont.eot’); /* IE9 Compat Modes */ 	 src: url(‘webf...
Border                   border: 1px solid red;                                       border-style         dotted         ...
Background background: red url(image.jpg) 50% 0 repeat-y; background-color: blue | #0000ff | rgb(0, 0, 255) background-ima...
Box Model                             Margin                             Padding                              Width       ...
Position: Fixed Positioning                           .child                           .parent        .child {            ...
Position: Absolute Positioning                                                   .child                                   ...
Floats                                         .container     .content                                                    ...
Clear Floats               .clearfix:after {                   content: “.” ;                   visibility: hidden;       ...
Z-index & Opacity                                  .one                                                            .two   ...
Display                                                                               Sed ut perspiciatis unde            ...
Overflow    Sed ut perspiciatis             Sed ut perspiciatis                     Sed ut perspiciatis    unde omnis iste...
Preprocessors    http://lesscss.org                          http://sass-lang.com                                     http...
Setup LESS     <link rel=”stylesheet/less” type=”text/css” href=”style.less”>     <script src=”less.js” type=”text/javascr...
Import & Variáveis      @import “prefixer.less”;              @red: #ff0000;              Import                          ...
Mixins     .gradients {     	 background: #eaeaea;     	 background: linear-gradient(top, #eaeaea, #ccc);     	 background...
Nesting     div {     	 a{     		&:hover {     			 border: 1px solid #555;     		}     	}     }
Operações   @height: 100px;          @base: 5%;                            @filler: (@base * 2);   .element-A {   	 height...
Funções     @base: #f04615;     @width: 0.5;     .class {         width: percentage(0.5); // returns `50%`         color: ...
Frameworks   http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks
Upcoming SlideShare
Loading in …5
×

Introdução a CSS

695 views

Published on

Aula de introdução a CSS

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

  • Be the first to like this

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

No notes for slide

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

×