Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
teorico_UnidadeIII
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
Programação WEB
O que é CSS?
Material Teórico
Responsável pelo Conteúdo:
Prof. Esp. Alexander Albuquerque Gobbato
Revisão Textual:
Profa. Ms. Rosemary Toffoli
5
• O que é CSS?
• CSS3 é divido em módulos
Lembramos a você da importância de realizar todas as atividades propostas dentro do prazo
estabelecido para cada Unidade, dessa forma, você evitará que o conteúdo se acumule e
que você tenha problemas ao final do semestre.
Uma última recomendação: caso tenha problemas para acessar algum item da disciplina, ou
dúvidas com relação ao conteúdo, não deixe de entrar em contato com seu professor tutor
através do botão mensagens.
1. CSS significa Cascading Style Sheets.
2. Os estilos definem como exibir elementos HTML
3. Estilos foram adicionados ao HTML 4.0 para resolver um
problema.
4. Folha de estilo externa pode salvar um monte de trabalho
5. Folhas de estilo externas são armazenadas em arquivos CSS
O que é CSS?
6
Unidade: O que é CSS?
Contextualização
Olá turma!
CSS é uma linguagem para estilos que define o layout de documentos HTML. Por exemplo,
CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos
e muito mais. Aguarde e você verá!
HTML pode ser usado para definir o layout de websites. Contudo, CSS proporciona mais
opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.
Nesta unidade, você estará em condições de projetar uma folha de estilos, usando CSS para
dar um grande visual ao seu projeto website.
Bons estudos!
7
O que é CSS?
O propósito do HTML é conter tags de formatação de documento, o HTML define o conteúdo
do documento e como exibido:
<h1> Este é um título </ h1>
<p> Este é um parágrafo. </ p>
Quando tags como <font> e atributos de cor foram adicionados à especificação HTML 3.2,
começou um pesadelo para os desenvolvedores web. Para resolver este problema, o World
Wide Web Consortium (W3C), especificou CSS.
Em HTML 4.0, toda a formatação pode ser removida do documento HTML e armazenada
em um arquivo CSS separado. Todos os browsers suportam CSS hoje.
Benefícios do CSS
CSS define como elementos HTML devem ser exibidos.
Estilos são normalmente guardados em arquivos externos .css.
Folhas de estilo externas permitem que você altere a aparência e o layout de todas as páginas
de um site, apenas editando um único arquivo.
Sintaxe CSS
Uma regra CSS tem duas partes principais:
• um seletor;
• e uma ou mais declarações.
O seletor é normalmente o elemento HTML que você deseja criar o estilo.
Cada declaração consiste uma propriedade e um valor.
A propriedade é o atributo de estilo que você deseja alterar.
Cada propriedade tem um valor.
8
Unidade: O que é CSS?
CSS id e CSS classe
Através do css você pode criar um estilo para um elemento do HTML, o css permite criar um
estilo para um seletor através do id e class.
O id é usado para especificar um estilo para um elemento único, o seletor id é atribuído ao id
do elemento HTML e definido com o caracter “#”.
9
Classe
A classe é usada para especificar um estilo para um grupo de elementos, ela permite que
você crie um estilo para vários elementos do HTML com a mesma classe.
Estilo
Existem três maneiras de se utilizar o estilo:
• Estilo externo
• Estilo interno
• Estilo inline
O estilo externo é ideal quando a formatação deve ser aplicado a várias páginas. Com um
arquivo externo você pode alterar um formato e ele será automaticamente em todo o projeto.
10
Unidade: O que é CSS?
Cada página deve ter um link para o estilo usando <link>, essa tag deve estar dentro da
seção <head>
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
Um estilo externo pode ser escrito por qualquer editor, não deve conter nenhuma tag html.
O arquivo deve ser salvo com a extensão .css.
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
O estilo interno é usado na própria página de html. O estilo é definido na seção
<head> utilizando a tag <style>
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
O estilo inline é usado diretamento no elemento HTML
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
11
Estilo – background
As propriedades do background são usadas para criar efeitos a um elemento.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
A propriedade background-color especifica a cor de fundo do elemento.
body {background-color:#b0c4de;}
A propriedade background-image define uma imagem para o elemento;
body {background-image:url(‘paper.gif’);}
A propriedade background-image duplica a imagem horizontal e verticalmente.
Algumas imagens podem ser repetidas somente horizontalmente ou verticalmente.
body{
background-image:url(‘gradient2.png’);
}
Imagem repetida somente na horizontal
body{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}
Ao usar uma imagem de fundo, configurar a imagem para não atrapalhar o texto
body{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}
12
Unidade: O que é CSS?
No exemplo acima, a imagem de fundo é mostrado no mesmo lugar que o texto. Queremos
mudar a posição da imagem, de modo que ela não perturbe o texto.
body{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:right top;}
Estilo – text
As propriedades do text :
• text-align
• text-decoration
• text-transform
• text-indent
A propriedade color é usada para configurar a cor do texto
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
A propriedade text-align é usada para especificar o alinhamento do texto, a propriedade é
usada para alinhar a esquerda, direita, centralizado ou justificado.
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
A propriedade text-decoration é usada para configurar ou remover decorações do texto.
O text-decoration é mais frequentemente utilizado nos links
13
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
A propriedade text-transform é usada para especificar o uppercase e lowercase nos textos.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
A propriedade text-indentation é usada para especificar a identificação na 1a. linha do texto.
p {text-indent:50px;}
Estilo – font
A propriedade fonte define família , tamanho e estilo do texto
• font-family
• font-style
• font-size
A família da fonte de um texto é definida com a propriedade font-family.
A propriedade font-family deve manter nomes de fontes diversas como um sistema de
“retorno”. Se o navegador não suportar primeira, ele tentará a próxima.
p{font-family:”Times New Roman”, Times, serif;}
14
Unidade: O que é CSS?
A propriedade font-style possui 3 valores
normal – ( a própria fonte )
italic – ( itálico )
oblique – ( muito similar com o itálico mas menos utilizado )
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
A propriedade font-size define o tamanho do texto.
É capaz de gerenciar o tamanho do texto.
O valor font-size pode ser um tamanho absoluto ou relativo.
Tamanho absoluto:
• Define o texto a um tamanho especificado;
• Não permite que o usuárioaltere o tamanho do texto em todos os navegadores (ruim por
razões de acessibilidade)
• Tamanho absoluto é útil quando o tamanho físico da saída é conhecida
Tamanho relativo:
• Define o tamanho relativo aos elementos;
• Permite que o usuário altere o tamanho do texto em navegadores;
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
15
Estilo – border
A propriedade border-style permite especificar o estilo e a cor dos elementos bordas.
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• Outset
border-style:dotted solid;
A propriedade border-color é usada para especificar a cor da borda mas para funcionar a cor,
primeiro deve ser criado o estilo de borda.
p.one{
border-style:solid;
border-color:red;
}
p.two{
border-style: dashed;
border-color:#98bf21;
}
A propriedade pode ser setada individualmente
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
16
Unidade: O que é CSS?
Estilo – margin
A margem não tem uma cor de fundo e é completamente transparente.
A margem superior, inferior, direita e esquerda pode ser alterada de forma independente
usando suas propriedades separadas.
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Estilo – padding
A propriedade padding define o espaço entre o elemento e a borda
O espaçamento superior, inferior, direita e esquerda pode ser alterado de forma independente
usando suas propriedades separadas.
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
CSS3 é divido em módulos
Alguns dos mais importantes módulos são:
• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
Lembrando que o CSS3 ainda está sobre o desenvolvimento da W3C.
17
CSS3 Borders
Com CSS3, você pode criar bordas arredondas, adicionar sombras nas caixas e também usar
imagens como borda, sem utilizar um programa de editoração de imagem.
As propriedades são:
• border-radius
• box-shadow
• border-image
CSS3 Cantos arredondados
A propriedade border-radius permite adicionar o efeito de arredondamento no elemento.
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
18
Unidade: O que é CSS?
CSS3 Sombreamento
div
{
width:300px;
height:100px;
background-color:yellow;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 and earlier */
box-shadow: 10px 10px 5px #888888;
}
CSS3 Backgrounds
O css backgrounds possui algumas novidades como:
• background-size
• background-origin
Firefox 3.6 e as versões anteriores não suportam a background-origin e necessitam do prefixo
–moz- e para suporte a background-size.
Safari 4 necessita do prefixo –webkit- para dar suporte as novas propriedades.
O internet Explorer 9, Firefox 4, Chrome, Safari 5 e Opera suportam as novas propriedades.
19
CSS3 Background Size – Especifíca o tamanho da imagem
de fundo
div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}
div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}
CSS3 background-origin - Especifica a posição da área que a
imagem será exibida como fundo
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
20
Unidade: O que é CSS?
CSS3 Text Effetcs
O text effetcs possui duas propriedades como text-shadow e word-wrap
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
Efeito quebra de linha
p {word-wrap:break-word;}
CSS3 Font-Face
Antes de CSS3, os web designers tinha que utilizar fontes instaladas previamente no
computador do usuário.
Com essa nova característica você pode disponibilizar o arquivo no servidor web, e ele será
automaticamente baixado para o usuário, quando necessário.
<style type=”text/css”>
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf’),
url(‘Sansation_Light.eot’); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
21
CSS3 Transforms
Com CSS3 tranforms você pode esticar, girar, aumentar e torcer elemento. O efeito modifica
a figura, tamanho e posição
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
CSS3 Translate
Com CSS3 translate você pode mover de uma posição para a outra dependendo do
parâmetros de posição passados da esquerda ( x ) e to top ( y )
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
22
Unidade: O que é CSS?
CSS3 Rotate
Com CSS3 rotate você pode girar o elemento no sentido horário e anti-horário
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
23
Material Complementar
• Professional JavaScript for Web Developers (Wrox Professional Guides)
http://www.w3schools.com/css/default.asp/ ( site com explicações e funcionalidades em css )
24
Unidade: O que é CSS?
Referências
SILVA, M. S. HTML 5: A linguagem de marcação que revolucionou a web. São Paulo:
Novatec, 2011.
TERUEL, E. C. HTML 5 Guia Prático. São Paulo: Editora Érica, 2011
25
Anotações
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil
Tel: (55 11) 3385-3000
Continue navegando
Materiais relacionados
Compartilhar