aprender CSS: O guia completo

construímos um guia completo para o ajudar a aprender CSS, quer esteja apenas a começar com o básico ou queira explorar o CSS mais avançado.

Seletores CSS

Então você aprende a base id class e descendant seletores e, em seguida, chamou-o um dia? Em caso afirmativo, está a perder um enorme nível de flexibilidade. Você deve a si mesmo para commit estes selectores CSS e CSS3 avançados para a memória.

selectores Básicos

1., *

* { margin: 0; padding: 0;}

Let’s knock the obvious ones out, for the beginners, before we move on to the more advanced selectors.

O símbolo da estrela irá visar cada elemento da página. Muitos desenvolvedores irão usar este truque para zero o margins e padding. Embora isto seja certamente bom para testes rápidos, eu aconselharia você nunca usar isso em código de produção. Ele adiciona muito peso no navegador, e é desnecessário.

O * também pode ser usado com selectores para crianças.,

#container * { border: 1px solid black;}

Esta será alvo de cada elemento simples que é um filho de #container div. Mais uma vez, tente não usar esta técnica muito, se alguma vez.

2. #X

#container { width: 960px; margin: auto;}

prefixar o símbolo de hash para um selector permite-nos atingir o alvo por id. Este é facilmente o uso mais comum; no entanto, seja cauteloso ao usarid selectores.,

pergunte a si mesmo: será que preciso absolutamente aplicar um id a este elemento para o atingir?

id os selectores são rígidos e não permitem reutilização. Se possível, primeiro tente usar um nome de tag, um dos novos elementos HTML5, ou mesmo uma pseudo-classe.

3. .X

.error { color: red;}

This is a class selector. A diferença entreids eclasses é que, com este último, você pode atingir vários elementos., Use class es quando quiser que o seu estilo se aplique a um grupo de elementos. Alternativamente, use ids para encontrar uma agulha num palheiro, e estilo apenas esse elemento específico.

4. X

a { color: red; }ul { margin-left: 0; }

o Que se pretende para o destino de todos os elementos em uma página, de acordo com o seu type, em vez de uma id ou classnome? Mantenha-o simples, e use um selector de tipo. Se precisar de apontar para todas as listas não ordenadas, use ul {}.,

demonstração ao vivo de selectores Básicos

selectores combinadores

5. X Y

li a { text-decoration: none;}

o próximo selector mais comum é o descendant selector. Quando você precisa ser mais específico com seus seletores, você usa estes. Por exemplo, e se, em vez de visar todas as marcas de âncora, você só precisa atingir as âncoras que estão dentro de uma lista não ordenada? Isto é especificamente quando se usa um selector descendente.

Pro-tip: se o seu selector se parece comX Y Z A B.error, está a fazer mal., Pergunte – se sempre se é absolutamente necessário aplicar todo esse peso.

6. X + Y

ul + p { color: red;}

isto é referido como um selector adjacente. Ele selecionará apenas o elemento que é imediatamente precedido pelo elemento anterior. Neste caso, apenas o primeiro parágrafo após cadaul terá o texto vermelho.

7., X > Y

div#container > ul { border: 1px solid black;}

A diferença entre o padrão X Y e X > Y é que este último irá selecionar apenas a filhos diretos. Por exemplo, considere a seguinte marcação.

 <div> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul> </div>

Um seletor de #container > ul só de destino uls que são filhos diretos de div com um id de container., Ele não vai alvo, por exemplo, o ul que é um filho do primeiro li.

Por esta razão, há benefícios de desempenho ao usar o combinador de crianças. Na verdade, é recomendado particularmente quando se trabalha com motores de seletor CSS baseados em JavaScript.

8. X ~ Y

ul ~ p { color: red;}

Este irmão combinator é semelhante a X + Y, mas é menos rigorosa., Enquanto um seletor adjacente (ul + p) selecionará apenas o primeiro elemento que é imediatamente precedido pelo seletor anterior, este é mais generalizado. Ele selecionará, referindo-se ao nosso exemplo acima, qualquer elemento p, desde que sigam um ul.

Demo ao vivo de selectores de combinadores

selectores de atributos

9. X

a { color: green;}

referido como um selector de atributos, no nosso exemplo acima, isto só irá seleccionar as marcas de fixação que têm um atributo title., Etiquetas de âncora que não irão receber este estilo em particular. Mas e se precisares de ser mais específico? Veja o próximo exemplo!

10. X

a { color: #83b348; /* Envato green */}

o excerto acima irá estilo Todas as marcas de fixação que se ligam a https://code.tutsplus.com; elas receberão a nossa cor verde de marca. Todas as outras marcas de âncora não serão afectadas.

Note que estamos a embrulhar o valor entre aspas. Lembre-se também de fazer isso ao usar um motor de seletor de CSS JavaScript. Quando possível, use sempre seletores CSS3 sobre métodos não oficiais.,

isto funciona bem, embora seja um pouco rígido. E se o link realmente direciona para Envato Tuts+, mas talvez o caminho é code.tutsplus.com em vez da URL completa? Nesses casos, podemos usar um pouco da sintaxe das expressões regulares.

11. X

a { color: #83b348; /* Envato green */}

lá vamos nós; isso é o que precisamos. A estrela designa que o valor do processo deve aparecer algures no valor do atributo. Por ali, isto cobre tutsplus.com, code.tutsplus.com, e mesmo webdesign.tutsplus.com.

tenha em mente que esta é uma declaração ampla., E se a marca de âncora estiver ligada a algum site não-Envato com o texto tutsplus no URL? Quando você precisa ser mais específico, use ^ e $, para referenciar o início e o fim de uma cadeia, respectivamente.

12. X

a { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px;}

ever wonder how some websites are able to display a little icon next to the links which are external? Tenho certeza que você já viu isso antes; eles são lembranças agradáveis que o link vai direcioná-lo para um site totalmente diferente.

esta é uma cinch com o símbolo de quilates., É mais comumente usado em expressões regulares para designar o início de uma string. Se queremos alvo de todas as marcas de âncora que ter uma href que começa com http, poderíamos usar um seletor semelhante para o trecho acima.

Observe que não estamos procurando ; isso é desnecessário, e não conta para os URLs que começam com

Agora, o que se queria, em vez do estilo de todas as âncoras que o link para, digamos, uma foto?, Nesses casos, vamos procurar o fim do texto.

13. X

a { color: red;}

novamente, usamos um símbolo de Expressões Regulares,$, para se referir ao fim de uma cadeia. Neste caso, estamos à procura de todas as âncoras que ligam a uma imagem-ou pelo menos uma URL que termina com .jpg. Tenha em mente que isso não vai capturar imagens GIF e PNG.

14. X

a { color: red;}

como compensamos todos os vários tipos de imagem?, Bem, poderíamos criar vários selectores, tais como:

a,a,a,a { color: red;}

mas isso é uma dor, e é ineficiente. Outra solução possível é usar atributos personalizados. E se adicionarmos o nosso próprio atributo data-filetype a cada âncora que se liga a uma imagem?

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

então, com esse gancho no lugar, podemos usar um selector de atributos padrão para atingir apenas essas âncoras.

a { color: red;}

15. X

 a { color: red;}a { border: 1px solid black;}

Aqui está um especial que vai impressionar os seus amigos. Não há muita gente que saiba deste truque., O símbolo tilde (~) permite-nos atingir um atributo que tem uma lista de valores separada por espaços.

indo junto com o nosso atributo personalizado do número 15, acima, nós poderíamos criar um atributo, que pode receber uma lista separada por espaço de qualquer coisa que precisemos fazer nota. Neste caso, vamos tomar nota de links externos e links para imagens—apenas para o exemplo.,

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

com essa marcação no lugar, agora podemos atingir qualquer marca que tenha qualquer um desses valores, usando o ~ Truque selector de atributos.muito bonito, não é?

Demo ao vivo dos selectores dos atributos

Pseudo-selectores

16. X: visited and X: link

a:link { color: red; }a:visited { color: purple; }

we use the :link pseudo-class to target all anchor tags which have yet to be clicked on.,

Alternativamente, também temos o :visited pseudo classe, que, como seria de esperar, nos permite aplicar específicos estilo apenas para as marcas de âncora na página que tenham sido clicado, ou “visitado”.

17. X: assinalado

input:checked { border: 1px solid black;}

esta pseudo classe visará apenas um elemento de interface do utilizador que tenha sido assinalado—como um botão de rádio ou uma opção. É tão simples quanto isso.

18. X: depois de

a eafter pseudo classes são grandes., Todos os dias, ao que parece, as pessoas encontram formas novas e criativas de As utilizar eficazmente. Eles simplesmente geram conteúdo em torno do elemento selecionado.

muitos foram introduzidos a estas classes pela primeira vez quando eles encontraram o hack clear-fix.

Este hack usa a:after pseudo classe para adicionar um espaço após o elemento, e depois limpá-lo. É um excelente truque para ter em sua bolsa de ferramentas, particularmente nos casos em que o método overflow: hidden; não é possível.

para outro uso criativo disto, consulte a minha dica rápida sobre a criação de sombras.,

de acordo com a especificação de selectores CSS3, você deve tecnicamente usar a sintaxe pseudo elemento de dois colões ::. No entanto, para permanecer compatível, o usuário-agent irá aceitar um único uso de dois pontos também.

19. X: hover

div:hover { background: #e3e3e3;}

Oh come on. Conheces esta. O termo oficial para isso é”user action pseudo class”. Parece confuso, mas realmente não é. deseja aplicar um estilo específico quando um utilizador paira sobre um elemento? Isto vai acabar com o trabalho!,

tenha em mente que versões mais antigas do Internet Explorer não responde quando o :hover pseudo-classe é aplicado para qualquer coisa diferente de uma marca de âncora.

usará mais frequentemente este selector ao aplicar, por exemplo, um border-bottom às marcas de fixação, quando pairou por cima.

a:hover { border-bottom: 1px solid black;}

dica: border-bottom: 1px solid black; parece melhor do que text-decoration: underline;.

20., X: não (selector)

div:not(#container) { color: blue;}

A pseudo classe de negação é particularmente útil. Digamos que eu quero selecionar todos divs, exceto aquele que tem um id de container. O trecho acima irá lidar com essa tarefa perfeitamente.

ou, se eu quisesse selecionar cada elemento (não aconselhado), exceto as tags do parágrafo, poderíamos fazer:

*:not(p) { color: green;}

21., X::pseudoElement

p::first-line { font-weight: bold; font-size: 1.2em;}

podemos usar pseudo elementos (designado por ::) para o estilo de fragmentos de um elemento, tal como a primeira linha ou primeira letra. Tenha em mente que estes devem ser aplicados aos elementos de nível de bloco, a fim de produzir efeito.,

Um pseudo-elemento é composto de dois pontos: ::

Destino a Primeira Letra de um Parágrafo

p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px;}

Este trecho é uma abstração que vai encontrar todos os parágrafos na página, e, em seguida, sub-alvo apenas a primeira letra do elemento.

isto é mais frequentemente usado para criar estilo de jornal para a primeira letra de um artigo.,

Destino a Primeira Linha de um Parágrafo

p::first-line { font-weight: bold; font-size: 1.2em;}

da mesma forma, o ::first-line pseudo elemento, como esperado, estilo a primeira linha do elemento só.

“Para compatibilidade com os actuais folhas de estilo, os agentes do utilizador também tem de aceitar o anterior-e-vírgula notação para os pseudo-elementos introduzidos no CSS níveis 1 e 2 (ou seja, :first-line :first-letter :before e :after). Esta compatibilidade não é permitida para os novos pseudo-elementos introduzidos nesta especificação.,”- W3C Selectors Specs

live Demo of Pseudo Selectors

Nth Child and Type Selectors

22. X: nth-child (n)

li:nth-child(3) { color: red;}

lembra-se dos dias em que não tínhamos como apontar elementos específicos numa pilha? Anth-child pseudo classe resolve isso!

Por Favor, note que nth-child aceita um inteiro como um parâmetro, mas este não é baseado em zero. Se desejar seleccionar o item da segunda lista, use li:nth-child(2).

Podemos até usar isto para seleccionar um conjunto variável de crianças., Por exemplo, poderíamos fazer li:nth-child(4n) para selecionar cada quarto item da lista.

23. X:nth-last-child(n)

li:nth-last-child(2) { color: red;}

e se você tivesse uma lista enorme de itens em um ul, e você só precisava de acesso, digamos, o terceiro para o último item? Ao invés de fazer li:nth-child(397), você poderia usar o nth-last-child pseudo classe.

esta técnica funciona quase de forma idêntica ao número 16 acima. A diferença é que ele começa no final da coleção, e funciona seu caminho de volta.

24., X: nth-do-tipo(n)

ul:nth-of-type(3) { border: 1px solid black;}

haverá alturas em que, em vez de seleccionar um child, terá de seleccionar de acordo com o do elemento.

Imagine a marcação que contém cinco listas não ordenadas. Se você quisesse estilo apenas o terceiro id

, e não tivesse um únicoidpara se ligar, você poderia usar onth-of-type(n)pseudo classe. No trecho acima, apenas o terceiro id

terá uma fronteira em torno dele.

25., X:nth-last-of-type(n)

ul:nth-last-of-type(3) { border: 1px solid black;}

E sim, para ser coerente, também podemos usar nth-last-of-type início no final dos selectores de lista e trabalhar o nosso caminho de volta para segmentar o elemento desejado.

26. X: first-child

ul li:first-child { border-top: none;}

Esta pseudo classe estrutural permite-nos atingir apenas o primeiro filho do pai do elemento. Você vai usar isso muitas vezes para remover fronteiras dos itens da primeira e última lista.

Por exemplo, digamos que você tem uma lista de linhas, e cada uma tem um border-top e um border-bottom., Bem, com esse arranjo, o primeiro e o último item desse conjunto vai parecer um pouco estranho.

Muitos designers aplicar aulas de first e last para compensar isso. Em vez disso, você pode usar essas pseudo classes.

27. X:last-child

ul > li:last-child { color: green;}

O oposto de first-child last-child alvo será o último item do elemento-pai.

last-child Selector Example

let’s build a simple example to demonstrate one possible use of these classes., Vamos criar um item de lista com estilo.

 <ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>

para a marcação, não há nada de Especial: apenas uma lista simples.

Aqui está o CSS:

Este estilo vai definir um plano de fundo, remover o navegador padrão de preenchimento sobre o ul, e aplicar bordas a cada li para fornecer um pouco de profundidade.

Para adicionar profundidade a sua lista, aplicar uma border-bottom para cada li que é um tom ou dois mais escuro do que o li‘s cor de plano de fundo., Em seguida, aplicar um border-top que é um par de tons mais leves.

o único problema, como mostrado na imagem acima, é que um contorno será aplicado no topo e no fundo da lista não ordenada—o que parece estranho. Vamos usar o id

e:last-childpseudo classes para corrigir isso.

li:first-child { border-top: none;}li:last-child { border-bottom: none;}

lá vamos nós; isso corrige isso!

28., X: only-child

div p:only-child { color: red;}

Truthfully, you probably won’t find yourself using the only-child pseudo class too often. No entanto, está disponível, se precisar.

permite-lhe apontar elementos que são o único filho do seu pai. Por exemplo, referenciando o trecho acima, apenas o parágrafo que é o único filho do div será colorido de vermelho.

vamos assumir a seguinte marca.,

<div><p> My paragraph here. </p></div><div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p></div>

neste caso, o segundo div‘s parágrafos não vai ser alvo; apenas o primeiro div. Assim que você aplica mais de um filho a um elemento, a classe only-child pseudo-classe deixa de ter efeito.

29. X: only-of-type

li:only-of-type { font-weight: bold;}

Esta pseudo classe estrutural pode ser usada de algumas maneiras inteligentes. Ele irá direcionar elementos que não têm nenhum irmão dentro de seu contêiner pai. Como exemplo, vamos focar todos ul s que têm apenas um item de lista única.,

primeiro, pergunte a si mesmo como você poderia realizar esta tarefa. Você poderia fazer ul li, mas isso iria direcionar todos os itens da lista. A única solução é usar only-of-type.

ul > li:only-of-type { font-weight: bold;}

30. X: first-of-type

The first-of-type pseudo classe permite selecionar os primeiros irmãos do seu tipo.

um teste

para melhor entender isso, vamos ter um teste. Copie a seguinte marcação para o seu editor de código:

<div> <p> My paragraph here. </p> <ul> <li> List Item 1 </li> <li> List Item 2 </li> </ul> <ul> <li> List Item 3 </li> <li> List Item 4 </li> </ul> </div>

Agora, sem ler mais, tente descobrir como atingir apenas o “Item 2 da lista”., Quando você descobrir (ou desistir), leia.

solução 1

há uma variedade de maneiras de resolver este teste. Vamos rever alguns deles. Vamos começar usando first-of-type.

ul:first-of-type > li:nth-child(2) { font-weight: bold;}

Este trecho essencialmente diz, para encontrar a primeira lista não ordenada na página, em seguida, encontrar apenas os filhos imediatos, que são itens da lista. Em seguida, filtre isso para apenas o item da segunda lista nesse conjunto.

Solução 2

outra opção é usar o selector adjacente.,

p + ul li:last-child { font-weight: bold;}

neste cenário, encontramos o ul que imediatamente passa a p tag e, em seguida, encontrar o último filho do elemento.

Solução 3

podemos ser tão desagradáveis ou tão brincalhões como queremos com estes selectores.

ul:first-of-type li:nth-last-child(1) { font-weight: bold; }

desta vez, pegamos o primeiro ul na página, e então encontramos o item da primeira lista, mas começando pelo fundo!,

demonstração ao vivo de Nth Child and Type Selectors

Conclusion

Se estiver a compensar navegadores mais antigos, como o Internet Explorer 6, ainda precisa de ter cuidado ao usar estes selectores mais recentes. Mas, por favor, não deixes que isso te impeça de aprender isto. Estarias a prejudicar-te a ti próprio. Não se esqueça de se referir aqui para uma lista de compatibilidade de navegador. Em alternativa, podes usar o excelente IE9 do Dean Edward.script js para trazer suporte para estes selectores para navegadores mais antigos.,

Em segundo lugar, ao trabalhar com bibliotecas JavaScript, como o jQuery popular, sempre tente usar estes selectores CSS3 nativos sobre os métodos/selectores personalizados da biblioteca, quando possível. Ele vai tornar o seu código mais rápido, como o motor selector pode usar o processamento nativo do navegador, em vez de seu próprio.

é óptimo que esteja a passar algum tempo a aprender os fundamentos do web design, mas se precisar de uma solução rápida, um dos nossos modelos de CSS prontos a usar pode ser uma boa opção. Também temos alguns itens CSS premium para você considerar.,

• CSS3
  12 Elegante CSS Preços Tabelas para o Seu mais Recente Projecto da Web
  Monty Shokeen
• Bootstrap 4
  18 Melhores Bootstrap 4 Plugins
  Monty Shokeen

Acesso Gratuito ao Envato Elementos para 1 Mês

Finalmente, aqui está uma oferta muito especial para ajudar você a criar profissional-olhando sites e apps. Além de usar estes selectores CSS, Por que não aproveitar fotos de estoque de alta qualidade, imagens de vídeo, fontes premium, gráficos, ilustrações, e muito mais?,normalmente, teria de pagar por recursos como esse. Mas agora, você pode acessar milhões de recursos criativos para seus projetos de codificação por um mês inteiro, completamente grátis. E mais, você tem downloads ilimitados, então você pode pegar o quanto quiser durante esse mês, e só Pagar Se você decidir continuar!,

Para aproveitar esta oferta, clique neste especial de inscrição de link ou digite o código abaixo na página de registo:

elements_cont_tuts-freemonth1-4bwkbp

não espere muito tempo—a oferta só é válida por tempo limitado!