Tabela de CSS - À Beira Douro

Transcrição

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.
ltr; rtl.
Define o espaço entre caracteres.
normal; valor (espaço).
[NN4/IE3][CSS1]
direction
<html>
<head>
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]
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>
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>
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”>
</p>
<p class=”negrissimo”>
</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.
todas as propriedades do contorno da
esquerda numa só declaração.
Define a cor do contorno da esquerda.
thin; medium; thick;
valor (espessura).
[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.
todas as propriedades do contorno da
direita numa só declaração.
Define a cor do contorno da direita.
valor (espessura).
[border-width]
[border-style]
[border-color]
[border-color]
Define o estilo do contorno da direita.
[border-style]
Espessura do contorno da direita.
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]
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.
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]
valor (espessura).
<head>
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>
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.
<html>
<head>
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>
[NN4/IE4][CSS1]
</table>
</body>
Define o padding ao topo.
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>
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>
[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>
.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>
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>
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>

Tabela de CSS - À Beira Douro

Transcrição

Documentos relacionados

Catálogo de Produtos - Best Systems | Comércio de

Cascading Style Sheets II

Apresentação do PowerPoint

Lista de propiedades CSS

CSS - Kikinho

Put Whine, Wine, Win Let`s Eat Outdoor Fun

Untitled - Athié Wohnrath

Parando o Jogo Corrido

e! entertainment e the style network

Seção do Cabeçalho - profª msc. elizabete munzlinger