You are on page 1of 32

Curso Profissional Tcnico de Multimdia S. I.

10 ano Mdulo 2

MDULO 2 LINGUAGEM DE PROGRAMAO I

CONSTRUO DE PGINAS WEB


-Introduo s Cascaded Style Sheets (CSS)
o Vantagens e desvantagens no uso de folhas de estilo o Definio de estilos o Sintaxe usada nas folhas de estilo o Identificadores e classes o Definies do fundo de um elemento propriedades da classe Background o Formatao de texto o Limites o Margens o Listas o Dimensionamento de elementos Dimension o Alinhamento relativo de elementos na pgina propriedades de Classification o Posicionamento e forma de elementos na pgina Positioning o Unidades de medida o Pseudo-classes o Pseudo-elementos

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

-1-

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

O QUE ?
Cascading Style Sheets (Folhas de Estilo em cascata) ou CSS so estilos para pginas web e envolvem um conceito inovador: possibilitam a mudana da aparncia simultnea de todas as pginas relacionadas com o mesmo estilo. Ao invs de colocar a formatao dentro do cdigo, o programador cria um link (ligao) para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um portal. Quando quiser alterar a aparncia do portal basta portanto modificar apenas um ficheiro. Esta tecnologia apareceu em 1996 e foi padronizada pela World Wide Web Consortium (a entidade que define os padres da web), e mesmo no fazendo parte do HTML padro, possui um conjunto de novas tags que ajudam a alcanar um melhor controlo sobre o layout (aparncia) das nossas pginas. O CSS suportado pelos browsers Microsoft Internet Explorer e Netscape Navigator, nas verses 4 ou posteriores; e pelo Opera, nas verses 3.50 ou posteriores. VANTAGENS VANTAGENS: * Os estilos CSS foram adicionados pelo W3C s recomendaes HTML 4 e XHTML para resolver problemas muito srios que afectavam a qualidade das pginas escritas em HTML e dificultavam a sua manuteno. * A utilizao de folhas de estilos externas permite poupar tempo, ganhar flexibilidade e aumentar a consistncia das pginas que constituem um website. * Quando guardamos os estilos num ficheiro externo e os aplicamos a todas as pginas de um website, a modificao de diversas qualidades do aspecto grfico passa a ser uma tarefa fcil. * As pginas que usam estilos CSS, para alm de serem mais fceis de escrever, so tambm mais leves e aparecem mais depressa no browser.
DESVANTAGENS: E DESVANTAGENS NO USO DE FOLHAS DE ESTILO

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

A desvantagem em relao aos browsers que podem no implementar de forma completa as CSS, e desta forma convm garantir que o documento no se torne ilegvel devido implementao de recursos a funcionalidades demasiado avanadas.
Ana Paula Cao -2 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

LIMITAES

DOS BROWSERS ACTUAIS

Apesar de os browsers actuais (Netscape 7/Mozilla, MSIE 5 e superior, Opera 7) oferecerem um bom suporte para os estilos CSS, preciso chamar a ateno para o facto de ainda subsistirem alguns problemas quando aplicamos tcnicas avanadas de formatao baseada em CSS. Os problemas mais graves so causados pelo MSIE, que contm bugs que lhe do alguns comportamentos que se desviam dos padres CSS. O bug mais grave resulta da implementao errada do modelo de dimensionamento dos elementos. Esse bug bem conhecido e pode quase sempre ser ultrapassado recorrendo a truques que no comprometem o funcionamento das pginas nos restantes browsers. Para alm deste bug e de outros bugs menos importantes devemos ter sempre em ateno o facto de as implementaes dos padres CSS serem geralmente incompletas. Isto significa que no podemos contar com algumas propriedades. Apesar disso podemos estar seguros de que as propriedades com que podemos contar so suficientemente teis para no querermos passar sem elas. As limitaes associadas ao suporte que os browsers actuais oferecem tm de estar sempre presentes na mente do criador de pginas baseadas em CSS. Se usar apenas as funcionalidades que so bem suportadas, que j so muitas, no ser preciso tomar muitas precaues. Se decidiu utilizar funcionalidades mais avanadas definidas pelos padres CSS lembre-se que preciso testar tudo de forma exaustiva em todos os browsers relevantes para no ter surpresas desagradveis. DEFINIO
DE ESTILOS

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Existem 4 maneiras de incluirmos estilos CSS s pginas: 1. Incluir um style sheet no ficheiro HTML (interno). 2. Criar um link para um style sheet noutro ficheiro (externo). 3. Importar um style sheet de outro ficheiro. 4. Adicionar estilos dentro dos comandos do ficheiro HTML (local). 1. Incluir um style sheet no ficheiro HTML Neste mtodo, o cdigo do style sheet includo dentro do cdigo da prpria pgina, no comeo do ficheiro, antes do corpo (<BODY>) do cdigo HTML.
Ana Paula Cao -3 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Por exemplo: <HTML> <STYLE TYPE=text/css> <! H1 {font-family:impact; background:yellow; color:red} P {color: green} > </STYLE> <HEAD> <TITLE>Exemplo de uma folha de estilo</TITLE> </HEAD> <BODY> <H1>Exerccio introdutrio sobre </H1> <P>Cascading Style Sheets</P> </BODY> Quando o style sheet includo desta forma, as definies colocadas ali, valem para toda a extenso do ficheiro HTML. Este o mtodo mais apropriado quando queremos incluir style sheets numa pgina de cada vez. O atributo TYPE=text/css significa que se trata de um tipo MIME, para que os browsers que no suportam CSS ignorem o cdigo. Mas alguns browsers mais antigos como IE 2.0 para Mac, no reconhecem o atributoTYPE=text/css e vo mostrar o cdigo CSS como se fosse texto normal, da ser importante colocar as tags de comentrio (<! e >) para isso no acontecer e ser ignorado pelo browser. 2. Criar um link para um style sheet noutro ficheiro (externo) Uma folha de estilos externa constitui a melhor opo quando os mesmos estilos so aplicados a vrias pginas. Com uma folha de estilos externa podemos alterar o aspecto grfico de muitas pginas bastando para isso alterar apenas o ficheiro em que esto definidos os estilos. Cada pgina contm um elemento <link> que a liga folha de estilos.
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Para criar um link, deve-se substituir a tag <STYLE> pela tag <LINK>, e colocar a declarao de estilo dentro da tag <HEAD> do documento. Neste mtodo, no necessrio usar as tags de comentrio. Exemplo: <head> <link rel="stylesheet" type="text/css" href="estilos.css"> </head>
Ana Paula Cao -4 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

