quarta-feira, 16 de junho de 2010

tutorial CSS pt2 Primeiros passos com HTML + CSS

Tutorial CSS - Parte II
Tags Personalizadas
Com as classes de estilo, é possível definir diversas variações de uma única tag. Por exemplo, você poderia fazer um estilo de parágrafo "texto alinhado à direita", um estilo de parágrafo "texto centralizado" e assim por diante, criando múltiplos temas em torno da tag de parágrafo. (

)
Você pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (Não há sentido em definir uma classe em um estilo inline!) A sintaxe é praticamente idêntica à sintaxe normal para os estilos externo e incorporado, com adição de um ponto e o nome da classe depois do elemento na qual será utilizado o atributo.

Para dar um exemplo mais prático, uma classe de estilo que eu particularmente uso muito nos links de minhas páginas é a seguinte:

Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e não-sublinhados. Veja como deve ficar:

Utilizando a tag


As tags HTML
podem ser usadas para formatar um grande bloco de texto - uma divisão - abrangendo diversos parágrafos e outros elementos. Isso as torna uma boa opção para definir estilos que afetam grandes seções de um texto em uma página. Veja:

Ao colocar na tag
o atributo CLASS, você estará fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padrões.
Utilizando a tag
As tags ... são como tags
...
no sentido de que você pode utilizá-las para definir estilos que formatam um bloco de texto. Ao contrário de
, contudo, que é utilizada para divisões de texto grandes, a tag é especializada para blocos de textos menores - que podem ser tão pequenos como um único caracter. Veja um bom exemplo do que se pode fazer utilizando esta tag.

Utilizada no código HTML...

Para sair de um programa:

  1. Selecione Arquivo -
    Sair

Veja como fica:
Para sair de um programa:
Selecione Arquivo - Sair
Atalhos e atributos de CSS
Atalhos de CSS
Alguns atributos de CSS lhe permitem fazer diversas configurações em uma declaração. Por exemplo, suponha que você queira definir diversos aspectos da fnte utilizada para tags H1, como segue:
H1 {font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}
Como alternativa a especificar todas essas formatações de fonte individualmente, você pode utilizar o atributo font: para defini-las todas de uma só vez, assim:
H1 {font: italic bold 18pt 'Times Roman'}
Note como diversos valores - itálico, negrito, 18pt e Times Roman - são separados apenas por um espaço em branco. Essas regras abreviadas certamente poupam espaço e tempo de digitação.
Atributos de CSS do IE4
Atributo de CSS O que ele formata
background Cor de fundo, imagem, transparência.
background-attachment Rolagem do fundo / Marca d'água.
background-image Imagem de fundo.
background-color Cor de fundo ou transparência.
background-position Posicionamento da imagem de fundo.
background-repeat Configuração lado-a-lado da imagem de fundo.
border Largura, estilo e cor de todas as 4 bordas.
border-bottom Largura, estilo e cor da borda inferior.
border-bottom-color Cor da citada borda.
border-bottom-style Estilo da citada borda.
border-bottom-width Largura da citada borda.
border-color Cor das 4 bordas.
border-left Largura, estilo e cor da borda esquerda.
border-left-color Cor da borda citada.
border-left-style Estilo da borda citada.
border-left-width Largura da borda citada.
border-right Largura, estilo e cor da borda direita.
border-right-color Cor da borda citada.
border-right-style Estilo da borda citada.
border-right-width Largura da borda citada.
border-style Estilo de todas as 4 boras.
border-top Largura, estilo e cor da borda superior.
border-top-color Cor da borda citada.
border-top-style Estilo da borda citada.
border-top-width Largura da borda citada.
border-width Largura de todas as 4 bordas.
clear Elementos flutuantes à esquerda ou à direita de um elemento.
clip Parte visível de um elemento.
color Cor de primeiro plano.
cursor Tipo de ponteiro do mouse.
display Se o elemento é exibido e o espaço é reservado para ele.
filter Tipo de filtro aplicado ao elemento.
float Se o elemento flutua.
font Estilo, variante, peso, tamanho e altura da linha do tipo de fonte.
@font-face Incorporação da fonte ao arquivo HTML.
font-family Tipo de fonte.
font-size Tamanho da fonte.
font-style Fonte itálico.
Fonte-variant Fonte bold.
font-weight Peso da fonte de claro a negrito.
height Altura exibida ao elemento.
@import Folha de estilo a importar.
left Posição do elemento em relação a margem esquerda da página.
letter-spacing Distância entre as letras.
line-height Distância entre linhas de base.
list-style Tipo, imagem e posição do estilo da lista.
list-style-image Marcador de item de lista.
list-style-position Posição do marcador de item da lista.
list-style-type Marcador de item de lista alternativo.
margin Tamanho de todas as 4 margens.
margin-left Tamanho da margem esquerda.
margin-right Tamanho da margem direita.
margin-bottom Tamanho da margem inferior.
margin-top Tamanho da margem superior.
overflow Exibição de imagens que são maiores do que suas molduras.
padding Espaço em torno de um elemento em todos os lados.
padding-bottom Espaço a partir da margem inferior de um elemento.
padding-left Espaço à esquerda do elemento.
padding-right Espaço à direita do elemento.
padding-top Espaço a partir da margem superior do elemento.
page-break-after Inserir quebra de página depois de um elemento.
page-break-before Inserir quebra de página antes de um elemento.
position Como o elemento é posicionado na página.
text-align Alinhamento do texto.
text-decoration Sublinhado, sobrelinhado ou riscado.
text-indent Recuo da primeira linha do parágrafo.
text-transform Transformação para todas maiúsculas, minúsculas ou inicial maiúscula.
top Posição do elemento em relação a parte superior da página.
vertical-align Alinhamento vertical do elemento.
visibility Se elemento é visível ou invisível.
width Largura do elemento.
z-index Posição do elemento na pilha.
Miscelânea
Múltiplas fontes
Você pode utilizar na tag múltiplas fontes especificando a ordem de preferência. Ou seja, se a primeira fonte indicada por você não constar no computador do visitante, a segunda será a escolhida, caso não tenha passa a ser a terceira e assim por diante. Veja o exemplo:

Ou na declaração CSS:
H1 {font-family: "Arial, Comic Sans MS, Helvetica" ... }
Fonte incorporada
Utilizando as fontes incorporadas, o visitante de seu site fará o download e a instalação da fonte utilizada por você em seu site caso ele ainda não a tenha em seu micro. A sintaxe para incorporação é a seguinte:

OBS: Essa declaração deve estar entre as tags ...em sua página HTML.
Última modificação deste tutorial: 12/08/98
Internet Explorer® Central - Copyright© 1998
Central - Serviços para internet.
Webmaster: Ricardo Klamath

0 comentários:

Enviar um comentário