GUIA DE CSS

7/25/2019 GUIA DE CSS

1/84

Propriedades CSS

:: A propriedade font ::

As fontes nos elementos HTML

As propriedades para as fontes, definem as caractersticas (os valores na regra CSS) dasletras que constituem os textos dentro dos elementos HTML.

As propriedades bsicas para fontes e que abordaremos neste tutorial so as listadas abaixo:

color:...................cor da fonte

font-family:..........tipo de fonte

font-size:.............tamanho de fonte

font-style:............estilo de fonte

font-variant:.........fontes maisculas de menor altura

font-weight:.........quanto mais escura a fonte (negrito)

font:....................maneira abreviada para todas as propriedades

Valores vlidos para as propriedades da fonte

color:1. cdigo hexadecimal: #FFFFFF2. cdigo rgb: rgb(255,235,0)3. nome da cor: red, blue, green...etc

font-family:1. family-name: define-se pelo nome da fonte,

p. ex:"verdana", "helvetica", "arial", etc.2. generic-family: define-se pelo nome genrico,

p. ex:"serif", "sans-serif", "cursive", etc. font-size:

1. xx-small2. x-small3. small4. medium5. large6. x-large7. xx-large8. smaller9. larger

10.length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)11.% font-style:

1. normal: fonte normal na vertical2. italic: fonte inclinada3. oblique:fonte obliqua

font-variant:1. normal: fonte normal2. small-caps: transforma em maisculas de menor altura

font-weight:1. normal2. bold3. bolder4. lighter5. 1006. 200


2/84

7. 3008. 4009. 50010.60011.70012.80013.900

Vamos a seguir analisar cada uma delas detalhadamente atravs de exemplos prticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML edefinidas dentro de uma folha de estilos incorporada, bem como um trecho do documentoHTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixarseu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Esta a melhor e mais rpida maneira de voc aprender CSS. Bons estudos! E faatimo proveito dos tutoriais.

color ... A cor da fonte

Cabealho com letras vermelhas

Cabealho com letras verdes

Pargrafo com letras azuis

Este o efeito da folha de estilo acima:

Cabealho com letras vermelhas

Cabealho com letras verdes

Pargrafo com letras azuis

font-family...O tipo de fonte


3/84

Famlia por nome: arial, helvetica, serif;

Famlia genrica: sans-serif;

Este o efeito da folha de estilo acima:Famlia por nome: arial, helvetica, serif;

Famlia genrica: sans-serif;

Notas: A propriedade font-family usada para definir uma lista de tipos de fontes.

O browser assume o primeiro nome que ele reconhece na lista.

Separar cada nome por uma vrgula e sempre prever um nome genrico.

Se o nome da fonte for composto (mais de uma palavra, p. ex: Comic Sans MS), usar aspasduplas no nome. Se estiver definindo um atributo de "style" em HTML, onde as aspas duplasj esto presentes usar no nome de fonte composto, aspas simples.

font-size...O tamanho de fonte

Letras com tamanho: 14px

Letras com tamanho: smaller

Letras com tamanho:100%



4/84

Letras com tamanho: 14px

Letras com tamanho: smaller

Letras com tamanho:100%

font-style...O estilo de fonte

Este o estilo italic

Este o estilo normal

Este o estilo oblique


Este o estilo italicEste o estilo normal

Este o estilo oblique

font-variant...fontes maisculas "menores"

p

Este cabealho com letras normais

Este pargrafo com letras em "small-caps"


5/84


Este cabealho com letras normais

ESTE PARGRAFO COM LETRAS EM "SMALL-CAPS"font-weight...Peso das fontes - negrito (intensidade da cor)

Este um pargrafo em negrito


Este um pargrafo em negrito

font...Todas as propriedades das fontes em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades das fontes.

A sintaxe geral esta: font: [style] [variant] [weight] [size] [/line-height] [family] | caption | icon | menu | message-box | small-caption

| status-bar | inherit

Voc pode declarar todas ou algumas das propriedades.

Os valores sizee familyso obrigatrios. Os demais so facultativos (se voc os omitirser adotado o valor default ou herdado do elemento pai).

Os valores style, variant, weighte size, podem ser declarados em qualquer ordem.


6/84

Pargrafo em declarao nica


PARGRAFO EM DECLARAO NICA

O valores caption, icon, menu, message-box, small-caption e status-barreferem-se s fontes usadas pelo sistema operacional do visitante do site e devem serdeclarados isoladosna propriedade font.

caption............fontes usadas em botes; icon.................fontes usadas em cones; menu...............fontes usadas em menus; message-box...fontes ussadas em caixas de mensagens; small-caption...fontes usadas em pequenos controles; status-bar........fontes usadas na barra de status;

O valor inherit usado para herdar a fonte usada pelo elemento pai e tambm deve serdeclarados isoladosna propriedade font.

Pargrafo com fonte status-bar

Pargrafo com fonte inherit

Pargrafo com fonte small-caption


7/84


Pargrafo com fonte status-bar

Pargrafo com fonte inherit

Pargrafo com fonte small-caption


8/84

:: A propriedade text ::

Os textos nos elementos HTML

As propriedades para textos, definem as caractersticas (os valores na regra CSS) dos textosinseridos dentro dos elementos HTML.

As propriedades para textos so as listadas abaixo:

color.....................cor do texto; letter-spacing........espaamento entre letras; word-spacing.........espaamento entre palavras; text-align..............alinhamento do texto; text-decoration......decorao do texto; text-indent............recuo do texto;

text-transform.......forma das letras;

direction...............direo do texto; white-space.........como o browser trata os espaos em branco;

Valores vlidos para as propriedades do texto

color:

1. cdigo hexadecimal: #FFFFFF2. cdigo rgb: rgb(255,235,0)3. nome da cor: red, blue, green...etc

letter-spacing:

1. normal: o espaamento default2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores

negativos

word-spacing:

1. normal: o espaamento default2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores

negativos

text-align:

1. left: alinha o texto a esquerda2. right: alinha o texto a direita3. center: alinha o texto no centro4. justify: fora o texto a ocupar toda a extenso da linha da esquerda a direita

text-decoration:

1. none: nenhuma decorao2. underline: coloca sublinhado no texto3. overline: coloca um sobrelinhado no texto

4. line-through: coloca uma linha em cima do texto5. blink: faz o texto piscar


9/84

text-indent:

1. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)2. % : porcentagem da largura do elemento pai

text-transform:1. none: texto normal2. capitalize: todas as primeiras letras do texto em maisculas3. uppercase: todas as letras do texto em maisculas4. lowercase: todas as letras do texto em minsculas

