iniciação em css
TRANSCRIPT
![Page 1: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/1.jpg)
Iniciação em CSSGustavo Teodoro
![Page 2: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/2.jpg)
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
![Page 3: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/3.jpg)
O que é CSS?
![Page 4: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/4.jpg)
Exemplo de CSSbody{background-color:#d0e4fe;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;
![Page 5: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/5.jpg)
Sintaxe
Seletor Declaração Declaração
Propriedade Valor Propriedade Valor
![Page 6: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/6.jpg)
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;}
![Page 7: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/7.jpg)
ID#para1
{
text-align:center;
color:red;
}
![Page 8: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/8.jpg)
CLASSE.center {text-align:center;}
p.center {text-align:center;}
![Page 9: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/9.jpg)
Formas de inserir CSS
● Folha de estilo externa● Folha de estilo interna● Estilo na linha
![Page 10: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/10.jpg)
Externa (arquivo .css)<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
![Page 11: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/11.jpg)
Interna<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head>
![Page 12: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/12.jpg)
Na linha<p style="color:sienna;margin-left:20px">Este é um parágrafo.</p>
![Page 13: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/13.jpg)
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
![Page 14: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/14.jpg)
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
![Page 15: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/15.jpg)
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
![Page 16: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/16.jpg)
Modelo de caixa
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
![Page 17: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/17.jpg)
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 :)
![Page 18: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/18.jpg)
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
![Page 19: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/19.jpg)
Qual é o código?
960 x 300
600 x 500
360 x 500
![Page 20: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/20.jpg)
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>
![Page 21: Iniciação em css](https://reader034.vdocuments.pub/reader034/viewer/2022050614/5a6ecefd7f8b9a40118b4eb9/html5/thumbnails/21.jpg)
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;}