Category Archives: CSS

Estilo de listas com 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 […]

Declaração de CSS na página

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]

Layout de duas colunas com 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 […]

Caixas CSS centralizadas

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 […]

Múltiplas classes CSS em um mesmo elemento

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]

Esticar uma caixa verticalmente com CSS

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 […]

IFrame em CSS

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;#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 […]