Programação para Internet I 6. CSS Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt
O HTML apenas fornece um controle limitado sobre a formatação das páginas Em HTML deve definir-se principalmente estrutura, não formato As CSS (Cascading Style Sheets) foram criadas para tratar das formatações dos conteúdos Numa CSS descreve-se a forma como os documentos devem ser apresentados ao utilizador (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 2
Permitem controlar um sem número de propriedades dos elementos constituintes de uma página web Toda a linha gráfica de uma página web pode ser centrada num único ficheiro Podemos por outro lado, ter várias style sheets aplicadas a uma mesma página web As regras são aplicadas de forma hierárquica (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 3
Exemplo de formatação em HTML Uma das formas de fazer o mesmo com CSS Outra... <p><font face="arial" size="2">texto</font></p> <p style="font-family: Arial; font-size: 10pt">Texto</p>... <head> <style> p.texto{font-family: Arial; font-size: 10pt }</style> </head>... <p class="texto">texto</p>... (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 4
A definição de Cascading Style Sheets Uma regra de estilo é constituída por duas partes: Selector - Ligação entre o documento HTML e o estilo Declaração - Descreve o efeito da regra (propriedade : valor) Propriedade Atributo que o selector tem Valor Valor para o atributo selector declaração p.texto{ font-family: Arial; font-size: 10pt } propriedade valor (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 5
Regras Podem ser utilizados vários selectores numa mesma regra h1 {font-weight: bold} h2 {font-weight: bold} h3 {font-weight: bold} h1, h2, h3 {font-weight: bold} As declarações podem também ser agrupadas numa regra h1 {color: red} h1 {text-align: center} h1 {color: red; text-align: center} É possível (e muito recomendável) usar comentários como nas linguagens C, Java, etc. /* Comentário */ (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 6
As diferentes formas de definir uma Style Sheet Pontuais Aplicação de um estilo pontualmente a uma única tag Utiliza-se um atributo universal a todas as tags, o atributo style <p style="color: red"> Texto </p> Usar se o site tiver apenas um ficheiro, ou então não usar nunca!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 7
As diferentes formas de definir uma Style Sheet (continuação...) Internas As definições são feitas no cabeçalho do documento a formatar utilizando a tagstyle As formatações são colocadas entre as tags de início e fecho de style definição <style> uso <p class="texto">texto</p>.texto { color: red } </style> Usar se o site tiver poucos ficheiros, ou então não usar nunca!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 8
As diferentes formas de definir uma Style Sheet (continuação...) Externas A style sheet é definida num ficheiro à parte Estes ficheiros só podem conter regras CSS, comentários e espaços A sua referência deve ser incluída entre as tags<head> e </head> usando para tal a tag link <link rel="stylesheet" type="text/css" href="estilo.css" /> Usar sempre!!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 9
Definições de selectores Global Aplicação de um estilo a uma tag especifica Define-se que sempre que uma certa tag seja utilizada, esta deve ser formatada de uma forma específica Aconselhada por razões de retrocompatibilidade As tags têm valores por defeito associadas aos seus atributos Os estilos modificam esses valores (ou alguns deles) a {color: red; text-decoration: none; } <a href="xpto.html">... </a> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 10
Definições de selectores (continuação...) Definição Específica O estilo é definido antes, sendo posteriormente atribuído individualmente a qualquer tag É necessário indicar expressamente o nome do estilo na tag sempre que se pretender usar Definição de estilo começa por um ponto e pelo nome dado ao estilo Aplicável apenas em elementos de um determinado tipo p.nome_do_estilo { color: blue; text-decoration: underline; } <p class="nome_do_estilo">... </p> Aplicável a todos os elementos.nome_do_estilo { color: blue; text-decoration: underline; } <p class="nome_do_estilo">... </p> <td class="nome_do_estilo">... </tr> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 11
Definições de selectores (continuação...) Definição para uma única instância de um elemento Por vezes é necessário aplicar determinada formatação a uma única instância de um elemento de XHTML. Nessas situações, recorre-se ao símbolo #. #identificador_do_elemento { color: blue; text-decoration: underline; } <p id="identificador_do_elemento">... </p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 12
Definições de selectores (continuação...) Por vezes queremos aplicar uma formatação a um determinado tipo de elementos que se encontrem num determinado contexto Por exemplo, podemos querer aplicar uma determinada formatação apenas aos parágrafos que estejam dentro de células de tabelas. table tr td p { color: blue; } <p>não se aplica aqui!</p> <table> <tr> <td> <p> Aplica-se aqui! </p></td> </tr> </table> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 13
Formatações Texto É possível especificar um grande número de características do texto, tal como num processador de texto Existe um grande número de atributos e valores respectivos font-size especifica o tamanho das letras font-family fonte a utilizar (ou a sua família, ex: Arial, Times, Courier, Verdana, ) font-weight normal ou bold font-style normal ou italic font-variant normal ou small-caps. text-decoration none, underline, overline, linethrough, blink line-height espaço entre as linhas de texto (ex. 10px, 10%) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 14
Formatações Texto text-align left, center, right, justified vertical-align top, bottom text-indent indentação a dar ao texto (ex. 10px, 10%) letter-spacing normal ou valor para afastamento entre letras (ex. 10px, 10%) text-transform none, capitalize, uppercase ou lowercase (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 15
Formatações (cont.) Texto (cont.) Também é possível usar a definição abreviada mediante a seguinte ordem: font-style font-variant font-weight fontsize font-family p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } p { font: italic bold 30px arial, sans-serif; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 16
Formatações (continuação...) Cores e Fundos As cores e fundos podem ser aplicados a texto, tabelas e páginas As cores podem ser especificadas em RGB, em hexadecimal ou pelo seu nome (não muito indicado, pois os nomes podem variar de plataforma para plataforma) color: rgb(255,0,0), color: #FF0000, color: red color cor a atribuir ao elemento background define o fundo como cor ou imagem background-color cor de fundo background-image: url(...) imagem de fundo (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 17
Formatações (continuação...) Cores e Fundos background-attachment fixed (fundo permanece fixo quando página rola para baixo), scroll (fundo acompanha página) background-position top, bottom, center, left, right background-repeat - repeat-x, repeat-y, no-repeat (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 18
Formatações (continuação...) Imagens como background Permite usar imagens de fundo de diferentes formas para além do tradicional mosaico. body { background-color: #FFFFFF; background-image: url(../path/file.png); background-attachment: scroll; background-repeat: no-repeat; background-position: 0% 0%; } também se pode usar a definição abreviada segundo a seguinte ordem: [background-color] [background-image] [backgroundrepeat] [background-attachment] [background-position]. body { background: #FFFFFF url(../path/file.png) scroll no-repeat;} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 19
Formatações (continuação...) Unidades Propriedades numéricas permitem especificar unidades px: pixéis pt: pontos (1/72 de polegada) pc: picas (1/16 de polegada) em: a altura dos elementos do tipo de letra ex: a altura de um x pequeno in: polegadas (1 polegada=2,54 cm) mm: milímetros cm: centímetros %: percentagem (relativa à janela do browser) (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 20
Formatações (continuação...) Outras propriedades border-width Permite definir a espessura da border border-style Permite definir o estilo da border: dotted; dashed; solid; double; groove; ridge; inset; outset border-color Permite definir a cor da border div { border-width: 3px; border-style: dotted; border-color: red; } Poderá igualmente ser usada a definição abreviada: div { border: 3px dotted red; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 21
Formatações (continuação...) Outras propriedades (continuação ) border Permite definir a border total de uma tabela e/ou célula border-top Permite definir a border de cima de uma tabela e/ou célula border-bottom Permite definir a border de baixo de uma tabela e/ou célula border-left Permite definir a border da esquerda de uma tabela e/ou célula border-right - Permite definir a border da direita de uma tabela e/ou célula (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 22
Formatações (continuação...) Outras propriedades (continuação...) width permite especificar a largura de tabelas/células height permite especificar altura de tabelas/células padding permite especificar a distância entre as margens das células e os conteúdos das mesmas Variantes: padding-top; padding-right; padding-bottom; padding-left td { padding: 3px 3px 3px 3px; } margin permite especificar a margem do documento. Variantes: margin-top; margin-bottom; margin-right; marginleft (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 23
Alteração de cursores É possível alterar o cursor em função do elemento sobre o qual ele se encontra <style>.nomedoestilo { cursor:auto } elemento { cursor:auto } </style> Estão disponíveis os seguintes cursores url, auto, crosshair, default, pointer, move, e-resize, neresize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 24
Cursores personalizados A imagem a definir como cursor deverá ser do tipo *.cur Algumas ferramentas de edição de imagem suportam este formato cursor:url(micro.cur) Também é possível alterar a imagem que surge na barra de endereços (mas não é possível fazê-lo através de CSS) <head> <link A rel="icon" imagem href="www.abc.com/myicon.ico" deverá ter o tamanho 16x16 type="image/x-icon" /> <link rel="shortcut icon" href="www.abc.com/myicon.ico" type="image/x-icon" /> </head> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 25
Tabelas Posicionamento da legenda das tabelas Permite especificar se a legenda das tabelas será apresentado em cima ou em baixo da tabela (por defeito é em cima) caption{ caption-side:bottom; } Alterar o espaçamento entre as células das tabelas (equivalente à propriedade cellspacing) table{ border-collapse:separate; border-spacing:10px; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 26
Instruções para impressora Muitas vezes podemos necessitar de formatar páginas de modo a serem preparadas para serem envidas para a impressora. Uma das coisas que é possível fazer é definir quebras de página, que resultam em passar para uma página nova. As propriedades disponíveis são: page-break-after, page-break-before, page-break-inside. @media print { table {page-break-after:auto} } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 27
Recorte de imagens Por vezes não podemos (ou não pretendemos) mostrar uma imagem na sua totalidade, mas também não queremos ter diferentes versões da mesma imagem. Para isso recorre-se à propriedade clip. clip: rect(top right bottom left) img { position:absolute; clip:rect(100px,200px,200px,100px); } <img src="estgoh_gif.gif" width="306" height="234" /> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 28
Pseudo classes first-child Permite aplicar uma determinada formatação apenas ao primeiro filho de um determinado elemento div > p:first-child { font-weight:bold } <div> <p>primeiro elemento</p> <p>segundo elemento</p> </div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 29
Pseudo classes (continuação ) link, visited, active, hover, focus Permite aplicar uma determinada formatação de acordo com o estado de um determinado elemento a:link {color: red; text-decoration: none; } a:active {color: red; text-decoration: none; } a:visited {color: yellow; text-decoration: none; } a:hover {color: green; text-decoration: underline; } td:hover {background-color:#f5f5f5} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 30
Destaques Por vezes é necessário dar algum destaque a um pedaço de texto ou a um campo de formulário. Nessas situações poderá ser utilizada a propriedade outline em conjugação com a pseudo classe focus. Como variantes existem as propriedades outlinewidth, outline-style, outline-color. input:focus { outline-width: 3px; outline-style: solid; outline-color: black } input:focus {outline: 3px solid black} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 31
Pseudo classes (continuação ) after, before Permite inserir conteúdo automaticamente antes ou depois do elemento à qual for aplicada a formatação. p.special:before {content: "novidade! "} p.special:after {content: "novidade! "} Os browsers actuais não suportam!! Portanto, não usem!! (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 32
Pseudo elementos first-letter Permite aplicar determinadas formatações apenas à primeira letra de um elemento p:first-letter {font-size:30} <p> Texto </p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 33
Pseudo elementos (continuação...) first-line Permite aplicar determinadas formatações apenas à primeira linha de um elemento p:first-line {color: #0000FF; font-variant: small-caps} <p> Primeira linha <br /> Segunda linha </p> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 34
Listas Permitem formatar os itens das listagens list-style-type Valores possíveis: disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha. list-style-image Permite especificar uma imagem como o símbolo que precede cada um dos itens da imagem ul { list-style-image: url("http://png.com/ellipse.png") } list-style-position Permite indicar a forma como o texto de um item se comporta aquando de uma mudança de linha. Valores possíveis: outside e inside Poderá igualmente usar-se a definição abreviada ul { list-style: url("http://png.com/ellipse.png") disc} (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 35
Listas Como apresentar uma listagem na horizontal Recorrendo à propriedade display ul li { display: inline; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 36
Propriedades das scroll-bars Permitem aplicar determinadas formatações às cores das scroll-bars scrollbar-3d-light-color: #ff8000; scrollbar-arrow-color: #000080; scrollbar-base-color: #000080; scrollbar-dark-shadow-color: #24369C; scrollbar-face-color: #99B3CC; scrollbar-highlight-color: #FFFFFF; scrollbar-shadow-color: #24369C; (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 37
Tipos de media Permite definir estilos diferentes consoante o meio usado para visualizar as páginas @media tipodemedia{ estilos a aplicar } Principais tipos de media all - usado em todos os dispositivos aural - usado por sintetizadores de voz braille -usado em dispositivos tacteis de braille embossed - usado para impressão em braille handheld - usado em dispositivos móveis print - usado para impressoras normais screen - usado em ecrãs de computador tv - usado em televisões (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 38
Layouts sem uso de tabelas Na maior parte das páginas web existentes, a definição do aspecto gráfico das páginas assenta no uso de tabelas É no entanto possível construir layouts elaborados sem recorrer ao uso de tabelas... usando apenas HTML (XHTML) e CSS Poderá não ser possível construir layouts tão complexos como se passa com o uso de tabelas, no entanto, torna o desenvolvimento de páginas web muito mais simples, torna as páginas mais fáceis de manter e até mais fáceis de ler e interpretar pelos browsers Para além do mais, as páginas têm muito menos código, logo, ocupam menos espaço. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 39
Layouts sem uso de tabelas (continuação...) Exemplo (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 40
Layouts sem uso de tabelas (continuação...) Exemplo (continuação...) Com tabelas <html> <head> <title>pagina</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <table> <tr> <td colspan="2" class="top">a minha página pessoal</td> </tr> <tr> <td class="menu"> Página principal<br /> Hobbies<br /> Contactos<br /> Links<br /> </td> <td class="content">conteudo</td> </tr> <tr> <td colspan="2" class="footer">rodape</td> </tr> </table> </body> </html>.top { width:400px; padding:10px; font-size:10px; background-color:blue; border:1px solid #000000; }.menu { vertical-align:top; width:100px;height:300px; padding:10px;font-size:10px; background-color:#f5f5f5; border:1px solid #000000; }.content { vertical-align:top; width:300px;height:300px; padding:10px; font-size:10px; background-color:red; border:1px solid #000000; }.footer{ width:400px; padding:10px; font-size:10px; background-color:yellow; border:1px solid #000000; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 41
Layouts sem uso de tabelas (continuação...) Exemplo (continuação...) Sem tabelas <html> <head> <title>pagina</title> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> <body> <div class="top">a minha página pessoal</div> <div class="menu"> Página principal</br /> Hobbies<br /> Contactos<br /> Links<br /> </div> <div class="content">conteudo</div> <div class="footer">rodapé</div> </body> </html> div.top { width:300px; font-size:10px; padding:10px; background-color:blue; border:1px solid #000000; } div.menu { float:left; margin-top: 2px; width:100px; height:300px; font-size:10px; padding:10px; background-color:#f5f5f5; border:1px solid #000000; } div.content { float: left; margin-top: 2px;margin-left:2px; width:198px; height:300px; font-size:10px; background-color:red; border:1px solid #000000; } div.footer { clear: both; margin-top: 2px; width:300px;height:30px; font-size:10px; background-color:yellow; border:1px solid #000000; } (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 42
Layouts sem uso de tabelas (continuação...) As páginas que não usam tabelas são mais simples de programar, no entanto, requer habituação... O conteúdo é inserido em containers div em vez de td <table> <tr> <td class= xxxx > conteúdo </td> </tr> </table> <div clas="xxxx"> conteúdo </div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 43
Layouts sem uso de tabelas (continuação...) Principais propriedades position (relative, absolute) permite definir se os valores de posição são relativos aos containers em que se incluem ou relativos ao início da janela top, bottom, left, right permitem especificar a distância da div em relação ao topo, ao fundo, à esquerda e à direita da janela. width, height permitem especificar o comprimento e altura da div visibility (visible, hidden) permite que uma div não esteja visível overflow (visible, scroll, auto, hidden) permite especificar o que acontece caso o conteúdo exceda o tamanho da div (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 44
Layouts sem uso de tabelas (continuação...) Principais propriedades (continuação) float (left, right, none) permite definir a forma como alguns elementos flutuam, isto é, a forma como se comportam os elementos numa situação de redimensionamento de janela de browser. Apenas se aplica a elementos que não sejam posicionados absolutamente. display (none, block, inline, ) define se e como um elemento é apresentado clear (left, right, both, none ) - Esta propriedade especifica em que lados de um elemento não são admitidos elementos float (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 45
Layouts sem uso de tabelas (continuação...) Principais propriedades (continuação) min-width, max-width permite especificar que no mínimo/máximo uma div terá uma determinada largura. Tenha em atenção que estas duas propriedades poderão ser utilizadas em conjunto, no entanto, não poderão ser utilizados juntamente com a propriedade width. min-height, max-height permite especificar que no mínimo/máximo uma div terá uma determinada altura. Tenha em atenção que estas duas propriedades poderão ser utilizadas em conjunto, no entanto, não poderão ser utilizados juntamente com a propriedade height. (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 46
Layouts sem uso de tabelas (continuação...) O box-model (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 47
Layouts sem uso de tabelas (continuação...) O box-model (continuação) Propriedades envolvidas margin-top, margin-right, margin-bottom, margin-left e margin padding-top, padding-right, padding-bottom, padding-left e padding border-top-width, border-right-width, border-bottom-width, borderleft-width e border-width border-top-color, border-right-color, border-bottom-color, borderleft-color e border-color border-top-style, border-right-style, border-bottom-style, borderleft-style e border-style border-top, border-right, border-bottom, border-left e border (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 48
Conceitos avançados (continuação...) z-index Permite especificar a ordem pela qual são apresentados elementos sobrepostos (quanto maior o número, mais para cima será apresentado) div.class1{ position:absolute; top: 100px; left: 100px; width:100px; background-color: red; z-index:1; } div.class2{ position:absolute; top: 115px; left: 100px; width:100px; background-color: blue; z-index:2; } <div class="class1">um</div> <div class="class2">dois</div> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 49
Conceitos avançados (continuação...) Filtros Com CSS podemos aplicar alguns filtros a texto/imagem O grande problema é que esses filtros só irão funcionar correctamente em alguns browsers, nomeadamente, no Internet Explorer. Filtros disponíveis Alpha Channel Motion Blur Chroma Drop Shadow Flip Glow GrayScale Invert (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 50
Conceitos avançados (continuação...) Filtros (cont.) Filtros disponíveis (cont.) Mask Shadow Wave X-Ray Chaining Filters (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 51
Conceitos avançados (continuação...) Filtros (cont.) Alpha Channel <img src="images/sunface.gif" style="filter: Alpha(Opacity=100, FinishOpacity=0, Style=2, StartX=20, StartY=40, FinishX=0, FinishY=0)"> <span style="width: 357; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=580, FinishY=0)">"SunShine!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 52
Conceitos avançados (continuação...) Filtros (cont.) Motion Blur <img src="images/sunface.gif" style="filter: Blur(Add = 0, Direction = 225, Strength = 10)"> <span style="width: 357; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: Blur(Add = 1, Direction = 225, Strength = 10)">"SunShine!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 53
Conceitos avançados (continuação...) Filtros (cont.) Drop Shadow Chroma <span style="width: 357; height: 50; fontsize: 36pt; font-family: Arial Black; color: blue; Filter: DropShadow(Color=#FF0000, OffX=2, OffY=2, Positive=1)">"SunShine!"</span> <span style="width: 580; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: Chroma(Color = #FF0000)">"SunShine!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 54
Conceitos avançados (continuação...) Filtros (cont.) Flip <span style="width: 300; height: 50; fontsize: 36pt; font-family: Arial Black; color: red; Filter: FlipV">"SunShine!" </span> Glow <span style="width: 357; height: 50; fontsize: 18pt; font-family: Arial Black; color: red; Filter: Glow(Color=#00FF00, Strength=20)">"A Green Glow!"</span> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 55
Conceitos avançados (continuação...) Filtros (cont.) Greyscale <img src="images/flood85_1.jpg" style="filter: Gray"> Invert <img src="images/flood85_1.jpg" style="filter: Invert"> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 56
Conceitos avançados (continuação...) Filtros (cont.) Wave X-ray <img src="images/flood85_1.jpg" style="filter: Chroma(Color = #000000) Wave(Add=0, Freq=5, LightStrength=20, Phase=220, Strength=10)"> <img src="images/flood85_1.jpg" style="filter: Xray"> (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 57
Para mais informações http://www.w3schools.com/css/ (c) Nuno Miguel Gil Fonseca - Escola Superior de Tecnologia e Gestão de Oliveira do Hospital - Programação para Internet I 58