0% acharam este documento útil (0 voto)

8 visualizações26 páginas

Css 1 Intro

O documento aborda os conceitos básicos de CSS no desenvolvimento web, destacando a separação entre conteúdo (XHTML), apresentação (CSS) e comportamento (JavaScript). Ele explica como o CSS permite a definição de estilos para elementos XHTML, incluindo regras, propriedades e formas de inserção, além de discutir a importância de folhas de estilo externas para manutenção e consistência. Também são abordados seletores ID e CLASS, bem como a validação de CSS pelo W3C.

Enviado por

nathtvpb

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

8 visualizações26 páginas

Css 1 Intro

Enviado por

nathtvpb

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 26

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 -->

<!– Começo da atribuição de estilos -->

• 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 = "styles.css" />
...
</head>
EXERCÍCIO
Salve a declaração de estilos abaixo em um arquivo externo,
com algum nome com extensão .css (por exemplo, style.css).
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 }

 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

p.center
{
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: http://jigsaw.w3/css-validator

 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