Manual de CSS Pio XII Informtica Prof. Marcos O que significa a sigla CSS?

CSS? CSS a sigla para Cascading Style Sheets que em portugus foi traduzido para folhas de estilo em cascata e nada mais que um documento desenvolvido em uma linguagem de programao bem simples, destinado a aplicar estilos aos elementos HTML. Qual finalidade das CSS? A finalidade das CSS a de retirar do HTML toda e qualquer declarao que vise a formatao, a apresentao do documento. Isto significa dizer que tags do tipo <font>, <b>, <i>.... etc, bem como uso de colunas e linhas de tabelas para obteno de espaamentos no so admitidos ou admitidos com restries em um projeto Web com CSS. Vale dizer simplificando: HTML para estruturao e CSS para apresentao. Atualizao em 2005-08-26: As tags <b> e <i> cumprem finalidade unicamente de apresentao. Elas no tm qualquer efeito sobre tecnologias assistidas. Foram criadas poca antiga de marcar documentos web e basicamente calcadas em estruturao para mdia tipogrfica, no imputando qualquer relevncia ao texto com elas marcada e nada significam para leitores de tela ou mecanismos de busca, por exemplo. No esto em desuso, so previstas no XHTML 1.1, podem e devem ser usadas se a sua inteno a de contemplar somente mdia visual. As tags <strong> e <em>, estas sim, so interpretadas por todas as tecnologias assistidas e devem ser usadas em substituio a <b> e <i> se a sua inteno a de contemplar estas tecnologias. Contudo, embora o suporte para elas deva continuar ainda por muito tempo, nada aponta para uma revitalizao de <b> e <i>. Pelo contrrio, as evidncias a esta poca, indicam que devam ser banidas a partir do XHTML 2.0. Porque devo usar CSS? CSS permite que voc retire da marcao HTML toda a formatao (apresentao) do documento WEB. Quem vai determinar cores, formas, tipos e tamanhos, posicionamento e em fim todo o "visual" da pgina so as CSS. As vantagens esto relatadas nas respostas a seguir. Quais as vantagens de se usar CSS ? Inmeras so as vantagens do uso das CSS nos documentos Web. Eis uma relao das principais:

controle total sobre a apresentao do site a partir de um arquivo central; agilizao da manuteno e redesign do site; sada para diferentes tipos de mdia a partir de uma verso nica de HTML; reduo do tempo de carga dos documentos Web; adequao simplificada aos critrios de acessibilidade e usabilidade; elaborao de documentos consistentes com as aplicaes de usurios futuras; aumento considervel na portabilidade dos documentos Web.

As CSS esto de acordo com as Web Standards? Sim esto. As CSS esto entre as prticas vivamente recomendadas pelo W3C para projetos Web. Os esforos dos rgos reguladores apontam no momento atual para elaborao de documentos Web acessveis, usveis e portteis com grande nfase. E, CSS facilita e simplifica a obteno destas trs variveis.

Pgina 1

Manual de CSS Pio XII Informtica Prof. Marcos O que regra CSS? Regra CSS e uma unidade mnima de programao de estilos, que segue uma sintaxe prpria e destina-se a estilizar uma ou mais propriedades CSS. (ver resposta seguinte) Como escrevo uma regra CSS? A sintaxe de uma regra CSS compreende um seletor uma propriedade e um valor escritos como mostrado abaixo: seletor {propriedade: valor;} Nota: ao conjunto propriedade: valor; denominamos declarao CSS. Por exemplo:

p {text-indent:10pt;} uma regra CSS

p o seletor. {text-indent: 10pt} a declarao CSS. text-indent - a propriedade CSS 10pt - o valor CSS Quais so os caracteres permitidos em regras CSS? So as letras de a-z, A-Z, os nmeros de 0-9, underscore, hfen e caracteres de escape. Caracteres Unicode 161255, bem como caracteres Unicode como cdigos numricos. No permitido iniciar-se um nome com um trao ou nmero. As sintaxe CSS sensvel a maisculas/minsculas? No. Regras CSS no so case sensitivas, isto , podem-se usar maisculo ou minsculo nas folhas de estilo indiferentemente. Isto vlido somente para as declaraes especficas de CSS. Por exemplo: mesmo numa declarao CSS, figura.gif diferente de FIGURA.gif Posso incluir comentrios nas regras CSS? Sim. Comentrios podem e devem ser usados nas folhas de estilo. recomendvel que se faa amplo uso de comentrios para fornecer informaes sobre os seletores, propriedades e valores declarados, com o intuito de facilitar futuras modificaes ou mesmo entendimento do cdigo gerado. Os comentrios devem estar entre as marcas /* e */ e podem ser inseridos em qualquer espao em branco dentro da folha de estilos. No so permitidos comentrios aninhados.
/* Isto um comentrio CSS */

