Escolar Documentos
Profissional Documentos
Cultura Documentos
Minicurso: Aprenda a usar folhas de estilo para controlar a aparncia de websites Escrito e ministrado por Sander Lemos Mizael 2010-2012
Sobre o autor
Sander Lemos Mizael ps-graduando pela Veris IBTA, onde cursa MBA em
Gesto da Segurana da Informao. Atualmente atua como Analista Programador em projetos relacionados Certificao Digital.
Informaes na Internet
Perfil profissional e recomendaes: http://linkedin.com/in/sanderworks Projetos desenvolvidos: http://be.net/sanderworks
Sumrio
1 Introduo ................................................................................................. 4 1.1 Antes de Comear ............................................................................... 4 2 Caractersticas bsicas do XHTML ............................................................. 5 2.1 Aninhamento ...................................................................................... 5 2.3 Feche as tags ....................................................................................... 5 2.4 Use letras minsculas ......................................................................... 6 2.5 Elementos obrigatrios do XHTML ..................................................... 6 2.6 Definio de Tipo de Documento (DTD) ............................................. 7 XHTML 1.0 Strict ................................................................................... 7 XHTML 1.0 Transitional......................................................................... 8 XHTML 1.0 Frameset............................................................................. 8 2.7 XHTML na Prtica................................................................................ 8 Observao: O atributo xmlns ........................................................... 9 3 Cascading Style Sheets .......................................................................... 10 3.1 Estilos inline ...................................................................................... 10 Observao: A propriedade color ................................................... 11 3.2 Folhas de estilo incorporadas ........................................................... 12 Parada obrigatria .............................................................................. 14 Espao para anotaes ....................................................................... 14 3.4 Folhas de estilo externas .................................................................. 16 3.5 Tipos de mdia ................................................................................... 19 4 Desenvolvimento de um site completo ................................................... 21 5 Mensagem do autor ................................................................................ 21
1 Introduo
Bem-vindo ao minicurso de CSS 1! Trabalhei muito para criar o que espero ser uma experincia de aprendizagem divertida, informativa e desafiadora. O minicurso tem 8 horas de durao. Nesta apostila voc encontrar conceitos e exemplos de cdigo baseados na indstria. Escrevi de maneira clara e direta, usando as melhores prticas. Aqui voc aprender como controlar a aparncia de websites usando a linguagem CSS. Essa linguagem permite a separao entre a apresentao e o contedo das pginas Web. Durante o minicurso utilizaremos as linguagens XHTML 2 e CSS para criar websites. Saber HTML um pr-requisito vital para uma boa compreenso do curso.
Verifique se seu computador possui estes aplicativos instalados. Se voc tiver alguma dvida, sinta-se vontade para perguntar ao instrutor.
1 2
CSS (Cascading Style Sheets): Folhas de Estilo Encadeadas. XHTML (Extensible HyperText Markup Language): Linguagem Extensvel de Marcao de Hipertexto.
2.1 Aninhamento
Em HTML, alguns elementos podem estar indevidamente aninhados uns dentro dos outros, como isto:
<b><i>Este texto est em negrito e itlico</b></i>
Em XHTML, todos os elementos devem estar devidamente aninhados uns dentro dos outros, como isto:
<b><i>Este texto est em negrito e itlico</i></b>
O Consrcio World Wide Web (W3C) uma comunidade internacional que desenvolve padres com o objetivo de garantir o crescimento da web.
Isto certo:
<p>Pargrafo</p> Quebra de linha: <br /> Imagem: <img src="primorweb.png" alt="Logotipo da PrimorWEB" /> <ul> <li>Item 1</li> <li>Item 2</li> </ul>
Isto certo:
<body> <p>Pargrafo</p> </body>
Todos os documentos XHTML devem ter uma declarao DOCTYPE 4. Os elementos html, head, title e body tambm devem estar presentes.
A declarao DOCTYPE no um elemento do XHTML. Voc vai aprender mais sobre o DOCTYPE no prximo tpico.
A DTD especifica a sintaxe de uma pgina web em SGML 5. Uma DTD do XHTML descreve, em linguagem precisa e legvel para o computador, a sintaxe de marcao XHTML permitida. Existem trs DTDs para o XHTML: STRICT TRANSATIONAL FRAMESET
Use a DOCTYPE 6 Strict quando voc quiser realmente uma marcao limpa, usando as tags apenas para marcar o contedo e a linguagem CSS para definir a apresentao da pgina.
SGML(Standard Generalized Markup Language): uma tecnologia utilizada para definir linguagens de marcao. 6 A declarao DOCTYPE especifica o tipo do documento por meio de uma referncia a um arquivo DTD.
Use a DOCTYPE Transitional quando voc quiser poder usar os antigos recursos de formatao do HTML. XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Execute o Notepad++, crie um Arquivo Novo e na barra de menus clique em Linguagem e selecione H HTML. Agora digite o cdigo exibido na imagem acima.
Crie uma pasta para salvar os documentos desenvolvidos, no se esquea de salvar e de testar as pginas no navegador Mozilla Firefox 7. Observao: O atributo xmlns Documentos XHTML so baseados em XML 8, por isso tem um X na sigla da linguagem:
Verses atualizadas de outros navegadores tambm podem ser usadas para renderizar as pginas. 8 XML (Extensible Markup Language): Linguagem de Marcao Extensvel
10
Pgina renderizada:
Os estilos inline no separam de verdade a apresentao do contedo. Para aplicar estilos em vrios elementos semelhantes, use folhas de estilo incorporadas ou folhas de estilo externas, que veremos mais frente. Observao: A propriedade color O valor da propriedade color do CSS pode ser definido de trs maneiras diferentes. Exemplo:
<!-- Trs maneiras diferentes de definir a cor vermelha --> <p style="color: red">Texto Vermelho</p> <!-- nome da cor em ingls --> <p style="color: #ff0000">Texto Vermelho</p> <!-- valor hexadecimal --> <p style="color: rgb(255,0,0)">Texto Vermelho</p> <!-- valor RGB -->
Os textos escritos em cinza no quadro acima so comentrios XHTML. Os navegadores no exibem comentrios nas pginas renderizadas, mas voc pode v-los se acessar o cdigo fonte delas. Ex.: Tecle Ctrl + U no Firefox. 11
12
Copie o cdigo fonte da pgina e teste no navegador. O documento renderizado deve ficar assim:
A seo style define a folha de estilo incorporada. Os estilos colocados no head so aplicados a elementos correspondentes no documento inteiro, onde quer que apaream. O atributo type do elemento style especifica o tipo MIME 9, que descreve o contedo de um arquivo.
MIME (Multipurpose Internet Mail Extensions): Documentos CSS usam o tipo MIME text/css. Outros tipos MIME so image/gif, para imagens GIF; text/javascript, para linguagens de criao de scripts JavaScript; e outros.
13
Parada obrigatria Estamos em um momento crtico do curso, visando fortalecer ao mximo alguns conceitos e eliminar as dvidas, o resto deste tpico ser explicado oralmente pelo instrutor e exemplificado com algumas prticas. Alguns dos conceitos que devem ser bem compreendidos: Como usar os atributos id e class dos elementos; Como funciona a herana no CSS.
Aproveite o momento e faa muitas perguntas sobre os conceitos j vistos. Espao para anotaes _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________
14
_____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________ _____________________________________________________________
15
Execute o Notepad++, crie um Arquivo Novo e na barra de menus clique em Linguagem e selecione C CSS. Agora digite o cdigo exibido na imagem acima e salve o arquivo com o nome estilos. O tamanho de fonte em (altura-M) normalmente definido como a altura da letra M maiscula. Para definir um elemento que exiba o texto em 150 por cento do tamanho padro do texto, o desenvolvedor poderia usar a sintaxe:
font-size: 1.5em /* alternativamente poderia usar font-size:150% */
A prxima figura contm um documento XHTML que referencia a folha de estilo externa que ns acabamos de criar: 16
No Notepad++, crie um Arquivo Novo e na barra de menus clique em Linguagem e selecione H HTML. Agora digite o cdigo exibido na imagem acima e salve o arquivo com o nome externo. 17
Pgina renderizada:
18
Todas as pginas de um website podem usar a mesma folha de estilo. Sempre use folhas de estilo externas quanto for desenvolver um site com mltiplas pginas. No documento XHTML, o elemento link usa o atributo rel para especificar um relacionamento entre o documento atual e outro documento. Nesse caso, declaramos que o documento vinculado uma stylesheet (folha de estilo) para esse documento.
19
Os tipos de mdia CSS permitem que um programador decida a aparncia que um pgina deve ter, dependendo da mdia que for usada para exibi-la. Leiaute de impresso:
O tipo de mdia mais comum para um site screen (tela de computador). Outros tipos de mdia nas CSS so handheld (computadores de mo), braile (mquinas que podem ler ou imprimir pginas em braille), aural (para navegadores com sintetizador de voz), print (aparncia da pgina para impresso) e all (padro, se aplica a todos os tipos de mdia).
20
Aprenderemos e utilizaremos vrias propriedades do CSS, no abordadas na apostila, durante o desenvolvimento do site 10.
5 Mensagem do autor
Chegamos ao final do minicurso, se voc gostou, siga-me no Twitter: http://twitter.com/primorweb Sander L. M. ()
10
site
pronto,
neste
link:
21