Folhas de Estilo em Cascata Vantagens e Desvantagens das CSS – 1

Transcrição

1
XML
Folhas de Estilo em Cascata
Sistemas de Informação
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.
 JCFJ
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.
 JCFJ
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.
 JCFJ
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
 JCFJ
Valor da
Propriedade
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> </style> e dentro do
elemento <head>.
– 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.
 JCFJ
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>.
 JCFJ
7
XML
Utilização de Uma Ferramenta: Html-Kit
 JCFJ
8
Definição Local de Estilos – Exemplo
attempt.html
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Trying out a local style</title>
</head>
<body>
<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>
</body>
</html>
 JCFJ
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 () 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}.
 JCFJ
10
Definição Interna de Estilos – Exemplo
second-attempt.html
<!DOCTYPE html
<head>
<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; }
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
11
Definição Interna de Estilos – Exemplo
 JCFJ
12
Definição Externa de Estilos – Exemplo
third-attempt.htm
<!DOCTYPE html
<head>
<title>Trying out a style sheet</title>
<link rel="stylesheet" href="first-link.css" />
</head>
<body>
<h1>The second attempt<br />
<b>at a style sheet</b></h1>
<p>The same style will be applied to <b>all</b> paragraphs in the document.</p>
</body>
</html>
first-link.css
/* This is the style sheet to be linked */
p {font-size:120%;}
h1 {color:green; }
b { color:red; }
 JCFJ
13
Definição Externa de Estilos – Exemplo
 JCFJ
14
heritage.html
Herança e Propriedades de CSS – Exemplo
 JCFJ
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><html
xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Trying out the heritage with the style sheet</title>
<!-body {font-style:italic}
p {font-size:120%;}
b { color:red; font-size: 150%;}
-->
</style>
</head>
<body>
<h1>An heritage attempt<br />
<b>with style sheet</b></h1>
<p>The same style will be applied to <b>all</b> paragraphs in the document.</p>
</body>
</html>
15
Herança e Propriedades de CSS – Exemplo
Herdada de <b>
 JCFJ
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.
 JCFJ
XML – Folhas de Estilo em Cascata – Utilização de Estilos
17
ctales.html
Cor da Fonte – Exemplo
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Example of font color</title>
<!-body { font-family: Trebuchet, Arial, sans-serif }
h2 { color: #006699 }
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:#006699 }
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
Cor da Fonte – Exemplo
 JCFJ
18
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 <body>, das cores das ligações:
<body link=”navy” vlink=”maroon” alink=”red”>
 JCFJ
ctales2.html
Cor das Ligações Hipertexto – Exemplo
 JCFJ
<!DOCTYPE html
<head>
<!-h2 { color: #990066 }
h3 { color: black }
h4 { color:#990066;}
pre { color: #990066}
em { color: #FF6633 }
a:link { color: black }
a:visited { color: blue }
a:active { color: lime }
-->
</style>
</head>
<body>
<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>
</body>
</html>
20
21
Cor das Ligações Hipertexto – Exemplo
 JCFJ
22
A Cor de Fundo
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
Cor do texto 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; }
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; }
 JCFJ
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>:
<body background=”yellow_fabric.gif”>
 JCFJ
haggis.html
Textura de Fundo – Exemplo 1
 JCFJ
<!DOCTYPE html
<head>
<title>Example of a textured background</title>
<style>
body{ background-image: url(yellow_fabric.gif); }
</style>
</head>
<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>
</body>
</html>
24
25
 JCFJ
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.
 JCFJ
27
haggis2.html
<!DOCTYPE html
<head>
<title>background color</title>
<!-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: #990066 }
pre { color:black; font-family:arial}
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
 JCFJ
28
29
Preenchimento, Bordas e Margens
margem (transparente)
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.
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.
 JCFJ
Margens – Exemplo
margins2.htm
<!DOCTYPE html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Trying out page margins</title>
<!-body { margin-left: 10%; margin-right: 10%; }
h1 { margin-top: 10%; margin-bottom: 5%; }
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
30
31
Margens – Exemplo
 JCFJ
Indentação de Parágrafos - Exemplo
margins3.htm
<!DOCTYPE html
<head>
<title>Trying out page margins</title>
<!-body { margin-left: 10%; margin-right: 10%; }
p { text-indent:5%}
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
32
33
Indentação de Parágrafos - Exemplo
 JCFJ
34
Bordas
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.
 JCFJ
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.
 JCFJ
XML – Folhas de Estilo em Cascata – Utilização de Estilos – Fontes
Tamanho das Fontes – Exemplo
font-size1.htm
<!DOCTYPE html
<head>
<title>Example of setting the font size</title>
<style type="text.css">
<!-body { font-size: 140%}
h1 { font-size: 24pt; }
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
36
37
Tamanho das Fontes – Exemplo
 JCFJ
38
Estilo, Negrito, Maiúsculas
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).
 JCFJ
39
Espaçamento das Linhas
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.
 JCFJ
Espaçamento das Linhas – Exemplo
small-caps2.htm
<!DOCTYPE html
<head>
<title>Approximating the small-caps style</title>
<!-span {text-transform: uppercase; font-size: 90%}
p { line-height: 200%}
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
40
41
Espaçamento das Linhas – Exemplo
 JCFJ
42
Estilo, Negrito, Maiúsculas – Exemplo
font-size3.htm
<!DOCTYPE html
<head>
<title>Example of setting the font size</title>
<!-p { font-style: normal }
em { font-style: italic; font-weight: bold; }
strong { text-transform: uppercase; font-weight: bold; }
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
43
Estilo, Negrito, Maiúsculas – Exemplo
 JCFJ
44
Nome da Fonte
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.
 JCFJ
45
Nome da Fonte – Exemplo 1
wedding.htm
<!DOCTYPE html
<head>
<!-body { font-family: " Vivaldi";
font-size: 200%; text-align: center }
-->
</style>
</head>
<body>
<p>You are cordially invited to the wedding of<br />
Daphne Johnston and Marcus Llewelyn-Smith, ....</p>
</body>
</html>
 JCFJ
 JCFJ
46
47
fonts.htm
<!DOCTYPE html
<head>
<title>Style Sheet History</title>
<!-h1{ font-family: Georgia, "Times New Roman", Garamond, Times, serif }
p { font-family: Verdana, Arial, Helvetica, sans-serif }
-->
</style>
</head>
<body>
<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>
</body>
</html>
 JCFJ
 JCFJ
48
49
redwing3.html
Utilização de Estilos Próprios – Exemplo
<!DOCTYPE html
<head>
<title>Example of named styles</title>
<!-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;
Utilizaç
Utilização do atributo class
margin-left: 30% } -->
</style>
</head>
<body>
<h1>The Redwing</h1>
<h2>A winter bird</h2>
<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>
</body>
</html>
 JCFJ
Utilização de Estilos Próprios – Exemplo
 JCFJ
50

Folhas de Estilo em Cascata Vantagens e Desvantagens das CSS – 1

Transcrição

Documentos relacionados

Clique aqui para baixar - Colégio Madre Paula Montalt

jardim i - Cantinho Mágico

COLÉGIO MADRE PAULA MONTALT

1. SUGESTÃO: Uma mochila contendo: A) Um estojo com: • 04 lápis

ANO LETIVO 2016 - JARDIM I Livro: Vai Começar a

Trabalhando com XML

Folhas de Estilo

smart-fab

XML: Introdução - Marx Gomes Van der Linden

ESTILOS DE APRENDIZAGEM E AS TECNOLOGIAS: GUIAS

Algoritmos Morfológicos escritos em XML

Pseudomonas syringae pv. actinidiae Takikawa et. al. em plantas de

Seção do Cabeçalho - profª msc. elizabete munzlinger

Programa - Nota Fiscal Eletrônica (NF-e)

Ricardo Terra rterrabh [at] gmail.com - DCC

SF0411

CSS - Kikinho

requerimento de registro de livros

Lectin activity in leaves from Indigofera suffruticosa

Que fonte devo usar?