Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Folhas_de_estilo_mar_2013
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
FOLHAS DE ESTILO
Profa. Dra. Ana Carolina B. De Marchi
carolina@upf.br
FOLHAS DE ESTILO
Uma folha de estilos é uma página contendo
definições ou especificações de estilos, que instrui o
navegador como apresentar os diferentes elementos
de uma página.
2 carolina@upf.br
FOLHAS DE ESTILO
Objetivo: prover a separação entre o formato e o
conteúdo do documento.
O HTML destina-se unicamente a estruturar e marcar o
conteúdo, ficando por conta das folhas de estilo toda a
responsabilidade pelo visual do documento.
HTML marca e estrutura textos, cabeçalhos, parágrafos,
links, botões, formulários, imagens e demais elementos
da página e as folhas de estilo definem cores,
posicionamento na tela, estilos de linhas, bordas e tudo
mais relacionado à apresentação.
3 carolina@upf.br
FOLHAS DE ESTILO
Benefícios:
Total controle do layout de vários documentos a partir de
uma única folha de estilos.
Maior precisão no controle do layout como um todo
(elementos de texto, imagens, visual da página, etc)
Emprego de técnicas avanças como o uso de fontes
diferenciadas.
4 carolina@upf.br
FOLHAS DE ESTILO
Iniciaremos construindo nossa folha de estilos
dentro da própria página Web.
5 carolina@upf.br
Para acompanhar as aulas de CSS, faremos uso do Guia de Referência
CSS disponível no W3C Brasil.
PARA INICIAR...
Folhas de estilo dentro do documento HTML, definidos dentro do elemento
HEAD.
type="text/css" diz ao navegador que estamos usando um arquivo de texto
puro para descrever nossos estilos.
title="meuestilo" tem por finalidade identificar seus estilos através de um
nome de sua livre escolha.
media="all“ . Você pode ter uma folha de estilos para descrever como sua
página será apresentada na tela de um computador (media="screen") e
outra completamente diferente para formatar sua página para impressão
(media="print"). Existem outros tipos de mídia, tais como 'projection', 'tv',
'braille' and 'aural' (projeção, televisão, escrita braille e áudio). O tipo de
mídia 'all' (todas as mídias), que tem propósitos gerais.
carolina@upf.br 6
<style type="text/css" title="meuestilo" media="all">
…
</style>
DEFININDO ESTILOS NO BODY
Definindo estilos para a página como um todo, o
body da página.
Tudo que estiver dentro das tags <body>...</body>
terá o estilo ou conjunto de estilos que lhe for
aplicado.
carolina@upf.br 7
<style type="text/css" title="meuestilo" media="all">
body {
background-color: #c8bfe7;
color: #5d665b;
margin: 50px;
background-image: url(topo.jpg);
}
</style>
Sistema
RGB
DEFININDO ESTILOS NO BODY
background-color: #c8bfe7;
cor de fundo do elemento
color: #5d665b;
cor do texto presente no elemento
margin: 50px;
atalho para definir de uma só vez o tamanho da margem para
todos os lados (superior, inferior, esquerda e direita).
background-image: url(topo.jpg);
imagem de fundo do elemento
carolina@upf.br 8
ESTILIZANDO TEXTO – TIPO DE FONTE
As páginas Web só conseguem mostrar os tipos de
fontes que estejam instalados na máquina do
usuário. Teremos que escolher uma, dentre aquelas
que mais comumente encontram-se instaladas nos
computadores.
Em vez de escolher um tipo único de fonte,
podemos especificar um conjunto de fontes no
pressuposto que uma delas esteja instalada no
computador do usuário.
carolina@upf.br 9
ESTILIZANDO TEXTO – TIPO DE FONTE
Tipos de fontes mais comuns instaladas nos
computadores.
carolina@upf.br 10
Fonte: Joe Gillespie. CSS desde o início. Traduzido por Maurício Samy Silva.
Disponível no site: http://www.maujor.com/index.php
ESTILIZANDO TEXTO – TIPO DE FONTE
Especificação típica para escolha de uma família de:
fontes do tipo sem serifas:
fontes com serifas
Nomes de fontes composto por mais de uma palavra
devem ser escritos entre aspas - "Times New Roman”.
carolina@upf.br 11
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Geneva, Arial, sans-serif;
ESTILIZANDO TEXTO – TAMANHO DA
FONTE
Para impressão é possível especificar um tamanho em
pontos e sempre ficará o mesmo tamanho.
A quantidade de espaço de impressão assim como as
quebras de linha serão sempre exatamente como
especificamos.
Na Web os tamanhos de fonte não seguem um padrão
rígido variando de um computador para outro, de acordo
com o tamanho da tela, navegador etc.
Os navegadores permitem aos usuários definir suas
preferências pessoais de tamanhos, o que vem a
atenuar as grandes variações, mas mesmo assim poderá
haver diferenças entre o que você projetou e espera, e
aquilo que será de fato apresentado ao usuário.
carolina@upf.br 12
ESTILIZANDO TEXTO – TAMANHO DA
FONTE
Tamanhos relativos para fontes: para que a página
Web atinja um maior número de usuários, é melhor
especificar um tamanho de fonte relativo àquele
escolhido como padrão pelo usuário. Para tanto, é
possível usar:
percentagem (%) da fonte padrão do usuário ou uma unidade
de medida chamada 'em', o que é o mesmo que 100%. 1.2 em
é o mesmo que 120%.
método descritivo de tamanhos: 'Medium' (médio) é o mesmo
que 100% ou 1em; 'Smaller' (pequeno) é um tamanho menor
que 'medium' e 'Larger' (grande) é um tamanho maior que
'medium'. Há também os tamanhos x-small, xx-small, x-large e
xx-large (algo como - extra pequeno, super extra pequeno,
extra grande, super extra grande). A vantagem deste sistema
sobre as percentagens e ems é que os navegadores não
tornarão os textos ilegíveis.
carolina@upf.br 13
font-size: 100%; ou font-size: small;
ESTILIZANDO TEXTO – TAMANHO DA
FONTE
Tamanhos absolutos para fontes: se o público para o
qual você projetar seu site for bastante específico e usa
basicamente as mesmas configurações e tipo de
computador que o seu, você poderá especificar o
tamanho de suas fontes em pixels.
Pixels não variam muito de um para outro desktop e
assim os tamanhos de fontes serão similares quando
não idênticos. Uma vez que você utilize laptops ou
dispositivos portáteis ou mesmo monitores com
resolução muito alta, os tamanhos em pixel irão variar de
acordo com o dispositivo usado.
carolina@upf.br 14
font-size: 100px;
ESPAÇAMENTO ENTRE LINHAS
O espaçamento padrão entre linhas é de
aproximadamente 120% do tamanho da fonte.
Aumentar um pouco este espaçamento em geral
resulta em melhoria da legibilidade, especialmente
se as linhas são muito longas.
Para definir o espaçamento entre as linhas: %; em
ou absoluta (px). A altura da linha vem a ser a altura
do caracter (fonte) mais o espaço extra acima.
carolina@upf.br 15
line-height: 180%;
EXERCÍCIO SOBRE FOLHA DE ESTILO
INTERNA
Crie um documento HTML que contenha o seguinte
trecho:
Salve o documento com o nome: formata.html e abra
no navegador.
16 carolina@upf.br
Seu nome completo
Aluno(a) da da Universidade de Passo Fundo
Áreas de interesse: listar áreas
EXERCÍCIO SOBRE FOLHA DE ESTILO
INTERNA
No arquivo formata.html crie uma folha de estilo interna. A
folha será responsável por formatar o documento inteiro, ou
seja, estará vinculado ao elemento BODY.
Para tanto, formate:
cor de fundo da página;
tipo de fonte;
cor do texto;
tamanho da fonte;
espaçamento entre linhas;
margens;
imagem de fundo;
Salve novamente o documento e teste.
Ver exemplo_folha1.html
17 carolina@upf.br
ESPAÇAMENTO ENTRE LETRAS E
PALAVRAS
CSS também possibilita o controle sobre o
espaçamento horizontal entre as letras e as
palavras.
Isto é apropriado para obter efeitos visuais em
títulos.
carolina@upf.br18
letter-spacing: 0.5em; word-spacing: 0.5em
PARÁGRAFOS
Todas as definições vistas para o BODY afetam toda
a página.
Blocos de texto podem ser divididos em parágrafos
para facilitar a leitura. Existem várias maneiras de
visualmente separar parágrafos uns dos outros.
É possível acrescentar espaços extras entre as
linhas ou indentar a primeira linha.
carolina@upf.br 19
<style type="text/css" title="meuestilo" media="all">
p {
text-indent: 3em;
}
</style>
TÍTULOS
Títulos por padrão são grandes e em negrito com
um espaçamento extra acima e abaixo.
Os títulos dos níveis h1, h2 e h3 são maiores que o
texto normal e dos níveis h5 e h6 são menores.
carolina@upf.br 20
<style type="text/css" title="meuestilo" media="all">
h2 {
color:#975b32;
font-family:Georgia,"Times New Roman",Times,serif;
}
</style>
EXERCÍCIO SOBRE PARÁGRAFOS E
TÍTULOS
No arquivo formata.html insira um parágrafo e um
título.
Crie estilos para o parágrafo e o título utilizando as
definições apresentadas nos slides anteriores.
Coloque espaçamentos entre letras e palavras no
título.
Salve novamente o documento e teste.
Ver exemplo_folha2.html
21 carolina@upf.br
FORMATANDO LISTAS
Cada tipo de lista (UL ou OL) possui opções de
formatação que podem ser colocados no HTML:
<li type="square"> coloca um marcador tipo um
'quadradinho',
<li type="i"> coloca um numeral romano minúsculo
As folhas de estilo possuem mais opções e controle.
carolina@upf.br 22
ol {
list-style-type: upper-alpha;
margin: 1em 0 1em 40px
}
Margens de cima, à direita, em baixo e à esquerda e
podem ser definidos em ems, percentagens ou pixels.
FORMATANDO LISTAS
Para modificar os itens da lista, é possível definir as
margens para eles também, aumentando o
espaçamento entre eles por exemplo.
Esta definição adiciona um espaço extra de 0.3 em
acima e abaixo de cada item da lista ordenada.
Para uma lista não ordenada, basta substituir o
seletor por ul li .
carolina@upf.br 23
ol li { margin: .3em 0 .3em 0 }
FORMATANDO LISTAS
É possível também adicionar uma imagem para
cada item da lista.
Para inserir uma imagem para cada item da lista, é
preciso definir inline.
carolina@upf.br 24
ul { list-style-image: url(flor.gif) }
ul li { margin: 1em 0 1em 0}
FORMATANDO LINKS
Por padrão, os links são na cor azul e sublinhados.
Quando se clica em um link eles mudam para a cor
vermelha. Depois de visitado o link mudará para cor
púrpura, indicando que já foi visitado.
O cursor também muda. A seta padrão muda para uma
'mãozinha' quando aponta-se sobre o link.
Texto sublinhado pode ser prático mas não é o ideal para
um bom design. O essencial é que o link seja destacado
do restante do texto para mostrar que ali há algo
especial.
Folhas de estilo permitem estilizar o visual dos links.
Basta estabelecer definições para as âncoras.
carolina@upf.br 25
FORMATANDO LINKS
carolina@upf.br 26
CSS Significado
a:link {
color: #686;
text-decoration: none }
Pseudo-classe link: aplica-se ao
elemento <a> com hiperlinks ou
âncoras ainda não visitados.
cor do link foi alterada e o sublinhado retirado com a
definição text-decoration:none
a:visited {
color: #699;
text-decoration: none }
Para mudar a cor do link visitado.
a:hover {
color: #c93;
text-decoration: underline }
Para estilizar um estado de link
chamado 'hover‘, quando o ponteiro
do mouse é passado sobre o link .
a:active {
color: #900;
text-decoration: underline;
background-color: transparent
}
Aplica-se quando o link for ativado.
FORMATANDO LINKS
Exemplo:
A ordem das definições de estilos para links é muito importante. Normalmente a ordem não
importa em CSS, mas neste caso é importante que a:hover e a:active venham por último, caso
contrário não funcionarão.
A cor do fundo do texto (background-text) pode ser utilizado para simular uma marca de
iluminação. Também é possível mudar o tipo do cursor: (cursor: pointer).
carolina@upf.br 27
a:link {
color: #696;
text-decoration: none; }
a:visited {
color: #699;
text-decoration: none; }
a:hover {
color: #c93;
text-decoration: underline;
background-color: transparent }
a:active {
color: #009;
text-decoration: underline; }
EXERCÍCIO SOBRE FORMATAÇÃO DE
LISTAS E LINKS
No arquivo formata.html insira listas e links e
formate-os livremente.
Para tanto, modifique:
margens da lista;
estilos dos itens;
Estilos de link normal, visitado, hover e ativo.
Salve o documento e teste.
Ver exemplo_folha3.html
28 carolina@upf.br
BOXES CSS - DIV
É possível compartimentar a página em pequenas
divisões com estilos próprios.
As divisões podem ser pequenas ou grandes.
Para criar a divisão utiliza-se: <div>...</div>.
Estas áreas são como uma mini página que em CSS
são chamadas de boxes CSS.
carolina@upf.br 29
BOXES CSS - DIV
Boxes CSS podem ter uma largura e uma altura
(width e height), uma cor de fundo ou até mesmo
uma imagem de fundo.
Um box CSS por padrão estende-se da margem
esquerda à margem direita do corpo da página. Se
não for especificada uma margem para o corpo da
página (body), um box CSS ocupará toda a largura
da janela do navegador. Se não for especificada
uma altura para um box CSS, ele não terá altura
(será considerada zero). Ao colocar texto dentro do
box ele se expandirá em altura de modo a acomodar
o texto colocado - ou uma imagem.
carolina@upf.br 30
BOXES CSS - DIV
Para manter o texto afastado das bordas do box
deves usar o enchimento (padding).
carolina@upf.br 31
BOXES CSS - DIV
Além dos limites do padding é possível definir uma
borda.
carolina@upf.br 32
BOXES CSS - DIV
Bordas estão disponíveis em uma variedade de
estilos e podem ser definidas separadamente para
cada lado, em termos de espessura, estilo e cor.
carolina@upf.br 33
border-top-style: dotted;
BOXES CSS - DIV
A espessura da borda aumenta o comprimento do
box.
Para separar um box de outro usam-se margens.
carolina@upf.br 34
BOXES CSS - DIV
Posicionamento absoluto
os boxes CSS podem ser colocados em qualquer lugar
da página através da definição CSS position: absolute;
Posicionamento relativo
considera que boxes CSS localizam-se próximos a um
outro box.
Para fazer com que boxes flutuem um ao lado do outro
em lugar de em baixo, define-se float: left; ou float: right;
carolina@upf.br 35
position: absolute;
top:50px;
left:100px;
BOXES CSS - DIV
carolina@upf.br 36
PERSONALIZANDO DIVs
Ao criar DIVs com definições de estilos, não estarão
disponíveis elementos HTML para adicionar à eles.
É preciso identificar as DIVs com identificadores (ID)
ou CLASS.
carolina@upf.br 37
ATRIBUTOS IDENTIFICADORES: ID E
CLASS
ATRIBUTO DEFINIÇÃO
ID Atribui um nome a um elemento, que deve ser único no
documento.
Utilizamos: # antes do nome que identifica 'id' para definição
de estilos.
CLASS Atribui um nome de classe a um elemento. Pode-se atribuir o
mesmo nome de classe a vários elementos.
Utilizamos: . antes do nome da classe.
carolina@upf.br 38
FUNÇÕES DO ATRIBUTO ID
Como seletor das folhas de estilo.
Como âncora de destino dos links
Como meio de referenciar um determinado elemento
pertencente a um script.
Como nome do elemento OBJECT que foi declarado.
Para fins de processamento geral (ex: para identificar os
campos sempre que se quiser extrair dados das páginas
de HTML para uma base dedados, etc.).
carolina@upf.br 39
Exemplos:
#header {...}
<div id="header">...</div>
Caso tenha declarado estilos para o corpo
da página 'body', os boxes herdarão
aqueles estilos. Qualquer estilo que se
declare para o box tem prioridade sobre
aquele declarado para 'body'. Isto é o
efeito 'cascata'.
FUNÇÕES DO ATRIBUTO CLASS
Como seletor das folhas de estilo (quando o autor
anexar informações referentes ao estilo a um
conjunto de elementos).
Elementos identificados com CLASS pertencem a
essa classe.
Por exemplo: quando queremos utilizar o mesmo
box por várias vezes em uma página.
carolina@upf.br 40
Exemplo:
.exemploclass {....}
<div class=“exemploclass">...</div>
<div class=“exemploclass">...</div>
<div class=“exemploclass">...</div>
EXERCÍCIO SOBRE DIV
Com base no arquivo
exemplo_folha4.html altere a
formatação de alguns estilos.
Crie um arquivo novo utilizando
DIVs, similar ao
exemplo_folha5.html.
41 carolina@upf.br
menu
conteúdo
créditos
topo
ELEMENTOS DE ESTRUTURA DO HTML5
<header> </header>
cabeçalho da página ou de uma seção.
<article> </article>
item do conteúdo dentro da página ou da seção;
carolina@upf.br 42
ELEMENTOS DE ESTRUTURA DO HTML5
<article>
<header>
<h1>Internet Explorer 9</h1>
</header>
<p>Windows Internet Explorer 9 (abreviado
como IE9) teve sua distribuição publicada
em 14 de março de 2011</p>
</article>
carolina@upf.br 43
ELEMENTOS DE ESTRUTURA DO HTML5
<footer> </footer>
rodapé da página ou de uma seção.
carolina@upf.br 44
ELEMENTOS DE ESTRUTURA DO HTML5
<footer>
<p>Postado por: Ana Carolina</p>
<p>Em: Fevereiro de 2013</p>
</footer>
carolina@upf.br 45
ELEMENTOS DE ESTRUTURA DO HTML5
<section> - seção do conteúdo;
<footer> - rodapé da página ou de uma seção;
<nav> - conjunto de links que formam a
navegação, seja o menu principal do site ou links
relacionados ao conteúdo da página;
<aside> - conteúdo relacionado ao artigo (como
arquivos, por exemplo).
carolina@upf.br 46
ELEMENTOS DE ESTRUTURA DO HTML5
<aside> </aside>
conteúdo relacionado ao artigo (como arquivos, por
exemplo).
carolina@upf.br 47
ELEMENTOS DE ESTRUTURA DO HTML5
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park
in Disney World, Florida.</p>
</aside>
carolina@upf.br 48
ELEMENTOS DE ESTRUTURA DO HTML5
<nav> </nav>
conjunto de links que formam a navegação, seja o
menu principal do site ou links relacionados ao
conteúdo da página;
carolina@upf.br 49
ELEMENTOS DE ESTRUTURA DO HTML5
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
carolina@upf.br 50
ELEMENTOS DE ESTRUTURA DO HTML5
<section> </section>
seção do conteúdo;
carolina@upf.br 51
ELEMENTOS DE ESTRUTURA DO HTML5
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature
(WWF) is....</p>
</section>
carolina@upf.br 52
ELEMENTOS DE ESTRUTURA DO HTML5
carolina@upf.br 53
EXERCÍCIO SOBRE ESTRUTURA
carolina@upf.br 54
HEADER
NAV
ARTICLE ASIDE
FOOTER
DIV
EXERCÍCIO SOBRE ESTRUTURA
carolina@upf.br 55
SPAN
SPAN é um elemento ao nível de texto (inline).
Classes podem ser aplicadas em fragmentos de
textos. Por exemplo: se desejarmos que algumas
palavras do texto tenham a cor vermelha, criamos
uma classe chamada .redtext
carolina@upf.br 56
.redtext { #c00 }
<span class="redtext"><span style="color: rgb(204, 0,
0);">Palevra</span></span>
SPAN
Use <span>...</span> sempre que você quiser
estilizar diferentemente uma porção de texto que
difere do texto como um todo. Isto pode ser para cor,
família de fonte, tamanho, peso ou qualquer outra
propriedade.
Em CSS existem elementos nível de bloco que são
boxes com uma única ''id' ou uma 'classe'
reutilizável. Podemos ainda ter os elementos inline
que se referem a um nível de caracteres.
carolina@upf.br 57
EXERCÍCIO SOBRE SPAN
No documento do exercício anterior, utilize SPAN
para configurar inline alguns trechos de texto.
Salve o arquivo e teste.
58 carolina@upf.br
Ver exemplo_folha6.html
FOLHAS DE ESTILO EXTERNAS
Todas as folhas de estilo que fizemos até agora,
foram colocadas dentro da seção <head> das
páginas.
Fica mais fácil de visualizar, mas é muito raro termos
páginas isoladas.
O mais usado são várias páginas com uma
apresentação semelhante em todo o Web site,
usando a mesma folha de estilos.
Em vez de termos que colocar os estilos
isoladamente em cada página, utilizamos um único
arquivo, que é chamado nas páginas.
carolina@upf.br 59
FOLHAS DE ESTILO
Cascading Style Sheets (CSS) - Folha de Estilos em
Cascata
O que é o efeito cascata?
É o estabelecimento de uma prioridade para aplicação da
regra de estilo ao elemento.
Para determinar a prioridade são considerados diversos
fatores, entre eles, o tipo de folha de estilo, o local físico
da folha de estilo no seu todo, o local físico da regra de
estilo na folha de estilo e a especificidade da regra de
estilo.
60 carolina@upf.br
FOLHAS DE ESTILO
A prioridade para o efeito cascata em ordem crescente é a
seguinte:
folha de estilo padrão do navegador do usuário;
folha de estilo do usuário;
folha de estilo do desenvolvedor;
estilo externo (importado ou linkado).
estilo incorporado (definido na seção head do documento);
estilo inline (dentro de um elemento HTML);
declarações do desenvolvedor com !important;
declarações do usuário com !important;
Entre as folhas de estilo definidas pelo desenvolvedor do site, os
estilos inline (dentro de um elemento HTML) tem a prioridade mais
elevada, isto é, prevalecerá sobre a folha de estilo definida na seção
head, e, esta prevalecerá sobre uma folha de estilo externa. A
prioridade mais baixa é para estilos padrão do navegador.
61
M
a
io
r
p
ri
o
ri
d
a
d
e
carolina@upf.br
VINCULANDO FOLHAS DE ESTILO AO
DOCUMENTO
Podem ser vinculadas de três maneiras:
Incorporadas
Inline
Importadas ou linkadas
62 carolina@upf.br
VINCULANDO FOLHAS DE ESTILO AO
DOCUMENTO
Incorporadas ou interna:
quando as regras CSS estão declaradas no próprio
documento HTML.
uma folha de estilo incorporada ou interna, é ideal para
ser aplicada a uma única página.
as regras de estilo incorporadas e válidas para o
documento, são declaradas na seção head do
documento com a tag de estilo <style>.
63 carolina@upf.br
VINCULANDO FOLHAS DE ESTILO AO
DOCUMENTO
Inline:
quando as regras CSS estão declaradas dentro da tag do
elemento HTML com uso do atributo style.
Um estilo inline só se aplica a um elemento HTML. Ele perde
muitas das vantagens de folhas de estilo pois mistura a
apresentação com a marcação. Use este método
excepcionalmente, por exemplo: quando quiser aplicar um
estilo a uma única ocorrência de um elemento.
<p style="color:#000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px
nas margens.
</p>
64 carolina@upf.br
VINCULANDO FOLHAS DE ESTILO AO
DOCUMENTO
Importadas ou linkadas:
Uma folha de estilo é dita externa, quando as regras CSS estão
declaradas em um documento a parte do documento HTML. A
folha de estilo é um arquivo separado do arquivo html. O arquivo
de folha de estilo deve ser gravado com a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias
páginas. Com uma folha de estilo externa , você pode mudar a
aparência de um site inteiro mudando regras de estilos contidas
em um arquivo apenas (o arquivo da folha de estilo).<head>
<link rel="stylesheet" type="text/css"
href="estilo.css">
</head>
65 carolina@upf.br
EXERCÍCIO SOBRE FOLHA DE ESTILO
EXTERNA
Crie uma folha de estilo externa, configurando:
Cor de fundo;
Parágrafo;
Fonte;
Tamanho de letra;
Título h1;
Link;
Margens.
Link a folha externa aos arquivos:
exercicio_folha_externa1.html e
exercicio_folha_externa2.html
66 carolina@upf.br
REFERÊNCIAS
W3C Recommendation. HTML 4.01 Specification.
Maurício “Maujor” Samy Silva. CSS. Disponível em:
http://www.maujor.com/index.php
Comitê Gestor da Internet no Brasil. Guia de
Referência CSS 2.1. São Paulo: 2009. Disponível
em: http://www.w3c.br
67 carolina@upf.br
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar