Universidade Federal Fluminense ´ gico Centro Tecnolo Escola de Engenharia ˜ es Curso de Engenharia de Telecomunica¸ co ˜ o Tutorial Programa de Educa¸ ca Grupo

PET-Tele

Apostila de Introdu¸ c˜ ao ao CSS

Autor atual: Isabelle Guimar˜ aes M. O. de Barros Carlos Felipe Araujo dos Santos

Nitero ´i - RJ Maio / 2008

Nesta terceira vers˜ ao. o que dificultava a visualiza¸ ca ˜o dos sites na ´ epoca. devido a compatibilidade dos browsers atuais e a maturidade alcan¸ cada por seus desenvolvedores. Hakon Lie diante dessas dificuldades. Outra vantagem desta separa¸ ca ˜o ´ e que com a divis˜ ao em m´ odulos. O c´ odigo passou a ser usado tamb´ em como controle da aparˆ encia do documento. os parˆ ametros de texto e figuras.World Wide Web Consortium -que acabara de nascer. imagens de fundo e etc. Em 1996. O HTML estrutura o conte´ udo da p´ agina e o CSS formata esse conte´ udo. por exemplo. se interessou e decidiu criar uma equipe liderada por Hakon e Bert. Ele possibilita 3 . o que facilita a edi¸ c˜ ao tanto do texto como do layout. al´ em de posicionamento dos elementos. assim ocorreu com o HTML. propˆ os a cria¸ c˜ ao do CSS ou Cascading Style Sheets para facilitar a formata¸ ca ˜o da informa¸ c˜ ao. a inten¸ ca ˜o era de ”jogar”conte´ udo para o usu´ ario e n˜ ao formatar a informa¸ ca ˜o. eles lan¸ caram a recomenda¸ ca ˜o oficial pelo W3C do CSS Level 1 (CSS 1). poder˜ ao monitor propriedades referentes a ` essa ´ area. e assim. Era comum vocˆ e encontrar nos sites a mensagem: ”Site melhor visualizado com o navegador X” Em 1994. mais dif´ ıcil de entender. O CSS define e controla. Assim. Bert Bos passou a trabalhar no projeto de desenvolvimento do CSS junto ` a ele e em 1995 eles apresentaram sua proposta e finalmente. A principal vantagem do uso do CSS ´ e o fato de separarmos a apresenta¸ ca ˜o da webpage do seu conte´ udo. haver˜ ao pequenas atualiza¸ co ˜es dos m´ odulos em desenvolvimento. por exemplo. geralmente. Eles ter˜ ao a liberdade de escolher quais m´ odulos suportar˜ ao. Por exemplo. A sigla CSS (Cascading Style Sheets) se refere a uma linguagem de estilos que define o layout de documentos escritos. no dia 12 de Maio de 1998 foi lan¸ cada a recomenda¸ ca ˜o do CSS Level 2. os dispositivos espec´ ıficos ter˜ ao uma maior facilidade em suportar o CSS. Uma novidade que vem com o desenvolvimento do CSS 3 ´ e a mudan¸ ca na forma de atualiza¸ ca ˜o do CSS pelo W3C. Assim. em linguagem HTML. quando houver atualiza¸ co ˜es referentes aos Seletores do CSS. dispositivos que se interessam por propriedades visuais. ao inv´ es de atualizar o CSS inteiro. Como tudo na vida evolui. O CSS 3 se encontra em desenvolvimento e promete muitas facilidades para o programador. o CSS ser´ a dividido em m´ odulos e cada um ser´ a atualizado independentemente dos outros. a segunda vers˜ ao das Folhas de Estilos para Web. o W3C . Outro problema encontrado foi a compatibilidade com alguns navegadores.Cap´ ıtulo 1 Introdu¸ c˜ ao Quando o HTML foi criado. os dispositivos poder˜ ao atualizar-se sem ter que esperar por atualiza¸ c˜ oes maiores da linguagem. tornando a linguagem complexa. A pedido de Hakon. Dois anos depois.

diminuindo cada vez mais o n´ umero dos que n˜ ao oferecem. atualmente. .4 ˜ CAP´ ITULO 1. Apesar das diversidas em navegadores e constantes atualiza¸ co ˜es. mexendo-se apenas em uma linha do c´ odigo html. a maioria dos navegadores oferecem suporte ao CSS. INTRODUC ¸ AO a constru¸ ca ˜o de um s´ o conte´ udo com v´ arias formas de apresenta¸ ca ˜o. Outra vantagem em seu uso ´ e devido ao maior campo de op¸ c˜ oes e precis˜ ao que o CSS nos oferece.

