Tutorial CSS

Tutorial CSS
Primeiros passos com HTML + CSS
Este breve tutorial destina-se àqueles que ainda não escreveram sua primeira folha de estilos e
desejam começar a projetar com CSS.
Aqui você não encontrará explicações avançadas sobre CSS. Este tutoriaI explica como criar um
arquivo HTML, um arquivo CSS e como integrá-los de maneira a que funcionem juntos. Após estas
noções básicas você poderá ler outros tutoriais e então incrementar os arquivos HTML e CSS aqui
criados. Ou ainda, poderá passar a usar um editor adequado para HTML ou CSS, que vai auxiliá-lo
a construir sites mais complexos.
Abaixo uma visão da página web que construiremos ao longo deste tutorial:
A página web pronta, com seu layout e cores definidas por CSS.
Reconheço que não se trata de uma bela página. ☺
Adotei como convenção ao longo do tutorial um sinal de "perigo" como este ao lado
esquerdo e uma fonte menor, para indicar um texto opcional contendo uma explicação extra sobre
os códigos HTML e CSS do exemplo. O sinal de "perigo" indica um texto contendo técnicas mais
avançadas.
Passo 1: Escrevendo o HTML

Para acompanhar os passos deste tutorial sugiro que você use a mais simples das ferramentas
disponíveis isto é, o Notepad (Windows), TextEdit ( Mac) ou KEdit (KDE) pois servirão
perfeitamente aos nossos propósitos. Depois que você tiver dominado os fundamentos básicos,
talvez queira utilizar ferramentas mais avançadas ou mesmo programas comerciais tais como,
Style Master, Dreamweaver ou GoLive. Mas, para seus primeiros passos com CSS não será
interessante utilizar-se de ferramentas com recursos mais sofisticados e avançados sobre os quais
você não tenha total conhecimento e domínio.
Não use processadores de textos tais como Microsoft Word ou OpenOffice. Eles geram arquivos
que os web browsers não conseguem interpretar. Para códigos HTML e CSS, precisamos de
arquivos de texto simples.
O passo 1 consiste em abrir seu editor de texto (Notepad, TextEdit, KEdit, ou outro de sua
preferência), e digitar o código mostrado abaixo:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
<title>Minha primeira página CSS</title>
</head>
<body>


<ul class="navbar">
<li><a href="index.html">Home page</a>
<li><a href="pensamentos.html">Pensamentos</a>
<li><a href="cidade.html">Minha cidade</a>
<li><a href="links.html">Links</a>
</ul>


<h1>Minha primeira página CSS</h1>
<p>Bem vindos à minha página estilizada!
<p>Minha página não contém imagens, mas pelo

menos está estilizada.
Ela contém links, ainda que eles não levem
a lugar algum…
<p>Deveria haver mais textos aqui porém eu

ainda não decidi o que escrever.


<address>Construida em 15 de dezembro de 2004<br>
por mim mesmo.</address>
</body>
</html>
Na realidade você não precisa digitar o código, simplesmente copie e cole no editor.
A primeira linha do código HTML acima informa ao browser qual é o tipo de

