Seletores Complexos do CSS

Complementando o post anterior hoje falarei como os seletores complexos mostram como a CSS pode ser dinâmica e direta.

Os seletores complexos foram feitos para suprir necessidades muito específicas do layout. Aqui está uma lista com os mais comuns e usados seletores:

input[type="text"] - Seleciona o elemento INPUT com o atributo TYPE cujo valor seja exatamente o valor TEXT

a[title] -  Seleciona o elemento a que contenha o atributo type não importando o valor.

a[href$=html] -  Seleciona elementos com atributos cujo seu valor temine com o valor informado.  Por exemplo, você pode selecionar todos os links que apotam para um arquivo .pdf, ou .php etc.

a[href^="http://alinebossi.wordpress.com/"] – Seleciona elementos com o atributos que comecem com o valor informado. Você pode selecionar apenas os links que apontem para um site específico, por exemplo.

a[title~="alinebossi"]- Seleciona os elementos cujo o atributo tenha um valor que seja separado por espaços. Neste exemplo ele seleciona um link que contenha o atributo title e que em seu valor tenha a palavra “alinebossi” no meio.

a[hreflang|="pt"] – Seleciona o elemento a cujo o valor do atributo hreflang comece com PT. Ou seja valores como “pt-br” serão encontrados.

a[href="http://alinebossi.wordpress.com/"]  – Seleciona o elemento a cujo o valor do atributo href seja exatamente http://alinebossi.wordpress.com/.

a[title*="artigo"]  – Seleciona os elementos a cujo o valor tenha pelo menos uma ocorrência com a palavra “artigo”.

OBS: Infelizmente, os novos browser  não suportam estar novas funcionalidades.

 

Consulte aqui a lista completa dos seletores

 

Fontes: http://www.tableless.com.br e http://www.w3.org/

 

Customizando links

Olá pessoal, como estou um pouco sem tempo para escrever artigos e não quero deixar vocês sem novidades conforme leio coisas interessantes posto aqui no blog. Hoje li um artigo muito bom e simples sobre Customização de links no seu site, algo que pode ser rápido e útil para o seu visitante.

Além do aspecto visual, customizar links é importante por causa da Acessibilidade. Não estou falando aqui da acessibilidade para pessoas cegas e etc, estou falando de acessibilidade para pessoas que enxergam também. Eu gosto muito de usar o browser sem a barra de status. O problema de se fazer isso é que eu nunca sei para onde um link vai. Quando estou lendo um texto e há um link interessante, quase nunca tenho a indicação de que aquele link vai me levar para fora do site, ou vai me levar para o download arquivo e etc… Por isso é interessante que você, se puder, indique ao leitor qual o tipo de link ele está prestes a clicar. Abaixo dou algumas dicas de seletores complexos que podem te ajudar com este trabalho.

Os seletores complexos são uma ferramenta fascinante. Os seletores complexos pinçam aqueles elementos difíceis, no meio da estrutura HTML, sem identificação de classes ou IDs.

O nosso problema aqui é selecionar links cujo os endereços podem variar, levando o usuário para uma página externa ou um arquivo. Os seletores complexos ajudarão a selecionar estes links sem a ajuda de classes ou IDs extras. Veja os exemplos abaixo e divirta-se:

Para formatar um link que leva para um PDF, por exemplo veja o HTML:

<a href="arquivo.pdf">Arquivo PDF</a> 

O CSS ficaria assim:

a[href $='.pdf'] { 
   padding-left: 18px;
   background: transparent url(icopdf.gif) no-repeat center left;
} 

O resultado: link de arquivo PDF

O código acima aplica o estilo nos links onde o valor do HREF terminam com .PDF.
Seguindo a mesma dinâmica:

a[href ^="mailto:"] {
   padding-left: 18px;
   background: transparent url(icomailto.gif) no-repeat center left;
} 

Neste exemplo customizamos os links cujo valor do HREF comece com MAILTO.

Exemplo: Contato  

 

Fonte: http://www.tableless.com.br

Apostila básica de HTML + CSS

Galera, sei que tem muita gente iniciando  e ainda tem dúvidas com o básico do HTML, por isso procurei uma apostila para indicar a vocês e encotrei esta aqui:

 

http://academicos.cefetmg.br/admin/downloads/2068/Apostila_de_html.pdf

Abraços