direction:

1. ltr: texto escrito da esquerda para a direita2. rtl: texto escrito da direita para a esquerda

white-space:

1. normal: os espaos em branco sero ignorados pelo browser2. pre: os espaos em branco sero preservados pelo browser3. nowrap: o texto ser apresentado todo ele numa linha nica na tela. No h quebra de

linha at ser encontrada uma tag




A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixarseu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Esta a melhor e mais rpida maneira de voc aprender CSS. Bons estudos! E faatimo proveito dos tutoriais.

color ... A cor do texto

Este cabealho vermelho


10/84

Este cabealho verde

Este pargrafo azul


Este cabealho vermelhoEste cabealho verdeEste pargrafo azul

letter-spacing...O espao entre letras

Este o cabealho

Este o pargrafo


E s t e o c a b e a l h oE s t e o p a r a g r f o

word-spacing...O espao entre palavras


11/84

p {word-spacing: 80px;}

-->

Este o cabealho

Este o pargrafo


Este o cabealhoEste o paragrfotext-align...Alinhar o texto

Este o cabealho 1

Este o cabealho 2

Este o cabealho 3

Este o pargrafo cujo texto ...



12/84

Este o cabealho 1Este o cabealho 2

Este o cabealho 3Este o pargrafo cujo texto foi alongado para mais de duas linhas para que voc possa visualizar o efeito detext-align: justify que fora o texto a estender-se desde a direita at a esquerda.

text-decoration...Decorao do texto

Texto com sublinhado

Texto com linha em cima

Texto com sobrelinhado

Este um link sem sublinhado


Texto com sublinhadoTexto com linha em cimaTexto com sobrelinhado

Este um link sem sublinhado

text-indent...Recuo do texto


13/84

Texto com recuo de 80 pixel

Texto com recuo de 3.0em


Texto com recuo de 80 pixeis

Texto com recuo de 3.0em

text-transform...Forma das letras do texto

Texto com letras como digitadas

Texto com primeira letra das palavras, maisculas

Texto com todas letras, maisculas


14/84

Texto com letras minsculas


Texto com letras como digitadasTexto com primeira letra das palavras, maisculasTEXTO COM TODAS LETRAS, MAISCULAS

Texto com letras minsculas

Voc poder fazer uso de um excelente editor para a propriedade background e descobrirmais efeitos para complementar este tutorial, nesta pgina interativa.

ltima modificao: 2006/08/30 09:26:22 GMT


15/84

:: A propriedademargin::

As margens nos elementos HTML

A propriedade para margens, define um valor para espessura das margens dos elementosHTML.

As propriedades para margens so as listadas abaixo:

margin-top..........define a margem superior; margin-right........define a margem direita; margin-bottom.......define a margem inferior; margin-left.........define a margem esquerda; margin..............maneira abreviada para todas as margens

Valores vlidos para a propriedademargin

1. auto: valor default da margem2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)3. %: porcentagem da largura do elemento pai



Para cada propriedade apresento as regras CSS vlidas para um elemento HTML, e, definidasdentro de uma folha de estilos incorporada, bem como um trecho do documento HTML ondese aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixarseu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Bons estudos! E faa timo proveito do tutorial.

Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualizao.

margin-top...a margem superior


16/84

p {margin-top: 2cm;}

-->

Uma margem superior de 2cm


Uma margem superior de 2cm

margin-right...a margem direita


17/84

Uma margem direita de 300px nesta

frase mais longa dentro do pargrafo


Uma margem direita de 300px nesta frase maislonga dentro do pargrafo

margin-bottom...a margem inferior


18/84

Uma margem inferior de 2.0em


Uma margem inferior de 2.0em

margin-left...a margem esquerda

Uma margem esquerda de 10%


19/84


Uma margem esquerda de 10%

margin...todas as quatro margens em uma declarao nica

A propriedade da margin permitem que voc controle o espaamento em volta doselementos HTML. So vlidos valores negativospara margem, com o objetivo de sobreporelementos.

Em declarao nica a ordem das margens :superior, direita, inferior eesquerda.

H quatro modos de se declarar abreviadamente as margens:

1. margin: valor1......as 4 margens tero valor1;2. margin: valor1 valor2......margem superior e inferior tero valor1 - margem direita

e esquerda tero valor23. margin: valor1 valor2 valor3......margem superior ter valor1 - margem direita e

esquerda tero valor2 - margem inferior ter valor34. margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior e esquerda

nesta ordem.

Uma margem superior de 20px, uma margem direita de 40px,

uma margem inferior de 80px e uma margem esquerda de 5px


20/84


Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e umamargem esquerda de 5px



21/84

:: A propriedade border ::

As bordas nos elementos HTML

As propriedades para as bordas, definem as caractersticas (os valores na regra CSS) dasquatro bordas de um elemento HTML.

As propriedades para as bordas so as listadas abaixo:

border-width:................espessura da borda border-style:................estilo da borda border-color:................cor da borda ----------------------------------------- border-top-width:............espessura da borda superior border-top-style:............estilo da borda superior border-top-color:............cor da borda superior ----------------------------------------- border-right-width:.........espessura da borda direita border-right-style:..........estilo da borda direita border-right-color:..........cor da borda direita ----------------------------------------- border-bottom-width:.........espessura da borda inferior border-bottom-style:.........estilo da borda inferior border-bottom-color:.........cor da borda inferior ----------------------------------------- border-left-width:...........espessura da borda esquerda border-left-style:...........estilo da borda esquerda border-left-color:...........cor da borda esquerda

----------------------------------------- border-top:...maneira abreviada para todas as propriedades da borda superior border-right:..maneira abreviada para todas as propriedades da borda direita border-bottom:..maneira abreviada para todas as propriedades da borda inferior border-left:..maneira abreviada para todas as propriedades da borda esquerda border:.........maneira abreviada para todas as quatro bordas

Valores vlidos para as propriedades das bordas

color:

1. cdigo hexadecimal: #FFFFFF2. cdigo rgb: rgb(255,235,0)3. nome da cor: red, blue, green...etc

style:

1. none: nenhuma borda2. hidden: equivalente a none3. dotted: borda pontilhada4. dashed: borda tracejada5. solid: borda contnua6. double: borda dupla7. groove: borda entalhada

8. ridge: borda em ressalto9. inset: borda em baixo relevo


22/84

10. outset: borda em alto relevo

width:

