Make your own free website on Tripod.com

Garça Selvagem

Home | HTML | JavaScript | CSS | Serviços

CSS - Curso parte 2

Ir para a página inicial da seção CSS

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. (<P>)

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.

<STYLE TYPE="text/css"><!--
elemento.nomedaClasse {atrbuto:valor; ... }
--></STYLE>

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

<STYLE TYPE="text/css"><!--
A.meuslinks {color: blue; text-decoration: none}
--></STYLE>

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

<A CLASS="meuslinks" HREF="http://www.iecentral.net">

Utilizando a tag <DIV>

As tags HTML <DIV>...</DIV> 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:

<STYLE TYPE="text/css"><!--
DIV.sidebar {font=family: "Arial";
font-size: 12pt;
text-align: right;
background-color: #C0C0C0;
margin-left: 1in;
margin-right: 1in}
--></STYLE>

Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padrões.

Utilizando a tag <SPAN>

As tags <SPAN>...</SPAN> são como tags <DIV>...</DIV> no sentido de que você pode utilizá-las para definir estilos que formatam um bloco de texto. Ao contrário de <DIV>, contudo, que é utilizada para divisões de texto grandes, a tag <SPAN> é 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.

<STYLE TYPE="text/css"><!--
SPAN.hot {color:green; text-decoration: underline}
--></STYLE>

Utilizada no código HTML...

<BODY>
Para sair de um programa:
<OL>
<LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo -
<SPAN CLASS="hot">S</SPAN>air
</OL></BODY>

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.

Miscelânea

Múltiplas fontes

Você pode utilizar na tag <FONT> 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:

<FONT FACE="Arial, Comic Sans MS, Helvetica" SIZE="12" COLOR="purple">

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:

<STYLE TYPE="text/css"><!--
@font-face {font-family: nome_da_fonte;
font-style: estilo_da_fonte;
font-weight: densidade_da_fonte;
src: url_da_fonte}
--></STYLE>

OBS: Essa declaração deve estar entre as tags <HEAD>...</HEAD> em sua página HTML.

Pseudoclasses

Pseudoclasses indicam estados de um elemento em um documento. São úteis pra se aplicar estilo a elementos apenas em determinadas situações, por exemplo quando o mouse está sendo movida sobre ele.


:link
Essa pseudoclasse aplica-se aos links e define o estilo do link quando ele ainda não foi visitado pelo usuário.

Exemplo:
a:link{color:blue}

 

:visited
Define o estilo dos links(tag <a>) quando o link já foi visitado recentemente pelo usuário.

Exemplo:
a:visited{color:yellow}

 

:hover
Esta pseudoclasse aplica-se a um elemento quando o ponteiro do mouse está passando sobre a sua área.

Exemplo:
a:hover{text-decoration:italic}
/* muda o estilo do link quando o mouse passar sobre ele*/

 

Infelizmente é o FIM !
Agora VC já possui o conhecimento básico necessário para começar a se aventurar no mundo CSS, Boa Sorte!

Fui ...




O que VC achou do curso de CSS?
Otimo
Bom
Na média
Ruim
Péssimo

Votar
resultado parcial...




Coloque o Garça Selvagem nos seus favoritos

Torne possível a criação de novos artigos e cursos on-line.
Faça uma pequena contribuição enviando qualquer valor para:
João Paulo T. Silva
Rua paulo Hammel, nº 75
Feitoria, São Leopoldo/RS
CEP: 93052-410