Vantagens e Desvantagens das CSS 1

Transcrição

1 XML 1 Folhas de Estilo em Cascata Folhas de Estilo ou simplesmente estilos, são utilizadas para que se possa atribuir diversas propriedades ao mesmo tempo a todos os elementos em uma documento que utilize um marcador específico detalhado na folha de estilos. Pode-se, por exemplo, fazer com que todos os títulos de nível 1 em uma página XHTML (<h1>) sejam apresentados utilizando a fonte Arial com tamanho 18 e em cor azul. As linguagem utilizadas para se escrever estilos para páginas XHTML são: Linguagem de Folhas de Estilo em Cascata CSS (Cascadign Style Sheets) Linguagem desenvolvida por Bert Bos e Håkon Lie no W3C com contribuições de Chris Lilley, Dave Ragget e outros. Outra linguagem que pode ser aplicada a documentos XML é a linguagem XSL extensible Stylesheet Language. XML Folhas de Estilo em Cascata 2 Vantagens e Desvantagens das CSS 1 Pode-se alterar completamente a aparência de um documento com pouco esforço: estilos permitem que se separe a parte funcional de um documento de seus aspectos de apresentação, definidos nas folhas de estilos Todas as características de apresentação dos elementos de um documento, sua cor, a fonte que será utilizada, etc. são definidas na folha de estilo Qualquer modificação que for feita na folha de estilos se refletirá na apresentação do documento, sem a necessidade de alteração do corpo do documento. Uma mesma folha de estilos pode ser aplicada a diversos documentos: uma mesma folha de estilos pode ser aplicada a diferentes documentos, fazendo com que um grupo de documentos tenha a mesma aparência. Os marcadores no documento tornam-se menos poluídos e as páginas mais facilmente mantidas: como as características de apresentação do documento são definidas na página de estilos os marcadores utilizados no documento irão conter menos atributos e propriedades O documento terá sua compreensão e manutenção facilitadas.

2 XML Folhas de Estilo em Cascata 3 Vantagens e Desvantagens das CSS 2 Estilos permitem um controle mais fino da apresentação: através das propriedades das folhas de estilo se pode controlar a apresentação de um documento de maneira mais precisa que com marcadores e atributos Algumas propriedades de folhas de estilo não têm equivalentes em marcadores da linguagem XHTML. Melhor adequação de documentos a diferentes agentes: como a apresentação do documento é definida separadamente, pode-se criar estilos diferentes para um mesmo documento que será apresentado em diferentes meios, enfatizando diferentes características Um navegador clássico (cores, fontes, etc.) ou um sintetizador de voz (a tonalidade, volume, etc.) Herança de Folhas de Estilo: as propriedades das folhas de estilo podem ser herdadas de um elemento para outro Se em um parágrafo definido em uma folha de estilo para ser apresentado em azul com fonte Arial de tamanho 14 for incluído um atributo ou outra propriedade, (ex.: negrito) este texto em negrito será apresentado também em azul com fonte Arial de tamanho 14. A principal desvantagem na utilização de folhas de estilo é dada pelo fato de navegadores podem não interpretar corretamente a totalidade das propriedades presentes nas folhas de estilo. XML Folhas de Estilo em Cascata 4 Criação e Definição de Folhas de Estilo 1 A sintaxe utilizada na criação de estilos é bem direta, começando pelo elemento para o qual o estilo se aplica, seguido da lista das propriedades que serão aplicadas ao elemento com os valores que estas propriedades devem adotar. As propriedades que podem ser utilizadas são aquelas presentes na DTD definida no documento. Em folhas de estilo não existe diferença entre maiúsculas e minúsculas CSS não são casesentives. Cada definição de propriedade é composta de um par nome da propriedade-valor separado por dois pontos: Elemento ao qual o estilo se aplica Ponto e vírgula separando as propriedades p {font-size:12; font-style:italic; color:green} Propriedade Valor da Propriedade

