Anuncie nesse espao da Aprendendo HomePage, clique aqui e veja como e porque

CSS (Style Sheets - Folhas de Estilo)CSS a mesma coisa que Style Sheets e que Folhas de Estilo. Vc j deve ter visto esses nomes em vrios lugares. CSS mais uma forma de aperfeioar seus documentos, o CSS tem muitos tipos de definio aqui veremos muitas delas.HistriaNo final de 1996 foi criado os Style Sheets. Apenas o Internet Explorer 3.0 usava os Style Sheets. Era ainda muito pouco conhecido e no tinha muita utilidade. Hoje o Style Sheets est em sua segunda fase, a fase 2 (Level 2), hoje muitas pginas j usam.Broswers que suportamO IE 3.0 foi o primeiro browser a usar Style Sheets (apenas alguns cdigos). Hoje, os browsers Netscape 4.0 e IE 4.0 tambm suportam. Estes so os dois recomendados. Neste tutorial, iremos nos basear nas propriedades suportadas nos browsers da quarta gerao.No que eles podem nos ajudar? Economizar o seu tempo

Diminuir o tamanho do cdigo de sua pgina.

Sua pgina ir carregar mais rapidamente

Mais facilidade de manter e fazer alteraes na pgina

Mais controle no layout da pgina

e muito outros que voc mesmo descobrir...

Como criar estilosCada estilo que voc cria definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:elemento {atributo1: valor; atributo2: valor ...}Explicao desta sintaxe:Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra s vezes chamadas de seletor.Atributo - o aspecto especfico do elemento que voc quer usar como estilo. Deve ser um nome de atributo CSS vlido, como o atributo font-size.Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida para o atributo em questo , como 20pt (20 pontos) para font-size.Atributo:valor - a parte declarao da regra. Voc pode atribuir mltiplas declaraes se desejar separ-los com ponto-e-vrgula (;). No coloque um ponto-e-vrgula depois da ltima declarao.Agora hora de exemplos. Eis uma regra CSS que especifica que todos os ttulos de nvel 1 (tags ) sejam exibidos em uma fonte de 36 pontos:H1 {font-size: 36pt}Aqui est um exemplo de regra que diz que todos os ttulos de nvel 2 (tags ) devem ter tamanho de 24 pontos e cor azul;H2 {font-size: 24pt; color: blue}Voc pode inserir quebras de linha e espaos em branco dentro da regra como quiser. Assim, possvel ver mais facilmente todas as declaraes e certificar-se de que colocou todos os sinais de ponto-e-vrgula e colchetes nos lugares corretos. Por exemplo, aqui est uma regra que diz que os pargrafos aparecero em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da pgina:P {font-family: Times;font-size: 12pt;color: blue;margin-left: 0.5in}Note como fcil aplicar todas as declaraes ao elemento pargrafo (P) e como cada declarao, exceto a ltima, seguida pelo caracter de ponto-e-vrgula exigido.

As folhas de estiloVoc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar uma combinao dos trs mtodos nos seus web sites. A maneira como as regras interagem entre si est relacionada parte "em cascata".Os trs lugares so: 1) em um documento separado fora de todos os documentos HTML, 2) no cabealho de um documento HTML e 3) dentro de uma tag de HTML. Cada um destes mtodos tem um nome e afeta as pginas HTML em seu site de um modo diferente, como discutido aqui:Externo - Externo significa que voc coloca as regras de CSS em um arquivo separado, e ento sua pgina HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma pgina do seu web site.Incorporado - Incorporado significa que voc especifica as regras de CSS no cabealho do documento. As regras incorporadas afetam somente a pgina atual.Inline - Inline significa que voc especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.Estilos externosPara definir um conjunto de regras de estilo que voc pode facilmente aplicar em alguma pgina do seu site, preciso colocar as regras em um arquivo de texto. Voc pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extenso .css.Sempre que quiser utilizar esses estilos em uma nova pgina, basta colocar uma tag no cabealho que referencie esse arquivo .css.Veja o exemplo:Arquivo meu_estilo.cssH1 {font-family: 'Comic Sans MS';font-size: 36pt;color: blue}P {font-family: 'Courier';margin-left: 0.5in}Agora, para utilizar os estilos definidos neste arquivo .css voc precisa adicionar a tag a seguir ao cabealho da pgina, onde nome_do_arquivo uma referncia absoluta ou relativa ao arquivo .css.

