CSS - Cascading Style Sheets
Folha de Estilos em Cascata
Profa:Tânia Neuenschwander
Introdução
Qual é a diferença entre HTML e CSS?
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.
O HTML é uma linguagem interpretada.
A sintaxe básica das CSS
Seção { propriedade: valor;}
Onde:
Seção: é TAG que receberá a propriedade
Propriedade: é uma característica da TAG
Valor: é a color, tamanho, fonte...
; : encerra o comando
Exemplo:
body {background-color: #FF0000;}
Estrutura Básica do HTML
Onde aplicar CSS?
1ª maneira(in-line):
É utilizando o atributo style do HTML,
dentro da própria TAG que receberá o
estilo.
Exemplo:
<body
style="background-color: #FF0000;“>
Estrutura Básica do HTML
Onde aplicar CSS?
2ª maneira (Interno):
Utilizando a TAG style do HTML, na seção
head.
Exemplo:
<head>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
Estrutura Básica do HTML
Onde aplicar CSS?
3ª maneira (externa):
É lincar para uma folha de estilos, que é um
arquivo de texto com a extensão .css.
No documento HTML (.htm) cria-se um link
para a folha de estilos (.css).
Exemplo do link:
<head>
<link rel=“estilo" type="text/css" href=“style.css" />
</head>
Exemplo Estrutura Básica
Vantagem do CSS
A coisa realmente inteligente disto é que
vários documentos HTML podem lincar para
uma mesma folha de estilos. Em outras
palavras isto significa que um simples arquivo
será capaz de controlar a apresentação de
muitos documentos HTML.
Criando uma Pagina HTML
Propriedades do CSS
'color‘: define a cor da letra de uma seção:
Ex. h1 {color: #00FF00;} o texto do cabeçalho de
nível 1 será verde.
'background-color‘: define a cor do fundo de uma
seção:
Ex. h2 {background-color: #0000FF;} a cor do
fundo do cabeçalho de nível 2 será azul.
body { background-color: #FFCC66; } a cor do
fundo da página será “mostarda”.
Propriedades do CSS
‘background-image’: define uma imagem
de fundo
body {background-color: #FFCC66;
background-image: url(“imagem.jpg");} a imagem
será exibida como fundo de página.
‘background-repeat’: define como a exibição da
imagem será repetida.
background-repeat: repeat-x – repete na horizontal
background-repeat: repeat-y – repete na vertical
background-repeat: no-repeat – não repete
Propriedades do CSS
background-attachment: define se a
imagem de fundo ficará fixa ou não.
Background-attachment: scroll - imagem rola com a pág
Background-attachment: fixed - imagem fica fixa.
background-position: define a posição da
imagem (do topo e da margem esquerda).
background-position: 2cm 2cm – 2cm do topo e da
margem esquerda
background-position: 50% 25%
background-position: top right – canto superior direito
(válido: top, bottom, center, left e right)
Propriedades do CSS
Background extendido:
body{ background-color: #FFCC66;
background-image: url(“imagem.gif");
background-repeat: no-repeat;
backgroundattachment: fixed;
background-position: bottom right ;}
Background abreviado:
body{background: #FFCC66 url(“imagem.gif")
no-repeat fixed bottom right;}
ou seja:
background: [color] [image] [repeat] [attachment] [position]
Propriedades do CSS
font-family: define uma lista de fontes para
uma seção da página.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: serif;}
h3 {font-family: monospace;}
font-variant: texto normal ou small-caps
font-weight :define quão negrito será a
fonte (um nº no intervalo de 100 a 900).
font-size: define o tamanho da fonte (20px,
1cm, 12pt, 2em)
Abreviado font: italic bold 30px arial, sans-serif
Propriedades do CSS
Formatação do texto:
text-indent: 30px; (recuo 1ª linha)
text-align: center; (Alinhamento)
text-decoration: underline; (sublinhado)
(overline – linha acima ou line-through tachado)
letter-spacing: 6px; (espaço entre letras)
text-transform: uppercase; (maiúsculo)
(ou capitalize ou lowercase - minúsculo )
Comandos Básicos
Separadores – Linha Horizontal
Propriedades do CSS
Formatação de links
pseudo-classe:
a:link {color: green;} (link não visitado)
a:visited {color: yellow;} (link visitado)
a:active {background-color: blue;} (link ativo)
a:hover {color:red; font-style: italic;} (sobre o link)
Você pode retirar o sulinhado do link
a { text-decoration:none; }
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
Usando class e id para estilizar seções
Formata a seção especial: (.nome_da_class)
.inicio {fonte-size: 2cm; color= blue; letter-spacing: 6px; }
Faz uso da classe: (seção class=“nome_da_class”)
<h1 class="inicio">Cabeçalho com formatado diferente</h1>
Cria e formata o identificador:
#c1 { color: red; }
Faz uso da identificação na seção:
<h1 id="c1">Cabeçalho 1 a ser diferenciado</h1>
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
Um elemento tem quatro lados: right,
left, top e bottom (direito, esquerdo,
superior e inferior). A margin é a
distância entre os lados de elementos
vizinhos .
Exemplo 1:
body {
Exemplo 2:
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
margin: 100px 40px 10px 70px;
}
body {
p{
margin: 5px 50px 5px 50px;
}
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
Padding pode ser entendido como
"enchimento“, ele define simplesmente a
distância entre a borda e o conteúdo do
elemento.
Exemplo:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
Width define a largura de um elemento.
Height define a altura de um elemento.
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
Bordas:
border-width: define a espessura das bordas.
Valores válidos thin, medium, e thick (fina,
média e grossa), ou um valor numérico em
pixels.
border-color: define as cores para as bordas.
border-style: define o tipo da borda. Valores
válidos:dotted, dashed, solid, double, groove,
ridge, inset, outset.
Podemos indexar as bodas utilizando:
border-top-style
border-right-style
border-bottom-color
border-left-width
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
Exemplos:
H1 {
border-top-style: solid;
border-top-color: red;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-style: solid;
border-right-color: green;
border-left-style: solid;
border-left-color: orange;
}
p { border-width: 1px; border-style: solid; border-color: blue; }
p { border: 1px solid blue; } <!* idem ao anterior */>
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
Agrupando elementos
(span e div)
No estilo:
span.benefit { color:red; }
#bom { background:blue; }
#ruim { background:red; }
No html:
<p>Para ter uma vida
<span
class="benefit">feliz</span>
e
<span
class="benefit">saudável</sp
an>:
<div id="bom">
<ul>É bom:
<li>Comer frutas e
verduras</li>
<li>Praticar esportes</li>
<li>Viajar</li>
<li>Dormir bem </li>
</ul>
</div>
<div id="ruim">
<ul>Não é bom:
<li>Comer gordura
animal</li>
<li>Trabalho em
excesso</li>
Comandos Básicos
Separadores - Parágrafo
Propriedades do CSS
<html>
<head>
<title>Barra de
Navegação</title>
<style
type="text/css">
.barNav a {
font: 12px Arial,
Verdana,Helvetica,sa
ns-serif;
<body>
<p class="barNav">
<a
href="caminho/arqui
vo.html" >Home
</a>
<a
href="caminho/arqui
vo.html">Quem
Download
