padrao web5

•

Escola Monteiro Lobato

0

Elson Costa

22/12/2012

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Algoritmos

28.865 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

55
tu
to
ri
al
 
Incluindo CSS em seu projeto web
Dando continuidade ao Tutorial do CSS, nesta segunda 
e última parte aprenderemos como incluir o CSS em seu 
projeto na web.
Antigamente, colocávamos as formatações no próprio 
código, conforme podemos observar no exemplo abaixo:
...
<body bgcolor=”#FFFFFF”>
 <table border=”0” cellpadding=”7” cellspacing=”0” 
width=”78%”>
 <tr>
 <td align=”justify” colspan=”3” valign=”top” 
bgcolor=”#000066”>
 <p>
 <font color=”#FFFFFF” size=”7” 
face=”Helvetica, sans-serif, Arial”>Cursos</font>
 </p>
 </td>
 </tr>
 <tr>
 <td rowspan=”4” valign=”top” bgcol-
or=”#000066” width=”20%”>
 <p>
 <b><font face=”Helvetica, sans-serif, Arial” 
color=”#FFFFFF”>Cursos de WebDesigner:</font></b>
...
No código acima, podemos observar diversas ocor-
rências de inclusão de elementos de formatação. Esta é 
uma forma que, infelizmente, ainda é muito encontrada em 
páginas na Web.
Evoluindo no caminho certo, observamos no exemplo a 
seguir, como poderemos escrever menos linhas com os mes-
mos resultados visuais encontrados no exemplo acima.
... 
<head>
 <title>
 Minha Home Page
 </title>
 <style type=”text/css”>
