Inércia Sensorial

Estilo de listas com CSS

Comments 16 dAmerica/Los_Angeles April, 2007 sob CSS.

As seguintes propriedades modificam estilos de listas usando Cascading Style Sheets:

list-style-image: imagem como marcador;
list-style-position: posição do marcador;
list-style-type: tipo de marcador;
list-style: abreviação para múltiplas propriedades;

Como preencher os valores das propriedades:

list-style-image

none
URL: url(diretorio/imagem.extensao)

list-style-position

outside: marcador desalinhado do texto
inside: marcador alinhado com texto

list-style-type

none: sem marcador
disc: círculo (bola pintada)
circle: circunferência (bola vazia)
square: quadrado pintadi
lower-alpha: letra minúscula a, b, c, d, …
upper-alpha: [...]

Declaração de CSS na página

Comments 13 dAmerica/Los_Angeles April, 2007 sob CSS.

Eu costumo colocar todo o código de CSS em arquivos separados mas de vez em quando surge a necessidade de colocá-los no corpo da página, dentro do <head>. Para que eu nunca mais esqueça então, é assim:
PLAIN TEXT
HTML:

</style>

Layout de duas colunas com CSS

Comments 18 dAmerica/Los_Angeles February, 2006 sob CSS.

Dizem que o Cálice Sagrado em Cascading Style Sheet é o layout de três colunas fluídas (ou flutuantes, ou ainda, elástico). Mas antes de mostrá-lo, e aliás, ele é relativamente fácil, começarei explicando o layout de duas colunas. Ambos compartilham o mesmo príncipio, então duas colunas com CSS bastarão por enquanto.
Primeiro, comece com as duas [...]

Caixas CSS centralizadas

Comments 16 dAmerica/Los_Angeles February, 2006 sob CSS.

O código abaixo centraliza uma caixa CSS na tela, colocando o tamanho das suas margens em "auto". Não é os infames layouts de duas ou três colunas, mas apenas uma caixa mesmo bem no meio da tela, com os lados esquerdo e direito equidistantes do viewport.
Ótimo para quando você tem uma caixa de tamanho fixo [...]

Múltiplas classes CSS em um mesmo elemento

Comments 16 dAmerica/Los_Angeles November, 2005 sob CSS.

Sim, é possível, e é muito fácil. Para aplicar mais de uma classe em um elemento, basta separar os nomes com espaços, por exemplo:
PLAIN TEXT
HTML:

<span class="nome1 nome2">lorem ipsum</span>

Esticar uma caixa verticalmente com CSS

Comments 10 dAmerica/Los_Angeles November, 2005 sob CSS.

Quando você quer esticar uma caixa via CSS para ocupar todo um espaço vertical, a solução mais óbvia é fazer:
PLAIN TEXT
CSS:

.classe {

width:100%;

}

E funciona na maioria das vezes. Entretanto, quando o doctype está em modo strict, a caixa não esticará para preencher todo o espaço.
Isso acontece porque no modo strict, uma caixa tem o [...]

IFrame em CSS

Comments 26 dAmerica/Los_Angeles October, 2005 sob CSS.

Barra de rolagem em uma caixa, com CSS. Parece IFrame mas não é
Basta usar o estilo:
PLAIN TEXT
CSS:

#id{

height:50px;

width: 200px;

overflow:auto;

Por exemplo:
PLAIN TEXT
HTML:

Ipsem Lorem, com texto aleatório.

Ipsem Lorem, [...]