Classes CSS Personalizadas

Nessa página estão dispostas as classes CSS personalizadas para o Mozilla Developer Center. Se você, por algum motivo necessitar de uma classe CSS personalizada para este wiki, contate Dria.

Classes CSS Definidas

Classe Descrição
div.tip Formata um texto sobre uma dica ou informação no documento.
div.bug Formata um texto sobre algum bug no documento.
div.warning Formata um aviso no documento.
div.note Formata um nota no documento.
.float-left Cria um elemento flutuante à esquerda (geralmente uma imagem).
.float-right Cria um elemento flutuante à direita (geralmente uma imagem).
.figure Definida para uso futuro, não contém nenhuma informação de estilo atualmente.
.standard-table Estilo básico da tabela padrão.
.standard-table td.header Estilo de cabeçalho para uma tabela padrão (.standard-table).
.fullwidth-table Tabela com a largura ajustada para 100% (esta tabela é um exemplo).
.fullwidth-table td.header Estilo de cabeçalho para uma tabela com a largura ajustada para 100% (.fullwidth-table).
div.breadcrumbs Estilo para uma extensão breadcrumbs personalizada.
div.breadcrumbs a.breadcrumbs Estilo para links na extensão breadcrumbs personalizada.
div.breadcrumbs span.breadcrumbs Estilo para o título da página atual na extensão breadcrumbs personalizada.
div.side-note-left div.side-note-right Usadas para criar uma caixa à lateral de um artigo. A caixa criada terá 50% da largura de sua caixa pai (geralmente a largura do próprio artigo). Recomenda-se que você use-as de modo em que alternem entre os lados direito e esquerdo do artigo para uma melhor legibilidade.
div.highlight Destaca uma seção da página com uma borda azul de 3 pixels de largura no lado esquerdo.
.highlightred Muda a cor do texto para vermelho.
.highlightblue Muda a cor do texto para azul.
.highlightgreen Muda a cor do texto para verde.

Exemplos

Destacando partes do código

Frequentemente necessitamos chamar a atenção a determinadas partes do código. Isto é possível com o uso do elemento span, utilizando também a facilidade do código indentado em ao menos um espaço construída no MediaWiki. Note que o uso do elemento span dentro de blocos <pre> não é útil porque o parser do MediaWiki ignora os elementos e simplesmente exibe-os como parte do código.

<span class="highlightred">isto não funciona</span>

Em vez disso, indente a parte do código onde deseja usar o destaque, e insira os elementos span. Note que você também deve indentar as linhas em branco no bloco de código. Se não houver nenhum espaço no começo de uma linha em branco, o parser fechará o bloco de código e reabri-lo-á na próxima linha do código indentado.

aqui está um exemplo de
   um bloco de código com uma linha em branco
   esta não é indentada.

Observa-se claramente que o exemplo acima está incorreto. Abaixo um exemplo de como fazer:

aqui está um exemplo de
   um bloco de código com uma linha em branco

   esta é indentada.

 

table.standard-table

cabeçalho da tabela 1 cabeçalho da tabela 2
Este é um exemplo de: table.standard-table

table.fullwidth-table

cabeçalho da tabela 1 cabeçalho da tabela 2
Este é um exemplo de: table.fullwidth-table

Divs

Dicas

Use div class="tip" para formatar dicas:

Isto é uma dica.
Erros

Use div class="bug" para fazer referência a erros conhecidos, com um link para uma entrada relevante do bugzilla:

Avisos

Use div class="warning" para destacar avisos na documentação.

Este é um aviso.
Notas

Use div class="note" para destacar notas na documentação.

Esta é uma nota. Não é uma nota muito interessante.
Destaque da Seção

Exemplo de div class="highlight":

Este é um exemplo de seção destacada com CSS. Use isto para chamar a atenção em determinadas partes do código. Isto foi adicionado inicialmente no Tutorial XUL.

um exemplo de uma
   seção pré-formatada
   dentro de um
      div destacado

Etiquetas do documento e colaboradores

Etiquetas: 
Contributors to this page: fscholz, Leandro Mercês Xavier
Última atualização por: fscholz,