body {background-color:#FFFFFF}
.logo {color:#FFFFFF;font-size:46pt;font-family:hel-
vetica, arial, sans-serif,;}
.cabecalho1,.link {color:#FFFFFF;font-family:helvetica, 
sans-serif, arial;}
. cabecalho2 {color:#FF0000;font-family:helvetica, 
sans-serif, arial;font-weight:bold;}
. cabecalho3 {font-family:helvetica, sans-serif, 
arial;font-weight:bold;}
.azul {background-color:#000066;}
</style>
</head>
...
Com isso, estamos alcançando nosso objetivo, sepa-
rando a formatação do seu conteúdo, mas ainda existe 
um problema. Os códigos, apesar de separados, estão no 
mesmo arquivo.
CSS permite que o HTML ou o XHTML volte ao seu 
objetivo original, ou seja, em seu conteúdo. Separando o 
conteúdo da exibição, o CSS permite uma nova maneira e 
facilita a vida dos designers e desenvolvedores.
Padrões Web 5
A ampliação do HTML desembocou na famigerada “guerra dos browsers”, na qual cada fabricante desenvolvia, ao seu juízo, uma solução própria para facilidades 
de renderização e interpretação da linguagem de marcação.
O W3C, percebendo o rumo caótico para onde se encaminhava a internet, não vem economizando esforços para alcançar uma maior padronização. Padronização 
de softwares, de hardwares, de códigos de dispositivos, en m, de todo componente relacionado à web. 
Uma padronização que garanta compatibilidade com dispositivos em uso, com dispositivos futuros, e que garanta servir um único código não só para diferentes 
navegadores e resoluções de monitor, como também para diferentes mídias, dispositivos especiais e agentes de usuários os mais diversos.
Prof. Everaldo Bechara e Prof. Maurício Samy Silva
Professores do Centro de Treinamento iLearn 
falacom@iLearn.com.br
56
Logo, devemos nos acostumar a usar o CSS para con-
trolar a exibição. Quando eu digo “exibição”, são todas as 
formas de exibição, inclusive layout. Uma, duas ou três 
colunas são formas de layouts, portanto controladas pelo 
CSS. Sei que é meio intrigante no início e para muitos que 
estão acostumados a desenvolver layouts não entenderão 
no início como um arquivo CSS tem tanto “poder” assim.
Na evolução natural do XHTML, muitos elementos de 
formatação serão eliminados, portanto veja como o W3C está 
direcionando a Web e como você está no caminho certo.
Vantagens de separar estilo de conteúdo
Com a introdução do XML (metalinguagem do XHTML), 
a exibição de dados se torna única e a formatação é atribuí-
da as folhas de estilo. 
Esta separação é fundamental, pois permite aos desen-
volvedores um controle muito maior que antes, conseguindo 
assim, diversas vantagens, como descreveremos abaixo:
Legibilidade
É muito mais fácil e lógico manter seu site com as fo-
lhas de estilos, pois com os códigos cada vez maiores, ima-
gine com tudo isso (apresentação + conteúdo) misturado?! 
Quando der algum problema, você ficará louco procurando 
em uma quantidade muito grande de linhas. 
Com as folhas de estilos, tudo ficará mais simples. Se 
o problema for detectado como sendo de apresentação, 
basta analisar o CSS. Caso o problema seja de conteúdo, 
analisaremos o XHTML. Simples, não.
Pode imaginar como a manutenção de seu projeto Web 
irá ganhar de tempo e em produtividade?
Otimização de código
Imagine uma empresa com vários departamentos. Ao 
criarmos uma folha de estilo, ali estará toda a identidade 
visual desta empresa. Assim, o arquivo CSS poderá ser en-
caminhado para diversos setores, criadores de conteúdo 
desta empresa, com a garantia que todas as páginas estarão 
seguindo a mesma identidade visual.
Uma matriz poderá encaminhar este CSS para todas as 
suas filiais espalhadas pelo mundo. Isso não é sonho. Isso 
já acontece com algumas empresas globalizadas. Isso sig-
nifica economia, qualidade e otimização dos recursos.
Dispositivos
A possibilidade de visualizarmos nossos sites em disposi-
tivos diversos é uma realidade. PDAs, celulares ou mesmo em 
dispositivos lançados por empresas que fogem aos padrões 
de design que estamos acostumados, acessam a Web. Desta 
forma, ser acessível aos dispositivos hoje existentes é uma 
obrigação de todos os designers e desenvolvedores.
Quando um dispositivo não interpreta o CSS, o conteú-
do desta página passa a ser visualizado sem a formatação.
Veja, por exemplo, um site visualizado pelo browser Firefox 
com a barra de desenvolvedor instalada. A visão do site para 
desktop (computador tradicional) é apresentada a seguir.
Figura 1 - Página home do site de Eric Meyer
www.meyerweb.com
Agora, vamos visualizar esta mesma página, como se 
estivéssemos em um dispositivo que acesse a internet, mas 
que não dá suporte ao CSS.
A imagem abaixo exibe a seguinte situação: mesmo 
não acessando e interpretando o CSS, o documento conti-
nua acessível, ou seja, a página analisada poderá ser visu-
alizada e seu conteúdo estará disponível para leitura.
Figura 2 - Página home do site de Eric Meyer 
visto por um dispositivo sem a implementação do CSS
tu
to
ri
al
 
57
tu
to
ri
al
 
Este recurso é muito interessante e importante aos 
desenvolvedores Web.
Fundamentos do CSS - continuação
Valores e unidades
Unidades de cor
Propriedades de fundo, cor de texto etc podem as-
sumir diversas cores diferentes. Uma forma de atribuirmos 
as cores aos elementos desejados é pelo nome. Embora 
não seja aconselhável tal utilização, ainda é possível.
Nomes como RED, BLUE, AQUA etc. Esta forma é 
bastante conhecida para quem já trabalha com HTML.
Uma outra forma é a utilização do código hexadeci-
mal, ou seja, representando o RGB. FFFFFF significa FF 
para R (Red), outra seqüência de FF para o G (Green) e 
a última seqüência de FF para o B (Blue). Ou seja, uma 
cor como a preta é representada por #000000, ausência 
de cor. R (00) + G (00) + B (00) = Preto.
Como existe a repetição de caracter no R, no G e no 
B, podemos abreviar para #000. Neste sentido, se tenho 
um componente com #EE5511, então posso representá-
la da seguinte forma: #E51. Melhor e menos código.
Unidades de tamanho
Muitas propriedades utilizam unidades de tama-
nho como valores, podendo ser positivo ou negativo 
(menos para algumas propriedades que restringem o 
uso do negativo).
As unidades de tamanho estão descritas abaixo:
Nome Abreviação
Eme em
Polegada in
Ex ex
Paica pc
Ponto pt
Pixel px
Milímetro mm
Centímetro Cm
Porcentagem %
Figura 3 – Tabela dos tamanhos possíveis
Propriedade de texto
A quantidade de propriedades dedicadas a for-
matação básica de um conteúdo é muitíssima grande. 
Vertical-align, text-align, text-decoration, text-indent, 
text-transform, word-spacing, letter-spacing, white-
space, text-shadow, font-size-adjust e font-stretch, 
além dedirection e unicode-bidi, duas formas de con-
trolar a direção do texto.
Veja o exemplo a seguir:
<head>
 <title>Exemplos</title>
 <style type=”text/css”>
 p { 
 letter-spacing:1em; 
 word-spacing:1em 
 }
 </style>
</head>
<body>
 <p>Veja este exemplo de texto.</p>
</body>
Veja o resultado do código anterior no browser
V e j a e s t e e x e m p l o d e t e x t o
Caixas e bordas
Existem várias propriedades para manipular a exi-
bição de caixas e bordas. Display, height, width, float, 
clear, border-top-width, border-right-width, border-left-
width, border-color, border-style, border-top, border-
bottom, border-left, border-right, border, margin-top, 
margin-left, margin-bottom, margin-right, margin, 
padding-top, padding-left, padding-bottom, padding-
right e padding.
Veja o exemplo:
<head>
 <title>Documento XHTML</title>
 <style type=”text/css”>
 ul { 
 background: aqua; 
 margin: 10px 10px 10px 10px;
 padding: 3px 3px 3px 3px;
 }
58
tu
to
ri
al
 li { 
 color: black; 
 margin: 10px 10px 10px 10px;
 padding: 12px 0px 12px 12px; 
 list-style: none;
 }
 li.border { 
 border-style: dashed; 
 border-width: medium; 
 border-color: black; 
 } 
 </style>
 </head>
 <body>
 <ul>
 <li>Itens da Lista</li>
 <li class=”border”> Itens da Lista</li>
 </ul>
 </body>
Veja o resultado
Incluindo CSS em documentos XHTML
Ter como arquivo externo o CSS, ou seja, a for-
matação é muito produtiva, pois como vimos, um único 
arquivo poderá ser utilizado por centenas de páginas 
HTML ou XHTML.
Vamos aprender agora como incluir nosso arquivo 
CSS em documentos XHTML.
Existem quatro formas de incluirmos estilo em suas 
páginas. Então, vamos conhecê-las.
x� Link
x� Importar
x� Regras de estilo no corpo do XHTML
x� Regras de estilo no elemento head
Vejamos o exemplo abaixo. Neste código identifi-
caremos as três formas de adição de estilos.
<?xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 
1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” 
xml:lang=”en” lang=”en”>
<head>
 <title>Folha de Estilo</title>
<!-- Chamada a arquivo externo - Link -->
 <link rel=”stylesheet” type=”text/css” 
href=”file.css” />
<!-- Chamada através da importação -->
 <style type=”text/css”>
 @import “file.css”;
 body { 
 color:green;
 font-weight:bold;
 }
 </style>
</head>
<body>
 <p>Texto em negrito e verde.</p>
<!-- trodução de estilo inline, ou seja, no corpo do 
XHTML -->
 <p style=”color: red”>Texto em vermelho.</
p>
</body>
</html>
Ótimo, agora que passamos a conhecer mais sobre 
o CSS e seu poder, tente implementá-lo em seu próximo 
projeto e boa sorte! Até o próximo tutorial.