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 ExternoEstilo 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:\ACADEMICO\UNIBERO\Ferramentas programaveis\imagem.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; font-family:verdana; text-decoration:underline; color:#FFE4B5; text-align:center; word-spacing:5px;}

FOLHAS DE ESTILO – ESTILO NA PÁGINA

a:link{ font-size:15px; font-family:verdana; 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; font-family:verdana; 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><a href="#">Hiperlink2</a><a href="#">Hiperlink3</a><a href="#">Hiperlink4</a><a href="#">Hiperlink5</a><a href="#">Hiperlink6</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

Design

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