rcom 11ºano - css

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





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)

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

Margin – Margem

Border – Contorno

Padding –

Espaçamento

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



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:


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

<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 &nbsp,

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:

rcom 11ºano - css

Education