Upload
others
View
3
Download
0
Embed Size (px)
Citation preview
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
Cascading Style Sheets3 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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.
Cascading Style Sheets4 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets5 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets6 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets7 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets8 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets9 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Fizzics1.html, Resultado(sem regra de estilo)
Cascading Style Sheets10 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Fizzics2.html, Exemplo(com regras de estilo)
• Informação de estilo<HEAD><TITLE>Document Title</TITLE><STYLE TYPE="text/css"><!--BODY { background: URL(images/confetti-background.jpg) }H1 { text-align: center; font-family: Blackout }H2 { font-family: MeppDisplayShadow }STRONG{ text-decoration: underline }--></STYLE>
</HEAD>
<!-- Atenção Uso de Comentários
6
Cascading Style Sheets11 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Fizzics2.html, Resultado(com regras de estilo)
Cascading Style Sheets12 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets13 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets14 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets15 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets16 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets17 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
Cascading Style Sheets18 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets19 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets20 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets21 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
Cascading Style Sheets22 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets23 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
<!-- Apply to a section of text -->This text is in the default color, but<SPAN CLASS="blue">this text is blue.</SPAN>
Cascading Style Sheets24 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets25 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
Cascading Style Sheets26 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets27 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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>
Cascading Style Sheets28 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets29 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets30 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets31 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets32 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets33 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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 }
Cascading Style Sheets34 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets35 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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 }
Cascading Style Sheets36 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
CampBearClaw.html, Resultado
19
Cascading Style Sheets37 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets38 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets39 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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, ...
Cascading Style Sheets40 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets41 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Bates.html
Cascading Style Sheets42 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets43 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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 }
Cascading Style Sheets44 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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<!-- Etc -->
</UL><!-- Etc --></BODY></HTML>
23
Cascading Style Sheets45 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Cabinets.css.banner { background: url(images/boards.jpg) repeat-x;
font-size: 50pt;font-family: Arial Rounded MT Bold }
Cascading Style Sheets46 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Cabinets.html, Resultado
24
Cascading Style Sheets47 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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) }
Cascading Style Sheets48 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
The Bounding Box
25
Cascading Style Sheets49 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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
Cascading Style Sheets50 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Psalm23.html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD>
<TITLE>The 23rd Psalm</TITLE><STYLE><!--SPAN { float: left;
font-family: "Cushing Book";font-size: 75pt }
--></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
Cascading Style Sheets51 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
Psalm23.html, Resultado
The float property can be usedto implement “drop caps”
Cascading Style Sheets52 http://ltodi.est.ips.pt/leonardo/ci/MaterialApoio.htm
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