HTML do código (DOCTYPE significa DOCument TYPE - DOCumento TIPO). No nosso
caso trata-se de HTML version (versão) 4.01.
As palavras dentro dos sinais < e > são chamadas de tags e, como você pode notar, o
documento está contido dentro das tags <html> e </html>. Entre as tags <head> e </head>
poderão estar contidas várias informações que não são mostradas na tela. Note que ali está
contido o título (title) do documento e mais adiante você verá que nossa folha de estilos
também será colocada ali.
A tag <body> contém o texto do documento em si. A princípio tudo que está dentro dela
será mostrado na tela exceto textos colocados entre os sinais , que se destinam a
abrigar comentários no código. O browser ignora os comentários.
Sobre as demais tags no exemplo, <ul> é para exibir “Listas não ordenadas”, isto é, uma
lista na qual os seus itens não são numerados. A tag <li> é para cada um dos "Itens da
lista". A tag <p> é para “Parágrafos.” E, a tag <a> é para “Âncoras”, e servem para criar
hyperlink.
O código HTML digitado no NotePad.
Se você quiser saber o significado dos nomes dentro dos sinais <…> (nomes das
tags) um bom lugar para consulta e leitura é Primeiros passos com HTML. Mas, a seguir
alguns comentários sobre a estrutura do HTML da nossa página.
• O elemento “ul” marca uma lista contendo um hiperlink por item. Esta lista com
seus itens se constituirá no "menu de navegação do site", com links para outras
páginas do nosso (hipotético) Web Site. Provavelmente todas as páginas do site
conterão um menu igual a este.
• Os elementos “h1” e “p” marcam o conteúdo da página e a assinatura no rodapé da
página (“address”) será igual para todas as páginas do site.
Observe que eu não usei tags de fechamento para os elementos “li” e “p”. Em HTML (ao
contrário de XHTML), é permitido omitir as tags de fechamento </li> e </p> e eu as omiti
com a finalidade de tornar o texto do código mais legível. Contudo você pode usar as tags
de fechamento se assim preferir.
Vamos admitir que este será um layout de página que se repetirá várias vezes no Web site.
Como é bastante comum em Web sites as páginas se repetem com um mesmo menu de
navegação e assinatura e uma área de conteúdo.
Agora selecione, no menu "Arquivo" ("File") "Salvar como..." (“Save As…”), escolha um
diretório e pasta (salvar no Desktop é bem apropriado neste caso) e grave ("salve") o
arquivo com o nome de “minhapagina.html”. Não feche o editor, pois iremos precisar dele
mais adiante.
(Se você estiver usando o TextEdit para Mac, você deverá informar ao TextEdit que o texto
a gravar é do tipo "plain text", para isto vá ao menu Format e selecione “Make plain text”.
A seguir ao salvar o texto e o TextEdit propor adicionar a extensão “.txt” ao arquivo,
escolha “Don't append.” Algumas vezes o Mac dá uma de inteligente…)
A seguir abra o arquivo que você salvou em um browser. Você pode fazer isto da seguinte
maneira: procure o arquivo com o gerenciador de arquivos (Windows Explorer, Finder ou
Konqueror) e dê um ou dois cliques de mouse sobre o arquivo “minhapagina.html”. Esta
ação deverá fazer com que o arquivo seja aberto no browser default do seu sistema. (Se isto
não acontecer abra o seu browser e arraste o arquivo para dentro dele.)
Você constatará tratar-se de uma página visualmente inexpressiva...
Passo 2: Adicionando cores

Você muito provavelmente viu algum texto na cor preta sobre um fundo branco, mas isto
vai depender de como seu browser está configurado. Uma maneira bem fácil de acresentar
estilização à página é adicionar algumas cores a ela. (Mantenha seu browser aberto, vamos
usá-lo novamente mais adiante.)
Comecemos com uma folha de estilos incorporada ao arquivo HTML. Mais a frente,
separaremos os arquivos HTML e CSS. Separar os arquivos é uma boa técnica, pois isto
permite usar a mesma folha de estilos para vários arquivos HTML: você precisará escrever
uma só folha de estilos. Por ora vamos colocar nossa CSS no mesmo arquivo HTML.
Vamos precisar inicialmente do elemento <style> no nosso arquivo HTML. A folha de

estilos será colocada dentro deste elemento. Então mãos a obra! volte ao seu editor e
acresente mais cinco linhas de código dentro da tag "head" do seu arquivo HTML:

<html>
<head>
<style type="text/css">
body {
color: purple;
background-color: #d8da3d }
</style>
</head>
<body>
[etc.]
As linhas a acresentar estão destacadas acima na cor vermelha. A primeira linha informa
que trata-se de uma folha de estilos escrita para CSS (“text/css”). A segunda linha diz que
as regras de estilo a seguir, aplicam-se ao elemento “body”. A terceira determina que os
textos serão em cor purple (púrpura) e a linha a seguir coloca a cor #d8da3d (amarela
esverdeada) para o fundo da página.
Em CSS as folhas de estilos são constituidas de regras. Cada regra compõe-se de

três partes:
1. um selector (no exemplo: “body”), que informa ao browser qual é a parte do

documento a qual se aplica a regra;
2. uma propriedade (no exemplo, 'color' e 'background-color', duas propriedades
distintas), que especifica qual é o aspecto do layout que está sendo estilizado;
3. e um valor ('purple' e '#d8da3d'), que fornece o valor da propriedade.
No exemplo nota-se que as regras podem ser combinadas. Ali estão escritas duas
propriedades. Poderíamos ter escrito duas regras separadamente sem combiná-las:
body { color: purple }

body { background-color: #d8da3d }
mas, como as duas regras valem para o elemento body, escrevemos uma só vez o elemento
e colocamos as propriedades com seus valores, juntas. Para saber mais sobre seletores
consulte capítulo 2 do Lie & Bos.
A cor de fundo (background-color) do elemento body valerá para todo o documento. Nós
não escrevemos nenhuma regra adicional colocando fundo de outra cor para os outros
elementos da página (p, li, address…) então por 'default' eles não terão cor de fundo (ou
seja: serão transparentes). A propriedade 'color' determina a cor dos textos para o elemento
body e todos os elementos contidos em body herdarão esta cor, a menos que uma outra
regra CSS determine uma cor diferente para qualquer elemento na página. (Mais adiante
nós escreveremos uma regra assim.)
Agora, salve seu arquivo (use “Save” no menu File ) e volte à janela do seu browser. Dê um
"Reload" (Atualizar) na página e seu aspecto mudará, mostrando as cores adicionadas pelas
regras CSS escritas. À exceção da lista de links na parte superior, o texto deverá estar na
cor púrpura sobre um fundo amarelo esverdeado.
A página com cores adicionadas, renderizada em um browser.
Cores podem ser escritas em CSS de variadas maneira. Neste exemplo

mostrei duas delas: pelo nome da cor (“purple”) e por seu código hexadecimal (“#d8da3d”).
Existem cerca de 140 nomes para cores e o código hexadecimal permite especificar mais de
16 milhões de cores. Mais explicações sobre cores em Adicionando um toque de estilo.
Passo 3: Adicionando fontes

Outra coisa bem fácil de se estilizar são as fontes para os elementos da página. Vamos
escolher fonte “Georgia” para os textos, exceto para o cabeçalho h1 ao qual atribuiremos a
fonte “Helvetica.”
Você nunca terá como saber quais são as fontes que os visitantes do seu site têm instaladas
em suas máquinas, por isso é de boa técnica sempre especificarmos fontes alternativas nas
folhas de estilos: se a fonte Georgia não estiver disponível as fontes Times New Roman ou
Times irá substituí-la sem grandes prejuízos e ainda mais, se ambas também estiverem
indisponíveis o browser do visitante usará uma fonte (with serif) com serifas. Se a fonte
Helvetica não estiver instalada, as fontes Geneva, Arial e SunSans-Regular são similares e
se nenhuma delas estiver disponível o browser usará uma fonte sem serifas.
No seu editor de textos acresente mais estas linhas:

<html>
<head>
body {
font-family: Georgia, "Times New Roman",
Times, serif;
color: purple;
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
</style>
</head>
<body>
[etc.]
Salve o arquivo, abra novamente o browser e dê um "Reload" (Atualizar) na página para

visualizar as fontes diferentes para o cabeçalho h1 e o restante do texto.
Agora cabeçalho e texto estão com fontes diferentes.
Passo 4: Adicionando o menu de navegaÇÃo

A lista no topo da página destina-se a se constituir no menu de navegação. Web sites em
geral tem uma barra de navegação disposta horizontalmente no topo ou um menu na lateral
da página e nossa página também terá seu menu de navegação. Usaremos um menu na
lateral esquerda, por considerarmos mais interessante que uma barra no topo...
Nosso menu já esta no código HTML da página. Ele é a lista <ul> no topo. Os links ali
inseridos não levam a lugar algum pois nosso “Web site” tem uma só página, mas isto não é
importante agora. Em um Web site real, é óbvio, não devemos ter nenhum link "quebrado".
Agora precisamos mover a lista para a esquerda e o restante do texto para a direita com a
finalidade de abrir espaço para a lista. As propriedades CSS que usaremos para isto são
'padding-left' (para mover o texto para a direita) e 'position', 'left' e 'top' (para posicionar o
menu).
Existem outras maneiras de se fazer isto. Se você der uma olhada em “column” ou “layout”
na página Aprendendo CSS , vai encontrar vários templates para layout. Mas para o nosso
exemplo as propriedades citadas acima são adequadas.
No editor de texto adicione mais estas linhas no arquivo HTML:

<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
</style>
</head>
<body>
[etc.]
Salve o arquivo e dê "Reload" (Atualizar) no browser para ver o menu a esquerda do texto.
Agora nossa página já esta mais interessante, não é mesmo?
O texto principal à direita e a lista de links à esquerda.
A regra 'position: absolute' determina que o elemento ul seja posicionado na página

independentemente de qualquer texto que venha antes ou depois no código HTML e as
propriedades 'left' e 'top' indicam qual a posição a ocupar. No nosso caso, 2em abaixo do
topo e 1em para a direita do lado esquerdo da janela do browser.
'2em' significa 2 vezes o tamanho da fonte adotada. Por exemplo: se o menu está com fonte
de 12 points, 2em equivalem a 24 points. A unidade 'em' é muito usada em CSS, pois ela
permite que as medidas se adaptem automaticamente ao tamanho de fonte que os usuários
costumam utilizar em suas preferências pessoais. A maioria dos browsers possuem a
facilidade de permitir que o usuário aumente ou diminua o tamanho de fonte ao visualizar
uma página web: faça você mesmo uma experiência em seu browser aumentando e
diminuindo o tamanho da fonte e observe como o tamanho do nosso menu acompanha o
aumento e diminuição da fonte. Isto não aconteceria se tivessemos usado um tamanho para
o menu em pixel.
Passo 5: Estilizando os links

O menu de navegação mais se parece com uma lista do que com um menu. Vamos estilizá-
lo. Comecemos removendo os marcadores de lista e deslocando o menu mais para a
esquerda, para o lugar agora ocupado pelos marcadores. Vamos acresentar um fundo
branco para os itens da lista e também um quadradro preto. (Por que fazer isto?
Simplesmente porque isto é possível, sem qualquer motivo adicional.)
Até agora ainda não definimos as cores para os links, então esta é a hora: azul para links
não visitados e púrpura para links já visitados:

<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black }
ul.navbar a {
text-decoration: none }
a:link {
color: blue }
a:visited {
color: purple }
</style>
</head>
<body>
[etc.]
Tradicionalmente os browsers renderizam os hyperlinks com um sublinhado e com

cores. Usualmente as cores adotadas pelos browsers são as mesmas que adotamos no nosso
exemplo: azul para links não visitados (ou visitados há muito tempo) e púrpura para links já
visitados.
Em HTML, criamos hyperlinks com o elemento <a>, assim para especificar cores para
links estabelecemos regras CSS para "a". Para fazermos diferenciação entre links visitados
e não visitados estão previstas duas "pseudo-classes" CSS (:link e :visited). Elas são
chamadas de "pseudo-classes" para diferenciá-las das classe de atributos, que são usadas
nos código HTML, por exemplo a class="navbar" do nosso exemplo.
Passo 6: Adicionando uma linha horizontal

A última regra para estilização que escreveremos em nosso exemplo será para adicionar
uma linha horizontal separando o texto principal da assinatura ao pé da página. Usaremos a
propriedade 'border-top' para colocar uma linha horizontal pontilhada acima do elemento
<address>:

<html>
<head>
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
ul.navbar a {
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
</style>
</head>
<body>
[etc.]
Aqui completamos a folha de estilos. A seguir vamos ver como colocar a folha de estilos
em um arquivo separado e com isto usar uma folha para várias páginas.
Passo 7: Colocando a folha de estilos em um arquivo

separado
Temos agora um arquivo HTML com uma folha de estilos incorporada. Quando nosso site
crescer, provavelmente muitas páginas deverão compartilhar a mesma folha de estilos.
Existe uma maneira bem mais racional do que sair copiando a folha de estilos em cada uma
das páginas do Web site: se colocarmos a folha de estilos em um arquivo separado, todas as
páginas do site poderão conter um link apontando para este arquivo.
Para nosso arquivo de folha de estilo precisaremos criar um outro arquivo de texto. Escolha
“New” no menu File do seu editor de texto (Se estiver usando o TextEdit, não se esqueça
do plain text usando o Format menu.)
A seguir, no editor, copie tudo o que estiver dentro do elemento <style> no HTML e cole
no arquivo novo que você acabou de criar. Não copie as tags <style> e </style>. Elas são
do HTML e não pertencem ao arquivo CSS. Agora na nova janela do editor que você abriu
deverá estar com esta folha de estilos:
body {
padding-left: 11em;
Times, serif;
color: purple;
ul.navbar {
padding: 0;
margin: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em }
h1 {
ul.navbar li {
background: white;
margin: 0.5em 0;
padding: 0.3em;
ul.navbar a {
a:link {
color: blue }
a:visited {
color: purple }
address {
margin-top: 1em;
padding-top: 1em;
border-top: thin dotted }
Escolha “Save As…” no menu File, e salve com o nome “meuestilo.css” no mesmo
diretório/pasta onde está o arquivo minhapagina.html.
Agora volte para o arquivo HTML. Apague tudo que estiver dentro do elemento <style>
incluindo <style> e </style> e coloque no lugar um elemento <link> como mostrado
abaixo:

<html>
<head>

<link rel="stylesheet" href="meuestilo.css">
</head>
<body>
[etc.]
Este link informa ao browser que que a folha de estilos para a página está em um arquivo
chamado “meuestilo.css” e como nenhum diretório está indicado no caminho do link o
browser procurará no mesmo diretório do arquivo HTML.
Se você salvar o arquivo HTML e der um "Reload" (Atualizar) na página, nenhuma

mudança ocorrerá: a página continua estilizada da mesma maneira mas agora as regras de
estilo estão em um arquivo externo.
O resultado final
O próximo passo agora é carregar os arquivos criados, minhapagina.html e meuestilo.css

para seu Web site. (Bem, talvez você queira fazer algumas mudanças antes...) Agora, como
fazer isto vai depender do seu provedor Internet.
http://www.maujor.com/w3ctuto/firstcss.html
Construindo um layout sem tabelas
Sumário e status
Muito já se tem dito e repetido que tabelas não devem ser usadas com a finalidade de
construir o layout de uma página web. Este documento mostra uma maneira de se construir
um layout de 3 colunas sem tabelas, usando-se somente CSS.
Sugestões e comentários serão muito bem-vindos e sinta-se à vontade para enviá-los a

Dominique Hazaël-Massieux. Este documento foi traduzido para as línguas espanhola ,
francesa e português brasileiro
Introdução
HTML é uma linguagem estrutural, ou seja, é - ou deveria ser - usada para estruturar textos
através de tags. A tag table deveria ser usada tão somente com a finalidade de apresentar
dados dentro de uma tabela com linhas e colunas.
Mas desde que as tabelas foram implementadas no HTML elas tem sido amplamente
usadas para montagem de layouts e muito comumente para compartimentar uma página
web em colunas. Ao fato de que este uso das tabelas contraria sua finalidade (seu propósito
semântico) soma-se ainda várias outras desvantagens, entre elas notadamente a dificuldade
de um parseamento adequado na renderização das tabelas em determinados contextos
(usuários com necessidades especiais, agentes de usuários com restrições,....).
Este documento descreve uma maneira de criar um layout de 3 colunas e oferece links para
outras páginas que mostram técnicas de criação de layout.
Descrição do layout
A técnica descrita a seguir foi usada para construir a página para novos usuários do W3C (
page for new W3C users ) e permite criar um layout de 3 colunas com as seguintes
características:
• Os textos da coluna central são escritos no início do código da página o que

significa "aparecer" no topo da área de visualização, quando a página é renderizada
em um browser sem suporte ou com CSS desabilitada
• seguem-se as colunas esquerda e direita, nesta ordem
Isto é ideal para Home Pages já que dispõe o texto no centro e as listas de links (menus de
navegação) nas laterais.
Uma restrição para este tipo de layout é que ele não funciona bem em agentes de usuário
com suporte precário para CSS, contudo a página permanece perfeitamente legível em um
tradicional layout vertical.
Esta página que você está lendo usa este tipo de layout e assim você pode ter uma idéia de
como é o layout.
Implementação
Este layout usa posicionamento CSS absoluto (CSS absolute positionning).

Definimos 3 divisões (DIVs) no HTML da página <div id="main">, <div id="list1"
class="link-list">, <div id="list2" class="link-list">, e aplicamos as seguintes
regras CSS a elas:
/* Propriedades comuns às duas colunas laterais de links */

div.link-list {
width:10.2em;
position:absolute;
top:0;
font-size:80%;
padding-left:1%;
padding-right:1%;
margin-left:0;
margin-right:0;
}
/* usamos a propriedade margin para abrir espaços para as colunas
laterais */
#main {
margin-left:10.2em;
margin-right:10.2em;
padding-left:1em;
padding-right:1em;
}
/* e aqui colocamos as colunas laterais no lugar */
#list1 {
left:0;
}
#list2 {
right:0;
}
O fundamento básico consiste em "abrir" espaços nas duas laterais da coluna central div#main usando as
propriedades margin-left e margin-right e a seguir posicionar cada uma das colunas laterais usando
position:absolute, uma no canto superior esquerdo e a outra no canto superior direito através da
definição das suas coordenadas (0,0).
Com a finalidade de "esconder" a folha de estilos de browsers com suporte precário ou mesmo sem suporte
para CSS usamos a diretiva <style type="text/css">@import url('your-stylesheet-
url');</style> para nossa folha de estilos.
Referências
Desenvolvendo layout CSS
As especificações para CSS2 estabelecem uma propriedade CSS que permite a

renderização de um elemento em linhas e colunas, contudo esta propriedade,
lamentavelmente, ainda não está plenamente implementada.
Existem várias soluções alternativas e entre elas:
• técnicas CSS para construção de layout (2,3 e 4 colunas) incluindo "remendos" para
solucionar bugs (buggy workaround)
• construção passo-a-passo de layout CSS avançado
• the layout reservoir (o "depósito" de layouts )
Referências CSS
• Homepage das CSS

• Especificações CSS1 e Especificações CSS2
• Tutoriais CSS
Referências CSS

• Tutoriais CSS
Referências CSS

• Tutoriais CSS
Dominique Hazaël-Massieux, $Id: csslayout-howto.html.en,v 1.3 2004/12/15 05:51:34 dom

Exp $
http://www.maujor.com/w3ctuto/layout.html
Folhas de Estilo para Web
dicas & macetes CSS
(esta página usa Folhas de Estilos)
Cantos arredondados e sombras
Cinco imagens
Resultado
Caixas com cantos arredondados e sombras

As recomendações CSS3 irão prever propriedades para construção de bordas arredondadas,
no entanto você pode simular estes efeitos usando as propriedades já disponíveis em CSS2
— e sem uso de qualquer tabela ou marcação extra no código.
Esta página foi inspirada em uma página criada por Arve Bersvendsen. Ele desenvolveu
várias outras demonstrações sobre CSS .
Sem dúvidas, construir bordas arredondadas e caixas (boxes) com sombra será uma tarefa
bem mais simples com a implementação de CSS3. Por exemplo: Para colocar uma borda
arredondada grossa na cor vermelha em um parágrafo, você terá que escrever regras CSS
como abaixo mostrado:
P { border: solid thick red;

border-radius: 1em }
E, para colocar uma sombra em um parágrafo, uma regra CSS apenas é suficiente, como
mostrado abaixo, onde a cor da sombra é black x-offset e y-offset são 0.5em e com raio de
0.3em.
P { box-shadow: black 0.5em 0.5em 0.3em }
(Você pode tentar este link para constatar se estas propriedades já estão implementadas.)
Mas, se precisar usar estes efeitos sem se preocupar se eles já foram ou não implementados
e sem encontram suporte nos browsers, use a técnica mostrada a seguir.
Cinco imagens em um elemento

O uso da propriedade CSS2 "content", gerador de conteúdo antes e depois ('::before' e
'::after') possibilita colocar quatro imagens extras em um elemento. O pseudo-elemento
'::before' admite a colocação de duas imagens (uma imagem é o fundo do pseudo-elemento
e a outra imagem é o próprio conteúdo a inserir), da mesma forma o pseudo-elemento
'::after' admite a colocação de duas imagens e por fim o próprio elemento em si admite uma
imagem de fundo, perfazendo um total de cinco imagens.
Usamos neste tutorial cinco imagens PNG colocando-as nos quatro cantos e no lado direito
do elemento. Abaixo estão as imagens usadas:
canto superior esquerdo (top left corner):
borda superior e canto superior direito (top edge and top right corner):
parte central e borda direita (middle part and right edge):

canto inferior esquerdo (bottom left corner):
borda inferior e canto inferior direito ( bottom edge and bottom right corner):
E a seguir as regras CSS para posicionar as imagens:
blockquote {
max-width: 620px;
background: url(rs-right.png) right repeat-y }
blockquote:before {
display: block;
line-height: 0;
background: url(rs-topright.png) top right no-repeat;
content: url(rs-topleft.png) }
blockquote:after {
display: block;
line-height: 0;
background: url(rs-bottomright.png) bottom right no-repeat;
content: url(rs-bottomleft.png) }
Uma vez que construimos nossa imagem de fundo com 620px de largura não devemos
permitir que o box possa distender-se além daquela largura, para evitar "aparecimento" de
uma faixa branca no fundo. Por isto escrevemos uma regra para 'max-width'. A propriedade
'display: block' é necessária para garantir que os conteúdos gerados por "content" formem
elementos nível de bloco e em consequência ocupem posição acima e abaixo do bloco
principal e não, inseridos na primeira e última linhas. A regra 'line-height: 0' garante a não
existência de espaçamentos horizontais extras entre as imagens de fundo.
O resultado
E, abaixo o resultado final:
Você vê uma caixa na cor verde com cantos arredondados e sombra, assentada em um
fundo branco? Se não vê, seu browser não consegue "entender" a propriedade CSS para
gerar conteúdo denominada "content".
O HTML é simplesmente, o mostrado a seguir:
<blockquote>
<p>Você vê uma caixa na cor verde com cantos
arredondados e sombra, assentada em um fundo
branco? Se não vê, seu browser não consegue
"entender" a propriedade CSS para gerar conteúdo
denominada "content".</p>
</blockquote>
E, mais ainda, se você quer saber se seu browser "entende" esta técnica com propriedades
CSS-3, veja neste link. http://www.maujor.com/w3ctuto/roundshadow2.html
http://www.maujor.com/w3ctuto/roundshadow.html

Tutorial CSS

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial CSS

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial CSS

Primeiros passos com HTML + CSS

Reconheço que não se trata de uma bela página. ☺

Passo 1: Escrevendo o HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<p>Bem vindos à minha página estilizada!

<p>Minha página não contém imagens, mas pelo

<p>Deveria haver mais textos aqui porém eu

A primeira linha do código HTML acima informa ao browser qual é o tipo de

O código HTML digitado no NotePad.

Você constatará tratar-se de uma página visualmente inexpressiva...

Passo 2: Adicionando cores

Vamos precisar inicialmente do elemento <style> no nosso arquivo HTML. A folha de

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

Em CSS as folhas de estilos são constituidas de regras. Cada regra compõe-se de

1. um selector (no exemplo: “body”), que informa ao browser qual é a parte do

body { color: purple }

Cores podem ser escritas em CSS de variadas maneira. Neste exemplo

Passo 3: Adicionando fontes

No seu editor de textos acresente mais estas linhas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

Salve o arquivo, abra novamente o browser e dê um "Reload" (Atualizar) na página para

Passo 4: Adicionando o menu de navegaÇÃo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

A regra 'position: absolute' determina que o elemento ul seja posicionado na página

Passo 5: Estilizando os links

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

Tradicionalmente os browsers renderizam os hyperlinks com um sublinhado e com

Passo 6: Adicionando uma linha horizontal

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

Passo 7: Colocando a folha de estilos em um arquivo

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<title>Minha primeira página CSS</title>

Se você salvar o arquivo HTML e der um "Reload" (Atualizar) na página, nenhuma

O próximo passo agora é carregar os arquivos criados, minhapagina.html e meuestilo.css

Sugestões e comentários serão muito bem-vindos e sinta-se à vontade para enviá-los a

• Os textos da coluna central são escritos no início do código da página o que

Este layout usa posicionamento CSS absoluto (CSS absolute positionning).

/* Propriedades comuns às duas colunas laterais de links */

As especificações para CSS2 estabelecem uma propriedade CSS que permite a

Existem várias soluções alternativas e entre elas:

• Homepage das CSS

• Homepage das CSS

• Homepage das CSS

Dominique Hazaël-Massieux, $Id: csslayout-howto.html.en,v 1.3 2004/12/15 05:51:34 dom

Cantos arredondados e sombras

Caixas com cantos arredondados e sombras

P { border: solid thick red;

P { box-shadow: black 0.5em 0.5em 0.3em }

Cinco imagens em um elemento

canto superior esquerdo (top left corner):

parte central e borda direita (middle part and right edge):

E a seguir as regras CSS para posicionar as imagens:

O HTML é simplesmente, o mostrado a seguir:

Você também pode gostar