Como informo o arquivo de CSS externo? <link rel="stylesheet" href="arquivo.css" type="text/css" media="all">

Pgina 2

Manual de CSS Pio XII Informtica Prof. Marcos O que efeito cascata das CSS? Efeito cascata o mtodo pelo qual aplicada uma regra CSS em funo do peso ( importncia, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que h um conflito de regras e ser aplicada aquela que tiver maior peso (importncia, prioridade) determinado pela ordem do efeito cascata. Como determinada a ordem para o efeito cascata? A ordem para o efeito cascata a ordenao das regras CSS de acordo com critrios pr-estabelecidos, com a finalidade de resolver eventuais conflitos entre regras. E estes critrios so os abaixo enumerados: 1. Localizadas todas as regras CSS aplicveis ao seletor/propriedade, determina-se a especificidade de cada uma delas. A regra mais especifica entre as conflitantes ser aplicada. Se no for encontra uma (ou mais) regra aplicvel ao elemento HTML, este herdar as propriedades de estilo de seu elemento pai. No havendo elemento pai ser aplicado o valor inicial default de estilo para aquele elemento 2. Regras com declarao importante (! important) tem prioridade sobre aquelas sem a declarao. Se o autor e o usurio declaram regras conflitantes com !important, as do usurio tm prioridade sobre as do autor. 3. Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo autor tm prioridade sobre aquelas declaradas pelo usurio. Regras do usurio com maior especificidade que aquelas do autor tm a prioridade. Regras com igual especificidade declaradas pelo autor tm prioridade sobre as do usurio. Regras do autor e do usurio tm prioridade sobre as regras default das aplicaes do usurio (p.ex.: o browser) 4. Regras mais especfica tm a prioridade sobre as menos especficas. 5. Entre regras de mesmo peso, tm prioridade aquelas declaradas por ltimo na seqncia das regras na folha de estilos. Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, tm do maior para o menor peso (estilos inline tm o maior peso). Entre vrias folhas de estilo lincadas tm maior prioridade aquela importada por ltimo (mais prxima da tag </head>. O mesmo ocorre entre as folhas importadas (@import)

Pgina 3

Manual de CSS Pio XII Informtica Prof. Marcos

:: A propriedade background ::
O fundo dos elementos HTML
A propriedade background define as caractersticas (os valores na regra CSS) do fundo dos elementos 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: #FFFFFF 2. cdigo rgb: rgb(255,235,0) background-image: 1. URL: url(caminho/imagem.gif) background-repeat: 1. no repete: no-repeat 2. repete vertical e horizontal: repeat background-attachment: 1. imagem fixa na tela: fixed 2. imagem "rola" com a tela: scroll background-position: 1. x-pos y-pos 2. x-% y-% 3. top left 4. top center 5. top right 6. center left

3. nome da cor: red, blue, green...etc 4. transparente: transparent

3. repete vertical: repeat-y 4. repete horizontal: repeat-x

7. center center 8. center right 9. bottom left 10. bottom center 11. bottom right

Ex.:
<html><head> <style type="text/css"><!-body {background-color: #FFFFCC;} /*azul claro*/ h2 {background-color: #FF0000;} /* vermelho */ p {background-color: #00FF00;} /* verde */ --></style> </head><body> <h2>Estude CSS</h2> <p>Com CSS voc controla melhor seu layout</p> </body></html>
Pgina 4

Manual de CSS Pio XII Informtica Prof. Marcos

:: A propriedade font ::
As fontes nos elementos HTML
As propriedades para as fontes, definem as caractersticas (os valores na regra CSS) das letras 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: #FFFFFF 2. 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, ex:"verdana", "helvetica", "arial", etc. 2. generic-family: define-se pelo nome genrico, ex:"serif", "sans-serif", "cursive", etc. font-size: 1. xx-small 7. xx-large 2. x-small 8. smaller 3. small 9. larger 4. medium 10. length: (px, pt, em, cm, ...) 5. large 11. % 6. x-large font-style: 1. normal: fonte normal na vertical 2. italic: fonte inclinada 3. oblique:fonte obliqua font-variant: 1. normal: fonte normal 2. small-caps: transforma em maisculas de menor altura font-weight: 1. normal 8. 400 2. bold 9. 500 3. bolder 10. 600 4. lighter 11. 700 5. 100 12. 800 6. 200 13. 900 7. 300

Pgina 5

Manual de CSS Pio XII Informtica Prof. Marcos

:: A propriedade text ::
Os textos nos elementos HTML
As propriedades para textos, definem as caractersticas (os valores na regra CSS) dos textos inseridos 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: #FFFFFF 2. cdigo rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc letter-spacing: 1. normal: o espaamento default 2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos word-spacing: 1. normal: o espaamento default 2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) So vlidos valores negativos text-align: 1. left: alinha o texto a esquerda 2. right: alinha o texto a direita 3. center: alinha o texto no centro 4. justify: alinha o texto a esquerda e a direita text-decoration: 1. none: nenhuma decorao 2. underline: sublinha o texto 3. overline: coloca sobrelinhado 4. line-through: coloca uma linha em cima do texto 5. blink: faz o texto piscar 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 normal 2. capitalize: as primeiras letras do texto em maisculas 3. uppercase: todas as letras do texto em maisculas 4. lowercase: todas as letras do texto em minsculas Pgina 6

Manual de CSS Pio XII Informtica Prof. Marcos

direction: 1. ltr: texto escrito da esquerda para a direita 2. rtl: texto escrito da direita para a esquerda white-space: 1. normal: os espaos em branco sero ignorados pelo browser 2. pre: os espaos em branco sero preservados pelo browser 3. nowrap: o texto ser apresentado todo ele numa linha nica na tela. No h quebra de linha at ser encontrada uma tag <br>

Exemplos: <html><head><style type="text/css"><!-Aqui sera digitdo o cdigo CSS dos Exemplos abaixo! --></style></head><body> <h1>Este o cabealho 1</h1> <h2>Este o cabealho 2</h2> <h3>Este o cabealho 3</h3> <p>Este o pargrafo cujo texto ...</p> </body></html>

color ... A cor do texto

h1 {color: #FF0000;} h2 {color: #00FF00;} p {color: rgb(0,0,255);}

letter-spacing...O espao entre letras

h2 {letter-spacing: 1.2em;} p {letter-spacing: 0.4cm;}

word-spacing...O espao entre palavras

h2 {word-spacing: 1.8em;} p {word-spacing: 80px;}

text-align...Alinhar o texto
h1 {text-align: left;} h2 {text-align: center;} h3 {text-align: right;} p {text-align: justify;}

text-decoration...Decorao do texto
h1 {text-decoration: underline;} h2 {text-decoration: line-through;} h3 {text-decoration: overline;} a {text-decoration: none;}

Pgina 7

Manual de CSS Pio XII Informtica Prof. Marcos

:: 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 da lista

list-style-image:

1. none 2. URL: url(caminho/marcador.gif) list-style-position: 1. outside: marcador fora do alinhamento do texto 2. inside: marcador alinhado com texto list-style-type: 1. none: sem marcador 2. disc: crculo (bolinha cheia) 3. circle: circunferncia (bolinha vazia) 4. square: quadrado cheio 5. decimal: nmeros 1, 2, 3, 4, ... 6. decimal-leading-zero 7. 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-greek 12. lower-latin 13. upper-latin 14. hebrew 15. armenian 16. georgian 17. cjk-ideographic 18. hiragana 19. katakana 20. hiragana-iroha 21. katakana-iroha

Os tipos de 11 a 20 so de uso especfico e sem suporte total pelos navegadores atuais.

Pgina 8

Manual de CSS Pio XII Informtica Prof. Marcos

Exerccios
list-style-image

...imagem para marcadores de lista

1) Este exemplo demonstra como definir uma imagem de marcador de listas

<html><head><style type="text/css"><! ul { list-style-image: url("seta.gif"); } --></style></head><body> <ul> <li>Item um</li> <li>Item dois</li> <li>Item tres</li> </ul> </body></html>
list-style-position

...posio dos marcadores de lista

2) Este exemplo demonstra como posicionar os marcadores de listas html><head><style type="text/css"><!-ul.inside { list-style-position: inside; } ul.outside { list-style-position: outside; } --></style></head><body> <ul class="inside"> <li>Este texto destina-se a demonstrar o valor: "inside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"inside" dos marcadores de listas.</li> </ul> <ul class="outside"> <li>Este texto destina-se a demonstrar o valor: "outside" dos marcadores de listas.</li> <li>E aqui continuamos com mais texto para fixar o valor:"outside" dos marcadores de listas.</li> </ul> </body></html>

Pgina 9

Manual de CSS Pio XII Informtica Prof. Marcos

:: Estilizando a barra de rolagem do Internet Explorer ::

As restries ao estilizar uma barra de rolagem
Uma prtica bastante comum e difundida entre designers a de se estilizar a barra de rolagem do navegador, integrando-a ou at em alguns casos contrastando-a com as cores do documento HTML. Se voc decidir adotar esse tipo de estilo para a barra de rolagem esteja ciente do seguinte: 1-) s vai "funcionar" em navegadores Internet Explorer 5.5+; 2-) no est prevista nas normas (web standards). uma facilidade disponvel a um s tipo aplicao de usurio, ou seja, o MSIE; 3-) qualquer prtica de estilizao que interfira diretamente com o navegador do usurio, pode estar dificultando acessibilidade ou conflitando com preferncias pessoais. 4-) use todo seu esforo e poder de persuaso no sentido de convencer seu cliente a no adotar esta prtica. Isto uma tecnologia proprietria e deve ser evitada.

