TutoCle é um buscador focado em encontrar material relacionado ao desenvolvimento web. Se você usa Firefox, pode incluir em seu browser um plug-in para fazer as buscas diretamente dentro do Firefox, você pode também efetuar buscas através da nuvem de tags que encontra no site, ou mediante palavras chave.
Abaixo você pode ver as várias maneiras de se usar CSS para estilizar os links da sua página:
Agora vamos ver o que cada uma delas significa:
a:link {color: #009900;}
Usado para estilizar os links da página quando não está ocorrendo nenhum evento.
a:visited {color: #999999;}
Usado para estilizar os links da página quando o mesmo já foi visitado.
a:hover {color: #333333;}
Usado para estilizar os links da página quando o usuário coloca o mouse sobre o link.
a:focus {color: #333333;}
Praticamente a mesma função que a:active, mas com uma diferença, está é para usuários que não estão usando o mouse e estão navegando através do teclado, ele tem a função de alterar a cor do link quando o usuário está “tabulando”(usando a tecla tab), para alternar entre os links da página.
a:active {color: #009900;}
Usado para estilizar os links da página enquanto o mesmo é pressionado.
Você pode estilizar os links em diferentes partes da sua página utilizando as pseudo classes, por exemplo, você pode ter diferentes cores para um menu e outras cores para os links do conteúdo do seu site:
Com isso, todos os links contidos dentro do ID content terão as condições citadas acima, mas vamos dizer que você tem um menu que quer deixar com as cores dos links diferentes do conteúdo:
Com isso, todos os links contidos dentro do ID menu terão as condições citadas acima. Você também poderia utilizar classes ao invés de ID’s.
Neste caso, nosso HTML ficaria da seguinte forma:
<a class="menu" href="" title="" rel="">Link aqui</a>
Também pode ser declarado dessa forma:
Nosso HTML ficaria assim:
<div class="menu">
<a href="" title="" rel="">Link aqui</a>
</div>
Tradução do artigo original de: CSS Basics.
Com a propriedade font podemos alterar o estilo(style), o peso(weight), o variant(mostrar o texto em maiúsculas), o tamanho(size), o line-height(altura da linha), e a própria propriedade font.
font: italic bold normal small/1.4em Verdana, sans-serif;
o código acima pode ser lido da seguinte maneira: Da esquerda pra direita, o primeiro item deixaria nosso texto em itálico, com um peso bold, o variant normal, um tamanho relativo, depois a altura da linha setada em 1.4em e a font definida como Verdana, ou se não for encontrada no sistema, sans-serif.
Aqui é onde definimos uma “família de fontes”. A 2 possíveis valores:
Se você adicionar um nome da família, é aconselhável também adicionar a família genéria em sua extremidade. Por que isso é priorizado na lista. Assim, se o usuário não tiver o nome o nome da font especificado em font-family, ele usará a mesma família genérica.
font-family: Verdana, sans-serif;
Você pode ajustar as cores do seu texto da seguinte forma:
cor: valor;
Os valores aceitos são:
Ou espaço entre as letras, pode ser ajustado da seguinte forma, deixando o valor em 0, impede que o texto justifique. Ele também aceita valores negativos.
letter-spacing: valor;
Valores aceitos:
Padding é a distância do elemento entre a borda e o seu conteúdo. As regras para margem também se aplicam ao padding, excepcionalmente o valor “auto” e valores negativos, que não podem ser declarados:
padding-top: valor;
padding-right: valor;
padding-bottom: valor;
padding-left: valor;
Você também pode declarar esses valores para padding em uma única propriedade:
padding: 10px 10px 10px 10px;
Se você for declarar o padding como acima, ele segue a seguinte ordem:
Declarando apenas um valor, ele é ajustado para todos os lados:
padding: 10px;
Declarando apenas 2 ou 3 valores, funcionaria da seguinte forma:
padding: 10px 10px; Aqui o primeiro valor ajusta o padding para top e bottom e o segundo valor para left e right.
padding: 10px 10px 10px; Aqui o primeiro valor ajusta o padding para top, o segundo para left e right e o terceiro para bottom.
Como você pode reparar no exemplo abaixo, a div container tem um padding de 20px:
#container {
width:760px;
margin:0 auto;
padding:20px;
border:1px solid #000;
background:#FFF;
}
Isso colocaria o conteúdo de container a 20px de sua borda.
Tradução do artigo original de: CSS Basics.
A propriedade margem declara a margem entre um elemento do HTML e os elementos em torno dela. A propriedade margem pode ser ajustada para o alto, direita, abaixo e a esquerda:
margin-top: valor definido pelo usuário ou auto;
margin-right: valor definido pelo usuário ou auto;
margin-bottom: valor definido pelo usuário ou auto;
margin-left: valor definido pelo usuário ou auto;
Você tem a escolha de 3 valores para a propriedade margem, que são as seguintes:
Quando estamos desenvolvendo um site, é habitual e recomendável utilizar-mos links para pular entre seções para aqueles que utilizam leitores de tela possam navegar rapidamente entre as várias seções da página sem ter que esperar que a mesma seja lida totalmente. Por exemplo, é recomendado criar-mos links que saltem do menu ao conteúdo para que o mesmo não seja lido várias vezes dentro de um mesmo site.
Esses links ficam invisíveis para aqueles que usam navegadores normais. A técnica mais usada é a propriedade display:none.
.oculto {
display:none
}
Logo, o HTML fica da seguinte forma:
<a class="oculto" href="conteudo">Ir ao conteúdo</a>
Só que existe um problema que alguns leitores de tela não lêem conteúdo oculto com essa propriedade, e outros lêem normalmente, quer dizer, o link está alí para proporcionar ajuda as pessoas e não é lido. Existe uma outra técnica para acabar com esse problema que visa garantir uma maior compatibilidade. Ao invés de display:none, usamos o seguinte:
.oculto {
position: absolute;
top: -1600px;
}
Simples, agora você tem a certeza de que o conteúdo estará disponível a todos os leitores de tela.
Spans são similares as divisões, a não ser que sejam um elemento in-line ou um elemento de bloco. Nenhuma quebra de linha é criada quando um span é declarado. Você pode por exemplo usar span para estilizar áreas específicas do seu texto, como você pode ver no exemplo abaixo:
<span class="italico">Esse texto irá ficar em itálico</span>
O CSS fica da seguinte forma:
.italico { font-style:italic; }
Tradução do artigo original de: CSS Basics.
Em um artigo anterior, eu falei como fazer o uso correto da tag alt em imagens, como vocês podem ver, é rotineiro os usuários usarem a tag alt como tooltip, mas essa não é a verdadeira função dessa tag, sua função é proporcionar um texto altenativo caso as imagens não sejam carregadas, por exemplo, os leitores de tela, eles lêem o texto do atributo para o usuário. Um outro exemplo é o Google Image Searchs, ele não faz o uso das tags meta para indexar as imagens em seu banco, ele também faz o uso das tags alt, por isso a importância de se fornecer um texto que tenha conivência com as imagens.
