O estilo display
Block level element - um exemplo deste tipo de elemento é o cabeçalho (heading, <h1>, <h2>, <h3>, etc.). Este elemento ocupa todo o espaço horizontal do objeto em que reside, por default. Logo, se a este elemento for aplicada uma propriedade background-color, ela será aplicada a todo o bloco horizontal que contém o cabeçalho. Por default, o estilo display destes elementos é igual a block.
Cabeçalho <h5> com background-color: #f6f
Mesmo cabeçalho, agora com o estilo display: inline
Aparentemente, nenhum estilo padding ou margin do elemento surte efeito quando display: inline é utilizado. Isso corresponde à idéia de 'dentro da linha' que a palavra inline implica.
Se para o estilo display for atribuído o valor none, o elemento não é mostrado, e o espaço que ele normalmente ocuparia é colapsado (excluído da visualização). Isto diferencia o estilo display: none de visibility: hidden, comumente usado para esconder o elemento, preservando o espaço que ele normalmente ocuparia se estivesse visível.
Seletores CSS
Universal Selector
* {color: red}
Um estilo sem seletor (definido apenas pelo apóstrofo *) se aplica a todos os elementos de todos os tipos na página.
Element Selector
body {color: black; background-color: white}
É o seletor mais comum, pois se aplica a apenas um tipo de elemento HTML, sem qualificadores ou extensões.
Class Selector
.special {font-family: verdana, arial, sans-serif}
p.exclusive {font-family: verdana, arial, sans-serif}
Para definir uma
classe basta acrescentar um ponto diante do seu nome. Não é permitido espaço entre o ponto e o nome da classe.
No primeiro exemplo acima, não há elemento HTML associado à classe
special, logo a classe pode ser associada a qualquer elemento HTML da página.
Já a classe do segundo exemplo (
exclusive) se aplica apenas ao elemento de parágrafo (
<p>), e não tem efeito algum se usada com qualquer outro elemento da página.
Um elemento HTML pode pertencer a múltiplas classes se desejado, como mostrado no exemplo abaixo:
<p class="special exciting">Paragraph with 2 classes!</p>
ID Selector
#unique {font-size: 10px}
Este seletor é identificado pelo uso do caracter
#, e sobrescreve quaisquer estilos definidos através do uso de uma classe. Os
IDs são únicos no documento, não sendo permitido mais do que um elemento HTML com a mesma identificação de ID.
-------- Todos os seletores abaixo referem-se à especificação CSS2 --------
Pseudo-Element Selector
p:first-letter {font-face: Gothic, serif; font-size: 250%; float: left}
O seletor "
pseudo-element" é único dentro da especificação CSS, já que ele não possui elemento ou atributo equivalente em HTML. A especificação CSS define apenas
três destes seletores:
- first-letter refere-se à primeira letra do elemento espeficado, sendo geralmente usado com tags de parágrafo (<p>).
- first-line refere-se à primeira sentença do elemento (ou seria à primeira linha mostrada pelo browser, que é alterada sempre que o usuário redimensiona a sua janela de visualização?).
- first-child refere-se ao primeiro elemento descendente do elemento ao qual é aplicado, de acordo com a hierarquia do documento HTML.
Pseudo-Class Selector
a:hover {color: #fc0}
a:visited {color: blue}
div.code:hover {background-color: #000}
Um seletor "
pseudo-class" aplica-se a todo o elemento em que é declarado, mas apenas sob certas condições. O usuário deve interagir com o elemento para que ele seja afetado pelos estilos definidos pela "pseudo-classe".
Além das duas pseudo-classes mostradas, a especificação CSS2 define ainda
:active,
:focus,
:link e
:lang().
O primeiro exemplo acima (
:hover) faz com que todas as âncoras
<a> recebam o estilo
color: #fc0 quando o
mouse desliza por cima do elemento.
O segundo exemplo (
:visited) altera a cor de todas as âncoras
<a> visitadas para o azul.
O terceiro exemplo aplica uma pseudo-classe à classe
code exclusiva aos elementos
<div>.
Importante: o Internet Explorer 6 suporta apenas pseudo-classes de âncoras, e o terceiro exemplo não funciona neste browser especificamente.
Descendant Selector
li em {font-size: 16px; color: green}
Um "
descendant selector" restringe a aplicabilidade dos estilos selecionados aos descendentes do elemento primário declarado. São usados espaços para separar os tipos de elementos concatenados.
No exemplo, todos os elementos de ênfase (
<em>) que estiverem dentro de um item de uma lista (
<li>) recebem fontes de 16 pixels e cor verde.
Parent-Child Selector
body > p {font-weight: bold}
Um "
parent-child selector" faz com que uma regra de estilo se aplique a
tags que obedecem uma seqüência específica de hierarquia entre elementos pais e filhos, num caso especial de "
descendant selector".
No exemplo, todas as
tags <p> que forem
descendentes imediatas do elemento
<body> recebem caracteres em negrito. Este estilo não se aplicará a nenhum elemento
<p> que estiver inserido dentro de
tags <div> ou
<table>, por exemplo, muito embora estas
tags estejam dentro de
<body>.
Adjacent Selector
h1 + h2 {margin-top: 15px}
Adjacência se refere à seqüência em que elementos aparecem num documento HTML. No caso deste seletor, é a colocação dos elementos no documento que interessa, e não as suas relações hierárquicas.
No exemplo, o elemento
<h2> colocado exatamente após um elemento
<h1> é quem vai receber uma margem adicional de 11 pixels. Qualquer elemento
<h2> subseqüente não receberá estilo algum. Um elemento
<h2> que viesse depois de uma
tag <p> localizada abaixo de um cabeçalho
<h1> também não seria afetado.
Attribute Selectors
Depois eu escrevo sobre estes, são um pouco complicados e quase nunca usados (principalmente devido à incompatibilidade com o IE).