UNIVERSIDADE FEDERAL DE SANTA MARIA - UFSM COLGIO AGRCOLA DE FREDERICO WESTPHALEN WEBDESIGN II

WEBDESIGN II AULA 3 CSS

Folhas de Estilo em Cascata

DISCIPLINA: WEBDESIGN II PROF.: ROMULO VANZIN

Data: 18/09/2013

TPICOS A SEREM ABORDADOS

Identificando e agrupando elementos (classes e id) O box model em CSS Agrupando elementos (span e div) Bordas Altura e Largura Posicionamento Absoluto Posicionamento Relativo Propriedade Clear Utilizando z-index

Identificando e agrupando elementos

Em alguns casos voc deseja aplicar estilos a um elemento ou grupo de elementos em particular. Nesta lio veremos como usar class e id para estilizar elementos. Como definir uma cor para um determinado cabealho, diferente da cor usada para os demais cabealhos do website? Como agrupar links em diferentes categorias e estilizar cada categoria diferentemente?

Agrupando elementos com uso de classe

Vamos supor que temos duas listas de links para diferentes tipos de tnis usadas na produo. <p>Tnis feminino:</p> <ul> <li><a href="av.html">Aventura</a></li> <li><a href="sk.html">Skate</a></li> <li><a href="tr.html">Training</a></li> </ul> <p>Tnis masculino:</p> <ul> <li><a href=ru.html">Running</a></li> <li><a href=tr.html">Triathlon</a></li> <li><a href=ca.html">Casual</a></li> </ul>

Agrupando elementos com uso de classe

Queremos que os links para tnis feminino sejam na cor amarela, para tnis masculino na cor vermelha e os demais links na pgina permaneam na cor azul. Para conseguir isto, dividimos os links em duas categorias. Isto feito atribuindo uma classe para cada link, usando o atributo class. Vamos especificar esta classe no exemplo a seguir:

Agrupando elementos com uso de classe

Agora podemos definir propriedades especficas para links pertencentes as classes amarelo e vermelho, respectivamente. a { color: blue; } a.amarelo{ color: #FFBB00; } a.vermelho{ color: #800000; }

Agrupando elementos com uso de classe

<p>Tnis feminino:</p> <ul> <li><a href=av.html class="amarelo" >Aventura</a></li> <li><a href=sk.html class="amarelo" >Skate</a></li> <li><a href=tr.html" class="amarelo" >Training</a></li> </ul> <p>Tnis masculino:</p> <ul> <li><a href=ru.html" class="vermelho">Running</a></li> <li><a href=tr.html" class=" vermelho ">Triathlon</a></li> <li><a href=ca.html" class=" vermelho">Casual</a></li> </ul>

Agrupando elementos com uso de classe

Como mostrado no exemplo acima, podese definir propriedades para estilizao dos elementos pertencentes a uma determinada classe usando um .nomedaclasse na folha de estilos do documento.

Identificando um elemento com uso de id

Alm de agrupar elementos podemos querer atribuir identificao a um nico elemento. Isto feito usando o atributo id. O que h de especial no atributo id que no poder existir dois ou mais elementos com a mesma id, ou seja em um documento apenas um e somente um elemento poder ter uma determinada id. Cada id nica. Para casos em que haja necessidade de mais de um elemento com a mesma identificao usamos o atributo class.

Identificando um elemento com uso de id

A seguir um exemplo de possvel uso de id: <h1>Captulo 1</h1> ... <h2>Captulo 1.1</h2> ... <h2>Captulo 1.2</h2> ... <h1>Captulo 2</h1> ... <h2>Captulo 2.1</h2> ... <h3>Captulo 2.1.2</h3>

Identificando um elemento com uso de id

O exemplo acima simula os cabealhos de um documento estruturado em captulos e pargrafos. comum atribuir uma id para cada captulo como mostrado a seguir: <h1 id="c1">Captulo 1</h1> ... <h2 id="c1-1">Captulo 1.1</h2> ... <h2 id="c1-2">Captulo 1.2</h2> ... <h1 id="c2">Captulo 2</h1> ... <h2 id="c2-1">Captulo 2.1</h2> ... <h3 id="c2-1-2">Captulo 2.1.2</h3>

Identificando um elemento com uso de id

Vamos supor que o cabealho do captulo 1.2 deva ser na cor vermelha. Isto pode ser feito conforme mostrado na folha de estilo a seguir: #c1-2 { color: red; }

O box model em CSS

O box model (modelo das caixas) em CSS, descreve os boxes (as caixas) geradas pelos elementos HTML. O box model, detalha ainda, as opes de ajuste de margens, bordas, padding e contedo para cada elemento. Abaixo apresentamos um diagrama representando a estrutura de construo do box model.

O box model em CSS

O box model em CSS

Na prtica tomando como base um cabealho e um texto. O HTML para nosso exemplo (o texto foi retirado da Declarao Universal dos Direitos Humanos e est no original em ingls) o mostrado abaixo:

O box model em CSS

<h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p>

Definindo estilos para cores e fontes o exemplo pode ser apresentado como a seguir:

Agrupando elementos (span e div)

Os elementos <span> e <div> so usados para agrupar e estruturar um documento e so freqentemente usados em conjunto com os atributos class e id. Veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importncia para as CSS.
Agrupando

com <span> Agrupando com <div>

Agrupando com (span)

O elemento <span> um elemento neutro e que no adiciona qualquer tipo de semntica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes especficas do texto no seu documento.

Agrupando com (span)

Um exemplo deste uso mostrado na citao abaixo de autoria de Benjamin Franklin:

cedo faz o homem

<p>Dormir cedo e acordar saudvel, rico e sbio.</p>

Vamos supor que queremos enfatizar na cor vermelha os benefcios apontados por Franklin pelo fato de no se passar o dia dormindo. Para isto marcamos os benefcios com <span>. A cada span atribumos uma class, e estilizamos na folha de estilos.

Agrupando com (span)

<p>Dormir cedo e acordar cedo faz o homem <span class=vermelho">saudvel</span>, <span class=vermelho">rico</span> e <span class=vermelho">sbio</span>.</p>

A folha de estilos:

span.vermelho { color: red; }

Agrupando com (div)

Enquanto <span> usado dentro de um elemento nvel de bloco como vimos no exemplo anterior, <div> usado para agrupar um ou mais elementos nvel de bloco. Diferenas parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiaes polticas:

Agrupando com (div)

<div id="democratas"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div>

Agrupando com (div)

<div id="republicanos"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>

Agrupando com (div)

E na folha de estilos, podemos agrupar a estilizao da mesma maneira como fizemos no exemplo acima: #democratas { background: blue; } #republicanos { background: red; }

Agrupando com (div)

O div uma tag HTML simples de entender. Ela delimita determinada rea da pgina. Pode conter qualquer tipo de coisa: imagem, objeto flash, texto, outras divs, etc. Ex.: <div>isto aqui o contedo da div</div>

Agrupando com (div)

Provavelmente havero alguns ou talvez muitos boxes CSS <divs> em uma pgina e assim devemos dar-lhes nomes que os identifique. Isto feito atravs de um 'identificador' - que abreviadamente denominamos id. Uma id deve ser nica por box e identifica um box na sua pgina, permitindo que tanto voc quanto o navegador saibam como apresentar o box com aquele nome.

Agrupando com (div)

Exemplo

<div id="topo"> Box Topo </div> <div id="centro"> Box do Centro </div> <div id="base"> Box da Base</div>

BORDAS

Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separao entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na pgina. Bordas esto disponveis em uma variedade de estilos e voc poder defini-las separadamente para cada lado, em termos de espessura, estilo e cor. A espessura da borda aumenta o comprimento do box.

BORDAS

border-width:

espessura da borda; estilo da borda; cor da borda;

border-style:

border-color:

BORDAS
#topo { border-width: thick; border-style: dotted; border-color: gold; }

BORDAS
#centro { border-width: 20px; border-style: outset; border-color: red; }

BORDAS
#base { border-width: 1px; border-style: dashed; border-color: blue; }

BORDAS

Aplique a para o id topo as margens:

Topo:

100px; Direita: 40px; Rodape: 10px; Esuqerda: 70px;

ALTURA E LARGURA

A propriedade width destina-se a definir a largura de um elemento. E podemos definir a altura de um elemento com a propriedade height. Ex.:

height: 100px; width: 200px;

Posicionamento Absoluto

Alm de ter um comprimento e uma altura os boxes CSS podem ser colocados em qualquer lugar da pgina atravs da definio CSS position: absolute; A maneira mais simples de posicionar um box seria definir algo como top:50px; left:100px (topo: 50px; esquerda: 100px) mas no necessariamente ter que ser top e left, poder ser top e right (topo e direita), bottom e left (fundo e esquerda) ou bottom e right (fundo e direita). Um elemento posicionado absolutamente no cria nenhum espao no documento. Isto significa que no deixa nenhum espao vazio aps ser posicionado.

Posicionamento Relativo

Posicionamento relativo considera que boxes CSS localizam-se prximos a um outro box. O primeiro box ocupa a posio mais acima, o prximo box localiza-se abaixo do primeiro, o seguinte abaixo deste. Eles efetivamente flutuam colocando-se de cima para baixo na pgina.

Posicionamento Relativo
#topo {
border-width: thick; border-style: dotted; border-color: gold; position: relative;

Posicionamento Relativo
#centro {
border-width: 20px; border-style: outset; border-color: red; padding-left:120px; position: relative; float:left;

Posicionamento Relativo
#base {
border-width: 1px; border-style: dashed; border-color: blue;

Para fazer com que boxes flutem um ao lado do outro, voc definir float: left; ou float: right; assim, os boxes vo flutuando um ao lado do outro enquanto houver espao lateral. Acabado o espao lateral eles ocuparo a posio abaixo daqueles que j flutuaram, comeando uma nova camada.

A propriedade clear

A propriedade clear usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padro, o elemento subsequente a um float, ocupa o espao livre ao lado do elemento flutuado. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral : se clear, for por exemplo definido both para um box, a margem superior deste box ser posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no cdigo.

Usando z-index (Layers)

CSS usa o espao tri-dimensional - altura, largura e profundidade. Nos itens anteriores vimos as duas primeiras dimenses. Agora veremos como colocar elementos em layers (camadas). Resumindo, camadas significam como os elementos se sobrepem uns aos outros. Para fazer isto definimos para cada elemento um nmero ndice (z-index). O comportamento que elementos com nmero ndice maior se sobrepem queles com menor nmero.

Usando z-index (Layers)

#topo {
background-color:#00F; position:absolute; top: 50px; left: 50px; z-index: 1;

} #centro {
background-color:#0F0; position:absolute; top: 55px; left: 55px; z-index: 2;

EXERCCIO
1 - Construa uma pgina contendo o seguinte layout:

EXERCCIO
2 - Construa uma pgina contendo o seguinte layout:

EXERCCIO
3 - Construa uma pgina contendo o seguinte layout:

EXERCCIO
4- Construa uma pgina contendo o seguinte layout:

DVIDAS

http://www.cafw.ufsm.br/~romulo romulovanzin@yahoo.com.br