Post on 18-Dec-2014
description
CSS – CASCADE STYLE SHEETS
Folha de Estilo – Definição
É uma forma prática e estruturada de formatar
páginas Web.
Permite aplicar conjuntos de formatações a um
determinado documento.
Folha de Estilo
Pode ser apresentada das seguintes maneiras
Composta por alguns comandos colocados no
mesmo ficheiro da página Web. INTERNA <head>
<style type= "text/css " >
body {font-family: verdana, “times new roman”
h3 {font-size:150%}
</style>
</head>
Localizada num ficheiro à parte. EXTERNA <head>
<link rel=“stylesheet” type=“text/css” href=“folha.css”>
</head>
Folha de Estilo Externa
Os estilos definidos num documento à parte podem
ser usados em qualquer página HTML.
Neste caso pode ser definido um estilo padrão
para ser aplicado nas páginas de um site
UNIFORMIZAÇÃO de um site – a consistência da
apresentação é um aspecto importante do desenho de
um web site e o CSS pode garantir que todos os
documentos terão o mesmo design.
Folha de Estilo Externa
Folhas de Estilo – Vantagens
Separação do formato e do conteúdo da página
web.
Maior controlo da aparência de uma página Web.
Há garantia de que todos os elementos terão a mesma
apresentação
Páginas mais leves e simples.
Fácil manutenção do documento
É muito mais fácil modificar uma simples página de
estilo que todo o documento HTML.
CSS – Cascade Style Sheet
É uma liguagem usada para definir estilos
Na sintaxe CSS os nomes e valores das regras são
listados dentro de chavetas { } antecedidas pelo
elemento (SELETOR) ao qual as declarações serão
aplicadas.
Exemplo:
P {
font-family: garamond;
font-style: italic;
text-align: justify;
color:red; }
REGRA
Uma folha de estilos consiste em uma ou mais linhas
de REGRAS da forma.
As regras podem estar dentro de um documento de
texto com extensão .css ou embutidas num
documento .html.
SELETOR { DECLARAÇÕES }
Comentários em CSS
Os comentários em CSS são fechados com uma
barra e um asterisco, e são inseridos no documento
apenas para organizar, lembrar, anotar, etc.
Exemplo:
/* Os links visitados e não visitados deste documento
serão mostrados a cor castanha e não sublinhados */
Unidades de comprimento
http://www.vas-y.com/dicas/curso/css/3a.html
Especificação de cores
http://www.vas-y.com/dicas/curso/css/3a.html
Tipos de elementos
Corpo
body
a:link
Parágrafo
P; H1; H2; …; H6
Carater
font
Tipos de Elementos
Corpo do documento (body);
Tipo de letra (font);
Texto (text);
Cores (color);
Fundos (background);
font
font-family
arial; times new roman; verdana;…
font-style
normal; oblique; italic;
font-size
medium; 8 pt; 15 pt; x-small; small; large;…
font-weight
normal; bold; bolder; lighter
font-transform
none; uppercase; lowercase; capitalize
color
font-size
Relativo
pequeno { font-size: 8pt; }
medio { font-size: 14pt; }
grande { font-size: 18pt; }
Absoluto
xxsmall; xsmall; small;
medium;
large; x-large; xx-large
text
text-align
center; justify; right; left;
text-indent
nível de indentação em percentagem (5%; …)
Line-height (altura da linha do texto
em percentagem (150%) ou em pontos (10 pt)
text-decoration
none; underline (sublinhado); line-through (rasurado); blink (piscar);
text-transform
none; uppercase; lowercase; capitalize
color
hiperligações
a:link
text-decoration; color;…
a:visited
text-decoration; color;…
a:active
text-decoration; color;…
a:hover
text-decoration; color;…
body
background (cor de fundo)
background: yellow
background-image (imagem de fundo)
background-image: url(“../imagens/back.gif”)
background-repeat (repetição da imagem)
background-repeat: no-repeat
repeat (default); repeat-x (horizontal) ; repeat-y (vertical) ;
no-repeat
background-position (posição da imagem)
background-position: 200px 70px;
Bloco de texto (Box)
http://www.vas-y.com/dicas/curso/css/4c.html#4b
Margin – Margem
Border – Contorno
Padding –
Espaçamento
Blocos de Texto (boxes)
Margens
margin-left; margin-right; margin-top; margin-bottom; margin (especifica as
4 margens ao mesmo tempo)
Contornos (border-top; border-bottom; border-left; border-right; border
(especifica os 4 contornos ao mesmo tempo).
border-style (border-top-style; …)
none; solid; double; dashed; dotted; inset; outset;groove; ridge
border-width (border-left-width; …)
thin; medium; thick;…1pt; 2pt; …
border-color (border-bottom-color; …)
Padding (espaço entre os contornos e o conteúdo)
padding-top; padding-bottom; padding-right; padding-left; paddings
Tipos de Contorno (Border)
Posicionamento de uma Box
absoluto
position: absolute.
top; bottom; left; right.
Exemplos:
Posicionamento de uma Box
relativo
position: relative.
float
Exemplos:
Posicionamento de uma Box
Ao posicionar de maneira relativa, deve-se evitar
misturar pixeis com percentagem,
Os resultados podem ser imprevisíveis!
tag <div> </div>
Esta tag vai permitir definir vários blocos de texto
numa página html.
Cada bloco de texto definido num <div> deve ser
identificado por um nome (id=…) ou (class=…)
<div id=“cabecalho”>…</div>
<div id=“rodape”>… </div>
<div class=“pop”>…. </div>
#cabecalho
{ …. }
#rodape
{ …. }
.pop
{ …. }
.html .css
Criação de um layout
A maior vantagem da utilização da tag <DIV> é a
criação de layouts.
<div id=“header”>…</div>
<div id=“navbar”>… </div>
<div id=“left”>…. </div>
<div id=“mid”>…. </div>
<div id=“right”>…. </div>
.html
Não se devem deixar as tag div sem
conteúdo.
Na ausência de conteúdo, colocar  ,
dentro da div
tag <span> </span>
span: fragmento de texto dentro de outro texto,
que pode ser formatado de maneira diferente.
<div class=“pop”>Redes de
<span class=“verde”>Comunicação</span>
</div>
.pop
{…. }
.verde
{ …. }
.html .css
Redes de Comunicação
Possível Resultado: