-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Curso de Introducao ao CSS
Grupo PET-Tele
Universidade Federal Fluminense
13 de dezembro de 2012
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
1 Introducao
2 Formatacao e estilosCores e fundosFontes e textosLinks
3 Identificando e agrupando elementos
4 Box modelFormatando o Boxmodel
5 Posicionamento
6 Web Standards
7 Sites recomendados
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Informacoes principais
Quando o HTML surgiu, seu objetivo era especialmente
aestruturacao de informacoes na pagina. Com a expansao da web sefez
necessaria uma melhor apresentacao desse conteudo atraves
deformatacoes. Nesse momento foram desenvolvidas algumas
tags(apresentadas no curso anterior) que caracterizavam os
textos.Posteriormente, para melhor formatar esse documento,
foidesenvolvido o CSS.
CSS:Cascading Style Sheets - Folhas de estilo em cascata
Para a utilizacao do CSS e necessario conhecimento em HTML.
O surgimento do CSS tem como objetivo a estilizacao
dapagina.
Serve para o controle do layout de varios documentos a partirde
uma simples folhas de estilos.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Utilizacao do CSS
O CSS pode ser aplicado a um documento html de tres
formasdiferentes :
Metodo 1:In-lineUtilizando o atributo style do HTML e possvel
caracterizar apagina:
Metodo 2: InternoCria-se uma tag style dentro da tag head no
documento html edentro desta colocam-se os codigos css:
body {background-color: red;}
Metodo 3: ExternoCria-se um link dentro do documento html que
chame odocumento css. Esse link tambem deve ser colocado dentro
datag head.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Atencao
Dica
Recomenda-se a utilizacao do terceiro metodo, pois atravesdele
pode-se mudar a estilizacao de toda uma pagina semmudar o documento
html e tambem utilizar a mesma folha deestilos para varios
documentos html.
Criando o documento css:
- Tambem utilizaremos um editor de textos onde seraocolocados os
codigos css.
- Salve o documento da forma: nome do documento.css
- Nao esqueca de colocar na tag link do documento html
odiretorio certo para o documento css.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Regra CSS e sintaxe
Regra CSS : Define como sera aplicado o estilo a um ou
maiselementos HTML.seletor{propriedade:valor}
Seletor: E o elemento HTML identificado por sua tag, poruma
classe ou por uma id.
Propriedade : E o atributo do elemento HTML ao qualsera aplicada
a regra.
Valor: E a caracterstica especfica a ser assumida
pelapropriedade.
Dica
Usar sempre ponto e vrgula apos cada regra para
umapropriedade.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Exemplo:
Criando um documento de estilizacao basico em
CSS:body{background-color: #FFCCFF;}h3 {font-family: Comic Sans
MS;}p {text-align: right;color: #000000;}Como se pode observar nao
e necessario um codigo de iniciacaonem nada. Simplesmente se coloca
as formatacoes em css.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Cores
Formatacao e estilos:
Cores:
Imagine que desejamos que todos os Cabecalhos principaistenham a
cor vermelha e que todos os rodapes sejam azuis.Os elementos que
marcam essas caractersticas em html saorespectivamente as tags e
.Em CSS, para formatar isto temos a propriedade color:
h1{color:red}h6{color:blue}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Cores
As cores podem ser especificadas de tres formas diferentes:
Codigo rgb: rgb(255,255,0)
Codigo hexadecimal : #000000
Nome da cor: red, green, blue...
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fundos
Fundos:
Propriedades que mudam o plano de fundo:
background-colorE a propriedade utilizada para dar cor ao plano
de fundo.Podemos utiliza-la para tags como body e h1-h6.Ex.:body
{background-color: #FFCC66;}h1 {color: #990000; background-color:
#FC9804;}background-imageE utilizada para definir a imagem de
fundo. Normalmente estapropriedade e utilizada na tag body.Ex.:body
{background-color: #FFCC66;background-image:
url(imagens/fundo.jpg); }
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fundos
background-repeatEla controla o comportamento da imagem de
fundo.Podemos atribuir varios valores para essa propriedade:
- repeat-x : Imagem se repete na horizontal.- repeat-y : Imagem
se repete na vertical.- repeat : Imagem se repete tanto na vertical
quanto na
horizontal.- no-repeat: A imagem nao se repete.
Ex.:body {background-color: #FFCC66;background-image:
url(meufundo.png);background-repeat: no-repeat;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fundos
background-attachmentDefine se a imagem e fixa ou se ira rolar
junto com oelemento que a contem.
- scroll: A imagem rola com a pagina.- fixed : A imagem e
fixa.
background-positionAltera a posicao padrao da imagem e a coloca
emqualquer lugar na tela.Essa propriedade pode possuir osseguintes
valores:
- 2cm 2cm : Colocar as medidas em centmetros.- top right :
Coloca a imagem no canto superior da pagina.- 50% 25% : Coloca a
imagem centrada na horizontal e
25% abaixo da pagina.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fontes
Para formatar os textos escritos no documento html utilizamosas
seguintes propriedades CSS:
font-familyE utilizada para definir uma lista de fontes e
suasprioridade para apresentacao de um elemento da pagina.Seus
valores podem ser definidos por:
- Nome da famlia de fontes(nome da fonte): verdana,arial,
etc.
- Nome da famlia generica : serif, sans-serif, cursive.
Ex.: h1 {font-family: arial, verdana, sans-serif;}font-style
- normal : Deixa a fonte sem nenhuma caracterstica a mais.-
italic : Coloca a fonte em italico.- oblique: Coloca a fonte
oblqua.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fontes
Font-variantModifica as letras em caixa-alta.
- Normal : Fonte normal.- small-caps: Transforma em maiusculas
de menor altura.
Font-weight
- Normal : Fonte normal.- bold : Fonte em negrito.
Font-sizeModifica o tamanho da fonte.
- xx-small ou x-small ou small.- medium .- xx-large ou x-large
ou large.- px, pt, cm, em : medidas conhecidas pelo CSS.- %.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Textos
Da mesma forma que e possvel caracterizar as cores e
fundospodemos formatar o texto da pagina. Para isto devem
serutilizados as seguintes propriedades:
Text-ident : Permite aplicar um recuo a primeira linha deum
paragrafo.Ex.: p {text-indent: 30px;}Text-align : Se refere ao
alinhamento do texto em relacaoa pagina.
- left : Coloca o texto do lado esquerdo.- right: Coloca o texto
do lado direito.- centred: Coloca o texto no centro.- justify:
Extende o texto contido em uma linha de uma
margem a outra.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Textos
Text-decoration: Permite adicionar efeitos oudecoracoes.
- underline: Sublinha o texto.- overline : Corta o texto com uma
linha.- line-through: Coloca uma linha sobre o texto.
Letter-spacing: Controla o espacamento entre oscaracteres de um
texto.
Text-transform: Controla a capitalizacao (tornarmaiuscula) do
texto.
- capitalize: Primeira letra de cada palavra se
tornamaiuscula.
- uppercase: Converte todas as letras em maiusculas.- lowercase:
Converte todas as letras em minusculas.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Links
E possvel aplicar as mesmas formatacoes para links. Adiferenca e
que podemos fazer isto de maneira diferenciadapara o estado do
link: ativo, visitado, nao visitado.Para isto utilizamos
pseudo-classes.Permite estilizar levando em conta condicoes
diferentes oueventos para definir uma propriedade de estilos para
uma taghtml.
Links nao visitados:Utiliza-se a pseudo-classe link.Ex.:
a:link{color:blue;}Links visitados:Utiliza-se a pseudo-classe
visited.Ex.: a:visited{color:blue;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Links
Links ativos:Utiliza-se a pseudo-classe active.Ex.:
a:active{color:red;}Pseudo-classe hover.Caracteriza o link quando
passamos o mouse sobre o link.Ex.: a:hover{color:orange;
font-style:italic;}Link sem sublinhadoEx.: a{ text-decoration:
none; }
Dica
As formatacoes utilizadas (color, letter-spacing,
font-weight,...) podem serutilizadas nas pseudo-classes.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Class e Id
Muitas vezes podemos ter varios cabecalhos principais e um
emespecial precisa de um tratamento diferente em CSS. Ou um
certogrupo de links merece um tratamento diferente dos outros.
Para diferencia-los ou mesmo em outras situacoes onde e
preciso
separar textos que usam a mesma tag e possvel utilizar os
seguintes
atributos.
ClassPodemos identificar um certo grupo dando a ele o nomede uma
classe.Ex.:BrasilArgentinaBrasliaBuenos AiresE o CSS teria
especificamente para cada
classe:h1.pais{color:blue;}h1.capital{color:red;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Class e Id
Qualquer cabecalho com a classe pais tera a cor azul e o que
tiver a
classe capital sera da cor vermelha.
IdPara dar uma identificacao a um unico
elemento.Ex.:EngenhariaEnfermagemArquiteturaE o CSS teria para um
id:#curso1{font-weight:bold;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
span e div
As vezes, torna-se necessario, para a organizacao do documento,
criargrupos ou selecionar elementos. Para fazer isto utilizamos
asseguintes tag no HTML:
Ele nao adiciona nenhuma semantica ao documento. Mas,atraves
dele, e possvel adicionar efeitos visuais a um texto
peloCSS.Ex.:Documento HTML:
Dormir cedo e acordar cedo faz o homemsaudavel,ricoe sabio.
Na folha de estilos:span.benefit {color:red;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
span e div
Enquanto o span e utilizado dentro de um bloco o div e usadopara
agrupar um ou mais elementos de um bloco.Ex.:Documento HTML:
Guns N RosesRed Hot Chili Peppers
Maria RitaAdriana Calcanhoto
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
span e div
Na folha de estilos:#rock {background:blue;}#mpb
{background:red;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Box model
O Box model em CSS:
- E atraves deles que se escreve as caixas geradas
peloselementos html.
- Pode-se tambem detalhar ajustes de margens, bordas,padding e
conteudo para cada elemento.
Esquematizacao do box model:
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Box model
Exemplo: Article 1:
All human beings are born freeand equal in dignity and
rights.They are endowed with reason and conscienceand should act
towards one another in a
spirit of brotherhood
Para os dois elementos (
e ) temos o box model:
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Margin
Margin:E a distancia entre os lados de elementos vizinhos, ou
seja,as bordas de um documento.Ex.: Bordas do Body:body {
margin-top: 100px;margin-right: 40px;margin-bottom:
10px;margin-left: 70px;}De modo geral:body { margin: 100px 40px
10px 70px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Box model
A margem e a distancia que separa uma caixa da outra.
A borda e a linha decorativa em volta da caixa.
A distancia entre a borda e o conteudo,e opreenchimento
(padding).
Por fim, mas principal, temos o conteudo que e o que vaiser
exibido.
Sabendo o que e cada caixa, e possvel administrar as
medidasnecessarias.Todas essas outras boxes seguem o mesmo padrao
do marginpara definicao nas medidas.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Bordas
E possivel caracterizar as bordas do Box-model:
Border-widthDefine a expessura da borda e possui como
valores:
- thin- medium- thick
Ela tambem pode ser definida num valor numerico empixels.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Bordas
Border-colorDefine a cor das bordas
Border-styleDefine o tipo de borda e tem como alguns
valores:
- dotted- solid- doble- dashed
Tente fazer um cabecalho que contanha uma borda de cada cor.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Float
A seguir, vamos apresentar uma propriedade que pode facilitar
oposicionamento de imagens juntamente a textos: O float.Atraves
dele um elemento pode ser flutuado para a direita ouesquerda, ou
seja, desloca a box model e seu conteudo.Para isso, devera ser
feito no documento HTML um agrupamento(div).Ex.:Documento HTML:
causas naturales et antecedentes,idciro etiam nostrarum
voluntatum...
Folha de estilos:#picture {float:left;width: 100px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Float
Dessa forma, o texto descrito em HTML colocado logo depoisde
voce ter usado a tag da imagem se ajusta na tela ao ladodesta.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Posicionamento
O posicionamento em CSS diz a exata posicao de um elementoem uma
pagina.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Posicionamento absoluto
Posicionamento absolutoUm elemento posicionado absolutamente nao
cria nenhumespao vazio apos ser selecionado.Suas propriedades sao
top, left, bottom, right.Ex.:#box1{position:absolute;top:
50px;left: 50px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Posicionamento relativo
Posicionamento relativoO posicionamento para a posicao relativa
e calculada combase na posicao original do elemento no
documento.Nessa forma, o elemento ocupa um espaco vazio apos
serposicionado.Suas propriedades sao as mesmas do
posicionamentoabsoluto.Ex.:#dog1 {position:relative;left:
350px;bottom: 150px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Exerccio
Criar um documento CSS que permita produzir a
seguintepagina:
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Web Standards
World Wide Web Consortium (W3C)O Consorcio World Wide Web (W3C)
e uma comunidadeinternacional que desenvolve padroes com o objetivo
degarantir o crescimento da web. Missao do W3C: conduzira Web ao
seu potencial maximo.
ValidacaoO W3C desenvolveu um validador que faz uma
verificacaoda folha de estilos e retorna um relatorio com os
eventuaiserros e avisos caso sua CSS nao valide.A validacao pode
ser feita no seguinte site:http://jigsaw.w3.org/css-validator/
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Recomendacoes
Recomendamos os sites listados abaixo para consulta e
maioresaprendizados:
http://www.maujor.com/index.php
http://pt-br.html.net/tutorials/css/
http://www.w3schools.com/css/
IntroduoFormatao e estilosCores e fundosFontes e textosLinks
Identificando e agrupando elementosBox modelFormatando o
Boxmodel
PosicionamentoWeb StandardsSites recomendados
