CSS - Introdução à folha de estilo

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.

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.

SELETOR { DECLARAÇÕES }
 As regras podem estar dentro de um documento de
texto com extensão .css ou embutidas num
documento .html.

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
 a:active
 a:hover

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)

Margin – Margem

Border – Contorno

Padding –
Espaçamento

http://www.vas-y.com/dicas/curso/css/4c.html#4b

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

Posicionamento de uma Box
 absoluto
 position:absolute.
 top; bottom; left; right.
 Exemplos:

 relativo
 position: relative.
 float

Exemplos:


 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=…)

.html .css

#cabecalho
<div id=“cabecalho”>…</div> { …. }
<div id=“rodape”>… </div> #rodape
{ …. }
<div class=“pop”>…. </div> .pop
{ …. }

Criação de um layout
 A maior vantagem da utilização da tag <DIV> é a
criação de layouts.
.html

<div id=“header”>…</div>
<div id=“navbar”>… </div>
<div id=“left”>…. </div>
<div id=“mid”>…. </div>
<div id=“right”>…. </div>

Não se devem deixar as tag div sem
conteúdo.
Na ausência de conteúdo, colocar &nbsp,
dentro da div

tag <span> </span>
 span: fragmento de texto dentro de outro texto,
que pode ser formatado de maneira diferente.
.html .css

<div class=“pop”>Redes de .pop
{…. }
<span class=“verde”>Comunicação</span> .verde
</div> { …. }

Possível Resultado:

Redes de Comunicação

CSS - Introdução à folha de estilo

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a CSS - Introdução à folha de estilo

Semelhante a CSS - Introdução à folha de estilo (20)

Último

Último (20)

CSS - Introdução à folha de estilo