3 XML Folhas de Estilo em Cascata 5 Criação e Definição de Folhas de Estilo 2 Estilos podem ser definidos de três maneiras distintas Localmente, Internamente e Externamente Pode-se utilizar qualquer uma delas, ou mesmo as três, em um mesmo documento. Estilos aplicados localmente cancelarão qualquer estilo interno, enquanto estilos internos cancelaram qualquer estilo externo aplicado a uma página esta aplicação de estilos sobre estilos é que originou o nome Estilos em Cascata: Localmente: esta definição de estilos é utilizada quando se deseja trabalhar com pequenas partes de um documento, o que pode não justificar o esforço que deve ser despendido na criação de uma página de estilo completa Estilos definidos no elemento. Internamente: utilização relacionada à definição dos estilos no mesmo documento que define a página Web A definição dos estilos deve estar entre os elementos <style> e dentro do elemento. Externamente: estilos definidos em um segundo documento que conterá unicamente as definições dos estilos Este documento normalmente tem a extensão.css. O elemento <link> deve ser utilizado para ligar o documento a folha de estilo que será utilizada O atributo <href> indica a URL do arquivo de definição de estilos. XML Folhas de Estilo em Cascata 6 Definição Local de Estilos O atributo style, que não deve ser confundido com o elemento<style>, pode ser utilizado com um grande número de elementos da linguagem XHTML para a aplicação local de estilos aos elementos. Utilização do atributo style com o Elemento <span>: O atributo style pode ser utilizado em conjunto com o elemento <span> pode indicar que partes diferentes de um elemento em um documento devem receber estilos específico diferentes: Este texto <span style= color: green é efetivamente verde</span> <span style= color:green; font-size:140% > enquanto este é vermelho com uma fonte maior</span>. Utilização do Atributo style com o Elemento <div>: O atributo style pode também ser utilizado com o elemento <div> para indicar que todos os elementos internos à divisão deverão adotar o estilo definido para a divisão: <div style= color: red; font-weight: 120% > Conteúdo </div>.

4 XML Utilização de Uma Ferramenta: Html-Kit 7 XML Folhas de Estilo em Cascata Definição Local de Estilos Exemplo 8 attempt.html <title>trying out a local style</title> <h1>using local styles</h1> <p style="font-size: 150%">I am a paragraph which should be displayed in a larger font than normal.</p> <p style="color: green">a paragraph in a different color but normal font size.</p>

5 XML Folhas de Estilo em Cascata 9 Definição Interna de Estilos Uma boa prática que deve ser adotada quando se utiliza folhas de estilo é incluir a definição dos estilos entre comentários ( e -->) para que navegadores antigos que não sejam capazes de trabalhar com estilos não tentem apresentar as definições da folha de estilos. Em folhas de estilo quando se deseja utilizar a mesma definição para diversos elementos pode-se enumerá-los antes dos parênteses que definem o estilo Se por exemplo se deseja que os títulos h1, h2 e h3 sejam apresentados em verde pode-se definir: h1, h2, h3 {color: green}. XML Folhas de Estilo em Cascata Definição Interna de Estilos Exemplo 10 second-attempt.html <title>trying out a internal style sheet</title> <style type="text/css"> p {font-size:120%;} h1 {color:green; } h2 {color:green; font-size: 90%;} b { color:red; } --> <h1>the second attempt<br /> <b>at a style sheet</b></h1> <h2>i am a second-level heading</h2> <p>i am a paragraph which should be displayed in a larger font than normal.</p> <p>the same style will be applied to all paragraphs in the document.</p>

6 XML Folhas de Estilo em Cascata Definição Interna de Estilos Exemplo 11 XML Folhas de Estilo em Cascata Definição Externa de Estilos Exemplo 12 third-attempt.htm <title>trying out a style sheet</title> <link rel="stylesheet" href="first-link.css" /> <h1>the second attempt<br /> <b>at a style sheet</b></h1> <h2>i am a second-level heading</h2> <p>i am a paragraph which should be displayed in a larger font than normal.</p> <p>the same style will be applied to <b>all</b> paragraphs in the document.</p> first-link.css /* This is the style sheet to be linked */ p {font-size:120%;} h1 {color:green; } h2 {color:green; font-size: 90%;} b { color:red; }