1. thin: borda fina2. medium: borda mdia3. thick: borda grossa4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Vamos a seguir analisar algumas delas detalhadamente atravs de exemplos prticos.



A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar

seu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Bons estudos! E faa timo proveito dos tutoriais.

border-width, border-style e border-color


23/84

border-width: 6px;

border-style: dashed;

border-color: #FF0000;

}

-->

Borda mdia, contnua e azul

Borda 6px, tracejada e vermelha


Borda mdia, contnua e azul

Borda 6px, tracejada e vermelha

Nota: A propriedade border-colorno reconhecida pelo Internet Explorer se for usadaisolada. Use a propriedade border-stylepara ser reconhecida pelo Internet Explorer.

Nota:A propriedade border-colorno reconhecida pelo Netscape. Use a propriedadeborderpara ser reconhecida pelo Netscape.

border-style


24/84

Abaixo os estilos de bordas obtidos com a declarao border-style: valor (dotted,dashed, etc..)

Borda dotted

Borda dashed

Borda solid

Borda double

Borda groove

Borda ridge

Borda inset

Borda outset

border-width

Estude o cdigo abaixo e tire suas concluses de como obter outros efeitos com espessurasde bordas

p {

border-style: solid;

border-bottom-width: 10px;

border-top-width: 0px;

border-right-width: 0px;


25/84

border-left-width: 0px;

}

Borda com espessura inferior de 10px


Borda com espessura inferior de 10px

Nota:A propriedade border-bottom-widthno reconhecida pelo Internet Explorer seusada isoladamente. Use border-stylepara ser reconhecida pelo Internet Explorer.

Definir a espessura das bordas superior, esquerda e direita

Proceda de modo semelhante ao mostrado acima.

border (declarao nica)

Esta a maneira abreviada de voc escrever uma regra para as propriedades das bordas.

Voc pode declarar todas as tres propriedadesdas bordas em uma regra nica:

A sintaxe geral esta: border: size style color; em qualquer ordem.Nota: Aconselho a escolher, e adotar, sempre a mesma ordem.


26/84


27/84

:: A propriedade padding ::

Os espaamentos nos elementos HTML

A propriedade para espaamentos (alguns traduzem como "enchimento"), define um valorpara os espaamentos entre o contedo e as bordas dos elementos HTML.

As propriedades para espaamentos so as listadas abaixo:

padding-top..........define a espaamento superior; padding-right........define a espaamento direita; padding-bottom.......define a espaamento inferior; padding-left.........define a espaamento esquerda; padding..............maneira abreviada para todas os espaamentos

Valores vlidos para as propriedades de espaamento

1. auto: valor default da margem2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)3. %: porcentagem da largura do elemento pai



Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro

de uma folha de estilos incorporada, bem como um trecho do documento HTML onde seaplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixarseu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Bons estudos! E faa timo proveito dos tutorial.

Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualizao.

padding-top...o espaamento superior


28/84

-->

Um espaamento superior de 2cm


Um espaamento superior de 2cm

padding-right...o espaamento direito


29/84

Um espaamento direito de 300px nesta

frase mais longa dentro do pargrafo


Um espaamento a direita de 300px nesta frase mais longa dentro do pargrafo

padding-bottom...o espaamento inferior

Um espaamento inferior de 2.0em


30/84


Um espaamento inferior de 2.0em

padding-left...o espaamento esquerdo

Um espaamento esquerdo de 10%


Um espaamento esquerdo de 10%


31/84

padding...todos os quatro espaamentos em uma declarao nica

A propriedade padding permite que voc controle o espaamento entre o contedo e asbordas dos elementos HTML.

No so vlidos valores negativospara espaamento.

Em declarao nica a ordem das espaamentos :superior, direito, inferior eesquerdo.

H quatro modos de se declarar abreviadamente os espaamentos:

1. padding: valor1......os 4 espaamentos tero valor1;2. padding: valor1 valor2......espaamento superior e inferior tero valor1 -

espaamento direito e esquerdo tero valor23. padding: valor1 valor2 valor3......espaamento superior ter valor1 - espaamento

direito e esquerdo tero valor2 - espaamento inferior ter valor34. padding: valor1 valor2 valor3 valor4....os espaamentos superior, direito, inferior e

esquerdo nesta ordem.

Um espaamento superior de 20px,

um espaamento direito de 40px,

um espaamento inferior de 80px


32/84

e um espaamento esquerdo de 5px


Um espaamento superior de 20px, um espaamento direito de 40px, um espaamento inferior de 80px e umespaamento esquerdo de 5px



33/84

:: A propriedade background ::

O fundo dos elementos HTML

A propriedade background define as caractersticas (os valores na regra CSS) do fundo doselementos HTML.

As propriedades background so as listadas abaixo:

background-color............... cor do fundo; background-image............. imagem de fundo; background-repeat............. maneira como a imagem de fundo posicionada; background-attachment.......se a imagem de fundo "rola" ou no com a tela; background-position............como e onde a imagem de fundo posicionada; background........................maneira abreviada para todas as propriedades;

Valores vlidos para as propriedades do fundo

background-color:

1. cdigo hexadecimal: #FFFFFF2. cdigo rgb: rgb(255,235,0)3. nome da cor: red, blue, green...etc4. transparente: transparent

background-image:

1. URL: url(caminho/imagem.gif)

background-repeat:

1. no repete: no-repeat2. repete vertical e horizontal: repeat3. repete vertical: repeat-y4. repete horizontal: repeat-x

background-attachment:

1. imagem fixa na tela: fixed

2. imagem "rola" com a tela: scroll

background-position:

1. x-pos y-pos2. x-% y-%3. top left4. top center5. top right6. center left7. center center8. center right9. bottom left10. bottom center11. bottom right


34/84



Para cada propriedade apresento as regras CSS para um ou mais elementos HTML edefinidas dentro de uma folha de estilos incorporada, bem como um trecho do documento

HTML onde se aplicam as regras.A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixarseu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Esta a melhor e mais rpida maneira de voc aprender CSS. Bons estudos! E faatimo proveito dos tutoriais.

A cor do fundo

Estude CSS

Com CSS voc controla melhor seu layout


35/84


Estude CSS

Com CSS voc controla melhor seu layout

A imagem de fundo


Repetir verticalmente a imagem de fundo


36/84


Repetir horizontalmente a imagem de fundo


37/84

style type="text/css">


38/84

body {

background-image: url("/images/css.gif");

background-repeat: no-repeat;

background-position: 200px 70px;

}

-->

Este o efeito da folha de estilo acima: a imagem esta posicionada a 200 pixel da margemesquerda e 70 pixel da margem superior

Ajustar uma imagem de fundo fixa, que no "rola" com a tela.


39/84

background-image: url("/images/css.gif");

background-repeat: no-repeat;

background-attachment: fixed;

}

-->

Este o efeitoda aplicao das regras CSS acima em uma pgina web.

Todas as propriedades do fundo em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades do fundo.

Voc pode declarar todas ou algumas das propriedades estudadas em uma regra nica:

A sintaxe geral esta:background: color image repeat attachment position;

em qualquer ordem, podendo ser omitido um mais valores.

Veja o exemplo abaixo:

>

/>


40/84

Voc poder fazer uso de um excelente editor para a propriedade background e descobrirmais efeitos para complementar este tutorial, nesta pgina interativa.



41/84

:: A propriedade list::

Mudando o estilo das listas HTML

A propriedade list define as caractersticas (valores) das listas HTML.

As propriedades list so as listadas abaixo:

list-style-image............. imagem como marcador da lista;list-style-position..........onde o marcador da lista posicionado;list-style-type...............tipo do marcador da lista;list-style........................maneira abreviada para todas as propriedades;

Valores vlidos para as propriedades do lista

list-style-image :

1. none2. URL: url(caminho/marcador.gif)

list-style-position:

1. outside: marcador fora do alinhamento do texto2. inside: marcador alinhado com texto

list-style-type:

1. none: sem marcador2. disc: crculo (bolinha cheia)3. circle: circunferncia (bolinha vazia)4. square: quadrado cheio5. decimal: nmeros 1, 2, 3, 4, ...6. decimal-leading-zero7. lower-roman: romano minsculo i, ii, iii, iv, ...8. upper-roman: romano maisculo I, II, III, IV, ...9. lower-alpha: letra minscula a, b, c, d, ...10. upper-alpha: letra maiscula A, B, C, D, ...11. lower-greek12. lower-latin13. upper-latin14. hebrew15. armenian16. georgian17. cjk-ideographic18. hiragana19. katakana20. hiragana-iroha21. katakana-iroha

Os tipos de 11 a 20 so de uso especfico e sem suporte total pelos navegadores atuais eno sero tratados neste tutorial.




42/84

Para cada propriedade apresento as regras CSS para o elemento lista HTML e definidasdentro de uma folha de estilos incorporada, bem como um trecho do documento HTML ondese aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixarseu aprendizado reproduza o cdigo no seu editor, mude os valores e veja o resultado nobrowser. Bons estudos! E faa timo proveito dos tutorial.

list-style-image...imagem para marcadores de lista

Este exemplo demonstra como definir uma imagem de marcador de listas

Item um


43/84

Item dois

Item tres

A folha de estilo acima resultar nesta lista:

Item umItem doisItem tres

list-style-position...posio dos marcadores de lista

Este exemplo demonstra como posicionar os marcadores de listas

html>


44/84

{

list-style-position: outside;

}

-->

Este texto destina-se a demonstrar o

valor: "inside" dos marcadores de listas.

E aqui continuamos com mais texto para

fixar o valor:"inside" dosmarcadores de listas.


valor: "outside" dos marcadores de listas.

E aqui continuamos com mais texto para

fixar o valor:"outside" dos marcadores de listas.


45/84


Este texto destina-se a demonstrar o valor: "inside" dos marcadoresE aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores delistas.

Este texto destina-se a demonstrar o valor: "outside" dos marcadoresE aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores

de listas.

list-style-type...os tipos de marcadores de lista

Definir os marcadores de listas no ordenadas

Este exemplo demonstra como definir os marcadores de listas no ordenadas.


46/84

}

ul.circle {

list-style-type: circle;

}

ul.square {

list-style-type: square;

}

-->

Item um

Item dois

Item tres

Item um


47/84

Item dois

Item tres

Item um

Item dois

Item tres

Item um

Item dois

Item tres





48/84


Item umItem dois

Item tres

Definir os marcadores de listas ordenadas

Este exemplo demonstra como definir os marcadores de listas no ordenadas.


49/84

list-style-type: upper-roman;

}

ol.lalpha

{

list-style-type: lower-alpha;

}

ol.ualpha

{

list-style-type: upper-alpha;

}

-->

Item um

Item dois

Item tres


50/84

Item um

Item dois

Item tres

Item um

Item dois

Item tres

Item um

Item dois

Item tres

Item um


51/84

Item dois

Item tres


1. Item um2. Item dois3. Item tres

i. Item umii. Item doisiii. Item tres

I. Item umII. Item dois

III. Item tres

a. Item umb. Item doisc. Item tres

A. Item umB. Item doisC. Item tres

list-style...duas propriedades das listas em uma declarao nica

Esta a maneira abreviada de voc escrever uma regra para as propriedades das listas.

Voc pode declarar duas das propriedades estudadas em uma regra nica:

A sintaxe geral esta: list-style: position; imagemou list-style: position;typepodendo inverter a ordem.

Veja o exemplo abaixo:


52/84

Texto para demonstrar a propriedade

de declarao nica para listas usando

CSS - Folhas de Estilo em Cascata;

Item dois;

Item tres.


53/84


Texto para demonstrar a propriedade de declarao nica para listas usando CSS- Folhas de Estilo em Cascata;Item dois;Item tres.



54/84

:: Pseudo-elementos CSS ::

Sintaxe

So usados em CSS, para adicionar efeitos a um seletor, ou a parte de um seletor.

A sintaxe dos pseudo-elementos:

seletor:pseudo-elemento {propriedade: valor;}

As classes em CSS podem tambm ser usadas com pseudo-elementos.

Esta regra permite que voc defina diferentes efeitos para pseudo-elementos localizados emdiferentes lugares em uma mesma pgina.

seletor.classe:pseudo-elemento {propriedade: valor;}

O pseudo-elemento first-letter

O pseudo-elemento first-letter usado para obter um efeito especial na primeiraletra de um texto.

p {

font-size: 12pt

}

p:first-letter {

font-size:300%;

}


55/84


pseudo-elemento first-letter, bla...bla...bla...

bla... bla...bla...bla...bla...bla... bla...bla...

bla... bla...bla...bla...bla...bla... bla...bla...

O cdigo acima produzir esse efeito

Este texto destina-se a demosnstrar o pseudo-elemento first-letter, bla...bla...bla... bla... bla...bla...bla...bla...bla...bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla... bla...bla...bla...bla...bla... bla...bla... bla...bla...bla...bla...bla...bla... bla...bla...