valor . <img>.right { text-align: right } p. ´ e preciso ter em mente que qualquer modelo CSS s´ o ser´ a visto e aproveitado quando usado em um c´ odigo HTML ou semelhantes. 5 .css: p. <body>.tag em HTML que ter´ a tal valor aplicado a `quela propriedade citada.. Cada seletor possui mais de uma propriedade que pode vir a ser modificada e pode ser aplicado a uma classe. font. Quando os valores forem num´ ericos. O CSS possui sua pr´ opria sintaxe. n˜ ao utilizamos tags de inicia¸ ca ˜o e t´ ermino do documento. h´ a a op¸ c˜ ao de determin´ a-los em pixels. Na sua forma mais simples. propriedade .. .. cent´ ımetros ou porcentagens.1 Estrutura B´ asica Primeiramente. red.Cap´ ıtulo 2 Sintaxe do CSS 2.atributo que ser´ a modificado ao receber tal valor. Ex: <p>.. Ex: estilo. Ex: 3.caracter´ ıstica que a propriedade ir´ a assumir. color. com algumas de suas propriedades parecidas a `s do HTML.. ´ e composto por 3 partes: seletor {propriedade: valor} seletor . tahoma. Ex: size. <h1>.left { text-align: left } Em CSS.

css”. Por´ em.ando na esquerda. ela aparece no cabe¸ calho. SINTAXE DO CSS exemplo. entre as tags <head>. E avel que o arquivo com extens˜ ao . com extens˜ ao .css).html: <html> <head> <title> Bem-vindo! </title> </head> <body> <p class="left"> Come&ccedil. Quando a aplica¸ c˜ ao ´ e interna ao c´ odigo.css seja salvo no mesmo diret´ orio do documento em html.: ”CSS/arquivo.html”est´ a salvo na pasta ”C:/Meus Documentos/Minhas p´ aginas”e a folha de estilos ”estilo. caso deseja-se ter uma pasta separada somente com a formata¸ ca ˜o do site (somente com os arquivos .2 Aplica¸ c˜ ao A aplica¸ ca ˜o em HTML acontece dessas 2 principais formas: Internamente ao c´ odigo HTML ou externamente.} </style> </head> <body> Aprendendo CSS em um fundo azul! </body> </html> Na aplica¸ ca ˜o externa ´ e a aplica¸ c˜ ao recomendada. o documento ”exemplo. Ex: <html> <head> <title> Bem-vindo! </title> <style type="text/css"> body {background-color: #0000FF. ou seja. ”chamando”a folha de estilo ”estilo.css”) ao cham´ a-lo no HTML como ´ e mostrado no exemplo ` a seguir: . entre as tags <head>.css”tamb´ em dever´ a ser salva em ”C:/Meus Documentos/Minhas p´ aginas”. Ex.6 CAP´ ITULO 2. </p> <p class="right"> indo para a direita! </p> </body> </html> 2... pelo uso do atributo style.css e adiciona-se um link no documento em ´ recomend´ HTML. onde o usu´ ario cria seu documento CSS em um editor de texto. n˜ ao podemos esquecer de colocar o caminho exato do arquivo (` a partir da pasta onde est´ a salvo o arquivo HTML.

o arquivo HTML esta salvo em "HTML" e o *.css: body { background-color: #0000FF. logo.css em "HTML/CSS" </body> </html> 2.3.´ 2.3 Coment´ arios Coment´ arios s˜ ao utilizados para explicar o c´ odigo. } p { font-size: 3 } exemplo. as linhas comentadas come¸ cam com ”/*”e terminam com ”*/”. sendo assim. Em CSS.css" /> </head> <body> <p> Fazendo minha folha de estilos!!! </p> <p> No caso. COMENTARIOS 7 Ex: estilo.html: <html> <head> <title> Bem-vindo! </title> <link rel= "stylesheet" type= "text/css" href= "CSS/estilo. O navegador ir´ a ignorar linhas comentadas. s˜ ao essenciais para ajudar o desenvolvedor a achar erros ou modificar a ´reas espec´ ıficas do site. Ex: /* mudando a cor do plano de fundo */ background {color:#00FF00} . elas n˜ ao far˜ ao parte da sua formata¸ ca ˜o e n˜ ao influenciar´ a no tempo de execu¸ c˜ ao do site.

SINTAXE DO CSS .8 CAP´ ITULO 2.

Preencher´ a o documento com a cor desejada. Ex: /* pondo cor ao texto */ p {color:red} 3.O valor atribu´ ıdo a esta propriedade. background-repeat: no-repeat} 9 .gif").Cap´ ıtulo 3 Propriedades B´ asicas 3. Ex: body {background-color: #FFFFFF. background-image: url("imagem. background-image . A partir da propriedade ”background”.1 Cores Esta ´ e a propriedade mais comum. surgem mais propriedades a serem especificadas. As cores no CSS obedecem o padr˜ ao hexadecimal RGB e as mais b´ asicas podem tamb´ em ser designadas pelo nome.2 Plano de fundo O corpo de um documento geralmente vem preenchido por uma cor ou figura. background-position: bottom right.A posi¸ ca ˜o da imagem na p´ agina. mas como qualquer outro elemento pode ter o plano de fundo modificado. Top. center ou bottom combinados com left. que dever´ a estar localizada na mesma pasta da folha de estilos ou com o caminho at´ e a imagem especificado. n˜ ao s´ o ele. background-repeat Op¸ ca ˜o usada para repetir a imagem pelo plano de fundo. background-color . Quando o plano de fundo ´ e preenchido por uma imagem. dever´ a ser o nome do arquivo da figura. center e right. background-position . pois se aplica a muitos seletores.

Define a cor do texto. podemos caracterizar textos em qualquer elemento do HTML. Podemos citar como exemplo. color . PROPRIEDADES BASICAS 3.Define o alinhamento do texto. . text-decoration: underline. line-height: 2px.torn´ a-las todas mai´ usculas .Define uma transforma¸ ca ˜o ao texto.3 Texto O texto pode ter caracter´ ısticas alteradas em CSS que n˜ ao poderiam ser alteradas em HTML. que podem ser as seguintes: . .capitalize.css: h1 { color: #DDA0DD.Define o espa¸ camento entre as linhas.Define a distˆ ancia de recuo do texto no ´ ınicio do par´ agrafo.10 ´ CAP´ ITULO 3. text-transform: none } p { text-ident: 1cm. Com o uso do CSS e de suas prorpiedades. text-decoration: line-through.todas min´ usculas . Ex: estilo. que pode ser ao centro. a ` esquerda ou no estilo justificado. line-height . text-transform: uppercase } h2 { color: #3366FF. text-transform . line-through (uma linha em cima do texto) e blink (faz piscar o texto). text-ident .todas as primeiras letras mai´ usculas .Define a decora¸ c˜ ao de um texto e ´ e feita com os seguintes valores: underline (sublinhado). a ` direita. text-align: center } .uppercase. overline (sobrelinhado). text-decoration . text-align .lowercase. o espa¸ camento entre as linhas.

as </h2> <p> "Se voc&ecirc.as positivas no seu ambiente familiar.es no seu pr&oacute. FONTE exemplo.as se expandir&atilde.Define a intensidade de negrito que a fonte vai receber.3. respectivamente. todas as propriedades s˜ ao aplicadas a seletores relacionados a textos. Pode assumir 3 op¸ co ˜es: bold. font-weight . O valor pode ter o nome espec´ ıfico da fonte (Verdana.H´ a 3 op¸ c˜ oes: normal.4.Estas atitudes se refletir&atilde.&otilde. experimente primeiro promover o seu aperfei&ccedil.o em mudan&ccedil."</p> </body> </html> 3.es cada vez maiores. quer transformar o mundo. xx-small.css: h1 { color: #DDA0DD. small. x-large. serif).Varia o tamanho das letras mai´ usculas quando recebe o valor small-caps. italic e oblique. como <p> e <h1>.prio interior. as mudan&ccedil. letras inclinadas e letras obliquas. font-family .oamento pessoal e realizar inova&ecirc. font-style . large. Tudo o que fazemos produz efeito. causa algum impacto.Deste ponto em diante. font-variant . Como no cap´ ıtulo anterior.css" /> </head> <body> <h1> Textos </h1> <h2> Mudan&ccedil. Ex: estilo.o em propor&ccedil.html: 11 <html> <head> <title> Bem-vindo! </title> <link rel= "stylesheet" type= "text/css" href= "estilo. font-family: arial. comic saens) ou de fontes gen´ ericas (menospace. que se referem a letras em sua fonte normal na vertical. . medium. xx-large. smaller e larger.&otilde.Refere-se ` a fam´ ılia da fonte.4 Fonte Muitas das fun¸ co ˜es apresentadas no cap´ ıtulo s˜ ao bem espec´ ıficas e imposs´ ıveis de serem aplicadas pelo HTML.Pode-se escolher o tamanho da fonte usando valores num´ ericos ou nomenclaturas: x-small. Vale lembrar que a fonte escolhida dever´ a estar instalada na m´ aquina do usu´ ario. font-size . bolder e lighter ou valores num´ ericos.

oamento pessoal e realizar inova&ecirc.&atilde. font-family: arial.o fatores decisivos para o sucesso.o importa quais sejam os obst&aacute.as se expandir&atilde.o em propor&ccedil. font-size: 90%. font-style: italic } p.dos de uma inabal&aacute.o </h2> <p class="2"> "Determina&ccedil. quer transformar o mundo. font-variant: small-caps.html: <html> <head> <title> Bem-vindo! </title> <link rel= "stylesheet" type= "text/css" href= "estilo.o. } p. font-size: x-small."</p> <h2> Determina&ccedil.o em mudan&ccedil.Estas atitudes se refletir&atilde.Deste ponto em diante.-los. conseguiremos super&aacute.&atilde.css" /> </head> <body> <h1> Textos </h1> <h2> Mudan&ccedil.o.2 { font-family: sans-serif. causa algum impacto.prio interior.as positivas no seu ambiente familiar. Se estamos possu&iacute.&otilde.&atilde. N&atilde. font-style: oblique } exemplo. coragem e autoconfian&ccedil. } h2 { color: #3366FF.12 ´ CAP´ ITULO 3. Tudo o que fazemos produz efeito.vel determina&ccedil.as </h2> <p class="1"> "Se voc&ecirc. as mudan&ccedil.es cada vez maiores.es no seu pr&oacute.&otilde. experimente primeiro promover o seu aperfei&ccedil.a s&atilde.culos e as dificuldades.1 { font-family: serif. PROPRIEDADES BASICAS font-weight: bold." </p> </body> </html> .

Assume thin. Valores assumidos: dotted. border-style: outset.: .5. separa¸ ca ˜o entre textos e muitos outros recursos. border-color: blue. medium e thick (fina. bottom.border-TOP-width: medium .3. Podem ser empregadas como elemento decorativo. ridge. Ex. } p { border-top-width: 1px.Define o estilo da borda. border-color . border-style . usando como valores top. border-style: dashed. border-width . assumem v´ arias fun¸ c˜ oes no desenvolvimento da p´ agina. outset. dashed. groove.border-LEFT-style: groove Ex: estilo.border-BOTTOM-color: red . border-color: red. } . m´ edia e grossa respectivamente) como valores. solid. } h2 { border-width: 20px. border-style: dotted. Assume "cor" ou "#AAAAAA" como valores.css: h1 { border-width: thick.Define a cor da borda.5 Borda As bordas s˜ ao muito u ´teis pois. inset. dependendo da criatividade do programador. left e right.Define a espessura da borda. BORDA 13 3. double. Um recurso muito importante presente nas bordas ´ e a possibilidade de setar tais fun¸ c˜ oes especificando o lado da borda a empregar a fun¸ ca ˜o. border-color: gold.

left.prio interior.es cada vez maiores.Deste ponto em diante. margin-left . que possuem quatro lados: right. } .&otilde.as se expandir&atilde.6 Margin e Padding As margens definem o espa¸ camento entre os elementos HTML. Tudo o que fazemos produz efeito.html: ´ CAP´ ITULO 3. experimente primeiro promover o seu aperfei&ccedil.as </h2> <p> "Se voc&ecirc. as mudan&ccedil.Define a margem esquerda. quer transformar o mundo. bottom. Os valores assumidos pelas margens s˜ ao em pixels. causa algum impacto. margin-top .oamento pessoal e realizar inova&ecirc. left. right. margin-bottom .css" /> </head> <body> <h1> Bordas CSS </h1> <h2> Mudan&ccedil.Define a margem direita.14 exemplo. margin-right: VALORpx. margin-bottom: VALORpx.es no seu pr&oacute.Define a margem superior. As margens para um documento s&atilde.&otilde.o em propor&ccedil.Define a margem inferior.as positivas no seu ambiente familiar. margin . PROPRIEDADES BASICAS <html> <head> <title> Bordas! </title> <link rel="stylesheet" type="text/css" href="estilo.o em mudan&ccedil.Estas atitudes se refletir&atilde. margin-left: VALORpx.Define os valores das quatro margens na seguinte ordem: top. margin-right .o definidas da seguinte maneira: body { margin-top: VALORpx."</p> </body> </html> 3. top e bottom e tamb´ em de elementos de par´ agrafo ou cabe¸ calhos (Ver dica abaixo).

7 Lista Esta propriedade cria uma lista de elementos definidos pelo programador.css: body { margin-top: 100px.html.css" /> </head> <body> <p>Testando.html.: estilo.css as margens do elemento p (Ex. list-style-type . circle. Valor: url(”caminho/para/o/arquivo”) list-style-position . Valores: disc. ..Define todas as propriedades acima em uma u ´nica linha na seguinte ordem: image. margin-left: 70px..Posiciona o marcador da lista. Depois coloque no estilo. decimal.</p> </body> </html> 15 Dica: Para testar crie um arquivo css definindo nele as margens do documento (Ex. margin-right: 40px. }) e o texto criado dentro de <p> no arquivo teste. upper-alpha.. Valores: outside e inside. margin-bottom: 10px. usando como marcadores imagens ou n´ umeros..: p { . list-style-image .Define uma imagem como marcador da lista. upper-roman. } p { margin: 5px 50px 5px 50px. 3. list-style . square.html: <html> <head> <title> Margin e Padding </title> <link rel="stylesheet" type="text/css" href="estilo.:body { .. salve e veja a diferen¸ ca.7. position e type. lower-roman. adicionando um texto em <body> no arquivo html e veja o resultado. }) e um arquivo teste. LISTA Ex.Define o tipo de marcador da lista. } exemplo.3.. lower-alpha.

