Sem categoria

Noções básicas sobre CSS

CSS, ou folhas de estilos em cascata, é uma forma de aplicar regras de estilo ao conteúdo HTML. Esta página abordará alguns conceitos básicos sobre CSS, como seletores e ordenação.

Você poderá adicionar CSS personalizado em Meus Sites → Aparência → Editar CSS no seu Painel do WordPress.com se tiver o plano WordPress.com Premium, Negócios ou eCommerce.

Sumário

Seletores
A ordem é importante
Dicas de teste
Recursos adicionais

Seletores

Os seletores são usados para definir qual HTML estilizar. As propriedades e os valores são usados para definir as regras de estilo.

Seletores CSS

Existem três tipos de seletores:

TagUma tag HTML, como h1 ou p.
ClasseUm atributo aplicado a um ou mais elementos, como <p class=”class-name”>Texto de Exemplo.</p>. É mostrado no CSS com um “.” antes dele.
IDUm atributo de um elemento único que só é usado uma vez, como <section id=”intro”>. É mostrado no CSS com um “#” antes dele.

Veja a seguir alguns exemplos.

Seletor de tags HTML:

<p>Parágrafo de exemplo.</p>

Seletor CSS de tags HTML:

p { color: red; font-size: 200%; }

Veja o seletor de tags HTML em ação, com texto em vermelho e tamanho de fonte de 200%:

Parágrafo de exemplo.

Seletores HTML de classe e ID:

<p class="warning">Este é um parágrafo com classe "warning".</p>
<p class="danger">Este é um parágrafo com ID "danger".</p>

Seletores CSS de classe e ID:

.warning { background-color: #ccf; } 
#danger { background-color: #fcc; }

Veja a seguir esses seletores de classe e ID em ação:

Este é um parágrafo com classe “warning”.

Este é um parágrafo com ID “danger”.

Você pode adicionar suas próprias classes CSS aos elementos no site usando a funcionalidade Classes CSS adicionais no editor do WordPress.


↑ Tabela de Conteúdo ↑

A ordem é importante

A “cascata” no CSS define como um navegador determina quais regras de estilo serão aplicadas. Cada estilo é aplicado de acordo com a importância do seletor, a especificidade dele e a ordem do CSS.

Os seletores de ID são mais importantes que os seletores de classe, e os seletores de classe são mais importantes que os seletores de tags HTML. Portanto, no exemplo a seguir, o parágrafo terá a cor vermelha porque o seletor de ID é o mais importante.

#danger { color: red; }
.warning { color: orange; }
p { color: green; }

Você pode sobrepor a importância adicionando “!important” ao valor, mas isso não é recomendado a menos que seja absolutamente necessário, porque se você incluir muitas regras !important, a edição e a depuração poderão ficar muito confusas em um piscar de olhos.

#danger { color: red; }
.warning { color: orange; }
p { color: green !important; }

Os seletores mais específicos são aplicados antes dos menos específicos. Os elementos HTML são os mais internos e os mais específicos.

<p>Este é um <strong><em>bom</em></strong>parágrafo de exemplo.</p>

A tag em é mais próxima ao HTML interno do que a tag strong, então a regra de em será usada:

strong { color: limegreen; }
em { color: tomato; }

Mas se você usar um seletor mais específico, como “p strong em“, ele será usado porque é mais específico do que apenas um seletor de tipo, como em.

p strong em { color: limegreen; }
em { color: tomato; }

Por fim, a ordem das regras é importante. Se a mesma regra aparece mais de uma vez, a última é utilizada. No exemplo a seguir, somente a última regra será aplicada, e o editor de CSS do WordPress.com removerá as duas primeiras duplicatas.

p { color: indigo; }
p { color: aqua; }
p { color: teal; }

↑ Tabela de Conteúdo ↑

Dicas de teste

Para ver como é o seu tema sem nenhum CSS de tema aplicado, vá para Meus Sites → Aparência → CSS adicional, remova temporariamente tudo do editor e selecione Não utilizar o CSS original do tema. Você verá uma página da Web somente em HTML, sem estilo. Isso dará uma ideia da estrutura HTML do tema atual. Não salve as mudanças se você quiser apenas visualizar a estrutura básica. A opção de começar do zero e substituir o CSS de tema é uma opção avançada que pode ser usada para remodelar completamente qualquer tema do WordPress.com com CSS.


↑ Tabela de Conteúdo ↑

Recursos adicionais

Agora que você conhece o CSS, pode começar a usar esse recurso no WordPress.com! Para saber mais sobre as opções e configurações de edição de CSS no WordPress.com, acesse a página sobre edição de CSS. Se você tiver perguntas específicas sobre o CSS, também podemos fornecer suporte por chat ao vivo para CSS.

Você também pode conferir estes outros recursos fantásticos de CSS:

Os nomes de cores usados nos exemplos acima são de uma lista de cores X11 aceitas por navegadores conhecidos com a adição das variantes de cinza do SVG 1.0. Você também pode ver uma lista de palavras-chave de cores básicas nessa mesma página.