O pseudo-elemento first-lettersomente pode ser usado com elementos de bloco.

Propriedades aplicveis ao pseudo-elemento first-letter

font - propriedades de letras color - propriedades de cores background - propriedades de fundo margin - propriedades de margens padding - propriedades de espaamentos

border - propriedades de bordas text-decoration vertical-align (somente para "float: none) text-transform line-height float clear

O pseudo-elemento first-line

O pseudo-elemento first-line usado para obter um efeito especial naprimeira linha

de um texto.


56/84

p {

font-size: 12pt

}

p:first-line {

color: #0000FF;

font-variant: small-caps;

}

Um texto qualquer dentro

de um pseudo-elemento first-line,

para um efeito especial na primeira linha


57/84


Um texto qualquer dentro de um pseudo-elemento first-line, para um efeito especial na primeira linha. Notar amudana de cor e o tipo de letra small-caps na primeira linha.

No exemplo acima toda a primeira linha sofre o efeito da definio do pseudo-elemento. A"quebra" da linha depente do tamanho da janela do browser.

O pseudo-elemento first-linesomente pode ser usado com elementos de bloco.

Propriedades aplicveis ao pseudo-elemento first-line

font - propriedades de letras color - propriedades de cores background - propriedades de fundo word-spacing - espaamento entre palavras letter-spacing - espaamento entre letras

text-decoration vertical-align text-transform line-height clear

Pseudo-elementos em classes CSS

Pseudo-elementos podem ser combinados com classes CSS

p.combinado:first-letter {

color: #FF0000;

font-size:xx-large;

}


58/84

Uma frase com efeito

especial combinado


Uma frase com efeito especial combinado



59/84

:: Controlando as entrelinhas e o espaamento entre elementosHTML ::

As propriedades line-heightemargin

A propriedade CSS de dimensionamento line-height permite controlar o espaamentoentre linhas e a propriedade CSS marginpermite controlar o espaamento entre elementosHTML.

Observe abaixo o cdigo HTML para um texto composto de dois pargrafos:

1o. Pargrafo....Lorem ipsum dolor sit

amet, consectetuer adipiscing elit.

Nulla pharetra egestas neque.

Duis dolor lacus, volutpat ac,

vestibulum nec, suscipit a, felis.

Aenean pharetra orci id elit.

Duis non dui. Suspendisse potenti.

Ut ac risus. Etiam dignissim.


60/84

Quisque nec felis.

2o.Pargrafo.......Sed blandit est non

ante. Ut imperdiet sagittis mi.

Sed gravida sodales nisl. Ut hendrerit

ipsum eu enim. Duis tempus consequat mauris.

In hac habitasse platea dictumst.

Vivamus lectus justo, commodo in, rutrum non,

eleifend eget, pede. Sed ac lacus. In tortor.

O cdigo acima renderizado pelo navegador conforme mostrado abaixo.

Notar a distncia entre as linhas em cada pargrafo, ou seja as entrelinhas (no confundacom distncia entre pargrafos):

1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestasneque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci idelit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.


61/84

2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Uthendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst.Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

Alterando o espaamento entre linhas

No cdigo HTML mostrado acima vamos inserir uma regra CSS para line-heightque apropriedade CSS que controla as entrelinhas. Observe abaixo o mesmo cdigo com a regra,definindo uma entrelinha igual a 200%.

Nota:A entrelinha default do bronwser 100%.

Voc pode usar qualquer medida de comprimento, vlida em CSS (px, cm, em, %, in...) parao valor da propriedade line-height.


62/84









Quisque nec felis.







63/84




Notar que a entrelinha que era default 100%, agora est 200% ou seja dobrou:

Nota: Faa algumas experincias com o valor de line-height, usando inclusive valoresabaixo de 100% e tambm outras medidas vlidas (por exemplo: 12px, 2.3em, 3cm...etc...)e voc vai constatar que tem o controle total das entrelinhas.

1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas

neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id

elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut

hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst.

Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

E o espaamento (a distncia) entre os pargrafos?

Aqui tambm o controle todo seu via CSS.

E quem dita as regras para este espaamento a propriedade margin.

Vamos acresentar mais uma regra CSS no nosso cdigo.

Se voce no lembra da propriedade margin, leia este tutorial sobre margens


64/84








65/84



Quisque nec felis.










66/84

Notar que a entrelinha continua em 200% e agora o espaamento entre pargrafos cresceupara 40 pixels, cumprindo a regra CSS, escrita.

1o. Pargrafo....Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pharetra egestas

neque. Duis dolor lacus, volutpat ac, vestibulum nec, suscipit a, felis. Aenean pharetra orci id

elit. Duis non dui. Suspendisse potenti. Ut ac risus. Etiam dignissim. Quisque nec felis.

2o.Pargrafo.......Sed blandit est non ante. Ut imperdiet sagittis mi. Sed gravida sodales nisl. Ut

hendrerit ipsum eu enim. Duis tempus consequat mauris. In hac habitasse platea dictumst.

Vivamus lectus justo, commodo in, rutrum non, eleifend eget, pede. Sed ac lacus. In tortor.

Voc deve ter notado que o espaamento do 1o. pargrafo para a borda superior do quadroamarelo e tambm a do 2o. pargrafo para a borda inferior do quadro amarelo, ambasAUMENTARAM.

Sim, este aumento no espaamento cumpriu o prescrito na nova regra, ou seja: 40 pixel demargem superior e 40 pixel de margem inferior nos pargrafos.

Mas lembre-se o controle SEU. Tem como evitar este espaamento no previsto :-) Veja oitem 1-) abaixo.

Dicas adicionais

1-) Para evitar aquele espaamento referido acima, crie e aplique uma classe no pargrafosuperior com margin-top: 0; (ou n pixels) e outra classe ao pargrafo inferior commargin-bottom: 0;(ou n pixels);

Voc pode tambm declarar: margin: 0 0 40px 0;e suprimir o espaamento superior,ou aindamargin: 40px 0 0 0;e suprimir o espaamento inferior. E, uma srie de outrascombinaes que ficam a ttulo de exerccios para voc.

2-) Se voc deseja aplicar regras CSS em alguns elementos do documento e no em todos(por exemplo: alguns pargrafos na pgina seguiro uma regra line-heightoutros no)

crie classes e aplique aos elementos.ltima modificao: 2006/08/30 09:24:12 GMT


67/84

:: As medidas CSS de comprimento ::

Introduo

Unidades de medida de comprimento CSS

As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou navertical (e em sentido mais amplo, em qualquer direo).

