Geradores de Conteúdo CSS

Fiquei fascinado com as propriedades geradoras de conteúdo do CSS. Visto que as folhas de estilo são essencialmente responsáveis por adicionar estilo a documentos escritos em uma linguagem de marcação, geradores de conteúdo é o que mais se assemelha à uma experiência de programação.
Utilizadas em conjunto com pseudo-elementos, essas propriedades permitem adiconar informações antes ou depois da apresentação de elementos. Se você não sabe o que são pseudo-elementos dê uma olhadinha antes no tópico Pseudo-Elementos CSS.

Content
A propriedade content é utilizada para a geração de conteúdo no momento da renderização. Os possíveis valores para content são:
inherit - herda o valor atribuido ao elemento-pai;
[string] - define uma string a ser incluída no documento;
[url] - define uma URL de um documento que será incluído;
counter([nome-contador]) - define um contador cujo valor será inserido no documento;
open/close-quote - insere aspas.

Se para o mesmo elemento for usado o valor open-quote para a propriedade content, tanto antes quanto após o elemento selecionado, irá aparecer primeiro aspas duplas e a seguir aspas simples. Além disso o close-quote só tem efeito se o valor open-quote já tiver sido atribuído antes.

Counter-increment
Usado para a numeração de sessões, é utilizada em conjuto com a propriedade counter. Os possíveis valores para counter-increment:
inherit - herda o valor atribuido ao elemento-pai;
none - não incrementa;
[contador] - nome do contador que será incrementado;
[número] - define quanto se deverá incrementar.

Counter-reset
Deve ser usado em conjunto com a propriedade counter e serve para zerar o contador. Os possíveis valores para counter-reset:
inherit - herda o valor atribuido ao elemento-pai;
none - não zera;
[contador] - nome do contador que será zerado;

Pronto, agora para testar estas três propriedades vamos escrever um documento HTML contendo vários parágrafos:

<p>Parágrafo</p>
<p>Parágrafo</p>
<p>Parágrafo</p>
<p>Parágrafo</p>

A seguir definimos as seguintes regras na filha de estilos deste documento:

body{counter-reset: cont;}
p:before{
counter-increment:cont 1;
content:counter(cont) " - ";
}
/* Primeiro o contador "cont" é zerado na sessão body. A cada parágrafo é incrementado com uma unidade o contador "cont" e esse valor é adicionado no início de cada parágrafo com a propriedade content. */

O resultado:

1 - Parágrafo
2 - Parágrafo
3 - Parágrafo
4 - Parágrafo

Ainda existe a propriedade quotes que define que tipo de aspas o documento utilizará.

Pseudo-Elementos CSS

Eu falei anteriormente de Pseudo-Classes CSS (se você não viu clique aqui), agora veremos os Pseudo-Elementos. Os pseudo-elementos permitem que elementos lógicos sejam definidos sem estarem necessariamente declarados na árvore de elementos do documento. A única limitação no uso de pseudo-elementos é no tocante a sua declaração em style-sheets locais.

São eles:

Before - Usado com a propriedade content para adicionar conteúdo antes de um elemento:

[elemento]:before { [bloco-de-declarações] }

Ex: a:before { content: "Teste"; }
/* Adiciona a strig "Teste" antes das ocorrências do elemento a */

After - Usado com a propriedade content para adicionar conteúdo após um elemento:

[elemento]:after { [bloco-de-declarações] }

Ex: a:after { content: "Teste"; }
/* Adiciona a strig "Teste" depois das ocorrências do elemento a */

First-letter - Permite aplicar propriedades ao primeiro caractere do texto de um elemento:

[elemento]:first-letter { [bloco-de-declarações] }

Ex: p:first-letter { font-weight:bold; }
/* Coloca a primeira letra de todo parágrafo em negrito */

First-line - Permite aplicar propriedades aos caracteres da primeira linha do texto de um elemento:

[elemento]:first-line { [bloco-de-declarações] }

Ex: p:first-line { font-weight:bold; }
/* Coloca a primeira linha de todo parágrafo em negrito */

Blog do Talisson

Um período muito bom foi o que passei trabalhando com desenvolvimento web na Imagine Mais. A empresa não chegou a se consolidar, mas o conhecimento prático que obtive em três meses foi bem maior do que tive em dois anos na universidade, ao menos no tocante a programação web. Tive que aprender algumas tecnologias rapidamente para acompanhar o ritmo da equipe e nesse período recebi muita ajuda de Talisson, um cara super gente boa que teve muita paciência comigo.
Recentemente descobri que ele tem um blog onde se propõe a escrever, entre outras coisas, sobre tecnologia. Está começando, mas já gostei muito dos primeiros textos. Dêem uma olhada, vale a pena conferir. http://talissonfagundes.blogspot.com/

Utilizando o jQuery

Algumas pessoas me perguntaram como começar a mecher com jQuery. Bem, para começar é necessário primeiro ir ao site http://jquery.com/ e fazer o download do arquivo contendo o código javascript. Para isso é só clicar no botão do lado direito

O arquivo se chama "jquery-1.4.2.min.js". Esse arquivo deve ser ligado ao documento através de uma tag link no head da página html,assim:

<script type="text/javascript" src="jquery-1.4.2.min.js"> </script>

Pronto. Agora é só usar. Como eu disse no tópico anterior, o site jquery.com tem uma documentação que você pode usar para fazer os testes e aprender a usar essa biblioteca. Você pode começar pelos seletores e depois passar para os atributos, manipulação, CSS, eventos, efeitos e assim por diante.

Bons estudos.