Treinamento em CSS Nvel: Bsico Horas: 2 ndice

ndice........................................................................................................................................1 Introduo.................................................................................................................................2 Formantando documentos....................................................................................................2 O que CSS?........................................................................................................................2 Por que utilizar CSS?...........................................................................................................2 Separando o sistema em camadas........................................................................................3 Vinculando um arquivo CSS....................................................................................................4 Aonde colocar um CSS........................................................................................................4 Arquivo de extenso .css......................................................................................................4 Criando um vnculo com um arquivo externo.....................................................................4 Definindo dentro do prprio HTML....................................................................................5 Definindo dentro da prpria tag...........................................................................................5 Definindo Formatos..................................................................................................................6 Definindo parmetros de uma tag........................................................................................6 Alterando os valores de um parmetro................................................................................6 Utilizao..................................................................................................................................7 Utilizando um arquivo CSS.................................................................................................7 Utilizando uma tag definida pelo usurio............................................................................7 Vendo o resultado obtido.....................................................................................................8 Guia de Referncia...................................................................................................................9 Parmetro..................................................................................................................................9 Referncia...............................................................................................................................10

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Introduo Formantando documentos

Um dos grandes problemas ao lidar com grandes portais da Internet a quantidade de pginas que o compe, pois a quantidade de contedo gerado imenso, normalmente com grandes equipes de editorao e redaes jornalsticas dando o suporte necessrio. Dada essa dimenso, e que cresce a cada dia, a dificuldade de padronizar e modificar um site pode ser um grande limitante para mudanas grficas de sites. Porm esse problema de dificuldade de mudana grfica no fica restrito apenas aos sistemas grandes. Qualquer site ou sistema que possua mais de cinco pginas j pode ser considerado de difcil mudana grfica, caso os arquivos tenham que ser modificados manualmente. A possibilidade de insero de erros nesses arquivos bem maior, o que pode tornar a tarefa mais rdua. Imaginando alm de tudo que j foi falado, que o HTML pode ter uma infinidade de parmetros modificadores de formatao, que podem existir diversos elementos do mesmo tipo num mesmo documento que precisam ser alterados e que a dificuldade de encontra-los relativamente complexo, a manuteno de sites pode se tornar uma tarefa bastante rdua.

O que CSS?
Tendo em mente tudo o que foi explicado no item anterior, foi concebida a idia de folha de estilo em cascata (do ingls Cascading Style Sheet) que visa padronizar a formatao grfica de um grupo de pginas HTML partir de um documento nico que define as caractersticas bsicas que se deseja associar aos documentos Web. Uma vez definido nesse arquivo de formatao (que possui extenso .css) a formatao de cada uma das tags que sero utilizadas nos documentos seguintes (como fonte, tamanho, cor) deve-se criar um vnculo com as pginas que iro utilizar esses padres. Daqui em diante, todas as tags que tiverem sido definidas no arquivo CSS sofrero as modificaes correspondentes.

Por que utilizar CSS?

Como j discutido acima, a utilizao de folhas de estilo facilita na futura manuteno e reaproveitamento de cdigo gerado, pois muda-se em apenas um lugar e as alteraes so propagadas para todos os documentos que possuem vnculos com o documento CSS.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Separando o sistema em camadas

A idia nesse ponto introduzir o conceito de camadas, que vem sendo muito discutido em computao nos ltimos anos, que prega que elementos de programao semelhantes devem ser agrupados em locais em comum, assim as funes que tratam de bancos de dados devem estar num local exclusivo, as funes de lgica em outro local, as definies de formatao em outro, e assim por diante. A idia desta diviso permitir que o sistema cresa de forma mais estruturada e que eventuais modificaes, que normalmente ocorrem em projetos de software, possam ser facilmente includas no sistema, sem que interfira em outras partes do sistema, o que em pouco tempo tornaria a manuteno do sistema em algo proibitivo. O objetivo do CSS nesse contexto o de deixar claro o que a formatao do sistema e de que forma ela pode ser mudada para deixar o mais limpo possvel o cdigo, alm de fornecer diversas ferramentas leves para montar a estruturao do sistema. Nos itens a seguir sero mostrados de que forma utilizar um documento CSS para trabalhar com formatao em HTML.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Vinculando um arquivo CSS Aonde colocar um CSS

Um arquivo CSS pode ser colocado em qualquer lugar do sistema, mas aconselhvel a criao de uma pasta para armazenar todas as definies de padres de formatao que sero utilizadas pelas pginas do sistema. A localizao desse arquivo muito importante para a futura ligao dele com os demais arquivos do sistema.

