Unidade IV

Unidade IV: Introduo folhas de estilo CSS
INTRODUO
Desde o incio do seu desenvolvimento que o HTML, foi pensado como nada mais do que uma forma simples de formatao de documentos cientficos, onde a estrutura e hierarquia prevalecem sobre a composio e o aspecto da apresentao.
Com o desenvolvimento da World Wide Web, os designers clamaram por uma forma de composio mais livre que a rigidez imposta pelas tabelas e, ao mesmo tempo, que o texto pudesse ser tratado com mais controlo e liberdade que a singular formatao de tipo de letras, cor e nfase. Deste clamor editou o consrcio W3C1 a especificao das folhas de estilo em cascata ou CSS (Cascading Style Sheets). A designao de cascata refere-se ao modo como as definies so feitas sobre os vrios elementos de formatao e composio das pginas, que adoptam uma estrutura em vrios nveis de profundidade, numa nica lista.
As folhas de estilo so uma das mais importantes implementaes que o HTML 4.0 trouxe. Incorporadas no HTML no final de 1996, as folhas de estilo so formas prticas e estruturadas de formatar documentos WWW.
Funcionamento
As folhas de estilo permitem controlar precisamente o tamanho, espaamento e posio numa pgina web de qualquer elemento de composio, seja uma imagem, um texto ou um ficheiro multimdia. O conceito inerente s folhas de estilo algo a que os designers j estavam habituados, pois era um conceito herdado das aplicaes de DTP2, utilizadas ubiquamente para a composio de edies impressas, como jornais, livros ou revistas.
Para alm do controlo preciso sobre os elementos de formatao de uma pgina, as folhas de estilo permitem ainda a definio num s ficheiro da formatao a aplicar a esses elementos, o que pressupe no s a imposio de uma linha grfica comum a toda pgina web, como a sua rpida modificao atravs da imposio de estilos grficos. As folhas de estilo oferecem excelente flexibilidade e controlo sobre a aparncia exacta da pgina.
1 2
World Wide Web Consortium Consrcio responsvel pela padronizao do HTML. DeskTop Publishing (Edio electrnica).
51
Tipos de Folhas de Estilo CSS As folhas de estilo provem de uma regra ou de um conjunto de regras. Uma folha de estilo associa-se a todo um documento HTML, podendo ser composta por algumas instrues colocadas no mesmo ficheiro que compe o documento ou estar localizada num ficheiro parte, tambm, podem ser definidas em um elemento especfico para funcionarem somente neste elemento. No entanto, existem trs maneiras de criar as folhas de estilos, a saber:
Folha de Estilos Externa Uma folha de estilos externa um ficheiro de texto separado do documento HTML e deve conter apenas cdigo CSS. Deve-se ter em conta que nenhum outro texto pode ser inserido, nem tags HTML. Contudo, o ficheiro deve ser guardado com a extenso .css.
As folha de estilos externas definem estilos que podero ser adoptados por todas as pginas HTML, sendo possvel realizar simultaneamente mudanas na aparncia de todas as pginas que forem vinculadas a esse ficheiro com a extenso .css. Bastando para tal colocar a seguinte instruo no cabealho entre as tags <head> e </head>.
<link rel="stylesheet" type="texto/css" href="ficheiro.css">
O valor do atributo rel="stylesheet" indica ao navegador que o link feito com uma folha de estilos, type="text/css" indica que um ficheiro de texto que contm cdigo CSS, enquanto que o valor do href="ficheiro.css" contm a localizao da folha, sob a forma de um ficheiro com a extenso .css. Pode-se importar uma folha de estilos colocando a linha de comando @import url("ficheiro.css"); entre as tags <style> e </style>. Conforme a sintaxe abaixo:
<style type="text/css">@import url("ficheiro.css");</style>
Folha de estilo Interna A folha de estilos interna, conhecidas tambm como folha de estilos incorporadas o cdigo CSS inserido no prprio documento HTML, entre as tags <style> e </style>, dentro da seco <head> e </head>. Todo cdigo inserido entre essas tags o mesmo que constitui o contedo do ficheiro externo. Eis a sintaxe geral de uma folha de estilos interna:
52
<style type="texto/css"><!- - /* cdigo CSS */ - -></style>
Aconselha-se que se coloque o cdigo CSS entre a tag de comentrio , isto significa que um navegador (navegador antigo) que no suporte estilos ir ignorar o elemento <style>. A folha de estilos interna ir somente formatar a pgina em foi colocada.
Folha de estilo Inline Os estilos inline so aqueles que so aplicados a uma nica instncia de um elemento, geralmente so definidos dentro do prprio elemento, isto , os estilos so definidos em um elemento especfico para funcionarem somente nele. Eis a sintaxe: <elemento style="cdigo CSS;">
Ressalta-se que o style utilizado nos estilos inline diferente do utilizado na folha de estilos interna.
Sobre os estilos em cascata O termo em cascata se refere maneira como um navegador exibe os estilos de elementos especficos em uma pgina HTML. Portanto, o efeito em cascata permite que se faa mltiplas definies de estilo incidentes sobre o mesmo elemento, prevalecendo a definio mais especfica, ou seja, uma definio feita no prprio documento HTML prevalece sobre a feita no ficheiro externo, uma feita para um elemento especfico prevalece sobre a do documento. De salientar, que esta uma caracterstica de enorme utilidade, porque fazem-se as definies gerais e, conforme as necessidades, estabelecem-se diferenciaes. Pode-se notar na sequncia abaixo:
1. Padro do navegador 2. Folha de estilo Externa 3. Folha de estilo Interna (dentro da tag </head>) 4. Estilo em linha (Inline) (dentro do elemento HTML)
Folha de estilos default aplicao do utilizador. Folhas de estilos do autor.
da
Dentro de cada folha de estilos, a ltima definio tem prioridade. Assim, um estilo em linha (Inline) tem a mais alta prioridade, o que significa que ir anular cada estilo declarado dentro da
53
tag <head>, numa folha de estilo externa, e num navegador (um valor padro). sobre o efeito em cascata que o autor do documento concentra seu raciocnio para encadear as folhas de estilos adequadamente.
Sintaxe CSS O cdigo de uma folha de estilos constitudo de comandos denominados regras CSS. Uma regra CSS constituda de trs partes: um selector que antecede as chavetas e de uma declarao que fica dentro das chavetas, uma propriedade e um valor. Eis a sintaxe bsica:
O selector representa uma estrutura. O selector normalmente o elemento/tag HTML para o qual se queira definir o estilo (selector de tipo de elemento), uma classe (selector de classe) ou um identificador (selector de id). A propriedade define qual propriedade do elemento ser estilizado, e cada propriedade pode ter um valor (a propriedade e o valor so separados por dois pontos), sendo este valor a quantificao ou qualificao da propriedade.
Havendo mais de uma declarao (determina os parmetros da estilizao) definida na regra CSS, utiliza-se ponto-e-vrgula para separ-las. O ponto-e-vrgula facultativo na ltima declarao, quando h mais de uma, e facultativo tambm no caso de declarao nica.
Comentrios CSS Os comentrios podem ser inseridos para explicar o cdigo CSS de forma a auxiliar numa futura manuteno. A tag inicia pelo smbolo /* e termina com o smbolo */, e so ignorados pela aplicao do utilizador (navegador, por exemplo). Um comentrio pode ser inserido em qualquer parte do cdigo, ocupando uma linha ou mais. Pode tambm ser inserido em qualquer linha que componha uma regra CSS, para explicar a linha em causa. Conforme, a sintaxe abaixo: /* isto um comentrio */
54
Agrupamento de selectores Para fazer a mesma definio para vrios elementos, agrupam-se os selectores. Porm, neste caso utiliza-se a vrgula para separar cada um dos selectores. Eis a sintaxe: selector1,selector2,selector3,{propriedade:valor;}
Selector de classe Com o selector de classe pode-se definir vrios estilos diferentes para um mesmo tipo de elemento. O selector de classe formado pelo nome do elemento (tag), um ponto e o nome da classe. Deve-se atribuir um nome descritivo classe. Para que os estilos sejam aplicados, utiliza-se o atributo class na tag HTML: tag.nome_da_classe {propriedade:valor;} <tag class="nome_da_classe"> </tag>
Podendo se ter assim, o mesmo elemento HTML com formataes diferentes porque o mesmo lhe foi atribuda diferentes classes. Pode-se omitir o nome do elemento HTML no selector de classe.
.nome_da_classe {propriedade:valor;}
Nesta caso a classe ir ser aplicada a qualquer elemento HTML, desde que o estilo definido funcione.
Selector id O selector id diferente do selector classe, isto , o selector id deve ser um nome exclusivo e s pode ser aplicado a um e somente um elemento HTML dentro do documento. A sua sintaxe formada pelo nome do elemento (tag), um sinal # (cardinal) e um nome. Deve-se atribuir um nome descritivo ao id. tag#nome_id {propriedade:valor;} <tag id="nome_id"> </tag>
55
Da mesma forma que ocorre com um selector classe, pode-se omitir tambm o nome do elemento (tag) num selector de id. #nome_id {propriedade:valor;}
Como se pode reparar os selectores de id comeam com um sinal de # ao invs de um ponto (.).
Herana Quando se aninha um elemento dentro de outro, o elemento aninhado herdar as propriedades atribudas ao elemento container3. A menos que se modifique os valores dos elementos internos independentemente (por exemplo, a fonte declarada na tag body ser herdada por todos os elementos do documento).
A propriedade background A propriedade background define o fundo dos elementos HTML, no s, mas tambm, permite que se configure uma imagem como fundo de uma pgina, e posicione uma imagem em uma pgina.
As principais propriedades de estilizao de um plano de fundo so: background-attachment, background-color, background-image, background-repeat, background-position e background. background-attachment especifica se uma imagem de plano de fundo fixa ou rola com o resto da pgina. Os valores so: scroll e fixed. selector {background-attachment:scroll / fixed;} background-color define a cor do plano de fundo de um element. Os valores podem ser especificados em: hexadecimal, RGB, nome da cor e transparente. selector {background-color:#FFFFFF; background-color:rgb(0,0,0); background-color:red; background-color:transparent;}
3
Seria basicamente, um element/tag em HTML que contm outros elementos (a tag <body></body> contm outros elementos de formatao, por exemplo).
56
background-image define uma imagem como plano de fundo. Os valores so: url4, none. selector {background-image:url("imagem.extenso"); background-image:none;} background-repeat indica se uma imagem de plano de fundo sera repetida ou no. Os valores que se devem especificar so: repeat, repeat-x, repeat-y, no-repeat. selector {background-repeat:repeat; background-repeat:repeat-x; background-repeat:repeat-y; background-repeat:no-repeat;} /* repete na vertical e horizontal */ /* repete na horizontal */ /* repete na vertical */ /* no repete */
background-position configura a posio de uma imagem de plano de fundo. Os valores so: x-pos y-pos, x-% y-%, left top, left center, left bottom, right top, right center, right bottom, center top, center center e center bottom. selector {background-position:10px 20px; background-position:25% 25%; background-position:left top;} /* x-pos y-pos */ /* x-% y-% */ /* left top */
background propriedade para configurar todas as propriedades do plano de fundo emu ma declarao, ou seja, a forma abreviada de se escrever uma regra CSS para as propriedades do fundo. selector {background: color image repeat attachment position;} selector {background: #FFFFFF url("imagem.extenso") no-repeat fixed center center;}
A propriedade texto As propriedades para textos, definem as caractersticas (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML. Visto que formatar e estilizar textos um item chave para qualquer web designer.
As propriedades de estilizao so: text-indent, text-align, text-decoration, letter-spacing, texttransform, word-spacing, white-space, text-shadow, color, direction e line-height.
Uniform Resource Locator (Localizador Padro de Recursos) o endereo de um recurso (como um ficheiro, uma impressora, etc.).
57
text-indent permite aplicar um recuo primeira linha de um pargrafo. Os valores possveis so: lenght (uma medida reconhecida pela CSS (px, pt, em, cm, )) e % (percentagem). selector {text-indent:3em; text-indent:20%;} text-align define o alinhamento do texto, e corresponde ao atributo align do HTML. Os textos podem ser alinhados esquerda (left), direita (right), centralizado (center) e justificado (justify). selector {text-align:center; text-align:justify;} text-decoration adiciona decorao ao texto. Os valores so: none (nenhuma decorao), underline (coloca sublinhado no texto), overline (coloca um sobrelinhado no texto), line-through (coloca uma linha em cima do texto) e blink (faz o texto piscar). selector {text-decoration:underline;} letter-spacing define um espaamento entre as letras. Os valores possveis so: normal ( o espaamento default) e lenght (unidade de medidas em CSS (px, pt, em, cm, )) e so vlidos valores negativos. selector {letter-spacing:20pt;} text-transform controla a forma das letras ou seja transforma o texto. Os seus valores so: capitalize (todas as primeiras letras do texto em maisculas), none (texto normal), uppercase (todas as letras do texto em maisculas) e lowercase (todas as letras do texto em minsculas). selector {text-transform:uppercase;} word-spacing define o espaamento entre as palvras. Tem como valores: normal ( o espaamento default) e lenght (uma medida reconhecida pela CSS (px, pt, em, cm, ). selector {word-spacing:20px;} white-space define o tratamento a ser dado ao espao em branco existente dentro de um elemento. Os seus valores so: normal (os espaos em branco sero ignorados pelo navegador), pre (os espaos em branco sero preservados pelo navegador) e nowrap (o texto ser apresentado somente numa linha nica na tela. No h quebra de linha at ser encontrada uma tag <br>).
58
selector {white-spacing:nowrap;} text-shadow define uma sombra a um texto. A sua declarao a seguinte: selector {text-shadow: h-shadow v-shadow blur color;}
Conforme, a sintaxe acima o primeiro valor (h-shadow) a distncia horizontal da sombra em relao ao elemento, o segundo valor (v-shadow) indica a distncia vertical da sombra em relao ao elemento, o terceiro elemento (blur) o raio da sombra, e o ltimo (color) define a cor da sombra. color define a cor do texto. Os valores so expressos em hexadecimal (#FFFFFF), rgb (rgb(255,255,255)) e pelo nome da cor (yellow). selector {color:#FFFFFF;} direction define a direco do texto. Os valores so: ltr (texto escrito da esquerda para a direita) e rtl (texto escrito da direita para a esquerda). selector {direction:rtl;} line-height controla o espao que existe antes e depois de uma linha de texto. Os valores so: lenght (medidas reconhecidas pela CSS (px, pt, em, cm, ), %. Caso se utilize um valor percentual menor que 100%, um valor absoluto menor que 1 ou uma unidade menor que o tamanho da fonte, haver sobreposio de linhas. selector {line-height:100px;}
A propriedade fonte As propriedades de fonte permitem mudar a famlia da fonte, a espessura, o tamanho, e o estilo de um texto. Os valores que se podem utilizar so: font-family, font-style, font-variant, fontweight, font-size, font-size-adjust, font-stretch e color. font-family define o tipo de fonte e sua prioridade para apresentao de um elemento em uma pgina. Se a primeira fonte da lista no estiver instalada no dispositivo do utilizador, dever ser usada a segunda e assim por diante at ser encontrada uma fonte instalada. Os valores possveis so: family-name (nome para famlias de fontes) define-se pelo nome da fonte, por
59
exemplo, verdana, arial, helvtica, etc; generic-family (nome para famlias genricas) define-se pelo nome genrico, por exemplo, serif, sans-serif, cursive, monospace, fantasy, etc. font-style define o estilo da fonte. Os valores so: normal (fonte normal), italic (fonte inclinada), oblique (fonte obliqua). font-variant define se deve ser utilizado um tipo de fonte small-caps (caixa-baixa, ou seja, transforma em maisculas de menor altura) ou normal (fonte normal). font-weight especifica o peso de uma fonte. Os valores so: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. font-size define o tamanho da fonte. Os valores so: xx-small, x-small, small, mdium, large, x-large, xx-large, smaller, larger, unidades de medida em CSS, %. font-size-adjust define que o tamanho da fonte deve ser ajustado, caso o navegador tenha de utilizar outro tipo de fonte que no o escolhido em font-family. Os valores possveis so: none, nmero. font-stretch condensa ou expande a famlia de fontes actual. Os valores so: normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. color define a cor da fonte. Os valores vlidos so: cdigo hexadecimal (#FFFFFF), cdigo rgb (rgb(0,0,0)) e o nome da cor (blue, yellow, ).
A propriedade borda As propriedades para as bordas, definem as caractersticas das quatro bordas de um elemento HTML. As propriedades so: border-width, border-style e border-color. border-width define a espessura das quatro bordas. Aceita quatro valores que so: thin (borda fina), mdium (borda mdia), thick (borda grossa) e length (medida reconhecida pela CSS (px, pt, em, cm, ).
60
border-style define o estilo das quatro bordas. Os valores so: none (nenhuma borda), hidden (equivalente a none), dotted (borda pontilhada), dashed (borda tracejada), solid (borda contnua), double (borda dupla), groove (borda entalhada), ridge (borda em ressalto), inset (borda em baixo relevo) e outset (borda em alto relevo). border-color define a cor das quatro bordas. Os valores so: cdigo hexadecimal (#FFFFFF), cdigo rgb (rgb(0,0,0)) e nome da cor (yellow, blue, red, ).
Caso se queira formatar uma das bordas (top, bottom, left, right) deve se basear na seguinte sintaxe: border-(top | bottom | right | left)-(width | color | style)
A propriedade margem A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As suas propriedades so: margin-top (define a margem superior), margin-right (define a margem direita), margin-bottom (define a margem inferior) e margin-left (define a margem esquerda). E os seus valores so: auto (valor default da margem), length (medida reconhecida pela CSS (px, pt, em, cm, ) e %.
selector {margin-left:20px; margin-top:30%; margin-bottom:2em; margin-right:4cm;}
A propriedade padding A propriedade para espaamentos define um valor para os espaamentos entre o contedo e as bordas dos elementos HTML. Suas propriedades so: padding-top (define o espaamento superior), padding-right (define o espaamento direito), padding-left (define o espaamento a esquerda) e padding-bottom (define o espaamento inferior). Os valores possveis so: auto (valor default da margem), length (medida reconhecida pela CSS (px, pt, em, cm, ) e %. selector {padding-top:20px;}
61
Estilizao de Links A folha de estilos CSS possibilita definir uma variedade infinita de layouts e efeitos para um link ou um conjunto de links. Por exemplo, um link visitado (visited), no visitado (link), activo (active) ou no estado hover (quando o cursor do mouse passa sobre o link) pode assumir Aspectos (cores, fundos, etc) diferentes.
Os efeitos em links so possveis atravs de declaraes de regras de estilo para as pseudoclasses do elemento <a> do HTML. As pseudo-classes so utilizadas em CSS, para adicionar efeitos diferentes a alguns selectores, ou a uma instncia de alguns selectores. A sintaxe das pseudo-classes a seguinte: selector:pseudo-classe { propriedade:valor;}
As classes em CSS podem tambm ser utilizadas com pseudo-classes para permitir que se defina diferentes efeitos para links localizados em diferentes posies em uma mesma pgina. Para tal basta seguir a sintaxe abaixo: selector.classe:pseudo-classe {propriedade:valor;}
Para os links tem-se quatro pseudo-classes que so: a:link (define o estilo do link no estado inicial), a:visited (define o estilo do link visitado), a:hover (define o estilo do link quando passase o mouse sobre ele e a:active (define o estilo do link activo, ou seja, o que foi clicado).
importante e lembrando pelo efeito cascata, seguir a ordem de definio das regras para os estados dos links, isto porque quando duas ou mais regras so conflituantes aquela ocupando uma posio
Em consequncia a ordem das declaraes deve ser: a:link; a:visited; a:hover e a:active. a:link {propriedade:valor;} a:visited {propriedade:valor;} a:hover {propriedade:valor;} a:active {propriedade:valor;}
62
A propriedade de lista As propriedades de lista permitem trocar diferentes marcadores (bullets) de um item de lista, especificar uma imagem como marcador de um item de lista, e especificar onde colocar um marcador de item de lista. As propriedades da lista so: list-style, list-style-image, list-styleposition, list-style-type, marker-offset. list-style uma propriedade estenogrfica para especificar todas as propriedades para uma lista em uma declarao. Os seus valores so: list-style-type, list-style-position e list-styleimage. list-style-image especifica uma imagem como marcador de item de lista. Os seus valores so: none, url (url("imagem.extenso");). list-style-position posiciona o marcador de item de lista na prpria lista. Os seus valores so: inside (marcador alinhado com o texto), outside (marcador fora do alinhamento do texto). list-style-type define o tipo de marcador da lista. Os seus valores so: none (sem nenhum marcador), disc (crculo preenchido), circle (circunferncia vazia), square (quadrado preenchido), decimal (nmeros 1, 2, 3, 4, ), decimal-leading-zero, lower-roman (romano minsculo (i, ii, iii, iv, v, )), upper-roman (romano maisculo (I, II, III, IV, V, )), lower-alpha (letra minscula (a, b, c, d, e, )), upper-alpha (letra maiscula (A, B, C, D, E, )), lower-greek, lower-latin, upper-lation, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha. De salientar que de lower-greek at katakana-iroha estes marcadores so de utilizao especfica e sem suporte total pelos navegadores actuais.
A propriedade de dimenso As propriedades de dimenso permite controlar a altura e a largura de um elemento, tambm permite aumentar o espao entre duas linhas. As suas propriedades so: height, line-height, max-height, max-width, min-height, min-width e width. height especifica a altura de um elemento. Os seus valores so: auto, length e %.
63
line-height especifica a distncia entre as linhas. Seus valores possveis so: normal, nmero, length e %. max-height especifica a altura mxima de um elemento. Os valores so: none, length e %. max-width especifica a largura mxima de um elemento. Tambm conta com os seguintes valores: none, length e %. min-height especifica a altura mnima de um elemento. Seus valores so: length e %. min-width especifica a largura mnima de um elemento. Os valores so: length e %. width especifica a largura de um elemento. Os seus valores so: auto, length e %.
A propriedade de classificao As propriedades de classificao permitem controlar como exibir um elemento, especificar onde uma imagem aparecer em outro elemento, posicionar um elemento em relao sua posio normal, posicionar um elemento utilizando um valor absoluto, e como controlar a visibilidade de um elemento. As propriedades de classificao so: clear, cursor, display, float, position, visibility. clear especifica os lados de um elemento onde outros elementos flutuantes no so permitidos. Os valores so: left, right, both e none. cursor especifica o tipo de cursor a ser exibido. Os valores so: url, auto (aspecto idntico ao cursor padro na tag que tem o atributo, ou seja, no muda nada), crosshair (cursor em forma de cruz), default (cursor padro do navegador), pointer (cursor em forma de mo com o dedo recto), move (cursor de deslocamento), e-resize (cursor de redimensionamento da esquerda para a direita), ne-resize (cursor de redimensionamento de baixo esquerda para cima direita), nw-resize (cursor de redimensionamento de baixo direita para cima esquerda), nresize (cursor de redimensionamento de baixo para cima), se-resize (cursor de
redimensionamento de cima esquerda para baixo direita), sw-resize (cursor de redimensionamento de cima direita para baixo esquerda), s-resize (cursor de
64
redimensionamento de cima para baixo), w-resize (cursor de redimensionamento da direita para a esquerda), text (cursor de edio de texto), wait (cursor de espera), help (cursor de ajuda) e progresso (cursor de progresso). Para os cursores de redimensionamento, muito prtico se lembrar das propriedades ao mesmo tempo visto que n, s, e, w correspondem a norte, sul, leste, oeste, ou seja, para cima, para baixo, para direita e para esquerda, seguido, obviamente de -resize. display especifica como um elemento ser exibido, ou seja, a propriedade display permite que se defina a maneira como um determinado elemento HTML deve ser renderizado. Os seus valores possveis so: none, inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, tablecolumn, table-cell, table-caption. Os tipos de exibio mais bsicos so inline, block e none. O valor inline significa na linha e faz somente o que diz, os elementos do tipo inline seguem o fluxo de uma linha. O valor block coloca uma quebra de linha antes e depois do elemento. O valor none, no mostra o elemento. float especifica onde uma imagem ou texto ir aparecer em outro elemento, ou seja, serve para indicar onde o elemento vai flutuar na pgina. Os valores para float podem ser: none ( o valor definido para o elemento no flutuar), left (este valor faz o elemento flutuar a esquerda, deixando qualquer outro elemento a direita desse elemento) e right (valor que faz o elemento flutuar a direita, deixando qualquer outro elemento a esquerda desse elemento. position posiciona um elemento numa posio exacta na pgina. Os seus valores so: absolute (permite posicionar elementos de maneira absoluta, isto , de maneira definida pelos valores dos atributos top, left, bottom e right, que indicam a distncia em relao a um ponto), fixed (fixa a posio do elemento na coordenada que foi definida, ou seja, embora se desloque o documento com as barras de rolagem do navegador, sempre aparecer na mesma posio), relative (indica que a camada faz parte do fluxo normal de elementos da pgina, razo pela qual sua posio depender do lugar onde esteja no cdigo e do fluxo HTML) e static (valor predeterminado do atributo e o posicionamento normal dos elementos na pgina, isto significa que os elementos se colocaro segundo o fluxo normal do HTML. Os elementos posicionados estaticamente no so afectados por cima, em baixo, esquerda e a direita). A propriedade position no indicada para diagramar a estrutura de layouts.
65
Para posicionar os elementos deve-se inserir uma coordenada. As coordenadas so controladas pelas propriedades top, left, right e bottom. Ao se declarar os valores da propriedade position (relative, fixed, static e absolute) estes somente iro trabalhar com essas coordenadas. Obviamente, quando se define um left para o elemento, no faz sentido definir um right, o mesmo acontece quando se define top e o bottom. visibility especifica se um elemento deve ser visvel ou invisvel. Os valores possveis so: visible (faz com que o elemento se veja e default), hidden (faz com que o elemento seja invisvel) e colapse.
A propriedade de posicionamento As propriedades de posicionamento permitem especificar a posio esquerda, direita, superior e inferior de um elemento. Tambm permitem especificar a forma de um elemento, posicionar um elemento atrs de outro, e especificar o que dever acontecer quando o contedo de um elemento demasiado grande para caber numa rea especfica. As propriedades de posicionamento so: bottom, clip, left, overflow, position, right, top, vertical-align e z-index. bottom especifica a extremidade inferior de um elemento. Seus valores so: auto, length e %. clip especifica a forma de um elemento. O elemento cortado naquela forma, e exibido. Os possveis so: shape, auto. left especifica a extremidade esquerda de um elemento. Os seus respectivos valores so: auto, length e %. overflow especifica o que acontece se o contedo de um elemento sobrecarrega sua rea. Os valores so: visible, hidden, scroll e auto. position posiciona um elemento numa posio esttica, relativa, absoluta ou fixa. right especifica a extremidade direita de um elemento. Os seus valores so: auto, length e %.
66
top especifica quo longe a extremidade superior de um elemento est acima, abaixo da extremidade superior do elemento pai (parent). Seus valores possveis so: auto, length e %. vertical-align especifica o alinhamento vertical de um elemento. Os valores so: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length e %. z-index especifica a ordem de empilhamento (stack order) de um elemento, ou seja, o CSS utiliza o espao tridimensional (altura, largura e profundidade). Portanto, o z-index coloca os elementos em layers (camadas), isto , as camadas significam como os elementos se sobrepem uns aos outros. Para tal deve-se definir para cada elemento um nmero ndice zindex. O comportamento que os elementos com nmero ndice maior se sobrepem queles com menor nmero.
Pseudo-elementos Os pseudo-elementos so utilizados em CSS, para adicionar efeitos a um selector, ou a parte de um selector. Eis a sintaxe: selector:pseudo-elemento {propriedade:valor;}
As classes em CSS podem tambm ser utilizadas com pseudo-elementos. Esta regra permite que se defina diferentes efeitos para pseudo-elementos localizados em diferentes lugares em uma mesma pgina. Conforme a sintaxe abaixo: selector.classe:pseudo-elemento {propriedade:valor;} Os pseudo-elementos so: first-letter e first-line. first-letter utilizado para obter um efeito especial na primeira letra de um texto. O pseudoelemento first-letter somente pode ser utilizado com elementos de bloco.
As propriedades aplicveis ao pseudo-elemento first-letter so: font (propriedades de letras), color (propriedades de cores), background (propriedade de fundo), margin (propriedade de margens), padding (propriedade de espaamentos), border (propriedade de bordas), textdecoration (decorao do texto), vertical-align (somente para float:none), text-transform (transformao de texto), line-height, float e clear.
67
first-line utilizado para obter um efeito especial na primeira linha de um texto. O pseudoelemento first-line somente pode ser utilizado com elementos de bloco. As propriedades aplicveis ao pseudo-elemento first-line so: font (propriedade de letras), color (propriedade de cores), background (propriedade de fundo), word-spacing (espaamento entre palavras), letterspacing (espaamento entre letras), texto-decoration (decorao de texto), vertical-align, texttransform, line-height e clear.
Unidades de medida em CSS As unidades de medida de comprimento CSS referem-se a medidas na horizontal ou na vertical (e em sentido mais amplo, em qualquer direco). As unidades de medida de comprimento CSS vlidas so: unidade relativa e unidade absoluta. A unidade relativa aquela tomada em relao a uma outra medida. As folha de estilos que utilizam unidades de comprimento relativas so mais apropriadas para ajustes de uso em diferentes tipos de media (um exemplo concreto, de um monitor para uma impressora laser). O valor tomado em relao: em (ao tamanho da fonte (font-size) herdada); ex (a altura da letra x da fonte herdada); px (ao dispositivo de exibio) e % (a uma medida previamente definida).
A unidade absoluta aquela que no esta referenciada a qualquer outra unidade e nem herdada. So indicadas para serem utilizadas quando as medias de exibio so perfeitamente conhecidas. Os valores so: pt point: 1/72 polegadas; pc pica: 12pt ou 1/6 polegadas; mm milmetro: 1/10cm; cm centmetro: 1/100m; in polegada: 2,54cm.
Resumindo, uma das coisas mais importantes no desenvolvimento Web so as medidas, pois elas tm um grande efeito sobre a acessibilidade de uma pgina web. Em CSS, o valor de uma
68
propriedade (por exemplo, font-size) pode-se expressar em unidades de comprimento, ou em unidades de percentagem. Unidades de comprimento Unidades absolutas in (polegada) cm (centmetros) mm (milmetros) pt (pontos) pc (picas) Unidades relativas em ex px (pixels) Percentagem %
De todas as unidades, as recomendadas so as relativas, visto que as unidades absolutas como cm, pt permitem um controlo exacto da aparncia da pgina, sempre e quando que seja visualizada com fim que ela foi projectada (onde se acaba a acessibilidade da pgina). Por exemplo, a unidade relativa (px) tem um valor diferente dependendo da resoluo da tela e do tipo de computador. Tabela de equivalncias As medidas e seus valores aproximados, pois tudo depende do navegador utilizado e tambm do sistema operativo. ems 0.5 0.55 0.625 0.7 0.75 0.8 0.875 0.95 1 1.05 1.125 1.2 1.25 1.3 ems 1.4 1.45 1.5 1.6 1.8 2 2.2 2.25 2.3 2.35 2.45 2.55 2.75 3
pontos (pt) 6 7 7.5 8 9 10 10.5 11 12 13 13.5 14 14.5 15
pixels (px) 8 9 10 11 12 13 14 15 16 17 18 19 20 21
% 50 55 62.5 70 75 80 87.5 95 100 105 112.5 120 125 130
pontos (pt) 16 17 18 20 22 24 26 27 28 29 30 32 34 36
pixels (px) 22 23 24 26 29 32 35 36 37 38 40 42 45 48
% 140 145 150 160 180 200 220 225 230 235 245 255 275 300
69

Unidade IV

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Unidade IV

Caricato da

Copyright:

Formati disponibili

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

<link rel="stylesheet" type="texto/css" href="ficheiro.css">

<style type="text/css">@import url("ficheiro.css");</style>

Unidade IV: Introduo folhas de estilo CSS

<style type="texto/css"><!- - /* cdigo CSS */ - -></style>

Folha de estilos default aplicao do utilizador. Folhas de estilos do autor.

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

selector {margin-left:20px; margin-top:30%; margin-bottom:2em; margin-right:4cm;}

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

Unidade IV: Introduo folhas de estilo CSS

pontos (pt) 6 7 7.5 8 9 10 10.5 11 12 13 13.5 14 14.5 15

% 50 55 62.5 70 75 80 87.5 95 100 105 112.5 120 125 130

Potrebbero piacerti anche