Unidade 3 Folhas de Estilo (CSS)

O que são Folhas de Estilo

•Folhas de Estilos (CascadingStyle Sheetsou CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML, XHTMLou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.

•Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link(ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portalbasta portanto modificar apenas um arquivo.

Unidade 3: Folhas de Estilo (CSS)

Vantagens de se usar o CSS

•Controle do layout de vários documentosa partir de uma simples folha de estilos;

•Maior precisão no controle do layout;

•Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);

•Emprego de variadas, sofisticadas eavançadas técnicas de desenvolvimento.

Unidade 3: Folhas de Estilo (CSS)

Código HTML: <div id="geral">

<h1>Layout com 3 Colunas</h1>

<div id="esquerda">

<p>Conteúdo da coluna da esquerda</p>

</div>

<div id="direita">

<p>Conteúdo da coluna da direita</p>

</div>

<div id="conteudo">

<p>Conteúdo</p>

</div>

</div>

Código CSS: #geral {width:700px;}

#esquerda, #direita {width:150px;}

#conteudo {width:370px;}

#esquerda {float:left;}

#direita {float:right;}

#conteudo {margin-left:160px;}

Escrevendo em CSS •Vamos escrever o nosso primeiro HTML com CSS:

Unidade 3: Folhas de Estilo (CSS)

Escrevendo em CSS

•A sintaxe básica CSS: Suponha que desejamos uma cor de fundo vermelha para a página web.

Unidade 3: Folhas de Estilo (CSS)

#geral {width:700px;}

Escrevendo em CSS

•Aplicando CSS a um documento HTML:

Você pode aplicar CSS a um documento de três maneiras distintas. Os três métodos de aplicação estão exemplificados a seguir. Recomendamos que você foque no terceiro método, ou seja o método externo.

1)Método In-line(o atributo style):

Unidade 3: Folhas de Estilo (CSS)

<html> <head>

<title> Exemplo</ title>

</ head>

<body style="background-color: #F0;">

<p> Estaé umapáginavermelho</ p>

</ body>

</ html>

Uma maneira de aplicar CSS é pelo uso do atributo style do HTML. Tomando como base o exemplo mostrado anteriormente a cor vermelha para o fundo da página pode ser aplicada conforme mostrado a seguir:

Escrevendo em CSS 2)MétodoInterno(a tag style)

Unidade 3: Folhas de Estilo (CSS)

<html> <head>

<title> Exemplo</ title>

<style type="text/css“> body (background-color: # F0;) </ style>

</ head>

<body>

<p> umapáginavermelha</ p>

</ body>

</ html>

Uma outra maneira de aplicar CSS e pelo uso da tag <style>do HTML. Como mostrado a seguir:

Escrevendo em CSS 3)Método Externo(link para uma folha de estilo)

Unidade 3: Folhas de Estilo (CSS)

<html> <head>

<title> Minhadocumento</ title>

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

</ head>

<body>

<p> umapáginavermelha</ p>

</ body>

</ html>

O método recomendado é o de fazer referência para uma folha de estilos externa. Usaremos este método nos exemplos deste tutorial.

Exercício:

•Utilizando do nosso exemplo anterior de CSS divida o HTML, colocando o CSS em um arquivo externo.

Unidade 3: Folhas de Estilo (CSS)

Escrevendo em CSS Unidade 3: Folhas de Estilo (CSS) class

"class"é representada por "."seguido do seletor:

"id"é representada por "#"seguido do seletor:

#textoPadrao {color: red}

<p id="textoPadrao">

esta é uma id </p>

Atributo “id” versus“class”

O atributo idatribui um nome exclusivo a um elemento. Cada nomepode ser usado apenas uma única vez em uma determinada página. Por exemplo,se sua página tiver um idde nome “content”, ela não poderá conter outro idcom o mesmo nome. O atributo class, ao contrário, pode ser usado na mesma páginas varias vezes.

Escrevendo em CSS Unidade 3: Folhas de Estilo (CSS)

SpanImagine que você tem um texto e nesse testo você quer formatar uma palavra, frase ou qualquer outra parte do texto. Para isso você irá usar o span:

<p>

<span class="benefit“>masestaaquié

Essaparte do textoestaempreto diferente</span>, <span class="benefit“> grande</span> e <span class="benefit“> pequena</span>. </p> divé a abreviatura de divisão usado para criar uma divisão entre agrupamentos de conteudo,Vamos ver um exemplo tomando duas listas de presidentes dos Estados

Unidos agrupados segundo suas filiações políticas:

<div id="democrats"> <ul>

<li>Franklin D. Roosevelt</li>

<li>Harry S. Truman</li>

<li>John F. Kennedy</li>

</div>

<div id="republicans">

<li>Dwight D. Eisenhower</li>

<li>Richard Nixon</li>

<li>Gerald Ford</li>

</ul></div>#democrats {background:blue;} #republicans {background:red;}

Elementos propriedade do CSS Unidade 3: Folhas de Estilo (CSS)

Colors and backgrounds color background-color background-image background-repeat (repeat-x*, repeat-y*,no-repeat) background-attachment (scroll, fixed)* background-position* background

Font font-family font-style font-variant font-weight font-size font

* Itens previsto para o segundo módulo.

Text text-indent* text-align text-decoration letter-spacing* text-transform

* Itens previsto para o segundo módulo.

Elementos propriedade do CSS Unidade 3: Folhas de Estilo (CSS)

O box model

O boxmodel(modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opções de ajuste de margens, bordas, paddinge conteúdo para cada elemento. Ao lado apresentamos um diagrama representando a estrutura de construção do boxmodel:

margine padding

Um elemento tem quatro lados: right, left, top e bottom(direito, esquerdo, superior e inferior). A marginé a distância entre os lados de elementos vizinhos (ou às bordas do documento) e o paddingé a distância entre a borda e o texto.

margin:0; ou margin: 0; (cimadireitabaixoesquerda) padding:0; ou padding: 0; (cimadireitabaixoesquerda)

Elementos propriedade do CSS Unidade 3: Folhas de Estilo (CSS)

Borders

Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.

border-width border-color border-style* border

Height and width

As propriedade heighte widthdestinam-se a definir a altura e largura de um elemento.

Width height

* Itens previsto para o segundo módulo.

Elementos propriedade do CSS Unidade 3: Folhas de Estilo (CSS)

Float

Um elemento pode ser 'flutuado' à esquerda ou à direita com uso da propriedade float. Isto significa que o boxe seu conteúdo são

deslocados para a direita ou para a esquerda do documento (ou do bloco container) float: left ouright

Posicionando Elementos

Com posicionamento CSS podemos colocar um elemento em uma posição exata na página.

Combinado com floats, o posicionamento abre muitas possibilidades para criação de layouts precisos e avançados.

position: absolute ou relative

Exercício:

•Utilizando o exercício da

UNIDADE 2, use a folha de estilo para estilizar a página HTML. O resultado final deverá se parecer como na imagem ao lado.

Unidade 3: Folhas de Estilo (CSS)

Hacks CSS

linha ou de tabela etc

•É quando o desenvolvedor manipula os códigos CSS, de maneira que ele consiga adaptar o seu código a diferentes tipos de navegadores, (Internet Explorer, Firefox, Opera, Konqueror...) fazendo com que seu layout não tenha problemas de visualização do usuário final, como por exemplo, quebras de

•Bom, mas o CSS hacknão é programado para ser interpretado pelos browsers Netscape, Firefox, ou Internet Explorer para Mac, e sim para ser funcional ao Internet Explorer para PCs (Personal computers).

Unidade 3: Folhas de Estilo (CSS)

Hacks CSS

•Somente o Internet Explorer irá entender os HacksCSS, pois ele é o único que ao visualizar um página web, primeiramente “varre” todo o código a procura de erros e caso os encontre tenta concertar e exibir da melhor forma possível a página.

•Que navegador maravilhoso?Nada disso não se engane!Isso o torna mais lento na navegação e oculta muito erros que podem ter em sua página. Resultadovocê estará colaborando, sem saber, contra os Web Standards.

•Outra coisa é que o Internet Explorer insiste em não compreender as regras de CSS.

Unidade 3: Folhas de Estilo (CSS)

Hacks CSS

•Conclusão, é por esse motivo que no Curso de Design para WEB iremos utilizar o Mozilla Firefox para testar nossas web páginas, não iremos descartar o IE6 ou IE7 (infelizmente), mas usaremos o FireFoxcomo nosso amigo inseparável.

•Aplicar HacksCSS é muito simples, funciona assim: O código CSS que O FireFoxentende perfeitamente e o IE6 ou IE7 não entende, causando alterações no layout, então criaremos um erro no código CSS que o IE foi erro de digitação, assim automaticamente o corrige fazendo que o layout seja corrigido e exibido corretamente.

Unidade 3: Folhas de Estilo (CSS)

Hacks CSS •Vamos ao HackCSS:

O que essa regra que dizer é que tudo será aplicado aos elementos HTML descentes de *, ele seleciona todos os elementos filho e descendendesde HTML. O Firefox e o Opera ignoram qualquer regra que comece com * html, sem exceção, mas somente o IE6a interpreta normalmente o IE7 NÃO. Peguemos o seguinte código:

O resultado disso seria que todos H1, filhos de bodye de HTML teriam a cor azul. No Firefox e no Opera não ocorre nada.

Unidade 3: Folhas de Estilo (CSS) *html{ color: red; }

*htmlbodyh1 { color: red; }

Hacks CSS

Além do seletor universal (*) temos outros caracteres que nos auxiliam na correção de bugsdo IE6 e IE7. Para o IE6 usaremos o “_” (underline) e “@” (arroba) para o IE7, ficaria assim:

Como o browser faz a leitura do CSS em cascata, coloca-se primeiro o Hack para o IE7 e se necessário depois para o IE6, pois o IE6 interpreta o CSS diferente do IE7 por isso em alguns casas é necessário utilizar o “@” e “_”.

NOTA: IE7 interpreta somente o “@”.

Unidade 3: Folhas de Estilo (CSS) body{ color: red; @color: blue; _color: blue; }

Exercício:

Vamos a um exercício básico:abra no DreamWeaver este arquivoe observe o seu comportamento no FireFoxe no IE7. Agora edite o seu código e retire as tagsde comentário do CSS.

Unidade 3: Folhas de Estilo (CSS)

Comentários