Iniciação em css

Iniciação em
CSS
Gustavo Teodoro

Folha de estilo em cascata
“Folha de estilo em cascata é um
mecanismo simples para adicionar estilos
(por exemplo: fontes, cores, espaçamentos)
aos documentos web.” W3C

Exemplo de CSS
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;

Sintaxe
Seletor Declaração Declaração
Propriedade Valor Propriedade Valor

Sintaxe
p {color:red;text-align:center;}
p
{
color:red;
text-align:center;
}
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

ID
#para1
{
text-align:center;
color:red;
}

CLASSE
.center {text-align:center;}
p.center {text-align:center;}

Formas de inserir CSS
● Folha de estilo externa
● Folha de estilo interna
● Estilo na linha

Externa (arquivo .css)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Interna
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

Na linha
<p style="color:sienna;margin-left:20px">Este é um parágrafo.</p>

Propriedades - Background
Propriedade Descrição
background Colocar todas propriedades de
Background em uma única declaração
background-
attachment
Se é fixo ou rolagem em relação ao
resto da página
background-color Cor de fundo de um elemento
background-image Imagem de fundo para um elemento
background-position Posicição inicial para uma imagem de
fundo
background-repeat Como uma imagem de fundo será
repetida
Exemplo de valores
Todos abaixo juntos
scroll / fixed
#0000FF/ rgb(255,0,0) /
blue
url(nomedaimagem.jpg)
top / bottom / left / right
/ center
repeat / repeat-x /
repeat-y / no-repeat

Propriedades de texto
Propriedade Descrição
color Cor do texto
letter-
spacing
Espaçamento entre letras
line-height Altura da linha
text-align Alinhamento do texto
text-
decoration
Decorações do texto
text-indent Identação em um texto na caixa
text-
shadow
Sombra no texto
text-
transform
Caixa alta, caixa baixa
Exemplo de valores
#0000FF
10px
50px
center / left / right / justify
line-through / underline /
overline
10px / 10%
5px 5px 10px #00FF00
capitalize / uppercase / lowercase

Propriedades de fontes
Proprieda
de
Descrição
font Todas as propriedades de fonte em uma
declaração
font-
family
Família de font em um texto
font-size Tamanho da fonte
font-style Estilo da fonte
font-
weight
Peso da fonte
Exemplo de valores
Todos abaixo juntas
“Trebuchet MS”, “Arial”,
“Helvetica”
15px
italic / oblique
bold / bolder/ lighter/ 100 / 200 /
300 / 400 / 500 / 600 / 700 / 800 /
900

Modelo de caixa
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

Propriedades úteis para DIVs
Propriedade Exemplo de valores
width (largura) 200px
height (altura) 100px
padding 10px
border 10px solid #0000FF
clear left / right / both / none
float left / right / none
Dica Real
margin: 0 auto;
centraliza a div :)

Lógica de sequência padding,
border e margin
margin: 10px;
10px
10px
10px
10px
margin: 10px 5px;
10px
5px
10px
5px
margin: 10px 5px 7px 15px;
10px
5px
7px
15px

Qual é o código?
960 x 300
600 x 500
360 x 500

HTML
<!DOCTYPE html>
<html>
<head>
<title>Exemplo</title>
</head>
<body>
<div class=”geral”>
<div class=”cabecalho”>
</div>
<div class=”conteudo”>
</div>
<div class=”lateral”>
</div>
</div>
</body>
</html>

CSS
.geral {
width:960px;
margin:0 auto;
}
.cabecalho {
width:960px;
height:300px;
background-color:green;
}
.conteudo{
width:600px;
height:500px;
background-color:grey;
border: 20px solid yellow;
}
.lateral {
width:360px;
height:500px;
background-color:blue;
margin: 15px;
}

É isso, até a
próxima!
Gustavo Teodoro
gustavoalvesteodoro@gmail.com

Iniciação em css

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Iniciação em css

Semelhante a Iniciação em css (20)

Mais de Gustavo Teodoro

Mais de Gustavo Teodoro (7)

Último

Último (20)

Iniciação em css