Escolar Documentos
Profissional Documentos
Cultura Documentos
Construindo Sites Com CSS e (X) HTML em PDF
Construindo Sites Com CSS e (X) HTML em PDF
Este captulo destina-se aos iniciantes. Nele apresentaremos as ferramentas mnimas necessrias ao desenvolvimento de sites, comentando e mostrando os softwares relacionados que so instalados por padro nos ambientes de desenvolvimento mais populares. Sero tambm mostrados alguns editores (X)HTML, editores de imagens e navegadores, disponveis para download na internet e de uso gratuito. Se voc um desenvolvedor experiente, poder ir para o Captulo 2, sem prejuzo do aprendizado.
1.1 Introduo
Para desenvolver um site, voc no precisa adquirir ferramentas de edio sosticadas e dispendiosas. Particularmente, os editores do tipo WYSIWYG, que so to bem-aceitos, procurados e usados, so uma ferramenta de desenvolvimento no-recomendada para o incio do aprendizado. Tais ferramentas devem ser usadas apenas quando o desenvolvedor tiver total conhecimento e controle da maneira como geram o cdigo.
A sigla WYSIWYG para a expresso What You See Is What You Get empregada para designar interfaces de produo em que o resultado final do desenvolvimento semelhante quele mostrado na interface do software durante a sua criao. A maioria dos editores de texto desse tipo, como, por exemplo, o Microsoft Word. Nesses editores os textos, paginao, formatao e apresentao do documento so mostrados na tela durante a fase de criao, de maneira idntica ao resultado final, quando o documento for impresso ou apresentado nas mdias para as quais as criaes do editor se destina.
Sites so criados com o uso de editores (X)HTML. O exemplo clssico e o mais conhecido dos editores o Adobe Dreamweaver, uma ferramenta poderosa quando usada de maneira adequada. Editores (X)HTML do tipo WYSIWYG, como o Drea-
21
53
A sintaxe da regra CSS no sensvel ao tamanho de caixa da fonte (voc pode usar letras minsculas ou maisculas, indiferentemente) e mltiplos espaos so tratados como espao simples. Usar ou no espaos entre os componentes da regra CSS ca a critrio do desenvolvedor. Todas as regras CSS mostradas a seguir so vlidas:
h1 { border: 1px solid red; } h1 {border:1px solid red;} h1{ border: 1px solid red;}
Eliminar o espao entre o seletor e o sinal de abrir chaves pode causar confuso em alguns navegadores e deve ser evitado.
Tratando-se de linguagem de programao, sempre que houver mais de uma forma vlida de escrever o cdigo o desenvolvedor deve escolher uma delas e adotla como seu padro pessoal. Isto torna o cdigo consistente e facilita a manuteno. Com as folhas de estilo aplica-se esta prtica, e voc pode escolher qualquer das formas mostradas anteriormente ou, mesmo, outras variaes para escrever suas folhas de estilo. Contudo, as duas formas de uso mais difundidas so as mostradas no primeiro e no segundo itens do exemplo anterior. A primeira adota um espao em branco junto ao sinal de chaves ({ }). A segunda, um espao somente para separar o seletor da declarao. A forma estendida de declarar as propriedades em linhas distintas escrita conforme mostrado a seguir, sendo a endentao a critrio de desenvolvedor.
h1 { border: 1px solid red; }
Um componente facultativo, mas de grande utilidade na escrita de folhas de estilo, o sinal para inserir comentrios. semelhana de qualquer linguagem de programao, existe um sinal prprio para marcar comentrios no cdigo de estilos, conforme mostrado nos exemplos a seguir: Comentrio em uma linha:
/* Este um comentrio em uma linha */
Bloco de comentrio:
/* Este um bloco de comentrio em linhas diferentes contendo muitas informaes sobre uma trecho da folha de estilos */
75
CAPTULO 5
Seletores
Neste captulo veremos os diferentes tipos de seletores CSS. Conhecer os seletores e saber combin-los de diferentes maneiras coloca nas mos do autor uma poderosa ferramenta de estilizao. No Captulo 3 tivemos uma idia da versatilidade dos seletores ao estudarmos o seletor classe e o seletor id. Entretanto, as variaes no se limitam queles dois tipos, indo bem mais adiante, e voc ver que o conjunto de seletores possveis abrange uma extensa lista. Conhecer e saber empregar seletores ajuda a manter o cdigo (X)HTML bem mais limpo, evitando o uso desnecessrio de elementos e atributos extras na marcao.
5.1 Denies
Em [C3 S3.1.4.3] e [C3 S3.1.4.4], denimos seletor classe e seletor id. Caso voc no se lembre destes seletores, volte quelas sees e faa uma reviso antes de prosseguir. Os seletores se classicam em dois grandes grupos: simples e compostos.
82
96
No havendo padronizao, nada garante que uma determinada fonte escolhida pelo autor esteja disponvel na mquina do usurio. Uma m escolha de fontes mais difcil de acontecer do que uma escolha inadequada de fonte. Estudaremos alguns fundamentos bsicos de tipograa que serviro como guia terico para orientar a escolha tipogrca para seu site.
No Captulo 3, ao estudarmos medidas CSS de comprimento, vimos a unidade ex e agora vamos fazer uma reviso daquele conceito com ateno ao comprimento x-height mostrado na Figura 6.1. Este comprimento igual a 1ex. No s as letras do alfabeto tm suas peculiaridades tipogrcas. Os nmeros dividem-se em dois grupos, conforme a disposio corrida dos caracteres numricos como mostrado na Figura 6.2. Na primeira linha da Figura 6.2, todos os nmeros tm a mesma altura e o mesmo alinhamento, alm de fazerem parte do grupo chamado de nonranging (palavra inglesa oriunda do verbo to range, que signica percorrer), e os da segunda linha so do grupo denominado ranging ou old-style (estilo antigo).
105
O uso mais comum para a propriedade vertical-align o controle do posicionamento vertical de imagens inline. Na Figura 6.13 o efeito da aplicao das regras de estilo j mostradas quando aplicadas s imagens.
Voc pode declarar um valor em porcentagem para a propriedade vertical-align. O clculo da porcentagem feito tomando como base o valor denido para lineheight. Um valor negativo causa um deslocamento vertical para baixo e positivo para cima.
120
Observe que cada um dos pares que representam RGB formado por nmeros iguais. Neste caso, a sintaxe CSS permite abreviar a graa para:
h1 {color: #69F;}
Temos, ento, uma forma alternativa com trs caracteres hexadecimais para representar uma cor. de boa prtica adotar esta forma abreviada sempre que o formato do nmero hexadecimal para a cor permitir (os trs pares com nmeros iguais entre si).
Esteja ciente de que no se pode abreviar para trs caracteres cores como: #808080 e #FFCC63.
ou:
h4 {color: rgb(30%, 25%, 70%);}
Observe que so duas as formas de escrever o valor da propridade na regra CSS. Na primeira usamos um nmero entre 0 e 255 e, na segunda, um valor em porcentagem de 0 a 100%. Tal como na notao hexadecimal, cada nmero representa a quantidade de red, green e blue (vermelho, verde e azul) que entra na composio da cor. No permitido na sintaxe CSS misturar nmero com porcentagem para compor uma cor.
130
Ao declarar valores usando palavras-chave conforme mostrado na Figura 7.5, camos restritos a nove posies para a imagem. Valores outros que no palavras-chave permitem colocar a imagem em qualquer posio na tela. Porcentagem outro valor vlido, mas, ao contrrio das palavraschave, a ordem de declarao das porcentagens importante e 25% 80% uma posio diferente de 80% 25%. O primeiro valor declarado refere-se ao afastamento a partir do limite esquerdo do elemento onde a imagem est posicionada (valores positivos resultam em afastamento para a direita e valores negativos para a esquerda) e o segundo valor ao afastamento, a partir do limite superior do elemento (valores positivos resultam em afastamento para baixo e valores negativos para cima). Na Figura 7.6 voc tem alguns exemplos para exemplicar este tipo de posicionamento. O exemplo mostrado na gura ilustrativo. O ponto de referncia tomado na imagem para posicionamento depende de como o valor declarado. Maiores detalhes sero vistos adiante.
O valor 0% na figura tem por finalidade nica uniformizar a apresentao do exemplo. Como dissemos no Captulo 3, no h necessidade de especificar a unidade da medida quando seu valor 0 (zero).
142
Em nosso exemplo, o cone tem as dimenses de 27 x 27px. Decidimos posicion-lo afastado do lado esquerdo de uma distncia igual a 5px. Espaamos da mesma distncia o incio do texto do cabealho direita do cone. O alinhamento vertical do cone ser no centro. Precisaremos de 5px + 27px + 5px = 37px de espao livre esquerda (padding-left: 37px;) para posicionar o cone. O fundo ocupa a rea de padding do elemento. Assim, precisamos posicionar o cone 5px, afastado do limite esquerdo, ou seja, sua coordenada x igual a 5px. Da vem a regra CSS background-position: 5px center, conforme foi visto no Captulo 7. Podemos omitir a posio center nesta declarao, pois ela ser assumida automaticamente.
Flutuado
h1 { border: 10px solid #069; width: 6em;
background-color: #daf6d1; height: 2.5em; float: left; margin: 0 0.5em 0 0; text-align: center; }
Neste exemplo denimos largura e altura para o elemento cabealho de modo a conn-lo em um box com aquelas dimenses. Observe que a denio das dimen-
156
</ol>
Listas ordenadas normalmente so renderizadas pelo navegador com uma marca seqencial, antes do texto de cada item, indicando a ordenao.
<dd>Significativa reduo de preo em relao ao modelo anterior</dd> <dd>Painel automtico com dicas de operao</dd> <dd>Proteo contra choque eltrico</dd>
</dl>
Listas de denio normalmente so renderizadas pelo navegador com recuos de texto (endentaes) para destacar os termos das denies. Na Figura 9.1 a renderizao-padro dos trs tipos de listas mostrados.
192
border: 1px solid #ccc; } border-width: 0 1px 1px;
#nav a:hover {
#nav a.bullet:hover {background: #c7daec url(bullet-over.gif) no-repeat right; position: absolute; left: -1000em; width: 10em; margin: 0; }
#nav li:hover ul, #nav li li:hover ul, #nav li.over ul, #nav li li.over ul {
A declarao de largura (10em) e altura (2em) para o elemento a permitir posicionar os submenus. As declaraes position: absolute; e left: -1000px; escondem os submenus e a declarao left: auto; revela os submenus. As declaraes de margens para #nav
ul ul
posicionam os submenus.
A classe over inserida por JavaScript, pois esta verso usa o mesmo cdigo JavaScript da verso vertical.
Captulo 10 Formulrios
211
Na Figura 10.13 mostrada a renderizao-padro do cdigo. Observar que os navegadores Internet Explorer 6 e Firefox estilizam de maneira diferente o controle desabilitado. Podemos obter estilizao idntica nos dois navegadores com uso das CSS, conforme veremos.
O atributo readonly pe o controle no modo somente para leitura e produz os seguintes efeitos em um elemento:
Recebe o foco, mas no pode ser modicado pelo usurio. So includos normalmente na navegao por tabulao. Pode enviar o dado contido no controle para processamento quando o formulrio for enviado.
Os seguintes elementos suportam o atributo readonly: input e textarea. A maneira como so renderizados os elementos em modo somente para leitura depende do agente de usurio. No exemplo seguinte, o elemento input est em modo somente para leitura. Em conseqncia, ele no pode receber dados de entrada do usurio, mas pode ter seu valor enviado para processamento.
<form action=""> <label>Dica: </label> <input readonly="readonly" value="Linux">
</form>
Notar que em HTML basta escrever o atributo readonly, mas em XHTML obrigatrio indicar o seu valor, escrevendo readonly ="readonly" [C2 S2.2.3.6]. A Figura 10.14 mostra a renderizao-padro do cdigo. Notar que os navegadores Internet Explorer 6 e Firefox estilizam de maneira diferente o controle desabilitado. Podemos obter estilizao idntica nos dois navegadores com uso das CSS, conforme veremos.
CAPTULO 11
Tabelas so por excelncia o identicador e o grande diferencial entre a marcao HTML ultrapassada e a moderna marcao de websites. Adaptando um dito popular bem-conhecido, possvel dizer: diga-me como usa as tabelas na sua marcao (X)HTML e lhe direi que espcie de desenvolvedor web voc . Neste captulo mostraremos quando e como devem ser usadas as tabelas em desenvolvimento de sites Web Standards. Desde simples tabelas contendo uma nica linha de entrada at aquelas complexas de dupla entrada e duplos cabealhos. O emprego dos elementos de marcao para tabelas estudado e analisado com detalhes nos cdigos e exemplos apresentados.
267
tr td, tr th {
tr th { }
A Figura 11.16 mostra o efeito desta nova folha de estilo aplicando as imagens de fundo nos elementos table e caption.
Para inserir cones nos cabealhos da tabela atribumos uma classe para cada cabealho e denimos a imagem do cone como fundo. As alteraes na marcao so:
... <thead>
<tr>
<td></td>
...
</thead>
</tr>
289
ou
img {float: right;}
Observar que para elementos inline o comportamento diferente daquele de blocos utuados. A imagem utuada foi deslocada para uma posio at tocar a borda do seu elemento container, no exemplo um pargrafo, e tanto o texto contedo do container quanto o elemento bloco que se segue no uxo do documento, o segundo pargrafo, ocuparam uma posio em volta da imagem. Na prtica, tal comportamento usado para alinhar imagens esquerda ou direita de um texto.
326
#navegacao {
float: left; }
background: #a2daec;
#rodape {
clear: both;
height: 25px; }
background: #ffecd1;
A Figura 13.8 mostra a rende rizao do nosso layout lquido nas trs resolues mais usadas.
Notar nesta soluo que, independente do tamanho da janela do navegador, pelo fato de o layout ter sido denido com uma largura total de 85% e estar centralizado na tela, teremos espaos vazios de margens com largura de 7,5% para cada lado. Optamos ainda por manter os valores de padding em pixel e no porcentagens a m de evitar quebra do layout em verses mais antigas do Internet Explorer. Conforme vimos na Seo 13.1.2, em alguns casos, para previnir perda de legibilidade em linhas de texto muito curtas ou muito extensas, podemos denir uma largura mnima e outra mxima para nosso layout, acresentando as seguintes declaraes CSS na folha de estilo:
343
Contudo, temos um problema ainda a resolver. Observe na Figura 13.19 o que acontece quando os contedos das colunas laterais as fazem mais longas do que a coluna principal.
356
Problemas causados por haslayout afetam designers e programadores de todos os nveis de experincia. difcil prever os efeitos sobre a apresentao e o comportamento de boxes, assim como para os elementos contidos em tais boxes. As conseqncias de um elemento ter ou no layout podem ser responsveis, entre muitas outras, por:
Muitos dos bugs de floats no IE. Tratamento diferenciado para propriedades bsicas dos boxes. Sobreposio de margens entre um container e seus descendentes. Vrios problemas relacionados construo de listas. Diferenas no posicionamento de imagens de fundo. Diferenas entre navegadores quando do uso de scripts.
Voc no tem idia da causa de um bug no Internet Explorer? Abra o arquivo da folha de estilo e declare a regra CSS: * {zoom: 1;}. Esta regra d layout para todos os elementos (* seletor universal) da pgina. Recarregue a pgina, e se o bug sumir porque vinha sendo causado por um elemento que no tinha layout. Continue, dando layout a sees especficas da pgina, por exemplo: #navegao * {zoom: 1;}. Se o bug sumir, o elemento sem layout est na seo de navegao do site. E assim por diante.
Ingo Chao, um desenvolvedor residente na Alemanha, publica em seu site um relatrio completo com o resultado do andamento das pesquisas sobre haslayout realizadas por uma equipe composta por seis experts efetivos e quatro colaboradores. A matria vem sendo atualizada sempre que novas descobertas so feitas, e encontra-se on-line em: http://www.satzansatz.de/cssd/onhavinglayout.html. Uma verso em portugus pode ser acessada em: http://www.maujor.com/tutorial/haslayout.php.
Captulo 15 Miscelnea
383
pessoal, e a opo por uma delas deve ser fundamentada nas peculiaridades de cada projeto.
A imagem uma gif transparente que foi gravada com o nome cabecalhos.gif. Notar que colocamos os cabealhos afastados verticalmente um do outro de um valos igual a 40px. importante adotar um espaamento constante e preferencialmente mltiplos de 5 ou de 10, pois sero as coordenadas verticais para posicionar a imagem de fundo com a propriedade CSS background.
APNDICE C
A tabela constante deste apndice foi extrada do site do W3C e descreve as propriedades CSS 2.1 e seus valores possveis. Informa ainda o valor inicial de cada propriedade, se herdada ou no e a qual mdia aplica. Na coluna dos valores das propriedades, o W3C adota uma notao que explicada a seguir:
Notao <> [] | || * + ? {x y} Significado tipo de valor ou referncia para outra propriedade agrupamento uma das alternativas deve ocorrer uma ou mais alternativas podem ocorrer 0 ou mais 1 ou mais 0 ou 1 mnimo de x e mximo de y podem ocorrer
Exemplos:
<porcentagem> A propriedade admite valores em porcentagem. <border-width> A propriedade admite os mesmos valores da propriedade border-width. | fixed | inherit Deve ser declarado um dos valores para a propriedade.
scroll
<border-width> || <border-style> || 'border-top-color' A propriedade admite declarar-se um, dois ou os trs valores.
431