Cascading Style Sheets CSSarestivo/wiki.old/lib/exe/fetch...• As propriedades que nos permitem mexer no fundo de um elemento são: – background-color: a cor de fundo. – background-image:

André Restivo SINF 2003/2004 CSS: 1

Cascading Style SheetsCSS

Sistemas de InformaçãoAndré Monteiro de Oliveira Restivo

E-mail: [email protected]: www.fe.up.pt/~arestivo/aulas/sinf


CSS: O que são?

• CSS, ou Cascading Style Sheets, são uma forma de alterar a apresentação de um documento HTML.– HTML = Conteúdo– CSS = Apresentação

• Os estilos CSS são da forma propriedade: valor e podem ser aplicados a quase todas as marcas HTML.


CSS: Como usar?

• Nas próprias marcas HTML:<p style="color: red">texto</p>

• No próprio documento HTML :<head>

<title>CSS Example</title> <style type="text/css">

p { color: red; } a { color: blue; }

</style>


CSS: Como usar?

• Num ficheiro CSS separado (a forma correcta):

<html><head>

<title>CSS Example</title><link rel="stylesheet" type="text/css" href="web.css" />

</head>


Selectores, Propriedades e Valores

• Um ficheiro CSS é composto por selectores, propriedades e valores.

• Um selector indica a que porção do HTML devem ser aplicados os estilos.

• Para cada selector podemos alterar as suas propriedades atribuindo-lhes novos valores.


Selectores, Propriedades e Valores

• O formato de um ficheiro CSS é o seguinte:

selector {propriedade: valor;propriedade: valor;propriedade: valor;}

selector {propriedade: valor;propriedade: valor;propriedade: valor;}


Selectores HTML

• Os selectores HTML permitem aplicar estilos às marcas HTML.

• Um selector HTML não é mais que o nome da marca:

body { font-size: 0.8em; color: navy;

}


Tamanhos• Em CSS existem várias formas de especificar tamanhos:

– em (exemplo, font-size: 2em) é um elemento com tamanho aproximadamente igual à altura de um caractér.

– px (exemplo, font-size: 12px) é a unidade para píxeis.– % (exemplo, font-size: 80%) é a unidade para percentagens.– pt (exemplo, font-size: 12pt) é a unidade para pontos.– Existem ainda outras unidades como cm(centímetros),

mm(milímetros), pc(picas) e in(polegadas).• Quando um valor é zero não é necessário especificar a

unidade.• Devemos tentar não usar medidas absolutas como px.

Para o tamanho das letras o ideal é usar em ou %. A unidade px pode ser usada por exemplo para definir contornos.


Cores

• Existem 16,777,216 cores disponíveis nas CSS• As cores podem ser um nome pré-definido:

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

• Podem ser definidas por valores RGB.• Ou por um código hexadecimal.

• red é o mesmo que rgb(255,0,0), o mesmo que rgb(100%,0%,0%), o mesmo que #ff0000 e o mesmo que #f00.


Cores

• As cores podem ser aplicadas usando as propriedades color e background-color:

h1 { color: #ffc;background-color: #009;

}


Texto• Os atributos que permitem mudar a forma como o texto

é representado são: font-family, font-size, font-weight, font-style, text-decoration e text-transform.

• font-family indica a fonte a ser usada. – Esta fonte tem de estar no computador da pessoa que está a ver

a página por isso não vale a pena usar fontes obscuras. – Podemos especificar várias fontes separadas por vírgulas. O

browser usa a primeira que o utilizador tenha.– Se o nome da fonte tiver mais de uma palavra é necessário usar

aspas.– O último valor desta propriedade deverá ser uma classe de fonte

mais genérica como serif ou sans-serif.• font-size indica o tamanho da fonte.


Texto

• font-weight indica se a fonte é bold ou não. – Os valores a utilizar são bold e normal. – Em teoria também podiam ser: bolder, lighter,

100, 200, 300, 400, 500, 600, 700, 800 or 900 mas o browsers actuais não percebem estes valores.

• font-style indica se o texto deve ser escrito em itálico ou não.– Os valores a utilizar são italic ou normal.


Texto

• text-decoration indica se o texto deve ser sublinhado ou não.– Os valores possíveis são overline, line-trough,

underline e none.

• text-transform muda a capitalização das letras– Os valores possíveis são: Capitalize,

UPPERCASE, lowercase e none.


Texto

Exemplo: <strong> nem sempre tem de ser BOLD.

strong { font-style: italic;text-transform: uppercase;}


Espaçamentos

• Existem ainda propriedades que permitem mudar o espaçamento entre as várias componentes do texto (letras, palavras, linhas,parágrafos, ...)

• Os atributos letter-spacing e word-spacing permitem mudar o espaçamento entre letras ou entre palavras. Os valores permitidos são um comprimento ou normal.

