Inércia Sensorial

16 de April de 2007

Estilo de listas com CSS

Filed under: CSS — inerte @ 01:09

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
    1. none
    2. URL: url(diretorio/imagem.extensao)
  • list-style-position
    1. outside: marcador desalinhado do texto
    2. inside: marcador alinhado com texto
  • list-style-type
    1. none: sem marcador
    2. disc: círculo (bola pintada)
    3. circle: circunferência (bola vazia)
    4. square: quadrado pintadi
    5. lower-alpha: letra minúscula a, b, c, d, …
    6. upper-alpha: letra maiúscula A, B, C, D, …
    7. decimal: números 1, 2, 3, 4, …
    8. decimal-leading-zero
    9. lower-roman: romano minúsculo i, ii, iii, iv, …
    10. upper-roman: romano maiúsculo I, II, III, IV, …

13 de April de 2007

Declaração de CSS na página

Filed under: CSS — inerte @ 16:53

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:

[html]

[/html]

18 de February de 2006

Layout de duas colunas com CSS

Filed under: CSS — inerte @ 11:21

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:

[html]

Esse div ficará do lado direito.

[/html]

Para identificá-los com mais facilidade, vamos dar cores ao código:

[css]#menu {
border:2px solid red;
}

#conteudo {
border:2px dashed green;
}[/css]

Agora, vamos jogar nossa caixa “menu” para a esquerda. Pense como se ela estivesse “flutuando” no layout, pois é assim que se chama a propriedade:

(more…)

16 de February de 2006

Caixas CSS centralizadas

Filed under: CSS — inerte @ 08:54

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 e deseja dar um alto destaque, ou harmonizá-la, na página.

[css]#css_id {
width:450px;
margin:0px auto;
}[/css]

É só isso mesmo 🙂

16 de November de 2005

Múltiplas classes CSS em um mesmo elemento

Filed under: CSS — inerte @ 20:49

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:

[html]lorem ipsum[/html]

10 de November de 2005

Esticar uma caixa verticalmente com CSS

Filed under: CSS — inerte @ 16:55

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

[css].classe {
width:100%;
}[/css]

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 tamanho do conteúdo dela. Para deixá-la ocupar todo o espaço disponível, a “caixa-pai”, ou a que contém a caixa que precisamos esticar, também deve ter height:100%.

Quando nossa caixa está dentro de um <td>, ou <div>, é fácil, basta colocar na caixa-pai o estilo. Mas quando ela está dentro do <body>, é essa tag que deve receber o height:100%, pois o <body> é também uma “caixa”.

[css]body {
height:100%;
}[/css]

E pronto! Esteja dentro do <body> ou dos tipos mais comuns de caixas, você pode esticá-la para ocupar todo o espaço disponível na tela.

26 de October de 2005

IFrame em CSS

Filed under: CSS — inerte @ 13:21

Barra de rolagem em uma caixa, com CSS. Parece IFrame mas não é 🙂

Basta usar o estilo:

1
2
3
4
#id{
height:50px;
width: 200px;
overflow:auto;

Por exemplo:

1
2
3
4
5
6
7
8
9
<div style="height:50px;width: 200px;overflow:auto;">
Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório. 
Ipsem Lorem, com texto aleatório. 
Ipsem Lorem, com texto aleatório. 
Ipsem Lorem, com texto aleatório. 
Ipsem Lorem, com texto aleatório. 
Ipsem Lorem, com texto aleatório.
</div>

Resultado final:

Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório.
Ipsem Lorem, com texto aleatório.

E você pode trocar a unidade pixel no width pela porcentagem.

Powered by WordPress