|
|
TUTORIAL CSS
LIÇÕES PRELIMINARES
PARTE I
|
 |
pré-requisitos:
Como elemento imprescindível para o aprendizado
das CSS você terá que dominar, ainda que
em nível básico, a linguagem HTML. Contudo,
será altamente desejável que você aprimore os seus
conhecimentos em HTML 4.01 e inicie o aprendizado
de XHTML que, aliás, já se encontra na versão
2.0, admitindo validação (obtenção de selos) nas
versões 1.0 e 1.1, conforme se pode aferir no site
do W3C - http://www.w3.org/.
Cabe registrar que acaba de ser noticiada e publicada
a 5.ª maior revisão da linguagem HTML (HTML 5.0),
com projeto publicado em 22 de janeiro de 2008 e
que pode ser acessado através do link
http://www.w3.org/TR/2008/WD-html5-20080122/.
Foge do escopo deste modesto trabalho detalhar
questões relativas às versões de HTML e/ou XHTML,
senão estabelecer que utilizaremos em nossos exemplos
a versão 4.01 na modalidade "Transitional". Mais
do que isto, até mesmo por ser esta uma chamada
"Lição Preliminar" em sua primeira parte, forneceremos
algumas diretrizes básicas que contribuirão para
seu melhor aproveitamento e compreensão das CSS,
principalmente no momento de validação de páginas
para obtenção de selos do W3C. Todas as suas páginas
deverão conter, antes da tag <html>,
uma tag que indique o DOCTYPE (Document Type)
do documento que você está desenvolvendo, leia-se:
qual o tipo de padrão (standard) está sendo
utilizado por você. Este documento, por exemplo,
tem a seguinte etiqueta: <!DOCTYPE html
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Sugerimos a utilização de letras minúsculas
na elaboração do código de seu documento web, haja
vista que este é o padrão (standard) estabelecido,
por exemplo, em XHTML. Não tenha preocupação
imediata nas minúcias das questões propostas, sendo
nossa sugestão tão somente aplicar as orientações
apresentadas - oportunamente você poderá estudá-las
detalhadamente, principalmente se considerarmos
o fato de que o assunto é bem mais extenso e complexo
do que esta simbólica abordagem que tem finalidade
prática específica.
Onde colocar as regras
CSS: Para abordar apropriadamente o assunto
a ser tratado no próximo tópico precisamos tratar
de apresentar alguns conceitos relacionados à vinculação
de folhas de estilo a documento no que pertine ao
local de origem das regras de estilos estabelecidas.
Tenha claro que, neste momento, não estamos cuidando
da sintaxe, da hierarquia, ou de qualquer outro
aspecto que não seja a localização, no documento
(interno), ou fora dele (externo), que definam regras
de estilo. Pelo que dito se pode depreender que
estas podem estar situadas no próprio documento
web ou estabelecidas externamente e acessadas mediante
link de endereçamento. Há duas maneiras de estabelecer
regras CSS, no próprio documento web:
1 - Aplicar os estilos dentro da própria
tag HTML com o emprego do elemento
style. Esta forma de expressão é denominada
inline. Como, então, utilizando esta
alternativa, ficaria o código de um parágrafo (tag
<p>) com largura de 250px, com a fonte verdana,
tamanho 10px e cor vermelha ? Veja abaixo:
<p style="width: 250px; font-family: verdana;
font-size: 10px; color: red;">Emprimeiro: aqui você
estará sempre em primeiro lugar</p>
Este será o resultado:
Emprimeiro: aqui você estará sempre em primeiro
lugar
Registre-se, desde logo, que a utilização das
CSS inline em muito pouco contribui para
otimização de documentos web, como mais adiante
ficará devidamente evidenciado.
2 - Outra forma de aplicação das CSS no
próprio documento é denominada estilo incorporado.
Nesta modalidade você define as regras de estilo
e as insere dentro das tags <style></style> que
deverão ser posicionadas no cabeçalho da página
(dentro das tags <head></head>, como abaixo demonstrado:
<head>
<style type="text/css">
p {
width:
250px;
font-family:
verdana;
font-size:
10px;
font-color:
red;
}
</style>
</head>
<body>
<p>Emprimeiro: aqui você estará sempre em primeiro
lugar</p>
</body>
O exemplo acima reproduz a criação de uma página
HTML com estilo CSS incorporado e
com um parágrafo com as mesmas regras de estilo
do exemplo n.º 1. Teria a seguinte seguinte
aparência:
Emprimeiro: aqui você estará sempre em primeiro
lugar
Você deve ter reparado que a aparência do exemplo
de n.º 1 é idêntica àquela exibida no exemplo de
n.º 2, sendo distinta, tão somente, a forma de codificação.
Sugerimos a confecção de uma página, utilizando
um bloco de notas ou editor de texto, para iniciar
um processo de assimilação de conteúdo.
Releia o tutorial anterior e, juntamente com
as informações contidas no parágrafo anterior, veja
se consegue modificar variáveis de aparência, através
da alteração dos valores das propriedades apresentadas:
largura do parágrafo; tipo de fonte; tamanho e cor
da fonte.
Para aqueles que têm dificuldades em fazê-lo
oferecemos alguns exemplos, como adiante segue:
Página CSS que reproduz o exemplo proposto no
modelo de n.º 2:
exemplo1
Página
CSS do modelo n.º 2 alterando a largura (width)
para 150px:
exemplo2
Página
CSS do modelo n.º 2 com o acréscimo da propriedade
letter-spacing: 1px:
exemplo3
Reflita
nas duas maneiras internas de colocação de regras
CSS, comparando-as, refletindo sobre vantagens e
desvantagens de uma em relação a outra. Mesmo sem
outros elementos, faça um esforço de abstração e
pense no chamado efeito cascata e
no que ele pode representar frente ao tema proposto.
O tema
será retomado em nossa próxima publicação, através
de uma abordagem precisa e objetiva. Até a próxima
6.ª feira.
e-mail para contato:
Como informamos no tutorial anterior, a equipe Emprimeiro
criou uma conta de e-mail como forma de estabelecer
interatividade com os nossos leitores. Alertamos
para o fato de que nem todos os e-mails recebidos
serão respondidos de maneira individualizada, sendo
certo, contudo, que todos serão atenciosamente lidos
e examinados. Reiteramos nossa preocupação e compromisso
de buscar o esclarecimento das dúvidas mais comuns
apresentadas por nossos leitores, além de responder,
através de um sistema de perguntas e respostas cuja
edição será determinada pelo conteúdo veiculado
neste canal de comunicação. Fale conosco através
do e-mail
tutoriaiscss@emprimeiro.com.br que estará
disponível para comunicação até o dia 27 de junho
do ano corrente. No próximo tutorial - Lições
preliminares - Parte II - que será publicado
no dia 07/03/2008, lhe apresentaremos os últimos
detalhes necessários para que você possa, de maneira
prática e efetiva, começar a utilizar as CSS na
construção de suas páginas.
Publicado: 29/02/2008
|
2 de 8