OBS: Voc deve inserir este texto entre as tags ... e colocar a localizao correta do seu arquivo e seu nome.Estilos incorporadosSe quiser criar um conjunto de estilos que se aplicam a uma nica pgina, voc pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags ... e as regras em um arquivo separado, coloque estas tags na prpria pgina HTML. A estrutura bsica de uma pgina da web que utiliza estilos incorporados semelhante ao seguinte cdigo:

Exemplo Estilos Incorporados

Estilos inlineOs estilos inline so os que tm menos efeitos. Eles afetam somente a tag atual - no outras tags na pgina e tampouco outros documentos. A sintaxe para definir um estilo inline a seguinte:

Exemplo: Note que em vez das tags ..., voc apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, voc as coloca entre aspas, separando-as com ponto-e-vrgula como de costume.

Tags PersonalizadasCom as classes de estilo, possvel definir diversas variaes de uma nica tag. Por exemplo, voc poderia fazer um estilo de pargrafo "texto alinhado direita", um estilo de pargrafo "texto centralizado" e assim por diante, criando mltiplos temas em torno da tag de pargrafo. ()Voc pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (No h sentido em definir uma classe em um estilo inline!) A sintaxe praticamente idntica sintaxe normal para os estilos externo e incorporado, com adio de um ponto e o nome da classe depois do elemento na qual ser utilizado o atributo.

Para dar um exemplo mais prtico, uma classe de estilo que eu particularmente uso muito nos links de minhas pginas a seguinte:

Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e no-sublinhados. Veja como deve ficar:

Utilizando a tag As tags HTML ... podem ser usadas para formatar um grande bloco de texto - uma diviso - abrangendo diversos pargrafos e outros elementos. Isso as torna uma boa opo para definir estilos que afetam grandes sees de um texto em uma pgina. Veja:

Ao colocar na tag o atributo CLASS, voc estar fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padres.

Para sair de um programa:

1. Selecione Arquivo -Sair

Utilizando a tag As tags ... so como tags ... no sentido de que voc pode utiliz-las para definir estilos que formatam um bloco de texto. Ao contrrio de , contudo, que utilizada para divises de texto grandes, a tag especializada para blocos de textos menores - que podem ser to pequenos como um nico caracter. Veja um bom exemplo do que se pode fazer utilizando esta tag.

Utilizada no cdigo HTML...

Para sair de um programa:

1. Selecione Arquivo -Sair

Veja como fica:Para sair de um programa:Selecione Arquivo - SairAtalhos e atributos de CSSAtalhos de CSSAlguns atributos de CSS lhe permitem fazer diversas configuraes em uma declarao. Por exemplo, suponha que voc queira definir diversos aspectos da fnte utilizada para tags H1, como segue:H1 {font-style: italic;font-weight: bold;font-size: 18pt;font-family: 'Times Roman'}Como alternativa a especificar todas essas formataes de fonte individualmente, voc pode utilizar o atributo font: para defini-las todas de uma s vez, assim:H1 {font: italic bold 18pt 'Times Roman'}Note como diversos valores - itlico, negrito, 18pt e Times Roman - so separados apenas por um espao em branco. Essas regras abreviadas certamente poupam espao e tempo de digitao.Atributos de CSS do IE4PRIVATEAtributo de CSSO que ele formata

backgroundCor de fundo, imagem, transparncia.

background-attachmentRolagem do fundo / Marca d'gua.

background-imageImagem de fundo.

background-colorCor de fundo ou transparncia.

background-positionPosicionamento da imagem de fundo.

background-repeatConfigurao lado-a-lado da imagem de fundo.

borderLargura, estilo e cor de todas as 4 bordas.

border-bottomLargura, estilo e cor da borda inferior.

