Tutorial CSS Tutorial

Embed Size (px)

DESCRIPTION

Tutorial CSSTudo sobre CSSContatorafasvida@gmail.comCadastre-se como cliente e divulgue seus serviços gratuitamenteLink: http://www.fontte.com.br/fontte/?ac=pre_cadastro&id=31

Text of Tutorial CSS Tutorial

CSS Tutorial Sobre Se voc se interessa pela criao de home pages j deve ter ouvido falar em Cascading Style Sheets, ou CSS apenas. Trata-se de um padro de formatao para pginas web que vai alm das limitaes impostas pelo html. Proposto pelo W3 Consortium: http://www.w3.org - uma espcie de comit que define os padres de programao para a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, no lanamento do Internet Explorer 3.0. O Cascading Style Sheet permite uma versatilidade maior na programao do layout de pginas web sem aumentar o seu tamanho em Kb, pois oferece vrias possibilidades que antes s eram conseguidas com a utilizao de gifs e jpgs. Basicamente, o CSS permite ao designer um controle maior sobre os atributos de uma home page, como tamanho e cor das fontes, espaamento entre linhas e caracteres, margem do texto, caixas de texto, botes de formulrio, entre outros. Introduziu tambm s pginas a utilizao de layers, permitindo a sobreposio de objetos como textos e imagens em camadas uma sobre as outras. Esta seo vai proporcionar uma viso geral dos CSS, incluindo as vantagens de se usar os style sheets, as suas limitaes, e um guia para utiliz-los. Ela mesma j se utiliza de style sheets, e se voc tiver mltiplos browsers, pode comparar a maneira como essas pginas aparecem no Internet Explorer (3.0 ou superior) e nos outros browsers que no suportam style sheets (Netscape 3.0 ou inferior, por exemplo). Mas observe que voc s ser capaz de ver os efeitos dos style sheets se voc vir essas pginas com o Internet Explorer 3.0 ou o Netscape Communicator 4.0 (ou superior). Copyleft 2002 - Todos os direitos reservados