• O atributo line-height altera a altura de uma linha sem alterar o tamanho da fonte. Os valores permitidos são um comprimento, uma percentagem ou normal.


Alinhar Texto

• A propriedade text-align permite alinhar o texto dentro de um elemento (atenção que não alinha o elemento em si).– Os valores possíveis são: center, left, right e

justify.

• A propriedade text-indent permite indentar a primeira linha de um parágrafo. – Os valores desta propriedade podem ser um

comprimento ou uma percentagem.


Margens

• Os atributos margin e padding são usados para definir o espaçamento entre elementos.

• Todos os elementos de uma página seguem o chamado Box Model:

Elemento

Padding

Border

Margin


Margens

• Podemo-nos referir a cada margem como um todo ou apenas a uma parte:– padding-left, margin-right, ...– As partes são top, left, right e bottom.

• Os valores que as margens podem tomar são comprimentos.


Contornos

• Entre as margens margin e padding existe uma margen especial que permite criar contornos nos elementos: border-width.

• Também nos podemos referir a esta margem da seguinte forma: border-width-right, border-width-top,...

• As borders têm propriedades especiais:– A propriedade border-color permite definir a cor desta

margem.– A propriedade border-style permite definir o estilo

com valores: solid, dotted, dashed, double, groove, ridge, inset e outset.


Outros Selectores

• O uso de selectores HTML não torna as CSS especialmente atractivas.

• Podemos mudar o estilo dos parágrafos mas não podemos ter dois parágrafos com estilos diferentes.

• Para isso vamos usar os atributos id e class do HTML e dois tipos de selectores novos: #id e .class

• Também nos podemos referir a um selector HTML de uma determinada classe ou com um determinado id: p#id ou p.class


Selectores Múltiplos

• Se queremos dar as mesmas propriedades a um grupo de selectores podemos usar a vírgula para os separar e definir as propriedades para todos eles de uma só vez:

h2, .umaClasse, p { color: red;

}


Selectores encaixados

• Podemos querer alterar o estilo apenas dos parágrafos que estão dentro de um elemento <div class=“conteudo”>

• Para isso podemos usar selectores encaixados:

.content p { color: #ff0; }


Pseudo Classes

• As pseudo classes estão ligados a alguns selectores e permitem a referência a um estado desse selector.

• Neste momento as pseudo classes que os browsers suportam são as da marca <a>: link, visited, active e hover

• Um selector de uma pseudo classe toma a forma: a:hover


Propriedades Condensadas

• Existem algumas formas de escrever condensar propriedades de vários elementos num elemento só.

• Para nos referirmos a todas as propriedades de um contorno de uma só vez:

border: border-width border-style border-color;



• Para nos referirmos a vários border-width, border-color, border-style, margin ou padding de uma só vez:

border-width: top right bottom left;margin: top right bottom left;padding: top right bottom left;

• Ou:

margin: top/bottom right/left;



• Também nos podemos referir a várias propriedades da formatação de texto de uma só vez:

font: font-style font-weight font-size/line-height font-family;


Exemplo

p { font: 1em/1.5 "Times New Roman", times, serif; padding: 3em 1em; border: 1px black solid; border-width: 1px 5px 5px 1px; border-color: red green blue yellow; margin: 1em 5em;

}


Imagens de Fundo

• Podemos colocar imagens de fundo em quase todos os elementos HTML.

• As propriedades que nos permitem mexer no fundo de um elemento são:– background-color: a cor de fundo.– background-image: a URL da imagem de fundo.– background-repeat: O modo como a imagem se vai

repetir. Pode ser repeat, repeat-y, repeat-x ou no-repeat.

– background-position: A posição da imagem. Pode ser: top, center, bottom, left, right ou qq combinação lógica destes valores.


Display

• A propriedade display permite alterar a forma como cada elemento é colocado na página.

• Por defeito existem elementos HTML que seguem o fluxo da linha. Estes elementos dizem-se inline. Exemplos: <strong>, <img>, <span>, ...

• Os elementos que forçam uma mudança de linha antes e depois de serem colocados na página dizem-se block-line. Exemplos: <p>, <h1>, <div>, ...


Display

• A propriedade display pode ter os seguintes valores:– inline: O elemento passa a ser um elemento

inline.– block: O elemento passar a ser um elemento

block-line.– none: O elemento passa a não ser colocado

na página. Útil para, por exemplo, retirar o ménu da versão de impressão de uma página.


Display

• Existem ainda outros valores não tão usuais que a propriedade display pode tomar:– Para tabelas: table-row, table-cell, table-

column, table-row-group, table-column-group, table-header-group, table-footer-group, table-caption e inline-table.

– Outros: list-item, run-in, compact e marker.


Posicionamento

• O atributo position permite indicar uma de quatro formas de posicionar o elemento:– static: Valor por defeito do HTML. Posiciona os

elementos segundo o fluxo natural da página.– absolute: Retira um elemento do fluxo normal da

página e permite coloca-lo em qualquer sítio com as propriedades top, right, bottom e left.

– relative: Parecido com o static mas os elementos podem ser ajustados usando as propriedades top, right, bottom e left.

– fixed: Comporta-se como o absolute mas posiciona o elemento em relação à janela do browser e não em relação à página.


Exemplo

<div id="navigation"> ...</div> <div id="content"> ...</div>

#navigation { position: absolute;top: 0;left: 0;width: 10em;

}

