Agora aplicando uma textura somente em uma
palavra.
background-repeat
Define a disposição que a imagem deverá ocupar no fundo. As opções são: no-repeat
(a imagem é posicionada no canto superior esquerdo do seu monitor); repeat-x (a imagem
irá se repetir somente na horizontal partindo do canto superior esquerdo do monitor); repeat-y
(a imagem irá se repetir somente na vertical, partindo do canto superior esquerdo do monitor). O código-fonte de
cada exemplo encontra-se em seus arquivos correspondentes.
background-position
Esta propriedade determina a posição onde a imagem de fundo deve aparecer. Existem duas maneiras
diferentes para especificar estas posições: Palavras chaves ou valores numéricos.
1) PALAVRAS CHAVES:
top - Alinha a imagem com o topo do elemento selecionador.
left - Alinha a imagem com o canto esquerdo do elemento selecionador.
right - Alinha a imagem com o canto direito do selecionador.
bottom - Alinha a imagem com a parte inferior do selecionador.
center - Centraliza a imagem dentro do selecionador.
2) VALORES NUMÉRICOS:
Os valores são empregados nas coordenadas "X" (horizontal) e "Y" (vertical). São eles
points (pt), inches (in), centimeters (cm), pixels (px) ou
percentage (%). Logicamente a unidade usada em "Y" deve ser
a mesma usada em "X".
background-attachment
Esta propriedade, configurada com o parâmetro fixed,
permite criar uma imagem fixa no fundo de modo que ao acionar a barra de rolagem a imagem não
se move. Esta propriedade também funciona em conjunto com as propriedades de posição e disposição
relacionadas acima.
border
Define uma borda que irá envolver um objeto (um texto, uma imagem...). Bons exemplos de aplicação dessa
propriedade estão na seção bordas.
border-color
Define a cor da borda. A cor pode ser definida pelo código RGB.
border-style
Define um estilo de borda. Os estilos podem ser: dotted, dashed, solid, double, none,
grove, ridge, inset e outset.
border-width
Define a espessura da borda. As espessuras podem ser: thin, mediun e
thick.
color
Especifica a cor do texto que pode ser um dos 16 nomes da paleta VGA ou do padrão RGB no formato
#rrggbb.
Exemplos:
<H2 STYLE="COLOR:purple">TEXTO COR PURPURA</H2>
TEXTO COR PURPURA
direction
Especifica uma sentido de leitura jogando o texto à margem direita ou esquerda. Embora esta
propriedade possua uma certa similaridade com a propriedade text-align,
ela foi desenvolvida para auxiliar idiomas cujo sentido de escrita é inverso ao nosso idioma
ocidental, tipo alguns idiomas da África, Oriente Médio e Ásia Próxima. A margem esquerda
(default (ou condição assumida ou configuração padrão)) é o padrão CSS ocidental e por isso não precisamos nos
preocupar com a configuração do sentido de escrita de nossas redações. Esta propriedade
possui dois valores:
ltr (left to rigth) da esquerda para a direita.
rtl (rigth to left) da direita para a esquesda.
Exemplo:
<P STYLE="direction:rtl">O texto passa a margear o lado direito do monitor.
O texto passa a margear o lado direito do monitor.
Para aprender mais sobre este assunto vá para:
Criando páginas com Fluxos invertidos com a tag <HTML DIR="RTL | LTR">
float
Esta propriedade permite posicionar objetos à direita ou à esquerda de outro objeto sem que para
isso precisemos recorrer aos recursos de tabelas. Este objeto é definido como "flutuante".
Esta propriedade possui 3 valores:
left - Move o objeto para a esquerda e posiciona o texto ao seu redor.
right - Move o objeto para a direita e posiciona o texto ao seu redor.
none - Mostra o objeto sem alteração.
<P><IMG SRC="imagens/tutorial.gif" style="float:right; margin:1in">Neste exemplo...
Neste
exemplo criei um parágrafo com <P> e defini que o arquivo de
imagem tutorial.gif ficaria no canto direito desse texto.
font-family
Seleciona o tipo de fonte. Pode-se usar uma lista de opções separadas por vírgulas. Caso a primeira opção
não esteja disponível, usa-se a segunda e assim por diante. Um nome genérico pode ser usado como último
da lista caso nenhuma das fontes seja encontrada. Os valores suportados são: serif,
sans-serif, cursive, fantasy e monospace.
Exemplo:
<STYLE TYPE="text/css">
BODY {font-family: Casablanca, Garamond, serif}
H1 {font-family: Brush Script, fantasy}
H2 {font-family: Gill Sans, Arial, sans-serif}
PRE {font-family: Lucida Console, Courier, monospace}
</STYLE>
font-size
Muda o tamanho absoluto ou relativo da fonte. Para valores absolutos, pode-se usar
várias unidades: pontos (pt), centímetros (cm), milímetros(mm), pixels(px) ou paicas (pc). Para valores
relativos: porcentagem em relação à fonte-base (%) ou um dos nomes: xx-small, x-small, small,
medium, large, x-large e xx-large.
Exemplo:
<STYLE TYPE="text/css">
BODY {font-size: 10pt}
P {font-size: 12px}
H1 {font-size: 1cm}
H2 {font-size: 8mm}
H3 {font-size: 1pc}
PRE {font-size: 80%}
</STYLE">
font-style
Seleciona o estilo da fonte. Pode ser italic, normal e
oblique.
<P STYLE="font-style:normal">Uma fonte com estilo normal.
Uma fonte com estilo normal.
<P STYLE="font-style:italic">Uma fonte com estilo italic.
Uma fonte com estilo italic.
<P STYLE="font-style:oblique">Uma fonte com estilo oblique.
Uma fonte com estilo oblique.
font-weight
Define a espessura da fonte. Pode ser extra-bold, bold, demi-bold, medium, demi-light,
light, extra-light ou os valores 100, 200, 300, 400, 500, 600, 700, 800 e 900.
Uma observação é que embora a maioria das fontes possuam sua versão em negrito (bold), são poucas as fontes
(e terminais)que possuem os demais estilos de espessura. Definir uma espessura, extra-light por exemplo,
numa fonte que não possui esse estilo irá fazer com que a configuração deixe de funcionar e assuma a
condição default.
<FONT STYLE="font-weight:300; font-family:arial">Arial</FONT>
Aqui estão alguns exemplos de formatação com valores.
| 300 | Arial |
| 600 | Arial |
| 900 | Arial |
|
| 300 | Verdana |
| 600 | Verdana |
| 900 | Verdana |
|
| 300 | Courier New |
| 600 | Courier New |
| 900 | Courier New |
|
| 300 | Times New Roman |
| 600 | Times New Roman |
| 900 | Times New Roman |
|
font-variant
Esta propriedade de formatação de fontes possui dois valores: normal
que corresponde a letra normal (maiúscula ou minúscula), propriamente dita e
small-caps que formata as fontes minúsculas criando um efeito
interessante de caixa alta pequena que diferencia da caixa alta normal. Exemplos:
<P STYLE="font-variant:normal">Texto com fontes minúsculas normal.
Texto com fontes minúsculas normal.
<P STYLE="font-variant:normal">TEXTO COM FONTES MAIÚSCULAS NORMAL.
TEXTO COM FONTES MAIÚSCULAS NORMAL.
<P STYLE="font-variant:small-caps">Ambas as fontes configuradas com SMALL-CAPS.
Ambas as fontes configuradas com SMALL-CAPS.
letter-spacing
Espaçamento entre letras. Os valores podem ser points (pt), inches (in),
centimeters (cm) ou pixels (px). Exemplos:
<P>Texto com espaçamento padrão
Texto com espaçamento padrão.
<P STYLE="letter-spacing:5px">Texto com espaçamento de 5px.
Texto com espaçamento de 5px.
<P STYLE="letter-spacing:5pt">Texto com espaçamento de 5pt.
Texto com espaçamento de 5pt.
line-height
Define a espessura da linha. Os valores podem ser points (pt), inches (in),
centimeters (cm), pixels (px) ou percentage (%). No
exemplo estou usando esta propriedade numa tabela. Criei diversas linhas com espaçamento
progressivo começando com 5px, na primeira linha e segundo até 50px, na última. Observe que na
primeira linha o texto foi parcialmente escondido. Isso ocorre porque uma vez aplicando essa
propriedade, o browser desabilita a condição default (de espaçamento) e passa a considerar o
espaço definido pelo webmaster, mesmo que este espaço não seja suficiente para apresentar o
item contido nele.
<TABLE BORDER WIDTH="150">
<TBODY ALIGN="center">
<TR>
<TD STYLE="line-height: 5px">Uma linha com 5x</TD></TR>
<TD STYLE="line-height:20px">Uma linha com 20px</TD></TR>
<TD STYLE="line-height:30px">Uma linha com 30px</TD></TR>
<TD STYLE="line-height:40px">Uma linha com 40px</TD></TR>
<TD STYLE="line-height:50px">Uma linha com 50px</TD></TR>
</TBODY>
</TABLE>
|
| Uma linha com 5x |
Uma linha com 20px |
Uma linha com 30px |
Uma linha com 40px |
Uma linha com 50px |
|
margin
Ajusta a distância das margens dos quatro cantos do objeto por igual. Os valores de ajustes podem ser
points (pt), inches (in), centimeters (cm) ou
pixels (px). No exemplo a seguir ajustei um parágrafo com
margens de uma polegada. E aproveitando observe o bonito alinhamento do texto que foi ajustado
com a propriedade text-align:justify.
<P STYLE="margin:1in; color:#000080; font-family:Bookman Old Style; text-align:justify">GEORGE BOOLE...
GEORGE BOOLE - Matemático inglês (1815-1864). É considerado o pai da Lógica
moderna. Nasce em uma família pobre e estuda por conta própria,
dedicando-se ao latim e ao grego. É professor de escolas elementares
de 1831 a 1849, quando funda um colégio particular. Passa a interessar-se
por Matemática e, depois de ler obras dos matemáticos franceses
Laplace e Legendre, passa a escrever artigos para o Jornal Matemático
da Universidade de Cambridge. Em 1847, no artigo A Análise Matemática
da Lógica, introduz o uso de símbolos matemáticos para expressar processos
lógicos, de modo a que eles possam ser lidos com o mesmo rigor de uma
equação algébrica. Com isso, dá origem à Lógica moderna. Em 1848, publica
Os Cálculos da Lógica e, em 1854, escreve Uma Investigação das Leis do Pensamento.
(Fonte Bibliográfica : Almanaque Abril - 1997)
margin-bottom
Ajusta a distância da margem da base do objeto (no exemplo, um parágrafo), criando um espaço de
separação entre ele e a seqüência da página. Observe que neste exemplo estou usando uma escala
de valor diferente, pontos (pt).
<P STYLE="margin-bottom:70pt; color:#3333ff; font-family:verdana">Quando a verdadeira história...
Quando a verdadeira história da evolução do espírito
for escrita, será a maior, a mais emocionante história de todos os tempos, porque cobrirá todos os tempos
e toda fase de experiência humana. Essa história contará que os homens precisaram de milhares e milhares de
anos para emergir das profundezas da ignorância, da superstição, do medo, do preconceito, da mitologia e dos
conceitos errôneos.
margin-left
Ajusta a distância da margem esquerda. E aproveitando os mesmos exemplos para
mostrar as propriedades color e font-family, também. E novamente outra
escala diferente, centimeters (cm)
<P STYLE="margin-left:5cm; color:#3333ff; font-family:verdana">Falará nos grandes pensadores...
Falará nos grandes pensadores como Galileu, que acreditou, como Copérnico, que
a Terra gira em volta do Sol --- foi obrigado pela Inquisição a renegar suas afirmações e foi proibido de
publicar seus eruditos livros. Que vergonha sentimos rememorando essas perseguições da Igreja a homens que
ousaram procurar a Verdade apesar das doutrinas e decretos em vigor.
margin-right
Agora a referência é a margem direita. Os valores são os mesmos: points (pt), inches (in),
centimeters (cm) ou pixels (px).
<P STYLE="margin-right:250px; color:#3333ff; font-family:verdana">A história do espírito humano...
A história do espírito humano honrará Charles
Darvin, cujo estudo profundo das plantas e dos animais resultou no célebre A Origem Das Espécies
que abalou o mundo, no qual antecipou a teoria da evolução. Credite-se à moderna teologia o fato de que a
obra de Deus, através da evolução, é agora reconhecida por muitas seitas religiosas. A marcha majestosa do
tempo através das idades tem visto o espírito do homem desenvolver poderes que ele mal imaginava durante seus
primeiros dias na Terra.
margin-top
A margem de topo define o espaçamento do parágrafo de cima. No exemplo temos um
espaçamento de uma polegada margin-top:1in, uma fonte diferente font-family:arial
com alinhamento centralizado text-align:center.
<P STYLE="margin-top:1in; color:#9400d3; font-family:arial; text-align:center">O capitão Fitz Roy...
O capitão
Fitz Roy determinou sairmos do estreito de Magalhães tomando o rumo do canal Magdalen, cujo
descobrimento ainda era de data recente. A nossa rota apontava exatamente ao sul, ao longo
daquele lúgubre corredor, que, como já disse antes, parecia conduzir a um mundo novo e ainda
mais tenebroso.
Para ver mais alguns exemplos com aplicação da propriedade margin, vá para:
Método Embedding
text-align
Especifica o alinhamento do texto que pode ser left, center, right e
justify. No exemplo o alinhamento é feito pela margem direita.
<P STYLE="text-align:right; color:#127b12; font-family:courier new">O capitão Fitz Roy...
O capitão Fitz Roy determinou sairmos do
estreito de Magalhães tomando o rumo do canal Magdalen, cujo descobrimento ainda era de data recente. A
nossa rota apontava exatamente ao sul, ao longo daquele lúgubre corredor, que, como já disse antes,
parecia conduzir a um mundo novo e ainda mais tenebroso.
text-decoration
Altera atributos do texto como sublinhado, sobrelinha, sem-linha, riscado, etc. As opções são
none, underline, overline, line-through e italic.
<P STYLE="text-decoration:underline">Texto com sublinhado
Texto com sublinhado.
<P STYLE="text-decoration:line-through">Texto riscado
Texto riscado.
<P STYLE="text-decoration:overline">Texto com sobrelinha
Texto com sobrelinha.
text-indent
Determina um recuo da primeira linha do parágrafo que é a distância entre o
início do texto e a margem esquerda. Os valores são points (pt), inches
(in), centimeters (cm) ou pixels (px).
<P STYLE="text-indent:1in; font-family:arial; text-align:justify; padding:15px">
Entrar em buracos profundos, perigosos...
Entrar em buracos profundos, perigosos, misteriosos, sem dúvida a Espeleologia
não é só um esporte corajoso, ela também ocupa uma das faces mais bizarras da ciência. Eu mesmo, apesar de apreciar
este tipo de aventura, ainda sinto uma certa estranheza em tal procedimento. Também vejo esta mesma postura
na pergunta irônica e tantas vezes formulada. "Mas o que você espera encontrar lá no fundo?". Aí está o grande
segredo. Sempre em busca do inusitado, geramos mapas e relatórios confidenciais, e mesmo que, com certa reserva,
tentamos explicar o que buscamos, o leigo nunca ficará sabendo.
text-transform
Esta propriedade possui três valores: uppercase - Formata o texto em letras maiúsculas,
lowercase - Formata o texto em letras minúsculas e capitalize
- Formata a primeira letra de cada palavra em maiúscula. Exemplos:
<FONT STYLE="text-transform:uppercase">texto formatado com uppercase</FONT>
texto formatado com uppercase
<FONT STYLE="text-transform:lowercase">texto formatado com lowercase</FONT>
texto formatado com lowercase
<FONT STYLE="text-transform:capitalize">texto formatado com capitalize</FONT>
texto formatado com capitalize
vertical-align
Esta propriedade controla o alinhamento vertical de um objeto em relação ao texto. Seus principais
valores são:
baseline - Alinha o objeto pela base da linha. Esta é a condição
default, ou seja, a condição que irá se apresentar quando você
não atribuir valores à esta propriedade.
middle - Alinha o objeto pelo meio da linha média.
top - Alinha o objeto pelo topo da linha
Um texto 
com alinhamento "vertical-align:baseline" com a imagem.
Um texto com o alinhamento "vertical-align:middle" com a imagem.
Um texto com o alinhamento "vertical-align:top" com a imagem.
percentage - Especifica uma porcentagem da altura do elemento para com
o texto padrão, sendo que 0% corresponde a base da linha e
100% ao topo da linha.
Um texto normal com um texto elevado 10%,
outro elevado 30%
e mais outro elevado 50%.
sub - Cria um texto subscrito igual a tag <SUB>.
super - Cria um texto sobrescrito igual a tag <SUP>.
Um texto normal <SPAN STYLE="vertical-align:super"> com um texto sobrescrito.</SPAN>
Um texto normal com um texto sobrescrito.
Um texto normal <SPAN STYLE="vertical-align:sub"> com um texto subscrito.</SPAN>
Um texto normal com um texto subscrito.
Ainda existem os valores bottom, text-bottom e
text-top porém estes possuem deslocamento vertical semelhantes aos
já apresentados acima.
white-space
Esta propriedade gerencia como o browser deve tratar os espaços em branco. Ela possue três valores:
normal - É a condição default e corresponde ao texto normal com
apenas um espaço entre as palavras. Nesta condição mesmo que você inserir diversos espaços entre as
palavras no código fonte o browser reconhecerá apenas um.
pre - Manterá todos os espaços em branco que você inserir entre
as palavras no código fonte. Função equivalente a tag <PRE> (PREformatted text) do HTML.
nowrap - Função equivalente a tag <NOBR>
do HTML. Elimina a quebra de linha, apresentando TODO o texto em uma única linha indefinidamente
a menos que você force uma quebra de linha com a tag <BR> (BReak Line = Quebra de linha). Quando o texto de
uma única linha for muito grande o browser apresenta a barra de locomoção horizontal no canto inferior do monitor.
<P CLASS=normal>Repare nos espaços entre as palavras...
Repare nos espaços entre as palavras...
<P CLASS=pre>Repare nos espaços entre as palavras...
Repare nos espaços entre as palavras...
NOTA: Esta propriedade não
funciona com o Internet Explorer 6.0 ou inferior.
writing-mode
Writing-mode ou Modalidade de escrita é a propriedade que controla o sentido da escrita.
O modo default é left-to-right, top-to-bottom (da esquerda para a direita, de cima para baixo)
em línguas ocidentais, mas a modalidade pode ser configurada de cima para baixo, da direita para a
esquerda conforme o padrão da escrita oriental. Ela possui dois valores:
lr-tb - (left to right - top bottom) Escrita da esquerda para
a direita do topo para baixo, padrão ocidental
tb-rl - (top bottom - right to left) Escrita to topo para baixo
da direita para a esquerda, padrão oriental.
Para nós ocidentais esta propriedade é interessante para criar alguns
efeitos de texto vertical. Com writing-mode podemos escrever
de cima para baixo ou, usando um pouquinho mais a imaginação, com os filtros
fliph & flipv, escrever de baixo
para cima.
Exemplos:
<P STYLE="writing-mode:tb-rl; width:600px">
Esta é uma frase escrita na vertical usando a propriedade CSS writing-mode.
Esta é uma frase escrita na vertical usando a propriedade CSS writing-mode.
Como você pode observar a altura da linha assume a espessura da
palavra mais comprida (propriedade), mas podemos inserir toda a frase numa única
coluna usando a propriedade white-space:nowrap.
<P ALIGN="center"><SPAN STYLE="writing-mode:tb-rl; white-space:nowrap">
Agora toda a frase numa única coluna.</SPAN>
Agora toda a frase numa única coluna.
Para inverter o sentido da escrita usamos os filtros
fliph & flipv da seguinte maneira:
<P ALIGN="center">
<SPAN STYLE="writing-mode:tb-rl; filter:flipv fliph; color:#3cb371; font-size:20px}">
Esta é uma frase escrita na vertical, de baixo para cima, usando os filtros flipv & fliph.</SPAN>
Esta é uma frase escrita na vertical, de baixo para cima, usando os filtros flipv & fliph.
Agora temos recursos para escrever
alguns filtros e um pouco de imaginação
textos em todos os sentidos usando...
algumas tag HTML, propriedades CSS,
Para aprender mais sobre os filtros flipv & fliph, vá para:
Filtros Fliph & Flipv
width & height
Estas duas propriedades têm a mesma função que as suas similares em HTML.
WIDTH determina a largura do objeto e
HEIGHT a sua altura. Ambas podem ser usadas em conjunto ou
separadamente. Seus valores podem ser em pixel (px), point (pt),
centimeter (cm) e inches (in). No exemplo, embora
a dimensão natural do arquivo mundo.gif seja de 44x42px,
configurei-o de forma ampliada aumentando sua largura e altura. Da mesma forma você pode
diminui-lo de tamanho fazendo-o caber num espaço menor que as suas medidas normais.
Tamanho normal
<IMG SRC="imagens/mundo.gif">
|
Tamanho ampliado
<IMG SRC="imagens/mundo.gif" STYLE="width:4cm; height:4cm">
|
NOTA: O efeito de ampliar ou diminuir a dimensão do arquivo não altera o seu tamanho em pixels.
word-spacing
Configura o espaço entre as palavras. Os valores podem ser em pixel (px), point (pt),
centimeter (cm) e inches (in).
<P STYLE="word-spacing:15px"> Este texto está configurado com um espaçamento de 15px.
Este texto está configurado com um espaçamento de 15px.
<P STYLE="word-spacing:1cm"> Porém este outro texto...
Porém este outro texto está configurado com um espaçamento de 1cm.