Documente Academic
Documente Profesional
Documente Cultură
Material Teórico
O que é CSS?
Revisão Textual:
Profa. Ms. Rosemary Toffoli
O que é CSS?
• O que é CSS?
5
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!
6
O que é CSS?
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.
7
Unidade: O que é CSS?
8
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.
9
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”);}
10
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
body{
background-image:url(‘gradient2.png’);
}
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;
}
11
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
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
12
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
p {text-indent:50px;}
Estilo – font
A propriedade fonte define família , tamanho e estilo do texto
• font-family
• font-style
• font-size
13
Unidade: O que é CSS?
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
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;}
14
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;
}
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
15
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;
16
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
div
{
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
17
Unidade: O que é CSS?
CSS3 Sombreamento
div
width:300px;
height:100px;
background-color:yellow;
CSS3 Backgrounds
O css backgrounds possui algumas novidades como:
• background-size
• background-origin
18
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;
}
div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
19
Unidade: O que é CSS?
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
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>
20
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 */
}
21
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 */
}
22
Material Complementar
23
Unidade: O que é CSS?
Referências
24
Anotações
25
www.cruzeirodosulvirtual.com.br
Campus Liberdade
Rua Galvão Bueno, 868
CEP 01506-000
São Paulo SP Brasil
Tel: (55 11) 3385-3000