#content { margin-left: 10em;

}

Navigation Content


Exemplo<div id="navigation"> ...</div> <div id="navigation2"> ...</div> <div id="content"> ...</div>

#navigation { position: absolute; top: 0; left: 0; width: 10em;

}

#navigation2 { position: absolute; top: 0; right: 0; width: 10em;

}

#content { margin: 0 10em;

}

Navigation Content

Navigation2


Mais Exemplos de Layout• Little Boxes:

http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html


Mais Exemplos de Layout

• Glish.comhttp://www.glish.com/css/

• Layout Reservoirhttp://www.bluerobot.com/web/layouts/


Floats

• Ao utilizar a propriedade float podemos obrigar um elemento a ficar à direita ou esquerda da linha, fazendo os restantes elementos da linha rodeá-lo.

• Os valores possíveis são: left e right.

img {float:left;

}


Clear

• Se não quisermos que um elemento rodeie os elementos que estão floatedpodemos usar a propriedade clear.

• Os valores que pode tomar são:– left: não rodear os elementos float à sua

esquerda.– right: não rodear os elementos float à sua

direita.– both: não rodear os elementos float à sua

esquerda ou direita.


Exemplos: Float e Clear

#header { } #nav {

width: 15em; float:left;

} #content {

margin-left: 16em; } #footer {

clear:left;}

header

nav1

content

footer

15 em

16 em

float left


Exemplos: Float e Clear#header{ } #nav1{

float: left; width: 15em;

} #nav2 {

float: left; clear: left; width: 15em;

} #content {

margin-left: 16em;} #footer { clear:left; }

header

nav1

content

footer

15 em

16 em

float left

nav2

float left

clear left : Para o nav2 não ficar ao lado do nav1.

clear left: Para o footer não ficar ao lado do nav2 se o content for muito pequeno.


Exemplos: Float e Clear#header{ }

#nav1{ float:left; width: 15em;

}

#nav2 { float:right; width: 15em;

}

#content { margin-left: 16em; margin-right: 16.5em; margin-top: 4px;

}

#footer { clear:left;}

header

nav1

content

footer

15 em

16 em

float left

nav2

float right

15 em

16 em


Regras @: import

• @import url(style.css)<style type="text/css">@import url(web.css);</style>

• Substitui:<link rel="stylesheet" type="text/css" href="web.css" />

• Vantagem:Esconder regras CSS de browsers que entendem a marca <link>, nãoentendem regras @ e não estão preparados devidamente para CSS.


Tipos de Media

• Podemos dizer que determinadas regras CSS só são para ser aplicadas em alguns tipos de media:– all – Todos os tipos. – aural – Para sintetizadores de fala. – handheld – Para computadores de mão. – print – Para impressoras. – projection – Para projectores. – screen – Para computadores.

• Para indicar o tipo de media podemos fazer:<style type="text/css“media=“all”>@import url(web.css);</style><link rel="stylesheet" type="text/css" href="web.css"

media=“screen/projection”/>


Regras @: Pages

• Algumas regras que só se aplicam a impressões:

@page { size: 15cm 20cm; margin: 3cm;

}

• Atenção nestes casos só se usam dimensões reais como cm.


Regras @: Pages (pseudo)

• Para impressões existem ainda algumas pseudo regras que podemos utilizar:– @page:first (primeira página do documento)– @page:left (páginas que ficam do lado

esquerdo da impressão)– @page:right (páginas que ficam do lado

direito da impressão)


Pseudo Elementos

• Funcionam um pouco como as Pseudo Classes mas em vez de criarem novas classes que podemos usar criam novos elementos baseados em alguma propriedades:– p:first-letter { }– p:first-letter { }– p:before { }– p:after { }

• Os pseudo elementos before e after, juntamente com a propriedade content, permitem adicionar conteúdo antes ou depois de qualquer marca.


Content

• A propriedade content permite os seguintes valores:– open-quote: abrir aspas.– close-quote: fechar aspas.– no-open-quote: não abrir aspas.– no-close-quote: não fechar aspas.– Qualquer texto dentro de aspas.– Qualquer imagem usando url(urlimagem).

Documents

Cascading Style Sheets CSSarestivo/wiki.old/lib/exe/fetch...• As propriedades que nos permitem mexer no fundo de um elemento são: – background-color: a cor de fundo. – background-image: