FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

FTIN - Módulo de WebDesign

Prof. Iran Pontes

IMPLEMENTAÇÃO HTML/CSSFTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA

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

• 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;}

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 ‘;’

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.

body {background-color: white; color:black}a:link {color: red;}a:visited {color: blue;}a:active {color: green;}a:hover {color: fuchsia;}h1 {text-transform: uppercase;}

<head><link rel="stylesheet" href="style.css" type="text/css" ></head>

style.css

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 {background-color: white; color:black;}a:link {color: red;}a:visited {color: blue;}a:active {color: green;}a:hover {color: fuchsia;}h1 {text-transform: uppercase;}

style.css


• 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.

<html> <head> <title>Bach's home page</title> <style type="text/css">  </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>

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


• 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 > importadaestilo.css

h2 { color: #FFCC00; text-align: center; font:italic 9pt Verdana, Sans-serif;}

<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>

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.

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 p ul

strong li li li

Herança de propriedades de estilo

Atribuir a mesma cor ao texto de todos os

elementos

<style TYPE="text/css">h1 { color: red; }p { color: red; }li { color: red; }strong { color: red;}

</style>

<style type="text/css"> body { color: red;} </style>

Redefinir atributos herdados

<style type="text/css">body { color: red;} h1 { color: blue;}

</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.

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º: – 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.

body { background: url(textre.gif); }

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; }

O atributo class permite aplicar propriedades de acordo com o seletor usado e o nome da classe.

Exemplo de Style Sheet com definição de duas classes diferentes para o elemento p.

p.corum { color:#000000; } p.cordois { color:#0000FF; }

<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 idO 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"):

#principal{propriedade: valor; }

<h1 id="principal"> Exemplo CSS</h1>

arquivo.css

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 CSSVocê 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}

