Então, neste vídeo, vamos nos concentrar em três seletores CSSA.
Esses são ID de elemento na classe.
Portanto, há mais opções para selecionar elementos.
Nós vamos aprender sobre eles mais tarde, vamos nos concentrar nestes três para começar.
E quando eu digo que o seletor responda a esta regra geral sobre a qual conversamos sobre o
início do início da CSSA alguns vídeos, onde temos um seletor e, em seguida, chaves e, em seguida, algumas propriedades.
Então, vamos ver alguns seletores diferentes que podemos colocar aqui.
E do jeito que nós vamos fazer, nós realmente vamos construir uma lista muito simples de fazer juntos.
Então vou fazer um novo arquivo.
Eu vou salvá-lo e eu vou chamar isso para fazer a lista de HMO uma
vez que temos isso, então vamos em frente e adicionar o HMO.
E do jeito que vai funcionar, será
um H1 e então teremos um bem com os aliados.
Mas em cada aliado vamos ter algum texto e vamos ter uma pequena caixa de seleção, então veja
se você pode se lembrar de como fazer caixa de seleção é tipo de entrada igual a caixa de seleção e depois abaixo ou depois disso teremos
nosso texto .
Então, vamos ficar enferrujados, então vou duplicar isso.
Então, vamos ter três deles aqui caminhando Rusty apenas para comprar mantimentos.
E, finalmente,
terminar de gravar, veja avaliar a Phidias.
Então, se abrimos isso em um navegador, veremos uma versão suave e estilosa do nosso produto final, mas
o esqueleto está lá.
Nós temos os nossos dois e cada um que é uma pequena caixa de seleção ao lado.
ESTÁ BEM.
Então, a próxima coisa que queremos fazer é conectar uma folha de estilo.
Então, para fazer isso, vamos começar ligando uma folha de estilo não existente e então vamos continuar e criar uma
folha de estilo.
Então, algumas pessoas chamariam esse desenvolvimento orientado por erro, onde escrevemos algo que sabemos que
não funcionará e, depois, o fazemos funcionar depois.
Então, eu vou chamar isso para fazer a avaliação introduzir C ver avaliar o que não existe.
A próxima coisa que vamos fazer é seguir em frente e fazer esse arquivo para Dewes que C avalia.
E isso precisa estar no mesmo lugar para fazer um estudo.
Tim vou salvar isso e apenas para ter certeza de que ele está conectado.
Vamos fazer algo como laranja de fundo do corpo e você sabe que isso é realmente o que eu estava
falando no vídeo a cores.
Esta é uma das únicas vezes que eu realmente usaria uma cor como a laranja.
Além de ensinar, eu apenas usaria isso para garantir que algo estivesse conectado Eu só quero uma cor brilhante.
Quero ver se isso é que o C Ss está sendo consultado corretamente aqui.
Então, se nós frescos.
Ok, excelentes coisas estão conectadas.
Então, o que vamos fazer é voltar para os slides aqui e falar sobre o seletor de elementos primeiro, que
é o que realmente dedicamos muito tempo para estar pronto.
É basicamente o tipo de ataques que você especifica div ou parágrafo ou corpo e, em seguida, selecionará todos os elementos
correspondentes todas as instâncias que correspondam a isso.
Então, neste caso, temos dois divs e cada div tem dois parágrafos e, portanto, configuramos todos os divs em que
fundo roxo recebemos dois dispositivos roxos, estabelecemos todo o parágrafo para ser COLOR AMARELO, recebemos quatro parágrafos amarelos.
Então é isso que estamos fazendo aqui quando selecionamos o corpo.
Nós também poderíamos fazê-lo para todos os ALWIS e dar-lhes uma ordem ou deixar um limite de dois pixels de cor sólida.
Agora, claro, isso funciona em todos os aliados.
ESTÁ BEM.
Então, a próxima coisa que podemos querer fazer é soltar um aliado ou um H-1 ou um exemplo de algo.
Então, neste exemplo, estamos selecionando a terceira mentira e ficando amarelo.
E a maneira como fazemos isso é realmente alterando ligeiramente a equipe e, em seguida, usando um gancho que adicionamos aos H
T M L e R C Ss, todos se referem a ele e acendem-no em amarelo.
Então, o primeiro passo é adicionar esse gancho chamado ID.
E assim, a maneira como uma idéia funciona, você adiciona isso como um atributo a qualquer ID de elemento igual.
E então, entre citações, qualquer nome que você deseja, pode ser qualquer coisa.
E então, o que fazemos é se referir a isso depois, escrevendo um sinal de Octa Thorpe ou hash e, em seguida,
o nome do ID e que selecionará o elemento que corresponda ao nome da ID.
Então, como exemplo, digamos que eu quero esse aliado final aqui para parecer um pouco diferente.
O que eu poderia fazer é ir aqui Ally e vamos dar uma identificação.
E isso pode ser qualquer nome.
chamando de especial,
não é realmente um ótimo nome, mas mostra que o ponto de usar um ID é soltar algo.
Vamos chamar isso de especial e a razão pela qual estou dizendo que estou
É uma forma de segmentar um elemento individual e uma nota sobre um ID.
Só pode aparecer em uma página uma vez.
Então, se eu fizer isso e depois tentar e dar a ID especial para dois elementos que, na verdade, são inválidos HMO.
Portanto, sempre deve estar lá uma vez na página.
É puramente usado para soltar um único elemento.
No entanto, podemos ter várias IDs em uma página, desde que não apareçam mais de uma vez.
ESTÁ BEM.
Então vamos com este especial.
Agora vamos fazer isso, vamos ver isso aqui.
É este último aqui.
Vamos dar uma cor de fundo.
Então, para fazer isso, o nome é especial.
Nós vamos ao nosso arquivo CSSA e nós escrevemos especial e colocamos uma oitava na frente dele e
isso apenas nos diz que estamos falando sobre uma ID.
Então, então, tudo o que fazemos é escrever ou C S S aqui, então vamos fazer a cor do plano de fundo e vamos deixá-lo amarelo.
Salve a atualização do arquivo e você só pode ver isso quando é amarelo.
Então, há algumas coisas que eu quero salientar.
O primeiro é que esse código ainda está funcionando.
Ele gera todos os aliados.
Isso lhes dá uma borda vermelha, incluindo essa a última.
E, em seguida, estamos adicionando em cima disso, adicionando um fundo amarelo apenas ao último
baseado fora desse gancho que adicionamos e chamamos ID.
um elemento, você só pode usar um ID uma vez por página, mas podemos ter o maior número de IDs que queremos em uma página.
Então, para resumir uma ideia como uma forma de separar
Então, os IDs são ótimos para separar elementos individuais, mas muitas vezes queremos ter vários elementos que
parecem semelhantes, mas não queremos todos os aliados, por exemplo.
Então, digamos que queria modelar metade dos Aliados de um jeito e metade deles de outra maneira, poderíamos
usar uma aula para conseguir isso.
Então, a maneira como uma classe funciona é como uma ID, exceto que ela é chamada de classe e podemos
aplicá-la a qualquer número de elementos em uma página.
e, em seguida, nos referimos a ele em nosso sucesso com um ponto em vez de uma oitava Thorpe.
Então, como você pode ver aqui, estamos aplicando uma classe chamada de destaque para o primeiro parágrafo e o terceiro parágrafo
Então, novamente para contrastar que aqui para selecionar uma ID, usamos o sinal de hash ou o Octave Thorpe aqui para selecionar
uma classe.
Usamos ponto.
Caso contrário, eles funcionam do mesmo jeito.
Então, vamos fazer um exemplo.
Eu vou adicionar uma classe e do jeito que eu quero que isso funcione, vamos fingir que essas
duas são verificadas.
Então eu quero que haja uma linha através do texto.
Então, quando olhamos para comprar mantimentos e caminhamos resti, deve haver uma greve através do
texto, mas não o último.
Então, a maneira como fazemos isso ou uma maneira de fazer isso é com a classe.
Então, voltei, vou seguir em frente e adicionar uma aula e vai chamar isso de conclusão e outra
uma classe igualada e eu vou salvar isso e se eu atualizar.
Nada acontece porque eu não tenho nenhum estilo.
vou para o meu C Ss e eu ponto direito e, em seguida, o nome da classe completou cintas curly e agora estilo.
Então, agora eu
Então, vou apresentar algo novo aqui chamado de decoração de texto e decoração de texto é uma
maneira de adicionar uma linha.
Mas há algumas coisas que você pode fazer.
Você pode adicionar um sublinhado e você pode adicionar um sublinhado ondulado. Aparentemente, não sabia
que uma linha e uma linha por cima, como um sublinhado, exceto no topo.
Então, vamos usar a linha e isso deve ser.
Então, se eu atualizar.
Mantenha seus olhos nos dois primeiros.
Agora conseguimos uma linha.
Ótimo.
Uma nota rápida enquanto estou aqui é que, se eu quiser que essas caixas de seleção sejam verificadas quando a página é carregada.
Então, agora, eles não são verificados e eu tenho que verificá-los manualmente, mas se eu quiser que
os dois primeiros sejam verificados, posso ir aqui e adicionar um atributo chamado checado.
E isso funciona em entradas de caixa de seleção.
Então, fazendo isso se eu estivesse fresco. Agora, quando a página está carregada, eles são verificados.
Então, não vejamos avaliar, mas é importante apenas saber que você pode fazer isso.
ESTÁ BEM.
Então, vamos embrulhar isso rapidamente.
Nós temos o seletor de elementos para selecionar todo um determinado elemento.
Todos ALWIS todos divs todos os parágrafos.
Nós temos o seletor ID que selecionará o único elemento com o ID correspondente e sempre precisamos usar uma
oitava para isso.
Ou um símbolo de hash.
E então, temos o seletor de classe que é muito parecido com o seletor de identificação, exceto que selecionamos com base em
um nome de classe e uma classe pode ocorrer tantas vezes como desejamos em uma determinada página ao contrário de uma ID que é
apenas uma vez