Tutorial CSS Tutorial

  • Published on
    08-Jun-2015

  • View
    2.023

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Transcript

<p>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</p> <p>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 </p> <ul><li><p> 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.</p><p>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</p><p>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:</p><p>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</p><p> 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 </p><p>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</p><p> 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 mostrar a altura ou a largura, e que depende da resoluo de vdeo do usurio. Ajustes de resoluo podem variar, sendo que a maioria ainda utiliza 800x600 pixels. A desvantagem que um objeto em pixels varia de tamanho de acordo com a resoluo utilizada. E a vantagem que as imagens so dimensionadas geralmente em pixels, e se ajustarmos os textos em pixels tambem, os objetos do site estaro sempre proporcionais. Mas, acima de tudo, muito importante testar suas pginas em diferentes resolues de video. Conceito de Herana Mais um conceito prelimar, antes que a gente entre nos detalhes da especificaes dos estilos. Como veremos nas pginas que se seguem, as especificaes para estilo dos style sheets em link e das tags de style inseridas so feitas com relao a vrios elementos de HTML como , , </p></li><li><p>, , e assim por diante. Mas alguma flexibilidade nos estilos pode ser ganha atravs da herana de estilo. A herana significa que voc pode especificar classes adicionais a cada elemento, e cada classe herdar algumas caractersticas de estilo de elementos bsicos, a no ser que ela as substitua por valores novos ou essa caracterstica no seja herdada. (A tabela de propriedades indica quais so herdadas e quais no.) Exemplo P {</p><p>font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif', 'Helvetica'; font-weight: bold; font-size: 11pt; color: #000066; position: relative; margin-left: 1cm; }produz um pargrafo que se parece com isto... enquanto que</p><p>P.small { font-size: 8pt; text-align: center; }produz um pargrafo que se parece com isto.</p><p>Para produzir um pargrafo bsico, voc deve usar simplesmente uma tag , e para produzir o pargrafo pequeno e centralizado, voc deve acrescentar o atributo class=small (). Observe que tambm podem ser declaradas classes gerais, que podem ento ser usadas com qualquer elemento HTML: Exemplo .note { font-size: 10pt; color: #006600; background: #FFFFFF; position: relative; padding: 2pt; border-width: thin; border-style: ridge; }Com esta classe definida, uma pargrafo designado por se pareceria com este.</p><p>Observe que somente um nvel de classes permitido: uma classe do tipo P.note.red no funciona. Classes Especiais para Links Voc deve conhecer tambm as classes pr-definidas para a tag : A.link { color: #FFFF00 } A.visited { color: #990099 } A.active { color: #FF0000 } Tal como em qualquer outra definio de classes, voc pode colocar cores ou outros valores que desejar; ns vamos ver como fazer isto nas pginas seguintes. Se voc quiser que links e links visitados apaream com cores distintas, como estamos</p><p>acostumados a ver na maioria das pginas web, ento estas classes devem ser especificadas nos seus style sheets. Existem ainda algumas outras "pseudo-classes" pr-definidas para a primeira linha e primeira letra de blocos, mas elas at agora no so suportadas pelo Internet Explorer. Falando em geral, a herana um atalho poderoso para criar variaes dentro de um estilo (style), do mesmo modo que a herana permite aos programadores em linguagens orientadas a objetos criarem variaes de objetos (criar style sheets de fato uma forma muito simples de programao orientada a objetos). Existem poucas ocasies em que a herana pode ser uma perturbao, nos casos em que certas propriedades so herdadas sem que voc queira (ns vamos ver um exemplo mais adiante). Especificando um estilo para o site Como voc pode ter percebido olhando para os exemplos na pgina anterior, os estilos so especificados como pares propriedade : valor que so separados por ponto e vrgula. Qualquer valor pode ser colocado entre aspas, e valores com mais de uma palavra como 'Trebuchet MS' sempre devem ser colocados assim para evitar equivocos por browsers mais antigos. Estilos Inline Para os estilos inline, a seqncia de pares propriedade : valor colocada entre aspas e posta como valor para o atributo de estilo: </p></li><li><p> Estilos em Link e Inseridos Para os style sheets em links ou tags de style inseridas, as especificaes de estilo so feitas para os vrios seletores, que podem ser qualquer um dos elementos do HTML. Neste caso, os pares de especificao de estilo propriedade : valor so colocados entre chaves logo depois do seletor: H2 { font-family: 'Trebuchet MS', 'Comic Sans MS', 'Arial', 'Sans-Serif'; font-weight: bold; font-size: x-large; color: #660066; } Observe que quando um dos valores consiste de palavras mltiplas (como no caso dos valores das famlias de fontes no exemplo acima), cada um deles dentro da lista daquela propriedade colocado entre aspas.</p><p>Lembre-se tambm de que voc pode especificar classes mltiplas (mas somente um nvel) para um seletor para variar as especificaes de estilo, tal como vimos na discusso da herana. Estilos Contextuais Finalmente, note tambm que voc pode criar estilos contextuais atravs da combinao de dois seletores: P STRONG { color: #FF0000 } Este estilo afeta somente o texto dentro do elemento STRONG, que est dentro do elemento PARGRAFO. Se voc quiser que o texto STRONG tenha sempre a mesma cara independente de contexto, ento crie um estilo simples com STRONG como seletor: STRONG { color: #FF0000 } Observ...</p></li></ul>