Pesquisar na Comunidade

É um prazer! Meu Interesse aqui é de adquirir conhecimento tanto na área de programação front-end (onde tenho mais afinidade) e nas outras modalidades e em jogos (truques,macete e dicas de como ajudar a todos)!

Introdução O Módulo das CSS3 denominado “Selectors Level 3” atingiu, em 29 de setembro de 2011, o status de Recomendação do W3C. Essa Recomendação descreve os seletores já existentes nas CSS1 e CSS2 e cria novos seletores para as CSS3. Seletores são “padrões” ou “modelos” que casam com os elementos de uma árvore do documento e portanto podem ser usados para selecionar os nós de um documento XML. Seletores foram otimizados para serem usados com as linguagens de marcação HTML e XML. CSS (Cascading Style Sheets) é uma linguagem para descrever a renderização de documentos HTML e XML em uma tela, em papel, em sintetizadores de voz, etc. As CSS usam seletores para atrelar propriedades de estilização aos elementos de um documento. Criei versões HTML, PNG e SVG desta tabela otimizadas para impressão. Que tal imprimir a tabela e tê-la na sua mesa de trabalho para uma referência e consulta rápida? — versão HTML para impressão desta tabela (link abre em nova janela) — versão PNG para impressão desta tabela (link abre em nova janela) — versão SVG com personalização de cores para impressão desta tabela (link abre em nova janela). Vamos estudar a seguir cada um dos seletores constantes da tabela. Incorporamos nesta página, para cada um dos seletores estudados, com uso de IFRAME para o JSFiddle, exemplos que demonstram o efeito de estilização. Você poderá complementar seus estudos clicando o link existente no canto superior direito do IFRAME e editando os códigos dos exemplos de modo interativo. Seletor universal ♦ Casa com qualquer elementoOs conteúdos de cada um dos elementos da marcação, ao serem renderizados em um navegador, são estilizados com regras CSS mínimas (por exemplo: cor e tipo de fonte, margens, paddings, etc.) que fazem parte de uma folha de estilos nativa do navegador e que na ordem de cascata tem a prioridade mais baixa, ou seja, qualquer declaração de estilo do autor ou usuário sobrescreve a folha de estilos nativa. Não existe uma padronização para essa folha de estilos e cada navegador implementa sua própria folha de estilos nativa. Como consequência ocorrem inconsistências de renderização, em relação a estilização básica, entre navegadores. Destas inconsistências a que produz maiores transtornos é a não padronização dos valores para as propriedades margin e padding. A principal utilização do seletor universal é “zerar” essas propriedades para todos os elementos da marcação. Como consequência o autor terá que definir explicitamente para cada elemento, na sua folha de estilos, aqueles valores. * { margin: 0; padding: 0; } O seletor universal quando declarado de forma contextual pode produzir resultados interessantes. Observe os exemplos a seguir: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor tipo ♦ Casa com elementos de um determinado tipoSintaxe: E Usado para estilizar os elementos da marcação que são de um mesmo tipo; por exemplo: elemento do tipo p(parágrafo), do tipo div, do tipo ol, do tipo strong, e assim por diante. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletores de atributo ♦ Casam com elementos cujo atributo satisfaçam determinadas condições presença de um atributo ♦ Casa com elementos que contenham um determinado atributoSintaxe: E["foo"] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo ♦ Casa com elementos com determinado valor de atributoSintaxe: E[foo=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo pertence a uma lista de valores separados por espaço ♦ Casa com elementos cujo valor de atributo pertença a uma lista de valores separados por espaçoSintaxe: E[foo~=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo começa com string ♦ Casa com elementos cujo valor de atributo começa com uma determinada stringSintaxe: E[foo^=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) valor de um atributo termina com string ♦ Casa com elementos cujo valor de atributo termina com uma determinada stringSintaxe: E[foo$=bar] Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletores do tipo pseudo-classe elemento raiz ♦ Casa com o elemento raiz do documentoSintaxe: :root Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Nesse exemplo a cor dos elementos é herdada do elemento raiz. enésimo filho ♦ Casa com o elemento que é o enésimo filho do seu elemento paiSintaxe: E:nth-child(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo filho de trás para frente ♦ Casa com o elemento que é o enésimo filho do seu elemento pai, contado de trás para frente na marcaçãoSintaxe: E:nth-last-child(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo irmão do seu tipo ♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipoSintaxe: E:nth-of-type(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) enésimo irmão do seu tipo de trás para frente ♦ Casa com o elemento que é o enésimo irmão (filhos do mesmo elemento pai) do seu tipo, contado de trás para frente na marcaçãoSintaxe: E:nth-last-of-type(n) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeiro filho ♦ Casa com o elemento que é o primeiro filho do seu elemento paiSintaxe: E:first-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) último filho ♦ Casa com o elemento que é o último filho do seu elemento paiSintaxe: E:last-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeiro do mesmo tipo ♦ Casa com o elemento que é o primeiro irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:first-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) último do mesmo tipo ♦ Casa com o elemento que é o último irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:last-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) único filho ♦ Casa com o elemento que é o único filho do seu elemento paiSintaxe: E:eek:nly-child Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) único irmão ♦ Casa com o elemento que é o único irmão (filhos do mesmo elemento pai) do mesmo tipoSintaxe: E:eek:nly-of-type Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) elemento vazio ♦ Casa com o elemento que não tem filhos (inclusive filhos do tipo nós de texto)Sintaxe: E:empty Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) link ♦ Casa com o elemento que é um link não visitadoSintaxe: a:link Exemplo: <a href="[Hidden Content] do Maujor<</a> a:link { color: red; text-decoration: none; } link visitado ♦ Casa com o elemento que é um link que já foi visitadoSintaxe: a:visited Exemplo: <a href="[Hidden Content] do Maujor<</a> a:visited { color: orange; text-decoration: underline; } ativo ♦ Casa com o elemento que por ação do usuário foi tornado ativoSintaxe: a:active Exemplo: <a href="[Hidden Content] do Maujor<</a> :active { outline: 1px solid pink; } sobre ♦ Casa com o elemento que, por ação do usuário, teve um dispositivo apontador colocado sobre eleSintaxe: a:hover Exemplo: <a href="[Hidden Content] do Maujor<</a> a:hover { color: green; background: black; } foco ♦ Casa com o elemento que por ação do usuário a ele foi dado o focoSintaxe: E:focus Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Não existe uma padronização relacionando os elementos HTML que podem receber foco. Mas, em geral são eles: Elemento a Elemento area com atributo href Elemento input Elemento select Elemento textarea Elemento button (não desabilitado) Elemento iframe Elemento a Qualquer elemento com o atributo tabindex alvo ♦ Casa com o elemento que é o alvo do fragmento identificador de um linkSintaxe: E:target Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) idioma ♦ Casa com o elemento que foi marcado em determinado idiomaSintaxe: E:lang Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) habilitado ou desabilitado ♦ Casa com o elemento da interface de usuário que seja habilitado ou desabilitadoSintaxe: E:enabled e E:disabled Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) marcado ♦ Casa com o elemento da interface de usuário que tenha sido marcadoSintaxe: E:checked Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) primeira linha ♦ Casa com a primeira linha do texto formatado de um elementoSintaxe: E:first-line — até as CSS2.1 E::first-line — modificada peals CSS3 As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Notas: 1 – Esse seletor aplica-se somente a elementos nível de bloco 2 – Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor propriedades para fontes propriedades para cores propriedades para background word-spacing letter-spacing text-decoration vertical-align text-transform text-shadow line-height clear primeira letra ♦ Casa com a primeira letra do texto formatado de um elementoSintaxe: E:first-letter — até as CSS2.1 E::first-letter — modificada pelas CSS3 As CSS3 modificaram a sintaxe para esse seletor. Os navegadores antigos não suportam a nova sintaxe e o modernos suportam as duas sintaxes. Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Notas: 1 – Esse seletor aplica-se somente a elementos nível de bloco 2 – Somente às propriedades listadas a seguir podem ser estilizadas por esse seletor propriedades para fontes propriedades para cores propriedades para background propriedades para margens propriedades para padding propriedades para bordas text-decoration vertical-align (para elementos não flutuados) text-transform text-shadow line-height float clear conteúdo antes ♦ Casa com o conteúdo gerado antes de um elementoSintaxe: E::before Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) conteúdo depois ♦ Casa com o conteúdo gerado depois de um elementoSintaxe: E:after Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) negação ♦ Casa com o elemento que não casa com determinado seletor simples seletorSintaxe: E:not(seletor) Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor classe ♦ Casa com o elemento que tem determinado valor para o atributo classeSintaxe: E.foo Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor ID ♦ Casa com o elemento que tem determinado valor para o atributo idSintaxe: E#foo Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor descendente ♦ Casa com o elemento que descende de determinado elementoSintaxe: E F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor filho ♦ Casa com o elemento filho de determinado elementoSintaxe: E>F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor que imediatamente sucede ♦ Casa com o elemento irmão que imediatamente segue-se a determinado elementoSintaxe: E+F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) Seletor que sucede ♦ Casa com o elemento irmão que segue-se a determinado elementoSintaxe: E~F Exemplo: Ver no jsFiddle um exemplo interativo (abre em nova janela) O IE outra vez! :( Os seletores CSS3 são suportados pelos navegadores modernos. Para servir os seletores das CSS3 aos navegadores Internet Explorer 6 até 8 use uma pequena biblioteca JavaScript (4K) chamada Selectivizr. Basta adicionar o seguinte código na seção head do documento: <script type="text/javascript" src="[JS library]"></script> <!--[if (gte IE 6)&(lte IE 8)]> [Hidden Content] <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> [spoiler=Fonte:] [Hidden Content]