O formato para declarar o valor de uma unidade de medida CSS um nmero com ou semponto decimal imediatamente precedidodo sinal '+' (mais) ou do sinal '-' (menos), sendoo sinal '+' (mais) o valor "default" e imediatamente seguido por uma unidadeidentificadora (medida CSS vlida - p.ex., px, em, deg, etc...). A unidade identificadora opcional quando se declara um valor '0' (zero).

Algumas das propriedades CSS permitem que sejam declarados valores negativos paraunidades de medida. A adoo de valores negativos podem complicar a formatao doelemento e devem ser usados com cautela. Se valores negativos no forem suportados pelaaplicao de usurio, eles sero convertidos para o valor mais prximo suportado (e issopode tornar-se desastroso para um layout).

Unidades de medida de comprimento CSS vlidas

So dois os tipos de unidade de medida de comprimento CSS:

UNIDADE RELATIVA

em ex px - pixel % - percentagem

as unidades relativas so referenciadas a outras unidades como veremos a seguir.

UNIDADE ABSOLUTA

pt - point :1/72 in; pc - pica :12 points ou 1/6 in; mm - milmetro :1/10 cm; cm - centmetro :1/100 m; in - polegada :2,54 cm;

Unidade relativa- aquela tomada em relao a uma outra medida. Folhas de Estilo emCascata que usam unidades de comprimento relativas so mais apropriadas para ajustes deuso em diferentes tipos de mdia. (p. ex., de uma tela de monitor para uma impressoralaser).

O valor tomado em relao:

em: ...ao tamanho da fonte ('font-size') herdada; ex: ...a altura da letra x (xis) da fonte herdada;


68/84

px: ...ao dispositivo (midia) de exibio; %: ... a uma medida previamente definida.

Unidade absoluta - aquela que no esta referenciada a qualquer outra unidade e nem herdada. So unidades de medida de comprimento definidas nos sistemas de medidas pela

fsica e em fim so os conhecidos "centmetros, polegadas etc...). So indicadas para seremusadas quando as mdias de exibio so perfeitamente conhecidas.

Abaixo exemplos ilustrativos do uso destas medidas de comprimento CSS:

div { margin: 1.5em; }

h4 { margin: 2ex; }

p { font-size: 14px; }

.classe { padding: 90%; }

hr { width: 14pt; }

h1 { margin: 1pc; }

h2 { font-size: 4mm; }

p.classe { padding: 0.3cm; }

h5.classe { padding: 0.5in; }

Nota:Relembro que uma regra CSS tem a seguinte sintaxe

seletor {propriedade: valor;}

Entendendo as unidades de medida CSS

Vamos a seguir definir e analisar cada uma das unidades de medida CSS e apresentarexemplos prticos.

A unidade de medida - pixel

A unidade de medida de comprimento pixel relativa a resoluo do dispositivo de exibio(p.ex: a tela de um monitor).

Sem entrar em maiores consideraes tericas a mais simplista definio de pixel queencontrei esta:


69/84

Pixel o menor elemento em um dispositivo de exibio, ao qual possivel atribuir-se umacor.

Considere um dispositivo de exibio construido com uma densidade de 90 dpi (dpi = dotsper inch = pontos por polegada). Por definio, a referncia padro para pixel igual aum ponto no citado dispositivo. Da pode-se concluir que 1 pixel naquele dispositivo deexibio igual a 1/90 inch = 0,28 mm.

Para uma densidade de 300 dpi 1 pixel igual a 1/300 inch = 0,085mm

Assim, pixel uma medida relativa a resoluo do dispositivo de exibio.

A unidade de medida - em

A unidade de medida de comprimento em referencia-se ao tamanho da fonte (letra) doseletor onde for declarada. Quando em for declarada para a propriedade font-sizereferencia-se ao tamanho da fonte (letra) do elemento pai. Quando emfor declarada para oelemento raiz do documento (p. ex: em documentos html) referencia-se ao valorinicial (default) do tamanho de fonte (letra).

Os exemplos abaixo esclarecem as definies:

h1 { line-height: 1.2em }

line-height deser 20% maior do que o tamanho das letras de

h1 { font-size: 1.2em }

font-size de ser 20% maior do que o tamanho das letras herdado por p.ex.: seh1 estiver contido numa div com font-size=10px ento font-size de h1 = 12px

A unidade de medida - ex

A unidade de medida de comprimento ex igual a altura da letra x(xis) minscula).

A unidade de medida - percentagem, %

Valores em percentagem so relativos a um outro valor anterior declarado. Este valoranterior h que estar bem definido e em geral esta definio est em uma determinadapropriedade do mesmo elemento, na propriedade do elemento "pai" (por exemplo: umamedida CSS de comprimento) ou mesmo no contexto geral da formatao (por exemplo: alargura do bloco de contedo).

p { font-size: 10px }

p { line-height: 120% }/*120% de'font-size'=12px*/



70/84

:: Definindo cores em uma regra CSS ::

Objetivo

Detalhar as diferentes maneiras de se escrever a sintaxe para os valores das cores em umaregra CSS

Valores vlidos para cores em CSS

Observe as regras de estilo a seguir:

1-) div.um {background-color: #FF0000;}

2-) div.dois {background-color: #F00;}

3-) div.tres {background-color: rgb(255, 0, 0);}

4-) div.quatro {background-color: rgb(100%, 0%, 0%);}

5-) div.cinco {background-color: red;}

6-) div.seis {background-color: ThreeDShadow;}

Como voc j deve ter concluido apresentei 06 (seis) maneiras diferentes de definir uma corde fundo para uma DIV.

E, se considerarmos que para as duas primeiras regras vlido usar letras minsculas,

existem 08 (oito) maneiras de se definir uma cor em uma regra CSS.


71/84

As maneiras mais usadas so as mostradas em 1 e em 2, ou seja, com uso do cdigohexadecimal de cores.

O efeito das regras no navegador

Observe agora no screenshot a seguir como estas seis DIV's sero renderizadas.

As cinco primeiras esto com a mesma cor de fundo, vermelha o que nos leva a concluir queas cinco primeiras regras mostradas so equivalentes, ou seja so cinco maneiras diferentesde definir um mesmo valor para uma cor.

#FF0000 = #F00 = rgb(255,0,0) = rgb(100%,0%,0%) = red

A sexta cor, ThreeDShadowdepende do equipamento do usurio.

Vejamos cada uma delas detalhadamente.

Definir uma cor pelo seu cdigo hexadecimal

Esta a maneira mais conhecida de definir uma cor.

