CSS - Links é Agrupamentos

[Jamers Rodrigues 43]

#Links

Você pode aplicar aos links tudo que aprendeu nas lições anteriores (i.e. mudar cores, fontes, sublinhados, etc). A novidade aqui é que você pode definir as propriedades de maneira diferenciada de acordo com o estado do link ou seja visitado, não visitado, ativo ou com o ponteiro do mouse sobre o link. Isto possibilita adicionar interessantes efeitos ao seu website. Para estilizar estes efeitos você usará as chamadas pseudo-classes.

O que é pseudo-classe?

Uma pseudo-classe permite estilizar levando em conta condições diferentes ou eventos ao definir uma propriedade de estilo para uma tag HTML.

Vamos ver um exemplo. Como você já sabe, links são marcados no HTML com tags <a>. Podemos então usar a como um seletor CSS:

a {

color: blue;

}

Um link pode ter diferentes estados. Por exemplo, pode ter sido visitado ou não visitado. Você usará pseudo-classes para estilizar links visitados e não visitados.

a:link {

color: blue;

}


a:visited {

color: red;

}

Use as pseudo-classes a:link e a:visited para estilizar links não visitados e visitados respectivamente. Links ativos são estilizados com a pseudo-classe a:active e a:hover, esta última é a pseudo-classe para links com o ponteiro do mouse sobre ele. A seguir explicaremos com mais detalhes e exemplificação, as quatro pseudo-classes. Pseudo-classe: link A pseudo-classe :link é usada para links não visitados. No exemplo a seguir links não vistados serão na cor verde.

a:link {

color: green;

}





Pseudo-classe: visited

A pseudo-clases :visited é usada para links visitados. No exemplo a seguir links visitados serão na cor amarela:

a:visited {

color: yellow;

}




Pseudo-classe: active

A pseudo-classe :active é usada para links ativos. No exemplo a seguir links ativos terão seu fundo na cor vermelha:

a:active {

background-color: red;

}





Pseudo-classe: hover

A pseudo-classe :hover é usada para quando o ponteiro do mouse está sobre o link. Isto pode ser usado para conseguir efeitos bem interessantes. Por exemplo, podemos mudar a cor do link para laranja e o texto para itálico quando o ponteiro do mouse passa sobre ele, o código CSS para estes efeitos é o mostrado a seguir:

a:hover {

color: orange;

font-style: italic;

}

Exemplo 1: Efeito quando o ponteiro está sobre o link É comum a criação de efeitos diferentes quando o ponteiro está sobre o link. Veremos a seguir alguns exemplos extras de estilização da pseudo-classe :hover. Exemplo 1a: Espaçamento entre as letras Como você deve estar lembrado da lição 5, o espaçamento entre as letras de um texto pode ser controlado pela propriedade letter-spacing. Isto pode ser aplicado aos links para obter um efeito interessante:

a:hover {

letter-spacing: 10px;

font-weight:bold;

color:red;

}

Exemplo 1b: UPPERCASE e lowercase Na lição 5 vimos a propriedade text-transform, para estilizar com letras maiúsculas e minúsculas. Isto pode ser usado para estilizar links:

a:hover {

text-transform: uppercase;

font-weight:bold;

color:blue;

background-color:yellow;

}

Os exemplos mostrados dão uma idéia das inúmeras possibilidades de combinação de diferentes propriedades. Você pode criar seus próprios efeitos — faça uma tentativa! Exemplo 2: Removendo sublinhado dos links Uma pergunta comum: Como remover o sublinhado dos links? Você deve estudar com muito cuidado a necessidade de retirar o sublinhado dos links, pois isto poderá reduzir signifcativamente a usabilidade do website. As pessoas estão acostumadas com links na cor azul e sublinhados e sabem que ali há um texto a ser clicado. Até minha mãe sabe disto! Se você muda a cor e retira o sublinhado dos links, poderá confundir seus visitantes e em conseqüência não retirar o máximo dos conteúdos do seu website. Feita esta ressalva, é muito fácil retirar o sublinhado dos links. Conforme explicado na lição 5, a propriedade text-decoration pode ser usada para definir se o texto é ou não sublinhado. Para remover o sublinhado, basta definir o valor none para a propriedade text-decoration.

a {

text-decoration:none;

}

Alternativamante, você pode definir text-decoration juntamente com outras propriedades para as quatro pseudo-classes.


a:link {

color: blue;

text-decoration:none;}

a:visited {

color: purple;

text-decoration:none;

}a:active {

background-color: yellow;

text-decoration:none;

}

a:hover {

color:red;

text-decoration:none;

}

#agrupamentos

Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são freqüentemente usados em conjunto com os atributos class e id. Nesta lição veremos com detalhes o uso dos elementos HTML <span> e <div> no que se refere a sua vital importância para as CSS. Agrupando com <span> Agrupando com<div> Agrupando com <span> O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a partes específicas do texto no seu documento. Um exemplo deste uso é mostrado na citação abaixo de autoria de Benjamin Franklin:

<p>Dormir cedo e acordar cedo faz o homem

saudável, rico e sábio.</p>

Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados por Mr. Franklin pelo fato de não se passar o dia dormindo. Para isto marcamos os benefícios com <span>. A cada span atribuímos uma class, e estilizamos na folha de estilos:

<p>Dormir cedo e acordar cedo faz o homem

<span class="benefit">saudável</span>,

<span class="benefit">rico</span>

e <span class="benefit">sábio</span>.</p>

A folha de estilos:

span.benefit {

color:red;

}

Ver exemplo É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar lembrado, deverá usar uma única id para cada um os três elementos <span>, conforme foi explicado na lição anterior. Agrupando com <div> Enquanto <span> é usado dentro de um elemento nível de bloco como vimos no exemplo anterior, <div> é usado para agrupar um ou mais elementos nível de bloco. Diferenças à parte, o agrupamento com <div> funciona mais ou menos da mesma maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos agrupados segundo suas filiações políticas:

<div id="democrats">

<ul>

<li>Franklin D. Roosevelt</li>

<li>Harry S. Truman</li>

<li>John F. Kennedy</li>

<li>Lyndon B. Johnson</li>

<li>Jimmy Carter</li>

<li>Bill Clinton</li>

</ul>

</div>


<div id="republicans">

<ul>

<li>Dwight D. Eisenhower</li>

<li>Richard Nixon</li>

<li>Gerald Ford</li>

<li>Ronald Reagan</li>

<li>George Bush</li>

<li>George W. Bush</li>

</ul>

</div>

E na folha de estilos, podemos agrupar a estilização da mesma maneira como fizemos no exemplo acima:

#democrats {

background:blue;

}


#republicans {

background:red;

}

Ver exemplo

Nos exemplos mostrados acima usamos somente <div> e <span> para simples estilizações, tais como cores de textos e de fundos. Contudos estes dois elementos possibilitam estilizações bem mais avançadas como veremos adiante nas lições deste tutorial.

Creditos:

Majour

Jamerson

Tec

ZonaXGames