View
1.297
Download
0
Category
Preview:
Citation preview
Iniciação em CSSGustavo 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
O que é CSS?
Exemplo de CSSbody{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
Sintaxep {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
Propriedade
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 DIVsPropriedade 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 Teodorogustavoalvesteodoro@gmail.com
Recommended