PROPRIEDADES BASICAS Ex. } exemplo.square { list-style-type: square.css" /> </head> <body> <ul class="inside"> <li> Item 1</li> <li> Item 2</li> </ul> <ul class="outside"> <li> Item 1</li> <li> Item 2</li> </ul> <ul class="square"> <li> Item 1</li> <li> Item 2</li> </ul> .uproman { list-style-type: upper-roman.16 ´ CAP´ ITULO 3.css: ul. } ul. } ul.inside { list-style-position: inside.outside { list-style-position: outside. } ul.: estilo.html: <html> <head> <title> Listas </title> <link rel="stylesheet" type="text/css" href="estilo.

sep . caption-side . border-spacing .A propriedade border-collapse define se as bordas em uma tabela v˜ ao se fundir ou v˜ ao ser separadas.coll { border-collapse: collapse } table.: estilo. especificando em pixels os espa¸ camentos.two { table-layout: fixed } table.) border-collapse .8.3. Valores em px. Pode-se usar border-spacing HORIZONTALpx VERTICALpx. Ex. (Acompanhar no exemplo ao final deste ´ ıtem. Valores: collapse e separate. tal como uma legenda de uma imagem. Ex. Valores: automatic ou fixed. bottom. TABELA 17 <ul class="uproman"> <li> Item 1</li> <li> Item 2</li> </ul> </body> </html> 3.Nos permite indicar se queremos que a tabela tenha o seu fluxo com o tamanho fixo ou o seu tamanho acompanhe o fluxo do conte´ udo. Valores: top. left e right.Pode ser usado para oferecer uma breve descri¸ ca ˜o de uma tabela.Define um espa¸ camento (horizontal e vertical) entre os elementos da tabela.one { table-layout: automatic } table.: border-spacing: 50px.8 Tabela As propriedades de tabelas s˜ ao as seguintes: table-layout .css table.

html: <html> <head> <title> Tabelas </title> <link rel="stylesheet" type="text/css" href="estilo.18 ´ CAP´ ITULO 3. border-spacing: 20px } table. border-spacing: 40px 60px } caption { caption-side:left } exemplo.sp2 { border-collapse: separate. PROPRIEDADES BASICAS { border-collapse: separate } table.sp1 { border-collapse: separate.css" /> </head> <body> <table class="one" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br> <table class="two" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <br> <table class="coll" border="1"> <tr> .

TABELA 19 <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <br /> <table class="sep" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <br> <table class="sp1" border="1"> <tr> <td>Peter</td> <td>Griffin</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> </tr> </table> <br> <table class="sp2" border="1"> <tr> <td>Cleveland</td> <td>Brown</td> </tr> <tr> <td>Glenn</td> <td>Quagmire</td> </tr> </table> .3.8.

PROPRIEDADES BASICAS <br> <table border="1"> <caption>This is a caption</caption> <tr> <td>Cleveland</td> <td>Brown</td> </tr> <tr> <td>Glenn</td> <td>Quagmire</td> </tr> </table> </body> </html> .20 ´ CAP´ ITULO 3.

com/css [2] CSS para Webdesign. http://pt-br. http://www.w3schools.net/tutorials/css [4] Zen Garden: A Beleza em Design CSS.csszengarden. http://www.maujor. http://www.com/tutorial/sintaxetut.com/ 21 .Referˆ encias Bibliogr´ aficas [1] W3 schools CSS Tutorial.php [3] HTML Tutoriais.html.

Sign up to vote on this title
UsefulNot useful