INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA
CURSO TÉCNICO INTEGRADO EM INFORMÁTICA
CAMPUS CURRAIS NOVOS
Desenvolvimento Web
CSS – Conceitos básicos – parte I
Professor: Bruno Gomes
2011
INTRODUÇÃO
O desenvolvimento Web para o lado cliente é dividido
em 3 partes
Conteúdo
Apresentação
Comportamento
Conteúdo (XHTML)
Define textos (cabeçalhos, parágrafos), imagens, links,
etc.
Apresentação (CSS)
Define como o conteúdo será apresentado - tamanho das
fontes, cores, espaçamento, margens, etc.
Comportamento (JavaScript)
Acrescenta dinamismo à página do lado cliente, pode ser
utilizado em validação, etc.
INTRODUÇÃO
A intenção original de HTML/XHTML não era
especificar apresentação da página, apenas
conteúdo
Tags como <font> e atributos como bgcolor, por
exemplo, tornaram-se inconvenientes
Desenvolvedor tem que modificá-los a cada página
Processo dispendioso
Para resolver problema de “mistura” de código de
conteúdo com código de apresentação criou-se o
CSS
Toda a apresentação pode ser movida para um
arquivo CSS separado, deixando o XHTML mais
limpo, apenas com conteúdo
CSS define como os elementos XHTML serão
apresentados
CSS – CASCADING STYLE SHEETS
Uma regra CSS é dividida em:
Seletor
Uma ou mais declarações para o seletor
Seletor normalmente é a tag XHTML a qual
será aplicada o estilo
Declaração é formada por propriedades e seus
valores para aquela tag
Propriedade – atributo de estilo que se quer mudar
Valor – valor da propriedade
CSS - REGRAS
Regra CSS:
seletor {p1 : v1; p2 : v2; ...; pn : vn;}
Exemplos
body {backgroud-color : blue;}
p {color : red; text-align : center;}
CSS - REGRAS
Propriedade termina com ponto-e-vírgula (;)
Comentários podem ser adicionados com /* */
Para melhor visualização, cada propriedade pode
ser colocada em uma linha separada
Exemplo:
/* Estilos definidos para a tag de parágrafo*/
p
{
text-align:center;
color:black;
font-family:arial;
}
CSS – INSERÇÃO NO DOCUMENTO
Três forma de se vincular folhas de estilo
1. Inline
2. Na seção head
3. Arquivo CSS externo ao documento
CSS – INLINE
Estilos inline são aplicado a um elemento (tag) individual
Declaração feita no atributo style da tag
<p style = "font-size:20pt;">Texto com estilo
<em>font-size</em> aplicado, deixando o texto com tamanho de 20pt.
</p>
<p style = "font-size: 20pt; color: #6666ff;”>
Texto com tamanho de fonte em 20pt e cor light blue
</p>
CSS DEFINIDO DIRETAMENTE NO HEAD
Folha de estilo definida diretamente na seção
head do documento
Exemplo:
<head>
<title>Folhas de estilo no HEAD</title>
<!– Começo da atribuição de estilos -->
<style type = "text/css">
em { font-weight: bold;
color: black }
h1 { font-family: tahoma, helvetica, sans-serif; }
p { font-size: 12pt;
font-family: arial, sans-serif; }
</style>
</head>
EXEMPLO
<head>
<title>Folhas de estilo no HEAD</title>
<!– Começo da atribuição de estilos -->
<style type = "text/css">
em { font-weight: bold;
color: black; }
h1 { font-family: tahoma, helvetica, sans-serif;}
p { font-size: 12pt;
font-family: arial, sans-serif; }
</style>
</head>
• Estilos aplicados às tags em, h1 e p
• Estilos são incorporados no head e aplicados aos elementos
referenciados no estilo por toda a página
•Utiliza-se a tag style com o atributo type contendo o texto
“text/css”
PROPRIEDADES UTILIZADAS NO EXEMPLO
background-color
Cor de fundo da página
color
Cor do texto
font-family
Nome da fonte
Pode ser especificado mais de um nome de fonte ou
categoria genérica de fontes
para o caso do navegador não ser capaz de exibir uma
determinada fonte
Caso uma fonte não possa ser exibida, navegador tenta a
próxima na lista
Exemplos de categorias de fontes:
sans-serif (helvetica, verdana), serif (times new roman,
georgia), monospace (courier, fixedsys)
PROPRIEDADES UTILIZADAS NO EXEMPLO
font-size
Tamanho da fonte
Pode ser em pontos, ou de forma relativa
Tamanhos relativos
xx-small, x-small, small, smaller, medium, large,
larger, x-large, xx-large
Interessante quando não se sabe as medidas
específicas da exibição para cada cliente
Exemplo: Em uma tela de um celular, se você especificar o
tamanho em pontos, por exemplo, 20pt, pode ser que fique
impossível de se ler o texto.
Normalmente, por estas questões de compatibilidade,
é preferível utilizar tamanhos relativos
EXERCÍCIOS
Defina os estilos especificados na seção head do
exemplo anterior e utilize-os no texto abaixo (fonte:
Infoexame, 17/04/2010):
NASA começa vôos com jatos robóticos
Um dos jatos de pesquisa mais novos da NASA voou sobre o
Pacífico na terça-feira em uma missão de 24 horas para estudar a
atmosfera da Terra.
O piloto permaneceu sentado em uma cadeira, em um
compartimento sem janelas, no deserto de Mojave, monitorando o
vôo autônomo do Global Hawk através de uma série de telas de
computador.
Os Global Hawks foram projetados para atuação em grandes
altitudes, durante muito tempo e em missões inteligentes da Força
Aérea, que entregou à NASA três versões durante o projeto de
desenvolvimento.
FOLHAS DE ESTILO EXTERNA
Estilos são definidos em um arquivo separado e
incorporados à página através da tag link
Estilos podem ser utilizados para fornecer uma
aparência uniforme a todo o site
Manutenção é facilitada
É preciso apenas modificar um arquivo para que o
todas as páginas que incluíram a CSS externa sejam
modificadas
Esse estilo de inclusão é preferível ao demais,
pois facilita a manutenção e diminui a repetição
de código
VINCULANDO CSS EXTERNA AO DOCUMENTO
Utilizamos a tag <link /> dentro da tag <head>
</head>
Atributos de link:
rel – relacionamento entre o documento atual e o que está
sendo referenciado. Nesse caso, declaramos que o
documento vinculado é uma “folha de estilo” (stylesheet)
type – tipo do documento (text/css)
href – URL para o documento que contém a folha de estilo
<head>
...
<link rel = "stylesheet" type = "text/css"
href = "[Link]" />
...
</head>
EXERCÍCIO
Salve a declaração de estilos abaixo em um arquivo externo,
com algum nome com extensão .css (por exemplo, [Link]).
Adicione a referência para este arquivo na página XHTML do
próximo slide (que você deve criar)
body { font-family: arial, helvetica, sans-serif }
a { text-decoration: none }
a:hover { text-decoration: underline
background-color:gray;
color: blue;
}
li em { font-weight: bold }
h1, em { text-decoration: underline }
ul { margin-left: 15px }
ul ul { font-size: .8em;
text-decoration: underline
margin-left: 10px
}
EXERCÍCIO
Exemplo de página a ser criada aplicando-se os estilos
definidos na CSS externa do slide anterior
ESTILOS UTILIZADOS NO EXEMPLO
text-decoration – modifica o texto de acordo com alguma propriedades
blink, overline, line-through, underline
hover – aplica o estilo quando o usuário mover o cursor do mouse sobre o
elemento
li em – elementos “em” que são descendentes de “li” (estão no escopo de
tags "li)
h1, em (h1 vígula em) – mesmas regras são aplicadas aos elementos “h1” e
“em”
body { font-family: arial, helvetica, sans-serif }
a { text-decoration: none }
a:hover { text-decoration: underline
background-color:gray;
color: blue; }
li em { font-weight: bold }
h1, em { text-decoration: underline }
ul { margin-left: 15px }
ul ul { font-size: .8em;
text-decoration: underline
margin-left: 10px }
ESTILOS CONFLITANTES
Estilos são ditos em cascata pois podem ser definidos
Pelo usuário
Pelo autor do documento
Pelo navegador
Precedência (maior para menor)
autor usuário navegador
Estilos definidos para os elementos pai e
antepassado também são herdados pelos elementos
filhos e descendentes
Hierarquia de herança
Estilos definidos para o filho tem precedência maior que
aqueles definidos para os pais. Em outras palavras,
estilos mais internos tem mais precedência que estilos
mais externos (inline na seção head externo
definido pelo browser)
CSS ID E CLASS
CSS permite que você possa especificar seus
próprios seletores
Você pode referenciá-los utilizando os atributos
ID e CLASS das tags
SELETOR ID
Especifica estilo a ser aplicado em apenas 1 elemento
Definido com um #
Referenciado no atributo “id” do elemento XHTML a
ser aplicado o estilo
EXEMPLO
Definição
#pr1
{
text-align:center;
color:red;
}
Uso
<p id="pr1">Coloque algum texto aqui </p>
SELETOR CLASS
Diferentemente de ID, o seletor CLASS permite
que o estilo seja aplicado a diversos elementos
Definido utilizando-se um ponto “.” seguido do
nome que você der ao seletor
Você também pode especificar classes específicas
para um determinado elemento
EXEMPLO
.center
{
text-align:center;
}
<h1 class="center">Cabeçalho com texto centralizado</h1>
<p class="center">Parágrafo com texto centralizado</p>
EXEMPLO
[Link]
{
text-align:center;
}
<h1 class="center">Cabeçalho com texto centralizado
heading</h1>
<p class="center">Parágrafo com texto centralizado</p>
VALIDAÇÃO
W3C também fornece validador para CSS
Endereço: [Link]
Assegura que as folhas de estilo estão descritas
com sintaxe correta
Assim como no validator para XHTML, aqui você
pode validar referenciando o CSS de três formas
Por upload dos seus estilos em arquivo,
Inserção de uma URL contendo CSS
Copiar e colar o texto do CSS
