Embed Size (px)
DESCRIPTION
Aula de introdução a CSS
Citation preview
cssTiago SanToS
CaSCading STyle SheeTS
[email protected]@tiagomssantos
www.scoop.it/t/ccsbucket
eSCola de TeCnologiaS e arquiTeTura
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íciodeclaração
fimdeclaração
separadorpropriedade / valor
a { background-color: yellow; }
}
Selectores
selector exemploID #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
Cor
red = rgb(255,0,0) = rgb(100%,0%,0%) = #ff0000 = #f00
div {
color: blue;background-color: green;border: 1px solid red;}
Texto
font-family: arial, helvetica, “Times new roman”...font-size: px | emfont-weight: bold | normal | bolder | lighter | 100, ..., 900font-style: normal | italictext-decoration: none | underline | line-through | overlinetext-transform: none | lowercase | uppercase | capitalizeletter-spacing: px | emword-spacing: px | emline-height: 1.5text-align: left | right | center | justify.
@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/
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 | inheritbackground-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
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.
inlineblock
inlineblock
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/
hiddenViSible 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áVeiSimport
@red: #ff0000;@import “prefixer.less”;
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
