Tabela de CSS - À Beira Douro
Transcrição
Tabela de CSS - À Beira Douro
Tabela de CSS PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO [background-color] [background-image] [background-repeat] [background-attachment] [background-position] scroll; fixed. <html> Propriedades relacionadas com o fundo (background) background [NN6/IE4][CSS1] background-attachment [NN6/IE4][CSS1] background-color Forma abreviada de definir todas as propriedades de background numa só declaração. Entre cada valor utiliza-se um espaço. Define se a imagem de fundo é fixa ou se se desloca com a página. Define a cor de fundo de um elemento. [NN4/IE4][CSS1] background-image Define uma imagem como fundo. [NN6/IE4][CSS1] background-repeat [NN4/IE4][CSS1] Define o posicionamento da imagem de fundo. Define como ou se uma imagem vai ser repetida. <style type=”text/css”> body { } background-image:url(‘bgdesert.jpg’) h1 {background-color: #00ff00} h2 {background-color: transparent} cor-rgb; cor-hexadecimal; cor-nome; transparent. url ("ficheiro"); none. [NN4/IE4][CSS1] background-position <head> top left; top center; top right; center left; center center; center; right; bottom left; bottom center; bottom right; x-% y-%; pos-x pos-y. repeat; repeat-x; repeat-y; no-repeat. p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>Cabeçalho 1</h1> <h2>Cabeçalho 2</h2> <p>Isto é um parágrafo.</p> </body> </html> Propriedades de Texto color Define a cor do texto. Define a direcção do texto. cor-rgb; cor-hexadecimal; cor-nome; transparent. ltr; rtl. Define o espaço entre caracteres. normal; valor (espaço). [NN4/IE3][CSS1] direction <html> <head> <style type=”text/css”> h1 { [CSS2] letter-spacing } [NN6/IE4][CSS1] line-height Define a distância entre linhas. Alinha o texto num elemento. [NN4/IE4][CSS1] text-decoration [NN4/IE4][CSS1] text-indent Adiciona decoração ao texto. Pode ser atribuído mais do que um valor. Identa a primeira linha do texto. normal; número; valor (altura); %. left; right; center; justify; none. none; underline; overline; line-through; blink. valor; %. p.caixaalta {text-transform: uppercase} p.caixabaixa {text-transform: lowercase} p.primletra {text-transform: capitalize} </style> </head> <body> <h1>Este é o título 1.</h1> <h4>Este é o título 2.</h4> <p class=”caixaalta”> Texto exemplificativo de um parágrafo. </p> [NN4/IE4][CSS1] text-transform <p class=”caixabaixa”> Define as letras num elemento. [NN4/IE4][CSS1] word-spacing color: #00ff00 h4 {letter-spacing: 0.5cm} [NN4/IE4][CSS1] text-align letter-spacing: -3px Altera o espaço entre palavras. none; capitalize; uppercase; lowercase. normal; valor. Texto exemplificativo de um parágrafo. </p> </body> </html> [NN6/IE6][CSS1] Propriedades de tipos de letra font [NN6/IE6][CSS1] font-family [NN4/IE3][CSS1] Forma abreviada de definir todas as propriedades relativas ao tipo de letra numa só declaração. Utiliza-se um espaço para separar os valores. Define listas de famílias de tipos e/ ou nomes de família genéricos para um elemento. Quando existe mais do que um tipo de letra utiliza-se a vírgula como elemento de separação. [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family]; caption; icon; menu; message-box; small-caption; status-bar. Tipo de letra; Família tipográfica (serif; sans-serif; cursive, fantasy, monospace) <html> <head> <style type=”text/css”> h3 {font-family: times} p {font-family: courier} p.semserifa {font-family: sans-serif} p.parfinal { font: italic small-caps 900 12px arial } </style> </head> <body> <h3>Isto é um título.</h3> <p>Isto é um parágrafo.</p> <p class=”senserifa”>Isto é um parágrafo.</p> <p class=”parfinal”>Isto é um parágrafo.</p> </body> </html> PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO xx-small; x-small; small; medium; large; x-large; xx-large; smaller; larger; valor (corpo); %. none; número. <html> Propriedades de tipos de letra font-size Define o tamanho de um tipo de letra. [NN4/IE2][CSS1] font-size-adjust [CSS2] font-stretch [CSS2] font-style Especifica o valor de referência de um elemento que irá preservar a altura-x da primeira escolha tipográfica. Condensa ou expande a família tipográfica corrente. Define o estilo de um tipo de letra. <head> <style type=”text/css”> p.normal {font-weight: normal} p.negro {font-weight: bold} p.negrissimo {font-weight: 900} </style> </head> <body> normal; wider; narrower; ultra-condensed; extra-condensed; condensed; semi-condensed; semi-expanded; expanded; extra-expanded; ultra-expanded. normal; italic; oblique. <p class=”normal”> Isto é um parágrafo. </p> <p class=”negro”> Isto é um parágrafo. </p> <p class=”negrissimo”> Isto é um parágrafo. </p> </body> </html> [NN4/IE4][CSS1] font-variant [NN6/IE4][CSS1] font-weight Mostra o tipo de letra em small-caps ou normal. Define o peso do tipo de letra. [NN4/IE4][CSS1] normal; small-caps. normal; bold; bolder; lighter; 100-900. Propriedades de contorno (border) border [NN4/IE4][CSS1] border-bottom [NN6/IE4][CSS1] border-bottom-color Propriedade abreviada de definir as propriedades dos quatro contornos numa só declaração. Propriedade abreviada para definir todas as propriedades do contorno inferior numa só declaração. Define a cor do contorno inferior. [border-width] [border-style] [border-color] [border-width] [border-style] [border-color] [border-color] [NN6/IE4][CSS2] border-bottom-style Define o estilo do contorno inferior. [border-style] Define a espessura do contorno inferior. Define a cor dos quatro contornos. Pode ter de uma a quatro cores. Propriedade abreviada para definir todas as propriedades do contorno da esquerda numa só declaração. Define a cor do contorno da esquerda. thin; medium; thick; valor (espessura). cor-rgb; cor-hexadecimal; cor-nome; transparent. [border-width] [border-style] [border-color] [border-color] [NN6/IE4][CSS1] border-left [NN6/IE4][CSS1] border-left-color Estilo do contorno da esquerda. [border-style] Espessura do contorno da esquerda. Propriedade abreviada para definir todas as propriedades do contorno da direita numa só declaração. Define a cor do contorno da direita. thin; medium; thick; valor (espessura). [border-width] [border-style] [border-color] [border-color] Define o estilo do contorno da direita. [border-style] Espessura do contorno da direita. thin; medium; thick; valor (espessura). [NN6/IE4][CSS2] border-left-style [NN6/IE4][CSS2] border-left-width [NN4/IE4][CSS1] border-right [NN6/IE4][CSS1] border-right-color [NN6/IE4][CSS2] border-right-style [NN6/IE4][CSS2] border-right-width [NN4/IE4][CSS1] <style type=”text/css”> p { } border-bottom: medium solid #ff0000 p.soliddouble {border-style: solid double} p.doublesolid {border-style: double solid} p.tres {border-style: solid double groove} </head> <body> <p> [NN4/IE4][CSS1] border-color <head> </style> [NN6/IE4][CSS2] border-bottom-width <html> <b>Nota:</b> O Netscape 4 não reconhece a propriedade "border-bottom" nem a "border-style". Com o Netscape deve usar a propriedade "border-bottom-width" e "border" respectivamente. </p> <p class="soliddouble">Algum texto.</p> <p class="doublesolid">Algum texto.</p> <p class="tres">Algum texto.</p> </body> </html> PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO none; hidden; dotted; dashed; solid; double; groove; ridge; inset; outset. [border-width] [border-style] [border-color] [border-color] <html> Propriedades de contorno (border) border-style [NN6/IE4][CSS1] border-top [NN6/IE4][CSS1] border-top-color Define o estilo dos quatro contornos. Pode ter de um a quatro estilos. Propriedade abreviada para definir todas as propriedades do contorno superior numa só declaração. Define a cor do contorno superior. [NN6/IE4][CSS2] border-top-style Define o estilo do contorno superior. [border-style] Define a espessura do contorno superior. Propriedade abreviada para definir a espessura dos quatro contornos numa só declaração. Pode ter de um a quatro valores. [border-width] [NN6/IE4][CSS2] border-top-width [NN4/IE4][CSS1] border-width [NN4/IE4][CSS1] thin; medium; thick; valor (espessura). <head> <style type=”text/css”> p { } border-style: solid; border-top-width: 15px; </style> </head> <body> <p> A propriedade "border-top-width" não é reconhecida pelo Internet Explorer se fôr usada sozinha. No Internet Explorer antes deve ser utilizada a pro- priedade "border-style" para definir os contornos. </p> </body> </html> Propriedades de margens [espaço que envolve cada elemento] margin [NN4/IE4][CSS1] margin-bottom Propriedade abreviada que permite definir as propriedades da margem numa só declaração. Define a margem inferior do elemento. [margin-top][margin-right] [margin-bottom] [margin-left] auto; valor; %. Margem esquerda do elemento. auto; valor; %. [NN4/IE4][CSS1] margin-right Define a margem direita do elemento. auto; valor; %. Define a margem superior do elemento. auto; valor; %. [NN4/IE4][CSS1] margin-top <head> <style type=”text/css”> p.margens {margin: 2cm 4cm 3cm 4cm} </style> </head> <body> [NN4/IE4][CSS1] margin-left <html> [NN4/IE4][CSS1] <p>This is a paragraph</p> <p class=”margens”> Este parágrafo tem margens que foram definidas numa só declaração. </p> </body> </html> Propriedades do padding [espaço definido pela distância entre o limite e o conteúdo de um elemento] padding [NN4/IE4][CSS1] padding-bottom Propriedade abreviada que permite definir todas as propriedades do padding numa só declaração. Define o padding inferior. [padding-top] [padding-right] [padding-bottom] [padding-left] valor (distância); %. Define o padding à esquerda. valor (distância); %. <html> <head> <style type=”text/css”> td {padding-top: 2cm} </style> </head> <body> <table border=”1”> [NN4/IE4][CSS1] padding-left <tr> <td> Célula com padding ao topo. [NN4/IE4][CSS1] padding-right </td> Define o padding à direita. padding-top </tr> valor (distância); %. [NN4/IE4][CSS1] </table> </body> Define o padding ao topo. valor (distância); %. Forma abreviada de definir todas as propriedades de uma lista numa só declaração. Define uma imagem como item de lista. [list-style-type] [list-style-position] [list-style-image] none; url ("ficheiro"); </html> [NN4/IE4][CSS1] Propriedades de lista list-style [NN6/IE4][CSS1] list-style-image <html> <head> <style type=”text/css”> ul { list-style-position Define a posição do item da lista. inside; outside. [NN4/IE4][CSS1] } list-style-image:url(‘arrow.gif’); </style> [NN6/IE4][CSS1] list-style-type list-style-type:square; list-style-position:inside; [NN6/IE4][CSS1] Define o tipo de item de lista. none; disc; circle; square; decimal; upper-roman; lower-alpha; lower-greek; lower-latin; hebrew; armenian; georgian; hiragana; katakana; (...). </head> <body> <p><b>Note:</b> O Netscape 4 não mostra as imagens nem o posicionamento na lista.</p> <ul> <li>Café</li> <li>Chá</li> </ul> </body> </html> PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO Propriedades de dimensão [permitem controlar a altura e comprimento de um elemento.] height Define a altura de um elemento. auto; valor (altura); %. Define a distância entre linhas. normal; número; valor (altura); %. none; valor (compr.); %. [NN6/IE4][CSS1] line-height [CSS2] max-width [CSS2] min-height [CSS2] min-width [CSS2] width <head> <style type=”text/css”> [NN4/IE4][CSS1] max-height <html> Define a altura máxima de um elemento. Define o comprimento máximo de um elemento. Define a altura mínima de um elemento. Define o comprimento mínimo de um elemento. Define o comprimento de um elemento. p.entrelinha {line-height: 1cm} </style> </head> <body> <p> Isto é um parágrafo Isto é um parágrafo Isto é um none; valor (compr.); %. parágrafo Isto é um parágrafo </p> <p class=”entrelinha”> none; valor (altura); %. Isto é um parágrafo Isto é um parágrafo Isto é um parágrafo Isto é um parágrafo Isto é um parágrafo Isto é um parágrafo none; valor (altura); %. </p> </body> </html> auto; valor (altura); %. [NN4/IE4][CSS1] Propriedades de classificação [permitem controlar a forma de mostrar um elemento, a posição de um elemento relativamente à sua posição inicial, controlar a visibilidade de um elemento.] clear [NN4/IE4][CSS1] cursor [NN6/IE4][CSS2] display Define os lados de um elemento onde não são permitidos elementos flutuantes. Especifica o tipo de ponteiro do rato mostrado. Além dos ponteiros já predefinidos, podem ser incluídos ponteiros personalizados. Define como/se o elemento é mostrado [NN4/IE4][CSS1] float [NN4/IE4][CSS1] position [NN4/IE4][CSS2] visibility Localização de texto ou imagem relativamente ao seu ascendente hierárquico. Coloca um elemento, posicionando-o de forma estática, relativa ou fixa. Define a visibilidade de um elemento. left; right; both; none. <html> <head> <style type=”text/css”> .pos_relativo { url ("ficheiro"); auto; crosshair; default; pointer; move; e-resize; ne-resize; nw-resize; n-resize; se-resize; sw-resize; s-resize; w-resize; text; wait; help. 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; table-column; table-cell; table-caption. left; right; none. position:relative; left:-20px; } background-color: magenta; .pos_absoluto { position:absolute; left:60px; } background-color: cyan; .pos_fixo { position:fixed; left:40px; top:200px; } background-color: yellow; </style> </head> <body> Vestibulum at felis a erat cursus fermentum. Proin condimentum, arcu eu molestie condimentum. <p class="pos_relativo"> O posicionamento relativo desloca um elemento relativamente à sua posição inicial. É possível colocar medidas negativas: neste caso são retirados 20 pixeis à esquerda do posicionamento incial. </p> <p class="pos_absoluto"> O posicionamento absoluto posiciona um elemento através de coordenadas relativas ao bloco que o contém. </p> static; relative; absolute; fixed. visible; hidden; collapse. [NN6/IE4][CSS2] <p class="pos_fixo"> O posicionamento fixo coloca um elemento num determinado local relativamente à janela do browser (fica no mesmo local independentemente do scroll). </p> </body> </html> Propriedades de posicionamento [permite definir a localização de elementos.] bottom clip [NN6/IE4][CSS2] left [NN4/IE4][CSS2] overflow [NN6/IE4][CSS2] position [NN4/IE4][CSS2] right auto; %; valor. Define uma forma que é atribuída a um elemento demarcando a área visível. Define o limite esquerdo de um elemento. Define o que acontece quando o conteúdo de um elemento excede a sua área. Coloca um elemento numa posição estática, relativa, fixa ou absoluta. Define o limite direito de um elemento. auto; rect(top dta bx esq). static; relative; absolute; fixed; auto; %; valor. propriedade.</p> Define o limite superior de um elemento. auto; %; valor. </html> [NN4/IE4][CSS2] <head> <style type=”text/css”> img.x { visible; hidden; scroll; auto. position:absolute; left:0px; auto; %; valor. [---/IE5][CSS2] top <html> Define o limite inferior de um elemento. [NN6/IE5][CSS2] top:0px; } z-index:-1 </style> </head> <body> <p><b>Nota:</b> O Netscape 4 não interpreta esta <h1>Isto é um título</h1> <img class=”x” src=”bulbon.gif”> <p>O valor por defeito do z-index é 0. Z-index -1 tem uma prioridade menor.</p> </body> PROPRIEDADE DESCRIÇÃO VALORES EXEMPLO Propriedades de posicionamento vertical-align [NN4/IE4][CSS1] Define o alinhamento vertical de um elemento. z-index Define a ordem de um elemento. baseline; sub; super; top; text-top; middle; bottom; text-bottom; valor; %. auto; número. [NN6/IE4][CSS2] ELEMENTO DESCRIÇÃO EXEMPLO CSS pseudo-classes e pseudo-elementos [são usados para adicionar efeitos diferentes a alguns selectores, ou a parcelas de selectores.] active Refere-se ao link seleccionado. [---/IE4][CSS1] hover <html> <head> <style type=”text/css”> a.dois:link {color: #ff0000} Quando o rato está sobre o link. a.dois:visited {color: #0000ff} [NN7.1/IE4][CSS1] link a.dois:hover {font-size: 150%} Link não visitado. a.tres:link {color: #ff0000} [NN4/IE3][CSS1] visited a.tres:visited {color: #0000ff} [NN4/IE3][CSS1] :first-child [NN7/---][CSS1] :lang [---/---][CSS1] first-letter </style> </head> O conceito de first-child remete para a relação de descendência incidindo na primeira ocorrência de um determinado descendente. Permite ao autor especificar a língua a usar num determinado elemento. Primeira letra do texto. [---/IE5.5][CSS1] first-line a.tres:hover {background: #66ff66} Link já visitado. <body> <p><b><a class=”dois” href=”default.asp” tar- get=”_blank”>Link e altera o tamanho</a></b></p> <p><b><a class=”tres” href=”default.asp” target=”_ blank”>Link que altera o fundo</a></b></p> </body> </html> Primeira linha do texto. [---/IE5.5][CSS1] :before Insere conteúdo antes de um elemento. [---/---][CSS2] :after Insere conteúdo depois de um elemento. [---/---][CSS2] Media types do CSS2 (tipos de media) [permite definir de que forma os documentos são apresentados em diferentes media. Os documentos podem ter uma formatação diferente consoante se trate do ecran, do papel ou de um dispositivo braille.] :all Usado para todos os tipos de media. [---/IE4][CSS2] :aural <html> <head> <style type="text/css"> @media screen Usado para vocalizadores e sintetizadores de audio. { [---/---][CSS2] :braille p.test Usado para aparelhos de Braille. { Usado em impressoras de Braille. } [---/---][CSS2] :embossed [---/---][CSS2] :handheld { { } Usado em apresentações projectadas, como slides. { Usado em monitores de computadores. [---/IE4][CSS2] :tty [---/---][CSS2] :tv [---/---][CSS2] } font-family:times,serif; font-size:10px; @media screen,print [---/---][CSS2] :screen p.test Usado em impressoras. [---/IE4][CSS2] :projection font-size:14px} @media print Usado para computadores de bolso. [---/---][CSS2] :print font-family:verdana,sans-serif; } p.test {font-weight:bold} </style> Usado em dispositivos com um tamanho de caracter fixo como os TTYs. Os TTYs são "telefones" para pessoas com limitações auditivas. Usado para aparelhos equiparados a televisões. </head> <body>....</body> </html>
Documentos relacionados
Lista de propiedades CSS
bordas superior, direita, inferior e esquerda. Aceitam de 1 a 3 valores.
Leia maisCSS - Kikinho
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 atenção para o facto de ainda subsistirem alguns pro...
Leia mais