O documento descreve as diferentes formas de aplicar folhas de estilo em CSS, incluindo externas, internas e inline. Ele também explica a sintaxe básica de regras CSS com seletores, propriedades e valores. Além disso, aborda tópicos como comentários, formatação de texto, endereços absolutos vs relativos, tag IMG e um exemplo de código HTML com estilos internos.
2. 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
3. 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.
4. 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;
}
5. 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*/
6. 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
7. Endereço absoluto e relativo
Os endereços são os caminhos que usamos para vincular os arquivos e
páginas.
Estrutura de
arquivos
9. 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
10. SITE MODELO
TREINANDO O CÓDIGO DURANTE A AULA.
Encontrar uma imagem no Google Imagens para usar de
background do seu site.
11. 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*/
}
12. 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;
}
13. 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;
}
14. 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>
15. 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>