Vinculação de Uma Folha de Estilo A Um Documento HTML

CSS
Por Flvio Peixoto Salgado
VINCULAO DE UMA FOLHA DE ESTILO A UM DOCUMENTO HTML

FORMA DE VINCULAO TIPO DE CSS CARACTERSTICA Declarado em arquivo externo ao arquivo HTML IMPORTADAS OU EXTERNO (ARQUIVO LINKADAS .CSS) Pode ser aplicado a vrios documentos HTML SINTAXE <head> <link rel=stylesheet type=text/css href=nome_do_arquivo.css> </head> FORMA DE VINCULAO TIPO DE CSS INTERNO OU INCORPORADO <HEAD> CARACTERSTICA
Declarado em um documento HTML dentro do

INCORPORADO
Aplicado apenas ao documento HTML ao qual
pertence Pode ser aplicado a mais de um elemento HTML
SINTAXE <head> <style type=text/css> seletor { propriedade: valor; } </style> </head> FORMA DE VINCULAO INLINE TIPO DE CSS INLINE CARACTERSTICA Declarado dentro da TAG de um elemento HTML Aplicado a apenas um elemento HTML
SINTAXE <body> <elemento style=propriedade: valor;> </body> As declaraes CSS mais especficas (mais internas) prevalecem sobre as demais, ou seja, a INLINE prevalece sobre a INTERNA, que por sua vez prevalece sobre a EXTERNA.
CSS
SINTAXE CSS
COMENTRIO /* comentrio */ SINTAXE BSICA seletor { propriedade: valor; } CARACTERSTICA Utilizado para fazer observaes dentro do cdigo No compilado CARACTERSTICA SELETOR elemento HTML (TAG), classe (CLASS) ou identificador (ID) PROPRIEDADE atributo do seletor VALOR caracterstica atribuda propriedade CARACTERSTICA BOA PRTICA: Cada par (propriedade e atributo) deve ser declarado em uma linha CARACTERSTICA
AGRUPANDO PROPRIEDADES seletor { propriedade1: valor1; propriedade2: valor2; } AGRUPANDO SELETORES seletor1, seletor2 { propriedade: valor; }
TIPOS DE SELETORES
SELETOR DE UM ELEMENTO HTML elemento { propriedade: valor; } CARACTERSTICA Afeta todos os elementos HTML semelhantes (mesma TAG) Exemplo: body { background-color: #FFFFFF; } CARACTERSTICA Afeta todos os elementos HTML semelhantes pertencentes mesma classe Declarar o elemento no CSS opcional. Exemplo: hr.superior { margin-top: 10px; } <hr class=superior> CARACTERSTICA Afeta um nico elemento HTML Um determinado ID s pode ser aplicado a um nico elemento HTML Exemplo: #superior { margin-top: 10px; } <hr ID=superior>
SELETOR DE UMA CLASSE DE ELEMENTOS [Elemento].classe { propriedade: valor; } NA TAG HTML UTILIZA-SE <elemento class= classe>
SELETOR DE UM IDENTIFICADOR #identificador { propriedade: valor; } NA TAG HTML UTILIZA-SE <elemento ID= identificador>
PSEUDO-ELEMENTOS
PSEUDO-ELEMENTO Seletor: pseudo-elemento { propriedade: valor; First-letter First-line link visited } CARACTERSTICA O pseudo-elemento acrescenta efeitos especiais ao seletor Exemplo: P: first-letter { fiont-size: 24px; } Afeta a primeira letra de um texto Afeta a primeira linha do texto Link no visitado Link visitado
CSS
active hover
Link ativo (selecionado) Link quando o mouse est posicionado sobre ele
CSS
PROPRIEDADES DO CSS
PROPRIEDADE FONT PROPRIEDADES BSICAS color font-family cor da fonte um tipo de fonte (nome da fonte) ou uma lista tamanho da fonte VALORES Cdigo hexadecimal #FFFFFF Cdigo RGB .............rgb(255,235,0) Nome da cor ...........red, blue, green arial, verdana, helvetica, serif Nominal ................... smaller | xx-small | x-small | small | medium | large | x-large | xx-large | larger Length ..................... absoluta: pt | cm | mm ................................. Relativa: px | em | ex % normal (na vertical) | italic (Inclinada) | oblique (obliqua) normal | small-caps (maisculas de menor altura) .............................................. Nominal ............. normal | bold | bolder | lighter Numerico ........... 100 | 200 | 300 | ... | 900 Length ..................... px | pt | em | cm % VALORES
font-size
font-style fontvariant fontweight line-height
estilo de fonte fontes maisculas de menor altura escurece a fonte (negrito)
espaamento (antes e depois) de uma linha de texto PROPRIEDADES DO SISTEMA OPERACIONAL DO VISITANTE caption usadas em botes icon usadas em cones menu usadas em menus messageusadas em caixas de mensagens box smallusadas em pequenos controles caption status-bar usadas na barra de status inherit Herda a fonte usada pelo elemento pai PROPRIEDADES GERAL font maneira abreviada para todas as propriedades
So propriedades declaradas de forma isolada. Exemplo: .p1 { font: status-bar; } <p class=p1> pargrafo com status-bar</p>
SINTAXE font: [style] [variant] [weight] size [/line-height] family | caption | icon | menu | message-box | smallcaption | status-bar | inherit
PROPRIEDADE TEXT PROPRIEDADES BSICAS color cor do texto letterespaamento entre letras spacing wordespaamento entre palavras spacing text-align alinhamento vertical do texto textdecoration text-indent texttransform direction whitespace decorao do texto recuo (da primeira linha) do texto forma das letras direo vertical de escrita do texto como o browser trata os espaos em branco
VALORES normal | lenght (sendo vlido valores negativos) normal | lenght (sendo vlido valores negativos) left | center | right | justify none (sem) | underline (sublinhado) | overline (sobrelinhado) | line-through (taxado) | blink (piscando) lenght | % none | capitalize (primeiras letras do texto em maisculas) | uppercase (todas as letras em maisculas) | lowercase (todas as letras em minsculas) ltr (da esquerda para a direita) | rtl (da direita para a esquerda) normal (ignora) | pre (preserva) | nowrap (no h quebra de linha at encontrar uma TAG <BR>)
PROPRIEDADE BACKGROUND PROPRIEDADES BSICAS background-color cor de fundo do elemento DIV
VALORES o mesmo da propriedade COLOR
CSS
background-image Backgroundattachment Backgroundposition Background-repeat
define imagem de fundo Rola ou fixa a imagem com a pgina Define a posio inicial da imagem
url (endereo_da_imagem) Scroll (rola) | fixed (fixa) Nominal: [left | Center | right] || [top | Center | bottom] Absoluta: xpos ypos Relative: x% y% No-repeat (sem) | repeat-x (na horizontal) | repeat-y (na vertical) | repeat (em ambas as direes) SINTAXE
Define se e como ocorrer repetio PROPRIEDADES GERAL Abrevia todas as background propriedades background PROPRIEDADE BOX PROPRIEDADES BSICAS Define se e como os display elementos internos sero dispostos em um BOX Define se e como o elemento float flutuar dentro do BOX ELEMENTO: TAG PROPRIEDADES BSICAS
vertical-align position Especifica o alinhamento vertical de um elemento Usado em conjunto com as propriedades top, right, bottom e left.
VALORES None (sem Box) | Inline (em linha) | block (em coluna) | run-in (depende do contexto) None | Left | right
VALORES
Baseline | sub | super | top | text-top | middle | bottom | text-bottom | length | % Static | absolute | fixed | relative
width height padding border margin opacity overflow z-index
comprimento altura espao entre o contedo do elemento HTML e sua borda borda espao entre as bordas dos elementos HTML, ou seja, entre os elementos HTML Nvel de opacidade
Especifica o que acontece se o contedo de um elemento sobrecarrega sua rea Especifica a ordem de empilhamento de um elemento, ou seja, usado para posicionar um elemento "atrs" de outro elemento
0.0 (transparente) a 1.0 (opaco)

Visible | hidden | scroll | auto number
PROPRIEDADE PADDING PROPRIEDADES BSICAS Padding-top Espaamento superior
VALORES
CSS
Padding-bottom Espaamento inferior Padding-left Espaamento da esquerda Padding-right Espaamento da direita PROPRIEDADES GERAL padding Abrevia todos os espaamentos
SINTAXE Padding: top right bottom left | top right-left bottom | top-bottom right-left | top-right-bottom-left
PROPRIEDADE BORDER PROPRIEDADES BSICAS Border-collapse Border-spacing BORDER-TOP border-bottom border-left border-right Border-width Border-style Se h espao entre as bordas Tamanho do espao Borda superior Borda inferior borda da esquerda borda da direita Espessura da borda Estilo da borda
VALORES Separate (espao entre as bordas) | collapse (sem espao) Xlength ylength
thin (fina) | medium (mdia) | thick (grossa) | length None (sem borda) | hidden (borda oculta) | dotted (pontilhada) | dashed (tracejada) | solid (contnua) | Double (dupla) | groove (entalhada) | ridge (em ressalto) | inset (em baixo relevo) | outset (em alto relevo) Mescla as caractersticas acima. Exemplo: Border-top-width espessura da borda superior SINTAXE Border: width style color;
Border-color Cor da borda Border[-top | -bottom | -left | -right][-width | -style | -color] PROPRIEDADES GERAL BORDER Abrevia todos as bordas PROPRIEDADE margIN PROPRIEDADES BSICAS Espaamento superior margIN -top
VALORES
margIN -bottom margIN -left margIN -right margIN
Espaamento inferior Espaamento da esquerda SINTAXE
Espaamento da direita PROPRIEDADES GERAL Abrevia todos os espaamentos
margIN: top right bottom left | top right-left

bottom | top-bottom right-left | top-right-bottom-left
PROPRIEDADE list PROPRIEDADES BSICAS list-style-type list-style-position tipo do marcador da lista onde o marcador da lista posicionado
list-style-image imagem como marcador da lista PROPRIEDADES GERAL list-style abrevia todas as propriedades
VALORES None (sem) | disc (crculo - bolinha cheia) | circle (circunferncia - bolinha vazia) | square (quadrado cheio) | outside (fora do alinhamento do texto) | inside (alinhado com o texto) | decimal (nmeros 1, 2, 3, 4) | decimal-leading-zero | [lower | upper][-roman | -alpha] (minsculo ou maisculo | romano ou alfabtico) None | url(caminho_da_imagem) SINTAXE

Vinculação de Uma Folha de Estilo A Um Documento HTML

Caricato da

Informazioni sul documento

Titolo originale

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

Vinculação de Uma Folha de Estilo A Um Documento HTML

Caricato da

Copyright:

Formati disponibili

CSS

Por Flvio Peixoto Salgado

VINCULAO DE UMA FOLHA DE ESTILO A UM DOCUMENTO HTML

Declarado em um documento HTML dentro do

Aplicado apenas ao documento HTML ao qual

pertence Pode ser aplicado a mais de um elemento HTML

Por Flvio Peixoto Salgado

Por Flvio Peixoto Salgado

Por Flvio Peixoto Salgado

font-style fontvariant fontweight line-height

estilo de fonte fontes maisculas de menor altura escurece a fonte (negrito)

PROPRIEDADE BACKGROUND PROPRIEDADES BSICAS background-color cor de fundo do elemento DIV

VALORES o mesmo da propriedade COLOR

Por Flvio Peixoto Salgado

background-image Backgroundattachment Backgroundposition Background-repeat

width height padding border margin opacity overflow z-index

0.0 (transparente) a 1.0 (opaco)

PROPRIEDADE PADDING PROPRIEDADES BSICAS Padding-top Espaamento superior

Por Flvio Peixoto Salgado

margIN -bottom margIN -left margIN -right margIN

Espaamento inferior Espaamento da esquerda SINTAXE

Espaamento da direita PROPRIEDADES GERAL Abrevia todos os espaamentos

margIN: top right bottom left | top right-left

Potrebbero piacerti anche