Introdução ao CSS

3665fed38e3414d26f0a18c0e0039212?s=47 Tiago Santos
February 06, 2013

Introdução ao CSS

Aula de introdução ao CSS.

3665fed38e3414d26f0a18c0e0039212?s=128

Tiago Santos

February 06, 2013
Tweet

Transcript

  1. 3.

    Boas Práticas Ficheiro CSS externo & declaração de classes EVITAR*

    CSS embebido no HTML EVITAR* INLINE CSS * (excepto em newsletters e-mail) <!DOCTYPE html> <html> <head> <title>CSS demo</title> <link rel=”stylesheet” href=”cssfile.css”> </head> <body> <h1 class=”header”>This is a header</h1> </body> </html> <!DOCTYPE html> <html> <head> <title>CSS demo</title> </head> <body> <h1 style=”color: red;”>This is a header</h1> </body> </html> <!DOCTYPE html> <html> <head> <title>CSS demo</title> <style type=”text/css”> .header { color: red; } </style> </head> <body> <h1 class=”header”>This is a header</h1> </body> </html>   
  2. 4.

    Síntaxe selector propriedade declaration block valor início declaração fim declaração

    separador propriedade / valor a { background-color: yellow; } }
  3. 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
  4. 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 { color: red !important; } #amesmacoisa { color: #000; }
  5. 7.

    Valores e Unidades em → px → pt → %

    → font-size: 2em valor calculado do tipo de letra font-size: 2px tamanho em pixeis font-size: 2pt tamanho em pontos font-size: 80% acho que perceberam a ideia... border: 0 não precisa de unidade http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs
  6. 8.

    Cor red = rgb(255,0,0) = rgb(100%,0%,0%) = #ff0000 = #f00

    div { color: blue; background-color: green; border: 1px solid red; }
  7. 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.
  8. 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 */ } http://sixrevisions.com/css/font-face-guide/ body { font-family: ‘MyWebFont’ , Verdana, sans-serif; }
  9. 11.

    Border border: 1px solid red; div { border-radius: 10px; }

    dotted solid dashed double border-style http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/
  10. 12.

    Background background-color: blue | #0000ff | rgb(0, 0, 255) background-image:

    url(images/image.jpg); 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/ background: red url(image.jpg) 50% 0 repeat-y; eixo x eixo y
  11. 13.

    Box Model Margin Border Padding Width div { border: 4px

    solid red; height: 300px; margin: 20px 20px 20px 20px; padding: 20px 20px 20px 20px; } } top, right, bottom, left
  12. 14.

    Position: Fixed Positioning .parent .child .child { position: fixed; top:

    0; right: 0; left: 0; } .parent { position: relative; }
  13. 15.

    Position: Absolute Positioning .parent .child .child { position: absolute; top:

    10px; left: 10px; } .parent { position: relative; } http://css-tricks.com/video-screencasts/110-quick-overview-of-css-position-values/
  14. 16.

    Floats .content .nav .content { background: green; float: left; width:

    660px; } .container { width: 960px; margin: 0 auto; } .nav { background: blue; float: right; width: 300px; } .footer { background: red; clear: both; } http://alistapart.com/article/css-floats-101 .footer .container
  15. 17.

    Clear Floats .clearfix:after { content: “.” ; visibility: hidden; display:

    block; height: 0; clear: both; } http://css-tricks.com/all-about-floats/
  16. 18.

    Z-index & Opacity .one { background: red; position: absolute; z-index:

    1; opacity: 0.35; } http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/ .two { background: blue; position: absolute; margin: 10px; } .one .two
  17. 19.

    Display .div { display: none | inline | inline-block |

    block; } http://css-tricks.com/almanac/properties/d/display/ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. inline <span> <em> <b> block <div> <ul> <p> <h1> inline-block Sed ut unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore quasi architecto beatae vitae dictant explicabo. inline block inline block sit Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto.
  18. 20.

    Overflow http://css-tricks.com/the-css-overflow-property/ hidden visible scroll auto Sed ut perspiciatis unde

    omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. .div { display: visible (default) | hidden | scroll | auto } Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
  19. 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; }
  20. 26.

    Operações @height: 100px; .element-A { height: @height; } .element-B {

    height: @height * 2; } .element-C { height: @height + 2; } .element-D { height: @height - 2; } .element-E { height: @height / 2; } @base: 5%; @filler: (@base * 2); .element-A { color: (#888 / 4); height: (100% / 2 + @filler); }
  21. 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