Introdução a CSS

css
Cascading Style Sheets

Tiago Santos
tiago.santos@iscte.pt
@tiagomssantos
www.scoop.it/t/ccsbucket

Escola de Tecnologias e Arquitetura

C SS
Estilo & Aparência

HT ML
Estrutura & Conteúdo

Boas Práticas

<!DOCTYPE html>
<html>
<head>
<title>CSS demo</title>
 <!DOCTYPE html>
<html>
<head>
 <!DOCTYPE html>
<html>
<head>

<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)

Síntaxe

selector propriedade valor
}

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

declaration block

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 { #amesmacoisa {
color: red !important; color: #000;
} }

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

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 */
}

body {
font-family: ‘MyWebFont’ , Verdana, sans-serif;
}
http://sixrevisions.com/css/font-face-guide/

Border
border-style

dotted solid dashed double

div {
border-radius: 10px;
}

http://net.tutsplus.com/tutorials/html-css-techniques/css-refreshers-borders/

Box Model
Margin
Padding

Width

Border

div {
height: 300px;
margin: 20px 20px 20px 20px; } top, right, bottom, left
padding: 20px 20px 20px 20px;
}

Position: Fixed Positioning

.child

.parent

.child { .parent {
position: fixed; position: relative;
top: 0; }

right: 0;
left: 0;
}

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/

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

Clear Floats

.clearfix:after {
content: “.” ;
visibility: hidden;
display: block;
height: 0;
clear: both;
}

http://css-tricks.com/all-about-floats/

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/

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/

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/

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/

Setup LESS

<link rel=”stylesheet/less” type=”text/css” href=”style.less”>
<script src=”less.js” type=”text/javascript”></script>

http://lesscss.org/#usage

Import & Variáveis

@import “prefixer.less”; @red: #ff0000;

Import variáveis

http://lesscss.org/#docs

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

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 a CSS

More Related Content

What's hot

Viewers also liked

Similar to Introdução a CSS

Recently uploaded

Introdução a CSS