CSS Ana Cuper [email protected]
Porque usar css?
• Cascading Style Sheets (css) sobrepõe as características padrões dos browsers
• São usadas para melhorar e controlar a aparência de uma página web.
Porque usar css?
• Permite que o conteúdo e o layout de uma página seja separado do design visual e os elementos de
apresentação.
• Esta separação permite que o website inteiro, ou páginas específicas, sejam modificados através do uso de uma página css.
Porque usar css?
• Através do uso de css o web
designer tem grande flexibilidade e controle para criar e manter um
website.
• Css também pode proporcionar a cada página uma aparência e um
“sentimento” que seja consistente em todo o website.
Como é o CSS?
Sites de apoio para CSS
• Em inglês:
• http://www.microsoft.com/typography/css/gallery/
• http://hotwired.lycos.com/webmonkey/reference/styl esheet_guide/
• http://www.alistapart.com/topics/css/
• Em português:
• http://www.ead.unicamp.br/minicurso/css/texto/tabel a_conteudo.html
Web browser e css
• Os vários Web browsers interpretam css de diferentes maneiras ou às
vezes, não interpretam nada.
• As páginas devem ser testadas no ambiente escolhido para assegurar que os resultados desejados são alcançados.
CSS e browsers
•Para a listagem completa sobre o suporte que os browsers oferecem ao css visite o site:
http://www.westciv.com/style_master/academy/b rowser_support/index.html
Legenda:
Exemplo do site:
Tipos de estilos
• Os estilos são aplicados aos
elementos por diversas formas:
– inline, na mesma linha dentro de uma tag html
– embebidos nas páginas – entre a tag
<head> e </head>
– Externos – uso de uma página .css
Estilo inline
• Este estilo é definido dentro de uma tag HTML.
• Ele afeta somente a tag em que ele está definido.
• Mais usado em aplicações DHTML
(Dynamic Hipertext Markup Language), que usam JavaScript e posicionamento dinâmico de elementos html.
Exemplo de Estilo Inline
<p style="font-size:10pt;color:red;">Este parágrafo foi definido com tamanho de fonte de 10pts e cor de texto vermelho.
</p>
Este parágrafo foi definido com tamanho de fonte de 10pts e cor de texto
vermelho.
• Visualização:
• Código:
Exemplo de Estilo Inline
<h2 style=“color:green”>Título em Verde</h2>
Título em Verde
• Visualização:
• Código:
Sintaxe de um estilo Inline
<seletor style=“atributo1:valor1;
atributo2:valor2”> qualquer elemento html
</seletor>
Estilo Embebido
• É definido na seção head de um documento html
• Este estilo só irá afetar as tags html que estão na página em que ele foi inserido.
Exemplo de um Estilo Embebido
<HEAD>
<style type="text/css">
<!--
p {font: 12pt "Currier, Times";
color: black}
h1 {font: 15px “Arial,Verdana";
color: #00CC00}
-- >
</style>
</HEAD>
Sintaxe do Estilo Embebido
<style type=“link_type”>
<!--
seletor {atributo1:valor1;
atributo2:valor2}
-->
</style>
CSS Externa – localização
<head>
<title>Ecoturismo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<link href="css/style.css" rel="stylesheet"
type="text/css“ />
</head>
Exemplo de um arquivo css:
body {font-family: Arial, Helvetica, sans- serif;
background-color: #FFFFFF;
background-image: url(paper.gif)}
a {font-size: 0.8em;
font-weight: bold;
color: #006699;
text-decoration: none}
ol {list-style-type: decimal}
ul {list-style-type: square}
Sintaxe para um arquivo css:
seletor {
attribute1: value1;
attribute2: value2;
}
<link href="url" rel="relacao" type="link“ />
• href é a url do arquivo css
• rel é a relação entre o documento
anexado e a página e “relacao” poderia ser por exemplo, “stylesheet”.
• type é a linguagem usada no documento lincado e “link” poderia ser “text/css”.
Sintaxe de um link tag
Precedências
• É importante observar a ordem de
precedência entre estes estilos, ela vai determinar qual estilo será o adotado pelo browser, assim o estilo externo é sobreposto pelo estilo embebido que por sua vez é sobreposto pelo inline.
• Em suma, se dois ou mais estilos
estão brigando por um elemento html, o estilo mais próximo ganha.
Precedências
<head>
<title>Ecoturismo</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<link href="css/style.css" rel="stylesheet"
type="text/css“ />
<style type="text/css">
<!--
p {color: #0033CC;
background-color: #FFCC99 } -->
</style>
</head>
Um tag <link> deve preceder à um <style> quando ambos estão presentes na página
Agrupamento de seletores
• Se você deseja fazer mudanças no
estilo de vários elementos html e estas mudanças são iguais, é possível
agrupar seletores.
• Resulta em menor codificação e conseqüente mais rapidez de
download.
Agrupamento de seletores
• Por exemplo:
p {color:#FF6666; font-family:verdana}
h3 {color:#FF6666; font-family:verdana}
dl {color:#FF6666; font-family:verdana}
• Poderiam ser agrupados como a seguir
(note que os seletores devem ser separados por uma vírgula):
p, h3, dl {color:#FF6666;
font-family:verdana}
Impedir sobreposição de valores
• Para que você defina que um valor não seja sobreposto de nenhuma maneira você deve aplicar !important após o valor do estilo.
• Ex:
h2 { color: #000000 !important; }
Neste exemplo todo h2 será de cor preta, mesmo que existir um estilo inline que defina outra coisa.
Atividade
Abra a página index.html
• Abra a página index.html
• Insira um link para uma página de estilo, antes da tag </head>, da seguinte maneira:
<link href=“imagens/estilo.css" rel="stylesheet" type="text/css“ />
Abra o editor de texto
• Comece um novo documento.
• Nele escolha a cor de fundo que você quer nas páginas.
• Para lista das cores recomendadas para web visite:
• http://www.webmonkey.com/webmonkey/ref erence/color_codes/
body {background-color: #E3FFFF}
Salve a página
• Salve a página dentro do diretório
“imagens” (que está na raiz do site) como “estilo.css”
• Teste e veja se a cor de fundo te agrada, senão, troque.
Definindo font-family
• Vamos decidir que tipo de fonte o browser irá mostrar o texto
• Para isto precisamos saber quais fontes são seguras de usar.
TrueType fonts (para Mac e Windows)
• Andale Mono
• Arial
• Comic Sans
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana
http://www.microsoft.com/typography/WhatIsTrueType.mspx
Font-family
• Para isto defina 3 tipos de fontes diferentes.
Ex.
• Os browsers vão procurar primeiro a
Verdana, se não tiver, procuram a Arial e ainda assim, se não encontrar, procuram a Helvetica. Caso nenhuma delas tiver, a fonte padrão do browser será exibida.
p { font-family: Verdana, Arial, Helvetica;
}
Font-size
• Ainda definindo o “p” inclua o tamanho desejado para fonte.
• Tamanhos comumente usados são:
– pt (points) – problemas: Mac Os usa 72ppi
(pixels per inch) e Windows 96ppi de resolução de tela. Ou seja, no Mac, as fontes ficam sempre menores.
– px (píxels) – o tamanho fica sempre fixo em relação à outros elementos.
– em – medida relativa, proporcional à preferência dos usuários.
– % - porcentagem em relação ao texto regular p { font-family: Verdana, Arial, Helvetica;
font-size: 11pt;
}
Color
• Para especificar a cor do texto use:
• Escolha qualquer valor hexadecimal para a cor.
p { font-family: Verdana, Arial, Helvetica;
font-size: 11pt;
color:#FFFFCC;
}
Tipo de marcador para listas
• Defina um dos valores mais comuns para exibir a lista não ordenada:
• Valores:
– disc – circle – square
li { list-style-type: circle;
}
Títulos
• Especifique a aparência dos títulos.
• “font-weight” especifica a largura, ou negrito, de um tipo. Valores comuns:
– normal – bold, – bolder, – lighter
h2 { font-family: Impact, Georgia, Helvetica;
font-size: 14pt;
font-weight: bolder;
}
Definindo a aparência de um link
• Valores comuns para text-decoration:
– underline (padrão para “a”) – none
– overline
– line-through
a { font-family: Arial, Verdana, Helvetica;
font-size: 14pt;
font-weight: bold;
text-decoration: none;
}
Aparência de um link
• Escolha uma cor diferente da cor do texto para destacar os links em sua página.
a:link { color: #330066;
}
Aparência de um link já visitado
• Escolha uma cor diferente para indicar um link já visitado.
• Útil para que o usuário saiba por onde
“já andou”.
a:visited { color: #CCCCCC;
}
Efeito “mouse over”
• Escolha uma cor para “trocar” quando o mouse passar em cima de um link.
• Útil para chamar a atenção do usuário para o link.
a:hover { color: #339999;
}
O que fazer agora?
• Salve sua página “estilo.css”.
• Faça upload dela e da index.html
• Insira um link para a página “estilo.css”
em cada página de seu site.
• Obs.: lembre-se dos caminhos para o link. Em algumas páginas será
necessário acrescentar ../ antes de
“imagens/estilo.css”, para que suba 1 nível na estrutura do site.
Obrigada pela atenção!
Quando terminar, faça upload e mande e-mail avisando.
