Sistemas de Informação: XML- CSS

Transcrição

1 XML 1 : XML- CSS Todos os exemplos bem como o conteúdo teórico tem por base o livro: Sas Jacobs, Begining XML with DOM and Ajax From Novice to Professional, Apress, 2006 XML Por que CSS 2 Uma folha de estilo simples pode alterar a aparência de diferentes páginas Não é necessário alterar diferentes páginas manualmente Folhas de estilo diferentes oferecem diferentes visões do mesmo documento O conteúdo dos documentos XML permanece de interpretação simples pois não contém informação sobre apresentação de dados As páginas Web são carregadas mais rapidamente pois folhas de estilo são mantidas em cache Páginas menores pois não contém informações de apresentação

2 XML 3 Estilos em Documentos XML Para que o documento possa ser visualizado de maneira prática é necessário que se crie a formatação com a qual os dados serão apresentados É necessário que se introduza a maneira com a qual os elementos serão apresentados Essa formatação é feita através de folhas de estilo Na definição das folhas de estilo os elementos serão apresentados como blocos (com quebras de linha) ou como elementos em linha (uns após os outros na mesma linha) Diferenciação feita com a propriedade display Para cada elemento definido em uma DTD uma formatação para a apresentação do elemento deve ser criada XML 4 XML: Usando uma Folha de Estilos Exemplo books.css title { font-family: Arial, Helvetica; font-wieght: bold; font-size: 20pt; color: #9370db; text-align: center; ISBN { font-family: Arial, Helvetica; font-weight: bold; font-size: 12pt; color: #c71585; text-align: left; authors { display:inline; font-family: Arial, Helvetica; font-style: italic; font-size: 10pt; color: #9370db; text-align: left; description { font-family: Arial, Helvetica; font-size: 12pt; color: #ff1010; text-align: left;

3 XML XML: Usando uma Folha de Estilos Exemplo 5 books1.xml <?xml version="1.0"?> <?xml-stylesheet href="books.css" type="text/css"?> <books> <book> <title>beginning XHTML</title> <ISBN> </ISBN> <authors> <author_name>frank Boumphrey </author_name> <author_name>ted Wugofski </author_name> <author_name>sebastian Schnitzenbaumer </author_name> <author_name>jenny Raggett</author_name> <author_name>dave Raggett </author_name> </authors> <description> XHTML is a powerful technology for creating web site content. Learn how to create exciting pages using a technology that combines the benefits of XML with the existing wide coverage of HTML.</description> <price US="$39.99"/> </book> </books> XML XML: Usando uma Folha de Estilos Exemplo 6

4 XML 7 Apresentando Documentos XML com CSS Questões que devem ser abordadas na apresentação de documentos XML: Como se pode ligar uma folha de estilo a um documento XML? Como se pode controlar o layout das páginas sem o uso de tabelas? Como se pode apresentar dados tabulares em XML? Como se inclui ligações em documentos XML? Como se pode apresentar imagens em um documento XML? Como se pode adicionar à apresentação, conteúdo não presente no documento XML original? Como manipular o conteúdo dos atributos XML? XML Layout de Páginas 8 Utilização de uma Folha de Estilos Documentos XML são ligados a folhas de estilo a partir do comando: <?xml-stylesheet type= text/css hfer= style.css?> Localização da Folha de Estilo Tipo MIME da folha Outros possíveis atributos title: Indica o nome da folha de estilos media: o tipo de mídia no qual será apresentado o arquivo Valores aceitos: screen, aural, braille, handheld, tv charset: indica o conjunto de caracteres usados alternate: indica se a folha de estilos é a principal ou não Valores aceitos: yes, no Múltiplos comandos permitem utilizar diferentes folhas de estilo

5 XML Layout de Páginas Layout de Documentos XML I 9 CSS funcionam num modelo de caixas (boxes) para apresentar um documento Por padrão, Margin, Border e Padding são definidos como zero e as margens são transparentes Estilos podem ser aplicados às bordas para determinar o estilo de linha, sua espessura e cor width e height definem a área que contém o elemento margin, border e padding são adicionais e podem ser aplicados a top, bottom, left e right XML Layout de Páginas Layout de Documentos XML II 10 Cada caixa (box) pode conter outras caixas que correspondem a elementos aninhados CSS reconhece dois tipos de caixas: block (mudança de linha) e inline (na mesma linha) Por padrão a apresentação de um documento XML é feita com caixas inline Caixas block automaticamente incluem espaços enquanto caixas inline não Elementos do tipo block devem ser identificados através da propriedade display que deve ser definida para block Pode-se também definir display para inline none impede que um bloco seja criado

6 XML Layout de Páginas 11 XML: Usando uma Folha de Estilos Exemplo Uso de um parágrafo como contêiner para outras caixas boxes.css paragraph { border:solid 1px #A3A3A3; padding: 10px; margin: 20px; reference { display:inline; font-style:italic; color:#cc3333; background-color: #E6E6E6; important { display:inline; font-weight:bold; color:#990000; border:solid 1px #990000; Leva a uma mudança de linha boxes.css continuação... page { border:solid 2px #000000; padding: 10px; margin:10px; pagenumber { padding:5px; border:solid 2px #336699; width: 60px; margin-bottom: 20px; Apresentação na mesma linha XML Layout de Páginas 12 XML: Usando uma Folha de Estilos Exemplo Uso de um parágrafo como contêiner para outras caixas boxes.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="boxes.css"?> <page> <pagenumber>page 1</pageNumber> <paragraph> Here is some text, <reference>and a reference,</reference> then <important>some important text</important>. <paragraph> Here is more text, <reference>another reference,</reference> and <important>more important text</important>. </page>

7 XML Layout de Páginas Layout de Documentos XML: Exemplo 13 Uso de um parágrafo como contêiner para outras caixas Para simplificar o posicionamento caixas block contém unicamente ou caixas inline ou block Se uma caixa inline for inserida em uma caixa block ela será tratado como block Uso de uma caixa block anônima torna seus elementos do tipo block. XML Layout de Páginas Posicionamento com CSS 14 Tipos de posicionamento de caixas com CSS Normal: Tipo padrão com caixas do tipo block sendo dispostas do topo a parte inferior, com as caixas inline sendo dispostas da esquerda para a direita Relative: Um subtipo do tipo Normal Um caixa é posicionada na esquerda, direita, acima ou abaixo de seu contêiner Floating: A caixa flutua à direita ou esquerda e o restante do conteúdo flutua em torno dela Absolute: A caixa é posicionada especificamente no topo e/ou esquerda de seu contêiner Fixed: Um subtipo de Absolute O contêiner é sempre considerado a janela do navegador

8 XML Layout de Páginas Posicionamento com CSS - Normal 15 boxes2.css paragraph { border:solid 1px #A3A3A3; padding: 10px; margin: 20px; reference { display:inline; font-style:italic; color:#cc3333; background-color: #E6E6E6; important { display:inline; font-weight:bold; color:#990000; border:solid 1px #990000; Leva a uma mudança de linha boxes2.css continuação... M page { border:solid 2px #000000; padding: 10px; margin:10px; pagenumber { padding:5px; border:solid 2px #336699; width: 60px; margin-bottom: 20px; Apresentação na mesma linha XML Layout de Páginas Posicionamento com CSS - Normal 16 boxes2.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="boxes.css"?> <document> <page> <pagenumber>page 1</pageNumber> <paragraph> Here is some text, <reference>and a reference,</reference> then <important>some important text</important>. <paragraph> Here is more text, <reference>another reference,</reference> and <important>more important text</important>. </page> Uso de uma caixa block anônima torna seus elementos do tipo block.

9 XML Layout de Páginas Posicionamento com CSS - Normal 17 boxes2.xml M <page> <pagenumber>page 2</pageNumber> <paragraph> Here is some text, <reference>and a reference,</reference> then <important>some important text</important>. <paragraph> Here is more text, <reference>another reference,</reference> and <important>more important text</important>. </page> </document> XML Layout de Páginas Posicionamento com CSS - Normal 18

10 XML Layout de Páginas Posicionamento com CSS - Relative 19 boxes3.css paragraph { border:solid 1px #A3A3A3; padding: 10px; margin: 20px; reference { display:inline; font-style:italic; color:#cc3333; background-color: #E6E6E6; important { display:inline; font-weight:bold; color:#990000; border:solid 1px #990000; O posicionamento relativo é dado em função a top, bottom, left e right. boxes3.css continuação... M page { border:solid 2px #000000; padding: 10px; margin:10px; pagenumber { padding:5px; border:solid 2px #336699; width: 60px; margin-bottom: 20px; footnote { position:relative; top:3px; font-size:10px; display:inline; font-weight:bold; XML Layout de Páginas Posicionamento com CSS - Relative 20 boxes3.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="boxes3.css"?> <page> <pagenumber>page 1</pageNumber> <paragraph> Here is some text, <reference>and a reference, <footnote>1</footnote></reference> then <important>some important text</important>. <paragraph> Here is more text, <reference>another reference, <footnote>2</footnote> </reference> and <important>more important text</important>. </page> Posicionamento referente ao texto.

11 XML Layout de Páginas Posicionamento com CSS - Relative 21 A utilização do posicionamento relativo deve ser feita cuidadosamente para evitar a sobreposição de caixas que pode ser causada por deslocamentos mal calculados XML Layout de Páginas Posicionamento com CSS - Float 22 boxes5.css paragraph { padding:10px; border:solid 2px #A3A3A3; pullquote { float:right; width:20%; font-style:italic; border:solid 1px #CCCCCC; padding:10px; margin:10px; A caixa pode flutuar a direita ou a esquerda do texto de acordo com o valor do atributo float que pode ser right ou left. Indica quanto a caixa irá ocupar da largura de seu contêiner. Caso nada seja indicado ela irá ocupar 100%

12 XML Layout de Páginas Posicionamento com CSS - Float 23 boxes5.xml <?xml version="1.0" encoding="utf-8"?> Texto que irá flutuar. <?xml-stylesheet type="text/css" href="boxes5.css"?> <page> <pullquote> The remnants of a passage from Cicero's de Finibus Bonorum et Malorum. </pullquote> <paragraph>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </page> XML Layout de Páginas Posicionamento com CSS - Float 24 Caixas float são sempre tratadas como block mesmo que sejam definidas como inline. Elas são sempre alinhadas com o topo de seu contêiner e o restante a direita ou esquerda.

13 XML Layout de Páginas Posicionamento com CSS - Absolute 25 boxes9.css facingpages { width:90%; border:solid 4px #000000; padding: 10px; margin:10px; pageleft { position:absolute; top:10px; right:auto; bottom:auto; left:10px; width:40%; border:solid 2px #000000; padding: 10px; margin:10px; Define-se o posicionamento como absoluto e depois se posiciona a caixa na página. boxes9.css continuação... M pageright { position:absolute; top:10px; right:10px; bottom:auto; left:auto; width:40%; width:40%; border:solid 2px #000000; padding: 10px; margin:10px; paragraph { padding-top:10px; border:solid 2px #CCCCCC; padding: 10px; margin:10px: XML Layout de Páginas Posicionamento com CSS - Absolute 26 boxes9.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="boxes9.css"?> <facingpages> <pageleft> <paragraph> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </pageleft> Texto posicionado a esquerda.

14 XML Layout de Páginas Posicionamento com CSS - Absolute 27 boxes9.xml continuação... M <pageright> <paragraph> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </pageright> </facingpages> Texto posicionado a direita. XML Layout de Páginas Posicionamento com CSS - Absolute 28 Problema inesperado! Navegadores ainda não estão totalmente capacitados a interpretar as CSS!

15 XML Layout de Páginas Posicionamento com CSS - Absolute 29 Apresentação correta com o Netscape 8.1! XML Layout de Páginas Posicionamento com CSS - Fixed 30 boxes10.css title{ position:fixed; height: 50px; width: 100%; color: #FFFFFF; font-size: 30px; font-weight: bold; background-color: #000000; paragraph { padding:10px; border:solid 2px #A3A3A3; margin: 10px; pullquote { float:right; width:20%; font-style:italic; border:solid 1px #CCCCCC; padding:10px; margin:10px; background-color: #FFFFFF; É um tipo especial de posicionamento absoluto em que a caixa é posicionada em relação ao navegador.

16 XML Layout de Páginas Posicionamento com CSS - Fixed 31 boxes10.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="boxes10.css"?> <document> <title>printer's sample text</title> <pullquote> This text became the standard dummy text of the printing industry when an unknown printer used it in the making of a type specimen book in the 1500s. </pullquote> <paragraph> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </document> XML Layout de Páginas Posicionamento com CSS - Fixed 32 Problema inesperado! Navegadores ainda não estão totalmente capacitados a interpretar as CSS!

17 XML Layout de Páginas 33 Posicionamento com CSS - Fixed Apresentação correta com o Explorer 7.0! XML 34 Apresentando Dados Tabulares Diferentemente de XHTML não existe um elemento <table> para criar apresentações tabulares de dados XML Como não se conhece com antecedência o número de células de uma tabela o posicionamento fixo não tem seu uso aconselhado nas apresentações tabulares Para apresentações tabulares se deve usar valores especiais da propriedade display: display:table: o elemento contido representa uma tabela (<table>) display:table-row: o elemento contido representa uma linha da tabela (<tr>) display:table-cell: o elemento contido representa uma célula da tabela (<td>) display:table-caption: o elemento contido representa o título tabela (<caption>)

18 XML Apresentando Dados Tabulares tabulardata.css document { color:#000000; background-color:#ffffff; border:solid 2px #000000; padding:10px; margin:10px; table { display:table; background-color:#cccccc; border:solid 2px #000000; padding:30px; tablerow { display:table-row; tablecell { display:table-cell; background-color:#ffffff; border:solid 1px #CCCCCC; padding:10px; tablecaption { display: table-caption; Tabelas em XML Criação de estilos para cada elemento de uma tabela. 35 XML Tabelas em XML 36 tabulardata.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="tabulardata.css"?> <document> <table> <tablerow> <tablecell>cell 1</tableCell> <tablecell>cell 2</tableCell> <tablecell>cell 3</tableCell> </tablerow> <tablerow> <tablecell>cell 4</tableCell> <tablecell>cell 5</tableCell> <tablecell>cell 6</tableCell> </tablerow> </table> <tablecaption>table caption</tablecaption> </document>

19 XML Apresentando Dados Tabulares Tabelas em XML 37 XML Apresentando Dados Tabulares 38 Tabelas em XML Elementos Flutuantes tabulardatafloat.css personnel { color:#000000; background-color:#ffffff; border:solid 2px #000000; padding:10px; margin:10px; allpeople { background-color:#ffffff; border:solid 2px #000000; padding:10px; person { width:80%; height:40px; background-color:#cccccc; border:solid 2px #000000; padding:10px; margin:10px; Definem-se as células da tabela como sendo flutuantes. tabulardatafloat.css continuação... M name { float:left; width:25%; background-color:#ffffff; border:solid 2px #000000; padding:10px; personnelid, extension { float:left; width:25%; background-color:#ffffff; border:solid 2px #000000; padding:10px; margin-left:10px; Dois elementos sendo definidos como sendo flutuantes idênticos.

20 XML Apresentando Dados Tabulares 39 Tabelas em XML Elementos Flutuantes tabulardatafloat.xml <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="tabulardatafloat.css"?> <personnel> <allpeople> <person> <name>fred Smith</name> <personnelid>123</personnelid> <extension>999</extension> </person> <person> <name>mandy Jones</name> <personnelid>124</personnelid> <extension>997</extension> </person> </allpeople> </personnel> Corresponde a tabela. Corresponde às linhas da tabela. Correspondem às células da tabela. XML Apresentando Dados Tabulares 40 Tabelas em XML Elementos Flutuantes Problemas acontecem se o tamanho do contêiner não for fixo. Para evitar se pode definir sua largura. Ex.: width:700px;.

21 XML 41 Ligações em Documentos XML Em XML não existe o elemento <a> do XHTML para criar ligações entre documentos Em XML a recomendação W3C XLink ( deve ser usada para criar ligações O suporte a XLink pelos navegadores não é amplo IExplorer não suporta enquanto Firefox 1.5+ e Netscape 6+ suportam Nos navegadores suportados pode-se usar XLink para: Substituir o documento corrente por um novo documento Abrir um novo documento em uma nova janela Abrir uma ligação automaticamente quando a página é carregada Para adicionar um XLink se deve incluir seu namespace no documento, preferencialmente dentro da declaração do documento <documento xmlns:xlink= > XML 42 Ligações em Documentos XML Elementos que devem estar presentes: xlink:type: indica o tipo da ligação que pode ser simple ou extended Navegadores Web aceitam somente simple. É similar a uma ligação XHTML xlink:href: indica uma URI válida como destino xlink:title: indica um título a ser apresentado quando o rato é posicionado sobre o elemento Similar ao atributo XHTML alt. xlink:show: indica onde o elemento de destino será apresentado Os valores permitidos são new para indicar em uma nova janela, embed para indicar que o elemento será inserido na página (funciona somente com imagens e em alguns navegadores) ou replace para indicar que o elemento irá substituir a página corrente. xlink:actuate: indica quando o elemento de destino deve ser ativado Os valores permitidos são onrequest para indicar que o elemento será chamado quando a ligação for clicada ou onload para indicar o elemento será chamado quando a página for carregada

22 XML Ligações em XML Usando XLink 43 link.css title{ color: #000000; font-size: 30px; font-weight: bold; paragraph { padding:10px; margin: 10px; link { color: #0000FF; text-decoration: underline; Folha de estilos normal sem nada de especial. XML Ligações em XML Usando XLink 44 xlink.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="link.css"?> <document xmlns:xlink=" <page> <title>linking With XLink</title> <paragraph>this Inclusão do namespace do XLink. <link xlink:type="simple" xlink:show="new" xlink:actuate="onrequest" xlink:title="visit Apress" xlink:href=" </link> will open in a new page. </page> </document> Definição das características da ligação

23 XML Ligações em XML Usando XLink 45 XML Ligações em XML Ligações XML com o IExplorer 46 Ligações podem ser criadas em documentos que precisam ser apresentados no navegador IExplorer (ou Opera) usando o namespace do XHTML forcedlink.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="link.css"?> <document xmlns:html= <page> <title>forcing XHTML Link</title> <paragraph>the <html:a href=" target="_blank">link </html:a>will open in a new page. </page> </document> forcedelink.css title{ color: #000000; font-size: 30px; font-weight: bold; paragraph { padding:10px; margin: 10px;

24 XML Imagens em Documentos XML 47 Imagens deveriam poder ser inseridas em documentos XML utilizando XLink (Firefox e Netscape) xlink:show = embed Não funciona! linkimage.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="linkimage.css"?> <document xmlns:xlink=" <page> <title>images With XLink</title> <paragraph>this <link xlink:type="simple" xlink:show="embed" xlink:actuate="onload" xlink:title="lions" xlink:href="lions.jpg">link </link> should embed an image but doesn't. </page> </document> linkimage.css title{ color: #000000; font-size: 30px; font-weight: bold; paragraph { padding:10px; margin: 10px; link { color: #0000FF; text-decoration: underline; XML Imagens em Documentos XML - CSS 48 Uma utilização esperta de CSS permite apresentar imagens em documentos XML Cada imagem deve ser inserida em um elemento único e as propriedades CSS background ou background-image podem ser usadas para apresentar a imagem imagecss.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="imagecss.css"?> <document> <page> <image1 /> <title>adding an Image in XML</title> <paragraph>this page includes a lion picture. </page> </document> Inclusão da imagem definida na CSS. imagecss.css title{ color: #000000; font-size: 30px; font-weight: bold; paragraph { padding:10px; margin: 10px; image1 { margin:10px; width:282px; height:187px; backgroundimage:url(lions.jpg)

25 XML 49 Imagens em Documentos XML - CSS XML 50 Adicionando Conteúdo com CSS Algumas vezes pode ser necessário na apresentação de um documento XML adicionar algum conteúdo aquele presente no documento CSS2 inclui o conceito de pseudo elementos que podem ser usados para adicionar conteúdo quando se está aplicando um estilo a um documento XML: :before insere conteúdo antes do elemento :after insere conteúdo após o elemento :first-line define o estilo da primeira linha do elemento (nenhum dos navegadores mais conhecidos suporta esta característica) :first-letter define o estilo da primeira letra do elemento (nenhum dos navegadores mais conhecidos suporta esta característica) Sintaxe de todos os pseudo elementos: seletor:pseudo-elemento {propriedade: valor;

26 XML Adicionando Conteúdo com CSS 51 addedcontent.xml addedcontent.css <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="addedcontent.css"?> <document> <page> <!--<paragraph1>this content is within paragraph 1</paragraph1> <paragraph2>this content is within paragraph 2</paragraph2>--> <paragraph3>this content is within paragraph 3</paragraph3> <paragraph4>this content is within paragraph 4</paragraph4> </page> </document> paragraph1:first-letter { float:left; font-size:24pt; font-style:italic; font-weight:bold; Texto que é inserido padding-right:4px; antes do parágrafo. paragraph2:first-line { text-transform:uppercase; font-weight:bold; addedcontent.css-... M paragraph3:before { font-weight:bold; text-transform:uppercase; content:"text before paragraph 3 - "; paragraph4:after { content: url(lions.jpg); paragraph3, paragraph4 { display: block; XML Adicionando Conteúdo com CSS 52

27 XML 53 Trabalhando com Atributos CSS2 permite que se use atributos e seus valores como seletores para regras CSS: meuelemento[meuatributo]: a regra será executada quando <meuelemento> contiver um atributo chamado meuatributo meuelemento[meuatributo=meuvalor]: a regra será executada quando <meuelemento> contiver um atributo chamado meuatributo cujo valor for meuvalor meuelemento[meuatributo~=meuvalor]: a regra será executada quando <meuelemento> contiver um atributo chamado meuatributo cujo valor for uma lista de palavras separadas por espaços e um dos quais sendo exatamente igual a meuvalor meuelemento[meuatributo =meuvalor]: a regra será executada quando <meuelemento> contiver um atributo chamado meuatributo cujo valor for uma lista de palavras separadas por hífens que se inicie por meuvalor IExplorer não suporta esta funcionalidade XML Trabalhando com Atributos 54 Manipulando Valor dos Atributos atributescss.css paragraph[style] { font-size:12px; color:#0000ff; display: block; paragraph[style=summary] { font-style:italic; font-size: 16px; paragraph[style~=foreground] { font-family:courier, serif; font-weight:bold; background-color:#cccccc; paragraph[style =code] { font-family:courier, serif; font-weight:bold; background-color:#ffffff; border-style:solid 2px #000000; Diferentes possibilidades de manipulação dos atributos

28 XML Apresentando Dados Tabulares 55 Tabelas em XML Elementos Flutuantes atributescss.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="attributescss.css"?> <document> <paragraph style="normal"> Here is some text in a paragraph whose style attribute has a value of normal. <paragraph style="summary"> Here is some text in a paragraph whose style attribute has a value of summary. <paragraph style="code foreground"> Here is some text in a paragraph whose style attribute contains the value of code or foreground. <paragraph style="code-background"> Here is some text in a paragraph whose style attribute starts with code background. </document> XML Apresentando Dados Tabulares 56 Tabelas em XML Elementos Flutuantes

29 XML Trabalhando com Atributos 57 Usando Valores dos Atributos Os pseudo elementos :before e :after podem ser usados para adicionar o valor de atributos através da propriedade content com o valor de attr(nomeatributo) Valor do atribito xref será adicionado antes do parágrafo atributespseudo.css paragraph { background-color:#ffffff; font-family:arial, Helvetic, sans-serif; padding:20px; paragraph:before { background-color#cccccc; font-weight:bold; color:#0000ff; content:"cross reference:" attr(xref); paragraph:after { font-style:italic; color:#0000ff; content:"key words: " attr(keywords); Valor do atribito keywords será adicionado após do parágrafo XML Apresentando Dados Tabulares 58 Usando Valores dos Atributos atributespseudo.xml <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="attributespsuedo.css"?> <document> <paragraph keywords="displaying, attribute, content, XML, CSS" xref="css2 Section 12.2"> This example demonstrates how we can use the :before and :after pseudo classes to add attribute content to a document. </document>

30 XML Exercícios 59 Pretende-se utilizar um arquivo XML para representar os dados de uma mediateca. Esta mediateca armazena dados de CDs e DVDs. Para tanto é necessário criar um arquivo XML e uma folha de estilos para que seja possível apresentar os dados. Exercício cio 1: Escrever um documento XML que permita que se armazena informações sobre CDs e DVDs. Sugere-se que seja usado um elemento mídia para agrupar todos os CDs e DVDs. Este documento XML deve conter a descrição de ao menos 3 CDs e 3 DVDs. Exercício cio 2 Escrever uma folha de estilos que seja apropriada a apresentação de CDs e DVDs do arquivo XML criado no Exercício 1. A partir desta folha de estilo deve ser possível visualizar a coleção de CDs e DVDs