Arquivo de extenso .css

Uma vez definido o local aonde o arquivo ser colocado, deve-se criar o arquivo propriamente dito. Um editor de texto simples pode ser utilizado para esta finalidade. Ele pode ser salvo com qualquer nome, mas precisa ter a extenso .css no nome para indicar explicitamente que este um arquivo de folha de estilos.

Criando um vnculo com um arquivo externo

A maneira mais poderosa de se trabalhar com folhas de estilo definindo-a num arquivo externo e fazendo vnculos dele com diversos outros arquivos que iro se utilizar das definies existentes para exibir a respectiva formatao. Dessa forma, ao se modificar os valores de uma determinada tag todos os arquivos que a utilizarem sero automaticamente modificadas. Essa vinculao feita atravs do uso da tag <link>, que faz a incluso de um arquivo externo no documento corrente. Dentro dos parmetros desta tag, devero ser colocados o tipo de arquivo externo e o caminho dos diretrios aonde o arquivo de folhas de estilo se encontra, fazendo com que o arquivo esteja disponvel. Em exemplo: <head> <link rel=stylesheet type=text/css href=../formatos/arquivo.css> </head> Esse comando deve ser colocado no cabealho do arquivo HTML e indica o tipo de documento que est sendo relacionado o local aonde ele se encontra. Da prxima vez que a pgina for exibida e este documento existir, todos os padres sero importados e utilizados no documento correspondente.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Definindo dentro do prprio HTML

Uma maneira alternativa de se utilizar folhas de estilo definindo-a dentro de cada um dos documentos existentes, ou seja, os parmetros para uma determinada tag sero sempre os mesmos quando ela aparecer num determinado ponto do documento. Esse tipo de definio possui prioridade em relao a definies externas, ou seja, caso exista um vnculo externo e uma definio interna para a mesma tag, essa definio tem prioridade no uso. No cabealho do documento devem ser escritas as definies das tags, sendo que em seguida todas as tags do mesmo nome sero exibidas da mesma forma, usando os parmetros correspondentes. Vale destacar que a maneira como os parmetros so escritos so idnticas para todos os modos de vnculo, como ser mostrado a seguir.

Definindo dentro da prpria tag

Por fim, pode-se definir um formato dentro de uma nica tag, sendo a definio vlida nica e exclusivamente para aquela tag. Esse tipo de definio possui prioridade sobre os demais casos levantados acima.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Definindo Formatos Definindo parmetros de uma tag

A partir deste ponto sero mostradas as maneiras de como se definir as formataes de uma tag, sempre levando em considerao um arquivo externo, pois uma maneira melhor para se separar o contedo do formato, alm de facilitar a explicao de como as definies devem ocorrer. De modo geral, um arquivo CSS deve ter a seguinte forma: nome_da_tag { atributo_da_tag_1: valor_da_tag_1; atributo_da_tag_2: valor_da_tag_2; atributo_da_tag_3: valor_da_tag_3; } Para cada tag que se deseja modificar, deve ser aberto e fechado um grupo de chaves. Entre essas chaves devem vir os parmetros possveis da tag e os valores que esses parmetros devem assumir, separados por dois pontos. O exemplo acima genrico, mas veja o exemplo a seguir, onde os parmetros da tag <p> so redefinidos: p { font-size : 10pt; font-family : verdana, arial; text-align : center; } No primeiro item, de tamanho de fonte, ela foi definida para ocupar 10 pontos na tela. No item seguinte define o grupo de fontes que deve ser usado para exibir o texto, pela ordem, ou seja, primeiro se tentar exibir o texto em verdana, caso ela no exista, em arial e assim por diante, at chegar na fonte padro do sistema. Por fim, a ltima tag define o alinhamento de todos os textos que estiverem entre tags <p>, que neste caso seria centralizado.

Alterando os valores de um parmetro

Sempre que se desejar alterar o comportamento de uma pgina, deve-se modificar as informaes que vm depois dos dois pontos, pois ali que est escrito de que forma os dados devem se comportar. Vale destacar que importante a cada alterao salvar o documento e verificar de que forma o seu resultado final foi alterado.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Utilizao Utilizando um arquivo CSS

Por padro, uma vez vinculado um arquivo CSS a um arquivo HTML as tags que foram definidas externamente passam a aplicar suas definies de formatao todas as tags do documento HTML sem que seja feito nenhuma outra mudana.

