Manual de Css

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-


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


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 -


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. DEFINIODE ESTILOS


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 () do cdigo HTML.Ana Paula Cao -3 -


Por exemplo: Exemplo de uma folha de estilo Exerccio introdutrio sobre Cascading Style Sheets 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 () 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 que a liga folha de estilos.Escola Sec. c/ 3CEB Dr. Joaquim de Carvalho

Para criar um link, deve-se substituir a tag pela tag , e colocar a declarao de estilo dentro da tag do documento. Neste mtodo, no necessrio usar as tags de comentrio. Exemplo: Ana Paula Cao -4 -


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: Exemplo de uma folha de estilo Exerccio introdutrio sobre Cascading Style Sheets 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 que deve ser colocado dentro do elemento da pgina HTML. Exemplo: Exemplo de uma folha de estilo Exerccio introdutrio sobre Cascading Style Sheets Ana Paula Cao -5 -



O browser l as definies contidas no elemento 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 , 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.


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: Exemplo de uma folha de estilo Cascading Style Sheets 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 -


SINTAXE USADA NAS FOLHAS DE ESTILOSelectores, 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 -



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 -



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: A primeira linha deste pargrafo
fica em maisculas 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} IDENTIFICADORESEscola 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: Ana Paula Cao -9 -


p { font-family: "comic sans ms" } Eu gosto do tipo de letra "Comic Sans MS". Dentro das chavetas podemos colocar vrias definies separadas pelo carcter ";" (ponto e vrgula). O exemplo seguinte define trs propriedades para o elemento , que so o alinhamento, a cor do texto e o tipo de letra. p{ text-align: center; color: green; font-family: arial } 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 at 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 */ Este elemento est associado classe rodap e este tambm


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 -


Exemplo:

As classes so posteriormente invocadas atravs do atributo class:este pargrafo vermelho este pargrafo azul este tambm azul

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. 2. 3. 4. p.textonormal {color:blue} 5. p.textodestaques {color:red} 6. 7. < /head> 8. 9. Primeira frase em texto normal 10. Frase em destaque 11. ltima frase normal 12. 13. 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 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.


Ana Paula Cao

- 11 -


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}

Este elemento, e s este, identificado como abc123

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}


Ana Paula Cao

- 12 -


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%).

Formacolor_name rgb(encarnado,verde,azul) rgb(encarnado%, verde%, azul%) #rrggbb

DescrioUm 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 -


#0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 #FFFFFFAna Paula Cao


PROPRIEDADES Propriedadebackground

DOS

FUNDOS (BACKGROUND): Valores

DescrioOferece-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%.


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 -


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. Propriedadecolor direction letter-spacing Define a direco escrita do texto de

DescrioDefine a cor do texto

Valores permitidoscor 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 do HTML nowrap O browser deixa de inserir mudanas de linha automticas. A escrita de texto s muda de linha quando encontrado um elemento
. 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


FONTES Propriedade DescrioAceita 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

Valoresicon 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


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


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


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


Ana Paula Cao

- 17 -


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: Propriedadeborder

DescrioOferece 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-left-color border-left-style border-left-widthEscola 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-right-color border-right-style border-right-widthAna Paula Cao

border-color border-style border-width- 18 -


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-top-color border-top-style border-top-width

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


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 -


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 DescrioPropriedade 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

DescrioPropriedade 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-bottomAna Paula Cao

comprimento %

comprimento

Define um comprimento- 20 -


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 %


Exemplo: td {padding:2cm} td.stl2 {padding: 22px 52px}

Documents

Manual de Css