Download Curso Crie sites do zero com HTML5 & CSS3 - Udemy Você está procurando iniciar sua carreira como Desenvolvedor WEB? Quer aprender a utilizar as ferramentas mais utilizadas para WEB? Com este curso você irá aprender HTML & CSS para iniciar uma carreira de sucesso como desenvolvedor WEB. Um curso repleto de exemplos práticos, você irá aprender criado projetos, você irá criar dois sites completos!!!! No curso você irá aprender: Estruturas e tags básicas de uma página web Como utilizar bem CSS para deixar seus sites mais elegantes Os novos recursos do HTML5 & CSS3 Tudo isso criando projetos reais!! Quais são as exigências? Nenhum conhecimento requerido O que serei capaz de fazer depois deste curso? Criar páginas WEB com HTML5 & CSS3 Crias sites e ganhar dinheiro Qual é o público alvo? Todos que tenham interesse em criar sites DOWNLOAD [HIDE-THANKS] [Hidden Content] [Hidden Content] [Hidden Content] [Hidden Content] [Hidden Content] [Hidden Content] [/HIDE-THANKS] Achou muito grande? Precisa de algum gerenciador? Confira este programa: Megadownloader (Burlar o Limite do Mega)

Oi, bom dia. Então... eu estou testando meus conhecimentos básicos de HTML5 e CSS3 e como teste eu peguei um site e estou tentando montar ele do zero, mas acho que vou ficar só com o menu mesmo, enfim. O meu problema é que eu consegui fazer o menu drop down e eu queria que os itens do submenu dos itens do meu menu principal, demorassem para desaparecer quando eu tirasse o cursor do mouse de cima do item do menu principal. Exemplo: O meu item "Editar Perfil" tem os seus seguintes subitens: "Resumo", "Configurações da Conta", "Look and Layout" e "Perfil no Fórum". Eu quero que ao retirar o cursor do mouse de cima do item "Editar Perfil" do meu menu principal, em contrapartida os itens do meu submenu permaneçam aparecendo dentro de um limite de tempo, como por exemplo, três segundos.