Introdução ao CSS

O que é?
 CSS é a sigla de Cascading Style Sheets – Formatar estilos em cascata do HTML.
 O HTML não serve para formatações, foi criado para inserir conteúdos.
 Formatar textos, imagens, fundos, zonas específicas em HTML é um processo demorado e
repetitivo.
 O CSS pode ser um ficheiro à parte do HTML, criando estilos que depois, podem ser usados
sempre que se queira através do HTML.

Como se faz?
 A sintaxe do CSS é simples:
Seletor
body
Propriedade
{background –
Valor
#FF0000;}

Aplicar a HTML
 Cria-se um documento HTML.
 Cria-se um documento CSS.
 No HTML referimo-nos aos estilos criados em CSS:
<html> <head>
<link rel="stylesheet" type="text/css“
href="ex1.css"/>
</head> <body>
<h1>This header is 36 pt</h1> <h2>This
header is blue</h2> <p>This paragraph has a
left margin of 50 pixels</p> </body> </html>
body{ background-
color:yellow;}
H1 {font-size:36pt;}
H2 { color:blue;}
P {margin-left:50px;}

Formas diferentes de aplicar estilos
 Método 1 – Dentro do próprio documento HTML – usando o Style como atributo.
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta é página tem o fundo vermelho</p>
</body>
</html>

 Método 2 – Dentro do próprio documento HTML – usando o Style como tag.
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta página tem o fundo vermelho</p>
</body>
</html>

 Método 3 – Usando um ficheiro à parte. Melhor método – forma mais estruturada e menos
confusa.
Index.html
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
Style.css
body { background-color: #FF0000; }

Classes e ID’s
 E se precisássemos de definir uma cor diferente para cada cabeçalho de um site?
 E se eu quiser formatar botões que em tudo são iguais exceto na cor?
 Para formatar um elemento de forma única, usamos o ID.
 Para formatar classes de elementos com caraterísticas iguais, usamos as classes.

Exemplo do uso de ID’s
<html>
<head>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Parágrafo com estilo</p>
<p>Parágrafo sem estilo</p>
</body>
</html>

Exemplo do uso de Classes
<html>
<head>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Titulo centrado</h1>
<p class="center“>Parágrafo centrado</p>
</body>
</html>

As cores
 Alguns browsers não conseguem mostrar todas as cores, cingindo-se a nossa escolha portanto,
às chamadas Web Safe Colors.
 Existem muitos sites com listagens de cores Web Site, entre eles: http://erikasarti.net/html/tabela-
cores-seguras-web-safe/.
 Se se pretender fazer um bom estudo de cor para um site, deveremos recorrer a sites como o
http://colorschemedesigner.com/ que segundo as cores escolhidas até permite visualizar um site
exemplo.

Os fundos
 background-color – muda a cor do fundo.
 background-image – adiciona uma imagem ao fundo.
 background-repeat – repete uma imagem.
Opções O que fazem?
Background-repeat: repeat-x Repete a imagem na horizontal
background-repeat: repeat- Repete a imagem na vertical
background-repeat: repeat Repete a imagem na horizontal e vertical
background-repeat: no-
repeat
Não repete a imagem

Os fundos
 background-attachment – fixa a imagem ou move-a com o conteúdo.
Background-attachment: scroll
A imagem move-se com o
conteúdo
Background-attachment: fixed A imagem fica sempre visível

Os fundos
 background-position – Define a posição da imagem no fundo.
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
O canto superior esquerdo é 0% 0%. O canto inferior direito é 100%
100%.
xpos ypos Pode medir-se em pixeis , cm, mm, in.
inherit Herda a característica do componente acima na hirerarquia

Exercício 1
 Use o ficheiro exerccss1.html, a imagem Fundo1.jpg e através de um ficheiro CSS reproduza o
site. (Não poderá alterar o HTML)

Textos - Tipos de Letra
Propriedade Exemplo
font-style p.italic {font-style:italic} (normal, italic, oblique)
font-weight p.thick {font-weight:bold;} (normal, bold, lighter, 100…900)
font-size/line-height h2 {font-size:200%}
font-family P { font-family:"Times New Roman",Georgia,Serif; }

Textos – o que ter em consideração
 Nem todos os tipos de letra são “Web Safe”, poderás escolher um tipo de letra que
está no teu PC e não ser reconhecido pelo browser.
 Os tipos de letra por defeito são estes:
• Georgia
• Palatino Linotype
• Book Antiqua
• Times New Roman
• Arial
• Helvetica
• Comic Sans MS
• Impact
• Charcoal
• Lucida Sans Unicode
• Lucida Grande
• Tahoma
• Geneva
• Trebuchet MS
• Verdana
• Geneva
• Courier
• Monaco

Textos- Google Fonts
 Quando queremos sair fora da caixa em termos de fontes, há uma forma muito simples de o
fazer.
 Vamos a https://fonts.google.com/
 Depois, escolhemos uma entre muitas fontes lá listadas.
 Carregamos no símbolo de adicionar
 E em baixo aparece o código que teremos de adicionar ao HTML e CSS.

Textos
Propriedade Exemplo:
color h1 {color:#00ff00;}
letter-spacing h1 {letter-spacing:2px} (muda o espaço entre as letras)
line-height p.piqueno {line-height:80%}
text-align h2 {text-align:left} (left, right, center, justify)
text-indent text-indent:50px;
text-shadow p.Teste { text-shadow: #6374AB 20px -12px 2px; }
text-transform h2 {text-transform:capitalize;} (capitalize, lowercase, uppercase)
vertical-align
Texto {vertical-align:text-top;} (length, %, Sub, Super, top, text-top,
bottom, text-bottom)
word-spacing P { word-spacing:30px; }

Exercício
 Reproduza sem alterar o HTML, o seguinte site:

Links
 Exemplo:
<html>
<head>
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
</style>
</head>
<body>
<p><b><a href=“google.com" target="_blank">Link para
carregar</a></b></p>
</body>
</html>

Marcas
 Exemplo:
<html>
<head>
ul
{
list-style:square url(“quadrado.gif");
}
</style>
</head>
<body>
<ul>
<li>Leite</li>
<li>Café</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

Caixas – Box Model
 Uma box model é a forma como o CSS estrutura os elementos do HTML.
 Cada elemento tem:
 Margin
 Border
 Padding
 Content
 Este tipo de abordagem permite, mais facilmente dispor os elementos de uma página.

 Margin – Cria um
espaço à volta da
borda. É
completamente
transparente.
 Border – Uma borda à
volta do conteúdo.
 Padding – Cria uma
área à volta do content.
 Content – O conteúdo.

 As dimensões de uma box são as dimensões totais das várias partes.
 Exemplo:
 250px (Conteúdo)
+ 20px (Preenchimento direito e esquerdo)
+ 10px (Limite direito e esquerdo)
+ 20px (Margem esquerda e direita)
= 300px
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Box Model - Border
 As linhas limites podem ser definidas segundo as seguintes opções:
 Style (none, dotted, dashed, double, groove, ridge, inset, outset)
 Width
 Color
 Lados individuais (border-top-style, border-right-style,
border-bottom-style, border-left-style:solid;)

Box Model - Outline
 A OutLine não faz parte do modelo de caixa no entanto, poderá ser usada
para criar uma linha à volta da border.
 As dimensões da caixa não são alteradas.
 Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p><b>Nota:</b> para que funcione no IE8 tem que ser declarado um DOCTYPE</p>
</body>
</html>

Posicionamento
 Para colocar elementos atrás de outros, ao lado de ouros, antes de
outros, defenir o que acontece quando um elemento é grande
demais para uma zona - os valores de top, bottom, left e right não
chegam.
 Temos que usar um dos quatro métodos de posicionamento:
 Fixed – move-se com fundo.
 Relative – posição relativa ao seu posicionamento normal.
 Absolute – posição relativa ao elemento anterior que tiver um
posicionamento não estático – se não houverem elementos o elemento
anterior é o bloco <html>.
 Overlapping – Posicionar-se por cima de outro elemento. (z-index)

Moldagem
 Com o Float, um elemento pode ser mudado para a direita ou esquerda, permitindo que
outros elementos o rodeiem – como uma moldagem do Word.
 As moldagens apenas funcionam na horizontal.
 Exemplo:
img
{
float:right;
}
</style>
</head>
<body>
<p>
<img src=“clara.gif" width="95" height="84" />
<h1>
Texto para aqui escrito para visualizar o exemplo. Texto para aqui escrito para visualizar o exemplo.
Texto para aqui escrito para visualizar o exemplo.Texto para aqui escrito para visualizar o exemplo.
Texto para aqui escrito para visualizar o exemplo. Texto para aqui escrito para visualizar o exemplo.
</p>

Alinhar objetos
 Usando as margens: se forem ambas auto – o objeto fica centrado
automaticamente.
 Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
.centrado
{
margin:auto;
width:70%;
background-color:#993333;
}
</style>
</head>
<body>
<div class="centrado">
<p>Este texto estará centrado por definição do Css.</p>
<p>É muito simples, esta matéria.</p>
</div>
<p><b>Note: </b>Isto não funciona no IE8, se o !DOCTYPE não for declarado.</p>
</body>
</html>

Alinhar objetos
 Usando a posição absoluta.
 Exemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
.direita
{
position:absolute;
right:0px;
width:300px;
background-color:#660066;
}
</style>
</head>
<body>
<div class="direita">
<p>Este texto fica encostado à direita.</p>
<p>É muito simples, esta matéria.</</p>
</div>
</body>
</html>

Alinhar objetos
 Usando a moldagem.
 Exemplo:
<html>
<head>
.direita
{
float:right;
width:300px;
background-color:#99FF33;
}
</style>
</head>
<body>
<div class="direita">
<p>Este texto fica encostado à direita.</p>
<p>É muitos simples, esta matéria.</p>
</div>
</body>
</html>

Pseudo-Classes
 No CSS podemos modificar elementos como se fossem classes.
 Exemplo – mudar a forma como links se comportam:
<html>
<head>
a:link {color:#FFFFFF ; background-color:#006666; text-decoration:none;} /* unvisited
link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF0000;} /* mouse over link */
a:active {color:#FFFFFF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="google.com" target="_blank">Google</a></b></p>
</body>
</html>

Introdução ao CSS

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (19)

Semelhante a Introdução ao CSS

Semelhante a Introdução ao CSS (20)

Mais de Clara Ferreira

Mais de Clara Ferreira (20)

Último

Último (20)

Introdução ao CSS