| Nível básico |
| Nível médio |
| Nível avançado |
Outros guias
|
| Livro de estilo |
| Dicas e truques |
| Guia de eliminação |
| FAQ de edição |
CSS
(inglês: Cascading Style Sheets)
permite a formatação de uma página. O seu principal benefício é permitir criar, em blocos de código diferentes, a separação entre o formato e o conteúdo de um documento.
Assim, se o HTML descreve o conteúdo de um documento, o CSS configura e formata o estilo visual do documento. O CSS deve ser usada, sempre que possível, para a formatação de conteúdo não-tabular.Uso
Você pode usar o estilo CSS em elementos HTML em seu código, como faria na marcação HTML normal.
Por exemplo, o elemento <div> com uma borda verde e seu conteúdo destinado para a direita ficaria como
<div style="float:right; border:thin solid green;">
Aqui um pequeno parágrafo que<br />
contém um elemento "div"<br />
o deixando na direita.
</div>
Aqui um pequeno parágrafo que
contém um elemento "div"
o deixando na direita.
que produziria a caixa à direita. Alguns elementos do wikitexto permitem inserir estilos CSS diretamente neles. Um exemplo é a sintaxe da tabela:
{| style="estilo aqui"
|-
|seu conteúdo
|}
Classes
Uma classe é definida por class="abc". Se o estilo for de uso geral, deve ser especificado na página MediaWiki:Common.css, que se aplica a todos os usuários e todos os skins.
Por exemplo, em <span style="display:{{{1|none}}}">abc</span> exibirá "abc" diferente se o parâmetro 1 for definido, se não exibirá diferenças.
Entre uso comuns estar ocultar conteúdos em uma versão e mostrá-los em outra visualização: mobile-only faz com que o conteúdo apareça apenas para celulares e desktop-only apenas para computador.
Pode-se também evitar que o conteúdo seja capturado (se o navegador suportar CSS) usando a classe "noprint":
<div class="noprint">Isso não aparecerá no print.</div>
MediaWiki
O MediaWiki suporta a maioria dos CSS, com exceções como o atributo url(). Havia alguns bugs no suporte a CSS em versões anteriores.
Se você é um usuário registrado, pode escolher usar um tipo de visualização que já é predefinido no MediaWiki ou também pode criar um estilo exclusivo para a sua página.
Vector é o estilo padrão, você pode visualizá-lo em: MediaWiki:Vector.css. As demais skins podem ser visualizadas em suas preferências.
Wikinotícias
- Afeta a visualização na versão desktop: MediaWiki:Common.css
- Afeta a visualizações na versão móvel: MediaWiki:Mobile.css
- Afeta a visualização por skin: MediaWiki:Vector.css, MediaWiki:Monobook.css, etc.
- Afeta a visualização por grupos de usuários: MediaWiki:Group-user.css, MediaWiki:Group-autoconfirmed.css, etc.
- Afeta a visualização para fins especializados: MediaWiki:Print.css, MediaWiki:Noscript.css, MediaWiki:Filepage.css
- Para os gadgets existentes consulte Especial:Gadgets.
Nota: A edição é restrita a administradores de interface
- Para usuário
- Afeta a visualização global do usuário: meta:Special:MyPage/global.css
- Afeta a visualização local do usuário: Special:MyPage/common.css
- Afeta a visualizações local por skin: Special:MyPage/vector.css ou Special:MyPage/skin.css para sua skin atual.
Exemplos
Os títulos das seções usam o seguinte CSS padrão:
| Wiki | HTML | Estilo |
|---|---|---|
= Heading = |
<h1/> |
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
|
== Título == |
<h2/> |
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
|
=== Título === |
<h3/> |
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.2em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
|
==== Título ==== |
<h4/> |
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
|
===== Título ===== |
<h5/> |
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
|
====== Título ====== |
<h6/> |
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
|
Usos comuns de classes em projetos da Wikimedia Foundation incluem:
- firstHeading – classe da tag de título no topo de cada página;
- contentSub – o nome da wiki imediatamente abaixo do título;
- content – espaço que contém o conteúdo da página;
- p-logo – id para o logotipo, canto superior esquerdo da desktop;
- p-navigation – id para os links de navegação à esquerda da página na desktop;
- footer – rodapé.