border-bottom-colorCor da citada borda.

border-bottom-styleEstilo da citada borda.

border-bottom-widthLargura da citada borda.

border-colorCor das 4 bordas.

border-leftLargura, estilo e cor da borda esquerda.

border-left-colorCor da borda citada.

border-left-styleEstilo da borda citada.

border-left-widthLargura da borda citada.

border-rightLargura, estilo e cor da borda direita.

border-right-colorCor da borda citada.

border-right-styleEstilo da borda citada.

border-right-widthLargura da borda citada.

border-styleEstilo de todas as 4 boras.

border-topLargura, estilo e cor da borda superior.

border-top-colorCor da borda citada.

border-top-styleEstilo da borda citada.

border-top-widthLargura da borda citada.

border-widthLargura de todas as 4 bordas.

clearElementos flutuantes esquerda ou direita de um elemento.

clipParte visvel de um elemento.

colorCor de primeiro plano.

cursorTipo de ponteiro do mouse.

displaySe o elemento exibido e o espao reservado para ele.

filterTipo de filtro aplicado ao elemento.

floatSe o elemento flutua.

fontEstilo, variante, peso, tamanho e altura da linha do tipo de fonte.

@font-faceIncorporao da fonte ao arquivo HTML.

font-familyTipo de fonte.

font-sizeTamanho da fonte.

font-styleFonte itlico.

Fonte-variantFonte bold.

font-weightPeso da fonte de claro a negrito.

heightAltura exibida ao elemento.

@importFolha de estilo a importar.

leftPosio do elemento em relao a margem esquerda da pgina.

letter-spacingDistncia entre as letras.

line-heightDistncia entre linhas de base.

list-styleTipo, imagem e posio do estilo da lista.

list-style-imageMarcador de item de lista.

list-style-positionPosio do marcador de item da lista.

list-style-typeMarcador de item de lista alternativo.

marginTamanho de todas as 4 margens.

margin-leftTamanho da margem esquerda.

margin-rightTamanho da margem direita.

margin-bottomTamanho da margem inferior.

margin-topTamanho da margem superior.

overflowExibio de imagens que so maiores do que suas molduras.

paddingEspao em torno de um elemento em todos os lados.

padding-bottomEspao a partir da margem inferior de um elemento.

padding-leftEspao esquerda do elemento.

padding-rightEspao direita do elemento.

padding-topEspao a partir da margem superior do elemento.

page-break-afterInserir quebra de pgina depois de um elemento.

page-break-beforeInserir quebra de pgina antes de um elemento.

positionComo o elemento posicionado na pgina.

text-alignAlinhamento do texto.

text-decorationSublinhado, sobrelinhado ou riscado.

text-indentRecuo da primeira linha do pargrafo.

text-transformTransformao para todas maisculas, minsculas ou inicial maiscula.

topPosio do elemento em relao a parte superior da pgina.

vertical-alignAlinhamento vertical do elemento.

visibilitySe elemento visvel ou invisvel.

widthLargura do elemento.

z-indexPosio do elemento na pilha.

MiscelneaMltiplas fontesVoc pode utilizar na tag mltiplas fontes especificando a ordem de preferncia. Ou seja, se a primeira fonte indicada por voc no constar no computador do visitante, a segunda ser a escolhida, caso no tenha passa a ser a terceira e assim por diante. Veja o exemplo:

Ou na declarao CSS:H1 {font-family: "Arial, Comic Sans MS, Helvetica" ... }Fonte incorporadaUtilizando as fontes incorporadas, o visitante de seu site far o download e a instalao da fonte utilizada por voc em seu site caso ele ainda no a tenha em seu micro. A sintaxe para incorporao a seguinte:

OBS: Essa declarao deve estar entre as tags ... em sua pgina HTML.Tente usar os CSS que no modifique tanto a pgina, pois apenas os browsers mais atulizados aceitam e caso tenha muita modificao pode ser que muitas pessoas no tenham a vizualizao que vc deseja. Agora veja os exemplos e aproveite.Espero vc na lio 11.