Cascading Style Sheets CSS Sistemas de Informação André Monteiro de Oliveira Restivo E-mail: andre.restivo@fe.up.pt URL: www.fe.up.pt/~arestivo/aulas/sinf André Restivo SINF 2003/2004 CSS: 1
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. André Restivo SINF 2003/2004 CSS: 2
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> André Restivo SINF 2003/2004 CSS: 3
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> André Restivo SINF 2003/2004 CSS: 4
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. André Restivo SINF 2003/2004 CSS: 5
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; } André Restivo SINF 2003/2004 CSS: 6
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; André Restivo SINF 2003/2004 CSS: 7
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. André Restivo SINF 2003/2004 CSS: 8
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. André Restivo SINF 2003/2004 CSS: 9
Cores As cores podem ser aplicadas usando as propriedades color e background-color: h1 { color: #ffc; background-color: #009; } André Restivo SINF 2003/2004 CSS: 10
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. André Restivo SINF 2003/2004 CSS: 11
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. André Restivo SINF 2003/2004 CSS: 12
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. André Restivo SINF 2003/2004 CSS: 13
Texto Exemplo: <strong> nem sempre tem de ser BOLD. strong { font-style: italic; text-transform: uppercase; } André Restivo SINF 2003/2004 CSS: 14
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. André Restivo SINF 2003/2004 CSS: 15
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. André Restivo SINF 2003/2004 CSS: 16
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: Border Margin Elemento Padding André Restivo SINF 2003/2004 CSS: 17
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. André Restivo SINF 2003/2004 CSS: 18
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-widthtop,... 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. André Restivo SINF 2003/2004 CSS: 19
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 André Restivo SINF 2003/2004 CSS: 20
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; } André Restivo SINF 2003/2004 CSS: 21
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; } André Restivo SINF 2003/2004 CSS: 22
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 André Restivo SINF 2003/2004 CSS: 23
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; André Restivo SINF 2003/2004 CSS: 24
Propriedades Condensadas Para nos referirmos a vários border-width, border-color, border-style, margin ou padding de uma só vez: Ou: border-width: top right bottom left; margin: top right bottom left; padding: top right bottom left; margin: top/bottom right/left; André Restivo SINF 2003/2004 CSS: 25
Propriedades Condensadas 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; André Restivo SINF 2003/2004 CSS: 26
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; André Restivo SINF 2003/2004 CSS: 27
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 norepeat. background-position: A posição da imagem. Pode ser: top, center, bottom, left, right ou qq combinação lógica destes valores. André Restivo SINF 2003/2004 CSS: 28
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>,... André Restivo SINF 2003/2004 CSS: 29
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. André Restivo SINF 2003/2004 CSS: 30
Display Existem ainda outros valores não tão usuais que a propriedade display pode tomar: Para tabelas: table-row, table-cell, tablecolumn, table-row-group, table-column-group, table-header-group, table-footer-group, tablecaption e inline-table. Outros: list-item, run-in, compact e marker. André Restivo SINF 2003/2004 CSS: 31
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. André Restivo SINF 2003/2004 CSS: 32
Exemplo <div id="navigation">... </div> <div id="content">... </div> Navigation Content #navigation { position: absolute; top: 0; left: 0; width: 10em; } #content { margin-left: 10em; } André Restivo SINF 2003/2004 CSS: 33
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; } Navigation Content #content { } margin: 0 10em; Navigation2 André Restivo SINF 2003/2004 CSS: 34
Mais Exemplos de Layout Little Boxes: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html André Restivo SINF 2003/2004 CSS: 35
Mais Exemplos de Layout Glish.com http://www.glish.com/css/ Layout Reservoir http://www.bluerobot.com/web/layouts/ André Restivo SINF 2003/2004 CSS: 36
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; André Restivo SINF 2003/2004 CSS: 37
Clear Se não quisermos que um elemento rodeie os elementos que estão floated podemos 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. André Restivo SINF 2003/2004 CSS: 38
Exemplos: Float e Clear #header { } #nav { width: 15em; float:left; } #content { margin-left: 16em; } #footer { clear:left; } 16 em 15 em nav1 float left header content footer André Restivo SINF 2003/2004 CSS: 39
Exemplos: Float e Clear #header{ } #nav1{ float: left; width: 15em; } #nav2 { float: left; clear: left; width: 15em; } #content { margin-left: 16em; } #footer { clear:left; } clear left : Para o nav2 não ficar ao lado do nav1. 15 em 16 em clear left: Para o footer não ficar ao lado do nav2 se o content for muito pequeno. nav1 nav2 float left header content footer float left André Restivo SINF 2003/2004 CSS: 40
Exemplos: Float e Clear #header{ } #nav1{ float:left; width: 15em; } float left header float right #nav2 { float:right; width: 15em; } 15 em nav1 content nav2 15 em #content { margin-left: 16em; margin-right: 16.5em; margin-top: 4px; } 16 em footer 16 em #footer { clear:left;} André Restivo SINF 2003/2004 CSS: 41
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ão entendem regras @ e não estão preparados devidamente para CSS. André Restivo SINF 2003/2004 CSS: 42
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 /> André Restivo SINF 2003/2004 CSS: 43
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. André Restivo SINF 2003/2004 CSS: 44
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) André Restivo SINF 2003/2004 CSS: 45
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. André Restivo SINF 2003/2004 CSS: 46
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). André Restivo SINF 2003/2004 CSS: 47