3. Importar um style sheet de outro ficheiro A importao de um estilo externo parecida com o mtodo anterior. A diferena que no pode combinar o mtodo de link com outros mtodos de inseres de estilos, mas a importao pode ser combinada. Exemplo: <HTML> <STYLE TYPE=text/css> <! @import url(def_estilos.css) P {color: red} > </STYLE> <HEAD> <TITLE> Exemplo de uma folha de estilo </TITLE> </HEAD> <BODY> <H1> Exerccio introdutrio sobre </H1> <P>Cascading Style Sheets</P> </BODY> Neste exemplo, o browser importa primeiro as definies no ficheiro.css, e adiciona as regras internas para serem usadas por toda a pgina. Mas o P tem uma regra tanto no ficherio externo como nos estilos embutidos. Neste caso, ser sempre usado o estilo embutido, em detrimento da definio externa. Neste exemplo o resultado obtido do texto que est dentro das tags P, ser de cor vermelha. Obs.: apenas o browser IE4 suporta importao. 4. Adicionar estilos dentro dos comandos HTML (local -inline) Uma folha de estilos interna deve ser usada quando os estilos so usados uma nica vez. Nesse caso as definies fazem-se dentro de um elemento <style> que deve ser colocado dentro do elemento <head> da pgina HTML. Exemplo: <HTML> <HEAD> <TITLE> Exemplo de uma folha de estilo </TITLE> </HEAD> <BODY> <H1 STYLE=font-family:impact; background:yellow; color:red> Exerccio introdutrio sobre </H1> <P STYLE=color: green>Cascading Style Sheets</P> </BODY>
Ana Paula Cao -5 -

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

O browser l as definies contidas no elemento <style> e faz a formatao dos elementos da pgina aplicando essas definies. Nota: O comportamento normal dos browsers consiste em ignorar os elementos cujo significado desconhecem. Isto significa que um browser muito antigo que no suporta estilos CSS ignorar o elemento <style>, mas no ignorar o texto. Se for necessrio evitar que esse browser escreva o texto das definies devemos ocult-lo, colocando-o dentro de um comentrio do HTML.

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ao utilizar estilos, importante saber a ordem que os browsers utilizam na definio de estilos: 1. Estilos includos na linha do comando 2. Estilos definidos no incio da pgina 3. Estilos obtidos de um ficheiro externo (via link) 4. Estilos importados de um ficheiro externo 5. Estilos padres do browser Exemplo: <HTML> <STYLE TYPE=text/css> <! P {color: red} > </STYLE> <HEAD> <TITLE> Exemplo de uma folha de estilo </TITLE> </HEAD> <BODY> <P STYLE=color: green>Cascading Style Sheets</P> </BODY> Observe que a tag P tem estilos definidos no nicio da pgina e na linha de comando. Com qual cor o texto ir aparecer? Verde ou vermelho? Seguindo a ordem de prioridades, os estilos na linha de comando tm precedncia. Logo, a cor do texto ser verde.

Prioridades

Ana Paula Cao

-6 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

SINTAXE USADA NAS FOLHAS DE ESTILO


Selectores, propriedades e valores A sintaxe das definies CSS composta por duas partes: um selector e uma declarao. Exemplo: Selector Declaraes