Convm ressaltar que em uma regra CSS indiferente usar letras maisculas ou minsculasna sintaxe hexadecimal de cores e tambm que vlido abreviar a notao para trs dgitos.

Na notao abreviada cada um dos trs dgitos automaticamente dobrado conformeexemplos a seguir:

#FFF = #FFFFFF


72/84

#CF9 = #CCFF99

#cde = #ccddee

#49c = #4499cc

No do escopo deste tutorial detalhar o cdigo hexadecimal, contudo ressalto que osdezesseis dgitos hexadecimais so:0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F e somente eles so vlidos para definir uma cor, podendoem geral ser usada qualquer combinao deles. Assim: #FFDDHH no define uma cor, pois Hno vlido.

Existem vrias ferramentas online para determinar o cdigo hexadecimal de uma cor. Umadas que eu costumo usar e indico para vocs esta:

http://www.colorschemer.com/online.html

Definir uma cor pelo seu cdigo rgb

rgb abreviatura para:r = red (vermelha)g = green (verde)b = blue (azul)

Assim o cdigo rgb(xxx, yyy, zzz) indica uma cor obtida com a mistura de umaquantidade xxx de vermelho com yyy de verde e com zzz de azul.

Duas so as maneiras de se definir a quantidade de cada uma das trs cores:

Uma faixa de nmerao de 0 (zero) at 255Em percentagem de 0% at 100%

No vlidousar em uma definio nmero e percentagem.

Exemplos:

definies vlidasrgb(145, 230, 50) - rgb(20%, 0%, 70%)

definio no vlidargb(255, 20%, 120)


73/84

No do escopo deste tutorial detalhar as misturas de cor rgb.

No link indicado no item anterior possvel determinar tambm, o cdigo rgb de uma cor

Definir cor por palavra-chave

Voc pode definir uma cor usando o nome da cor. Os nomes de cor vlidos so os listadosnas recomendaes CSS do W3C.

As Recomendaes para CSS 2.1 listam as seguintes 17 cores:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, e yellow

Assim, as regras a seguir so vlidas para definir cor

p {color: aqua;}

div {background-color: teal;}

Definir cor baseado no sistema operacional do usurio

As recomendaes para CSS2.1 preconizam a definio da cor baseado nas cores adotadaspelo sistema operacional do usurio.

Este tipo de unidade de definio de cor denominadoSystem Colorsest em desuso e nodever constar das futuras Recomendaes CSS3.

Trata-se de uma lista de nomes de cores vlidas semelhana da listagem de cores porpalavra-chave e que se refere a reas do sistema operacional.

As cores previstas so:

ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow,ButtonText, CaptionText, GrayText, Highlight, HighlightText, InactiveBorder, InactiveCaption,InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText, Scrollbar, ThreeDDarkShadow, ThreeDFace,ThreeDHighlight, ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText

Embora os valores CSS sejam "case insensitives" recomenda-se usar a grafia com letrasmaisculas e minsculas ao se escrever o nome das cores de sistema por razes delegibilidade.

Exemplos:


74/84

p {color: ThreeDLightShadow;}

div {background: ButtonShadow;}

Veja NESTE LINKas cores definidas por regras de estilo para o seu sistema operacional.



75/84

:: Abreviando declaraes e valores em regras CSS ::

Relembrando a sintaxe e a terminologia de uma regra CSS

comum encontrar-se em muitos artigos sobre CSS escritos em blogs e sites, em textos deposts em fruns, em listas de discusso e at mesmo em revistas e jornais, diferentesreferncias e denominaes equivocadas para os componentes de uma regra CSS

Seletores so chamados de elementos ou de tags, propriedades so chamadas deseletores ou de atributos, valores so chamados de atributos ou de propriedades,declaraes so chamadas de regras ou funes CSS e por a vai em uma diversificadacombinao dos termos acima citados em uma salada que acaba por confundir iniciantes eas vezes at mesmo outros j com alguma experincia com folhas de estilo em cascata.

Com a finalidade de facilitar o entendimento desta matria e esclarecer a confuso que vemse formando em torno do assunto, vamos rever a sintaxe e a terminologia de uma regra CSSpara que quando eu escrever seletor, declarao, propriedade e valor, no haja dvidassobre a poro da regra CSS a que estou me referindo e voc no fique se perguntando ondeesto os "atributos CSS, as tags CSS, e outros tantos termos equivocados".

Vejamos o que diz as Recomendaes do W3C para Folhas de Estilo, nvel 1 na seointitulada Conceitos Bsicos

O projeto, ou desenho do layout, das folhas de estilos fcil. preciso apenas conhecer umpouco da linguagem HTML e possuir noes bsicas dos termos usados em publicaoeletrnica. Como exemplo, para ajustar a cor das letras de um elemento 'H1' para azul, bastafazer:

H1 {color: blue}

Este exemplo mostra o que uma 'regra' simples em CSS. Uma regra composta de duaspartes principais: um selector ('H1') e uma declarao ('color: blue'). Por sua vez, estadeclarao tambm possui duas partes: uma propriedade ('color') e seu valor ('blue').Embora este exemplo especifique apenas uma das vrias propriedades necessrias paramontar um documento HTML, ela constitui por si s uma 'folha de estilo'. Quando forcombinada com outras folhas de estilo ela determinar a apresentao final do documento(uma caracterstica fundamental que as folhas de estilo podem ser combinadas).

O seletor funciona como a ponte de ligao entre o documento HTML e a folha de estilo, etodos os elementos HTML podem funcionar como possveis seletores. Os vrios elementosHTML esto definidos na Recomendao HTML

etc.

A Recomendao do W3C define claramente que uma regra CSS composta de um seletore uma declaraoe que a declarao compreende uma propriedadee um valor.

Na regra CSS a seguir:

H1 {color: blue}

a terminologia correta :

H1- seletor; {color: blue}- declarao;

color- propriedade; blue- valor.


76/84

e a sintaxe correta :

Escrever o seletor e a seguir a declarao; A declarao deve estar entre { } (chaves); Na declarao, separar a propriedade e o valor por : (dois pontos); permitido usar espaos em branco em qualquer quantidade entre cada um dos

caracteres da regra; permitido grupar declaraes em uma mesma regra e neste caso as declaraes

devero ser separadas por ; (ponto-e-vrgula)podendo todas elas estar em umamesma linha ou em linhas distintas. facultativo o uso de ; (ponto-e-vrgula)aps altima declarao na regra;

indiferente o uso de maisculas e minsculas em uma regra CSS, contudo asclassese ID'sdevem seguir a mesma grafia constante da marcao.