7 XML Folhas de Estilo em Cascata Definição Externa de Estilos Exemplo 13 XML Folhas de Estilo em Cascata Herança e Propriedades de CSS Exemplo heritage.html <html xmlns=" xml:lang="en" lang="en"> <title>trying out the heritage with the style sheet</title> <style type="text/css"> body {font-style:italic} p {font-size:120%;} h1 {color:green; font-size: 200%;} h2 {color:green; font-size: 120%;} b { color:red; font-size: 150%;} --> <h1>an heritage attempt<br /> <b>with style sheet</b></h1> <h2>i am a second-level heading</h2> <p>i am a paragraph which should be displayed in a larger font than normal.</p> <p>the same style will be applied to <b>all</b> paragraphs in the document.</p> 14

8 XML Folhas de Estilo em Cascata 15 Herança e Propriedades de CSS Exemplo Herdada de <b> XML Folhas de Estilo em Cascata 16 Utilização de Estilos Cor da Fonte Cores em documentos XHTML são manipuladas através da propriedade color. A maneira mais fácil de se estabelecer a cor de um elemento XHTML é utilizando-se os nomes das cores padrão, que são as 16 cores da palete de cores VGA: aqua, grey, navy, teal, black, green, olive, silver, blue, lime, purple, white, fuchsia,maroon, red, yellow. Se a cor que se deseja utilizar não fizer parte da lista acima, deve-se utilizar seu valor RGB ou seu valor em hexadecimal A utilização de cores através de seus códigos hexadecimais, permite que outras cores, além daquelas da palete VGA, possam ser utilizadas Além do natural aumento no número de cores que se pode utilizar, esta utilização permite uma definição mais precisa da cor desejada. A lógica de utilização para qualquer elemento XHTML é a mesma utilizada com a fonte de um documento.

