FTIN - Módulo de WebDesign
Prof. Iran Pontes
FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA
IMPLEMENTAÇÃO HTML/CSS
Introdução ao CSS
• Cascading Style Sheet
– Folhas de Estilo
• Descrição de regras de estilo que indicam ao browser como
apresentar os diversos elementos de um documento HTML
• Vêm substituir os atributos de formatação dos elementos
HTML.
– Ex: <hr width="75%" size="5" align="center">
• Forma de separar a apresentação do documento da sua
estrutura.
• A maioria das propriedades das style sheets (folhas de estilo)
podem ser utilizadas em qualquer Elemento HTML.
Noções Fundamentais
• Todo o mecanismo de CSS – Cascading Style Sheets
é baseado em Regras e Style Sheets.
– Regra – Definição dos aspectos de estilo de
um ou mais elementos.
– Style Sheet - Conjunto de uma ou mais
regras a aplicar a um documento HTML.
Exº: Style Sheet com uma única regra
h1 { color: red;}
Definição de Regras de Estilo
• Seletor
É a ligação entre o documento HTML e o estilo a ser definido. Identifica
o(s) elemento(s) a que a regra se aplica (normalmente o nome de um
elemento HTML, ex: body, p, h1, etc.).
• Bloco de Declarações
– Um bloco de declarações é delimitado por ‘{ }’ e é constituído por
declarações, separadas por ‘;’.
– Declaração – Define a propriedade de estilo a aplicar aos elementos
identificados pelo selector. Uma declaração é constituída por duas
partes, separadas por ‘:’ :
• Propriedade – nome do efeito/característica a aplicar.
• Valor – Valor a aplicar à propriedade.
Tipos de Seletores
Simples: Uma ou mais regras associadas aplicadas a uma única tag.
h1 { color: red;}
h1 { text-align: center;}
Escrevendo várias regras
para o mesmo seletor
h1 { color: red;
text-align: center;}
Agrupando várias declarações para o
mesmo seletor, separadas por ‘;’
• Composta: É possível agrupar regras com declarações iguais,
para diferentes selectores numa única regra.
h1 { font-weight: bold;}
h2 { font-weight: bold;}
h3 { font-weight: bold;}
Equivalente a
h1,h2,h3 { font-weight: bold;}
Tipos de Seletores
• Contextual: Define uma tag que receberá as informações
sobre estilo, mas somente quando estiverem
subordinadas a outra tag definida.
p a { text-align: center;}
div p a { text-align: center;}
Associando o Style Sheet ao HTML
• Existem três maneiras de vincular uma
Style Sheet a uma página HTML:
– Lincadas ou Importadas (Style Sheet externa).
– Incorporadas (Style Sheet interno).
– Inline.
Style Sheet externa (lincada)
• Uma Style Sheet externa, pode ser associada a uma página HTML
através do elemento <link>.
• A utilização de Style Sheets externas é recomendada quando o mesmo
estilo é aplicado a uma grande quantidade de páginas (ex: um site).
• Utilizando esta técnica, a alteração do aspecto de um site inteiro,
consegue-se modificando apenas um único arquivo.
<head>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
style.css
body
a:link
a:visited
a:active
a:hover
h1
{background-color: white; color:black}
{color: red;}
{color: blue;}
{color: green;}
{color: fuchsia;}
{text-transform: uppercase;}
Style Sheet externa (Importada)
• Nessa abordagem o conteúdo do Style Sheet presente no
arquivo com terminação .css é importado para o código
html. Como se estivesse definido dentro da tag <style>
<head>
...........
<style type="text/css">
@import url("estilo.css");
</style>
..........
</head>>
body
a:link
a:visited
a:active
a:hover
h1
style.css
{background-color: white; color:black;}
{color: red;}
{color: blue;}
{color: green;}
{color: fuchsia;}
{text-transform: uppercase;}
Associando o Style Sheet ao HTML
• Existem três maneiras de vincular uma
Style Sheet a uma página HTML:
– Lincadas ou Importadas (Style Sheet externa).
– Incorporadas (Style Sheet Interno).
– Inline.
Definição local – Elemento <style>
•
•
Apenas interfere nos
elementos da página onde
foram definidos.
Usa-se o comentário css para
evitar que browsers antigos
interpretem o css de forma
errada
<html>
<head>
<title>Bach's home page</title>
<style type="text/css">
<!-body { background-color: silver; }
h1 { color: red; }
-->
</style>
</head>
<body>
<h1>Bach's home page</h1>
<p>Johann Sebastian Bach was a prolific
composer. Among his works are:</p>
<ul>
<li>the Goldberg Variations</li>
<li>the Brandenburg Concertos</li>
<li>the Christmas Oratorio </li>
</ul>
<h1>Historical perspective</h1>
<p>Bach composed in what has been
referred to as the Baroque period.</p>
</body>
</html>
Associando o Style Sheet ao HTML
• Existem três maneiras de vincular uma
Style Sheet a uma página HTML:
– Lincadas ou Importadas (Style Sheet externa).
– Incorporadas (Style Sheet interno).
– Inline.
Regras inline
• Podem ser definidas regras inline através do atributo style,
aplicável a qualquer elemento válido no <body> de uma
página HTML, excetuando os elementos <basefont>,
<param> e <script>.
• Estas regras apenas são válidas para o elemento onde foram
definidas.
<p style="color: red; font-family: 'new century schoolbook', serif;">
este parágrafo tem cor red juntamente com fonte do tipo new century
schoolbook, se disponível.
</p>
* A definição de regras inline é o método mais inflexível de todos. Este método
perde a maioria das vantagens das regras de estilo, misturando a apresentação
com a estrutura.
Multiplas Folhas de Estilo
•
•
Se alguma propriedade para um elemento html for definida de forma
repetida em folhas de estilo diferentes, entrará em ação o efeito cascata e
prevalecerão os efeitos da folha de estilo mais específica.
Ordem de Prioridade: inline > incorporada > importada
estilo.css
h2 { color: #FFCC00;
text-align: center;
font:italic 9pt Verdana, Sans-serif;
}
como há um conflito no
tamanho das letras para <h2>,
prevalecerá a folha interna e a
letra de <h2> terá o tamanho
igual a 20 pt.
<html>
<head>
<link rel="stylesheet" href="estilo.css“ type="text/css" >
<style type="text/css">
h2 { color: "#FFCC00";
text-align: "center";
font: "italic 20pt Verdana, Sans-serif";
}
</style>
</head>
<body>
<h2> Que dia Lindo </h2>
</body>
</html>
Estrutura em árvore e herança
• A estrutura em árvore de um documento HTML, possibilita um dos
mecanismos mais importantes das Style Sheets: Herança.
– Os elementos HTML herdam (quase) todas as propriedades de estilo dos seus
pais.
<html>
<head>
<title>Bach's home page</title>
</head>
<body>
<h1>Bach's home page</h1>
<p>Johann Sebastian Bach was a
<strong>prolific</strong> composer. Among
his works are:</p>
<ul>
<li>the Goldberg Variations</li>
<li>the Brandenburg Concertos</li>
<li>the Christmas Oratorio </li>
</ul>
</body>
</html>
html
head
title
body
h1
ul
p
strong
li
li
li
Herança de propriedades de estilo
<style TYPE="text/css">
h1 { color: red; }
p { color: red; }
li { color: red; }
strong { color: red;}
</style>
Atribuir a mesma cor ao
texto de todos os elementos
<style type="text/css">
body { color: red;}
</style>
• Um elemento pode redefinir propriedades herdadas:
– Se existirem regras contraditórias, prevalecem as regras mais específicas.
• Mantém as propriedades não redefinidas.
<style type="text/css">
body { color: red;}
h1 { color: blue;}
</style>
Redefinir atributos
herdados
Propriedades não herdadas
• Embora o mecanismo de herança seja válido para quase
todas a propriedades de estilo, existem algumas exceções.
Estas exceções devem-se normalmente a:
– Eficiência
– Aspecto visual
• Exº:
body { background: url(textre.gif); }
– O atributo background não é herdado, ficando todos os filhos com
um background transparente, a não ser que o definam.
– Motivos:
• É mais eficiente mostrar apenas uma imagem de fundo, sendo o efeito
idêntico ao que ocorreria se a propriedade fosse herdada.
• Como as imagens de fundo são posicionadas relativamente ao elemento
a que pertencem, certas imagens poderiam não apresentar o padrão de
fundo esperado, após ser replicada várias vezes em cada elemento.
Seletores class e id
• As CSS suportam diferentes tipos de seletores
– Seletores de tipo
– Seletores de classe
– Seletores de id
• Quaisquer um destes tipos de seletores podem ser
combinados entre si, permitindo criar seletores
bastante complexos, mas também bastante
versáteis.
Seletores de tipo
• Forma mais simples de definir um seletor:
– Consiste no nome de um elemento html, logo todas as
propriedades associadas ao seletor, são aplicadas a
todos os elementos com esse nome existentes no
documento.
– Qualquer elemento html, pode ser um seletor.
h1 { color: red;}
table { border: 2px;}
P { text-indent: 3em;}
h1, h2, h3 { color: red;}
h1 { color: red;}
h2 { color: red;}
h3 { color: red;}
Seletores classe
• Você pode definir regras diferentes para o mesmo elemento
html, banta definir tipos de classes diferentes para o
elemento.
elementoHTML.minhaclasse { propriedade: valor; }
Exemplo de Style Sheet com definição de duas classes diferentes para o
elemento p.
p.corum { color:#000000; }
p.cordois { color:#0000FF; }
O atributo class permite aplicar propriedades de acordo com o seletor usado
e o nome da classe.
<p class ="corum"> este parágrafo terá cor preta.</p>
<p class ="cordois"> este parágrafo terá cor azul. </p>
Seletores classe
• Pode-se definir uma classe sem especificar o elemento, dessa
forma a classe pode ser associada no documento html a
qualquer tipo de elemento.
Exemplo: Definição de classe omitindo-se o elemento
.cortres{ color:#000000; }
Exemplo: Associando classe a tipos de elementos html diferentes.
<h2 class="cortres"> Este cabeçalho é azul. </h2>
<p class="cortres"> Este parágrafo é azul. </p >
Elemento com o atributo class
<html>
<head>
<title>Hamlet, excerpt from act II</title>
<style TYPE="text/css">
p.grilo { color: yellow; }
p.padre { color: black; }
p.bispo { color: blue; }
</style>
</head>
<body>
<p class=padre>Eu retiro o que disse, João</p>
<p class=grilo>Retirando ou não retirando, o
fato é que o cachorro enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim?
</p>
<p class=padre>Enterrado latindo, Senhor Bispo,
Au, au, au, não sa-be? </p>
</body>
</html>
Seletores id
O seletor id difere do seletor class, por ser ÚNICO. Um seletor
id só pode ser aplicado a UM e somente UM elemento HTML
dentro do documento.
Você pode "inventar" um nome e com ele criar uma id a qual
definirá as regras CSS. Uma id só pode ser aplicada a UM
elemento HTML.
A sintaxe para o seletor ID é mostrada abaixo. Um nome
qualquer que você "inventa" precedido de # (jogo-da-velha"):
<h1 id="principal"> Exemplo CSS</h1>
arquivo.css
#principal{propriedade: valor; }
Elemento com o atributo id
<html>
<head>
<title>Hamlet, excerpt from act II</title>
<style TYPE="text/css">
p.grilo { color: yellow; }
p.padre { color: black; }
p.bispo { color: blue; }
#titulo {text-align:center;
color: blue;font-size:18pt;
border-width:3px;border-style:solid;}
</style>
</head>
<body>
<h1 id="titulo"> Bate Papo </h1>
<p class=padre>Eu retiro o que disse, João</p>
<p class=grilo>Retirando ou não retirando, o fato é
que o cachorro enterrou-se em latim</p>
<p class=bispo>Um cachorro? Enterrado em latim?
</p>
<p class=padre>Enterrado latindo, Senhor Bispo, Au,
au, au, não sa-be? </p>
</body>
</html>
Inserindo comentários no CSS
Você pode inserir comentários nas CSS para explicar seu código, e
principalmente ajudá-lo a relembrar de como você estruturou e qual a
finalidade de partes importantes do código.
O comentário introduzido no código, será ignorado pelo browser.
Um comentário nas CSS começa com o "/*", e termina com " */". Veja o
exemplo abaixo:
/* este é um comentário*/
p { font-size: 14px; /* este é outro comentário*/
color: #000000; font-family: Arial, Serif; }
pseudo-classes e pseudo-elementos
•
pseudo-classes: Permitem que as folhas de estilo diferenciem os
diversos estados de uma elemento, sendo úteis para aplicar definições
de estilo a um elemento apenas em determinadas situações. (exemplo)
<html>
<head>
<style type="text/css">
a:link {color: red;}
a:visited {color: black; text-decoration: none;}
a:hover {color: blue; text-decoration: underline;}
a:active {color:yellow;}
</style>
</head>
<body>
<p><a href="default.html">Link com vários estados</a></p>
</body>
</html>
Dicas para os efeitos funcionarem corretamente:
a:hover deve vir após a:link no CSS;
a:active deve vir após a:hover no CSS;
pseudo-classes - Exemplo
<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
<body>
a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}
<p><b><a class="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>
a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}
<p><b><a class="four" href="default.asp" target="_blank">This link changes fontfamily</a></b></p>
a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}
a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>
<p>Mouse over the links to see them change layout.</p>
<p><b><a class="one" href="default.asp" target="_blank">This link changes color</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">This link changes backgroundcolor</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">This link changes textdecoration</a></b></p>
</body>
</html>
Veja Como Ficou
pseudo-classes e pseudo-elementos
•
pseudo-elementos: Utilizadas para especificar partes
lógicas de uma elemento, sem que essas partes estejam
na hierarquia de um documento.
– Primeira letra
p:first-letter {propriedade:valor;}
– Primeira linha
p:first-line {propriedade:valor;}
Declarações – Propriedades
Fundo e Cores
Fontes
font; font-family; font-size; font-style; fontvariant; font-weight
background; background-attachment; background-color;
background-image; background-position; backgroundrepeat; color
Texto
Disposição (Layout)
direction; letter-spacing; line-height; max-height;
max-width; min-height; min-width; text-align;
text-decoration; text-indent; text-shadow; texttransform; vertical-align; white-space; wordspacing
border; border-bottom; border-bottom-color; borderbottom-style; border-bottom-width; border-collapse;
border-color; border-left; border-left-color; border-leftstyle; border-left-width; border-right; border-right-color;
border-right-style; border-right-width; border-style; bordertop; border-top-color; border-top-style; border-top-width;
border-width; clear; float; margin; margin-bottom; marginleft; margin-right; margin-top; padding; padding-bottom;
padding-left; padding-right; padding-top; table-layout
Posicionamento
bottom; clip; height; left; overflow; position;
right; top; visibility; width; z-index
Classificação
display; list-style; list-style-image; list-style-type
Outras propriedades
cursor
Declarações – Valores
• Existem determinados tipos de valores que são válidos para diversas
propriedades e cujas gamas de valores podem ser englobadas em vários
tipos
Tipo de Valor
Dimensões
Percentagens
URI
Cores
Propriedades que assumem este tipo de valor
background-position; border; border-bottom; border-bottomwidth; border-left; border-left-width; border-right; borderright-width; border-top; border-top-width; border-spacing ;
bottom; font-size; height; left; letter-spacing (apenas
dimensão); line-height; max-height; max-width; min-height;
min-width; right; text-indent; text-shadow; top; vertical-align;
width;
background; background-image; cursor; list-style-image;
background; background-color; border; border-color; borderbottom; border-bottom-color; border-color; border-left;
border-left-color; border-right; border-right-color; border-top;
border-top-color; color; text-shadow
Valores - Dimensões
• Referem-se a medidas horizontais e verticais
• Existem dois tipos de dimensões
– Relativas
– Absolutas
Uninades
Formato
<numero real> <unidade>
Formato
Exemplo
Absolutas
in – inches (polegadas – 2,54 cm)
cm – centímetros
mm – milímetros
pt – points (1/72 inch)
pc – picas (12 pints)
h1 { margin: 0.5in; } /* inches */
h2 { line-height: 3cm; } /* centimeters */
h3 { word-spacing: 4mm; } /* millimeters */
h4 { font-size: 12pt; } /* points */
h4 { font-size: 1pc; } /* picas */
Relativas
em – dimensão da fonte corrente
ex – altura da letra ‘x’ da fonte corrente
px – pixels (relativa a resolução da tela)
h1 { margin: 0.5em; } /* em */
h1 { margin: 1ex;} /* ex */
p { font-size: 12px; } /* px */
Valores - Percentagens
• Valores relativos a outro valor, ex: uma dimensão.
• Cada propriedade que pode assumir valores percentuais, também
define a que valor a percentagem se refere.
Formato
• Os valores de referência podem ser:
– outra propriedade do próprio elemento
<numero real> %
– uma propriedade de um elemento pai
– um valor do contexto de formatação (ex: largura do bloco que contém o
elemento)
/* Tabela com uma largura de 60% da largura do elemento que a contém */
table { width: 60%; }
/* Parágrafo com uma dimensão de fonte 20% maior que a fonte do contexto
onde o parágrafo se encontra */
p { font-size: 120%; }
Valores - Cores
•
•
Cada cor tem como valor uma palavra chave ou uma especificação RGB.
Palavras chave definidas:
– aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal,
white, and yellow.
/* Definição de cores com palavras chave */
•
body {color: black; background: white;}
RGB
h1 { color: maroon;}
{ color:
olive;}
– #rrggbb (ex., color: #00cc00)h2
– rr,
gg e bb
são valores em hexadécimal
– #rgb (ex., color: #0c0) - r, g e b são valores em hexadécimal
– rgb(x,x,x) - x é um inteiro entre 0 and 255 inclusive (ex., color: rgb(0,204,0))
– rgb(y%,y%,y%) - y é um número real entre 0.0 and 100.0 inclusive (ex., color:
rgb(0%,80%,0%)
/* Definição de cores em valores RGB*/
p { color: #f00; } /* #rgb */
p { color: #ff0000; } /* #rrggbb */
p { color: rgb(255,0,0); } /* inteiro entre 0 - 255 */
p { color: rgb(100%, 0%, 0%); } /* real entre 0.0% - 100.0% */
Style Sheets – Fontes
• As propriedades para as fontes, definem as características (os
valores na regra CSS) das letras que constituem os textos
dentro dos elementos HTML
• Propriedades básicas das fontes
–
–
–
–
–
–
–
color: Cor da fonte
font-family:Tipo de fonte
font-size: Tamanho de fonte
font-style: Estilo de fonte
font-variant: fontes maiúsculas de menor altura
font-weight: Quanto mais escura a fonte é (negrito)
font: maneira abreviada para todas as propriedades
Style Sheets – Valores Válidos
• color:
– código hexadecimal: #FFFFFF
– código rgb: rgb(255,235,0)
– nome da cor: red, blue, green...etc
Exemplos – Cor
<html>
<head>
<style type="text/css">
<!--
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
-->
</style>
</head>
<body>
<h1>Cabeçalho com letras vermelhas</h1>
<h2>Cabeçalho com letras verdes</h2>
<p>Parágrafo com letras azuis</p>
</body>
</html>
Style Sheets – Valores Válidos
• font-family:
–
–
–
–
Usado para definir uma lista de tipos de fontes possíveis;
O browser assume o primeiro nome que ele encontra na lista;
Separar cada nome por virgula(,) e sempre prever um nome genérico.
Caso o nome da fonte seja composto, usar aspas duplas no nome(“ ”). Mas caso
a regra de estilo esteja definida pelo atributo style, então deve-se usar aspas
simples (' ').
– Nomes de fontes: define-se pelo nome da fonte
• ex:"verdana", "helvetica", "arial", etc.
– Fontes Genéricas: define-se pelo nome genérico
• p. ex:"serif", "sans-serif", "cursive", etc.
Exemplos – Tipo
Separa-se os tipos de fontes
possíveis com virgula (,);
<html>
<head>
<style type="text/css">
<!--
Se o nome for composto,
por ex. Comic Sans SM.
Usar aspas duplas: “Comic
Sans SM”
h2 {font-family: arial, helvetica, serif;}
p {font-family: sans-serif;}
-->
</style>
</head>
<body>
<h2>Família por nome: arial, helvetica,
serif;</h2>
<p>Família genérica: sans-serif;<p>
</body>
</html>
Style Sheets – Valores Válidos
• Font-size: Indica qual o tamanho que a fonte
deve possuir.
– Por um tamanho padrão:
smaller < xx-small < x-small < small < medium <
large < x-large < xx-large < larger
– Pelo Comprimento: uma medida reconhecida pelas
CSS (px, pt, em, cm, ...)
– Percentual (%): Funcionando como um percentual da
fonte adquirida pelo elemento
Style Sheets – Valores Válidos
• Font-style:
• normal: fonte normal na vertical
• italic: fonte inclinada
• oblique:fonte obliqua
Style Sheets – Valores Válidos
• font-variant:
– normal: fonte normal
– small-caps: transforma em maiúsculas de menor
altura
• font-weight:
– Padronizados: normal, bold, bolder, lighter
– Por Valor: 100, 200, 300, 400, 500, 600, 700, 800,
900
Exemplos – Estilo + Tamanho
<html>
Esse exemplo combina mais de
um tipo de propriedade: fontstyle, font-size
<head>
<style type="text/css">
<!-h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique; font-size: 14px}
p.menor {font-style: oblique; font-size: smaller}
-->
</style>
</head>
<body>
<h1>Este é o estilo italic</h1>
<h2>Este é o estilo normal</h2>
<p>Este é o estilo oblique de 14px</p>
<p class="menor">Este é o texto menor</p>
</body>
</html>
Exemplo: font-varian e font-weight
<html>
<head>
<style type="text/css">
<!-h1 {font-weight: bold;}
h3 {font-variant: normal;}
p{font-variant: small-caps;}
-->
</style>
</head>
<body>
<h1>Cabeçalho gordo</h1>
<h3>Este cabeçalho com letras normais</h3>
<p>Este parágrafo com letras em "small-caps"</p>
</body>
</html>
Exemplos – Sintetizando tudo na tag font
•
Maneira abreviada de
você escrever uma regra
para as propriedades das
fontes
– A sintaxe geral é esta: font: [style]
[variant] [weight] [size] [/lineheight] [family] | caption | icon |
menu | message-box | smallcaption | status-bar | inherit
– Os valores style, variant, weight e
size, podem ser declarados em
qualquer ordem.
<html>
<head>
<style type="text/css">
<!-p{
font: italic small-caps bold 14px
"Comic Sans MS", sans-serif;
}
-->
</style>
</head>
<body>
<p>Parágrafo em declaração única</p>
</body>
</html>
Fontes usadas pelo S.O. do
visitante
•
Essas propriedades devem ser
declaradas isoladas para a propriedade
font
<html>
<head>
<style type="text/css">
<!-.p1 {
–
–
–
–
caption: fontes usadas em botões;
icon: fontes usadas em ícones;
menu: fontes usadas em menus;
message-box: fontes ussadas em caixas de
mensagens;
– small-caption: fontes usadas em pequenos
controles;
– status-bar: fontes usadas na barra de status;
– inherit: Herda a fonte declarada pelo
elemento pai.
font: status-bar;
}
.p2 {
font: small-caption ;
}
-->
</style>
</head>
<body>
<p class="p1">Parágrafo com fonte statusbar</p>
<p class="p2">Parágrafo com fonte smallcaption</p>
</body>
</html>
Cascading Style Sheets (CSS)
- Propriedades dos Textos
Webdesign
Style Sheets – Texto
•
As propriedades para textos, definem as características (os
valores na regra CSS) dos textos inseridos dentro dos
elementos HTML.
• Propriedades básicas das fontes
–
–
–
–
–
–
–
–
letter-spacing: espaçamento entre letras;
word-spacing: espaçamento entre palavras;
text-align: alinhamento do texto;
text-decoration: decoração do texto;
text-indent: recuo do texto;
text-transform: forma das letras;
Direction: direção do texto;
white-space: como o browser trata os espaços em branco;
Style Sheets – Espaço entre letras
<html>
letter-spacing
Valores Válidos:
–
–
normal: é o espaçamento default
lenght: uma medida reconhecida
pelas CSS (px, pt, em, cm, ...)
São válidos valores negativos
<head>
<style type="text/css">
<!–
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}
-->
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>
Style Sheets – Espaço entre palavras
word-spacing
Valores Válidos:
–
–
normal: é o espaçamento
default
lenght: uma medida
reconhecida pelas CSS (px, pt,
em, cm, ...) São válidos valores
negativos
<html>
<head>
<style type="text/css">
<!–
H2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}
-->
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>
Style Sheets – Alinhamento de texto
<html>
text-align
Valores Válidos:
–
left: alinha o texto a esquerda
–
right: alinha o texto a direita
–
center: alinha o texto no centro
–
justify: força o texto a ocupar toda a
extensão da linha da esquerda a
direita
<head>
<style type="text/css">
<!-h1 {text-align: left;}
h2 {text-align: center;}
h3 {text-align: right;}
p {text-align: justify;}
-->
</style>
</head>
<body>
<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<p>Este é o parágrafo cujo texto ...</p>
</body>
</html>
Style Sheets – Decoração
do Texto
text-decoration
Valores Válidos:
–
none: nenhuma decoração
–
underline: coloca sublinhado no texto
–
overline: coloca um sobrelinhado no texto
–
line-through: coloca uma linha em cima do
texto
–
blink: faz o texto piscar
<html>
<head>
<style type="text/css">
<!-h1 {text-decoration: underline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: overline;}
a {text-decoration: none;}
-->
</style>
</head>
<body>
<h1>Texto com sublinhado</h1>
<h2>Texto com linha em cima</h2>
<h3>Texto com sobrelinhado</h3>
<p>
<a href="http://www.maujor.com">Este é
um link sem sublinhado</a>
</p>
</body>
</html>
Style Sheets – Identação do Texto
text-indent
Valores Válidos:
–
lenght: uma medida reconhecida pelas
CSS (px, pt, em, cm, ...)
–
% : porcentagem da largura do elemento
pai
<html>
<head>
<style type="text/css">
<!-h3 {text-indent: 80px;}
p {text-indent: 3em;}
-->
</style>
</head>
<body>
<h3>Texto com recuo de 80
pixel</h3>
<p>Texto com recuo de
3.0em</p>
</body>
</html>
Style Sheets – Forma das Letras
<html>
text-transform
Valores Válidos:
–
none: texto normal
–
capitalize: todas as primeiras letras do
texto em maiúsculas
–
uppercase: todas as letras do texto
em maiúsculas
–
lowercase: todas as letras do texto em
minúsculas
<head>
<style type="text/css">
<!-h1 {text-transform: none;}
h2 {text-transform: capitalize;}
h3 {text-transform: uppercase;}
h4 {text-transform: lowercase;}
-->
</style>
</head>
<body>
<h1>Texto com letras como digitadas</h1>
<h2>Texto com primeira letra das palavras,
maiúsculas</h2>
<h3>Texto com todas letras, maiúsculas</h3>
<h4>Texto com letras minúsculas</h4>
</body>
</html>
Style Sheets – Direção do Texto
direction
Valores Válidos:
–
ltr: texto escrito da esquerda para a
direita
–
rtl: texto escrito da direita para a
esquerda
<html>
<head>
<style type="text/css">
<!-h1 {direction: ltr;}
h2 {direction: rtl;}
-->
</style>
</head>
<body>
<h1>Texto da esquerda para a direita</h1>
<h2>Texto da direita para esquerda</h2>
</body>
</html>
Style Sheets –
Espaço em Branco
white-space
Valores Válidos:
–
normal: os espaços em branco serão
ignorados pelo browser
–
pre: os espaços em branco serão
preservados pelo browser
–
nowrap: o texto será apresentado todo
ele numa linha única na tela. Não há
quebra de linha até ser encontrada uma
tag <br>
<html>
<head>
<style type="text/css">
<!-h1 {white-space: normal;}
h2 {white-space: pre;}
h3 {white-space: nowrap;}
-->
</style>
</head>
<body>
<h1>espaços em
ignorados</h1>
branco serão
<h2>do Jeito que você c l o c a
aparece</h2>
<h3>Esse tipo de texto so pula linha realmente
quando achar uma tag br<h3>
</body>
</html>
Style Sheets – Margens
• A propriedade para margens, define um valor
para espessura das margens dos elementos
HTML.
• Propriedades básicas as margens:
–
–
–
–
–
margin-top: define a margem superior;
margin-right: define a margem direita;
margin-bottom: define a margem inferior;
margin-left: define a margem esquerda;
margin:maneira abreviada para todas as margens
Style Sheets – Valores válidos
Para qualquer tipo de margem os
valores válidos são os seguintes:
–
–
–
auto: valor default da margem
length: uma medida reconhecida pelas CSS (px, pt,
em, cm, ...)
%: porcentagem da largura do elemento pai
Style Sheets – Margem do topo
margin-top: Espaçamento do
elemento html para a margem
superior
<html>
<head>
<style type="text/css">
<!-p {margin-top: 2cm;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 2cm</p>
</body>
</html>
Style Sheets – Margem Direita
margin-right : Espaçamento
do elemento html para a margem
direita
<html>
<head>
<style type="text/css">
<!-p {margin-right: 300px;}
-->
</style>
</head>
<body>
<p>Uma margem direita de 300px
nesta frase mais longa dentro do
parágrafo</p>
</body>
</html>
Style Sheets – Margem inferior
margin-bottom:
Espaçamento do elemento html
para a borda inferior
<html>
<head>
<style type="text/css">
<!--
p {margin-bottom: 4em;}
-->
</style>
</head>
<body>
<p>Uma margem inferior de 4.0em</p>
<p>Uma margem inferior de 4.0em</p>
</body>
</html>
Style Sheets – Margem para esquerda
margin-left: Espaçamento
do elemento html para a margem
da esquerda.
<html>
<head>
<style type="text/css">
<!-p {margin-left: 10%;}
-->
</style>
</head>
<body>
<p>Uma margem esquerda de 10%</p>
</body>
</html>
Style Sheets – Sitetizando tudo em uma
única declaração.
margin: permitem que você controle o espaçamento em volta dos
elementos HTML. São válidos valores negativos para margem, com o
objetivo de sobrepor elementos.
Há quatro modos de se declarar abreviadamente as margens:
margin: valor1: as 4 margens terão valor1;
margin: valor1 valor2: margem superior e inferior terão valor1 -margem
direita e esquerda terão valor2
margin: valor1 valor2 valor3: margem superior terá valor1 - margem
direita e esquerda terão valor2 - margem inferior terá valor3
margin: valor1 valor2 valor3 valor4....margens superior, direita, inferior e
esquerda nesta ordem.
Style Sheets – Sitetizando tudo em uma
única declaração.
<html>
<head>
<style type="text/css">
<!-p {margin: 20px 40px 80px 25px;}
-->
</style>
</head>
<body>
<p>Uma margem superior de 20px, uma margem direita de 40px,
uma margem inferior de 80px e uma margem esquerda de 25px</p>
</body>
</html>
Style Sheets – bordas
• As propriedades para as bordas, definem
as características (os valores na regra
CSS) das quatro bordas de um elemento
HTML:
– top
–right
–left
–bottom
Style Sheets – bordas
•
Propriedades :
– border-width:
– border-style:
– border-color:
espessura da borda
estilo da borda
cor da borda
INDICANDO QUAL DAS BORDAS SOFRERÁ O EFEITO
–
–
–
–
border-top-width,
border-right-width,
border-bottom-width,
Border-left-width,
border-top-style,
border-top-color
border-right-style, border-right-color
border-bottom-style, border-bottom-color
border-left-style,
border-left-color
FORMA ABREVIADA DE DE CLARAR TODAS AS PROPRIEDADES
–
–
–
–
–
border-top: todas as propriedades da borda superior
border-right:
todas as propriedades da borda direita
border-bottom: todas as propriedades da borda inferior
border-left: todas as propriedades da borda esquerda
border:
todas as quatro bordas
•
Style Sheets – bordas
Valores válidos
– color
• código hexadecimal: #FFFFFF
• código rgb: rgb(255,235,0)
• nome da cor: red, blue, green...etc
– style
none:
hidden:
dotted:
dashed:
solid:
nenhuma borda
equivalente a none
borda pontilhada
borda tracejada
borda contínua
double:
groove:
ridge:
inset:
outset:
dupla
entalhada
borda em ressalto
borda em baixo relevo
borda em alto relevo
– width
thin: borda fina
thick: borda grossa
medium: borda média length: uma medida reconhecida pelas CSS (px, pt, em, cm ...)
<html>
Style Sheets – bordas
<head>
<style type="text/css">
<!-h3 {
border-width: medium;
border-style: solid;
border-color: #0000FF;
}
p {
border-width: 6px;
border-style: dashed;
border-color: #FF0000;
}
-->
</style>
</head>
<body>
<h3>Borda média, contínua e azul</h3>
<p>Borda 6px, tracejada e vermelha</p>
</body>
</html>
•
Mesclando as três propriedades
– border-width
– border-style
– border-color
Style Sheets – bordas
•
border-style: dotted, dashed, solid, double, groove, ridge,
inset, outset.
Style Sheets – bordas
<html>
<head>
<style type="text/css">
p
•
Exemplo de espessura da
borda
{
border-style: solid;
border-bottom-width: 10px;
border-top-width: 0px;
border-right-width: 0px;
border-left-width: 0px;
}
</style>
</head>
<body>
<p>Borda com espessura inferior de 10px</p>
</body>
</html>
obs: A propriedade border-bottom-width não é reconhecida pelo Internet Explorer se usada
isoladamente. Use border-style para ser reconhecida pelo Internet Explorer
Style Sheets – bordas
•
Exemplo de declaração única. Propriedade
<html>
<head>
<style type="text/css">
<!-p {
border: thick groove rgb(255,0,255)
}
-->
</style>
</head>
<body>
<p>Bordas em declaração única</p>
</body>
</html>
Style Sheets – background
• As propriedades definem as
características do fundo dos elementos
HTML:
– background-color: cor do fundo;
– background-image: Define uma imagem como fundo;
– background-repeat: Maneira como a imagem de fundo será
posicionada;
– background-attachment: Define se a imagem de fundo rola ou
não com a tela;
– background-position: Define como a imagem de fundo é
posicionada;
– background: Maneira abreviada para todas as propriedaes.
Style Sheets – background-color
•
•
Aplica cores a elementos HTML. Pode-se aplicar
backgrounds diferentes em diferentes tipos de elementos
html.
<html>
Valores:
código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc
transparente: transparent
<head>
<style type="text/css">
body {background-color: #0000FF;}
h2 {background-color: #FF0000;}
p {background-color: #00FF00;}
</style>
</head>
<body>
<h2>Estude CSS</h2>
<p>Com CSS você controla melhor seu
layout</p>
</body>
</html>
Style Sheets – background-image
•
Possibilita aplicar imagens como fundo de diferentes tipos
de elementos html.
<html>
<head>
<style type="text/css">
body { background-image: url("fundo01.jpg");}
div#superior {background-image: url("fundo02.jpg");}
div#inferior{background-image: url("fundo03.jpg");}
p {padding: 30px 30px 30px 30px; color: white}
</style>
</head>
<body>
<h2>Estude CSS</h2>
<div id="superior" >
<p> Contedudo pertencente a divisão superior</p>
</div>
<div id="inferior" >
<p> Contedudo pertencente a divisão inferior</p>
</div>
</body>
</html>
Style Sheets – background-repeat
• Indica como a imagem especificada como
background será repetida para completar
os espaços.
• Valores Possíveis
– repeat: Indica que a imagem tanto se repete verticalmente
quanto horizontalmente, sendo o comportamento padrão,
caso não se especifique nada para background-repeat;
– repeat-x: Imagem só se repete horizontalmente;
– repeat-y: Imagem só se repete verticalmente;
– no-repeat: Imagem não se repete. Apenas aparece no seu
tamanho orignal.
Style Sheets – background-repeat
•
Usando: repeat-y, repeat-x, repeat.
<html>
<head>
<style type="text/css">
body {background-image: url("fundo01.jpg");
background-repeat: repeat-y;}
div#superior { background-image: url("fundo02.jpg");}
div#inferior { background-image: url("fundo03.jpg");
background-repeat: repeat-x;}
p {padding: 10px 10px 10px 10px; color: white}
div#inferior p {color: #00ff00}
</style>
</head>
<body>
<h2>Estude CSS</h2>
<div id="superior" >
<p> Contedudo pertencente a divisão superior,
mais contedudo pertencente a divisão superior,
mais contedudo pertencente a divisão superior.
</p>
</div>
<div id="inferior" >
<p> Contedudo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior,
...
</p>
</div>
</body>
</html>
</html>
Style Sheets – background-repeat
•
Exemplo do uso do valor no-repeat.
<html>
<head>
<style type="text/css">
body {
background-image: url("fundo01.jpg");
background-repeat: no-repeat;}
div#superior {
background-image: url("fundo02.jpg");
background-repeat: no-repeat;}
div#inferior{
background-image: url("fundo03.jpg");
background-repeat: no-repeat;}
p {padding: 10px 10px 10px 10px; }
div#inferior p {color: #00ff00}
</style>
</head>
<body>
<h2>Estude CSS</h2>
<div id="superior" >
<p> Contedudo pertencente a divisão superior,
mais contedudo pertencente a divisão superior,
mais contedudo pertencente a divisão
superior.
</p>
</div>
<div id="inferior" >
<p> Contedudo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior,
....
</p>
</div>
</body>
</html>
Style Sheets – background-position
•
Indica a posição que a imagem de background deve
aparecer no fundo.
– Valores:
●
x-pos y-pos
●
center left
●
x-% y-%
●
center center
●
top left
●
center right
●
top center
●
bottom left
●
top right
●
bottom center
●
bottom right
Style Sheets – background-position
<html>
<head>
<style type="text/css">
body {
background-image: url("fundo01.jpg");
background-repeat: no-repeat;
background-position: 200px 70px}
div#superior {
background-image: url("fundo02.jpg");
background-repeat: no-repeat;
background-position: center center; }
div#inferior{
background-image: url("fundo03.jpg");
background-repeat: no-repeat;
background-position: bottom right;}
p {padding: 10px 10px 10px 10px; }
div#inferior p {color: #00ff00}
</style>
</head>
<body>
<h2>Estude CSS</h2>
<div id="superior" >
<p> Contedudo pertencente a divisão superior,
mais contedudo pertencente a divisão superior,
mais contedudo pertencente a divisão superior.
</p>
</div>
<div id="inferior" >
<p> Contedudo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior,
mais conteúdo pertencente a divisão inferior.
</p>
</div>
</body>
</html>
Style Sheets – background-attachment
• Valores possíveis para
background-attachment:
– fixed: Imagem fixa na tela;
– scroll: Imagem rola com a tela.
ATIVIDADE
1) Reproduza o código em CSS (imagem no
próximo slide) para termos o mesmo
resultado da imagem. (Utilize o mesmo
HTML do exercício da atividade 4)
ATIVIDADE
ATIVIDADE
Prazo para postagem:
05/10/2013 até às 23h55
• Evite enviar a postagem de sua atividade no último dia.
Imprevistos podem ocorrer;
• Sua organização e pontualidade também estão sendo avaliadas;
•Não plagie. Caso constatado, a atividade receberá conceito negativo (NSF).
DÚVIDAS...
Acesse o Fórum de dúvidas e discussões
Diariamente.
Chat na Terça-Feira 01/10/2013
19h00 as 20h30
FERRAMENTAS DE APOIO
• Apostilas e vídeos do AVASIS;
• Fórum durante o módulo com resposta em até
06 horas úteis;
• Email do professor: [email protected]
POR HOJE É SÓ!
• PRÓXIMA AULA:
– Implementação HTML/CSS
• SIGA-ME:
– Facebook.com/iranpontes
– Twitter.com/iranpontes
– www.designculture.com.br
POR HOJE É SÓ!
"Qual de vocês, se quiser construir uma torre,
primeiro não se assenta e calcula o preço, para ver se
tem dinheiro suficiente para completá-la?
Pois, se lançar o alicerce e não for capaz de terminála, todos os que a virem rirão dele,
dizendo: ‘Este homem começou a construir e não foi
capaz de terminar”.
Lucas 14:28-30
Download
