apostila css 2009

Introdução ao CSS Telecentro Jardim Niterói

Sugestão de Aula

I ntrodução ao C S SI ntrodução ao C S SCarga Horária: 20h

Welton Matos da Cruz – Orientador ITelecentro Jardim Niterói

Introdução ao CSS – Telecentro Jardim Niterói – Welton Matos da Cruz 1


Índice

Apresentação 3Quais Software usar 3O que é CSS? 3A diferença entre CSS e HTML 3Quais os benefícios do uso de CSS 4Como funciona CSS 4A sintaxe básica das CSS 4Aplicando CSS a um documento HTML 4Método I : In-line 5Método II : Interno 5Método III : Externo 5Exercício 6Cores e fundo 7Propriedade 'Color' 7Propriedade 'background-color' 7Propriedade 'background-image' 7Fontes 8Família de fontes [font-family] 8Estilo da fonte [font-Style] 9Tamanho da fonte [font-size] 9

Alinhamento de texto [text-align] 9Pseudo Classes 9Sintaxe 10Seletores: pseudo Classe de links 10Margin e Padding 10Definindo margin de um elemento 10Definindo padding de um elemento 11Posicionando elementos 12Posicionamento absoluto 12Posicionamento relativo 12Agrupando com <div> 13Parâmetros de DIV 13Doctype 13Doctype transicional 13Atividade final 13Referências 15



ApresentaçãoFolhas de estilos em cascata Cascading Style Sheets (CSS) uma— — é

ferramenta fant stica para constru o do layout dos seus websites. Permite queá çã voc projete websites com uma t cnica completamente diferente daê é convencional e possibilita uma consider vel redu o de tempo de trabalho.á çã Conhecer CSS uma necessidade para qualquer um envolvido com o projetoé web.

Para usar CSS é necessário um conhecimento básico de HTML. Se voc n o est familiarizado com HTML, sugiro que faa o curso ê ã á ç Introdução ao HTML, tamb m oferecido pelo Programa Telecentros.é

Quais softwares usar ?

Tudo o que voc precisa de um simples e gratuito editor de texto. Ouê é tamb m o programa chamado Notepad. No Microsoft Windows, pode seré substitudo pelo Bloco de Notas.í

Um editor de texto simples o ideal para o aprendizado de HTML e deé CSS porque eles n o afetam e nem modificam o c digo que voc digita. Assimã ó ê os acertos e erros de codifica o devem-se exclusivamente a voc n o aoçã ê — ã software que voc utiliza. ê

Voc pode usar qualquer navegador parta acompanhar este tutorial. ê É aconselh vel manter o navegador sempre atualizado e utilize a ltima vers oá ú ã disponvel.í

Um navegador e um editor de textos simples é tudo o que você precisa.

O que é CSS?

CSS a abreviatura para Cascading Style Sheets. Folha de Estilos emé — Cascata

CSS uma linguagem para estilos que define o layout de documentosé HTML. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.

HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais op es e mais preciso e sofisticado.çõ é CSS suportado por todos os navegadores atuais. é

A diferença entre CSS e HTML

HTML usado para estruturar conte dos. CSS usado para formataré ú é conte dos estruturados.ú

Quando Tim Berners Lee inventou a World Wide Web, a linguagem HTML era usada somente para estruturar textos. Um autor podia marcar seus textos definindo "isto um cabe alho " ou "isto um par grafo" usando tagsé ç é á HTML tais como <h1> e <p>.

À medida que a Web ganhava popularidade, os designers come avam aç sentir a necessidade de encontrar meios de construir layout para os documentos online. Para suprir estas necessidades os fabricantes de navegadores (àquela poca a Netscape e a Microsoft) inventaram novas tagsé HTML tais como, por exemplo a tag <font> que se diferenciava das tags originais do HTML pelo fato de destinar-se à layout e n o à estrutura.— ã

Isto adicionalmente teve o efeito de disvirtuar o emprego de tags inicialmente projetadas para estrutura como por exemplo a tag <table> que passaram a ser empregadas para layout. Muitas destas novas tags para layout como a tag <blink> eram suportadas somente por um determinado tipo de



