Introdução ao CSS

css css Tiago Santos Cascading Style Sheets [email protected] @tiagomssantos www.scoop.it/t/ccsbucket
http://bit.ly/sdcss

HTML CSS Estrutura & Conteúdo Estilo & Aparência

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>   

Síntaxe selector propriedade declaration block valor início declaração fim declaração
separador propriedade / valor a { background-color: yellow; } }

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

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; }

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

Cor red = rgb(255,0,0) = rgb(100%,0%,0%) = #ff0000 = #f00
div { color: blue; background-color: green; border: 1px solid red; }

@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; }

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/

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

Position: Fixed Positioning .parent .child .child { position: fixed; top:
0; right: 0; left: 0; } .parent { position: relative; }

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/

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

Clear Floats .clearfix:after { content: “.” ; visibility: hidden; display:
block; height: 0; clear: both; } http://css-tricks.com/all-about-floats/

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

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.

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

Preprocessors 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/ http://lesscss.org

Setup LESS http://lesscss.org/#usage <link rel=”stylesheet/less” type=”text/css” href=”style.less”> <script src=”less.js” type=”text/javascript”></script>

Import & Variáveis http://lesscss.org/#docs variáveis Import @red: #ff0000; @import “prefixer.less”;
http://lessprefixer.com

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; }

Nesting div { a { &:hover { border: 1px solid
#555; } } }

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); }

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

Frameworks http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks

Introdução ao CSS

Introdução ao CSS

Tiago Santos

Other Decks in Design

Featured

Transcript

css css Tiago Santos Cascading Style Sheets [email protected] @tiagomssantos www.scoop.it/t/ccsbucket

HTML CSS Estrutura & Conteúdo Estilo & Aparência

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

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

Selectores selector exemplo ID #header Class .promo Type div Adjacent

Prioridade entre Selectores selector style id class attribute priority *

Valores e Unidades em → px → pt → %

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

Texto font-family: arial, helvetica, “Times New Roman”... font-size: px |

@font-face @font-face { font-family: ‘MyWebFont’; src: url(‘webfont.eot’); /* IE9 Compat

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

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

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

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

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

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

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

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

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

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

Preprocessors 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/ http://lesscss.org

Setup LESS http://lesscss.org/#usage <link rel=”stylesheet/less” type=”text/css” href=”style.less”> <script src=”less.js” type=”text/javascript”></script>

Import & Variáveis http://lesscss.org/#docs variáveis Import @red: #ff0000; @import “prefixer.less”;

Mixins .gradients { background: #eaeaea; background: linear-gradient(top, #eaeaea, #ccc); background:

Nesting div { a { &:hover { border: 1px solid

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

Funções @base: #f04615; @width: 0.5; .class { width: percentage(0.5); //

Frameworks http://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks