Saltar para o conteúdo

Ajuda:Tutorial/CSS

Fonte: Wikinotícias
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

Nota: A edição é restrita a administradores de interface

Para usuário

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é.

Ver também

Outros projetos Wikimedia também contêm material sobre este tema:
Wikipedia Artigos na Wikipedia