Por que usar CSS ? Todo documento escrito utiliza certos elementos de design para formatar sees de texto a fim de manter a mesma aparncia, seguir um padro. Por exemplo, um elemento de design Heading 1 geralmente alguma fonte grande que identifica todas as principais divises de tpicos de um captulo, artigo ou pgina da web. Um elemento de design Heading 2 identifica todos os ttulos dos subtpicos. A HTML inclui uma tag para praticamente todos os elementos de design comumente utilizados, incluindo tags de ttulo (,...), lista (a tag para lista ordenada, a tag

  • para lista no ordenada) e assim por diante. No passado , a tag em quase todos os web sites parecia a mesma - texto preto era consideravelmente maior que o corpo do texto normal. Se voc quisesse fazer seus prprios ttulos diferenciados, tinha de formatar cada tag de ttulo individualmente, utilizando tags ou similares. Se mais tarde mudasse de idias sobre a aparncia desses ttulos, tinha de voltar e mudar cada ttulo individualmente. Ou seja: um processo lento e trabalhoso.

    Uma grande vantagem que as folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, voc pode fazer uma "declarao global", como "quero que todos os meus ttulos sejam verdes". Voc precisa dizer isso somente uma vez e cada ttulo em seu site ser verde. Se depois decidir que azul uma cor melhor, no preciso voltar e alterar cada tag para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus ttulos sejam azuis" e pronto! Obviamente voc no est limitado a ttulos e nem a cor azul. Outra enorme vantagem das folhas de estilo que possvel definir um estilo personalizado para cada elemento de design em seu web site, incluindo ttulos, lista, tabelas e imagens, para citar s alguns. E, alm de definir uma cor, voc pode definir a fonte, o tamanho, o alinhamento, a espessura da borda, e assim por diante. Copyleft 2002 - Todos os direitos reservados

    Limitaes e Desvantagens do CSS Depois de ler sobre as vantagens do CSS voc pode estar pensando "Ento por que no usar style sheets para todas as pginas web?" A primeira parte da resposta : ns provavelmente deveramos. A segunda parte, no entato, : no assim to fcil quanto deveria ser. Os problemas so mltiplos e relacionados. Neste momento em que o CSS suportado tanto pelo Internet Explorer quanto pelo Netscape, ambos usados por uma boa quantidade de internautas, ainda se encontra um nmero pequeno de usurios que utilizam verses mais antigas que o Netscape 4.0, e inclusive alguns preservando o IE 2.0. Mas isto em si ainda no o grande problema, na medida em que se pode tomar cuidado para assegurar que as pginas que usam styles tambm sejam mostradas pelos browsers que no detectam o CSS. Um segundo e mais srio obstculo o de que a implementao do CSS apresenta variaes entre o Netscape e o IE, e mesmo entre o IE 3, 4, 5, 5.5, e o 6.0. Para resolver este problema, os desenvolvedores tm duas opes: Escrever style sheets bastante simples, que funcionaro em todos os browsers Usar JavaScript para detectar o tipo de browser do usurio e fazer um link para style sheets diferentes (e escrever linhas de cdigo diferentes em alguns casos) de acordo com cada browser. Alm do mais, os criadores de pginas web devem considerar o seguinte: Se voc estiver trabalhando numa intranet onde os browsers no reconhecem CSS, no h muita razo para usar style sheets Se voc quiser usar style sheets para a audincia da Internet em geral, deve se assegurar antes de que os usurios que tm browsers que no suportam CSS tero uma apresentao aceitvel das suas pginas Mais tarde eu darei algumas sugestes para tornar as suas pginas amigveis tanto para os browsers que suportam CSS quanto para para os que no suportam, mas antes duas palavrinhas sobre precaues a serem tomadas:

    Se voc est pensando em manter conjuntos paralelos de pginas com e sem style sheets, no o faa: qualquer um que j tentou fazer isto ir lhe dizer que manter um conjunto paralelo de pginas um pesadelo que no deve ser vivido a no ser que: 1) voc esteja com um tdio terrvel e procurando fazer um monte de coisas para matar tempo, ou 2) algum estiver apontando um revlver para a sua cabea e lhe obrigando a fazer isso... A ltima linha aqui para lembrar que se voc quiser usar style sheets para Internet, esteja preparado para pagar o preo de que alguns usurios (com alguma confiana, um nmero que vai declinar rapidamente) estaro vendo as suas pginas sem nenhum efeito. Formas de Implementao dos Estilos Os estilos podem ser inseridos nos documentos de trs maneiras diferentes: 1) Por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais pginas web. Este o mtodo que eu recomendo, porque ele permite usar um nico style sheet para vrias pginas, talvez at para um site inteiro, o que muito mais eficiente. (Isto pode no funcionar se voc tende a variar consideravelmente a formatao de cada pgina, mas geralmente esta no uma boa idia em termos de comunicao efetiva). Este mtodo muito til tambem na administrao do site, centralizando toda a configurao em um unico arquivo. Se depois do site pronto resolvermos por exemplo alterar o tamanho da fonte, basta alterar um arquivo .css e no todas as suas pginas. Neste caso, voc define os estilos num arquivo em separado com a extenso .css, e faz uma referncia a ele atravs de uma tag de link que se posiciona entre os tags de head de cada arquivo HTML que ir utiliz-lo: Exemplo ... ... Observe o atributo "type=text/css", tambm usado na tag logo abaixo, para identificar o arquivo referido como cascading style sheet. (Verses mais novas do Internet Explorer no precisam disso, mas mais prudente colocar porque outros browsers pedem quando eles do suporte para style sheets.) 2) Por meio de uma insero de um style sheet numa nica pgina web Neste caso, voc define os styles dentro de uma tag de style que se posiciona entre a tag

    e a tag : Exemplo ... ... Observe que em concreto as especificaes do estilo (que eu explicarei nas pginas seguintes) so inseridas dentro de uma tag de comentrio -- isto para assegurar que os browsers que no suportam CSS no interpretaro estas linhas como contedo a ser mostrado. 3) Pelo acrscimo de atributos de estilo inline em algumas tags como , , ou Neste caso voc especifica um estilo para um nico bloco de texto, ou usa a tag para especificar o estilo para uma palavra ou frase: Exemplo Este deve ser um bloco indentado com algum texto selecionado dentro dele

    Precedncia dos Estilos Em alguns casos voc pode especificar diferentes caractersticas de estilo para o mesmo texto por meio da combinao de um arquivo de style sheet referenciado em link com a insero de uma tag de style, e tambm com atributos de estilo inline. Se estas diferentes especificaes entrarem em conflito entre si, o browser tem que decidir qual dos valores deve usar. Essa escolha feita com base numa ordem de precedncia (isto precisamente o que se quer dizer com cascading style sheets - "folhas de estilo em cascata"). A ordem de precedncia dos cascading style sheets esta: atributos de estilos inline tm precedncia sobre tags de style inseridas tags de style inseridas por sua vez tm precedncia sobre style sheets por link

    importante lembrar esta ordem de precedncia para que voc saiba que valores de style iro sobrepujar os outros. Unidades de Medidas Tanto na tabela de propriedades e valores quanto nos exemplos dados em todas as pginas, voc deve ter notado que os valores de muitos atributos foram dados em apenas uma das vrias unidades diferentes, normalmente: pt (pontos) pc (picas) em (ems) in (polegadas) cm (centmetros) mm (milmetros) px (pixels) % (de algum outro valor, normalmente tamanho de fonte) Na maioria dos casos, a unidade que voc usa no faz a menor diferena, na medida em que voc estiver familiarizado com ela (os autores de web nos EUA podem preferir usar polegadas, enquanto que na maioria dos outros pases pode preferir-se os centmetros, por exemplo; a maioria de ns est acostumado a definir o tamanho das fontes em pontos, embora poucos paream saber quanto vale um "ponto" -- 1/72 de polegada). Entretanto, algumas questes devem ser observadas. diferena das trs primeiras unidades, pixels no designam uma distncia absoluta; em vez disso, um pixel uma unidade para