Técnicas e processos - HTML / CSS - aula 3

Técnicas e processos
de produção
Profº Ritielle Souza

Folhas de Estilo - CSS
Existem três formas de trabalharmos com
folhas de estilos
Forma mais usual – CSS Externo
Estilo na página <style>
Forma menos usual – estilo inline

Sintaxe CSS – Folha de Estilo
• Regra CSS é a unidade básica de uma folha de
estilo. Uma regra CSS é composta de duas
partes: o seletor e a declaração. A declaração
compreende uma propriedade e um valor.

Sintaxe CSS – Folha de Estilo
• seletor{propriedade:valor}
declaração
REGRA CSS
p{
color:#000000;
background-color:#ff0000;
font-style:italic;
text-align:right;
font-family:tahoma;
}

Comentários em CSS
• /*Este é um comentário em linha*/
Bloco de comentário
• /*Este é um bloco de comentários em linhas
diferentes contendo muitas informações
sobre um trecho da folha de estilos*/

Formatação de Texto
Atributos Valor Definição
color Valor em hexadecimal
ou nome da cor
Cor do texto
font-family Nome da fonte Tipo da Fonte
font-size Valor referente ao
tamanho
Tamanho da fonte
font-weight Normal, bold Estilos de negrito
font-style Normal, oblique ou
itálico
Estilo do texto
text-align Left, center, right ou
justify
Ajuste do alinhamento
do texto
text-decoration Underline, overline Decoração do texto

Endereço absoluto e relativo
Os endereços são os caminhos que usamos para vincular os arquivos e
páginas.
Estrutura de
arquivos

Endereço absoluto e relativo
Estrutura de
arquivos

TAG IMG
Tag img permite inserir imagens em seu arquivo.
PARAMETRO: SRC=“caminho”
APLICAÇÃO:
<img src=“imagem.jpg” />
Caminho relativo
<img src=“E:ACADEMICOUNIBEROFerramentas
programaveisimagem.jpg” />
Caminho absoluto
<img src=“http://site.com.br/imagem.jpg” />
Caminho absoluto

SITE MODELO
TREINANDO O CÓDIGO DURANTE A AULA.
Encontrar uma imagem no Google Imagens para usar de
background do seu site.

Folha de Estilo – Estilo na Página
<html>
<head>
<title> Folhas de Estilo</title>
<style type=“text/css”>
body{
font-size:20px;
font-family:verdana;
color:#ff0000;
background-color:#fcfccc;
font-weight:bold;
font-style:italic;
background-image:url("imagens/porsche01.jpg");
background-repeat:no-repeat;
background-position:center right;
background-attachment:fixed;
*/bgproperties do html*/
}

Folhas de Estilo – Estilo na página
h1{
font-size:25px;
font-family:arial;
color:white;
text-align:center;
text-decoration:none;
background-color:blue;
width:400px;
}
h2{
font-size:18px;
text-decoration:underline;
color:#FFE4B5;
text-align:center;
word-spacing:5px;
}

FOLHAS DE ESTILO – ESTILO NA PÁGINA
a:link{
font-size:15px;
color:orange;
text-decoration:none;/*link sem sublinhado*/
width:200px;
background-color:black;
display:block;/*exibe o conteúdo em bloco*/
}
a:visited{
font-size:15px;
color:orange;
text-decoration:none;/*link sem sublinhado*/
width:200px;
background-color:black;
display:block;
}

a:hover{
text-align:center;
border-color:orange;
border-style:solid;
background-image:url("imagens/fundo08.jpg");
}
h3{
font-size:25px;
font-family:tahoma;
color:#ff8fcf;
text-align:center;
}
</style>

<body>
Testando estilo para a tag body
<h1> Testando estilo para tag h1</h1>
<a href="#">Hiperlink1</a>
<h2> Testando estilo para a tag h2</h2>
<h3>Testando estilo para a tag h3</h3>
</body>
</html>

Técnicas e processos - HTML / CSS - aula 3

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (19)

Similaire à Técnicas e processos - HTML / CSS - aula 3

Similaire à Técnicas e processos - HTML / CSS - aula 3 (20)

Técnicas e processos - HTML / CSS - aula 3