9 XML Folhas de Estilo em Cascata Utilização de Estilos ctales.html Cor da Fonte Exemplo PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>example of font color</title> <style type="text/css"> body { font-family: Trebuchet, Arial, sans-serif } h2 { color: # } em { font-style: italic; font-size:120%;} pre { font-style:italic; font-size:150%;} pre { font-family: Trebuchet, Arial, sans-serif; color:#006699;} b { color:# } --> <h1>canterbury Tales</h1> <h2>the Prologue</h2> <pre>whan that Aprille with his shoure sote The droghte of Marche hath perced to the rote And bathed every veyne in swich licour Of which vertu engendered is the flour</pre> <p><b>shoures</b> showers. </p> <p><b>sote</b> sweet. It is disyllabic.</p> <p><b>droghte</b> dryness. Pronounced <em>druuht</em> </p> <p><b>rote </b>root.</p> <p><b>and bathed every veyne in swich licour</b>: And bathed every vein (of tree or herb) in such moisture...</p> <p><b>flour</b> flower.</p> 17 XML Folhas de Estilo em Cascata Utilização de Estilos Cor da Fonte Exemplo 18

10 XML Folhas de Estilo em Cascata Utilização de Estilos 19 Cor das Ligações Hipertexto Em XHTML ligações que nunca foram visitadas, ligações que já foram visitadas e ligações que o navegador naquele instante está tentando visitar, podem ser apresentadas diferentemente na página. Essa diferenciação pode ser feita através das cores com que cada tipo de ligação é apresentada em uma página Essas cores são definidas através das complementações apresentadas a seguir para o elemento <a>: link, para as ligações não visitadas, visited para as já visitadas e active para aquelas que se está tentando visitar. As complementações ao elemento <a> apresentadas para a definição de cores, podem também ser utilizadas na definição de outras características de apresentação desses elementos Pode-se suprimir o sublinhado que uma ligação não visitada apresenta: a:link { text-decoration: none } Pode-se adicionar um fundo à ligação: a:link { background-color: black; color: yellow } Outra maneira que pode ser utilizada é a definição, através dos atributos link, vlink e alink do elemento, das cores das ligações: <body link= navy vlink= maroon alink= red > XML Folhas de Estilo em Cascata Utilização de Estilos Cor das Ligações Hipertexto Exemplo 20 ctales2.html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>example of font color</title> <style type="text/css"> h2 { color: # } h3 { color: black } h4 { color:#990066;} pre { color: #990066} em { color: #FF6633 } a:link { color: black } a:visited { color: blue } a:active { color: lime } --> <h1>canterbury Tales</h1> <a name="#xxx"><h2>the Prologue</h2></a> <pre>whan that Aprille with his <a href=xxx">shoure</a> sote The <a href="xxx">droghte</a> of Marche hath perced to the rote And bathed every veyne in <a href=yyy>swich licour</a> Of which vertu engendered is the flour</pre>

11 XML Folhas de Estilo em Cascata Utilização de Estilos Cor das Ligações Hipertexto Exemplo 21 XML Folhas de Estilo em Cascata Utilização de Estilos A Cor de Fundo 22 Através de folhas de estilo se pode estabelecer a cor de fundo de qualquer elemento XHTML Um parágrafo, um título ou mesmo o documento inteiro Neste último caso a seguinte declaração deve ser feita dentro do elemento <style>: body { color: black; background: red; } Cor de fundo do documento A propriedade a ser utilizada para o estabelecimento da cor de fundo para qualquer outro elemento XHTML é também background Quando se deseja estabelecer a cor de fundo para os parágrafos ou títulos de nível 2 deve-se declarar: p { background: red; } h2 { background: lime; } Cor do texto do documento Tabelas também podem utilizar cores de fundo Estabelecimento de uma cor de fundo para os cabeçalhos da tabela e outra para as células: th { background: red; } td { background: lime; }

12 XML Folhas de Estilo em Cascata Utilização de Estilos 23 Textura de Fundo 1 Uma textura também pode ser aplicada a qualquer elemento em um documento Esta aplicação pode ser feita através de atributos ou propriedades. Na prática, a aplicação de uma textura a um documento passa pela definição de uma imagem que deve ser utilizada como fundo do documento Se na apresentação a imagem, por seu tamanho, não ocupar a totalidade da página ela poderá ser repetida quantas vezes forem necessárias até que a imagem ocupe a totalidade da página. Quando uma figura é utilizada, o nome da figura deve vir entre parênteses precedidos da palavra url O interior dos parênteses pode conter unicamente o nome do arquivo se o arquivo estiver no mesmo diretório da página sendo apresentada ou a URL de uma figura em qualquer parte do Web. A definição da Textura de fundo pode ser realizada com a utilização de atributos do elemento : <body background= yellow_fabric.gif > XML Folhas de Estilo em Cascata Utilização de Estilos 24 Textura de Fundo Exemplo 1 haggis.html <title>example of a textured background</title> <style> body{ background-image: url(yellow_fabric.gif); } <body bgcolor="yellow" background="yellow_fabric.gif"> <h1>episode 7: Trip to Another Dimension</h1> <p> The mighty Captain Haggis shrugged off his attackers with his famous ground-black-pepper sneeze. As the evil Cutlery Clan fell to the floor coughing and sneezing and rubbing at their tearing eyes, Captain Haggis quickly ate his Dimensional Neaps 'n' Tatties and plunged headlong into the dreaded Mustard Dimension. </p> <p> Does Captain Haggis know no fear? Will he be able to withstand the scorching mustard heat? And will he be able to rescue the sacred Three-Legged Haggis in time to save all of Haggisdom from the evil machinations of the ruthless Cutlery Clan?...</p> <p> Tune in to next weeks thrilling episode: "A Mustard Been Here Before".</p>

13 XML Folhas de Estilo em Cascata Utilização de Estilos 25 Textura de Fundo Exemplo 1 XML Folhas de Estilo em Cascata Utilização de Estilos 26 Textura de Fundo 2 A utilização de folhas de estilo deve ser priorizada pois fornece diversas outras facilidades na utilização de texturas e cores Essas facilidades são fornecidas pela presença de diversas propriedades nas folhas de estilo relacionadas ao controle de imagens: background-color: define a cor de fundo. background-imagem: define uma imagem que será utilizada como textura. background-repeat: se a imagem for menor que a área que ela deve ocupar, essa propriedade define se a imagem será ou não repetida para ocupar a totalidade da página Essa propriedade pode adotar os valores: repeat, repeat-x, repeat-y e no-repeat. background-attachment: essa propriedade define se quando a página for deslocada para baixo, para cima ou para os lados, a imagem deve ou não acompanhar esse deslocamento Essa propriedade pode adotar os valores: fixed e scroll. background-position: através dessa propriedade se pode posicionar uma imagem em relação a um elemento Essa propriedade pode adotar os valores: <position><length>top, center, bottom, left, right na utilização mais simples deve-se empregar dois valores: background-position: top,left. na utilização mais elaborada, <position> ou <length> podem ser utilizados Com <position> se define o posicionamento como uma porcentagem (horizontal ou vertical) e com <length> se define o posicionamento como um valor absoluto, primeiramente o horizontal seguido do vertical.

14 XML Folhas de Estilo em Cascata Utilização de Estilos Textura de Fundo Exemplo 2 27 haggis2.html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <title>background color</title> <style type="text/css"> pre { background-color: white; background-attachment: fixed; background-image: url(yellow_fabric.gif); background-position: top left; background-repeat: no-repeat; padding:2em } h1 { margin-left: 10% } h2 { color: # } pre { color:black; font-family:arial} --> <h1>the naming of cats</h1> <pre>the naming of cats is a difficult matter, It isn't just one of your holiday games You may think at first I'm as mad as a hatter When I tell you a cat must have three different names</pre> XML Folhas de Estilo em Cascata Utilização de Estilos Textura de Fundo Exemplo 2 28

15 XML Folhas de Estilo em Cascata Utilização de Estilos 29 Preenchimento, Bordas e Margens margem (transparente) Para borda, os valores thin, medium, thick e <length> devem ser atribuídos às propriedades border-top-width, border-right-width, border-bottomwidth, border-left-width e border-top-width. Para margem, os valores auto, <length> e <percentage> devem ser atribuídos às propriedades margin-top, margin-right, margin-bottom, margin-left e margin. borda preenchimento conteúdo Para preenchimento os valores auto, <length> e <percentage> devem ser atribuídos às propriedades padding-top, padding-right, padding-bottom, padding-left e padding Neste caso toda a área em torno do elemento será preenchida. XML Folhas de Estilo em Cascata Utilização de Estilos 30 Margens Exemplo margins2.htm <title>trying out page margins</title> <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } h1 { margin-top: 10%; margin-bottom: 5%; } --> <h1>twelfth Century </h1> <p>when William the Conqueror defeated Harod at Senlac in 1066, it meant much more for England than the winning, or losing, of the battle of Hastings.</p>

16 XML Folhas de Estilo em Cascata Utilização de Estilos 31 Margens Exemplo XML Folhas de Estilo em Cascata Utilização de Estilos 32 Indentação de Parágrafos - Exemplo margins3.htm <title>trying out page margins</title> <style type="text/css"> body { margin-left: 10%; margin-right: 10%; } p { text-indent:5%} --> <h1>twelfth Century </h1> <p>when William the Conqueror defeated Harold at Senlac in 1066, it meant much more for England than the winning, or losing, of the battle of Hastings.</p> <p>it was responsible for the introduction into the country of an entirely different model of life and a new set of ideas.</p>

17 XML Folhas de Estilo em Cascata Utilização de Estilos Indentação de Parágrafos - Exemplo 33 XML Folhas de Estilo em Cascata Utilização de Estilos Bordas 34 Através da aplicação de estilos se pode facilmente aplicar bordas a elementos de um documento XHTML. Uma abordagem com a utilização do atributo class deve ser realizada: Ex.: definição das bordas para uma divisão: div.box {border: solid; border-width: thin; padding: 0.2em; } Essa declaração deve ser utilizada no corpo do documento da seguinte forma : <div class= box > Texto da divisão...</div> Os tipos que podem ser utilizados na definição das bordas são: dotted, dashed, solid, double, groove, ridge, inset e outset, enquanto a propriedade borderwidth pode assumir os valores thin, medium, think ou um valor específico.

18 XML Folhas de Estilo em Cascata Utilização de Estilos 35 Fontes Através de propriedades de folhas de estilo se pode controlar como as fontes serão apresentadas em um documento XHTML. Propriedades devem ser preferencialmente utilizadas em relação aos marcadores <font>, pois além de permitirem um controle mais fino, tornam mais simples a manutenção dos documentos. Entre as principais propriedades das folhas de estilo que podem ser utilizadas na definição de fontes estão: font-size: define o tamanho da fonte. font-style: define o estilo da fonte. font-weight: define o nível de negrito da fonte. line-height: define o espaçamento vertical das linhas. font-family: define a família da fonte. XML Folhas de Estilo em Cascata Utilização de Estilos Fontes 36 Tamanho das Fontes Exemplo font-size1.htm <title>example of setting the font size</title> <style type="text.css"> body { font-size: 140%} h1 { font-size: 24pt; } --> <h1>the Redwing</h1> <h2>a winter bird</h2> <p>the redwing is a winter bird which may occasionally be seen in suburbs. A flock of 50 or more were briefly attracted to Bracknell in Berkshire, UK during the winter of 1995.</p>

19 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Tamanho das Fontes Exemplo 37 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Estilo, Negrito, Maiúsculas 38 Estilo: o estilo de uma fonte, em relação a folhas de estilo, está relacionado à apresentação da fonte em itálico, oblíquo ou normal, sendo que atualmente itálico e oblíquo fornecem o mesmo resultado Essa apresentação é estabelecida através dos valores italic, oblique ou normal que podem ser atribuídos à propriedade fontstyle. Nível de Negrito: o nível de negrito com que uma fonte é apresentada é estabelecido através da propriedade font-weight Esse nível pode ser definido em uma escala em múltiplos de 100 de 100 (fonte clara) a 900 (fonte escura) Pode-se também estabelecer o nível de negrito através da atribuição dos seguintes valores para a propriedade font-weight: bold, bolder, lighter e normal. Texto em Maiúsculas ou Minúsculas: através da propriedade text-transform da folha de estilos pode-se fazer com que uma parte do conteúdo de um elemento seja apresentada em letras maiúsculas ou minúsculas Para tanto, à propriedade texttransform desse elemento, deve-se atribuir ou o valor uppercase (maiúsculo) ou lowercase (minúsculo).

20 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Espaçamento das Linhas 39 Através da propriedade line-height, pode-se especificar o espaçamento que será aplicado entre as linhas que contém elementos XHTML. Normalmente o espaçamento das linhas é equivalente ao tamanho da fonte utilizada na linha Uma linha com um elemento <p> com uma fonte 12pt irá ser apresentada com um espaçamento entre linhas equivalente a 12pt. A propriedade line-height pode assumir os seguintes valores: <number>: um número pelo qual deve ser multiplicado o espaçamento padrão deve ser fornecido. <lenght>:um número em pontos (pt) que especifique o espaçamento deve ser fornecido. <percentage>: uma porcentagem do espaçamento padrão deve ser fornecida. <normal>: apresentação das linhas com o espaçamento padrão. XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Espaçamento das Linhas Exemplo 40 small-caps2.htm <title>approximating the small-caps style</title> <style type="text/css"> span {text-transform: uppercase; font-size: 90%} p { line-height: 200%} --> <h2>approximating the small-caps style</h2> <p><span>once upon a time</span> in a land far away, there lived a wood cutter and his daughter. Life was hard and they often went hungry. One day,...</p>

21 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes 41 Espaçamento das Linhas Exemplo XML Folhas de Estilo em Cascata Utilização de Estilos Fontes 42 Estilo, Negrito, Maiúsculas Exemplo font-size3.htm <title>example of setting the font size</title> <style type="text/css"> p { font-style: normal } em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; } --> <h1>september 1993</h1> <h2>mac Mosaic and Win Mosaic are released</h2> <p>the release of the Mosiac browser makes the Web available to a much wider audience. All kinds of people devise their own home pages as it becomes fashionable to <em>" put yourself on the Web"</em> and devise your own "home page". Even quiet and retiring software engineers place all kinds of personal information and photographs on the <strong>internet</strong>.</p>

22 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Estilo, Negrito, Maiúsculas Exemplo 43 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Nome da Fonte 44 Folhas de estilo permitem que se utilize diversos tipos de fontes na apresentação de um documento, através da propriedade font-family. Para que essa utilização se efetive é necessário que o computador no qual o navegador está instalado tenha as fontes utilizadas no documento XHTML Se a fonte não estiver disponível, a fonte padrão definida no navegador será utilizada.

23 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Nome da Fonte Exemplo 1 45 wedding.htm <title>example of font color</title> <style type="text/css"> body { font-family: " Vivaldi"; font-size: 200%; text-align: center } --> <p>you are cordially invited to the wedding of<br /> Daphne Johnston and Marcus Llewelyn-Smith,...</p> XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Nome da Fonte Exemplo 1 46

24 XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Nome da Fonte Exemplo 2 47 fonts.htm <title>style Sheet History</title> <style type="text/css"> h1{ font-family: Georgia, "Times New Roman", Garamond, Times, serif } p { font-family: Verdana, Arial, Helvetica, sans-serif } --> <h1>november 1995</h1> <p>style sheets for HTML documents begin to take shape Bert Boss, Håkon Lie, Dave Raggett, Chris Lilley and others from the World Wide Web consortium convene in Versailles near Paris to discuss the deployment of Cascading Style Sheets (the name infers that more than one style sheet can interact to produce the final look of the document). Using a special language, the CSS group advocated that everyone would soon be able to write simple styles for HTML. The SGML community suggest an alternative a LISP-like language called DSSSL.</p> XML Folhas de Estilo em Cascata Utilização de Estilos Fontes Nome da Fonte Exemplo 2 48

25 XML Folhas de Estilo em Cascata redwing3.html Utilização de Estilos Próprios Exemplo <title>example of named styles</title> <style type="text/css"> p.color { background: yellow; padding: 1.5em; border: none; margin-left:0.5%; width:100% } p.small { font-size:small; margin-left: 30%} p.normal { font-weight: bold; font-size: larger; color: black; margin-left: 30% } --> <h1>the Redwing</h1> <h2>a winter bird</h2> Utilização do atributo class <p class="color">the redwing is a winter bird which may occasionally be seen in suburbs. A flock of 50 or more were seen in Bracknell in Berkshire, UK during the winter of 1995.</p> <p class="normal">the redwing is easily identified by the white eye-stripe over its eye and by the red under its wings which can be seen only when in flight. </p> <p class="normal"> The bird is most often seen in flocks sometimes mixed in with fieldfares and even greenfinches. </p> <p class="small">the best time to see Redwings is in late November when they feast on berries in gardens. Another favorite haunt is the village football pitch. </p> 49 XML Folhas de Estilo em Cascata 50 Utilização de Estilos Próprios Exemplo