navegador. A frase "Voc precisa do navegador X para visualizar esta p gina"ê á tornou-se comum nos websites.

CSS foi inventada para solucionar esta situa o, colocando à disposi oçã çã dos web designers meios sofisticados de projetar layouts suportados por todos os navegadores. E ao mesmo tempo a separa o dos estilos de apresenta o daçã çã marca o dos conte dos torna a manuten o dos sites bem mais fcil. çã ú çã á

Quais são os benefícios do uso de CSS?

CSS uma revolu o no mundo do web design. Os benefciosé çã í concretos do uso de CSS incluem:

• controle do layout de v rios documentos a partir de uma simples folhaá de estilos;

• maior precis o no controle do layout; ã• aplica o de diferentes layouts para servir diferentes m dias;çã í• emprego de variadas, sofisticadas e avan adas t cnicas deç é

desenvolvimento.

Como funciona CSS?

Vamos desenvolver a sua primeira folha de estilos. Ver o b sico sobre oá á modelo CSS e como usar ele no HTML.

Muitas das propriedades usadas em CSS s o semelhantes àquelas do HTML.ã Assim, se voc est acostumado a usar HTML ir reconhecer muitos dosê á á c digos que usaremos.ó

A sintaxe básica das CSS

Suponha que desejamos uma cor de fundo vermelha para a p gina web:áUsando HTML podemos fazer assim:

<body bgcolor="#FF0000">

Com CSS o mesmo resultado ser obtido assim:á

