Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Desenvolvimento de Software para WEB
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Desenvolvimento de Software
para WEB
Fundamentos de CSS
Prof. Regis Pires Magalhães
regispires@lia.ufc.br
Efeito cascata
• É o estabelecimento de uma prioridade para
aplicação da regra de estilo ao elemento.
• Fatores para determinar a prioridade: tipo de
folha de estilo, o local físico da folha de estilo no
seu todo, o local físico da regra de estilo na folha
de estilo e a especificidade da regra de estilo.
Regra CSS
• Possui três partes:
▫ Seletor
elemento HTML identificado por sua tag, classe ou ID,
e para o qual a regra será válida
▫ Propriedade
atributo do elemento HTML ao qual será aplicada a
regra
▫ Valor
característica específica a ser assumida pela
propriedade
• Sintaxe:
▫ seletor { propriedade: valor; }
Regra CSS
• Exemplos
p {
font-size: 12px; /* ponto-e-vírgula é facultativo */
}
body {
color: #000;
background: #fff;
font-weight: bold; /*ponto-e-vírgula é facultativo */
}
Regra CSS
• Exemplos
body {
background-color: #fff;
}
h3 {
font-family: "Comic Sans MS";
/* palavra composta entre aspas duplas */
}
p {
text-align: right;
color: #f00;
}
Agrupamento de seletores
• Vários seletores podem ser agrupados em uma
regra CSS.
h1, h2, h3, h4, h5, h6 {
color: #0f0;
}
Seletor classe
• Exemplos
p.cor-um {
color:#000;
}
p.cor-dois {
color:#00f;
}
<p class ="cor-um"> este parágrafo será na cor preta.</p>
<p class ="cor-dois">este parágrafo será na cor azul.</p>
Classe aplicável a qualquer
elemento HTML
.cor-tres {
color: #00f;
}
<h2 class="cor-tres">
Este cabeçalho é na cor azul.
</h2>
<p class="cor-tres">
Este parágrafo é na cor azul.
</p>
Omite-se o nome do
elemento antes da
classe.
Seletor ID
• Deve ser único.
▫ Só pode ser aplicado a UM elemento HTML dentro
do documento.
• Sintaxe:
▫ Um nome qualquer precedido do sinal #.
#meuID {
propriedade: valor;
}
Seletores identificam tags específicas
<div class="pageFrame" id="pageHead">
<h1>
Welcome,
<span id="custName">Armando</span>
<img src="welcome.jpg" id="welcome"/>
</h1>
</div>
• Nome de tag: h1
• Nome de classe: .pageFrame
• ID do elemento: #pageHead
• Nome de tag e classe: div.pageFrame
• Nome de tag e id: img#welcome
• Relacionamento descendente: div #custName
• Atributos herdam dos padrões do navegador, a menos
que sejam sobrescritos.
Exercício
• Que seletor CSS estiliza somente a palavra
“bar”?
• <p class="a">foo,
<span class="a">bar<span></p>
a) span.a
b) p .a
c) .a span
d) Todas as respostas estão corretas.
Comentários
• Começam com "/*" e terminam com " */".
• São ignorados pelo navegador.
/* este é um comentário*/
p {
font-size: 14px; /* este é outro comentário*/
color: #000;
font-family: Arial, Serif;
}
Tipos de CSS
• Tipos de vinculação de folhas de estilo
1. Inline.
2. Incorporadas.
3. Importadas ou linkadas a partir de um documento
externo.
Folha de estilo inline
• regras CSS declaradas dentro da tag do
elemento HTML com uso do atributo style.
• só se aplica a um elemento HTML.
• mistura a apresentação com a marcação
<p style="color:#000; margin: 5px;">
Aqui um parágrafo de cor preta e com 5px nas 4 margens.
</p>
Folha de estilo incorporada ou interna
<head>
...
<style type="text/css">
body {
background: #000;
url(imagens/minhaimagem.gif);
}
h3 {
color: #f00;
}
p {
margin-left: 15px;
padding:1.5em;
}
</style>
...
</head>
Folha de estilo externa
<head>
...
<link rel="stylesheet" type="text/css" href="estilo.css"/>
...
</head>
<head>
...
<style type="text/css">
@import url("estilo.css");
</style>
...
</head>
Linkado (maior compatibilidade)
Importado
Box model
Tipos de unidades de medida
• Unidade relativa
▫ tomada em relação à outra medida.
▫ apropriadas para ajustes de uso em diferentes tipos de mídia.
▫ valor é tomado em relação:
em: ...ao tamanho da fonte ('font-size') herdada;
ex: ...a altura da letra x (xis) da fonte herdada;
px - pixel: ...ao dispositivo (midia) de exibição;
%: ...à percentagem de uma medida previamente definida.
• Unidade absoluta
▫ não referenciada a qualquer outra unidade e nem é herdada.
▫ usadas quando as mídias de exibição são perfeitamente
conhecidas
Medidas de comprimento CSS
div { margin: 1.5em; }
h4 { margin: 2ex; }
p { font-size: 14px; }
.classe { padding: 90%; }
hr { width: 14pt; }
h1 { margin: 1pc; }
h2 { font-size: 4mm; }
p.classe { padding: 0.3cm; }
h5.classe { padding: 0.5in; }
Herança CSS
...
p {color: red;}
p em {color: blue;}
...
<p>Texto do parágrafo com um <em>elemento
EM</em> nele contido.</p>
Herança CSS
...
div {color: red;}
...
<div>
<p>Texto do parágrafo com um <em>elemento
EM</em> nele contido.</p>
</div>
Propriedades não herdadas
• Imagine:
▫ Criar uma borda no elemento raiz da página.
Problema: todos os subelementos herdariam a borda.
Solução: nem todas as propriedades são herdadas.
• Propriedades não herdadas:
▫ background, border (exceto: border-collapse e border-
spacing),clip, content, counter, clue, display, float, height,
left, margin, outline, overflow, padding, page-
break, pause, play-during, position, right, table-
layout, text-decoration, top, unicode-bidi, vertical-
align, width, z-index.
Links
a:link {color: #696; text-decoration: none;
background-color: transparent}
a:visited {color: #699; text-decoration:
none; background-color: transparent}
a:hover {color: #c93; text-decoration:
underline; background-color: transparent}
a:active { color: #900; text-decoration:
underline; background-color: transparent }
position - propriedades
• static (padrão)
▫ Posiciona o elemento no fluxo normal da página e não permite ajustes
externos.
• absolute
▫ Posiciona o elemento em qualquer local da página.
▫ Posição “relativa” às laterais da página ou ao primeiro elemento posicionado
(não static) no qual esteja contido.
▫ O espaço original do elemento é liberado para ocupação dos demais elementos.
• fixed
▫ Posiciona o elemento relativo à janela do navegador e não move quando ocorre
rolagem da página.
• relative
▫ O elemento colocado em sua posição normal na página e, depois, é deslocado
de acordo com os valores definidos, deixando vazio o espaço onde ele ficaria.
Esse espaço passa a ser ocupado pelos demais elementos.
• inherit
▫ Valor da posição herdado do elemento pai.
position
• As propriedades top, left, bottom e right são usadas para
posicionar elementos nas posições absolute, fixed e
relative.
• top e left são mais usadas.
position
• absolute
▫ Corre com os elementos da página em caso de
rolagem de tela.
position
• fixed
▫ Semelhante ao absolute.
▫ A diferença é que ele fica fixo, mesmo em caso de
rolagem de tela.
position
• fixed
position
• fixed
z-index
• Elementos posicionados (absolute, relative ou
fixed) podem ser colocados em camadas
sobrepostas umas sobre as outras através da
propriedade z-index.
• Permite definir a ordem de posicionamento dos
elementos em uma pilha.
▫ Assim é possível definir que um elemento fique na
frente ou atrás de outro.
• O elemento que usa z-index não pode estar usando
o posicionamento padrão (static).
• Quando maior o valor, mas à frente o elemento
fica (mais “próximo da tela”).
z-index
• Valores possíveis:
▫ auto (padrão)
Valor igual ao dos elementos pais.
▫ valor
Ordem do elemento na pilha.
Números negativos são permitidos.
▫ inherit
z-index herdado do elemento pai.
z-index
• Exemplo:
img {
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
float
• Faz com que os elementos flutuem na página de acordo
com determinada política
• O mesmodesign pode ser obtido usando elementos
posicionados de forma absoluta ou float.
▫ Posicionamento float é uma solução flexível para layouts
multi-colunas e permite que elementos “limpem” elementos
ao seu lado.
• Funciona para o elemento onde for declarada.
• Box retirado da sua posição normal do fluxo do
documento.
• O elemento seguinte “ocupa a vaga” onde estava o
elemento que está usando float.
float
• Um elemento float normalmente deve ter uma largura
(width) específica declarada com um valor diferente de
‘auto’.
• Valores possíveis:
▫ left
O elemento flutua para a esquerda.
▫ right
O elemento flutua para a direita
▫ none (padrão)
O elemento não flutua e será exibido de acordo com o fluxo
normal do navegador.
▫ inherit
O valor deve ser herdado do elemento pai.
float
• Exemplo:
p {
float: left;
}
Flutuar para a esquerda.
Deixa elementos um ao lado do outro.
float
• Exemplo:
img {
float: right;
}
Flutuar a imagem para a direita dentro do elemento
onde ela está inserida.
float
• Exemplo:
span.destaque {
width: 40%;
float: right;
background-color: #888;
border: 1px solid black;
}
clear
• Especifica que nenhum elemento float possa
ficar à esquerda ou direita (ou ambos) de um
elemento em bloco.
• O elemento com essa propriedade será movido
para baixo até se livrar do elemento em bloco ao
seu lado.
clear
• Valores possíveis:
▫ left
Não permite elementos float do lado esquerdo.
▫ right
Não permite elementos float do lado direito.
▫ both
Não permite elementos float em nenhum lado (esquerdo
ou direito).
▫ none (padrão)
permite elementos float em ambos os lados (esquerdo e
direito)
▫ inherit
Valor herdado do elemento pai.
Layout
• Dividir a página em áreas usando o elemento div
do HTML.
• Cada área deve ter um nome bem representativo
e não vinculado a informações sobre o estilo ou
posicionamento a ser aplicado.
▫ O estilo e o posicionamento podem ser
modificados e o nome dado pode perder o sentido
original.
▫ Exemplos de “bons” nomes:
geral, container, menu, conteudo, destaque, rodape,
footer, blogs, topo, centro, center, etc.
Layout
• Estruturar as áreas que esperamos no nosso
layout.
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
Classificação dos layouts
• Número de colunas
• Largura da página
▫ Fixa
A largura é fixa e não se expande ou se encolhe de acordo com
a janela do navegador.
Melhor controle do design.
▫ Líquida
O conteúdo da página se expande para se ajustar à pagina de
acordo com as dimensões da janela do navegador.
▫ Elástica
A largura é fixa, mas as margens se expandem ou se encolhem
de acordo com a janela do navegador.
Normalmente posiciona o conteúdo no centro da página.
Layout de largura fixa
#container {
border: 1 px solid black;
width: 500px;
}
Layout de largura líquida
#container {
border: 1 px solid black;
width: 80%;
min-width: 300px;
}
Layout de largura líquida
* {
font-size: 14px;
}
#container {
border: 1 px solid black;
width: 40em;
}
Centralização do layout
#container {
border: 1 px solid black;
width: 80%;
margin: 0 auto;
}
#container {
border: 1 px solid black;
width: 500px;
margin: 0 auto;
}
Propriedades adicionais
• min-width
▫ Define a largura mínima do elemento.
• min-height
▫ Define a altura mínima do elemento.
Construção de layouts
Passos:
1. Escolher os containers de layout
Construção de layouts
Passos:
2. Nomear os containers
Construção de layouts
Passos:
3. Criar a marcação
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page title</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainnav"></div>
<div id="menu"></div>
<div id="contents"></div>
<div id="footer"></div>
</div>
</body>
</html>
Construção de layouts
Passos:
4. Inserir conteúdo
5. Posicionar os containers
body {
margin: 0;
padding: 0;
background: #ddd;
}
#container {
margin: 1em auto;
width: 650px;
background: #fff;
}
#header {background: #CF3;}
#mainnav {background: #9F3; }
#menu {
float: right;
width: 165px;
background: #6F9;
}
#contents {
float: left;
width: 440px;
background: #9FC;
margin: 0 0 0 20px;
}
#footer {
clear: both;
background: #FF9;
}
Construção de layouts
Construção de layouts
Passos:
6. Folha de estilo para impressão
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
Construção de layouts
body {
margin: 0;
padding: 0;
font: 100% arial, hevetica, sans-serif;
color: #000;
background-color: #fff;
}
a {
color: #000;
text-decoration: none;
}
#header { border-bottom: 1px solid #999; }
#header h1 { color: #000; }
#mainnav, #menu, .imagefloat, #skipmenu {
display: none; }
#menu ul {
margin-left: 0;
padding-left: 0;
list-style-type: none;
line-height: 165%;
}
#contents p { line-height: 165%; }
.blogentry { border-bottom: 1px
solid #999; }
.blogentry ul {
list-style-type: none;
text-align: right;
margin: 1em 0;
padding: 0;
font-size: 95%;
}
.blogentry li {
display: inline;
padding: 0 0 0 7px;
}
#footer {
clear: both;
color: #000;
text-align: right;
padding: 5px;
font-size: 90%;
border-top: 1px solid #999;
margin-top: 2em;
}
6. Folha de estilo para impressão
Layout de 2 colunas
Layout de 2 colunas - HTML
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Layout de 2 colunas - CSS
div {
border: 1px solid black;
}
#container {
width: 600px;
margin: 0 auto;
}
#header {
height: 80px;
background: #DDD;
}
#left {
float: left;
width: 130px;
background: #666;
}
#content {
float:right;
width: 450px;
}
#footer {
clear:both;
background: #DDD;
}
Layout de 3 colunas
Layout de 3 colunas - HTML
<div id="container">
<div id="header"></div>
<div id="left"></div>
<div id="content">
<div id="principal"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
Layout de 3 colunas - CSS
div {
border: 1px solid black;
}
#container {
width: 600px;
margin: 0 auto;
}
#header {
height: 80px;
background: #DDD;
}
#left {
float: left;
width: 130px;
background: #666;
}
#content {
float:right;
width: 450px;
}
#principal {
float: left;
width: 340px;
}
#right {
float: right;
width: 100px;
}
#footer {
clear:both;
background: #DDD;
}
Bordas arredondadas e sombra com
CSS3
Bordas arredondadas e sombra com
CSS3
#container {
border: 2px solid;
width: 200px;
padding: 10px;
border-radius: 10px;
box-shadow: 10px 10px 5px #888;
}
Referências e Links importantes
• Vídeos da Universidade XTI
• www.w3schools.com
• www.gimp.org
• FREEMAN Eric & FREEMAN Elisabeth. Use a Cabeça!
HTML com CSS e XHTML. Alta Books, 1ª Edição,
2006.
• Site sobre CSS e Padrões Web. Por Maurício “Maujor”
Samy Silva. Disponível em:
http://www.maujor.com/
• Apostila da K19 - Desenvolvimento Web com
HTML, CSS e Javascript.
Referências e Links importantes
• SILVA, Maurício Samy. Construindo sites com CSS
e (X)HTML – Sites controlados porfolhas de
estilo em cascata. São Paulo. Novatec Editora, 1ª
Edição, 2008.
• SILVA, Maurício Samy. CSS3 – Desenvolva
aplicações web profissionais com o uso dos
poderosos recursos de estilização das CSS3. São
Paulo : Novatec Editora, 1ª Edição, 2010.
• RODRIGUES, Andréa. Desenvolvimento para
Internet. 1ª Edição, Editora do Livro Técnico, 2010.
Compartilhar