Estes so os termos normatizados de uma regra CSS e os que usaremos. Portanto, noexiste "atributo CSS" ou "tag CSS" ou "elemento CSS" ou "funo CSS" ou tantos outrosequivocadamente escritos.

No do escopo deste tutorial detalhar as boas prticas de escrita das regras em uma folhade estilos.Sobre este assunto escrevi e recomendo a leitura do tutorial Dicas bsicas para projetarfolhas de estilos.

Abreviando valores de cores hexadecimais

O formato hexadecimal uma das opes sintticas mais usadas para se escrever o valordas cores em regras CSS. A regra a seguir define que os pargrafos sero na cor vermelha(#ff0000).

p {color: #ff0000;}

e que poder ser abreviada para:

p {color: #f00;}

vlido abreviar cores hexadecimais para 3 dgitos. Valores escritos com 3 dgitos sointerpretados como se cada um dos dgitos tivesse sido sido declarado duas vezes, isto :

genericamente, #abc equivalente #aabbcc

Exemplos:

#c30 = #cc3300

#999 = #999999

#ff0 = # ffff00

#d61 = #dd6611


77/84

fcil concluir que a abreviao de cores hexadecimais somente possvel para as coresconstituidas por 3 pares de dgitos hexadecimais.

Valores para os quatro lados de um elemento nvel de bloco

Um elemento nvel de bloco ou uma 'caixa' admite estilizao em seus quatro lados paraalgumas propriedades como border e padding entre outras.Por exemplo: voc pode definir um paddingsuperior, um padding direita, um paddinginferior e um padding esquerda para uma div.

A sequncia em que voc escreve os valores para estilizar os quatro lados de uma 'caixa' rgida e fixa em uma regra CSS e obedece a seguinte ordem:

em cima , lado direito, embaixo, lado esquerdo

Faa uma analogia com o relgio para no esquecer a sequncia.12 horas (superior), 3 horas (direita), 6 horas (inferior), 9 horas (esquerda).

A regra div {padding: 2px 3px 8px 7px;} define para a div:um padding inferior igual a 8px:um padding superior igual a 2px;um padding esquerda igual a 7px:um padding direita igual a 3px.

Alm da mostrada acima vlido abreviar declaraes que envolvem os quatros lados deuma 'caixa' de outras 3 maneiras diferentes como mostradas a seguir:

1. div {padding: 10px;}paddingde 10px para os 4 lados;2. div {padding: 6px 8px;}paddingde 6px para os lados superior e inferior e de

8px para os lados direito e esquedo;3.

div {padding: 2px 4px 9px;}paddingde 2px para o lado superior, de 4px

para os lados direito e esquerdo e de 9px para o lado inferior.

Propriedades que admitem abreviao

Veremos ao longo deste tutorial, como abreviar as seguintes propriedades CSS:

1. margin;2. padding;3. background;4. font;5. list;

6. outline;7. border.

Abreviandomargin

As regras a seguir definem valores para as 4 margens para uma div:

div {

margin-top:10px;


78/84

margin-right:8px;

margin-bottom:0;

margin-left:5px;

}

E pode ser abreviada para:

div {

margin:10px 8px 0 5px;

}

Abreviandopadding

As regras a seguir definem valores para os 4 paddings de um pargrafo:

p {

padding-bottom:6px;

padding-top:12px;

padding-left:1px;

padding-right:2px;

}



79/84

div {

padding:12px 2px 6px 1px;

}

Abreviandobackground

As regras a seguir definem valores para propriedades background de uma div:

div {

background-color:#ffffcc;

background-image:url(fundo.gif);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:20px 10px;

}


div {

background:#ffc url(fundo.gif) no-repeat fixed 20px 10px;

}

Abreviando font

As regras a seguir definem valores para propriedades de font em um documento:


80/84

body {

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:11px;

line-height:15px;

font-family:Arial, Helvetica, Sans-serif;

}


body {

font:italic small-caps bold 11px/15px Arial, Helvetica, Sans-serif;

}

Nota: Para abreviar a propriedade font obrigatrio definir no mnimo os valores detamanho e famlia da font.Os demais valores so facultativos. A ordem de declarao dosvalores importante e deve ser assim:

1. comear com font-style, font-variant e font-weightsedo que estes trsvalores so facultativos e podem ser escritos em qualquer ordem;

2. a seguir declarar obrigatoriamente font-sizee opcionalmente line-height(font-size/line-height);

3. finalmente declarar obrigatoriamente font-family.

Abreviando list

As regras a seguir definem valores para propriedades de listas:

ul {


81/84

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.gif);

}


ul {list-style:square inside url(image.gif);}

A propriedade: list-style-type pode ser abreviada para list-style.Por exemplo: list-style-type:none pode ser abreviada para list-style:none;

Abreviando outline

A propriedade outline pouco conhecida e empregada. Serve para colocar uma margemao redor de um elemento, com a finalidade de destac-lo no contexto. Difere da propriedadeborder por no interferir com as dimenses do box model, isto , no ocupa espao no boxdo elemento e em consequncia no afeta o posicionamento do box e nem dos boxesadjacentes.

As regras a seguir definem a marcao de um 'destaque' em linha vermelha slida de 1px aoredor do elemento h2:

h2 {

outline-color:#f00;

outline-style:solid;

outline-width:1px;

}



82/84

h2 {

outline:#f00 solid 1px;

}

Exemplo: Para este pargrafo eu defini um destaque (outline) de 5px em linha tracejadana cor azul que ser visualizado nos Mozillas e no pera, mas no no Internet Explorer queno suporta outline.

Abreviandoborder

As regras a seguir definem valores para propriedades de borda:

div {

border-width:1px;

border-style:solid;

border-color:#f00;

}


div {border:1px solid #f00;}

As regras a seguir definem valores para espessuras de borda:

p {

border-top-width:2px;

border-right-width:1px;


83/84

border-bottom-width:3px;

border-left-width:5px;

}


p {border-width:2px 1px 3px 5px;}

As regras a seguir definem valores para cores de borda:

h1 {

border-top-color:#f00;

border-right-color:#ccc;

border-bottom-color:#00f;

border-left-color:#999;

}


p {border-color:#f00 #ccc #00f #999;}

As regras a seguir definem valores para estilos de borda:

p {


84/84

border-top-style:solid;

border-right-style:ridge;

border-bottom-style:double;

border-left-style:dotted;

}


p {border-style:solid ridge double dotted;}


Documents

GUIA DE CSS