Técnicas e processos - HTML / CSS - aula 3
-
Upload
ritielle-de-souza -
Category
Design
-
view
35 -
download
0
description
Transcript of Técnicas e processos - HTML / CSS - aula 3
![Page 1: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/1.jpg)
Técnicas e processos de
produção
Profº Ritielle Souza
![Page 2: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/2.jpg)
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
![Page 3: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/3.jpg)
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.
![Page 4: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/4.jpg)
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;}
![Page 5: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/5.jpg)
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*/
![Page 6: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/6.jpg)
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
![Page 7: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/7.jpg)
Endereço absoluto e relativo
Os endereços são os caminhos que usamos para vincular os arquivos e páginas.
Estrutura de arquivos
![Page 8: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/8.jpg)
Endereço absoluto e relativo
Estrutura de arquivos
![Page 9: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/9.jpg)
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
![Page 10: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/10.jpg)
SITE MODELO
TREINANDO O CÓDIGO DURANTE A AULA.
Encontrar uma imagem no Google Imagens para usar de background do seu site.
![Page 11: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/11.jpg)
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*/}
![Page 12: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/12.jpg)
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;}
![Page 13: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/13.jpg)
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;}
![Page 14: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/14.jpg)
FOLHAS DE ESTILO – ESTILO NA PÁGINA
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>
![Page 15: Técnicas e processos - HTML / CSS - aula 3](https://reader036.fdocuments.net/reader036/viewer/2022082811/558c1bc5d8b42acd378b461c/html5/thumbnails/15.jpg)
FOLHAS DE ESTILO – ESTILO NA PÁGINA
<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>