Utilizando uma tag definida pelo usurio

O usurio pode definir tags na folha de estilo, porm, ao contrrio das tags padres que no precisam ser declaradas explicitamente para passarem a usar os padres necessrios, quando se define uma tag, dando um nome especial para ela, que no exista dentro da padronizao feita pelo W3C, preciso falar explicitamente para uma determinada tag usa-la ali. Para este processo ter resultado preciso seguir dois passos, o primeiro definir a tag no documento CSS e o segundo utilizar uma tag especial dentro do documento HTML em que se deseja modificar. De qualquer forma, esse modelo de extenso de tags faz uso das tags j existentes no HTML para implementar novas, segundo as necessidades do desenvolvedor. Por exemplo: td.texto_azul { color : blue; } Para que as definies de uma tag definida pelo usurio valham para uma determinada tag preciso implementar o segundo passo mencionado acima. Dentro da tag em que se deseja que a visualizao seja diferenciada preciso incluir o parmetro class seguido do nome escolhido para a tag personalizada, que foi escrito depois do ponto. Assim: ... <table border=1> <tr> <td class=texto_azul> AAA </td> <td class=texto_azul> BBB </td> </tr> </table> ... Neste exemplo, todo o texto que for inserido dentro das tags <td> que tiverem o parmetro class modificado para texto_azul, mudaro de cor e para o azul. Dentro da definio tag personalizada texto_azul poderamos ter colocado outros parmetros, deixando a tag cada vez mais com o formato especfico que desejarmos.
Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Vendo o resultado obtido

O resulto dessa visualizao, independente se for usado um CSS personalizado ou padro a facilidade de modificar uma imensa quantidade de documentos, modificando apenas um nico. Vale ressaltar que pode-se perder um pouco de eficincia caso o estilo seja colocado dentro do documento, pois assim esse estilo fica restrito unicamente a aquele documento.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Guia de Referncia
A idia deste tpico listar os principais modificadores de cada atributo e servir para um guia de consulta rpida quando se estiver escrevendo folhas de estilo. Mas de qualquer forma, a Internet continua sendo a maior fonte de referncia para o assunto. Parmetro font-size font-family font-weight font-style line-height text-decoration text-align text-indent vertical-align text-transform letter-spacing color background-image background-color margin-left margin-right margin-top margin-botton height width left visibility Valores Possveis pt, %, in, cm, px fonte_1, fonte_2 normal, bold normal, italic pt, %, in, cm, px none, underline, overline left, center, right, justify pt, %, in, cm, px sub, super, top capitalize pt, %, in, cm, px cor, #FFFFFF imagem cor pt, in, cm, px pt, in, cm, px pt, in, cm, px pt, in, cm, px pt, %, in, cm, px pt, %, in, cm, px pt, %, in, cm, px visible, hidden Descrio Tamanho da fonte. Tipos de fonte. Texto em negrito. Texto em itlico. Distncia entre linhas. Texto sublinhado. Alinhamento do texto. Indentao de linha. Alinhamento vertical. Primeira letra maiscula. Espao entre letras. Cor do texto. Imagem de fundo. Cor de fundo. Margem esquerda. Margem direita. Margem superior. Margem inferior. Altura de um elemento. Largura de um elemento. Posicionamento esquerda. Elemento visvel ou no.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br

Referncia
http://scriptbrasil.com.br/?class=14&id=180 Site com um tutorial bsico e artigos sobre a utilizao de folhas de estilo. Para uma introduo rpida, pode ser muito interessante, pois traz todos os passos bsicos de forma muito rpida e intuitiva. http://www.ccuec.unicamp.br/treinamentos/css Material do Centro de Computao da Unicamp (CCUEC) que traz uma introduo bsica sobre o assunto, facilidades, aplicaes e vantagens. Possui uma breve descrio dos parmetros existentes. O CCUEC oferece periodicamente cursos rpidos para apresentar aos membros da comunidade a utilizao do CSS em pginas Internet. www.w3c.org Site que normatiza a maioria das linguagens utilizadas na Internet, inclusive o CSS. Possui uma imensa quantidade de materias a respeito, sendo eventualmente difcil encontrar o que se deseja rapidamente.

Rua Lauro Vannucci, 1020 Jardim Santa Cndida Campinas SP CEP 13087-548

10

Tel (19) 3256-5433 Fax (19) 3256-5433 conceptia@conceptia.com.br