a.two:link {color: #ff0000}a.two:visited {color: #0000ff}a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}a.three:visited {color: #0000ff}a.three:hover {background: #66ff66}

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>

<body>

<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="two" href="default.asp" target="_blank">This link changes font-size</a></b></p>

<p><b><a class="three" href="default.asp" target="_blank">This link changes background-color</a></b></p>

<p><b><a class="four" href="default.asp" target="_blank">This link changes font-family</a></b></p>

<p><b><a class="five" href="default.asp" target="_blank">This link changes text-decoration</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 linhap:first-line {propriedade:valor;}

Declarações – Propriedades

display; list-style; list-style-image; list-style-type

Classificação

bottom; clip; height; left; overflow; position; right; top; visibility; width; z-index

Posicionamento

direction; letter-spacing; line-height; max-height; max-width; min-height; min-width; text-align; text-decoration; text-indent; text-shadow; text-transform; vertical-align; white-space; word-spacing

Texto

font; font-family; font-size; font-style; font-variant; font-weight

Fontes

cursor

Outras propriedades

border; border-bottom; border-bottom-color; border-bottom-style; border-bottom-width; border-collapse; border-color; border-left; border-left-color; border-left-style; border-left-width; border-right; border-right-color; border-right-style; border-right-width; border-style; border-top; border-top-color; border-top-style; border-top-width; border-width; clear; float; margin; margin-bottom; margin-left; margin-right; margin-top; padding; padding-bottom; padding-left; padding-right; padding-top; table-layout

Disposição (Layout)

background; background-attachment; background-color; background-image; background-position; background-repeat; color

Fundo e Cores

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

Percentagens

background; background-image; cursor; list-style-image; URI

background; background-color; border; border-color; border-bottom; border-bottom-color; border-color; border-left; border-left-color; border-right; border-right-color; border-top; border-top-color; color; text-shadow

Cores

background-position; border; border-bottom; border-bottom-width; border-left; border-left-width; border-right; border-right-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;

Propriedades que assumem este tipo de valorDimensões

Tipo de Valor

Valores - Dimensões• Referem-se a medidas horizontais e verticais• Existem dois tipos de dimensões

– Relativas – Absolutas

em – dimensão da fonte correnteex – altura da letra ‘x’ da fonte correntepx – pixels (relativa a resolução da tela)

Relativas

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 */

in – inches (polegadas – 2,54 cm)cm – centímetrosmm – milímetrospt – points (1/72 inch) pc – picas (12 pints)

Formato

Absolutas

Uninades

h1 { margin: 0.5em; } /* em */ h1 { margin: 1ex;} /* ex */p { font-size: 12px; } /* px */

Exemplo

<numero real> <unidade>

Formato

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. • Os valores de referência podem ser:

– outra propriedade do próprio elemento– uma propriedade de um elemento pai– um valor do contexto de formatação (ex: largura do bloco que contém o

elemento)

<numero real> %

Formato

/* 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%; }

• 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.

• RGB– #rrggbb (ex., color: #00cc00) – 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 com palavras chave */ body {color: black; background: white;} h1 { color: maroon;} h2 { color: olive;}

Valores - Cores

/* 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">



</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>


• 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

<html>

<head>




</style>

</head>

<body>

<h2>Família por nome: arial, helvetica, serif;</h2>

<p>Família genérica: sans-serif;<p>

</body>

</html>

Separa-se os tipos de fontes possíveis com virgula (,);

Se o nome for composto, por ex. Comic Sans SM. Usar aspas duplas: “Comic Sans SM”


• 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


• Font-style:• normal: fonte normal na vertical• italic: fonte inclinada• oblique:fonte obliqua


• 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 Esse exemplo combina mais de

um tipo de propriedade: font-style, font-size

<html>

<head>




</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">



</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] [/line-height] [family] | caption | icon | menu | message-box | small-caption | status-bar | inherit

– Os valores style, variant, weight e size, podem ser declarados em qualquer ordem.

<html>

<head>




</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– 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.

<html>

<head>




</style>

</head>

<body>

<p class="p1">Parágrafo com fonte status-bar</p>

<p class="p2">Parágrafo com fonte small-caption</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

letter-spacingValores 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>


<!–

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-spacingValores 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

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

<html>

<head>




</style>

</head>

<body>

<h1>Este é o cabeçalho 1</h1>



<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>

</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>

</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

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

<html>

<head>




</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 Textodirection

Valores Válidos:– ltr: texto escrito da esquerda para a

direita – rtl: texto escrito da direita para a

esquerda

<html>

<head>




</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>

</head>

<body>

<h1>espaços em branco serão ignorados</h1>

<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<html>

<head>




</style>

</head>

<body>

<p>Uma margem superior de 2cm</p>

</body>

</html>

margin-top: Espaçamento do elemento html para a margem superior

Style Sheets – Margem Direita<html>

<head>




</style>

</head>

<body>

<p>Uma margem direita de 300px nesta frase mais longa dentro do parágrafo</p>

</body>

</html>

margin-right : Espaçamento do elemento html para a margem direita

Style Sheets – Margem inferior<html>

<head>




</style>

</head>

<body>

<p>Uma margem inferior de 4.0em</p>

<p>Uma margem inferior de 4.0em</p>

</body>

</html>

margin-bottom: Espaçamento do elemento html para a borda inferior

Style Sheets – Margem para esquerda

<html>

<head>




</style>

</head>

<body>

<p>Uma margem esquerda de 10%</p>

</body>

</html>

margin-left: Espaçamento do elemento html para a margem da esquerda.

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>

</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

• Propriedades :– border-width: espessura da borda– border-style: estilo da borda– border-color: cor da borda

INDICANDO QUAL DAS BORDAS SOFRERÁ O EFEITO– border-top-width, border-top-style, border-top-color– border-right-width, border-right-style, border-right-color– border-bottom-width, border-bottom-style, border-bottom-color– Border-left-width, 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: nenhuma borda double: duplahidden: equivalente a none groove: entalhadadotted: borda pontilhada ridge: borda em ressaltodashed: borda tracejada inset: borda em baixo relevosolid: borda contínua outset: borda em alto relevo

– widththin: borda fina thick: borda grossamedium: borda média length: uma medida reconhecida pelas CSS (px, pt, em, cm ...)


Style Sheets – bordas• Mesclando as três propriedades

– border-width – border-style – border-color

<html>

<head>




</style>

</head>

<body>

<h3>Borda média, contínua e azul</h3>

<p>Borda 6px, tracejada e vermelha</p>

</body>

</html>


• border-style: dotted, dashed, solid, double, groove, ridge, inset, outset.


• Exemplo de espessura da borda

<html>

<head>


p {

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


• Exemplo de declaração única. Propriedade <html>

<head>




</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.

• Aplica cores a elementos HTML. Pode-se aplicar backgrounds diferentes em diferentes tipos de elementos html.

• Valores:código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent

Style Sheets – background-color

<html><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>

• 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>


• 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>


• Indica a posição que a imagem de background deve aparecer no fundo.

–Valores:

Style Sheets – background-position

● x-pos y-pos ● x-% y-% ● top left ● top center ● top right

● center left ● center center ● center right ● bottom left ● 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>

• Valores possíveis para background-attachment:– fixed: Imagem fixa na tela;

– scroll: Imagem rola com a tela.

Style Sheets – background-attachment

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/201319h00 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

http://www.bibliaonline.com.br/acf/lc/14/28-30

Documents

FTIN - Módulo de WebDesign Prof. Iran Pontes. IMPLEMENTAÇÃO HTML/CSS FTIN – FORMAÇÃO TÉCNICA EM INFORMÁTICA