body {background-color: #FF0000;}

Como voc pode notar os c digos HTML e CSS s o mais ou menosê ó ã parecidos. O exemplo acima serve tamb m para demonstrar o fundamento doé modelo CSS:

Aplicando CSS a um documento HTML

possvel aplicar CSS a um documento de tr s maneiras. Os tr sÉ í ê ê m todos de aplica o est o exemplificados a seguir. Recomendamos que vocé çã ã ê foque no terceiro m todo, ou seja o m todo externo.é é



• Método 1: In-line (o atributo style)

Uma maneira de aplicar CSS pelo uso do atributo style do HTML.é Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da p gina pode ser aplicada conforme mostrado a seguir:á

<html>

<head>

<title>Exemplo</title>

</head>

<body style="background-color: #FF0000;">

<p>Esta uma p gina com fundo vermelho</p>é á </body>

</html>

• Método 2: Interno (a tag style)

Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML. Como mostrado a seguir:

<html>

<head>

<title>Exemplo</title>

<style type="text/css">

body {background-color: #FF0000;}

</style>

</head>

<body>

<p>Esta uma p gina com fundo vermelho</p>é á

</body>

</html>

• Método 3: Externo (link para uma folha de estilos)

O m todo recomendado o de lincar para uma folha de estilosé é externa.

Uma folha de estilos externa um simples arquivo de texto com aé extens o .css. Tal como com qualquer outro tipo de arquivo voc pode colocarã ê uma folha de estilos tanto no servidor como no disco rgido.í

Vamos supor, por exemplo, que sua folha de estilos tenha sido nomeada de style.css e est localizada no diret rio style. Tal situa o est mostrada aá ó çã á seguir:

O "truque" criar um link no documento HTML (default.htm) para aé folha de estilos (style.css). O link criado em uma simples linha de c digoé ó HTML como mostrado a seguir:

<link rel="stylesheet" type="text/css" href="style/style.css" />

Notar que o caminho para a folha de estilos indicado no atributo href.é

Esta linha de c digo deve ser inserida na se o header do documentoó çã



HTML, isto , entre as tags <head> e </head>. Conforme mostrado abaixo:é

<html>

<head>

<title>Meu documento</title>

<link rel="stylesheet" type="text/css" href="style/style.css" />

</head>

<body>

.....

Este link informa ao navegador para usar o arquivo CSS na renderiza oçã e apresenta o do layout do documento HTML.çã

A coisa realmente inteligente disto que v rios documentos HTMLé á podem lincar para uma mesma folha de estilos. Em outras palavras isto significa que um simples arquivo ser capaz de controlar a apresenta o de muitosá çã documentos HTML.

Esta t cnica pode economizar uma grande quantidade de trabalho.é

Exercício Digitar o c digo a seguir no programa editor de texto escolhido:ó

<html>

<head>

<title>Meu documento</title>

<link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

<h1>Minha primeira folha de estilos</h1>

</body>

</html>

Salvar como default.htm

E em uma nova folha do editor de texto digitar o seguinte c digo:óbody {

background-color: #FF0000;

}

Salve como style.css

Salve os dois arquivos no mesmo diret rio com a extens o apropriada (".css" eó ã ".htm").

Abra default.htm no seu navegador e veja uma p gina com o fundo.áIntrodução ao CSS – Telecentro Jardim Niterói – Welton Matos da Cruz 6


Cores e fundos

Como aplicar cores de primeiro plano e cores de fundo no seu website.

Propriedade 'color'A propriedade color define a cor do primeiro plano de um elemento.

Considere, por exemplo, que desejamos que todos os cabe alhos deç primeiro nvel no documento sejam na cor vermelha. O elemento HTML queí marca tais cabe alhos o elemento <h1>. O c digo a seguir define todos osç é ó <h1> na cor vermelha.

h1 {

color: #ff0000;

}

Propriedade 'background-color'

A propriedade background-color define a cor do fundo de um elemento.

O elemento <body> cont m todo o conte do de um documentoé ú HTML. Assim, para mudar a cor de fundo da p gina, devemos aplicar a ápropriedade background-color ao elemento <body>.

Voc pode aplicar cores de fundo para outros elementos, inclusive paraê cabe alhos e textos. No exemplo abaixo foram aplicadas diferentes çcores de fundo para os elementos <body> e <h1>.

body {

background-color: #FFCC66;

}

h1 {

color: #990000;

background-color: #FC9804;

}

• Notar que foram aplicadas duas propriedades ao elemento <h1> separadas por um ponto e vírgula.

Propriedade 'background-image'A propriedade CSS background-image usada para definir uma imagemé

de fundo. Para inserir uma imagem de fundo na p gina basta aplicar aá propriedade background-image ao elemento <body> e especificar o caminho para onde est gravada a imagem.áVeja:

body {

background-color: #FFCC66;

background-image: url("fundo.jpg");

}

h1 {

color: #990000;

background-color: #FC9804;

}



Fontes

Estudaremos as fontes e como aplic-las usando CSS.á

Família de fontes [font-family]

A propriedade font-family usada para definir uma lista de fontes e suaé prioridade para apresenta o de um elemento em uma p gina. Se a primeiraçã á fonte da lista n o estiver instalada na m quina do usu rio, dever ser usada aã á á á segunda e assim por diante at ser encontrada uma fonte instalada.é

Existem dois tipos de nomes para definir fontes: nomes para famlias deí fontes e nomes para famlias gen ricas. Os dois s o explicados a seguir: í é ãnome para famlias de fontes í

Exemplos para este tipo (normalmente conhecidas como "font") s oã "Arial", "Times New Roman" ou "Tahoma".

nome para famlias gen ricas í éFamlias gen ricas s o fontes que pertencem a um grupo com apar nciaí é ã ê

uniforme. Um exemplo s o as fontes sans-serif que englobam a cole o deã çã fontes que "n o t m p ". ã ê éA diferen a est mostrada na figura:ç á

A seguir mostramos um exemplo de listagem de fontes:

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif;}

Cabe alhos <h1> ser o renderizados com fonte "Arial". Se o usu rioç ã á n o tiver a font Arial instalada, ser usada a fonte "Verdana". Se ambasã á estiverem indisponveis na m quina do usu rio ser usada uma fonte da famliaí á á á í sans-serif.

Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto necess rio para fontes com nomes compostos e que contenhamé á espa os entre os nomes.ç



Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabe alhos <h2> ser o em ç ãitlico.á

h1 {font-family: arial, verdana, sans-serif;}

h2 {font-family: "Times New Roman", serif; font-style: italic;}

Tamanho da fonte [font-size]On tamanho da fonte definido pela propriedade font-size.é

Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte. N s usaremos as unidades mais comuns eó apropriadas. Veja:

h1 {font-size: 30px;}

h2 {font-size: 12pt;}

h3 {font-size: 120%;}

p {font-size: 1em;}

Alinhamento de textos [text-align]

Textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centrer). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento usado em jornais e revistas.é

No exemplo a seguir o texto contido na c lula de cabe alho <th> é ç é

alinhado à direita e os contidos nas c lulas de dados <td> s o centrados. E, osé ã textos normais em par grafos s o justificados:á ã

th {

text-align: right;

}

td {

text-align: center;

}

p {

text-align: justify;

}

Pseudo classes

Os efeitos em links s o possveis atrav s de declara es de regras deã í é çõ estilo para as pseudo classes do elemento <a> do HTML.

As pseudo classes s o usadas em CSS, para adicionar efeitos diferentesã a alguns seletores, ou a uma inst ncia de alguns seletores.â


Sintaxe

A sintaxe das pseudo classes:

seletor:pseudo classe {propriedade: valor}

As classes em CSS podem tamb m ser usadas com pseudo classes.éseletor.class:pseudo-class {propriedade: valor}

Seletores:pseudo classe de links

S o quatro as pseudo classes dos links:ã

a:link........define o estilo do link no estado inicial;

a:visited...define o estilo do link visitado;

a:hover.....define o estilo do link quando passa-se o mouse sobre ele;

a:active....define o estilo do link ativo (o que foi "clicado").

Tipicamente, por default os links s o sublinhados e na cor azul. ã

Um efeito muito comum em p ginas web o de se retirar o sublinhadoá é do link normal, mudar a cor e fazer "aparecer" o sublinhado, quando o mouse é passado sobre ele.

Esse efeito obt m-se facilmente com CSS. A seguir a regra para esse simplesé efeito:




</style>

Margin e padding

Controle a apresenta o de um elemento definindo as propriedadesçã margin e padding.

Definindo margin de um elemento

Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin a dist ncia entre os lados deé â elementos vizinhos (ou às bordas do documento).


As CSS s o mostradas assim:ã

body {

margin-top: 100px;

margin-right: 40px;

margin-bottom: 10px;

margin-left: 70px;

}

Ou, adotando uma sintaxe mais elegante:

body {

margin: 100px 40px 10px 70px;

}

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos ent o, por exemplo, definir margens para todos osã par grafos <p>:á

body {


}

p {


}

Definindo padding de um elemento

Padding pode tamb m ser entendido como "enchimento". Isto fazé sentido, porque padding n o computado na dist ncia entre elementos,ã é â padding define simplesmente a dist ncia entre a borda e o conte do doâ ú elemento.

Ilustramos o uso de padding atrav s de um exemplo onde todos osé cabe alhos t m uma cor de fundo definida: ç ê



h1 {

background: yellow;

}

h2 {

background: orange;

}

Definindo padding para os cabe alhos, alteramos a quantidade deç enchimento existente ao redor de cada um deles:

h1 {

background: yellow;

padding: 20px 20px 20px 80px;

}

h2 {

background: orange;

padding-left:120px;

}

Posicionando elementos

Com posicionamento CSS podemos colocar um elemento em uma posi o exata na p gina. O princpio de posicionamento CSS estabelece queçã á í voc pode posicionar um elemento em qualquer lugar na tela usando umê sistema de coordenadas.

Posicionamento absoluto

Um elemento posicionado absolutamente n o cria nenhum espa o noã ç documento. Isto significa que n o deixa nenhum espa o vazio ap s serã ç ó posicionado.

Para posicionar um elemento de forma absoluta a propriedade position deve ser definida para absolute. Voc pode ent o usar as propriedades left,ê ã right, top, e bottom para definir as coordenadas e posicionar o elemento.

Neste caso, escreva o CSS desta forma:

#box1 {

position:absolute;

top: 50px;

left: 50px;

}

Posicionamento relativo

Para posicionar um elemento de forma relativa a propriedade position deve ser definida para relative. A diferen a entre os dois tipos deç posicionamento a maneira como o posicionamento calculado.é é

O posicionamento para posi o relativa calculado com base naçã é posi o original do elemento no documento. Isto significa uma movimenta oçã çã do elemento para a esquerda, para a direita, para cima ou para baixo. Assim fazendo o elemento ocupa um espa o ap s ser posicionado.ç ó

Neste caso, escreva o CSS desta forma:

#dog1 {

position:relative;

left: 350px;

bottom: 150px; }



Agrupando com <div>

<div> usado para agrupar um ou mais elementos nvel de bloco.é í

DIV na verdade n o causa nenhuma diferen a visual no c digo. Ele ã ç ó é considerado um "container", ou seja, uma esp cie de "caixa" n o visual queé ã voc pode, atrav s de script, alterar o conte do dele, alterando o c digoê é ú ó HTML dinamicamente. Ou ent o usado para aplicar um estilo (class/style) emã é todo o bloco HTML contido dentro do DIV.

Parâmetros de DIV

* ALIGN: Alinhamento do conte do do DIV (center, left, right);ú * ID: Nomeia o DIV para ser referenciado pelos scripts (Javascript por exemplo).

O CSS

#rodape a {color:#FFF; }

O HTML

<div id="rodape"> Conte do </div>ú

DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

De acordo com as especifica es do W3C, um D OCTYPE informa aoçõ validador qual a vers do HTML, ou XHTML, que est sendo usada, e deveé ã á constar no topo de cada p gina. Eles s o elementos essenciais na constru oá ã çã de uma p gina dentro dos padr es. O (x)HTML e o CSS do seu site n o será õ ã á vlido sem eles. Eles tamb m s o essenciais para uma correta renderiza o daá é ã çã sua p gina. e voc omitir o D OCTYPE, ou usar um invlido, o browser vaiá ê á renderiz-lo em "Quirks Mode\u201d, onde o Browser pensa que vocá ê escreveu seu HTML de forma antiquada e invlida. Vamos dizer que os padr esá õ do fim da d cada de 90. Mas se voc escolher um D OCTYPE vlido, ele iraé ê á funcionar em "Standards Compliance Mode", ou seja, modo de concord nciaâ com os padr es.õ

DOCTYPE Transitional

Escolhendo um D OCTYPE Transitional quer dizer que seu c digo ó é um pouco mais flexível e permite escrever algum mais antigo e para algumas peculiaridades próprias de navegadores.

Atividade final

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR">

<head>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />




* {

margin:0;

padding:0;

}

#geral {

width:800px; /** Colocando-a novamente, voltamos a ter um layout fixo! **/

border:1px solid gray;

margin:0 auto;

}

#cabecalho h1 {

background: green; /* esse design vai ficar show! :D */

padding:10px;

color:#FFF;

}

#esquerda {

width:197px;

background:purple;

padding:3px;

float:left;

}

#direita {

width:197px;

background:purple;

padding:3px;

float:right;

}

#conteudo {

background:lightgray;

margin:0 205px;

}

#rodape {

background: green; /* esse design vai ficar show! :D */

padding:10px;

color:#FFF;

text-align:center;

}

#rodape a {color:#FFF;}

</style>

</head>

<body>

<div id="geral">



<div id="cabecalho">

<h1>CABECALHO</h1>

</div>

<div id="esquerda">

<p>Esquerda</p>

</div>

<div id="direita">

<p>Direita</p>

</div>

<div id="conteudo">

<h2>Ttulo</h2>í<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed

do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<h3>Ttulo</h3>í<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed

do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div id="rodape">

<address>

<strong><a href="http://visie.com.br">Visie Padr esõ Web</a></strong><br />

Alameda dos Ubiatans, 257<br />

</address>

</div>

</div>

</body>

</html>

Referências

Esta apostila foi montada a partir de conte do retirado dos sites abaixo.ú Sites com padr es web.õ

http://www.maujor.com (fórum)

http://www.tableless.com.br (site)

http://www.bluevertigo.com.ar/ (site)

http://www.google.com ( site de busca)


http://www.google.com/

http://www.google.com/

http://www.bluevertigo.com.ar/

http://www.tableless.com.br/

http://www.maujor.com/

apostila css 2009

Documents