As propriedades disponveis para estilizar a barra de rolagem

So sete as reas de uma barra de rolagem as quais voc pode mudar a cor, conferindo-lhe um aspecto personalizado. Estas reas so mostradas na figura abaixo:

Lembrando a sintaxe das regras CSS: seletor{propriedade: valor;} Que no caso da barra de rolagem resulta na sintaxe geral: propriedade: scrollbar-local-cor A regra CSS aplicada na tag <body>. Assim, a regra CSS para estilizar a barra de rolagem segundo a figura :
<html><head> <style type="text/css"><!-body { scrollbar-arrow-color:#FF0000; scrollbar-face-color:#FFFFFF; scrollbar-track-color:#0000FF; scrollbar-3dlight-color:#00FF00; scrollbar-highlight-color:#000000; scrollbar-shadow-color:#000000; scrollbar-darkshadow-color:#00FF00; } --></style></head> <body></body></html>

Pgina 10

Manual de CSS Pio XII Informtica Prof. Marcos

Barra de rolagem a esquerda da tela

Talvez voc queira [sei l por que razo :-) ] mudar a posio da barra de rolagem vertical, deslocando-a para o lado ESQUERDO. Com CSS, basta voc usar a propriedade direction e o valor rtl (Right To Left ) para o seletor <body>. ==> direction: rtl; Acrescente esta regra no cdigo mostrado acima e veja o resultado no navegador. Mas ateno: Coloque um texto qualquer no documento. Voc ver que a barra de rolagem foi para o lado esquerdo, mas o texto foi para o lado DIREITO :-( Para voltar o texto para sua posio normal basta acrescentar mais uma regra CSS, dizendo para o texto se alinhar a esquerda ===> text-align:left; Resumindo, experimente este cdigo:
<html><head><style type="text/css"><!-body { scrollbar-arrow-color:#FF0000; scrollbar-face-color:#FFFFFF; scrollbar-track-color:#0000FF; scrollbar-3dlight-color:#00FF00; scrollbar-highlight-color:#000000; scrollbar-shadow-color:#000000; scrollbar-darkshadow-color:#00FF00; direction:rtl; text-align:left; } --></style></head> <body><p>Aqui um texto qualquer</p></body></html>

Mas v por partes: acrescente a primeira regra e veja no navegador, depois acrescente a segunda e veja a alterao.

Pgina 11