programação - ipsltodi.est.ips.pt/leonardo/ci/pdf/3 css.pdf · – pode definir fontes, fundos,...

1

1 António Gonçalves

ProgramaçãoNa Web

CascadingStyle Sheets

Cascading Style Sheets2 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm

Agenda• Definir regras de estilo• Definir regras de estilo externas e

embebidas • Criar novos elementos HTML atraves de

Classes de Estilo • Definir propriedades de Texto e de Fonte • Controlar propriedades do fundo e do

foreground• As camadas no Netscape• Criar camadas atravês de folhas de estilo

2


Style Sheets• Descrição de regras de estilo que indicam ao

browser como apresentar as diversas TAGS de um documento HTML (idêntico os tipos de parágrafos do MSWORD)..

• Vêm substituir os atributos de formatação das TAGS HTML – Exº <HR WIDTH="75%" SIZE=5 ALIGN=center>

• Forma de separar a apresentação do documento da sua estrutura

• A maioria das propriedades das style sheetspodem ser utilizadas em qualquer TAG HTML.


Beneficios• Um meio poderoso e flexível de especificar

a formatação de elementos HTML – Pode definir fontes, fundos, cores de fundo, imagens de

fundo, margens, etc.• É possível a partilha de folhas de estilo

entre vários documento e até em todo um site

• Permite definir uma classe para um estilo, o que se traduz na criação de novos elementos HTML

• As regras são aplicadas de um modo hierarquico (existencia de regras de precedencia)

3


Histórico das folhas de estilo• CSS, Level 1 (1996)

– Aplica estilos simples aos elementos HTML – http://www.w3.org/TR/REC-CSS1

• CSS, Level 2 (1998)– Suporte a um número variado de tipos de média (Browsers visuais,

dispositivos associados a audição, impressoras, dispositivos braille)– http://www.w3.org/TR/REC-CSS2

• CSS, Level 3 (draft 2001)– Modularização do CSS – http://www.w3.org/TR/css3-roadmap/

• Notas: – CSS1 é suportado pelo Netscape e pelo Internet Explorer 4.x e superior – Ver http://www.webreview.com/style/css1/charts/mastergrid.shtml para um

sumário das compatibilidades dos browser


Definição de Regras de estilo

• Cada regra de estilo é constituída por um ‘selector’, normalmente uma tag HTML (p.e BODY, P, EN, etc), e a(s) Propriedades a aplicar ao ‘selector’.

– Exº selector { property1: value1; property2: value2; …; propertyN: valueN }

• Existem inúmeras propriedades que podem ser definidas para um elemento. Cada propriedade assume um valor de entre um conjunto de valores possíveis.– Exº color, margin, e font.

4


Definição de Regras de estilo

<HEAD> <TITLE>Formatacao com CSS</TITLE><STYLE TYPE="text/css">

H1 { font-size: x-large; color: red; margin-left: 10% }H2 { font-size: large; color: orange; margin-left: 5%}

</STYLE> </HEAD><BODY><h1>Heading1</h1><h2>Heading2</h2></BODY><HTML>

<HEAD> <TITLE>Formatacao sem CSS Example</TITLE></HEAD><BODY><table border=0><tr>

<td width=10%></td><td><font size="x-large"

color="red"><h1>Heading1</h1></font></td></tr></table><table><tr>

<td width=5%></td><td><font size="x-large"

color="orange"><h2>Heading2</h2></td></tr></table></BODY><HTML>

Sem regras de estiloSem regras de estilo

Com regras de estiloCom regras de estilo


Fizzics1.html, Exemplo(sem folha de estilo)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>

<TITLE>New Advances in Physics</TITLE></HEAD><BODY><H1>New Advances in Physics</H1>

<H2>Turning Gold into Lead</H2>In a startling breakthrough, scientist B.O. "Gus" Fizzicshas invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>....

</BODY></HTML>

5


Fizzics1.html, Resultado(sem regra de estilo)


Fizzics2.html, Exemplo(com regras de estilo)

• Informação de estilo<HEAD><TITLE>Document Title</TITLE><STYLE TYPE="text/css"></STYLE>

</HEAD>

<!-- Atenção Uso de Comentários

6


Fizzics2.html, Resultado(com regras de estilo)


Fizzics2.html, Resultado(com regras de estilo)

BODY { background:URL

(images/confetti-background.jpg) }

H1 { text-align: center;font-family: Blackout }

H2 {font-family: MeppDisplayShadow }

STRONG{text-decoration: underline }

7


Associação de regras de estilo ao HTML

• Existem basicamente 3 formas de associar regras de estilo ao HTML– Importação de uma Style Sheet– Associação a uma Style Sheet externa– Regras de estilo inline– Definição de regras de estilo na página HTML


Importação de uma Style Sheet• Uma Style Sheet pode ser importada através da instrução CSS @import. Esta

instrução pode ser utilizada numa style sheet ou no conteúdo do elemento <STYLE>.

• Quando incluídos no conteúdo do elemento <STYLE>, todos os comandos @import deverão aparecer em primeiro lugar, podendo-se seguir a definição de outras regras de estilo, que terão precedência sobre as definidas nos documentos importados.

* A grande vantagem em poder importar diversas style sheets é o aumento da modularidade. Por exemplo, podem ser criadas diversas style sheets, cada uma delas definindo um determinado subconjunto de elementos HTML.

* Este objectivo também pode ser conseguido através da utilização do elemento <LINK>

<STYLE TYPE="text/css" MEDIA="screen, projection"> <!—@import url(http://www.htmlhelp.com/style.css);@import url(/stylesheets/punk.css);DT { background: yellow; color: black }--></STYLE>

8


Associação e uma Style Sheetexterna

• Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento <LINK> do HTML.

• Uma Style Sheet externa é ideal quando um estilo é aplicado a uma grande quantidade de páginas (um site).

• Utilizando esta técnica, é possível alterar o aspecto de um site inteiro, mudando apenas um único ficheiro.

BODY { MARGIN: 0px }A:active { COLOR: deepskyblue }A:hover { BACKGROUND-COLOR: red; COLOR: white }TD.leftBorder { BACKGROUND-COLOR: lightgrey; WIDTH: 15% }TD.topBorder { BACKGROUND-COLOR: red; HEIGHT: 15% }TD.body { }A { COLOR: black }.modelTitle { FONT-FAMILY: Arial, 'Times New Roman MT Extra Bold‘ }TABLE.mainTable { HEIGHT: 100%; WIDTH: 100% }

<HTML><HEAD><LINK REL=StyleSheet HREF="style.css” TYPE="text/css" ></HEAD><BODY>….</BODY></HTML>

style.cssstyle.css


Associação e uma Style Sheetexterna (cont.)• No elemento <LINK> pode ser definido o parâmetro

MEDIA que define o meio(s) visual ao qual a style sheetdeve ser aplicada.

<HEAD><LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen><LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print"><LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print"><LINK REL=“StyleSheet” HREF="aural.css" TYPE="text/css" MEDIA=aural></HEAD>

* Valores possíveis para media:* screen, print, projection, aural, braille, tty, tv, all

9


Definição local• As regras de estilo podem ser definidas no cabeçalho (zona

de <HEAD>) da página HTML onde vão ser aplicados.• Estes estilos apenas poderão ser aplicados a elementos da

página onde foram definidos.

<HTML><HEAD><STYLE TYPE="text/css" MEDIA=screen> <!—BODY { background: url(foo.gif) red; color: black }P EM { background: yellow; color: black } .note { margin-left: 5em; margin-right: 5em } --></STYLE></HEAD><BODY>….</BODY></HTML>


Folha de estilo embebida (Inline)• Usar o Atributo STYLE para cada elemento HTML para

definir directamente um estilo• Exemplo:

* A definição de regras inline é o método mais inflexível de todos. Este método perde a maioria das vantagens das regras de estilo, misturando a apresentação com a estrutura.

* Os estilos inline são aplicáveis a todos os media, uma vez que não existe nenhum mecanismo para o especificar.

...<H1>New Advances in Physics</H1><P STYLE="margin-left: 0.5in;

margin-right: 0.5in; font-style: italic">

This paper gives the solution to threepreviously unsolved problems: turning lead into gold,antigravity, and a practical perpetual motion machine....

10


Sintaxe básica – Selectores• Selectores simples

– Qualquer tag HTML pode ser um selector• P { text-indent: 3em }

• Selectores de Classe– Cada selector simples pode ter diferentes classes, que são definidos pelo

atributo classclass da TAG HTML• code.html { color: #191970 } • code.css { color: #4b0082 }

• Sem elemento associado– Válida para qualquer TAG HTML

• .note { font-size: small }• Selectors de ID

– Referencia a(s) TAG(s) com atributo ID svp94O (usar apenas em situações muito particulares)

• #svp94O { text-indent: 3em }• <P ID=svp94O>Text indented 3em</P>

• Selectors de contexto– Exº: Texto em itálico dentro de um parágrafo, tem fundo em amarelo.

• P I { background: yellow }

FECH

ADO


Sintaxe básica - Declarações• Propriedades

– As propriedades são associadas a selectors, por forma a definir o seu estilo.

– Exº de propriedades: color, margin, font, width, height, etc.• Valores

– O valor que a propriedade recebe. Cada propriedade tem um conjunto de valores possíveis.

– Exº valores possíveis para color: • Keywords:

– aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

• Rgb– #rrggbb (ex., color: #00cc00)– #rgb (ex., color: #0c0) – rgb(x,x,x) onde x é um inteiro entre 0 and 255 inclusive (ex.,

color: rgb(0,204,0)) – rgb(y%,y%,y%) onde y é um número entre 0.0 and 100.0

inclusive (ex., color: rgb(0%,80%,0%))

11


Sintaxe básica• Agrupamento de estilos

– Por forma a diminuir declarações de estilo repetidas, podem ser feitos agrupamentos de selectors.

• Ex.: H1, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif }• Herança

– Virtualmente todos os selectores, encadeados noutros selectors, herdam as propriedades atribuídas ao(s) selector exterior, a não ser que sejam redefinidas. Existem situações em que o selector interior não herda algumas das propriedades do selector exterior, pelo facto destas não fazerem sentido no contexto corrente.

• Ex: o atributo margin-top de body, não é herdado.

<HTML><HEAD> <TITLE>Formatacao com CSS</TITLE><STYLE TYPE="text/css">

BODY { color: blue }P.xpto { color: gray }

</STYLE> </HEAD></BODY><P class=xpto> Texto a cinzento </P><P> Texto a azul </P></BODY></HTML>


Definir uma Classe de Estilo• Para definir uma classe de estilo associada a um elemento

HTML, este deve ser seguido de um “.” seguido do nome da Classe

// Define an "abstract" paragraph typeP.abstract { margin-left: 0.5in;

margin-right: 0.5in;font-style: italic }

• Para usar a classe definida, deve ser incluida no atributo CLASS associado com o elemento HTML

<H1>New Advances in Physics</H1><P CLASS="abstract">This paper gives the solution to three previouslyunsolved problems: turning lead into gold, antigravity, and a practical perpetual motion machine.

12


Definir uma Classe de Estilo (cont.)

• Para definir uma classe de estilo global, deve-se omitir qualquer elemento

//Style available to all elements.blue { color: blue; font-weight: bold }

• Para usar, deve-se utilizar a classe no atributo CLASS associado com um elemento HTML

<H2 CLASS="blue">A Blue Heading</H2>

This text is in the default color, but<SPAN CLASS="blue">this text is blue.</SPAN>


Pseudo classes e Pseudo Elementos•• Pseudo classesPseudo classes e pseudo elementospseudo elementos são classes e elementos

especiais reconhecidos automaticamente pelos browsers que suportam CSS (nem todos!!!).

• Regras com pseudo classes e pseudo elementos tem o seguinte formato:

– selector:pseudo-class { property: value }– selector:pseudo-element { property: value }

• Estes elementos não devem ser especificados no atributo CLASS.• Classes normais podem ser utilizadas com pseudo classes e pseudo

elementos.– selector.class:pseudo-class { property: value }– selector.class:pseudo-element { property: value }

• Pseudo classes da TAG <A>– A tag A tem 4 pseudo classes que identificam o estilo dos diversos tipos de links: link,

active, visited, hover.• A:link { color: red } • A:active { color: blue; font-size: 125% } • A:visited { color: green; font-size: 85% }• A:hover { color: blue; font-size: 130% }

• Pseudo elemento first-line– P:first-line { font-variant: small-caps; font-weight: bold }

• Pseudo elemento first-letter– P:first-letter { font-size: 300%; float: left }

13


Atributo IDID

• O atributo ID identifica univocamente um elemento HTML (TAG) numdocumento. Não podem/devem existir 2 elementos com o mesmo ID num documento.

– Exº: • <P ID=firstp>My first paragraph.</P>• <P ID=secondp>My second paragaph.</P>

• O elemento poderá ter regras de estilo associadas.– P#firstp { color: navy; background: transparent }– P#secondp { color: black; background: transparent }

• Qualquer elemento com o atributo Id definido pode ser utilizados como ancora destino num link.

• <P>See <A HREF="#firstp">the opening paragraph</A> for more information.</P>


Atributo ClassClass• O atributo class associa um elemento a uma ou mais

classes.– PS: A maioria dos browsers não suporta a associação de um elemento a

múltiplas classes.• Ao contrário do atributo Id, vários elementos podem

partilhar a mesma classe.• O atributo class é particularmente usado com definições

de regras de estilo.<STYLE TYPE=text/css>

.navbar { margin-top: 2em; padding-top: 1em; border-top: solid thinnavy }

.navbar IMG { float: right }</STYLE><BODY><DIV CLASS=navbar><P><A HREF="/">Home</A> | <A HREF="./">Index</A> | <A HREF="/search.html">Search</A></P><P><A HREF="/"><IMG SRC="logo.gif" ALT="" TITLE="WDG Logo"></A></P></DIV></BODY>

14


O elemento <SPAN><SPAN>• O elemento SPAN permite definir estilos sem estarem associados a elementos

estruturais do HTML.• Aceita os atributos STYLE, CLASS e ID. Desta forma pode ser utilizado como

um selector numa definição de estilo.• O SPAN é um inline element, e só pode ser conter elementos inline.• São inline elements todos os elementos que apenas podem conter texto e/ou

outros elementos inline (ex. A, INPUT, B, SELECT, etc). A representação visual destes elementos não implica o início de uma nova linha na página HTML.

• Este elemento existe apenas para aplicar um estilo a uma zona da página HTML.

<HTML> <HEAD> <TITLE>Example of SPAN</TITLE> <META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css"> <STYLE TYPE="text/css" MEDIA="screen, print, projection"><!–.firstwords { font-variant: small-caps } --></STYLE> </HEAD><BODY><P><SPAN CLASS=firstwords>The first few words</SPAN> of a paragraph could be in small-caps. Style may also be inlined, such as to change the style of a word like <SPAN STYLE="font-family: Arial"> Arial</SPAN>.</P></BODY></HTML>


O elemento <DIV><DIV>• O elemento DIV (divisão) tem uma funcionalidade idêntica à do elemento SPAN,

com a diferença que este elemento é block level element.• Block level elements são a grande maioria dos elementos que aparecem dentro

do BODY (ex. parágrafos, headings, tabelas, e outras divisões). Estes elementos podem conter inline elements e block level elements. A representação visual destes elementos implica normalmente o início de uma nova linha na página HTML.

• Este elemento existe apenas para aplicar um estilo a uma zona da página HTML.

<STYLE>div.note { font: italic bold 12pt/14pt Times, serif; color: blue }</ STYLE ><BODY><DIV CLASS=note><H1>Divisions</H1><P>The DIV element is defined in HTML 3.2, but only the ALIGN attribute is permitted in HTML 3.2. HTML 4.0 adds the CLASS, STYLE, and ID attributes, among others.</P><P>Since DIV may contain other block-level containers, it is useful for marking largesections of a document, such as this note.</P><P>The closing tag is required.</P></DIV></BODY>

15


Precedência dos Estilos

•Em alguns casos pode especificar diferentes características de estilo para o mesmo texto por meio da combinação de um arquivo de style sheet

•Se estas diferentes especificações entrarem em conflito entre si, o browser tem que decidir qual dos valores deve usar

•Essa escolha é feita com base numa ordem de precedência (isto é precisamente o que se quer dizer com cascading style sheets - "folhas de estilo em cascata")

– A ordem de precedência dos cascading style sheets é esta: » Regras inline» Regras de estilo locais» Associação a uma Style Sheet externa

É importante lembrar esta ordem de precedência para que saiba que valores de style irão sobrepujar os outros


Regras de precedência de uma folha de estilo

1. Regras marcadas como “important” têm prioridade máxima (raramente usadas)H1 { color: black !important;

font-family: sans-serif }

• As regras definidas têm prioridade sobre as preferencia do browser:

– A ordem de precedência dos cascading style sheets é esta: » Regras inline» Regras de estilo locais» Associação a uma Style Sheet externa

•

16


Regras de precedência de uma folha de estilo (cont.)

3. Regras mais especificas têm precedência sobre regras menos especificas

#foo { ... } // ID Maior prioridadeP.big H1 { ... } //Class Maior prioridade do que sobre os elementos

P STRONG { ... } //2 marcas maior prioridade do que 1 marca STRONG { ... }

4. Em caso de empate, a última regra tem maior prioridade


Propriedades associada a Fonte

• font-weight– Negrito relativo de uma fonte– normal | lighter | bold | bolder | 100 | 200 | ... | 900

H1 { font-weight : 200 }H2 { font-weight : bolder }

• font-style– Tipo de Fonte– normal | italic | oblique

P { font-style : normal }TH { font-sytle : italic }

17


Propriedades associada a Fonte (cont.)

• font-size– Tamanho relativo ou absoluto de uma fonte – pt, pc, in, cm, mm | em, ex, px, % |

xx-large | x-large | large | medium | small | x-small |xx-small | smaller | larger

STRONG { font-size: 150% }P { font-size: 14pt }P { font-size: xx-large }

• font-family– Tipo de fonte

H1 { font-family: Arial }


CampBearClaw.html, Exemplo<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>

<TITLE>Camp Bear Claw</TITLE><LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css">

</HEAD><BODY><H1>Camp Bear Claw</H1>We have the following activities:<H2 CLASS="archery">Archery</H2><H2 CLASS="arts">Arts and Crafts</H2><H2 CLASS="horseback">Horseback Riding</H2><H2 CLASS="hiking">Hiking</H2><H2 CLASS="campfire">Campfire Song Times</H2><H2 CLASS="java">Java Programming</H2></BODY></HTML>

18


CampBearClaw.css

H1 { text-align: center;font-family: Funstuff }H2.archery { font-family: ArcheryDisplay }H2.arts { font-family: ClampettsDisplay }H2.horseback { font-family: Rodeo }H2.hiking { font-family: SnowtopCaps }H2.campfire { font-family: Music Hall }H2.java { font-family: Digiface }


CampBearClaw.html, Resultado

19


Propriedade do Texto• text-decoration

– Descreve decorações adicionais ao texto – none | underline | overline | line-through | blink

P { text-decoration: underline }

• vertical-align– Descreve como os elementos são posicionados Verticalmente– top | bottom | baseline | middle | sub | super | text-top | text-bottom |

%• text-align

– Descreve como os elementos são posicionados horizontalmente– left | right | center | justify


Propriedade do Texto, cont.• text-indent

– Identação da primeira linha de um paragrafo – +/– pt, pc, in, cm, mm | +/– em, ex, px, %

P { text-indent: -25px } /* Hanging indent */

• line-height– Define a distância entre duas linhas consecutiva de um

paragrafo – normal | number | pt, pc, in, cm, mm | em, ex, px, %

.double { line-height: 200% }

.triple { line-height: 3 } /* 3x the font size */DIV { line-height: 1.5em }

20


Bates.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>

<TITLE>An Open Letter to the IRS</TITLE><LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/css">

</HEAD><BODY BACKGROUND="images/bond-paper.jpg"><P CLASS="rhead">April 1, 2001<HR><P CLASS="rhead">William A. Bates<BR>Macrosoft Corporation<BR>Blumond, WA 12345<P CLASS="lhead">Internal Revenue Service<BR>Philadelphia, PA 67890<P><BR>Dear Sirs,<P CLASS="body">I am writing to inform you that, due to financial difficulties, ...


Bates.cssP { margin-top: 5px }P.rhead { text-align: right;

margin-right: 0.5in;font-family: sans-serif }

P.lhead { font-family: sans-serif }P.body { text-align: justify;

text-indent: 0.5in }P.foot { margin-left: 60%;

line-height: 300% }

21


Bates.html


Propriedade de Foreground e Background

• color– Cor do texto ou cor do foreground– color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) |

rgb(rrr%, ggg%, bbb%)

P { color : blue }H1 { color : #00AABB }H3 { color : rgb(255, 0, 0 ) } /* red */

• background-image– none | url(filename)– Define uma imagem para ser utilizada como background

de uma região

H2 { background-image: url(Bluedrop.gif);}

22


Propriedade de Foreground e Background, cont.

• background-repeat– Define como espalhar uma imagem numa região– repeat | repeat-x | repeat-y | norepeat

BODY {

background-image: url(Bluedot.gif);

background-repeat: repeat-x;

}

• background– Permite combinar multiplas propriedades

P { background: url(wallpaper.jpg) repeat-x }


Cabinets.html, Exemplo<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>

<TITLE>Joe's Cabinets</TITLE><LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css">

</HEAD><BODY><CENTER><TABLE WIDTH=360 HEIGHT=199>

<TR><TD ALIGN="CENTER" CLASS="banner">Joe's Cabinets</TABLE></CENTER><P>Welcome to Joe's Cabinets. We specialize in<UL>

<LI>Custom Cabinets<LI>Kitchen Remodeling

</UL></BODY></HTML>

23


Cabinets.css.banner { background: url(images/boards.jpg) repeat-x;

font-size: 50pt;font-family: Arial Rounded MT Bold }


Cabinets.html, Resultado

24


Propriedades das caixas(Bounding Box)

• CSS assume que os elementos sãoenvolvidos numa ou mais caixas (bounding box)

• É possível definir vários atributos: margins, borders, e padding da caixa

P { margin: 0.25in;border: 0.25in solid black;padding: 0.25in;background: URL(images/bond-paper.jpg) }


The Bounding Box

25


Images e Elementos Flutuantes• width, height

– Define um tamanho fixo para um elemento (normalmente uma imagem )

– auto | pt, pc, in, cm, mm | em, ex, px

IMG.bullet { width: 50px; height: 50px }

• float– Permite que um elemento seja deslocado para a esquerda

ou para a direita de modo a ser envolvido por texto – none | left | right


Psalm23.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>

<TITLE>The 23rd Psalm</TITLE><STYLE></STYLE></HEAD><BODY><H2 ALIGN="CENTER">The 23rd Psalm (King James Version)</H2><SPAN>T</SPAN>he LORD is my shepherd; I shall not want.He maketh me to lie down in green pastures: he leadeth me beside the still waters. He restoreth my soul: he leadeth me in the paths of righteousness for his name's sake. Yea,

26


Psalm23.html, Resultado

The float property can be usedto implement “drop caps”


Efeito de um Paragrafo, Exemplo, cont.

Adicionar um <P> não quebra o fluxo Adicionar <P STYLE="clear: left"> força o próximo paragrafo a começar após o elemento flutuante

programação - ipsltodi.est.ips.pt/leonardo/ci/pdf/3 css.pdf · – pode definir fontes, fundos,...

Documents