p{

color : green; font-type : New York Verdana;

} A declarao fica entre chavetas ({...}) e pode conter vrias definies. Cada definio formada por um par propriedade: valor, em que o valor separado da propriedade pelo carcter: (dois pontos.) Exemplo: Selector {propriedade: valor} NOMENCLATURA DAS FOLHAS DE ESTILO Em seguida apresenta-se a nomenclatura usualmente associada s css. Selector Selector uma cadeia que identifica os elementos a que uma declarao se aplica. O selector estabelece a ligao entre o documento HTML e a folha de estilo. Exemplo: o selector body em body { background-color: #FFFFFF} Propriedade Propriedade um atributo da folha de estilo que pode ser afectado pela CSS, por exemplo, font ou width. A cada propriedade deve ser atribudo um valor. Exemplo: a propriedade font em p {font: arial; color: #0000ff} Valor Valor uma especificao concreta da propriedade. Indica como a propriedade deve ser formatada. Exemplo: o valor 10pt da propriedade font em p {font: 10pt verdana; color: #0000ff}
Ana Paula Cao -7 -

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Declarao Declarao cada instruo de atribuio de um valor a uma propriedade. Um selector pode ter vrias declaraes, separadas pelo smbolo de ponto e vrgula, utilizando a estrutura Selector {declarao 1; declarao2}. Exemplo: p {background: white; color: black} Estilo Estilo o conjunto das declaraes de um selector. Classe Classe um grupo de instncias, do mesmo elemento (exemplo 1) ou de elementos diferentes (exemplo 2), s quais se podem associar um mesmo estilo. Exemplo 1: p.nome1 {color: red} /* um selector de uma classe de elementos p cuja cor vermelha */ Exemplo 2: .nome3 {color: green} /* selector de uma classe, de qualquer tipo de elementos (.), cuja cor verde */ Agrupamento Agrupamento uma associao de vrios selectores que partilham o mesmo estilo, separados por uma vrgula (exemplo 1); ou de vrias declaraes que se aplicam a um mesmo selector, separadas por; (exemplo 2). Exemplo 1: h1, p.primeiro, .rodape {font-style: italic} Exemplo 2: h2 {font-style: italic; color: red} Propriedade abreviada Propriedade abreviada constituda por propriedades individuais e agregaas. Exemplo: a propriedade font da linha seguinte h1 {font: bold italic small-caps 160% serif} substitui h1 { font-weight: bold; font-style: italic; font-variant: small-caps; font-size: 160%; font-family: serif }
Ana Paula Cao -8 -

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Pseudo-elementos Pseudo-elementos so elementos fictcios que no existem em HTML e que se referem a uma subparte do elemento HTML. Como exemplos de pseudoelementos podem apontar-se o pseudo-elemento de primeira linha e o pseudo-elemento de primeira letra. Utiliza-se o separador `: entre o nome do elemento e do pseudo-elemento. Aos pseudo-elementos podem atribuirse estilos. Exemplos: p:first-line {text-transform: uppercase} h1:first-letter {font-size: 200%; color:green} Os pseudo-elementos podem ainda ser combinados com classes. Exemplo: p.inicial:first-line {text-transform: uppercase} O selector acima refere-se primeira linha dos elementos p pertencentes classe inicial. O estilo pode ser posteriormente invocado no cdigo, atravs da linha seguinte: <p class=inicial> A primeira linha deste pargrafo <br> fica em maisculas</p> Pseudo-classes Pseudo-classes classificam os elementos por caractersticas que no o seu nome, atributos ou contedo. Pode associar-se um estilo a cada pseudoclasse de um elemento. Por exemplo, as pseudo-classes de a so: a:link - ligao por visitar a:active - ligao activa a:visited - ligao visitada Podem associar-se os estilos seguintes a essas pseudo-classes: a:link {background: black; color: white} a:active {background: black; color: red} a:visited {background: transparent; color: black} IDENTIFICADORES
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

E CLASSES

O selector normalmente o nome de um elemento do HTML, mas tambm pode ser um selector de classe, um selector de ID (identificador) ou um selector contextual. Se o valor que queremos dar propriedade tiver mais do que uma palavra devemos coloc-lo entre aspas, conforme exemplo: <html> <head>
Ana Paula Cao -9 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

<style type="text/css"> p { font-family: "comic sans ms" } </style> </head> <body> Eu gosto do tipo de letra "Comic Sans MS". </body> </html> Dentro das chavetas podemos colocar vrias definies separadas pelo carcter ";" (ponto e vrgula). O exemplo seguinte define trs propriedades para o elemento <p>, que so o alinhamento, a cor do texto e o tipo de letra. <style type="text/css"> p{ text-align: center; color: green; font-family: arial } </style> Agrupar selectores Podemos agrupar os selectores que partilham as mesmas definies. Para isso escrevemo-los uns a seguir aos outros separados por vrgulas. No exemplo seguinte os elementos de <h1> at <h6> partilham todos a mesma definio: h1,h2,h3,h4,h5,h6 { color: green } Selectores de classe Um selector de classe permite identificar um conjunto de ocorrncias de um elemento e atribuir-lhes um estilo comum. A classe pode ser genrica ou aplicar-se exclusivamente a um tipo de elementos. Para criar uma classe genrica utiliza-se o "." seguido do nome da classe e adicionam-se as declaraes correspondentes. Exemplo: A classe posteriormente invocada atravs do atributo class:
.rodape {color: blue} /* selector de classe, inserido na folha de estilo */ <h1 class=rodape> Este elemento est associado classe rodap </h1> <h2 class=rodape> e este tambm </h2>

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Para criar uma classe associada a um tipo de elementos, p por exemplo, utiliza-se o nome do elemento, seguido de "." e do nome da classe.
Ana Paula Cao - 10 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Exemplo:

As classes so posteriormente invocadas atravs do atributo class:


<p class=nome1>este pargrafo vermelho</p> <p class=nome2>este pargrafo azul</p> <p class=nome2>este tambm azul</p>

p.nome1 {color: red} /* uma classe de selectores de p */ p.nome2 {color: blue} /* outra classe de selectores de p */

Os nomes das classes podem utilizar qualquer carcter de a-z, A-Z, 0-9, ponto, hfen e caracteres Unicode. No podem comear com um dgito. boa prtica atribuir nomes, s classes, de acordo com a sua funo. O atributo class permite especificar duas, ou mais, formataes diferentes para um mesmo tipo de elemento. Na folha de estilo, definem-se para esse tipo de elemento duas classes, que funcionam como subtipos, e a respectiva formatao. Sempre que o elemento ocorrer, basta indicar a classe a que o elemento pertence e ele adopta a formatao correspondente. Exemplo: 1. <html> 2. <head> 3. <style type="text/css"> 4. p.textonormal {color:blue} 5. p.textodestaques {color:red} 6. </style> 7. < /head> 8. <body> 9. <p class=" textonormal" > Primeira frase em texto normal </p> 10. <p class=" textodestaques" > Frase em destaque </p> 11. <p class="textonormal"> ltima frase normal </p> 12. </body> 13. </html> Na folha de estilo interna definem-se duas classes para o elemento p (linhas 4 e 5) denominadas .textonormal e . textodestaques. Posteriormente, quando existe uma ocorrncia do elemento <p> indica-se, atravs do parmetro class, a classe que se pretende aplicar (linhas 9, 10 e 11). Selector de id (identificador) Um selector de ID permite identificar uma nica ocorrncia de um elemento HTML e atribuir-lhe um estilo.

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

- 11 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Os selectores de ID so criados pelo carcter # seguido do nome do selector, que pode conter qualquer carcter de a-z, A-Z, 0-9, ponto, hfen e caracteres Unicode. No pode comear com um dgito. Exemplo: O ID anterior depois invocado atravs de:
#abc123 {color: red; background: black}

<p id=abc123>Este elemento, e s este, identificado como abc123</p>

Selector de contexto Um selector de contexto indica que um elemento obedece a um estilo caso esteja inserido no contexto definido, como se mostra no exemplo seguinte: Qualquer elemento da classe footnote que ocorra no contexto da marca p vermelho. Escrever comentrios numa folha de estilos Para iniciar um comentrio deve escrever a sequncia de caracteres "/*", depois o texto do comentrio, e no fim escrever "*/" para terminar o comentrio. Exemplo: p { text-align: center; /* Isto um comentrio */ color: black; font-family: arial }
p.footnote {color: red}

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

- 12 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

BACKGROUND As propriedades dos fundos dos elementos definem cores de fundo e imagens de fundo para os elementos do HTML. Estas propriedades permitem-nos controlar as cores e as imagens de fundo dos elementos (posio, repetio, etc).
PROPRIEDADES DA CLASSE

DEFINIES

DO FUNDO DE UM ELEMENTO

Definies para a cor de fundo A cor de fundo de um elemento define-se atravs da propriedade color, da classe background. Existem quatro formas possveis para definir cores que so: 1. indicando o nome, por exemplo "blue"; 2. indicando a forma rgb, por exemplo rgb(0, 255, 255) para a cor "Aqua"; 3. indicando a forma hexadecimal, por exemplo #000000 para a cor preta"; 4. indicando a forma rgb baseada em percentagens do valor mximo de cada cor. Esta forma menos recomendada do que as restantes mas pode ser til em algumas situaes. Exemplo: rgb(54%,0%,0%).

Forma
color_name rgb(encarnado,verde,azul) rgb(encarnado%, verde%, azul%) #rrggbb

Descrio
Um nome de cor (por exemplo red, ou blue) Um valor rgb para a cor (por exemplo rgb (255,0,0) a cor encarnada.) Um valor rgb dado como uma percentagem do valor mximo de cor (por exemplo rgb(100%,0%,0%) a cor encarnada.) Um nmero hexadecimal (por exemplo #ff0000 para a cor encarnada).

Cor

Forma Hexadecimal #000000 #FF0000 #00FF00

Forma RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192) rgb(255,255,255)
- 13 -

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

#0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFF


Ana Paula Cao

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

PROPRIEDADES Propriedade
background

DOS

FUNDOS (BACKGROUND): Valores

Descrio
Oferece-nos uma forma abreviada para escrever todas as propriedades do fundo numa nica declarao. A propriedade background-attachment indica se a imagem de fundo deve permanecer imvel na janela do browser ou se acompanha o contedo quando o movemos (scroll). Define a cor de fundo de um elemento. Define uma imagem de fundo para ser usada no elemento.

Esta propriedade aceita os valores que podemos dar a todas as restantes propriedades desta tabela (background-color, background-image, background-repeat background-attachment e background-position)

backgroundattachment

Scroll A imagem de fundo desliza juntamente com o resto da pgina. Fixed A imagem de fundo no desliza com o resto da pgina. Ela permanece imvel na janela do browser.

background-color

color-rgb color-hex color-name transparent- A cor de fundo transparente url O local onde se encontra o ficheiro com a imagem noneNenhuma imagem de fundo - Se escrever apenas uma palavra o browser dar segunda o valor por omisso "center". top left top center top right center left center center center right bottom left bottom center bottom right

background-image

backgroundposition

Define o local onde se comea a desenhar a imagem de fundo.

x-% y-% O primeiro valor a posio segundo a horizontal e o segundo valor a posio segundo a vertical. Ao canto superior esquerdo correspondem os valores 0% 0%. Ao canto inferior direito correspondem os valores 100% 100%. Se escrever apenas um valor o browser dar ao segundo o valor por omisso de 50%. x-pos y-pos O primeiro valor a posio segundo a horizontal e o segundo valor a posio segundo a vertical. Ao canto superior esquerdo correspondem os valores 0 0. As unidades de medida podem ser pixels ou outra unidade de medida definida em CSS. permitido misturar posies absolutas com posicionamentos percentuais. Se escrever apenas um valor o browser dar ao segundo o valor por omisso de 50%.

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

backgroundrepeat

Estabelece se a imagem de fundo deve repetir-se (formando um mosaico) ou no, e as direces da repetio.

repeatA imagem de fundo repete-se tanto na horizontal como na vertical (forma um mosaico). repeat-x A imagem de fundo repete-se apenas na horizontal. repeat-y A imagem de fundo repete-se apenas na vertical. no-repeat A imagem de fundo no se repete ( desenhada uma nica vez).

Ana Paula Cao

- 14 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

FORMATAO DE TEXTO As propriedades do texto definem o aspecto grfico a dar ao texto. Permite controlar cores, aumentar ou reduzir o espao entre os caracteres, alinhar o texto, escolher o tipo de letra, decor-lo, etc. Propriedade
color direction letter-spacing Define a direco escrita do texto de

Descrio
Define a cor do texto

Valores permitidos
cor o valor da cor pode ser o seu nome (red por exemplo ), o seu valor rgb (rgb(255,0,0) por exemplo), ou o seu cdigo hexadecimal (#FF0000 por exemplo). ltr A direco da esquerda para a direita ("left-to-right") rtl A direco da direita para a esquerda ("right-to-left") normal Define o espaamento normal entre as letras. comprimento Define um espaamento fixo entre as letras dado em px, pt, pc, etc. left esquerda right direita center ao centro justify justificado none define texto normal underline define texto sublinhado overline define texto com uma linha por cima line-through define texto com uma linha horizontal sobreposta a meia altura blink faz com que o texto fique a piscar comprimento define um deslocamento fixo para a primeira letra da primeira linha (pode ser dado em px, pt, pc, etc.) % Define o deslocamento para a direita da primeira letra da primeira linha como uma percentagem da largura do elemento que contm o texto. none define texto normal, com letras maisculas e minsculas. capitalize todas as palavras comeam com letra maiscula. uppercase todas as letras so escritas como maisculas lowercase todas as letras so escritas como minsculas normal O browser ignora os caracteres de espao pre O browser preserva todos os caracteres de espao. O comportamento igual ao que se obtm com o elemento <pre> do HTML nowrap O browser deixa de inserir mudanas de linha automticas. A escrita de texto s muda de linha quando encontrado um elemento <br>. normal Define o espaamento normal entre as palavras. comprimento Define um espaamento fixo entre as palavras (pode ser dado em px, pt, pc, etc.)

Aumenta ou diminui o espao entre os caracteres Alinha o texto dentro de um elemento

text-align

Adiciona pormenores decorativos ao texto text-decoration

text-indent

Desloca para a direita ou para a esquerda a primeira letra da primeira linha do texto Controla as letras de um elemento

text-transform

white-space

Define a forma como tratado o espao em branco dentro de um elemento

word-spacing

Aumenta ou diminui o espao entre as palavras

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

FONTES Propriedade Descrio


Aceita os valores que podem ser dados s restantes propriedades desta tabela mais aqueles que se encontram na coluna seguinte desta linha. Oferecenos uma forma abreviada para definir numa nica

Valores
icon Define as propriedades do tipo de letra a usar com cones. menu Define as propriedades do tipo de letra a usar em menus. message-box Define as propriedades do tipo de letra a usar nas caixas de dilogo. small caption status-bar Define as propriedades do tipo de letra a usar na barra de estado do browser.
- 15 -

font

Ana Paula Cao

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

declarao todas as propriedades relativas ao tipo de letra. A propriedade font-family consiste numa lista com os tipos de letra que o browser pode escolher para escrever os textos. A lista est ordenada de forma prioritria: a primeira escolha aparece primeiro, a seguir vem a segunda escolha e assim sucessivamente. O browser escolhe o primeiro tipo que seja capaz de usar. Os nomes dos tipos de letra podem ser nomes de famlia ou nomes genricos. Define o tamanho de um tipo de letra.

font-family

family-name O nome de famlia do tipo de letra, como "times", "courier", "arial", etc. generic-family O nome genrico de famlia, como "serif", "sans-serif", "cursive", "fantasy", "monospace".

font-size

Define o tamanho de letra para diversas dimenses, desde xxsmall (menor) at xx-large (maior). xx-small x-small small medium large x-large xx-large smaller Selecciona o tamanho de letra abaixo daquele que estava a ser usado. larger Selecciona o tamanho de letra acima daquele que estava a ser usado. comprimento Define um valor fixo para o tamanho de letra (dado em px, pt, pc, etc.). % Define o tamanho de letra como uma percentagem daquele que estava a ser usado.

font-size-adjust

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Se o tipo de letra (font) escolhido no estiver disponvel, o browser v-se obrigado a usar um outro tipo diferente. A propriedade fontsizeadjust especifica o "aspect value" do tipo de letra escolhido para que o browser possa substitu-lo por um outro tipo que esteja acessvel preservando a altura da letra "x" e mantendo a legibilidade do texto. A propriedade fontstretch provoca uma expanso ou uma contraco horizontais no tamanho da letra.

none No preciso preservar a altura da letra x quando for necessrio substituir o tipo de letra por outro diferente. nmero Define o "aspect value" para o tipo de letra(font). Frmula a usar:font-size a aplicar ao tipo de letra disponvel = (font-size do tipo de letra que primeira escolha) * font-sizeadjust / "aspect value" do tipo de letra disponvel).

normal Define o valor normal (no h contrao nem expanso). wider Aumenta a largura dos caracteres Define a escala para a contrao ou para a expanso dos caracteres. "ultra-condensed" o tamanho mais estreito de todos e "ultra-expanded" o tamanho mais largo de todos. ultra-condensed extra-condensed
- 16 -

font-stretch

Ana Paula Cao

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-style Define o estilo de letra a usar Escreve o texto usando um tipo de letra "small-caps" ou o tipo normal Define a espessura do trao com que so desenhadas a letras normal O texto escrito com o tipo de letra normal. italic O texto escrito com caracteres itlicos (inclinados). oblique O texto escrito com caracteres oblquos. normal O texto escrito com o tipo de letra normal. small-caps O texto escrito com o tipo de letra "smallcaps". normal Define caracteres normais. bold Define caracteres desenhados com trao espesso. bolder Define caracteres desenhados com trao mais espesso. lighter Define caracteres desenhados com trao fino. Define a espessura do trao com que so desenhados os caracteres desde 100 (mais fino) at 800 (mais grosso). O valor normal 400. 700 o mesmo que bold. 100 200 300 400 500 600 700 800 900

font-variant

font-weight

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

- 17 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

LIMITES O limite de um elemento designa-se por "border". Em redor do limite podemos desenhar linhas de contorno. O padro CSS permite-nos especificar o estilo, a cor e a espessura das linhas que delimitam um elemento do HTML. Propriedades das Margens: Propriedade
border

Descrio
Oferece uma forma abreviada para escrever numa nica declarao todos os parmetros relativos s linhas de fronteira. Aceita os valores que podem ser dados s propriedades listadas direita. Oferece-nos uma forma abreviada para escrever todas as propriedades da linha de fronteira do lado de baixo numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita. Define a cor da linha de fronteira de baixo. Define o estilo da linha de fronteira de baixo. Define a espessura fronteira de baixo. da linha de border-width border-style border-color

Valores

border-bottom

border-width border-style border-color

border-bottom-color border-bottom-style border-bottom-width border-color

border-color border-style border-width cor

Define as cores das quatro linhas de fronteira. Aceita de um a quatro valores. Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado esquerdo numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita. Define a cor da linha de fronteira do lado esquerdo. Define o estilo da linha de fronteira do lado esquerdo. Define a espessura da linha fronteira do lado esquerdo. de

border-left

border-width border-style border-color

border-left-color border-left-style border-left-width


Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

border-color border-style border-width

border-right

Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado direito numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita. Define a cor da linha de fronteira do lado direito. Define o estilo da linha de fronteira do lado direito. Define a espessura da linha de

border-width border-style border-color

border-right-color border-right-style border-right-width


Ana Paula Cao

border-color border-style border-width


- 18 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

fronteira do lado direito. None Faz com que no seja desenhada nenhuma linha de fronteira.

hidden o mesmo que "none" (a linha no desenhada ), excepto em situaes de resoluo de conflitos com definies dadas em elementos de tabelas. dotted Define uma linha desenhada com pontos. Alguns browsers acabam por desenhar uma linha continua (estilo solid).

dashed Define uma linha desenhada com traos. Alguns browsers acabam por desenhar uma linha contnua (estilo solid). solid Define uma linha de fronteira contnua. A propriedade border-style define o estilo das quatro linhas de fronteira. Aceita de um a quatro valores. double Define duas linhas de fronteira lado a lado. A largura das duas linhas juntas igual ao valor dado pelo parmetro borderwidth.

border-style

inset Define uma linha de fronteira com um efeito 3D (estilo inset). A qualidade do efeito depende do valor definido no parmetro bordercolor.

ridge Define uma outra linha de fronteira com um efeito 3D (estilo ridge). A qualidade do efeito depende do valor definido no parmetro border-color.

groove Define uma linha de fronteira com um efeito 3D (estilo groove). A qualidade do efeito depende do valor definido no parmetro bordercolor.

outset Define uma linha de fronteira com um efeito 3D (estilo outset). A qualidade do efeito depende do valor definido no parmetro bordercolor.

border-top

Oferece-nos uma forma abreviada para escrevermos todas as propriedades da linha de fronteira do lado de cima numa nica declarao. Aceita os valores que podem ser dados s propriedades listadas direita. Define a cor da linha de fronteira superior. Define o estilo da linha de fronteira superior Define a espessura fronteira superior. da linha de

border-width border-style border-color

border-top-color border-top-style border-top-width

border-color border-style border-width thin medium thick comprimento

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

border-width

Oferece-nos uma forma abreviada para definirmos as espessuras de todas as linhas de fronteira. Aceita de um a quatro valores.

Ana Paula Cao

- 19 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

MARGENS As margens de um elemento so constitudas por espao em branco que fica em seu redor e o separa dos elementos adjacentes. Se o valor de uma margem for positivo o elemento afasta-se dos outros que lhe so adjacentes mas se for negativo ele aproxima-se dos outros elementos. Isto significa que podemos usar as margens para afastar e aproximar os contedos de dois ou mais elementos e at sobrep-los. As quatro margens podem ser controladas todas ao mesmo tempo ou separadamente. Propriedades das Margens: Propriedade Descrio
Propriedade que nos oferece uma forma abreviada para definir numa nica declarao todas as propriedades relativas s quatro margens de um elemento. Define a margem inferior de um elemento. Define a margem esquerda de um elemento. Define a margem direita de um elemento. Define a margem superior de um elemento. margin-top margin-right margin-bottom margin-left auto comprimento % auto comprimento % auto comprimento % auto comprimento %

Valores

margin

margin-bottom

Auto o browser que escolhe o tamanho da margem.

margin-left

comprimento Define um comprimento fixo (dado em px, pt, pc, cm, etc.) comprimento % Define o comprimento da margem como uma percentagem da altura do documento (para bottom e top) ou como uma percentagem da largura do documento (para left e right.)

margin-right

margin-top

Espaamento nas tabelas: As propriedades padding controlam o espao em branco que separa os contedos de um elemento dos seus limites ("border"). proibido usar valores negativos para estas propriedades porque isso colocaria os contedos fora do elemento, o que no faria sentido. Os quatro lados podem ser controlados todos de uma vez ou separadamente.
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Propriedade

Descrio
Propriedade que nos oferece uma forma abreviada para definir numa nica declarao todos os aspectos dos espaamentos entre o contedo de um elemento e os seus limites. Define o espao que separa o contedo de um padding-top padding-right padding-bottom padding-left

Valores

padding

padding-bottom
Ana Paula Cao

comprimento %

comprimento

Define um comprimento
- 20 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

elemento inferior. padding-left

do

seu

limite

fixo (dado em px, pt, pc, cm, etc.)

Define o espao que separa o contedo de um elemento do seu limite esquerdo comprimento. Define o espao que separa o contedo de um elemento do seu limite direito. Define o espao que separa o contedo de um elemento do seu limite superior.

comprimento %

% Define um comprimento relativo ao espao em branco usando uma percentagem da largura total do elemento.

padding-right

comprimento %

padding-top

comprimento %

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Exemplo: <html> <head> <style type=text/css> td {padding:2cm} td.stl2 {padding: 22px 52px} </style> </head> <body> <table border=1"> <tr> <td> Nesta clula de tabela existe uma separao de 2cm entre o contedo e todos os limites. </td> </tr> </table> <table border=1"> <tr> <td class=stl2"> Nesta clula de tabela existe uma separao de 22px entre o contedo e os limites superior e inferior. Entre o contedo e os limites esquerdo e direito a separao de 52px. </td> </tr> </table> </body> </html>

Ana Paula Cao

- 21 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

As propriedades relativas s listas permitem-nos controlar diversos aspectos da apresentao de uma lista. Entre outros aspectos podemos escolher os smbolos para os marcadores, usar uma imagem como marcador, e escolher a posio dos marcadores. Propriedade
list-style

LISTAS

Descrio
Este propriedade oferecenos uma forma abreviada para definir numa nica declarao todas as propriedades relativas a uma lista. Define uma imagem como marcador de item numa lista. Define a posio em que o marcador deve ser colocado.

Valores permitidos
list-style-type list-style-position list-style-image

list-style-image

None url

No apresentar qualquer imagem como marcador. O URL da imagem a usar como marcador.

list-style-position

inside Os marcadores passam para o lado de dentro dos itens da lista (deslocam-se para a direita). Com esta opo, se o texto de um item da lista ocupar mais do que uma linha, as linhas depois da primeira comeam mesmo por baixo do marcador (so alinhadas pelo marcador.) outside Os marcadores ficam totalmente fora dos itens da lista. Os marcadores ficam sempre esquerda dos textos. none disc

Define o tipo de marcador a usar.

list-style-type

No usar marcadores Usar um disco como marcador (crculo cheio) circle Circunferncia (anel) square Quadrado decimal Usar nmeros como marcador lower-roman Usar nmeros romanos minsculos (i,
v, etc.) upper-roman IV, V, etc.) lower-alpha etc.) upper-alpha E, etc.)

ii, iii, iv,

Usar nmeros romanos maisculos

(I, II, III,

Usar letras do alfabeto minsculas (a, b, c, d, e, Usar letras


do alfabeto maisculas (A, B, C, D,

marker-offset

auto comprimento

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Exemplo: <style type="text/css"> ul {list-style-image: url("seta.gif")} </style>

Ana Paula Cao

- 22 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

DIMENSIONAMENTO DE ELEMENTOS DIMENSION


As propriedades relativas a dimenses so usadas para controlar a altura e a largura dos elementos e o espao entre linhas de texto. Propriedade
height

Descrio
Define a altura de um elemento.

Valores permitidos
% Define a altura do elemento como uma percentagem da altura do bloco que o contm. normal linhas Auto o browser que decide a altura a usar.

comprimento Define a altura em unidades px, cm, etc.

Define um valor razovel para a distncia entre as

line-height

Define a distncia entre as linhas

% Define a distncia entre as linhas como uma percentagem do tamanho de letra usado comprimento Define um valor fixo para a distncia entre as linhas

nmero Define um nmero que ser multiplicado pelo tamanho de letra em uso para estabelecer a distncia entre as linhas

max-height

Define a altura mxima de um elemento

% Define a altura mxima do elemento como uma percentagem da altura do bloco que o contm

auto No estabelece qualquer limite para a altura mxima do elemento

comprimento -Define a altura mxima do elemento

max-width

Define a largura mxima de um elemento

% Define a largura mxima permitida para o elemento como uma percentagem da largura do bloco que o contm comprimento Define a largura mxima permitida para o elemento comprimento Define a altura mnima do elemento % Define a altura mnima do elemento como uma percentagem da altura do bloco que o contm

auto -No estabelece qualquer limite para a largura mxima do elemento

min-height

Define a altura mnima de um elemento Define a largura mnima de um elemento

comprimento Define a largura mnima do elemento % Define a largura mnima do elemento como uma percentagem da largura do bloco que o contm auto o browser que decide a largura a usar

min-width

width

Define a largura de um elemento

% Define a largura do elemento como uma percentagem da largura do elemento que o contm comprimento Define uma largura fixa em unidades px, cm, etc.

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

- 23 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Dimensionamento de imagens Exemplo: <html> <head> <style type=text/css> img.normal{height: auto;width: auto} img.grande{height: 64px;width: 64px} img.pequeno{height: 16px;width: 16px} </style> </head> <body> <img class=normal height=32" width=32" src=urso1.gif /><br/><br/> <img class=grande height=32" width=32" src=urso1.gif /><br/><br/> <img class=pequeno height=32" width=32" src=urso1.gif /> </body> </html> Espaamento entre linhas Exemplo: <html> <head> <style type=text/css> p.aumentar {line-height: 32px} </style> </head> <body> <p> Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. </p>
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

<p class=aumentar> Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. Isto um pargrafo com texto. </p> </body> </html>
Ana Paula Cao - 24 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

ALINHAMENTO RELATIVO DE ELEMENTOS NA PGINA PROPRIEDADES DE CLASSIFICATION As propriedades de classificao permitem-nos controlar a forma como os elementos so apresentados: escolher o local onde uma imagem deve aparecer, posicionar os elementos de forma absoluta ou em relao uns aos outros e controlar a sua visibilidade. Propriedades de Classificao: Propriedade Descrio
Define os lados de um elemento junto aos quais no so permitidos elementos flutuantes

Valores permitidos
left No so permitidos elementos flutuantes esquerdo. right No so permitidos elementos flutuantes direito. both No so permitidos elementos flutuantes esquerdo nem no lado direito. none So permitidos elementos flutuantes tanto esquerdo como do direito. no lado no lado no lado do lado

clear

cursor

Especifica o tipo de cursor a apresentar

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

url O URL de um ficheiro que contm a definio do cursor a usar. Nota: Indique tambm um cursor genrico para ser apresentado no caso de o ficheiro que contm o cursor especial no poder ser usado. auto O browser escolhe o cursor. crosshair Um cursor em forma de cruz. default O cursor a usar por omisso (geralmente uma seta). pointer Um cursor para apontar para uma ligao de hipertexto (normalmente uma mo com o dedo indicador esticado). move O cursor que se v quando se move uma janela no cran. e-resize O cursor que se v enquanto se redimensiona uma janela no cran arrastando a aresta direita ("east", ou leste). ne- resize O cursor que se v equanto se redimensiona uma janela no cran arrastando o canto superior direito ("north/east", ou nordeste). nw- resize O cursor que se v equanto se redimensiona uma janela no cran arrastando o canto superior esquerdo ("north/west", ou noroeste). n- resize O cursor que se v equanto se redimensiona uma janela no cran arrastando a aresta de cima ("north", ou norte). se- resize O cursor que se v equanto se redimensiona uma janela no cran arrastando o canto inferior direito ("south/east", ou "sudeste"). sw- resize O cursor que se v equanto se redimensiona uma janela no cran arrastando o canto inferior esquerdo ("south/west", ou sudoeste). s- resize O cursor que se v equanto se redimensiona uma janela no cran arrastando a aresta de baixo ("south", ou sul). w-resize O cursor que se v equanto se redimensiona uma janela no cran arrastando a aresta esquerda ("west", ou oeste). text O cursor est sobre texto. wait O cursor que diz para esperar porque est uma tarefa em execuo (normalmente uma ampulheta ou um relgio). help Este cursor indica que h informao auxiliar disponvel (assume normalmente a forma de um ponto de interrogao).
- 25 -

Ana Paula Cao

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Propriedade

Descrio

Valores permitidos
none O elemento no ser apresentado. inline O elemento ser apresentado como se fosse um elemento "inline" sem mudanas de linha antes nem depois da sua ocorrncia. block O elemento ser apresentado como se fosse um elemento de bloco, com uma mudana de linha antes e outra depois. list-item O elemento ser apresentado como se fosse um item de uma lista. run-in O elemento ser apresentado como um elemento de bloco ou como um elemento "inline" dependendo do contexto em que aparece. compact O elemento ser apresentado como um elemento de bloco ou como um elemento "inline" dependendo do contexto em que aparece. Marker table O elemento ser apresentado como uma tabela (<table>), com mudanas de linha antes e depois. inline-table O elemento ser apresentado como uma tabela (<table>), mas sem mudanas de linha antes e depois. table-row-group O elemento ser apresentado como um grupo de linhas de uma tabela (<tbody>). table-header-group O elemento ser apresentado como um grupo de linhas do cabealho de uma tabela (<thead>). table-footer-group O elemento ser apresentado como um grupo de linhas do rodap de uma tabela (<tfoot>). table-row O elemento ser apresentado como uma linha de uma tabela (<tr>). table-column-group O elemento ser apresentado como uma coluna ou mais colunas de uma tabela (<colgroup>). table-column O elemento ser apresentado como uma coluna de clulas de uma tabela (<col>). table-cell O elemento ser apresentado como uma clula de uma tabela (<td>). table-caption O elemento ser apresentado como uma legenda de uma tabela (<caption>). left O elemento flutua para a esquerda do contedo do elemento que o contm. right O elemento flutua para a direita do contedo do elemento que o contm. none No h flutuao. O elemento apresentado no local em que aparece. static O elemento colocado na sua posio normal. Quando usamos este valor no devemos definir as propriedades left nem top. relative Desloca o elemento relativamente sua posio normal ("left: 20px" desloca-o 20 pixels para a direita). absolute Coloca o elemento numa posio absoluta sobre a pgina. "left: 20px" siginifica que ele comea 20 pixels direita do extremo esquerdo da pgina. Fixed. visible O elemento visvel. hidden O elemento invisvel. collapse Quando usado em elementos de tabela este valor remove uma linha ou uma coluna sem alterar o arranjo da tabela. O espao que seria ocupado pelos elementos removidos fica disponvel para outros contedos. quando usado em elementos que no tabelas d o mesmo resultado que "hidden".

display

Indica se e como um elemento deve ser apresentado

float

Define o lugar onde uma imagem ou elemento de bloco deve aparecer dentro de outro elemento

position
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Coloca um elemento numa posio que pode ser esttica, relativa, absoluta ou fixa

visibility

Indica se um elemento deve estar visvel ou invisvel

Ana Paula Cao

- 26 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Definio da forma do cursor Exemplo: alterar o smbolo mostrado pelo cursor <body> <p>Passe com o ponteiro do rato sobre as palavras mais abaixo e veja como ele muda de forma. </p> <span style=CURSOR: auto>Auto</span><p> <span style=CURSOR: crosshair>Crosshair</span><p> <span style=CURSOR: default>Default</span><p> <span style=CURSOR: pointer>Pointer</span><p> <span style=CURSOR: move>Move</span><p> <span style=CURSOR: e-resize>e-resize</span><p> <span style=CURSOR: ne-resize>ne-resize</span><p> <span style=CURSOR: nw-resize>nw-resize</span><p> <span style=CURSOR: n-resize>n-resize</span><p> <span style=CURSOR: se-resize>se-resize</span><p> <span style=CURSOR: sw-resize>sw-resize</span><p> <span style=CURSOR: s-resize>s-resize</span><p> <span style=CURSOR: w-resize>w-resize</span><p> <span style=CURSOR: text>text</span><p> <span style=CURSOR: wait>wait</span><p> <span style=CURSOR: help>help</span> </body>

POSICIONAMENTO E FORMA DE ELEMENTOS NA PGINA - POSITIONING


As propriedades que controlam o posicionamento dos elementos permitemnos controlar a rea ocupada e escolher a localizao com rigor. Propriedade
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Descrio
Define a distncia (para baixo ou para cima) a que deve ficar o limite de baixo de um elemento relativamente ao limite de baixo do elemento que o contm. Define a forma de um elemento. O elemento recortado na forma desejada e depois mostrado.

Valores permitidos
auto Deixa o browser escolher a posio do limite inferior. % Define a posio do limite inferior como uma percentagem da altura da pgina. comprimento Define a posio do limite de baixo com um valor fixo dado em px, pt, cm, etc.

bottom

clip

shape auto

Ana Paula Cao

- 27 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Propriedade

Descrio
Define a distncia (para a esquerda ou para a direita) a que deve ficar o limite esquerdo de um elemento relativamente ao limite esquerdo do elemento que o contm.

Valores permitidos
auto Deixa o browser escolher a posio do limite esquerdo. % Define a posio do limite esquerdo como uma percentagem da largura da pgina. comprimento Define a posio do limite esquerdo com um valor fixo dado em px, pt, cm, etc. visible Mostra todo o contedo. Uma parte ser apresentada j fora da rea do elemento a que pertence. hidden O contedo cortado. A parte que excede a rea disponvel no ser mostrada. scroll O contedo cortado, mas o browser acrescenta barras de deslocamento (scrollbars) para que o restante contedo tambm possa ser visto se necessrio. auto Caso ocorra um corte no contedo por ele exceder a rea disponvel o browser deve acrescentar barras de deslocamento (scrollbars) para que o excedente tambm possa ser visto se necessrio. auto Deixa o browser escolher a posio do limite direito. % Define a posio do limite direito como uma percentagem da largura da pgina. comprimento Define a posio do limite direito com um valor fixo dado em px, pt, cm, etc.

Left

overflow

Define o que acontece quando o contedo de um elemento excede a sua rea.

right

Define a distncia (para a esquerda ou para a direita) a que deve ficar o limite direito de um elemento relativamente ao limite direito do elemento que o contm. Define a distncia (para baixo ou para cima) a que deve ficar o limite de cima de um elemento relativamente ao limite de cima do elemento que o contm.

top

auto Deixa o browser escolher a posio do limite superior. % Define a posio do limite superior como uma percentagem da altura da pgina. comprimento Define a posio do limite de cima com um valor fixo dado em px, pt, cm, etc. baseline A linha de base (de baixo) do elemento alinhada com a linha de base do elemento que o contm. sub Alinha o elemento ligeiramente abaixo da posio normal (semelhante ao resultado que se obtm com o elemento <sub> do HTML.). super Alinha o elemento ligeiramente acima da posio normal (semelhante ao resultado que se obtm com o elemento <sup> do HTML.). top Alinha o topo do elemento o mais acima possvel na linha a que pertence. text-top Alinha o topo do elemento com o limite mais alto do texto na linha a que pertence. middle Alinha o elemento a meia altura do elemento que o contm. bottom Alinha o limite inferior do elemento o mais baixo possvel na linha a que pertence. text-bottom Alinha o limite de baixo do elemento (bottom) com o limite de baixo do texto na linha a que pertence. comprimento % Alinha o elemento como uma percentagem do valor da propriedade line-height. So permitidos valores negativos. auto O valor de z-index escolhido pelo browser. nmero Define o valor de z-index do elemento.

vertical-align

Define o alinhamento vertical de um elemento.

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

z-index

Define a ordem de apresentao (prioridade) dos elementos no caso de existir sobreposio entre eles.

Ana Paula Cao

- 28 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

UNIDADES DE MEDIDA O valor de um comprimento escreve-se como um nmero seguido de uma abreviao que indica as unidades de medida. No podemos colocar espaos entre o nmero e as unidades (no escreva 2 cm mas sim 2cm). Quando o comprimeto 0 (zero) no preciso indicar as unidades. A tabela seguinte descreve as unidades de medida que podemos usar em CSS. Unidades
% in cm mm em ex pt pc px polegadas (inch) centmetros milmetros 1 em igual ao tamanho do tipo de letra que est a ser usado 1 ex igual altura da letra "x" no tipo de letra que est a ser usado (cerca de metade do valor da propriedade font-size). pontos (1 pt o mesmo que 1/72 polegadas) picas (1 pc o mesmo que 12 pt) pixels (1 px um ponto no cran do computador)

Descrio
percentagem de um valor

PSEUDOCLASSES As pseudo-classes permitem-nos associar efeitos especiais a selectores CSS ou a partes de selectores. Sintaxe A sintaxe das pseudo-classes a seguinte: selector:pseudo-classe { propriedade: valor } Lista de pseudo-classes Pseudo-classe
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Finalidade
Define o estilo a aplicar a um link seleccionado Define o estilo a aplicar a um link quando o ponteiro do rato est sobre ele Define o estilo a aplicar a um link que ainda no foi visitado Define o estilo a aplicar a um link que j foi visitado Define o estilo as aplicar ao primeiro dos elementos que se encontram dentro de um outro elemento (primeiro descendente.) Permite definir atributos estilsticos diferentes para aplicar ao texto escrito numa determinada lngua.
- 29 -

active hover link visited first-child lang

Ana Paula Cao

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Exemplos: - Dar cores diferentes a uma ligao <html> <head> <style type=text/css> a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} </style> </head> <body> <p style=font-weight: bold> <a href=http://www.alcobias.net>Isto uma ligao</a></p> <p><b>Nota:</b> a:hover deve ser definido DEPOIS de a:link e de a:visited j estarem definidos para que tudo funcione bem. </p> <p><b>Nota:</b> a:active deve ser definido DEPOIS de a:hover j estar definido para que tudo funcione bem.</p> </body> </html> PSEUDOELEMENTOS Os pseudo-elementos so usados em CSS para adicionar efeitos a alguns selectores ou a partes de selectores. Sintaxe A sintaxe das pseudo-elementos a seguinte: selector:pseudo-elemento { propriedade: valor } Lista de pseudo-elementos
Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Pseudo-elementos
first-letter first-line before after

Finalidade
Define um estilo especial para a primeira letra de um texto. Define um estilo especial para a primeira linha de um texto. Insere algum contedo antes de um elemento Insere algum contedo depois de um elemento

Ana Paula Cao

- 30 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Exemplos: - Dar um estilo especial primeira letra de um texto <html> <head> <style type=text/css> div:first-letter{color: red;font-size:xx-large} </style> </head> <body> <p><b>Nota:</b> O Internet Explorer 5.0 no suporta o pseudo-elemento first-letter.</p> <div> O pseudo-elemento first-letter permite dar um estilo especial ao texto fazendo com que a primeira letra de um bloco tenha um estilo diferente. </div> </body> </html>

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

- 31 -

Curso Profissional Tcnico de Multimdia S. I. 10 ano Mdulo 2

Bibliografia

Livros: - Fonseca, Dalila. Pacheco, Deolinda. Marques, Fernandes e Soares, Ricardo. Curso Tecnolgico de Informtica - 11 Ano- Aplicaes Informticas A. Porto Editora.

Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Ana Paula Cao

- 32 -