FTIN - Módulo de WebDesign

FTIN - Módulo de WebDesign
Prof. Iran Pontes

IMPLEMENTAÇÃO HTML/CSS
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;} h1 { color: red; text-align: center;} Escrevendo várias regras para o mesmo seletor 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. Equivalente a h1 { font-weight: bold;} h2 { font-weight: bold;} h3 { font-weight: bold;} 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 {background-color: white; color:black} a:link {color: red;} a:visited {color: blue;} a:active {color: green;} a:hover {color: fuchsia;} h {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>> style.css body {background-color: white; color:black;} a:link {color: red;} a:visited {color: blue;} a:active {color: green;} a:hover {color: fuchsia;} h {text-transform: uppercase;}

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>
<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> 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 > importada estilo.css <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> 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.

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 body h1 p ul strong li <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>

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> Um elemento pode redefinir propriedades herdadas: Se existirem regras contraditórias, prevalecem as regras mais específicas. Mantém as propriedades não redefinidas. Redefinir atributos herdados <style type="text/css"> body { color: red;} h1 { color: blue;} </style>

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;} h2 { color: red;} h3 { color: red;}

elementoHTML.minhaclasse { propriedade: valor; }
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} 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 linha p: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

Propriedades que assumem este tipo de valor
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 valor Dimensões Tipo de Valor

<numero real> <unidade>
Valores - Dimensões Referem-se a medidas horizontais e verticais Existem dois tipos de dimensões Relativas Absolutas Formato <numero real> <unidade> em – dimensão da fonte corrente ex – altura da letra ‘x’ da fonte corrente px – 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ímetros mm – milímetros pt – 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

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) Formato <numero real> % /* 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. 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 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;} /* Definição de cores em valores RGB*/ p { color: #f00; } /* #rgb */ p { color: #ff0000; } /* #rrggbb */ p { color: rgb(255,0,0); } /* inteiro entre */ p { color: rgb(100%, 0%, 0%); } /* real entre 0.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 type="text/css">  </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
<html> <head> <style type="text/css">  </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> Esse exemplo combina mais de um tipo de propriedade: font-style, font-size

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 type="text/css">  </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 type="text/css">  </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
<html> <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> 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

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> <head> <style type="text/css">  </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> 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

Style Sheets – Decoração do Texto
<html> <head> <style type="text/css">  </style> </head> <body> <h1>Texto com sublinhado</h1> <h2>Texto com linha em cima</h2> <h3>Texto com sobrelinhado</h3> <p> <a href=" é um link sem sublinhado</a> </p> </body> </html> 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

Style Sheets – Identação do Texto
<html> <head> <style type="text/css">  </style> </head> <body> <h3>Texto com recuo de 80 pixel</h3> <p>Texto com recuo de 3.0em</p> </body> </html> text-indent Valores Válidos: lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) % : porcentagem da largura do elemento pai

Style Sheets – Forma das Letras
<html> <head> <style type="text/css">  </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> 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

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">  </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
<html> <head> <style type="text/css">  </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> 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>

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">  </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">  </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">  </style> </head> <body> <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">  </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">  </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: 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 style width
código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc style none: nenhuma borda double: dupla hidden: equivalente a none groove: entalhada dotted: borda pontilhada ridge: borda em ressalto dashed: borda tracejada inset: borda em baixo relevo solid: borda contínua outset: 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 ...)

Style Sheets – bordas Mesclando as três propriedades border-width
<html> <head> <style type="text/css">  </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 Exemplo de espessura da borda
<html> <head> <style type="text/css"> 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

Style Sheets – bordas Exemplo de declaração única. Propriedade
<html> <head> <style type="text/css">  </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. Valores: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent <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> </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.

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, ... </body> </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"); div#inferior{ background-image: url("fundo03.jpg"); 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, .... </body> </html>

Style Sheets – background-position
Indica a posição que a imagem de background deve aparecer no fundo. Valores: 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-position: center center; } div#inferior{ background-image: url("fundo03.jpg"); 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. </body> </html>

Style Sheets – background-attachment
Valores possíveis para background-attachment: fixed: Imagem fixa na tela; scroll: Imagem rola com a tela.

ATIVIDADE 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).

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; do professor:

POR HOJE É SÓ! PRÓXIMA AULA: SIGA-ME: Implementação HTML/CSS
Facebook.com/iranpontes Twitter.com/iranpontes

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

FTIN - Módulo de WebDesign

Apresentações semelhantes

Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

FTIN - Módulo de WebDesign

Apresentações semelhantes

Apresentação em tema: "FTIN - Módulo de WebDesign"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback