CSS

Transcrição

CSS - Kikinho

Curso Tecnológico de Informática - Aplicações Informáticas A - 11º Ano
Unidade 4 – Concepção de web sites.
Subunidade 2 - Construção de páginas web
-Introdução às Cascaded Style Sheets (CSS)
o Vantagens e desvantagens no uso de folhas de estilo
o Definição de estilos
o Sintaxe usada nas folhas de estilo
o Identificadores e classes
o Definições do fundo de um elemento – propriedades da classe Background
o Formatação de texto
o Limites
o Margens
o Listas
o Dimensionamento de elementos – Dimension
o Alinhamento relativo de elementos na página – propriedades de
Classification
o Posicionamento e forma de elementos na página – Positioning
o Unidades de medida
o Pseudo-classes
o Pseudo-elementos
Escola Secundária S. João do Estoril
o Bibliografia
Paula Cardoso Alcobia
-1-
O que é?
Cascading Style Sheets (F
olhas de Estilo em cascata) ou CSS são estilos para
(Folhas
páginas web e envolvem um conceito inovador: possibilitam a mudança da
aparência simultânea de todas as páginas relacionadas com o mesmo estilo.
Ao invés de colocar a formatação dentro do código, o programador cria um link
(ligação) para uma página que contém os estilos, procedendo de forma idêntica
para todas as páginas de um portal. Quando quiser alterar a aparência do portal
basta portanto modificar apenas um ficheiro.
Esta tecnologia apareceu em 1996 e foi padronizada pela World Wide Web
Consortium (a entidade que define os padrões da web), e que não é parte do HTML
padrão, mas sim um conjunto de novas tags que ajudam a ter um melhor controle
sobre o layout (aparência) das nossas páginas.
O CSS é suportado pelos browsers Microsoft Internet Explorer e Netscape Navigator,
nas versões 4 ou posteriores; e pelo Opera, nas versões 3.50 ou posteriores.
Vantagens e desvantagens no uso de folhas de estilo
Vantagens:
* Os estilos CSS foram adicionados pelo W3C às recomendação HTML 4 e
XHTML para resolver problemas muito sérios que afectavam a qualidade das
páginas escritas em HTML e dificultavam a sua manutenção.
* A utilização de folhas de estilos externas permite poupar tempo, ganhar
flexibilidade e aumentar a consistência das páginas que constituem um website.
* Quando guardamos os estilos num ficheiro externo e os aplicamos a todas as
páginas de um website, a modificação de diversas qualidades do aspecto gráfico
passa a ser uma tarefa fácil.
* As páginas que usam estilos CSS, para além de serem mais fáceis de escrever,
são também mais leves e aparecem mais depressa no browser.
desvantagens:
A desvantagem é em relação aos browsers que podem não implementar de forma
completa as CSS, e desta forma convém garantir que o documento não se torne
ilegível devido à implementação de recursos a funcionalidades demasiado
avançadas.
-2-
Limitações dos browsers actuais
Apesar de os browsers actuais (Netscape 7/Mozilla, MSIE 5 e superior, Opera 7)
oferecerem um bom suporte para os estilos CSS, é preciso chamar a atenção para o
facto de ainda subsistirem alguns problemas quando aplicamos técnicas avançadas
de formatação baseada em CSS.
Os problemas mais graves são causados pelo MSIE, que contém bugs que lhe dão
alguns comportamentos que se desviam dos padrões CSS. O bug mais grave resulta
da implementação errada do modelo de dimensionamento dos elementos. Esse bug
é bem conhecido e pode quase sempre ser ultrapassado recorrendo a truques que
não comprometem o funcionamento das páginas nos restantes browsers.
Para além deste bug e de outros bugs menos importantes devemos ter sempre em
atenção o facto de as implementações dos padrões CSS serem geralmente
incompletas. Isto significa que não podemos contar com algumas propriedades.
Apesar disso podemos estar seguros de que as propriedades com que podemos
contar são suficientemente úteis para não querermos passar sem elas.
As limitações associadas ao suporte que os browsers actuais oferecem têm de estar
sempre presentes na mente do criador de páginas baseadas em CSS. Se usar
apenas as funcionalidades que são bem suportadas, que já são muitas, não será
preciso tomar muitas precauções. Se decidiu utilizar funcionalidades mais
avançadas definidas pelos padrões CSS lembre-se que é preciso testar tudo de
forma exaustiva em todos os browsers relevantes para não ter surpresas
desagradáveis.
Definição de estilos
Existem 4 maneiras de incluirmos estilos CSS às páginas:
1. Incluir um style sheet no ficheiro HTML (interno).
2. Criar um link para um style sheet noutro ficheiro (externo).
3. Importar um style sheet doutro ficheiro.
4. Adicionar estilos dentro dos comandos do arquivo HTML (local).
1- Incluir um style sheet no arquivo HTML
Neste método, o código do style sheet é incluído dentro do código da própria
página, no começo do ficheiro, antes do corpo (<BODY>) do código HTML.
-3-
Por exemplo:
<HTML>
<STYLE TYPE=”text/css”>
<!—
H1 {font-family:impact; background: yellow;color:red}
P {color: green}
—>
</STYLE>
<HEAD>
<TITLE>Mais um Exemplo se Style Sheet</TITLE>
</HEAD>
<BODY>
<H1>Neste exemplo, estou começando a dominar
</H1>
<P>O Cascading Style Sheets</P>
</BODY>
Quando o style sheet é incluído desta forma, as definições colocadas ali, valem
para toda a extensão do ficheiro HTML. Este é o método mais apropriado quando
queremos incluir style sheets numa página de cada vez.
O atributo TYPE=”text/css” significa que se trata de um tipo MIME, para que os
browsers que não suportam CSS ignorem o código. Mas alguns browsers mais
antigos como IE 2.0 para Mac, não reconhecem o atributoTYPE=”text/css” e vão
mostrar o código CSS como se fosse texto normal, daí ser importante colocar as
tags de comentário (<!— e —>) para isso não acontecer e ser ignorado pelo
browser.
2- Criar um link para um style sheet em outro arquivo (externo)
Uma folha de estilos externa constitui a melhor opção quando os mesmos estilos
são aplicados a várias páginas. Com uma folha de estilos externa podemos alterar
o aspecto gráfico de muitas páginas bastando para isso alterar apenas o ficheiro
em que estão definidos os estilos. Cada página contém um elemento <link> que a
liga à folha de estilos.
Para criar um link, deve-se substituir a tag <STYLE> pela tag <LINK>, e colocar a
declaração de estilo dentro da tag <HEAD> do documento. E neste método, não é
necessário usar as tags de comentário.
Exemplo:
<head>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
-4-
3- Importar um style sheet de outro arquivo
A importação de um estilo externo é parecida com o método anterior. A diferença é
que não pode combinar o método de link com outros métodos de inserções de
estilos, mas a importação pode ser combinada.
Exemplo:
<HTML>
<!—
@import url(def_estilos.css)
P {color: red}
—>
</STYLE>
<HEAD>
</HEAD>
<BODY>
<H1>Neste exemplo, estou começando a dominar</H1>
<P>O Cascading Style Sheets</P>
</BODY>
No exemplo acima, o browser importa primeiro as definições no ficheiro .css, e
adiciona as regras internas para serem usadas por toda a página. Mas o P tem uma
regra tanto no ficherio externo como nos estilos embutidos. Neste caso, será
sempre usado o estilo embutido, em detrimento da definição externa. O resultado
seria que o texto que estiver dentro das tags P, seriam mostrada em vermelho.
Obs
Obs.: apenas o browser IE4 suporta importação.
4- Adicionar estilos dentro dos comandos HTML (local -i nline)
Uma folha de estilos interna deve ser usada quando os estilos são usados uma
única vez. Nesse caso as definições fazem-se dentro de um elemento <style> que
deve ser colocado dentro do elemento <head> da página HTML.
Exemplo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 STYLE=”font-family:impact; background:
yellow;color:red”>Neste exemplo, estou começando a
dominar</H1>
<P STYLE=”color: green”>O Cascading Style Sheets</P>
</BODY>
-5-
O browser lê as definições contidas no elemento <style> e faz a formatação dos
elementos da página aplicando essas definições.
Nota: O comportamento normal dos browsers consiste em ignorar os elementos
cujo significado desconhecem. Isto significa que um browser muito antigo que não
suporta estilos CSS ignorará o elemento <style>, mas não ignorará o texto que
está escrito lá dentro. Se for necessário evitar que esse browser escreva o texto das
definições devemos ocultá-lo colocando-o dentro de um comentário do HTML.
Prioridades
Ao utilizar estilos, é importante saber a ordem que os browsers utilizam na definição
de estilos:
1.Estilos incluídos na linha do comando
2.Estilos definidos no início da página
3.Estilos obtidos de um ficheiro externo (via link)
4.Estilos importados de um ficheiro externo
5.Estilos padrões do browser
Exemplo:
<HTML>
<!—
P {color: red}
—>
</STYLE>
<HEAD>
</HEAD>
<BODY>
<P STYLE=”color: green”>Cascading Style Sheets</P>
</BODY>
Observe que a tag P tem estilos definidos no ínicio da página e na linha de
comando.
Com qual cor o texto irá aparecer? Verde ou vermelho?
Seguindo a ordem de prioridades, os estilos na linha de comando têm precedência.
Logo, a cor do texto será verde.
-6-
Sintaxe usada nas folhas de estilo
Selectores, propriedades e valores
A sintaxe das definições CSS é composta por duas partes: um selector e uma
declaração. Exemplo:
Selector
Declarações
p{
}
color : green;
font-type : ‘New York’ Verdana;
A declaração fica entre chavetas ({...}) e pode conter várias definições. Cada
definição é formada por um par propriedade:valor, em que o valor é separado da
propriedade pelo carácter : (dois pontos.) Exemplo:
selector { propriedade: valor }
Identificadores e classes
O selector é normalmente o nome de um elemento do HTML, mas também pode ser
um selector de classe, um selector de ID (identificador) ou um selector contextual.
Se o valor que queremos dar à propriedade tiver mais do que uma palavra devemos
colocá-lo entre aspas, conforme exemplo:
<html>
<head>
<style type="text/css">
p { font-family: "comic sans ms" }
</style>
</head>
<body>
Eu adoro o tipo de letra "comic sans ms".
</body>
</html>
-7-
Dentro das chavetas (caracteres { e }) podemos colocar várias definições separadas
pelo carácter ";" (ponto e vírgula). O exemplo seguinte define três propriedades
para o elemento <p>, que são o alinhamento, a cor do texto e o tipo de letra.
p{
text-align: center;
color: green;
font-family: arial
}
</style>
Agrupar selectores
Podemos agrupar os selectores que partilham as mesmas definições. Para isso
escrevemo-los uns a seguir aos outros separados por vírgulas. No exemplo seguinte
os elementos de <h1> até <h6> partilham todos a mesma definição:
h1,h2,h3,h4,h5,h6
{
color: green
}
Selectores de classe
Os selectores de classe permitem-nos definir estilos diferentes que podem ser
aplicados ao mesmo elemento. No caso de precisar de ter dois tipos diferentes de
parágrafo no documento: um alinhado à direita e outro alinhado ao centro, utilizase os selectores de classe:
p.direita { text-align: right }
p.centro
{ text-align: center }
</style>
Sintaxe de um selector de classe que pode ser inserida numa folha de estilos:
identificador_do_elemento.identificador_de_classe{propriedade:valor;}
-8-
Sintaxe para fazer referência a um selector classe para aplicar o estilo nele
contido:
<identificador_do_elemento classe=”identificador_de_classe”>
Um selector de classe permite definir um estilo não apenas directamente associado
a um elemento, mas a todos o que referenciem. A sintaxe é:
.selector_de_classe {propriedade:valor;}
Selector de id (identificador)
O selector de id é diferente do selector de classe porque se aplica a um único
elemento da página. As regras do HTML ditam que os valores do atributo id não
podem repetir-se numa mesma página. Daí resulta que o número de elementos no
documento com um determinado id é um ou é zero. Os nomes dos identificadores
são precedidos pelo carácter #.
Sintaxe de um selector identificador que pode ser inserida numa folha de estilos:
identificador_do_elemento #selector_identificador {propriedade:valor;}
Exemplo:
Titulos#texto_padrao {font-family: verdana; font-size:12 pt}
Sintaxe para fazer referência a um selector identificador para aplicar o estilo nele
contido:
<identificador_do_elemento id=”selector_identificador”>
Exemplo:
<P ID=”texto_padrao”>Este é um texto padrão .</P>
-9-
A regra de selecção para o estilo definido no exemplo seguinte indica que ele só
pode ser aplicado a um elemento <p> que tenha o valor "para1" no atributo id:
<html>
<head>
p#para1{text-align: center; color: red }
</style>
</head>
<body>
<p id="para1">Este parágrafo está alinhado ao centro e
tem cor encarnada.</p>
</body>
</html>
Um selector identificador permite definir um estilo não apenas directamente
associado a um elemento, mas a todos o que referenciem. A sintaxe é:
#selector_identificador {propriedade:valor;}
Exemplo:
#texto_padrao {font-family: verdana; font-size:12 pt}
Escrever comentários numa folha de estilos
Os comentários devem ser ignorados pelo browser, mas as versões 5 do MSIE lêmnos como se eles fossem definições, o que pode causar erros. Por isso coloque
comentários apenas em folhas de estilos que sejam lidas apenas pelo MSIE 6, pelo
Netscape 7/Mozilla ou pelo Opera.
Para iniciar um comentário escreva a sequência de caracteres "/*", depois o texto
do comentário, e no fim escreva "*/" para terminar o comentário.
Exemplo:
p { text-align: center;
/* Isto é um comentário */
color: black; font-family: arial }
- 10 -
Exercício I
1. CSS significa:
a) Computer short Sheets
b) Creative Style sheets
c) Cascading style Sheets
2.Indique quais as vantagens no uso de uma folha de estilos em cascata.
3.Existem 4 maneiras de incluirmos estilos CSS às páginas. Indique quais são.
4. Qual a sintaxe correcta para incluir folhas de estilos externas:
a) <stylesheets>meuestilo.css </stylesheets>
b) <style src=”meuestilo.css”>
c) <link rel=”stylesheet” type=”text/css” href=”meuestilo.css”>
5. Qual a localização correcta para incluir uma folha de estilos externa num
documento HTML.
a) princípio do documento
b) na secção <body>
c) na secção <head>
- 11 -
6.Qual a tag HTML que se utiliza para definir uma folha de estilos interna:
a) <css>
b) <script>
c) <style>
7. Em relação às prioridades, indique a ordem pela qual os browsers utilizam em
relação aos estilos.
8. Complete a seguinte frase:
A sintaxe das definições CSS é composta por duas partes: um ______________ e
uma _______________________.
9. Indique o que é um selector.
10. Diga o que entende por selectores de classes e selectores id.
- 12 -
Definições do fundo de um elemento
propriedades da classe Background
As propriedades dos fundos dos elementos definem cores de fundo e imagens de
fundo para os elementos do HTML. Estas propriedades permitem-nos controlar as
cores e as imagens de fundo dos elementos (posição, repetição, etc).
Definições para a cor de fundo
A cor de fundo de um elemento define-se através da propriedade color, da classe
background.
Existem quatro formas possíveis para definir cores que são:
1) indicando o nome, por exemplo "blue";
2) indicando a forma rgb, por exemplo rgb(0, 255, 255) para a cor "Aqua";
3) indicando a forma hexadecimal, por exemplo #000000 para a cor
“preta".
4) indicando a forma rgb baseada em percentagens do valor máximo de
cada cor. Esta forma é menos recomendada do que as restantes mas pode
ser útil em algumas situações. Exemplo: rgb(54%,0%,0%).
Fo r m a
De scr i çã o
color_name
Um nome de cor (por exemplo red, ou blue)
rgb(encarnado,verde,azul)
Um valor rgb para a cor (por exemplo rgb(255,0,0) é a cor encarnada.)
rgb(encarnado%, verde%, azul%)
Um valor rgb dado como uma percentagem do valor máximo de cor (por exemplo
rgb(100%,0%,0%) é a cor encarnada.)
#rrggbb
Um número hexadecimal (por exemplo #ff0000 para a cor encarnada).
Cor
Forma Hexadecimal
Forma RGB
#000000
rgb(0,0,0)
#FF0000
rgb(255,0,0)
#00FF00
rgb(0,255,0)
#0000FF
rgb(0,0,255)
#FFFF00
rgb(255,255,0)
#00FFFF
rgb(0,255,255)
#FF00FF
rgb(255,0,255)
#C0C0C0
rgb(192,192,192)
#FFFFFF
rgb(255,255,255)
- 13 -
Propriedades dos FFundos
undos (background):
Pr o p r i e d a d e
background
De scr i çã o
Oferece-nos uma forma
abreviada para escrever
todas as propriedades do
fundo numa única
declaração.
A propriedade backgroundattachment indica se a
imagem de fundo deve
background-attachment permanecer imóvel na
janela do browser ou se
acompanha o conteúdo
quando o movemos (scroll).
Va l o r e s
Esta propriedade aceita os valores que podemos dar a todas
as restantes propriedades desta tabela (background-color,
background-image, background-repeat backgroundattachment e background-position)
scroll-A imagem de fundo desliza juntamente com o resto da
página.
fixed-A imagem de fundo não desliza com o resto da página.
Ela permanece imóvel na janela do browser.
background-color
Define a cor de fundo de
um elemento.
color-rgb
color-hex
color-name
transparent-A cor de fundo é transparente
background-image
Define uma imagem de
fundo para ser usada no
elemento
url- O local onde se encontra o ficheiro com a imagem
none-Nenhuma imagem de fundo
- Se escrever apenas uma palavra o browser dará à segunda
o valor por omissão "center".
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
background-position
Define o local onde se
começa a desenhar a
imagem de fundo.
x-% y-% - O primeiro valor é a posição segundo a horizontal
e o segundo valor é a posição segundo a vertical. Ao canto
superior esquerdo correspondem os valores 0% 0%. Ao canto
inferior direito correspondem os valores 100% 100%. Se
escrever apenas um valor o browser dará ao segundo o valor
por omissão de 50%.
x-pos y-pos - O primeiro valor é a posição segundo a
horizontal e o segundo valor é a posição segundo a vertical.
Ao canto superior esquerdo correspondem os valores 0 0. As
unidades de medida podem ser pixels ou outra unidade de
medida definida em CSS. É permitido misturar posições
absolutas com posicionamentos percentuais. Se escrever
apenas um valor o browser dará ao segundo o valor por
omissão de 50%.
background-repeat
Estabelece se a imagem de
fundo deve repetir-se
(formando um mosaico) ou
não, e as direcções da
repetição.
repeat-A imagem de fundo repete-se tanto na horizontal
como na vertical (forma um mosaico).
repeat-x -A imagem de fundo repete-se apenas na
horizontal.
repeat-y -A imagem de fundo repete-se apenas na vertical.
no-repeat -A imagem de fundo não se repete (é desenhada
uma única vez).
- 14 -
Exercício II
1. Abra um editor de HTML e escreva o seguinte código, que permite definir uma
cor de fundo:
<html>
<head>
<style type=”text/css”>
}
body { background-color:: yellow}
}
h1 { background-color:: #ff0000}
}
h2 { background-color:: transparent}
}
p { background-color:: rgb(250,250,255)}
</style>
</head>
<body>
<h1>Primeiro exercício de CSS</h1>
<h2>11º Ano</h2>
<p>de API</p>
</body>
</html>
2. Grave o exercicio com o seguinte nome: exercicio1_1.html.
3. Vamos agora colocar uma imagem como fundo de um elemento. Para tal copie a
imagem fundo.gif para a sua pasta.
4. Escreva o seguinte código num novo documento e grave com o nome de
exercicio1_2.html.
<html>
<head>
{ background-image:: url(“fundo.gif ”)}
}
body{
</style>
</head>
<body>
<p>Página com imagem de fundo</p>
</body>
</html>
- 15 -
5.Para repetir a imagem de fundo (background) na vertical, faça o seguinte num
novo documento:
<html>
<head>
{ background-image:: url(“fundo.gif ”);;
body{
}
background-repeat:: repeat-y}
</style>
</head>
<body>
<p>Fundo na vertical</p>
</body>
</html>
6. Grave com o seguinte nome exercicio1_3.html.
7.Para colocar imagens de fundo fixas, escreva o seguinte código e visualize o
resultado. Grave com o nome de exercício1_4.html
<html>
<head>
{ background-image:: url(“fundo.gif ”);;
body{
background-repeat:: no-repeat;;
background-attachment:: fixed
}
</style>
</head>
<body>
<p style=”width: 1400px”>
Esta imagem de fundo permanece imóvel quando se desce
ou sobe na página ou quando se desloca para a direita
ou para a esquerda
</body>
</html>
- 16 -
8.O próximo exemplo serve para controlar a posição de uma imagem de fundo.
<html>
<head>
body { background-image:: url(“fundo.gif ”);;
background-repeat:: no-repeat;;
}
background-position:: center center}
</style>
</head>
<body>
<p>Texto da página</p>
</body>
</html>
9. Grave com o seguinte nome: exercicio1_5.html
10. Para colocar cor e imagem como fundo, proceda da seguinte forma:
<html>
<head>
{ background:: #0000ff url(“fundo.gif ”) no-repeat fixed
body{
}
center center}
</style>
</head>
<body>
</body>
</html>
11. Grave com o seguinte nome: exercicio1_6html.
- 17 -
Formatação de texto
As propriedades do texto define o aspecto gráfico a dar ao texto. Permite controlar
cores, aumentar ou reduzir o espaço entre os caracteres, alinhar o texto, escolher o
tipo de letra, decorá-lo, etc.
De scr i çã o
Va l o r e s p e r m i t i d o s
color
Define a cor do texto
cor -o valor da cor pode ser o seu nome (red por exemplo ), o
seu valor rgb (rgb(255,0,0) por exemplo), ou o seu código
hexadecimal (#FF0000 por exemplo).
direction
Define a direcção de escrita
do texto
ltr-A direcção é da esquerda para a direita ("left-to-right")
rtl-A direcção é da direita para a esquerda ("right-to-left")
letter-spacing
Aumenta ou diminui o espaço
entre os caracteres
normal-Define o espaçamento normal entre as letras.
comprimento-Define um espaçamento fixo entre as letras dado
em px, pt, pc, etc.
text-align
Alinha o texto dentro de um
elemento
left-esquerda
right-direita
center -ao centro
justify - justificado
text-decoration
Adiciona pormenores
decorativos ao texto
none- define texto normal
underline- define texto sublinhado
overline - define texto com uma linha por cima
line-through-Define texto com uma linha horizontal sobreposta
a meia altura
blink - faz com que o texto fique a piscar
text-indent
Desloca para a direita ou
para a esquerda a primeira
letra da primeira linha do
texto.
comprimento-Define um deslocamento fixo para a primeira
letra da primeira linha (pode ser dado em px, pt, pc, etc.)
% -Define o deslocamento para a direita da primeira letra da
primeira linha como uma percentagem da largura do elemento
que contém o texto.
text-transform
Controla as letras de um
elemento
none-Define texto normal, com letras maiúsculas e minúsculas.
capitalize -Todas as palavras começam com letra maiúscula.
uppercase-Todas as letras são escritas como maiúsculas
lowercase-Todas as letras são escritas como minúsculas
unicode-bidi
normal
em b ed
bidi-override
white-space
Define a forma como é
tratado o espaço em branco
dentro de um elemento
normal- O browser ignora os caracteres de espaço
pre- O browser preserva todos os caracteres de espaço. O
comportamento é igual ao que se obtém com o elemento
<pre> do HTML
nowrap- O browser deixa de inserir mudanças de linha
automáticas. A escrita de texto só muda de linha quando é
encontrado um elemento <br>.
word-spacing
Aumenta ou diminui o espaço
entre as palavras
normal-Define o espaçamento normal entre as palavras.
comprimento-Define um espaçamento fixo entre as palavras
(pode ser dado em px, pt, pc, etc.)
- 18 -
Fontes
font
font-family
font-size
De scr i çã o
Va l o r e s
Aceita os valores que podem ser dados
às restantes propriedades desta tabela
mais aqueles que se encontram na
coluna seguinte desta linha. Oferecenos uma forma abreviada para definir
numa única declaração todas as
propriedades relativas ao tipo de letra.
i c o n -Define as propriedades do tipo de letra a usar com
ícones.
m e n u -Define as propriedades do tipo de letra a usar
em menus.
m e s s a g e - b o x -Define as propriedades do tipo de letra
a usar nas caixas de diálogo.
sm a l l - ca p t i o n
s t a t u s - b a r -Define as propriedades do tipo de letra a
usar na barra de estado do browser.
A propriedade font-family consiste
numa lista com os tipos de letra que o
browser pode escolher para escrever os
textos. A lista está ordenada de forma
prioritária: a primeira escolha aparece
primeiro, a seguir vem a segunda
escolha e assim sucessivamente. O
browser escolhe o primeiro tipo que
seja capaz de usar. Os nomes dos
tipos de letra podem ser nomes de
família ou nomes genéricos.
f a m i l y - n a m e - O nome de família do tipo de letra,
como "times", "courier", "arial", etc.
g e n e r i c - f a m i l y - O nome genérico de família, como
"serif", "sans-serif", "cursive", "fantasy", "monospace".
Define o tamanho de um tipo de letra.
Define o tamanho de letra para diversas dimensões,
desde xx-small (menor) até xx-large (maior)
xx- sm a l l
x- sm a l l
sm a l l
m e d i um
l a rg e
x- l a r g e
xx- l a r g e
s m a l l e r- Selecciona o tamanho de letra abaixo daquele
que estava a ser usado
l a r g e r- Selecciona o tamanho de letra acima daquele
que estava a ser usado
c o m p r i m e n t o - Define um valor fixo para o tamanho de
letra (dado em px, pt, pc, etc.)
%% - Define o tamanho de letra como uma percentagem
daquele que estava a ser usado
Se o tipo de letra (font) escolhido não
estiver disponível, o browser vê-se
obrigado a usar um outro tipo
diferente. A propriedade font-sizeadjust especifica o "aspect value" do
font-size-adjust
tipo de letra escolhido para que o
browser possa substituí-lo por um outro
tipo que esteja acessível preservando a
altura da letra "x" e mantendo a
legibilidade do texto.
n o n e - Não é preciso preservar a altura da letra x
quando for necessário substituir o tipo de letra por outro
diferente.
n ú m e r o - Define o "aspect value" para o tipo de
letra(font). Fórmula a usar:font-size a aplicar ao tipo de
letra disponível = (font-size do tipo de letra que é
primeira escolha) * font-size-adjust / "aspect value" do
tipo de letra disponível)
- 19 -
De scr i çã o
Va l o r e s
n o r m a l - Define o valor normal (não há contração nem
expansão)
w i d e r- Aumenta a largura dos caracteres
font-stretch
A propriedade font-stretch provoca
uma expansão ou uma contracção
horizontais no tamanho da letra.
Define a escala para a contração ou para a expansão
dos caracteres. "ultra-condensed" é o tamanho mais
estreito de todos e "ultra-expanded" é o tamanho mais
largo de todos
ul t r a - co nd e ns e d
e xt r a - co nd e ns e d
co nd e ns e d
s e m i - co nd e ns e d
s e m i - e xp a nd e d
e xp a nd e d
e xt r a - e xp a nd e d
ul t r a - e xp a nd e d
n o r m a l - O texto é escrito com o tipo de letra normal
i t a l i c - O texto é escrito com caracteres itálicos
(inclinados)
o b l i q u e - O texto é escrito com caracteres oblíquos
font-style
Define o estilo de letra a usar
font-variant
n o r m a l - O texto é escrito com o tipo de letra normal
Escreve o texto usando um tipo de letra
s m a l l - c a p s - O texto é escrito com o tipo de letra "small"small-caps" ou o tipo normal
caps"
font-weight
n o r m a l - Define caracteres normais
b o l d - Define caracteres desenhados com traço espesso
b o l d e r -Define caracteres desenhados com traço mais
espesso
l i g h t e r- D e f i n e c a r a c t e r e s d e s e n h a d o s c o m t r a ç o
fi no
Define a espessura do traço com que são desenhados os
caracteres desde 100 (mais fino) até 800 (mais grosso).
O valor normal é 400. 700 é o mesmo que bold.
100
200
300
400
500
600
700
800
900
Define a espessura do traço com que
são desenhadas a letras
- 20 -
Exercício III
1. Abra um editor de HTML e escreva o seguinte código, que permite definir cor a
um determinado texto:
<html>
<head>
}
h1 { color:: #ffff00}
}
h2 { color:: #dda0dd}
}
p { color:: rgb(0,0,255)}
</style>
</head>
<body>
<h1>Escola Secundária S. João do Estoril</h1>
<h2>Aplicações Informáticas A</h2>
<p>11º Ano</p>
</body>
</html>
2. Grave o documento com o seguinte nome: exercicio3_1.html
3. Escreva o seguinte código num novo documento.Este código utiliza algumas
formatações de texto.
<html>
<head>
}
h1 { letter-spacing:: -3px;; text-align:: center ; text-decoration:: overline}
{
:
;
:
;
:
}
h2 letter-spacing: 0.5cm; text-align: left; text-decoration: underline}
}
a { text-decoration:: none}
}
p.. paragrafo { text-indent:: 1cm}
}
p.. uppercase { text-transform:: uppercase}
.
{
:
}
p.lowercase text-transform: lowercase}
}
p.. capitalize { text-transform:: capitalize}
</style>
</head>
- 21 -
<body>
<h1> Especificar o espaço que separa os caracteres - espaço de -3px, alinhado
ao centro e com pormenores decorativos do texto - overline</h1>
<h2>Especificar o espaço que separa os caracteres - espaço de o.5cm
alinhado à esquerda e pormenores decorativos do texto - underline </h2>
<p><a href=”http://www.alcobias.net”>Texto com hiperligação </a></p>
<p class=”paragrafo”> A primeira linha de cada parágrafo inicia-se um
pouco mais
à direita do que as linhas seguintes. Isto deve-se ao estilo
CSS que usámos para formatar os parágrafos desta página.
A primeira linha de cada parágrafo inicia-se um pouco mais
à direita do que as linhas seguintes. Isto deve-se ao estilo
CSS que usámos para formatar os parágrafos desta página. </p>
<p class=”uppercase”>
A class que demos a este parágrafo dá-lhe uma formatação
em que todas as letras são maiúsculas (em inglês “uppercase”.) </p>
<p class=”lowercase”>
em que todas as letras são minúsculas (em inglês “lowercase”.) </p>
<p class=”capitalize”>
em que todas as palavras começam com
letra maiúscula (“capitalize” em inglês.)</p>
</body>
</html>
4. Grave o documento com o seguinte nome: exercicio3_2.html.
5. Num novo documento escreva o seguinte código:
<html>
<head>
{ font:: italic small-caps 900 13px arial}
}
p{
</style>
</head>
<body>
<p>Isto é um parágrafo</p>
</body>
</html>
6.Grave o documento com o seguinte nome: exercicio3_3.html.
- 22 -
Limites
O limite de um elemento designa-se por "border". Em redor do limite podemos
desenhar linhas de contorno. O padrão CSS permite-nos especificar o estilo, a cor
e a espessura das linhas que delimitam um elemento do HTML.
Propriedades das Margens:
De scr i çã o
Va l o r e s
border
Oferece uma forma abreviada para escrever
numa única declaração todos os parâmetros
relativos às linhas de fronteira. Aceita os
valores que podem ser dados às propriedades
listadas à direita.
border-width
border-style
border-color
border-bottom
Oferece-nos uma forma abreviada para
escrever todas as propriedades da linha de
fronteira do lado de baixo numa única
declaração. Aceita os valores que podem ser
dados às propriedades listadas à direita.
border-width
border-style
border-color
border-bottom-color Define a cor da linha de fronteira de baixo
border-color
border-bottom-style
Define o estilo da linha de fronteira de baixo
border-style
border-bottom-width
Define a espessura da linha de fronteira de
baixo
border-width
border-color
Define as cores das quatro linhas de fronteira.
Aceita de um a quatro valores.
cor
border-left
escrevermos todas as propriedades da linha
de fronteira do lado esquerdo numa única
border-width
border-style
border-color
border-left-color
Define a cor da linha de fronteira do lado
esquerdo
border-color
border-left-style
Define o estilo da linha de fronteira do lado
esquerdo
border-style
border-left-width
Define a espessura da linha de fronteira do
lado esquerdo
border-width
border-right
de fronteira do lado direito numa única
border-width
border-style
border-color
border-right-color
Define a cor da linha de fronteira do lado
direito
border-color
border-right-style
Define o estilo da linha de fronteira do lado
direito
border-style
border-right-width
Define a espessura da linha de fronteira do
lado direito
border-width
- 23 -
De scr i çã o
Va l o r e s
border-style
A propriedade border-style define o estilo das
quatro linhas de fronteira. Aceita de um a
quatro valores.
n o n e -Faz com que não seja desenhada
nenhuma linha de fronteira
h i d d e n -É o mesmo que "none" (a linha não
é desenhada ), excepto em situações de
resolução de conflitos com definições dadas
em elementos de tabelas
d o t t e d -Define uma linha desenhada com
pontos. Alguns browsers acabam por
desenhar uma linha continua (estilo solid)
d a s h e d - Define uma linha desenhada com
traços. Alguns browsers acabam por
desenhar uma linha contínua (estilo solid)
s o l i d - Define uma linha de fronteira contínua
d o u b l e - Define duas linhas de fronteira lado
a lado. A largura das duas linhas juntas é
igual ao valor dado pelo parâmetro borderwidth.
g r o o v e - Define uma linha de fronteira com
um efeito 3D (estilo groove). A qualidade do
efeito depende do valor definido no
parâmetro border-color
r i d g e - Define uma outra linha de fronteira
com um efeito 3D (estilo ridge). A qualidade
do efeito depende do valor definido no
i n s e t - Define uma linha de fronteira com um
efeito 3D (estilo inset). A qualidade do efeito
depende do valor definido no parâmetro
border-color
o u t s e t - Define uma linha de fronteira com
um efeito 3D (estilo outset). A qualidade do
efeito depende do valor definido no
border-top
de fronteira do lado de cima numa única
border-width
border-style
border-color
border-top-color
Define a cor da linha de fronteira superior
border-color
border-top-style
Define o estilo da linha de fronteira superior
border-style
border-top-width
Define a espessura da linha de fronteira
superior
border-width
border-width
definirmos as espessuras de todas as linhas de
fronteira. Aceita de um a quatro valores.
thin
medium
thick
comprimento
- 24 -
Exercício IV
1. Abra um editor de HTML e escreva o seguinte código, que permite definir o estilo
dos limites:
<html>
<head>
}
p.. dotted { border-style:: dotted}
}
p.. dashed { border-style:: dashed}
}
p.. solid { border-style:: solid}
}
p.. double { border-style:: double}
}
p.. groove { border-style:: groove}
}
p.. ridge { border-style:: ridge}
}
p.. inset { border-style:: inset}
}
p.. outset { border-style:: outset}
</style>
</head>
<body>
<p class=”dotted”>limite dotted-pontos</p>
<p class=”dashed”>limite dashed-traços</p>
<p class=”solid”>limite solid-traço contínuo</p>
<p class=”double”>limite double-linha dupla</p>
<p class=”groove”>limite groove -linha com “relevo”</p>
<p class=”ridge”>limite ridge-outra linha com “relevo”</p>
<p class=”inset”>limite inset-linha com efeito especial</p>
<p class=”outset”>limite outset -outra linha com efeito especial</p>
</body>
</html>
3. Escreva o seguinte código num novo documento.Este código permite definir
diferentes limites e utilização de cores.
<html>
<head>
}
p.. soliddouble { border-style:: solid double}
}
p.. doublesolid { border-style:: double solid}
p.. groovedouble { border-style:: groove double;; border-color:: #ff0000
}
#00ff00 #0000ff}
p.. three { border-style:: solid double groove;; border-color:: #ff0000 #00ff00
}
#0000ff}
</style>
</head>
- 25 -
<body>
<p class=”soliddouble”>Parágrafo com texto</p>
<p class=”doublesolid”>Parágrafo com texto</p>
<p class=”groovedouble”>Parágrafo com texto</p>
<p class=”three”>Parágrafo com texto</p>
</body>
</html>
5. Para alterar a espessura de um limite utilza-se a propriedade border-bottomwidht. Escreva o seguinte código e visualize as alterações nos limites.
<html>
<head>
{ border-style:: solid;; border-bottom-width::
p.. inferior_superior{
;
:
}
15px; border-top-width: 15px}
{ border-style:: solid;; border-left-width::
p.. esquerdo_direito{
}
10px;; border-right-width:: 10px}
</style>
</head>
<body>
<p class=”inferior_superior”>
Definir a espessura do limite inferior e
superior </p>
<p class=”esquerdo_direito”> Definir a espessura do limite esquerdo e
direito </p>
</body>
</html>
6.Grave o documento com o seguinte nome: exercicio4_3.html
7. Indique se a seguinte declaração está correcta? Justifique a sua resposta.
p {border: medium double #ff00ff}
</style>
- 26 -
Margens
As margens de um elemento são constituídas por espaço em branco que fica em seu
redor e o separa dos elementos adjacentes. Se o valor de uma margem for positivo
o elemento afasta-se dos outros que lhe são adjacentes mas se for negativo ele
aproxima-se dos outros elementos. Isto significa que podemos usar as margens para
afastar e aproximar os conteúdos de dois ou mais elementos e até sobrepô-los. As
quatro margens podem ser controladas todas ao mesmo tempo ou separadamente.
Propriedades das Margens:
De scr i çã o
margin
Propriedade que nos oferece uma
forma abreviada para definir numa
única declaração todas as
propriedades relativas às quatro
margens de um elemento.
margin-bottom
Define a margem inferior de um
elemento
margin-left
Define a margem esquerda de um
elemento
margin-right
Define a margem direita de um
elemento
margin-top
Define a margem superior de um
elemento
Va l o r e s
margin-top
margin-right
margin-bottom
margin-left
auto
a u t o - É o browser que escolhe o
comprimento tamanho da margem.
%
c o m p r i m e n t o - Define um
auto
comprimento fixo (dado em px, pt,
comprimento pc, cm, etc.)
%
c o m p r i m e n t o % - Define o
auto
comprimento comprimento da margem como
uma percentagem da altura do
%
documento (para bottom e top) ou
como uma percentagem da largura
auto
comprimento do documento (para left e right.)
%
Espaçamento nas tabelas:
As propriedades padding controlam o espaço em branco que separa os conteúdos
de um elemento dos seus limites ("border"). É proibido usar valores negativos para
estas propriedades porque isso colocaria os conteúdos fora do elemento, o que não
faria sentido. Os quatro lados podem ser controlados todos de uma vez ou
separadamente.
- 27 -
padding
padding-bottom
padding-left
padding-right
padding-top
De scr i çã o
Propriedade que nos oferece uma
única declaração todos os aspectos
dos espaçamentos entre o conteúdo
de um elemento e os seus limites.
Define o espaço que separa o
conteúdo de um elemento do seu
limite inferior
limite esquerdo
limite direito
limite superior
Va l o r e s
padding-top
padding-right
padding-bottom
padding-left
comprimento
%
c o m p r i m e n t o - Define um
comprimento fixo para o espaço
comprimento em branco (dado em px, pt, pc,
%
cm, etc).
comprimento % - Define um comprimento
relativo ao espaço em branco
%
usando uma percentagem da
largura total do elemento.
comprimento
%
Exemplo:
<html>
<head>
}
td { padding:: 2cm}
}
td.. stl2 { padding:: 22px 52px}
</style>
</head>
<body>
<table border=”1">
<tr>
<td> Nesta célula de tabela existe uma separação de 2cm
entre o conteúdo e todos os limites.
</td>
</tr>
</table>
<table border=”1">
<tr>
<td class=”stl2">
Nesta célula de tabela existe uma separação de 22px
entre o conteúdo e os limites superior e inferior.
Entre o conteúdo e os limites esquerdo e direito a
separação é de 52px.
</td>
</tr>
</table>
</body>
</html>
- 28 -
Listas
As propriedades relativas às listas permitem-nos controlar diversos aspectos da
apresentação de uma lista. Entre outros aspectos podemos escolher os símbolos
para os marcadores, usar uma imagem como marcador, e escolher a posição dos
marcadores.
De scr i çã o
Va l o r e s
list-style
Este propriedade oferece-nos uma
única declaração todas as
propriedades relativas a uma lista.
list-style-type
list-style-position
list-style-image
list-style-image
Define uma imagem como marcador
de item numa lista
n o n e - Não apresentar qualquer imagem como
marcador.
u r l - O URL da imagem a usar como marcador.
Define a posição em que o marcador
deve ser colocado
list-style-position
i n s i d e - Os marcadores passam para o lado de
dentro dos itens da lista (deslocam-se para a
direita). Com esta opção, se o texto de um item da
lista ocupar mais do que uma linha, as linhas
depois da primeira começam mesmo por baixo do
marcador (são alinhadas pelo marcador.)
o u t s i d e - Os marcadores ficam totalmente fora dos
itens da lista. Os marcadores ficam sempre à
esquerda dos textos.
list-style-type
Define o tipo de marcador a usar
auto
comprimento
marker-offset
n o n e -Não usar marcadores
d i s c -Usar um disco como marcador (círculo cheio)
c i r c l e -Circunferência (anel)
s q u a r e - Quadrado
d e c i m a l -Usar números como marcador
l o w e r- r o m a n -Usar números romanos minúsculos (i,
ii, iii, iv, v, etc.)
u p p e r- r o m a n -Usar números romanos maiúsculos
(I, II, III, IV, V, etc.)
l o w e r- a l p h a -Usar letras do alfabeto minúsculas (a,
b, c, d, e, etc.)
u p p e r- a l p h a -Usar letras do alfabeto maiúsculas
(A, B, C, D, E, etc.)
Exemplo:
ul {list-style-image: url("seta.gif")}
</style>
- 29 -
Exercício V
1. Abra um editor de HTML e escreva o seguinte código, que permite definir marcas
em listas não ordenadas:
<html>
<head>
}
ul.. disc { list-style-type:: disc}
}
ul.. circle { list-style-type:: circle}
}
ul.. square { list-style-type:: square}
}
ul.. none { list-style-type:: none}
</style>
</head>
<body>
<ul class=”disc”>
<li>Rebuçados</li>
<li>Pastilha elástica</li>
<li>Caramelos</li>
</ul>
<ul class=”circle”>
<li>Rebuçados</li>
<li>Caramelos</li>
</ul>
<ul class=”square”>
<li>Rebuçados</li>
<li>Caramelos</li>
</ul>
<ul class=”none”>
<li>Rebuçados</li>
<li>Caramelos</li>
</ul>
</body>
</html>
3. Proceda a elaboração de uma lista ordenada, utilizando os mesmos campos. Os
valores a utilizar para a lista ordenada são: decimal;lower-roman;upper-roman;
lower-alpha e upper-alpha. Grave o documento com o seguinte nome:
exercicio5_2.html.
4. Escreva o código para elaborar uma lista, utilizando uma imagem como
marcador. O nome da imagem é: smile.gif. Os campos da listas podem ser:
rebuçados; pastilhas e caramelos. Grave o documento com o seguinte nome:
exercicio5_3.html.
- 30 -
Dimensionamento de elementos – Dimension
As propriedades relativas a dimensões são usadas para controlar a altura e a
largura dos elementos e o espaço entre linhas de texto.
Va l o r e s
Define a altura de um elemento
a u t o -É o browser que decide a altura a usar
% -Define a altura do elemento como uma percentagem
da altura do bloco que o contém
c o m p r i m e n t o -Define a altura em unidades px, cm, etc.
Define a distância entre as
linhas
n o r m a l -Define um valor razoável para a distância entre
as linhas
n ú m e r o -Define um número que será multiplicado pelo
tamanho de letra em uso para estabelecer a distância
entre as linhas
% -Define a distância entre as linhas como uma
percentagem do tamanho de letra usado
c o m p r i m e n t o -Define um valor fixo para a distância entre
as linhas
max-height
Define a altura máxima de um
elemento
a u t o -Não estabelece qualquer limite para a altura
máxima do elemento
% -Define a altura máxima do elemento como uma
percentagem da altura do bloco que o contém
c o m p r i m e n t o -Define a altura máxima do elemento
max-width
a u t o - Não estabelece qualquer limite para a largura
máxima do elemento
% -Define a largura máxima permitida para o elemento
Define a largura máxima de um
como uma percentagem da largura do bloco que o
elemento
contém
c o m p r i m e n t o -Define a largura máxima permitida para o
elemento
min-height
Define a altura mínima de um
elemento
c o m p r i m e n t o -Define a altura mínima do elemento
% -Define a altura mínima do elemento como uma
percentagem da altura do bloco que o contém
min-width
Define a largura mínima de um
elemento
c o m p r i m e n t o -Define a largura mínima do elemento
%% - Define a largura mínima do elemento como uma
percentagem da largura do bloco que o contém
Define a largura de um
elemento
a u t o -É o browser que decide a largura a usar
% -Define a largura do elemento como uma percentagem
da largura do elemento que o contém
c o m p r i m e n t o -Define uma largura fixa em unidades px,
cm, etc.
height
line-height
De scr i çã o
width
- 31 -
Dimensionamento de imagens
Exemplo:
<html>
<head>
{ height:: auto;; width:: auto}
}
img.. normal{
{ height:: 64px;; width:: 64px}
}
img.. grande{
{ height:: 16px;; width:: 16px}
}
img.. pequeno{
</style>
</head>
<body>
<img class=”normal” height=”32" width=”32" src=”urso1.gif ”/><br/><br/>
<img class=”grande” height=”32" width=”32" src=”urso1.gif ”/><br/><br/>
<img class=”pequeno” height=”32" width=”32" src=”urso1.gif ”/>
</body>
</html>
Espaçamento entre linhas
Exemplo:
<html>
<head>
}
p.. aumentar { line-height:: 32px}
</style>
</head>
<body>
<p>
Isto é um parágrafo com texto. Isto é um parágrafo com texto.
</p>
<p class=”aumentar”>
</p>
</body>
</html>
- 32 -
Alinhamento relativo de elementos na página
propriedades de Classification
As propriedades de classificação permitem-nos controlar a forma como os
elementos são apresentados: escolher o local onde uma imagem deve aparecer,
posicionar os elementos de forma absoluta ou em relação uns aos outros e
controlar a sua visibilidade.
Propriedades de Classificação:
clear
Va l o r e s
Define os lados de um elemento junto
aos quais não são permitidos
elementos flutuantes
l e f t - Não são permitidos elementos flutuantes no
lado esquerdo
r i g h t - Não são permitidos elementos flutuantes no
lado direito
b o t h - Não são permitidos elementos flutuantes no
lado esquerdo nem no lado direito
n o n e - São permitidos elementos flutuantes tanto do
lado esquerdo como do direito
Especifica o tipo de cursor a
apresentar
u r l - O URL de um ficheiro que contém a definição
do cursor a usar. Nota: Indique também um cursor
genérico para ser apresentado no caso de o ficheiro
que contém o cursor especial não poder ser usado.
a u t o - O browser escolhe o cursor
c r o s s h a i r- Um cursor em forma de cruz
d e f a u l t - O cursor a usar por omissão (geralmente
uma seta)
p o i n t e r- Um cursor para apontar para uma ligação
de hipertexto (normalmente uma mão com o dedo
indicador esticado)
m o v e - O cursor que se vê quando se move uma
janela no écran
e - r e s i z e - O cursor que se vê enquanto se
redimensiona uma janela no écran arrastando a
aresta direita ("east", ou leste)
n e - r e s i z e - O cursor que se vê equanto se
redimensiona uma janela no écran arrastando o
canto superior direito ("north/east", ou nordeste)
n w - r e s i z e - O cursor que se vê equanto se
canto superior esquerdo ("north/west", ou noroeste)
n - r e s i z e - O cursor que se vê equanto se
aresta de cima ("north", ou norte)
s e - r e s i z e - O cursor que se vê equanto se
canto inferior direito ("south/east", ou "sudeste")
s w - r e s i z e - O cursor que se vê equanto se
canto inferior esquerdo ("south/west", ou sudoeste)
s - r e s i z e - O cursor que se vê equanto se
aresta de baixo ("south", ou sul)
w - r e s i z e - O cursor que se vê equanto se
aresta esquerda ("west", ou oeste)
t e x t - O cursor está sobre texto
w a i t - O cursor que diz para esperar porque está
uma tarefa em execução (normalmente uma
ampulheta ou um relógio)
h e l p - Este cursor indica que há informação auxiliar
disponível (assume normalmente a forma de um
ponto de interrogação)
cursor
De scr i çã o
- 33 -
display
float
De scr i çã o
Va l o r e s
Indica se e como um elemento deve
ser apresentado
n o n e - O elemento não será apresentado
i n l i n e - O elemento será apresentado como se fosse
um elemento "inline" sem mudanças de linha antes
nem depois da sua ocorrência.
b l o c k- O elemento será apresentado como se fosse
um elemento de bloco, com uma mudança de linha
antes e outra depois.
l i s t - i t e m - O elemento será apresentado como se
fosse um item de uma lista
r u n - i n - O elemento será apresentado como um
elemento de bloco ou como um elemento "inline"
dependendo do contexto em que aparece.
c o m p a c t - O elemento será apresentado como um
elemento de bloco ou como um elemento "inline"
dependendo do contexto em que aparece.
m a r ke r
t a b l e - O elemento será apresentado como uma
tabela (<table>), com mudanças de linha antes e
depois.
i n l i n e - t a b l e - O elemento será apresentado como
uma tabela (<table>), mas sem mudanças de linha
antes e depois.
t a b l e - r o w - g r o u p - O elemento será apresentado
como um grupo de linhas de uma tabela (<tbody>)
t a b l e - h e a d e r- g r o u p - O elemento será
apresentado como um grupo de linhas do
cabeçalho de uma tabela (<thead>)
t a b l e - f o o t e r- g r o u p - O elemento será apresentado
como um grupo de linhas do rodapé de uma tabela
(<tfoot>)
t a b l e - r o w - O elemento será apresentado como
uma linha de uma tabela (<tr>)
t a b l e - c o l u m n - g r o u p - O elemento será
apresentado como uma coluna ou mais colunas de
uma tabela (<colgroup>)
t a b l e - c o l u m n - O elemento será apresentado como
uma coluna de células de uma tabela (<col>)
t a b l e - c e l l - O elemento será apresentado como
uma célula de uma tabela (<td>)
t a b l e - c a p t i o n - O elemento será apresentado como
uma legenda de uma tabela (<caption>)
Define o lugar onde uma imagem ou
elemento de bloco deve aparecer
dentro de outro elemento
l e f t - O elemento flutua para a esquerda do
conteúdo do elemento que o contém
r i g h t - O elemento flutua para a direita do conteúdo
do elemento que o contém
n o n e - Não há flutuação. O elemento é apresentado
no local em que aparece.
- 34 -
position
visibility
De scr i çã o
Va l o r e s
Coloca um elemento numa posição
que pode ser estática, relativa,
absoluta ou fixa
s t a t i c - O elemento é colocado na sua posição
normal. Quando usamos este valor não devemos
definir as propriedades left nem top.
r e l a t i v e - Desloca o elemento relativamente à sua
posição normal ("left: 20px" desloca-o 20 pixels
para a direita)
a b s o l u t e - Coloca o elemento numa posição
absoluta sobre a página. "left: 20px" siginifica que
ele começa 20 pixels à direita do extremo esquerdo
da página.
fi xe d
Indica se um elemento deve estar
visível ou invisível
v i s i b l e - O elemento é visível
h i d d e n - O elemento é invisível
c o l l a p s e - Quando usado em elementos de tabela
este valor remove uma linha ou uma coluna sem
alterar o arranjo da tabela. O espaço que seria
ocupado pelos elementos removidos fica disponível
para outros conteúdos. quando usado em
elementos que não tabelas dá o mesmo resultado
que "hidden".
Definição da forma do cursor
Exemplo: alterar o símbolo mostrado pelo cursor
<body>
<p>Passe com o ponteiro do rato sobre as palavras mais abaixo e
veja como ele muda de forma. </p>
<span style=”CURSOR:
</body>
auto”>Auto</span><p>
crosshair”>Crosshair</span><p>
default”>Default</span><p>
pointer”>Pointer</span><p>
move”>Move</span><p>
e-resize”>e-resize</span><p>
ne-resize”>ne-resize</span><p>
nw-resize”>nw-resize</span><p>
n-resize”>n-resize</span><p>
se-resize”>se-resize</span><p>
sw-resize”>sw-resize</span><p>
s-resize”>s-resize</span><p>
w-resize”>w-resize</span><p>
text”>text</span><p>
wait”>wait</span><p>
help”>help</span>
- 35 -
Posicionamento e forma de elementos na página – Positioning
As propriedades que controlam o posicionamento dos elementos permitem-nos
controlar a área ocupada e escolher a localização com rigor.
Va l o r e s
b o tto m
a u t o - Deixa o browser escolher a posição do limite
Define a distância (para baixo ou para
inferior
cima) a que deve ficar o limite de
% - Define a posição do limite inferior como uma
%baixo de um elemento relativamente
percentagem da altura da página
ao limite de baixo do elemento que o
c o m p r i m e n t o - Define a posição do limite de baixo
contém.
com um valor fixo dado em px, pt, cm, etc.
clip
Define a forma de um elemento. O
elemento é recortado na forma
desejada e depois mostrado.
left
Define a distância (para a esquerda ou
para a direita) a que deve ficar o
limite esquerdo de um elemento
relativamente ao limite esquerdo do
elemento que o contém.
overflow
right
De scr i çã o
to p
Define o que acontece quando o
conteúdo de um elemento excede a
sua área.
Define a distância (para a esquerda ou
para a direita) a que deve ficar o
limite direito de um elemento
relativamente ao limite direito do
s ha p e
a ut o
esquerdo
%% - Define a posição do limite esquerdo como uma
percentagem da largura da página
c o m p r i m e n t o - Define a posição do limite esquerdo
v i s i b l e - Mostra todo o conteúdo. Uma parte será
apresentada já fora da área do elemento a que
pertence.
h i d d e n - O conteúdo é cortado. A parte que excede
a área disponível não será mostrada.
s c r o l l - O conteúdo é cortado, mas o browser
acrescenta barras de deslocamento (scrollbars) para
que o restante conteúdo também possa ser visto se
necessário.
a u t o - Caso ocorra um corte no conteúdo por ele
exceder a área disponível o browser deve
acrescentar barras de deslocamento (scrollbars)
para que o excedente também possa ser visto se
necessário.
direito
%% - Define a posição do limite direito como uma
percentagem da largura da página
c o m p r i m e n t o - Define a posição do limite direito
Define a distância (para baixo ou para superior
cima) a que deve ficar o limite de
% - Define a posição do limite superior como uma
%cima de um elemento relativamente
percentagem da altura da página
ao limite de cima do elemento que o
c o m p r i m e n t o - Define a posição do limite de cima
contém.
- 36 -
De scr i çã o
Va l o r e s
Define o alinhamento vertical de um
elemento.
z-index
Define a ordem de apresentação
(prioridade) dos elementos no caso de
existir sobreposição entre eles.
a u t o - O valor de z-index é escolhido pelo browser
n ú m e r o - Define o valor de z-index do elemento
vertical-align
b a s e l i n e - A linha de base (de baixo) do elemento é
alinhada com a linha de base do elemento que o
contém.
s u b - Alinha o elemento ligeiramente abaixo da
posição normal (semelhante ao resultado que se
obtém com o elemento <sub> do HTML.)
s u p e r- Alinha o elemento ligeiramente acima da
posição normal (semelhante ao resultado que se
obtém com o elemento <sup> do HTML.)
t o p - Alinha o topo do elemento o mais acima
possível na linha a que pertence.
t e x t - t o p - Alinha o topo do elemento com o limite
mais alto do texto na linha a que pertence.
m i d d l e - Alinha o elemento a meia altura do
b o t t o m - Alinha o limite inferior do elemento o mais
baixo possível na linha a que pertence.
t e x t - b o t t o m - Alinha o limite de baixo do elemento
(bottom) com o limite de baixo do texto na linha a
que pertence.
co m p r i m e nt o
%% - Alinha o elemento como uma percentagem do
valor da propriedade line-height. São permitidos
valores negativos.
- 37 -
Exercício VI
1. Abra um editor de HTML e escreva o seguinte código, que permite colocar um
elementopor detrás de outro. A imagem a utilizar é clip12.jpg:
<html>
<head>
{ position:: absolute;; left:: 0;; top:: 0;; z-index:: -1}
}
img.. x{
</style>
</head>
<body>
<h1>Isto é um cabeçalho</h1>
<img class=”x” src=”clip12.jpg”/>
<p>
O valor por omissão da propriedade z-index é 0.
A imagem tem o z-index com valor -1, pelo que
a sua prioridade é inferior. Por isso ela
aparece atrás do restante conteúdo.
</p>
</body>
</html>
3. Escreva o seguinte código que permite alinhar uma imagem na vertical:
<html>
<head>
}
img.. top { vertical-align:: text-top}
.
{
:
}
img. bottom vertical-align: text-bottom}
</style>
</head>
<body>
<p>Isto é uma imagem <img class=”bottom” src=”clip12.jpg”>
dentro de um parágrafo. </p>
<p>Isto é a mesma imagem <img class=”top” src=”clip12.jpg”>
dentro de outro parágrafo. </p>
</body>
</html>
4. Grave o documento com o seguinte nome:exercicio6_2.html
- 38 -
Unidades de Medida
O valor de um comprimento escreve-se como um número seguido de uma
abreviação que indica as unidades de medida. Não podemos colocar espaços entre
o número e as unidades (não escreva 2 cm mas sim 2cm). Quando o comprimeto é
0 (zero) não é preciso indicar as unidades.
A tabela seguinte descreve as unidades de medida que podemos usar em CSS.
U ni d a d e
De scr i çã o
%
percentagem de um valor
in
polegadas (inch)
cm
centímetros
mm
milímetros
em
1 em é igual ao tamanho do tipo de letra que
está a ser usado
ex
1 ex é igual à altura da letra "x" no tipo de letra
que está a ser usado (cerca de metade do valor
da propriedade font-size).
pt
pontos (1 pt é o mesmo que 1/72 polegadas)
pc
picas (1 pc é o mesmo que 12 pt)
px
pixels (1 px é um ponto no écran do
computador)
Pseudo-classes
As pseudo-classes permitem-nos associar efeitos especiais a selectores CSS ou a
partes de selectores.
Sintaxe
A sintaxe das pseudo-classes é a seguinte:
selector:pseudo-classe { propriedade: valor }
- 39 -
Lista de pseudo
pseudo-- classes
Ps e u d o - c l a s s e
Fi n a l i d a d e
active
Define o estilo a aplicar a um link seleccionado
hover
Define o estilo a aplicar a um link quando o
ponteiro do rato está sobre ele
link
Define o estilo a aplicar a um link que ainda
não foi visitado
visited
Define o estilo a aplicar a um link que já foi
visitado
first-child
Define o estilo as aplicar ao primeiro dos
elementos que se encontram dentro de um outro
elemento (primeiro descendente.)
lang
Permite definir atributos estilísticos diferentes
para aplicar ao texto escrito numa determinada
língua
Exemplos:
-
Dar
cores
dfeirentes
a
uma
g
il ação
<html>
<head>
}
a:link {color:: #FF0000}
}
a:visited {color:: #00FF00}
a:hover {color:: #FF00FF }
}
a:active {color:: #0000FF}
</style>
</head>
<body>
<p style=”font-weight: bold”>
<a href=”http://www.alcobias.net”>Isto é uma ligação</a></p>
<p><b>Nota:</b> a:hover deve ser definido DEPOIS de a:link e de
a:visited já estarem definidos para que tudo funcione bem. </p>
<p><b>Nota:</b> a:active deve ser definido DEPOIS de a:hover
já estar definido para que tudo funcione bem.</p>
</body>
</html>
- 40 -
Pseudo-elementos
Os pseudo-elementos são usados em CSS para adicionar efeitos a alguns selectores
ou a partes de selectores.
Sintaxe
A sintaxe das pseudo-elementos é a seguinte:
selector:pseudo-elemento { propriedade: valor }
Lista de pseudo
pseudo-- elementos
Ps e u d o - e l e m e n t o s
Fi n a l i d a d e
first-letter
Define um estilo especial para a primeira letra
de um texto.
first-line
Define um estilo especial para a primeira linha
de um texto.
before
Insere algum conteúdo antes de um elemento
after
Insere algum conteúdo depois de um elemento
Exemplos:
- Dar um estilo especial à primeira letra de um texto
<html>
<head>
{ color:: red;; font-size:: xx-large}
}
div:first-letter{
</style>
</head>
<body>
<p><b>Nota:</b> O Internet Explorer 5.0 não
suporta o pseudo-elemento “first-letter”.</p>
<div>
O pseudo-elemento “first-letter” permite dar um estilo
especial ao texto fazendo com que a primeira letra de
um bloco tenha um estilo diferente.
</div>
</body>
</html>
- 41 -
Bibliografia
Livros:
- Fonseca, Dalila. Pacheco, Deolinda. Marques, Fernandes e Soares, Ricardo.
Curso Tecnológico de Informática - 11º Ano- Aplicações Informáticas A.
Porto Editora.
Páginas da web:
http://www.artifice.web.pt/tutoriais/cntd/tut_css1.html
http://www.w3.org/TR/1998/REC-html40-19980424/
- 42 -

CSS - Kikinho

Transcrição

Documentos relacionados

Cascading Style Sheets II

Lista de propiedades CSS

(CSS) - Propriedades Básicas - profª msc. elizabete munzlinger

Cursor Animado

Tabela de CSS - À Beira Douro

Folhas de Estilo

Seção do Cabeçalho - profª msc. elizabete munzlinger

Que fonte devo usar?

"127 Horas", Boyle narra drama real de aventureiro

Folhas de Estilo em Cascata Vantagens e Desvantagens das CSS – 1

Fazer - Downloads de Materiais Adventistas

Hyundai Novo Veloster Turbo (GDi)

Queixa de Hugo Tavares da Silva contra Nuno Luz

12 - Dreamweaver CS6

Comunicação e Práticas de Consumo: as Cholas na moda

catalogo_cartersBR_maio_11_1

Felippe Velasques Giriboni

Avaliação do site computerbild.de

completo do livro - Editora PUC-Rio