MDC:Classes CSS Personalizadas
De MDC
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.
Tabela de conteúdo |
[editar] 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. |
[editar] Exemplos
[editar] 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.
[editar] Breadcrumbs
- Veja também Firefox 1.5 para Desenvolvedores para um exemplo de página com breadcrumbs.
[editar] table.standard-table
| cabeçalho da tabela 1 | cabeçalho da tabela 2 |
|---|---|
| Este é um exemplo de: | table.standard-table |
[editar] table.fullwidth-table
| cabeçalho da tabela 1 | cabeçalho da tabela 2 |
|---|---|
| Este é um exemplo de: | table.fullwidth-table |
[editar] Divs
[editar] Dicas
Use div class="tip" para formatar dicas:
[editar] Erros
Use div class="bug" para fazer referência a erros conhecidos, com um link para uma entrada relevante do bugzilla:
[editar] Avisos
Use div class="warning" para destacar avisos na documentação.
[editar] Notas
Use div class="note" para destacar notas na documentação.
[editar] 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