CSS avançado: unidades, variáveis, funções, seletor

1. Apresentação: Eu sei que você está familiarizado com a unidade CSS. Você está familiarizado com o Pixel Parson DEM Val. Mas você conhece a unidade femin Vmax, VH W? Você sabe como podemos usar a variável CSS em nossos projetos? Você está interessado em aprender como podemos usar a função calf? E você está interessado em aprender alguma outra função CSS, função mínima, função máxima, função clam Você quer trabalhar com seletores CSS muito avançados , como seletor simples, seletor combinador, seletor de atributos, classe posi Do e seletores posi Do Então este curso é para você. Olá. Meu nome é John T Shokar Sou desenvolvedor web completo e instrutor on-line. Bem-vindo ao meu curso, CSS avançado. Este é um dos cursos mais avançados em CSS. Se você quiser aprimorar suas habilidades de CSS, então este curso é para. 2. Tutorial de unidades de CSS parte 1: Olá, pessoal. É bom ver você de volta. Este é o primeiro tutorial relacionado a CSS avançado, e vamos começar com a unidade de medida CSS. Se você deseja atribuir altura a um objeto , deve saber quantos tipos de unidades temos no CS. Aqui, você pode ver uma lista de unidades que aprenderemos neste tutorial, Pixel PercentiSEM, REM, visor com etc. Eu sei que você já está familiarizado com algumas unidades como pixel, percentiSEM Na maioria dos casos, usamos pixels e porcentagens. Então, sem elas, temos algumas outras unidades mais úteis. Neste tutorial, dividimos as unidades em duas partes. A primeira são unidades absolutas e a segunda são unidades relativas. Esta é a lista de unidades absolutas, centímetro, milímetro, polegadas, pixels, pontos, etc As unidades absolutas são unidades fixas e, na maioria das vezes, usamos unidades de pixels. É muito popular. É muito popular em CSS. Sem isso, temos unidades relativas. Essas unidades relativas dependem de outros objetos principais. Porcentagens EM, REM, VH, todas essas são unidades relativas muito populares Então, um por um, vou tentar explorar toda a unidade neste tutorial. Então, vamos começar a prática. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já criei um documento ETL chamado index dot HTML E neste documento ETL, dentro da tag body, temos uma tag de cabeçalho, e aqui em t unidades CSS Então, dentro da tag body, temos uma tag profunda com a caixa de nome de ID. Então eu estilizo essa seção do corpo. Primeiro, atribuo uma família de fontes Area Helvetica. E também estilizo essa caixa usando seu nome de ID. Primeiro, eu forneço uma borda, uma borda sólida com dois pixels. Em seguida, forneço uma cor de fundo. Além disso, forneço largura e altura. Com 600 pixels e altura, 300 pixels. Aqui usamos Unidade absoluta, e pixel é uma unidade absoluta fixa. Agora a questão é o que isso significa? Qual é o significado de fixo? Se eu reduzir a largura do navegador, como você pode ver, nossa forma não muda de acordo com a semana do navegador. Você pode ver a barra de rolagem abaixo do navegador. Se eu mover essa barra de rolagem para o lado direito, você poderá ver a forma completa do retângulo É uma unidade fixa, portanto , não alterará a altura e o peso de acordo com a altura e a largura do navegador. É por isso que a chamamos de unidade absoluta. Então, vamos para a posição anterior desse navegador. E agora vou usar um valor relativo. Então, vou usar o valor percentual. Então, tipo Hemo 100% com 100%. E eu vou configurar esse arquivo. Para configurar esse arquivo, como você pode ver, aqui você pode ver nossa caixa ocupando 100% da largura deste navegador. Se eu estender o tamanho do navegador, como você pode ver, de acordo com a largura do navegador, ele aumenta a largura. Da mesma forma, se eu reduzir a largura do navegador, agora você pode ver, isso também reduzirá a largura da caixa de acordo com o navegador. Isso significa que serão necessários 100% do navegador. Da mesma forma, se eu passar 50% aqui, e depois esse arquivo, agora você pode ver que ele ocupa 50% da asa do navegador. Então esse é o exemplo da unidade relativa. Esse tipo de valor depende do elemento pai Die, caso contrário, Window : A questão é como funciona com o pai D. Deixe-me mostrar um exemplo Então, dentro desta caixa, vou pegar outro elemento DV, DV e também vou atribuir uma ID, E eu quero mover nossa caixa antiga para dentro dessa profundidade, então vou mudar essa caixa de nome de identificação profunda uma. Agora, a caixa um é profunda para nossos pais e a caixa é para crianças. Então, para estilizar tão profundamente. Então, copie o nome do ID e seu tipo Eu marque nossa caixa de nome de identificação como um. Em seguida, insira as cores, vou usar as propriedades da mesma forma Então copie as propriedades CSS, e eu vou colar dentro desta caixa uma. Primeiro, vou mudar a cor do plano de fundo. Não quero nenhuma cor de fundo. E então eu quero atribuir uma largura absoluta a esse D. Então eu vou atribuir 600 pixels e altura 300 pixels. Se eu definir esse arquivo, agora você pode ver como elemento filho p ocupa 50% da largura desse contêiner pai. Então, como eu disse, o valor relativo funciona relativamente de acordo com o tamanho dos pais. Portanto, se eu reduzir ou aumentar a altura e a largura do navegador, isso não afetará nossa caixa porque dissemos valor absoluto para seus pais. Então, deixe-me te mostrar. Então, vou reduzir o navegador we. Para reduzir a largura do navegador, como você pode ver, aqui você pode ver, temos uma barra de rolagem Mas nossa caixa não muda a largura. Da mesma forma, se eu aumentar a largura do navegador, você também poderá ver o mesmo resultado porque agora ele funciona de acordo com o contêiner principal. Mas se eu remover o contêiner principal , essa caixa mudará sua largura. Mas se eu remover a caixa principal profunda significa um , ela mudará a forma acordo com a janela do navegador. Então, serão necessários 50% da janela do navegador. Aqui usamos 50%. Isso significa que serão necessários 300 pixels porque dizemos caixa um com 600 pixels. Da mesma forma, se eu passar 20% e depois definir esse arquivo, agora você pode ver, agora são necessários 20% de 600 pixels. Mas se eu remover a caixa 1, deixe-me mostrar a você e este arquivo. Agora, a janela se torna mãe desse d. Window significa a tag body. E agora vou falar sobre EM e REM ID. As unidades EM e REM funcionam basicamente com o tamanho da fonte. Deixe-me te mostrar como. Então, primeiro, vou aumentar a operação. Vou pegar 80% Então, aqui vou pegar uma propriedade chamada tamanho da fonte. Tamanho da fonte. Tamanho da fonte: um EM. E dentro dessa tag profunda, aqui vou adicionar um parágrafo fictício Herma tipo um 100. E eu vou configurar esse arquivo. Então, aqui adicionamos um parágrafo fictício de 100 ou, e dissemos tamanho da fonte 1:00 A.M. 1:00 A.M. O valor funciona relativamente porque é uma unidade relativa e o pai E, como você pode ver, em nossa tag body, não usamos nenhum tamanho de fonte. Então, vamos usar o tamanho da fonte. Tamanho da fonte, e eu vou usar o tamanho da fonte 13 Bigel Eu vou definir este arquivo Depois de definir este arquivo, agora você pode ver dentro da caixa, nosso tamanho de fonte é reduzido. Agora, 1:00 da manhã, transforme-se em 13 pixels. Mas se eu usar 2:00 da manhã , vou trocar o Vin dois EM. , vou trocar o Vin dois Então eu vou configurar esse arquivo. Agora você pode ver que parece estar, e também está sobrevoado para esse Vamos dizer que aqui usamos dois valores temporais de 13 pixels porque em nossa tag principal, aqui usamos o tamanho da fonte de 13 pixels, e duas vezes acima de 13 pixels são 26 pixels. É por isso que nossa fonte se torna 26 pixels. Da mesma forma, se você quiser pegar metade do valor desse par D, nesse caso, apenas um bit para passar 0,5 pixel 0,5 da manhã. Se eu definir esse arquivo, agora nossas fontes ficarão muito pequenas porque são o hub do valor. Portanto, o tamanho da nossa fonte passa a ser de seis pixels. Mas se eu comentar, caso contrário, remova o tamanho da fonte do elemento pai e aqui eu uso o valor 1:00 A.M. e defino esse Agora você pode ver que ela tinha um valor padrão para essa fonte. Agora a questão é: qual é o valor padrão de 1:00 A.M. O valor padrão de um M é 16 pixels Se eu mostrar as configurações do meu navegador e depois acessar a aparência, você poderá ver o tamanho da fonte. Se eu abrir esse tamanho de fonte, agora você pode ver, por padrão, que dizia 16 pixels. Mas se eu aumentar o tamanho, suponha que eu use 28 e volte para minha janela, agora você pode ver que o valor de uma fonte M se torna 28 pixels. Da mesma forma, se eu reduzir o valor, ele se torna muito pequeno. Agora, um valor M se torna nove pixels porque aqui dizemos nove pixels. Portanto, é considerado o valor padrão do tamanho da fonte do navegador. E na maioria das vezes, o navegador usa 16 pixels. E agora vamos falar sobre a unidade REM. Então, aqui vou digitar REM. E eu vou parar esse arquivo. REM significa EM relativo. É muito semelhante ao EM, mas não funciona de acordo com os pais. Agora você pode ver o tamanho da fonte padrão, que é 16 pixels. Mas se eu atribuir tamanho de fonte ao nosso corpo, algum tipo de tamanho de fonte, e vou atribuir oito pixels. E se eu definir esse arquivo, como você pode ver, ele não reduz o tamanho da fonte. Eu não trabalho de acordo com o plano. Essa RMU está relacionada à raiz. Se eu aumentar o tamanho da fonte do navegador, deixe-me mostrar a aparência do tamanho da fonte. Então, vou usar o tamanho da fonte de 28 pixels e depois voltar para a janela, agora você pode ver, agora você pode ver nosso único RM Valcal de 28 Então, agora vamos corrigir a onda padrão, que é de 16 pixels. E se eu usar duas RAM e, como você sabe, serão necessários 32 pixels. E há outra maneira de manipular a unidade RM usando a tag raiz E como você sabe, nossa tag raiz é T Milton. Então, se eu estilizar o tipo de som HTML TML, você define as calvss Vou usar a propriedade de tamanho da fonte Tamanho da fonte, e eu vou definir o tamanho da fonte de dez pixels. Esse é o testamento padrão. E se eu definir esse arquivo, agora você pode ver que nossas fontes se tornaram 20 pixels porque aqui usamos dois RM É o dobro do tamanho da fonte raiz em. Então, se eu usar um RM e depois definir esse arquivo, agora você pode ver nossas fontes se tornarem dez pixels, porque agora nosso tamanho de fonte de tecnologia raiz é dez Bexl e agora vou definir a unidade EM dois com Então, vou usar o tamanho da fonte um EM e nós com um EM. Se eu definir esse arquivo, ele vai ficar com oito pixels. Além disso, a fonte será de oito pixels. Deixe-me mostrar porque, como eu disse, largura de trabalho do EMV de acordo com o pai Então, se eu definir esse arquivo, você poderá ver o resultado. largura da caixa é oito pixels porque Henry definiu o tamanho da fonte em oito pixels. Além disso, você usa o tamanho da fonte de oito pixels. Portanto, o valor AM pega o tamanho da fonte do pai e aplica o tamanho da fonte à largura do filho. E da mesma forma, se eu usar o valor REM, REM e REM e definir esse arquivo, agora o tamanho da fonte se tornará dez pixels. Além disso, nossa largura se torna dez pixels porque ela se enraíza bem. Espero que agora tenha ficado tão claro por que usamos EM e RMW somente com fontes, não com a altura e o id. Então, esta é a primeira parte deste tutorial Na próxima parte do tutorial, falaremos sobre VH e VW Então, obrigado por assistir a este vídeo, fique ligado. 3. Tutorial de unidades de CSS parte 2: Olá, pessoal. É bom ver você de volta. Esta é outra unidade CSS relacionada ao Tutorial. E neste tutorial, vamos começar com view boot height e Viewboard With Então, vamos começar com Viewbard With. Aqui você pode ver uma janela do navegador na tela. E chamamos de largura total da largura do navegador Viewboard Weav e largura do viewpot, dividida com até cem partes Se usarmos 50 VW , ele ocupará o hub desse navegador Da mesma forma, temos a altura do mirante. Também é dividido por 100. E se usarmos 50 VH, isso ocupará 50% dessa janela Então, vamos começar a prática e ver como podemos usá-la. Então, como você pode ver, estamos no vis, um editor de código de estúdio, e eu já criei outro documento HTML chamado Idextdt TML Então, primeiro, vou mudar a unidade com. Aqui vou usar 100 VW e, para altura, vou usar 100 VH Por enquanto, não quero o tamanho da fonte. Então, eu vou removê-lo. Após a etapa deste arquivo, como você pode ver, você pode ver que ele ocupa completamente a altura e o navegador do navegador. Mas há um problema. Você pode ver a palavra de rolagem we M na parte inferior. É um problema. Então, vou remover os títulos d h one Além disso, vou dizer margem zero. Além disso, vou remover a borda da borda com zero pixel e vou configurar esse arquivo. Se eu definir esse arquivo, até configurar esse arquivo, você pode ver que ele remove a barra de rolagem da janela e ocupa completamente a altura e a largura dessa janela. Se eu reduzir a largura, você também pode ver que não há barra de rolagem. E também esta unidade funciona para altura. E agora vou reduzir a unidade Vale. Para isso, vou passar de 50, 50 VW por altura, e ficar como está Depois de definir esse arquivo, você pode ver o resultado. Agora, a largura se torna metade dessa janela do navegador. Como você sabe, todas essas são unidades relativas. É bem parecido com porcentagens, mas há uma diferença entre porcentagem, visor e altura da visualização O valor percentual funciona de acordo com o elemento pai. Se definirmos a largura do elemento pai, 600 pixels, e depois usarmos a largura do elemento filho, 50%, ela será definida com 300 pixels, mas a largura do viewpod e a altura da janela de visualização não funcionam assim Sempre funciona de acordo com o tamanho da janela. Deixe-me te mostrar. Então, vou tentar colocá-lo em um web fixo. Mais uma vez, vou pegar um contêiner principal. No fundo da etiqueta de mergulho, vou atribuir uma identificação Caixa de identificação um. Em seguida, vou mover esse mergulho dentro dessa etiqueta de mergulho parental. E agora vou estilizar a caixa um, a hashtag, caixa um e, dentro do caliss, nossa primeira propriedade é Vou usar esse mesmo valor, sem pixels, borda sólida. E então eu vou dizer altura e nós Largura, 600 pixels, altura 300 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Então, na tag principal, usamos o valor absoluto, e em uma tag secundária, aqui usamos o valor relativo, mas aqui usamos a altura da janela de visualização e a erva daninha do visor. E, como eu disse, a altura e o visor do visor não funcionam em relação ao contêiner principal Funciona em relação ao tamanho da janela. Portanto, se eu reduzir a largura desse navegador, como você pode ver, ele funcionará relativamente com a janela, não com o contêiner principal. Mas se eu usar o valor percentual lá, então aqui eu vou usar 50%. E então defina esse arquivo. Agora você pode ver que consome 50% desse contêiner principal. Então, espero que agora você perceba qual é a diferença entre o valor e a porcentagem da janela de visualização Ambas as unidades são unidades relativas, mas seu método de trabalho é diferente. Agora vamos falar sobre nossas duas últimas unidades, V max e min. Vmax significa Vpot máximo e min significa mínimo do visor Então, vamos começar a prática. Mas antes de começarmos a prática, quero limpar as unidades Vmax e Win Na tela, você pode ver uma janela do navegador, e a altura da janela Droser é de 300 pixels e a janela D do navegador é de 400 pixels Aqui, criamos o DV dentro dessa janela do navegador E também especificamos um ID para esse elemento Dp, que é 50 Vmax Isso significa que serão necessários 50% da semana do navegador ilop, ou seja , 200 pixels Agora você pode pensar que é muito semelhante à unidade percentual, caso contrário, à unidade VW, mas não é A unidade Vmax sempre ocupará o valor máximo do navegador. Agora a questão é: qual é o significado disso? Como você pode ver, a largura do nosso navegador é maior que a altura do navegador, então será considerado o valor da largura do navegador, e 50 VMX de 400 pixels são 200 pixels É por isso que dizia largura D de 200 pixels. Mas o que? Se eu reduzir a largura da janela do navegador, deixe-me mostrar para você. No próximo exemplo, como você pode ver, aqui eu reduzo o navegador com. Agora nosso navegador nos tornamos 250 pixels e a altura do navegador é 300 pixels. Agora, a altura do navegador é maior do que a erva daninha do navegador. Então, desta vez, a unidade VMx vai medir essa altura em 300 pixels, e o máximo de 300 pixels é 150 pixels Ele definirá o objeto com 150 pixels porque a unidade Vmax sempre seleciona o valor máximo E, ao contrário, queremos dizer trabalho unitário. Então, vamos começar a prática e esclarecer o conceito. Primeiro, vou remover o elemento paren dip, caixa um. Eu não preciso disso. Além disso, vou remover desta seção de estilo. E aqui, eu vou mudar o com 50 Vmax. E aqui, eu vou me sentar tão bem. Agora a questão é: qual é o significado de V max? Além disso, vou mudar a altura para entendê-la melhor. Então, aqui eu vou passar 50 H. VMAX vai levar o máximo Ele verificará a altura e com os dois e usará o maior w. Quero dizer que comparará a altura do ponto de vista e a erva daninha do mirante e escolherá o maior valor E de acordo com o valor maior, ele definirá o peso. Deixe-me te mostrar como. Aqui você pode ver como a altura da janela é maior que a janela. É por isso que eu me concentro nisso. E de acordo com o hub desse valor, ele é definido. Suponha que a largura do nosso visor seja de 200 pixels, mas a altura do nosso visor seja de 300 Então, será necessário um valor de 50 VMX dessa altura, não a largura, e nossa altura é de 300 pixels, então ela será definida com 150 É por isso que você pode ver aqui que usamos 50 VMX, mas isso não ocupa 50% da largura do navegador Ele ocupa 50% da altura do navegador. Mas o que? Se aumentarmos o navegador e o tornarmos maior que a altura do navegador, deixe-me mostrar. Agora vou aumentar a popularidade do navegador. Agora você pode ver que a largura do nosso navegador é maior que a altura do navegador. Então, desta vez, vou levar o navegador com. E de acordo com o navegador com Value, necessários 50 VMX, o que significa hub da largura do navegador Agora você pode notar que a largura do nosso contêiner ocupa 50% do navegador. Mas se eu reduzir a largura do navegador, agora ele não ocupará os 50% da largura do navegador. Porque a altura do navegador é maior que a largura do navegador. Então, agora ele define o com 50% da altura do navegador. Portanto, esse é o uso da unidade Vmax. Para layout responsivo, é muito útil e, ao contrário, temos outra unidade, que sou eu Então, vou duplicar essa linha e comentar a anterior Em seguida, vou configurar esse arquivo e voltar ao meu navegador. E agora vou mudar o nome da unidade. média de 50 significa o mínimo de visualizações do quadro, e vou configurar esse arquivo novamente. Em seguida, volto ao navegador. Agora você pode ver o resultado diferente. Esta unidade é completamente oposta à unidade Vmax. Agora você pode perceber que largura do nosso navegador é menor do que a dica do navegador É por isso que usará um navegador com Win e, de acordo com o navegador com VRU, ele deixará a asa da caixa vazia como Janela W de 200 pixels, depois definirá a largura da caixa em 100 pixels, porque aqui usamos 50% da área do visor. Mas, se eu aumentar a largura do navegador, deixe-me mostrar. E agora vou aumentar o Wi do navegador Depois de aumentar a largura do navegador, agora você pode ver, agora a altura do navegador é menor que a largura do navegador. É por isso que dizia Com esta caixa, 50% da altura do navegador. Se eu reduzir a altura do navegador, como você pode ver, largura da nossa caixa ficará muito pequena porque agora ela ocupa 50% dessa altura. Se a altura for 100 pixels, ele definirá a largura da caixa em 50 pixels. Então é assim que o Vmax e a unidade de tecelagem funcionam. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos a variável CSS. Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 4. Variáveis Css: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS avançado e, neste tutorial, aprenderemos a variável CSS. Com isso, também, aprenderemos onde funcionam. Primeiro, vamos ver, sem variáveis, como podemos gerenciar nosso trabalho. Em seguida, aprenderemos como podemos usar variáveis para facilitar nosso trabalho. E podemos gastar nosso valioso tempo. No lado direito da tela, você pode ver um navegador. Neste navegador, temos um layout básico da web, cabeçalho, manobra, rodapé, barra lateral, conteúdo, título, etc Aqui você pode ver a cor do nosso cabeçalho e a cor do rodapé é semelhante Além disso, quando abro meu carro nesses itens de navegação, você pode ver que a cor de fundo também é semelhante. Basicamente, reutilizamos a mesma cor três vezes. Se eu mostrar meu SDML, como você pode ver, cor de fundo do cabeçalho é cinza Além disso, nossa manobra sobre a cor do fundo é cinza. Com isso, a cor de fundo do rodapé é cinza. Totalmente, usamos a cor cinza três vezes. Agora, suponha que precisamos mudar a cor cinza. Eu quero substituir a cor cinza pela cor verde. Para isso, precisamos alterar o nome da cor três vezes a partir da interseção da barra de navegação e do pé, é um processo muito demorado Para resolver o problema, CSS introduz variáveis CSS e, para criar essas variáveis, você precisa usar uma raiz de nome Posidoclass No Aperclon, você precisa digitar root. Então, dentro dos calices, você precisa declarar as variáveis e pode usar essas variáveis em todo o site Como você pode ver, como criamos uma variável chamada cor principal. E nessa variável, aqui atribuímos um valor e nosso nome de valor é vermelho. Você vai usar qualquer tipo de valor, valor de pixel, valor de string, valor de cor, valor de cor, etc Em seguida, precisamos chamar essa variável em todo o nosso site. E se você precisar mudar a cor , precisamos mudar uma vez. Precisamos mudar em nossa seção de variáveis. Suponha que eu queira a cor verde. Então eu vou substituir o vermelho pelo verde e você vai aplicar a cor verde em toda esta seção. Lembre-se de que, para declarar uma variável, primeiro precisamos digitar dois hífens e, em seguida, digitar o nome da variável. Entre as variáveis, você pode usar hífen, caso contrário, sublinhe, mas não pode deixá-lo em branco . Eu crio uma variável e agora quero usar essa variável. Suponha que eu queira usá-lo na classe A. Para isso, e dentro das cores aqui, declaramos uma cor de nome de propriedade Em seguida, precisamos chamar a função were. Então, dentro do ss redondo, precisamos chamar o nome da variável para aplicar o Val e, automaticamente, ele colocará a cor vermelha nessa posição. Da mesma forma, quero aplicar a mesma cor ao plano de fundo. Na classe B, eu uso uma propriedade chamada cor de fundo. Então eu chamo a função variável e aplico essa seleção e chamo essa variável na seleção principal. Ao mesmo tempo, podemos alterar a cor da fonte e a cor do plano de fundo e criar várias variáveis em nossa tag raiz. Lembre-se de que essa é uma pseudoclasse e podemos chamar essa variável o quanto quisermos Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já criei um documento de estimativa chamado index dot HTM E, como você pode ver no meu navegador, há um layout de site do BSI Aqui usamos a cor cinza três vezes na seção do cabeçalho, na seção vizinha sobre a seção e na seção do rodapé Então, para essa cor, eu quero criar uma variável. Então, primeiro, vou digitar uma classe Posito e o nome da nossa classe Posito é Rob Rube. Então o carnívoro é e nosso varim é multicolorido Então, cólon e eu digitaríamos um V e nossa mãe é cinza. E semicroon 210 nesta linha. Essa é nossa primeira variável chamada cor principal, e eu vou copiar o nome da variável, cor principal. Aqui, definimos com sucesso a variável em nossa tag raiz. É um escopo global. Agora, para chamar essa variável. Para isso, como você sabe, usar a função Were. No plano de fundo do nosso cabeçalho, vou digitar were function. Então, nos vestidos redondos, precisamos passar o nome da variável e o nome da nossa variável é a cor principal. O semicron nesta linha. Se eu definir esse arquivo, como você pode ver, ele gravará o mesmo resultado. Aqui você pode ver o crescimento mudar a chamada em segundo plano. Da mesma forma, vou copiar essa função e agora quero chamar essa variável em nossa seção Her, NebbaHor Em nossa seção de menu, aqui vou chamar a variável novamente. Nós somos a cor principal. Abre o arquivo Como você pode ver, não há alterações se eu Ober meu cassino nesses itens do menu Em seguida, vou chamar a mesma variável em nossa seção de rodapé Para o plano de fundo, a cor principal e a predefinição superior desse arquivo, você pode ver o resultado Agora precisamos mudar essa cor nas seções. Para isso, não precisamos fazer o mesmo trabalho três vezes. Só quero ir para a sessão de variáveis onde declaramos a variável e, a partir desta seção, vou mudar a cor Aqui vou digitar a cor verde. Depois de definir esse arquivo, você pode ver o resultado. Ao mesmo tempo, altere a cor do plano de fundo e a cor do plano de fundo nos diferentes lugares. Já estava na hora. Da mesma forma, você pode criar uma variável para qualquer valor. Desta vez, vou criar uma variável para a fome. Portanto, a cor principal, tipo Imo, hífen, hífen, forma principal. E eu quero a fonte principal, Georgia. Em nossa tag corporal, ela usa a área da família de fontes. Agora eu quero alterar a família da fonte da tag de cabeçalho aqui dentro dessa tag de cabeça, vou usar a família de fontes, então vou chamar a variável Dentro da função, vou jogar como o nome da variável e o nome da nossa variável é a fonte principal. Em seguida, semicone dois neste slide. Depois de definir o arquivo, você pode ver o resultado. Isso mudou a família de fontes da nossa seção de cabeçalho. Esse é o uso de variáveis. E temos que usar dois métodos para criar variáveis. Quando usamos a postitoclass raiz para declarar variáveis, ela definirá o escopo global para nossas É principal, você pode usar essas variáveis em qualquer lugar do seu site. Mas se você quiser usar variáveis em uma área limitada, para isso, precisamos atribuir escopo local à nossa variável. Então, vamos ver como podemos criar uma variável de escopo local. Como você pode ver, em nossa classe A, ela cria uma cor principal variável. Então, dentro da mesma classe, chamamos a variável usando a função were. Agora, essa variável se torna variável de escopo local porque não podemos usar essa variável fora da classe A. Suponha que precisemos estilizar a tag âncora dentro da classe B A. Para isso, também podemos usar essa variável porque Hey chama essa variável dentro da classe B A. Agora, o escopo da variável se torna escopo local Vamos começar a prática e ver como podemos usá-la. Como você pode ver em nossa seção de conteúdo, temos o parágrafo, o título dois também o intestino dez. É essa a seção de conteúdo vou declarar uma variável, e o nome da nossa variável é T color. T colorido e eu quero atribuir a essa taxa variável. Semelhante a essa linha. Agora nossa variável se torna variável de escopo local, e eu quero mudar o degral agora eu quero mudar a cor da fonte do conteúdo. Eu quero a cor vermelha. Mas aqui preciso chamar a função onde dentro do latão redondo, eu quero a cor T. Da mesma forma, quero alterar o título para a cor, que está dentro da parte do conteúdo. Tipo de cura onde eu quero usar a cor T. Com isso, também, vou aplicar essa mesma cor em nossa tag nga, que está dentro do conteúdo Na seção de cores, vou chamar a variável dessa cor T. Abre este arquivo, você pode ver o resultado. Como você pode ver, ele aplicou com sucesso a cor vermelha ou a parte do conteúdo. Mas se eu chamar essa variável fora da seção de conteúdo, deixe-me mostrar para você. Como você pode ver, temos barra lateral e etiquetas de corte. Quero aplicar essa variável na barra lateral e nas tags de corte. Aqui vou chamar a função re, onde eu disse a variável, quero usar a cor T. Realize este arquivo, como você pode ver, ele não altera nossa barra lateral e corta as cores técnicas Porque aqui usamos variável de escopo local e a cor T é a variável de escopo local do conteúdo. Não podemos usá-lo fora da seção de conteúdo. Mas se eu chamar uma variável de escopo de Glover, deixe-me mostrar para você. Aqui eu quero usar a cor principal e quero definir esse arquivo. Depois de definir este arquivo, como você pode ver, alteramos com sucesso nossa barra lateral e as cores tecnológicas É assim que as variáveis funcionam. Espero que agora esteja claro para você como podemos usá-lo. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 5. Função Calc(): Então, eu sou Olá, pessoal. É bom ver você lá. Este é o primeiro tutorial relacionado à função CSS. Na verdade, não é. Já abordamos nossas funções em nosso tutorial anterior. Função Calf, usada fisicamente para cálculos matemáticos Agora a questão é: por que devemos usar cálculos matemáticos? Vamos ver um exame. Então, como você pode ver, na classe A, seu set com 100% menos 18 Esse é um dos exemplos da função calf e, no próximo exemplo, Hero usa 100% dividido por dois Sua principal agora é que a largura se torna 50% e, no próximo exemplo, insira a posição de fundo, ela declare a posição XX e a posição YxS, mas usamos a função calf Aqui eu uso 100% -50 pixels, também 100% -20 pixels para Além disso, podemos usar a função de panturrilha com cores. Deixe-me te mostrar. Como você pode ver, cor de fundo do herói no modo HSL, Heid passa matiz, saturação E para saturação, eu uso função calf para multiplicar por 25% Isso significa que esse valor se torna 50%. Então, espero que agora esteja claro como podemos usar a função calf. E agora vou mostrar que tipo de operadores aritméticos podemos usar na Então, esses são todos operadores aritméticos que podemos usar na função calf, adição, subconstrução, multiplicação Vamos começar a prática e ver como podemos usá-la na linha real. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor light. E dentro dessa página de estimativa, aqui eu crio uma profundidade. E até essa profundidade, definimos com 500 pixels e altura 300 pixels. E dentro dessa profundidade, temos um texto fictício. E agora eu vou mudar com a unidade. Aqui eu vou usar a unidade percentual, 100%. O Uprasep deste arquivo, como você pode ver, ele ocupa 100% da largura do navegador E agora vou adicionar um pouco de preenchimento a isso. Acolchoamento de 20 pixels. À altura desse estilo. Como você pode ver, isso aumenta um pouco nossa largura. E também, você pode ver o quadro escolar que fazemos. Outra pergunta é por que isso aconteceu. Ele não usa nenhum fixo. Porcentagem de uso de Harrow em. Então, por que precisamos usar a barra de rolagem para ver todo o D? Porque Hay usa acolchoamento. Adicionamos preenchimento de todas as direções. Então, ele adicionará preenchimento do lado direito. Ele adicionará preenchimento de 20 pixels do lado direito e 20 pixels do lado esquerdo É por isso que vemos a barra de rolagem abaixo. E agora precisamos e agora precisamos reduzi-lo. Para isso, aqui precisamos usar a função calf. Sono digite CALC. Então, dentro das prensas redondas, primeiro, vou passar o valor percentual, que é 100% Menos do lado direito, eu quero -20 pixels E do lado esquerdo, novamente, vou para -20 pixels E então, como você pode ver, aqui adicionamos bordas de todas as direções. Portanto, você precisa menos uma borda de pixel. Da esquerda e da direita, um pixel. Ure neste arquivo, agora você pode ver o sm. Ele remove nossa barra de rolagem e também usa 100% de maconha. Sim, ocupa 100% de largura e, a partir de 100% da erva, Hero -42 pixels Se eu mostrar minha tela inteira, você pode ver o th Se eu aumentar, caso contrário, diminuo a janela do navegador, como você pode ver, não há barra de rolagem em seu navegador. Além disso, você pode ver até 100% de maconha, que tinha um preenchimento de 20 pixels em todas as direções Portanto, esse é um dos bons usos da função da panturrilha. E agora eu quero centralizar vertical e horizontalmente essa caixa Para isso, precisamos usar valor fixo. Então, vou duplicar essa linha e comentar a anterior E aqui vou usar um valor fixo. Valor fixo, 500 pixels. Além disso, vou remover todos os dados dentro dessa tag profunda. Então, a partir daí, vou remover todos os dados. Então, fora da tag profunda, vou pegar uma tag de parágrafo, P. E dentro dessa tag de parágrafo, vou digitar quase 1.500 malditos textos. Ganhe 1.500. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora, vamos ativar a capa inteira para entender um pouco. E agora eu quero tornar absoluta a posição profunda. Além disso, precisamos colocá-lo centralizado horizontal e verticalmente Para isso, vamos até a edição de código do estúdio Viger. Então, aqui, eu vou usar a posição absoluta. E da esquerda, eu vou pegar 50%. Do topo, eu vou pegar 50%. Defina este arquivo, você pode pensar que ele vai para o centro das profundezas, mas não está. Se eu mostrar meu navegador, como você pode ver, ele não está centralizado profundamente. Porque se eu desenhar uma linha dessa posição para essa posição e dividir nosso navegador em duas partes, agora você pode ver nossos 50% começando nessa posição. De cima para a esquerda, é o ponto central. É a posição de 50%. É por isso que começamos profundamente nessa posição. Então, para alinhá-la horizontalmente e verticalmente, precisamos subtrair metade da largura dessa profundidade dos 50% largura dessa profundidade dos Então, vamos ao estúdio visual Aqui vou usar a função calf El 50% menos, como você pode ver, nossa largura é de 500 pixels Então, daqui em diante, eu vou para -250 pixels. Da mesma forma, do alto. Então, copie o valor. Então, do topo, eu quero -150 pixels. E também a partir daqui, precisamos menos o preenchimento de -20 E também, vou menos um pixel botel menos um pixel menos E eu vou fazer a mesma coisa com nossa propriedade principal. Então, vou copiar esta seção e colá-la aqui. E desta vez, precisamos de menos 150 pixels. Porque definimos a altura de 300 pixels. Então, depois de configurar esse arquivo, se eu mostrar meu navegador, como você pode ver, nós o centralizaremos perfeitamente. E se eu responder nossa tela, como você pode ver, ela é reproduzida automaticamente no centro Depois de redimensionar nossa janela, ela centraliza automaticamente na vertical e na horizontal Então esse é um dos exemplos da função calf. Agora, deixe-me mostrar outro exemplo. E agora vou fixar uma profundidade sem usar a posição fixa. Mas também vou tornar nosso layout flexível. Para isso, precisamos contar a três esmolas profundas. Deixe-me resumir. Então, eu não preciso mais desse parágrafo, então vou remover esse parágrafo. E essa é a profundidade número um, e vou definir um cabeçalho de nome de ID. Então eu cavei esse D para digitar. E esta é a nossa segunda profundidade, e aqui vou dizer que é conteúdo de identificação. Em nossa última profundidade, vou definir ID, rodapé. E eu vou dizer isso. E também vou comentar toda essa seção. Aqui eu comento toda a seção do box time. E também vou digitar um texto. É esse elemento profundo. Para a seção de cabeçalho, vou digitar cabeçalho. Cabeçalho, para conteúdo, vou digitar contin. E para rodapé, vou digitar rodapé. Então, primeiro, vou estilizar a seção do cabeçalho, cabeçalho Haztag Em vez disso, vou adicionar uma borda às operadoras. Borda, um pixel. E eu quero uma borda sólida. Sólido e preto. Em seguida, vou definir a cor de fundo. Fundo verde. E eu vou pegar 100% e altura 100 pixels. E da mesma forma que na parte do conteúdo, vou duplicar esta seção e o Hemo para passar a cor de fundo vermelha Além disso, vou pegar 100% de nós e, para a altura, vou usar a função da panturrilha Então, primeiro, vou alterar o nome de ID contido. Em seguida, vou estilizar o pêlo como uma seção. Tem uma etiqueta de quatro. E eu quero a cor azul. Então, vamos configurar o arquivo e voltar para o navegador. Então, aqui você pode ver três elementos profundos, e eu vou remover esse texto. Então, vou comentar essa tag H one e definir esse arquivo. Vamos voltar ao navegador e agora quero atribuir a esse elemento profundo de conteúdo o espaço restante. Para isso, precisamos usar a função calf. Então, em nossa seção de conteúdo, aqui eu vou dizer que 100 VH significa altura do iPod Se eu definir esse arquivo, como você pode ver, nossa seção de conteúdo ocupa 100% da altura do eBoard, mas tinha uma barra de rolagem Eu não quero essa barra de rolagem. Eu quero um cabeçalho fixo e rodapé. Para isso, precisamos subtrair a altura do cabeçalho e do rodapé dessa barra de conteúdo Então, vamos para o estúdio de vistos C. Primeiro, vou remover todas as fronteiras. Então, eu comento sobre as fronteiras. Eu não preciso. Então eu vou pegar Marzin zero Então, a partir da tag body, vou digitar margem zero. Depois disso, aqui vou digitar a função Cal. Dentro da resolução redonda está 100 VH menos eu quero dois menos a altura do cabeçalho, e a altura do cabeçalho é 100 pixels Além disso, quero menos a altura do rodapé, e nossa altura do rodapé é de 100 Depois de passar este arquivo, se eu te mostrar meu navegador, opa, eu fiz uma mística boba. Se eu mostrar meu editor de código, como você pode ver, aqui usamos a função cal em Precisamos usar a função cal em altura. Então, vou copiar esta seção. Basicamente, vou cortar essa seção e digitar 100%. Eu quero 100%. Então, em nossa altura, vou usar a função calf Eu pressiono neste arquivo, se eu mostrar meu navegador, você pode ver o resultado. Aqui você pode ver nossa seção de conteúdo ocupando o espaço restante, além disso, não temos nenhuma barra de rolagem. Se eu torná-lo responsivo, como você pode ver, nossa seção de cabeçalho e rodapé é fixa, mas nossa parte de conteúdo mudará altura de acordo com o espaço restante Portanto, esse é um dos bons exemplos da função cal. Espero que você entenda. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo vídeo. 6. Função Min(): Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à função CSS. E neste tutorial, abordaremos a função mínima, a função máxima e a função clam Agora vamos ver o que é função média. O nome completo da função Mint é mínimo poço. Significa a menor vontade. Basicamente, nessa função, passamos vários preenchimentos numéricos e essa função retorna o menor testamento Como podemos usar essa função em nossos projetos de ondas? Suponha que tenhamos uma profundidade e, nessa profundidade, eu queira adicionar largura dinâmica e, para isso, não vamos usar o media quad Para isso, essa função é introduzida. Suponha que, nesta profundidade, eu atribua usando a função média Op, 50% ou 500 pixels. Então, significa que a função implementará o valor mais baixo. Deixe-me explicar com mais detalhes. Agora, como podemos medir os 50%? Ele usará a largura de 50% do elemento principal profundo. Caso contrário, temos um navegador e, nesse navegador, temos apenas um profundo e, seguida, precisamos contar a largura da janela de visualização desse navegador Nesse caso, a largura do navegador é a mãe dessa profundidade e, em seguida, será comparada se 50% da janela do navegador for maior que 500 pixels ou não. Se for maior que 500 pixels, ele escolherá 500 pixels porque a função Min sempre escolhe o valor mais baixo. Caso contrário, se 50% for menor que 500 pixels, ele terá 50% de largura. É bastante semelhante ao Vmax e à unidade de tecelagem, e já aprendemos sobre isso em nossa seção de unidades Agora, deixe-me explicar isso de uma forma mais autêntica. Suponha que nosso navegador 900 pixels e, se extrairmos 50% de 900 pixels , ele retornará 450 pixels. Em seguida, a função principal verificará o menor valor. Como você pode ver, 450 é menos do que 500. Em seguida, ele atribuirá a largura D de 450 pixels. Ao contrário, se a largura da nossa janela de visualização for de 1.200 pixels, extraímos 50% de 1.200 Como você pode ver, ele reajusta 600 pixels e, como você sabe, 600 é maior que 500 pixels Nesse caso, aplicará 500 pixels de largura a esse D. Então, essa função sempre retornará dinamicamente o valor mínimo, e podemos usar essa função com diferentes tipos de propriedades Podemos usá-lo com margem, preenchimento, tamanho, sombra da caixa, etc Também podemos usar essa função sempre que usarmos filmes numéricos Então, sem perder seu tempo, vamos começar a prática. Como você pode ver, lado a lado, abro minhas visualizações para seu editor de código e meu navegador usando a extensão if server, e eu já crio um documento de estimativa chamado index dot stem dentro nossa página de estimativa, temos uma tag profunda E nessa tag profunda, atribuímos uma classe chamada element. E também digitamos isso dentro dessa tag profunda hello world. Em seguida, adiciono um pouco de preenchimento à nossa tag corporal e defino a margem zero Agora eu quero atribuir um nós dinâmico a esse elemento. Isso significa que eu quero mudar o elemento we sempre que mudamos a forma do vento do navegador. Para isso, primeiro, vou selecionar o elemento, a classe do elemento, a classe do elemento, o elemento ponto Então, dentro do CalibraSso, a primeira propriedade é o plano de fundo. Plano de fundo, e aqui vou usar cinza claro. Com isso, vou usar outra propriedade, Wheat, e quero cortar a erva daninha dinâmica Para isso, vou usar a função média. E, como você sabe, na função Min, precisamos passar vários valores. Primeiro valor, vou pegar em porcentagem, 50% e segundo valor, vou pegar em pixels, que é 500 pixels. Não é obrigatório que você escolha o primeiro em porcentagem e o segundo em pixels Você pode usar qualquer tipo de valor. Aqui você pode considerar o valor em pixels, caso contrário, o valor em porcentagens Depende de você. Se eu definir esse arquivo com isso, vou atribuir uma pequena altura. Altura aqui eu vou usar 400 pixels. Defina este arquivo no topo, como você pode ver, ele atribui uma largura. Agora vou abrir minha seção de elementos para medir a largura desse elemento. Inspecione a seção Elemento. Sempre que abro meu causar nesse elemento, como você pode ver, ele está escrito 380 por 400. Como você sabe, definimos a altura 400 e nossa função principal atribui 380 pixels largura porque a largura do nosso navegador de palavras é 820 pixels e ocupa 50% da largura do navegador Como estamos no padding, é por isso que o valor é menor que 50% Está escrito 480. Mas se eu remover o preenchimento e depois definir esse arquivo, agora eu abro meu Carson nele, e agora você pode ver que está escrito em 410 Ele ocupa 50% desse navegador. Então, função mínima, pegue o valor mínimo. Mas o que? Se eu aumentar a largura do navegador, deixe-me mostrar para você. Agora vou aumentar o navegador W. Como você pode ver, depois de aumentar a largura do navegador, desta vez, nossa função não pega os 50% do navegador W. Se eu colocar meu carro nele, como você pode ver, ele 500 pixels de largura e 400 pixels de altura porque nossa largura total estimada da estrutura é de 1.518 E se você retornar os 50% de 1.518, então seriam 759 759 pixels é maior que 500 pixels. E, como eu disse, nossa função principal sempre assume o valor mínimo. Nesse caso, 500 é o valor mínimo. É por isso que dizia 500 pixels. Espero que agora você entenda. Mas se eu reduzir o navegador novamente, agora você pode ver que a largura do nosso visor é de 614 pixels e 50% de 640 pixels é de 307 pixels Como eu disse, essa função sempre assume o valor mínimo. É por isso que dizia largura do elemento, 50% da janela do navegador. Espero que o tópico principal da função esteja claro para você. Vamos dar uma olhada no código do Visual Studio. Agora vou conectar esse elemento profundo em outro elemento profundo. Aqui, usamos isso profundamente diretamente em nossa etiqueta corporal. Vou cortar essa parte, cortar e primeiro, vou atribuir um ID a esse Astag profundo e nosso nome profundo é paren Então, dentro desse elemento profundo, vou colar o profundo. Agora temos o elemento pai profundo e o elemento filho. Agora vou atribuir um peso fixo a essa profundidade parental. Aqui vou digitar AtagParin. Então, dentro da irmã Cal, primeiro, eu vou atribuir, nós, e eu vou atribuir com 600 pixels. Para entender essa estrutura, também vou atribuir uma borda. Borda, quero uma borda sólida de um pixel e quero a cor preta. E eu vou configurar esse arquivo. Se eu mostrar meu navegador, como você pode ver, nosso Wi pai tem 600 pixels e 50% da largura principal é 300 pixels, e a função mínima sempre retorna o mínimo, e 300 é o valor mínimo comparado a 500. É por isso que em nosso elemento childp, dizia que 50% de largura significa 300 pixels Mas o que? Se eu aumentar a largura do elemento parentip, deixe-me mostrar para Desta vez, vou definir a largura do elemento pai, 1.200 pixels, e vou submeter esse arquivo Depois de definir este arquivo, se eu mostrar meu navegador, agora você pode ver, agora ele atribui 500 pixels de peso a esse elemento Dip filho Se eu mostrar meu elemento de console e meu cazar sobre esse elemento filho, como você pode ver, ele tem 500 pixels por semana, porque 500 pixels por semana, porque largura do nosso elemento pai é 1.202 Por que está em 1.202? Porque pegamos a borda de um pixel à direita e levantamos. É por isso que nossos pais totais são cento e dois. Se extrairmos 50% de cento e dois , retornará 601 e 601 é maior que E a função principal sempre retorna o valor mínimo. 500 é o valor mínimo. Agora vou reduzir a largura da janela de visualização. Aqui eu disse que a largura da janela de visualização é de 718 pixels. Se eu passar meu cartão sobre esse elemento, como você pode ver, ele ainda retornará a largura do elemento filho de 500 pixels. Agora, o quotien é o motivo pelo qual está escrito 500 pixels. Porque, como eu disse, função média funciona de acordo com o elemento pai e, desta vez, nosso elemento pai é tão profundo, não a janela do navegador. E Hero diz valor fixo. E é por isso que, de acordo com o valor fixo, é escrito 500. E se eu tentar reduzir cada vez mais o objeto da janela , meus carros estão nele, ainda assim, você pode ver que está escrito “erva daninha de 500 pixels porque em nossa etiqueta principal, herói usa maconha fixa Então, espero que agora esteja claro 14. Como podemos usar a função média? Obrigado por assistir a este vídeo, fique ligado no próximo tutorial No próximo tutorial, abordarei a função máxima. 7. Função Max (): Voltando, pessoal, esse é outro tutorial, e neste tutorial, vamos falar sobre a função máxima. Essa função funciona ao contrário da função principal, e o significado completo da função é máximo el. Nessa função, passamos vários valores numéricos e é escrito a renúncia máxima Suponha que tenhamos o mesmo tipo de profundidade em um navegador, agora eu quero dizer uma edição dinâmica desse elemento profundo. E da mesma forma, quero dizer que é o valor máximo. E nisso, aqui usamos a função max. E nessa função máxima, temos que atenuar duas ondas, 50% e 500 pixels Então, como você sabe, o navegador precisará de 50% de largura. Suponha que a largura do nosso navegador seja de 900 pixels e, se obtivermos 50% de 900 , isso será feito para 50 pixels. Em seguida, a próxima função vai verificar, qual é o valor máximo 450, caso contrário, 500. E, como você sabe, 500 é maior que 450. É por isso que vamos atribuir 500 pixels a esse D. Da mesma forma, se o navegador tiver 1.200 pixels e extrairmos 50% dos 1.200 pixels, retornaremos 600 E, como você pode ver desta vez, 600 é maior que 500. Então, ele atribuirá 600 pixels de largura a esse D. Então, vamos começar a prática e tentar entendê-la. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server e já crio um documento de estimativa chamado indextdt HTML Então, como você pode ver em nossa tag corporal, temos uma tag profunda, e aqui está a classe City para esse elemento profundo. E como você pode ver, neste elemento, dizemos en estático. E agora eu quero dizer maconha dinâmica. Para isso, desta vez vou usar a função Max. Máximo. Essa função é completamente oposta à função mínima. Nesta função, aqui eu preciso passar por várias válvulas. Nosso primeiro valor é 50% e nosso segundo valor é 500 pixels. Se eu definir esse arquivo, como você pode ver, não haverá alterações porque nosso valor estático era de 500 pixels, mas, como você sabe, função max sempre assume o valor máximo. Se eu mostrar minha seção de elementos, deixe-me mostrar e aqui você pode ver desta vez a largura do nosso navegador é 958 Os 50% de 958 estão abaixo de 500 pixels. É por isso que nossa função max escolhe o valor máximo, que é 500. Mas se eu reduzir a largura do meu navegador, deixe-me mostrar para você. Agora você pode ver que a largura do nosso navegador é 600 pixels e 50% de 600 pixels é 300. Então, desta vez, nossa função máxima escolherá 500 porque 500 é maior que 300. E lembre-se de que as funções máxima e mínima funcionam acordo com o tamanho do elemento pai. Deixe-me te mostrar. Aqui, vou pegar outra tag profunda e mover essa tag profunda para dentro dessa tag de elemento pai, algum tipo de Dev que também vou atribuir a uma classe principal. Em seguida, vou cortar esta seção e colá-la dentro do parentan. Vou definir esses cinco Agora vou estilizar essa etiqueta principal. Então eu copio essa etiqueta principal e o HemotypeParnt. Então, primeiro, dentro das clavas, vou usar a propriedade border, border, e quero um pixel, borda sólida Com isso, eu quero a cor preta. Em seguida, vou definir uma altura estática de W W W e Hemo de 700 pixels, 400 pixels Vou configurar esse arquivo. Agora vou configurar esse arquivo e ativar a tela cheia do navegador. Se eu reduzir a largura e a altura do navegador, isso não afetará esse elemento profundo porque desta vez temos um elemento profundo pai e a largura desse elemento parentip é 700 pixels e 50% de 700 pixels são 350 pixels Como você pode ver, 500 pixels é maior que 300 pixels. É por isso que dizia que a largura do elemento filho era 500 pixels. Funciona de acordo com o contêiner Deep principal, e já aprendemos sobre isso em nosso estúdio de regressão Agora vou te mostrar outro exemplo. Vamos ao código de estúdio do usuário. Então, primeiro, vou comentar esta seção principal. Além disso, vou remover essa etiqueta principal do nosso corpo. E agora vou usar a função mínima com a função máxima. Basicamente, quero dizer que quero usar as duas funções ao mesmo tempo. Desta vez, quero dizer 80% do valor. Nosso primeiro valor é 80%. E em nosso segundo valor, aqui vou usar a função mínima. Então, dentro da roupa, também, vou passar para os dois Nosso primeiro valor é 50% e nosso segundo valor é 1.000 pixels, e eu vou definir esse arquivo. Outra questão é que tipo de valor retornará? No início, ele executará a função mínima. Suponha que nossos navegadores tenham 1.200 pixels e nossa função mínima retorne o valor mínimo 50% de 1.200 pixels são 600 pixels. função mínima selecionará 600 pixels e, em seguida, definirá 600 pixels como segundo parâmetro da função máxima. Para entender melhor, vou duplicar essa linha e comentar e comentar uma das linhas Essa função mínima selecionará o valor mínimo. Isso significa que se nosso navegador tiver 1.200 pixels, retornará 600 pixels E 80% de 1.200 pixels são 960 pixels. Vou fazer esse arquivo novamente e aqui vou digitar 960 pixels Como você sabe, a função max sempre indica o valor máximo, ela dirá nosso elemento com 960 pixels Vamos voltar ao navegador e ver o que ele escreveu. Como você pode ver, nosso navegador tem cem pixels. Se eu ligar meu console e passar o cursor nesta seção, se você medir a largura desse elemento, ele se tornará 960 pixels Mas o que? Se eu reduzir o primeiro valor da função máxima, deixe-me mostrar para você. Desta vez, vou passar dos 20%. Agora, 20% de 1.200 pixels são 240 pixels. Aqui vou digitar 240 pixels. Desta vez, nossa função máxima selecionará o valor máximo, que é 600 pixels. Se eu mostrar meu navegador, como você pode ver, desta vez nosso elemento é de 600 pixels. É assim que podemos herdar várias funções ao mesmo tempo. Aqui usamos a função máxima e a função mínima juntas. Além disso, se você quiser passar o terceiro valor nessa função, sim, você pode. Então, aqui, vou usar outra função, que aprendemos em nosso tutorial anterior, e vou usar a função Cal, CALC Então, dentro das prensas redondas, eu quero adicionar 500 pixels com 500 pixels E eu vou configurar esse arquivo. Depois de definir esse arquivo e depois de calcular os dois valores de V, ele retornará 1.000 pixels. Como você pode ver, nosso valor máximo escolherá desta vez 1.000 pixels porque esse é o valor máximo. Após a etapa deste arquivo, se eu mostrar meu navegador, como você pode ver, agora, nosso elemento com se torna 1.000 pixels. Basicamente, nesses exemplos, usamos a função máxima e mínima para o peso do elemento, mas desta vez, vou usá-la com preenchimento Vou comentar essa linha e depois da altura, vou digitar preenchimento Padding e eu vamos usar a função max, Max. Então, dentro das redondas, nosso primeiro valor é 30 pixels em nosso segundo valor aqui, vou usar a altura de cinco visores, V g. Já aprendemos sobre essa unidade em nossos túbulos V g. Já aprendemos sobre essa unidade em nossos Desculpe, não é a altura da janela de visualização. Vou usar o visor duplo. Então, predefina esse arquivo Se eu voltar ao meu navegador, aqui você pode ver se eu sobreponho meu carro sobre esse elemento, você pode ver um preenchimento fixo nesses elementos, e se eu diminuir o tamanho da janela, como você pode ver, isso reduz o preenchimento E se eu aumentar o tamanho da janela, agora você pode ver que ela aumenta o tamanho do preenchimento Mas se eu reduzir mais, em um ponto, nosso valor de preenchimento se tornará 30 pixels Porque se eu te mostrar um editor de código, aqui eu defino o valor mínimo de 30 pixels. Agora, vamos tentar entender a mesma coisa com porcentagem. Novamente, vou pegar essa linha e, desta vez, vou reduzir a altura para 100 pixels e comentar a linha anterior. E em nosso segundo valor, vou pegar 10% e vou definir esse arquivo. Suponha que nosso navegador tenha 1.000 pixels. Dentro do comando, vou digitar 1.000 pixels. E os 10% de 1.000 pixels são 100 pixels. Se nosso pote de visualização for de 1.000 pixels, acordo com os 10%, nosso segundo valor se tornará 100 pixels. Então, nossas formas máximas terão o maior valor de 100 pixels. Com isso, também vou aumentar nosso primeiro valor. Aqui vou digitar 40 pixels. Depois de definir esse arquivo, como você pode ver, nosso valor de 10% ainda é maior que 40 pixels. Se eu mostrar meu navegador, agora você pode ver que ele tinha um preenchimento de 100 pixels em todas as direções E se eu aumentá-lo, ele adicionará mais preenchimento e, se eu diminuir, reduzirá nosso preenchimento Mas em um ponto, se eu ficar abaixo de 400 pixels, agora você pode ver que nossa inicialização de visualização está abaixo de 400 pixels. 10% de 400 pixels são 40 pixels, mas nossa área de visualização é 388 e 10% de 88 pixels é 38,8 pixels 38,8 pixels é menor que 40 pixels. É por isso que, se você notar quando eu supero esse elemento, como você pode ver, nosso preenchimento é de 40 pixels Se eu reduzir mais, ainda assim você pode ver que nosso preenchimento é de 40 pixels Mas se eu aumentar a largura do navegador, como você pode ver, quando coloco meus carros nele, agora nosso preenchimento não é fixo, ele cresce continuamente quando eu aumento o tamanho do meu navegador Agora vou usar o mesmo valor com a função mínima. No meu codificador do Visual Studio, aqui vou duplicar essa linha e comentar a anterior Desta vez, vou usar a função Min. Como você sabe, a função Min sempre retornará o valor mínimo. Até a etapa deste arquivo, se eu mostrar meu navegador e abrir meu carro nesse elemento, agora você pode ver o teclado, nosso preenchimento é fixo, 40 pixels Porque desta vez usamos função mínima e é escrito o valor mínimo. Ele disse, preenchimento de 40 pixels neste elemento. Agora vou usar essa função com uma forma abreviada. Vamos ao código do Visual Studio e eu vou pegar essa linha novamente. Desta vez, eu quero usar taquigrafia. Então, da esquerda para a direita, quero usar a função mínima e, de cima para baixo, vou usar dez pixels. Vou vasculhar esse arquivo. Se eu voltar para o meu navegador e passar o mouse sobre ele, agora você pode ver de cima para baixo, ele adiciona 40 pixels e, para a esquerda e para a direita, ele adiciona dez pixels Então, quando aumentamos, caso contrário, diminuímos o tamanho da janela do navegador e, de acordo com o tamanho, ela muda o preenchimento superior e inferior, mas fixa o preenchimento de dez pixels à esquerda e à direita É assim que podemos usar essas funções. Graças a assistir a este vídeo, fique ligado em nossa próxima função No próximo tutorial, abordaremos a função Clam 8. Braço(): Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado às funções. E neste tutorial, vou abordar a função clam Na função KLM, podemos definir valor mínimo e o valor máximo entre eles, podemos usar outra onda e chamá-la de valor de referência Se você quiser definir um intervalo específico para isso, precisamos usar o valor de preferência. Deixe-me mostrar um exemplo. Suponha que temos uma parte profunda de nossa página da web e eu queira definir um valor dinâmico para esse elemento profundo. Como você pode ver, usando a função glam, primeiro definimos o limite mínimo e, por último, definimos o limite máximo valor mínimo significa, não podemos criar uma largura profunda do elemento abaixo de 350 pixels e o valor máximo significa, não podemos usar mais de 500 pixels de largura para essa profundidade. E entre eles, aqui usamos o valor de 50% e o valor de 50% vem de acordo com a área do viewpod do navegador Portanto, sempre que nosso navegador tiver 700-1 mil pixels de largura , nesse caso, ele usará Preffer Win porque 50% de 700 é 350, então não podemos usar menos de 350 valores e 50% de 1.000 são 500 e não podemos usar mais de 500 valores para essa visualização, porque aqui está definido um limite para isso Deixe-me mostrar outro exemplo. Suponha que nosso navegador tenha 900 pixels e 50% de 900 pixels sejam 450 pixels. Se o ebot do nosso navegador tiver 900 pixels, nesse caso, ele definirá a largura de 450 pixels para o elemento profundo Da mesma forma, em nosso próximo exemplo, nosso quadro de visualização tem 1.200 pixels e 50% de 1.200 pixels é 600 pixels Como você pode ver, 600 pixels é maior que 500, significa que vai ultrapassar o limite máximo. Portanto, não vai definir 600 pixels para esse elemento de imersão. Vai definir 500 pixels porque definimos o limite máximo. Da mesma forma, se nosso navegador 600 pixels e extrairmos 50% de 600 pixels, ele se tornará 300 pixels. E de acordo com o limite mínimo, ele não definirá 300 pixels de largura para esse contêiner porque , de acordo com o limite mínimo, ele definirá 350 pixels. Sem perder seu tempo, vamos começar pela prática. Então, como você pode ver, lado a lado, abro meus sais no seu editor de código e meu navegador usando a extensão if server, e eu já criei um documento HTML, indextree E eu já crio um elemento. Primeiro, vou levar D para esse elemento, erva daninha, e para D vou usar a função CAM. CAM. Então, dentro dessa função clam, primeiro, vou definir o valor mínimo e nosso valor mínimo é 350 pixels Além disso, nosso valor máximo é 500 pixels e eu quero um véu preferido Quero um valor preferencial entre esses dois V. Aqui vou definir 50% e vou definir esse arquivo. Vamos abrir a seção de elementos. Inspecione o elemento Se eu passar o cursor sobre ela, como você pode ver, agora a janela do nosso navegador tem 908 pixels Agora vou deixar nossa janela em tela cheia. Até deixar nossas janelas em tela cheia, como você pode ver, agora a largura da nossa janela é de 1.276 e os 50% de 1.276 estão acima dos 600 pixels Se eu exagerar no meu Gara neste elemento, como você pode ver, ele dizia que a largura do elemento era 500 pixels porque definimos o limite máximo e aqui usamos a função Cal para definir o valor máximo Não podemos ir além de 500 pixels. Da mesma forma, se eu reduzir o tamanho da minha janela abaixo de 1.000 pixels, agora você poderá vê-la definir 50% da largura desse contêiner. Vamos fazer nossa janela de 800 pixels para entendê-la melhor. Você pode ver que nosso quindo W tem 800 pixels. Se eu abrir meu cursor nesse elemento profundo, como você pode ver, nosso elemento profundo tem 400 pixels. Eu disse o valor preferencial, que é 50%. Mais uma vez, vou reduzir a erva daninha na janela. Vou fazer com que seja de 500 pixels. Como você sabe, 50% de 500 pixels são 250 pixels, mas estamos usando a função glam e definimos o mínimo para esse elemento e a largura mínima é 350 pixels É por isso que desta vez nossa função não usa o valor preferencial, ela usa o valor mínimo e define 350 pixels com esse elemento. E podemos usar a função clam com propriedades diferentes. Podemos usá-lo como preenchimento, mesclagem, tamanho da fonte, etc. Mas neste exemplo, vou usá-lo com o tamanho da fonte. Vou comentar esta linha. Em seguida, vou pegar o tamanho da fonte e usar a função clam Em seguida, os vestidos de penugem, primeiro, veremos o valor mínimo e nosso valor mínimo é 16 pixels. Aqui vou usar o tamanho mínimo de fonte de 16 pixels, e nosso valor máximo é 50 pixels e também vou usar o valor preferencial, que é cinco VW significa cinco portas com Lembre-se de que o tamanho da fonte não será inferior a 15 pixels e não ultrapassará 50 pixels. Vamos pegar o arquivo e voltar para o meu navegador. Se eu mostrar meu navegador, como você pode ver, você pode ver o tamanho da fonte. Se eu expandir com este navegador, como você pode ver, de tempos em tempos, ele aumenta como você pode ver, de tempos em tempos, o tamanho da fonte. Mas, em determinado momento, isso impedirá o aumento do tamanho da fonte. Se eu passar meu carro sobre ele, como você pode ver, agora o tamanho da fonte é de 50 pixels Da mesma forma, se eu diminuir a largura desse navegador e colocar o cursor nele, agora você poderá ver o tamanho da nossa fonte se tornar 16 pixels De acordo com a altura e a largura do visor, o tamanho da fonte foi alterado e também podemos definir limite superior e inferior para esse tamanho de fonte Agora você pode ver que a largura do nosso visor é de 692 pixels. Se eu colocar o cursor sobre ele, como você pode ver, nosso tamanho de fonte é de 34,6 pixels, podemos alterar dinamicamente o tamanho da fonte e também podemos Espero que agora esteja claro para você como podemos usar a função clam Obrigado por assistir a este vídeo, fique para ver nosso próximo tutorial. 9. Função CSS Attr(): Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à função CSS. E neste tutorial, aprenderemos a função Otter A função ATTR significa função de atributo. Agora vamos ver como podemos usar essa função na prática. Como você pode ver, lado a lado, abri meu editor de código do Visual Studio e meu navegador usando a extensão de servidor ativo e já criei um documento HTML chamado index TML Como você pode ver em nossa tag corporal Abe, tag de parágrafo, P, e ela digite hello word. Em nossa seção de estilo, como você pode ver, nossa família de fontes, nossa família de fontes de corpo é L e também defino um pouco de preenchimento e em nossa tag de parágrafo, aqui eu defino o tamanho da fonte de 35 pixels e defino uma margem E agora eu quero usar a função de atributo. Primeiro, vou usar um atributo na tag de parágrafo. Vou usar o atributo de classe, class next, e vou atribuir um nome de classe que é taste. Agora vamos mostrar como podemos usá-lo. Primeiro, vou selecionar o parágrafo. Então eu vou usar uma classe Posido, que é chamada depois Então, dentro dessa classe posito, como você sabe, quando usamos after posito plus ou before posito class, usamos Então, vou digitar conteúdo. O conteúdo é necessário se usarmos posição superior antes do elemento posito Aqui eu vou chamar a função de atributo ATR, eu quero usar qual atributo eu quero usar o atributo de classe. Classe. Se eu definir esse arquivo, como você pode ver, Upper Hello World, ele imprime o sabor. Vamos mudar a cor da fonte para entender melhor a cor e eu vou imprimir em verde. Agora você pode vê-lo imprimir Hover a partir do parágrafo e, em seguida, imprimir o nome da classe que atribuí a este parágrafo Com a ajuda da função de atributo, podemos imprimir o atributo de tag específico no parágrafo. Na maioria dos casos, usamos essa função com conteúdo. Caso contrário, podemos usá-lo com JavaScript. Se eu usar outro atributo, suponha que eu vou atribuir ID DM desta vez, quero imprimir o nome do ID Se eu passar para dentro do atributo função, ID, e este arquivo subir, agora você pode vê-lo imprimir hello word, o nome de ID Demo. Usando a função de atributo, podemos extrair o valor de qualquer atributo. Agora vou te mostrar outro exemplo. Quando I H são minhas cartas que estão neste parágrafo , quero mostrar o nome do atributo. Para isso, precisamos usar o seletor de posição Ober. Deixa eu te mostrar P, dois pontos. Vou configurar esse arquivo. Depois de definir este arquivo, se eu revisar meu CarsR neste parágrafo, você poderá ver o resultado Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial. 10. Seletor de combinador CSS: E a partir deste tutorial, iniciaremos os seletores avançados de CSS Espero que você já saiba que os IDs de classe N são seletores, mas o CSS vem com alguns seletores mais avançados, e aprenderemos sobre isso em nossos próximos Agora, vamos falar sobre categorias de seletores de CSS. Aqui você pode ver um total de quatro tipos de categorias de seletor de CSS O primeiro é um seletor simples. Em seguida, vem o seletor combinador, o seletor de atributos, o seletor de elementos posito da classe posito E neste tutorial, vamos aprender seletor simples e seletor combinador Agora vamos ver que tipo de seletor de símbolos temos. Como você pode ver, temos que dizer quatro tipos de seletor de símbolos, seletor de tipo, seletor de classe, seletor ID e seletor universal E eu sei que você já está familiarizado com nossos três primeiros seletores, seletor de tipo, seletor de classe e seletor de ID Se você não estiver familiarizado com esses seletores, não poderá aprender seletores avançados E se você não está familiarizado com isso, então deixe-me mostrar um pouco sobre E. Você pode ver, este é o exemplo do seletor de tipo No seletor de tipo, precisamos usar o nome da tag. No nosso caso, aqui usamos parágrafo significa tag P. Então, no Cal Resist, precisamos usar a propriedade e Val. Da mesma forma, para o seletor de vidro, precisamos usar o nome da classe e, para selecionar o nome da classe, precisamos usar ponto sin, ponto o nome da classe Em seguida, defina as calibragens, precisamos passar a propriedade e V. E também, temos um seletor simples, que é o seletor de ID Para o seletor de ID, primeiro, precisamos digitar has tag, depois precisamos pegar o nome do ID No nosso caso, caixa. Então, nas calibrações, precisamos usar a propriedade e V. Eu sei que você já está familiarizado com isso, mas o seletor principal que vou usar é o seletor universal Representamos esse seletor usando o seno estelar. Esse signo é usado para direcionar todas as tags ESTiml em seu documento Vamos entender com um exemplo real. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if several, e já crio um documento de estimativa chamado index dot TML E neste documento de estimativa, crie um layout básico da web. Temos a seção de cabeçalho, a seção netbur, a seção de conteúdo, a seção barra lateral e a seção de rodapé Então, aqui vamos usar nosso seletor universal. Então, na parte superior da etiqueta de estilo, vou usar o seletor Estrela dentro da resistência colorida. Aqui eu vou usar uma propriedade chamada color. Cor, y. Depois de subtrair essa bobina, como você pode ver, ela converte toda a cor da fonte do nosso navegador em vermelho Mas aceite a barra lateral porque, em nossa barra lateral, já usamos a propriedade color. E agora eu quero adicionar uma borda a cada elemento. Para isso, em nosso seletor universal, vou digitar borda Borda de um pixel, e eu quero uma borda sólida, e a cor da nossa borda é verde. Abre este arquivo, você pode ver o resultado. Aqui você pode ver que havia bordas em todas as tags em nossa página da web. Tinha uma borda em nossa tag de título, tag de parágrafo, tags li, etc Então, esse é o exemplo da tag universal. E agora vou comentar qual é a linha. E eu vou configurar esse arquivo. E agora eu quero segmentar toda a tag que está dentro do conteúdo Deep. Para isso, depois da tag de conteúdo, vou amarrar o conteúdo da tag. Então aqui vou usar o seletor universal, estrela. Então, dentro da resistência de cor, significa todo o elemento dentro da tag de conteúdo e, em seguida, vou usar a propriedade CSS. Eu quero mudar a cor da fonte. Taxa de cores. E eu quero configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Portanto, esse é o uso do seletor universal. E o verdadeiro uso prático desse seletor é ocultar a margem e o preenchimento da página da web. Deixe-me te mostrar. Então, eu quero comentar esta seção e definir esse arquivo e voltar para o seletor universal E aqui, vou digitar margem zero. Além disso, vou digitar padding zero e vou definir esse arquivo Basicamente, ele removerá toda a margem e o preenchimento padrão de nossas tags E, basicamente, você economiza muito tempo e não precisa remover a margem e o preenchimento de cada tipo Agora vou falar sobre o combinador selecionado. Mas antes, vou comentar as linhas. Temos quatro tipos de seletor combinador, seletor descendente, seletor direto de filhos, seletor de irmãos adjacentes, seletor geral de irmãos Então, primeiro, vamos falar sobre seletores descendentes Neste exemplo, como você pode ver, aqui usamos um seletor combinador Primeiro, usamos uma classe e, em seguida, usamos um nome de tag P. Você pode criar uma combinação de várias tags, classes com tags, etc Neste exemplo, quero direcionar o parágrafo que é inserir a classe box. Para isso, primeiro, precisamos selecionar o parentag e selecionar a tag principal usando o nome da classe Em seguida, selecionamos a tag. No próximo exemplo, quero segmentar a tag span, que está dentro da tag de parágrafo. Então, primeiro, passamos a tag principal e a tag mãe é a tag de parágrafo. Depois do espaço, precisamos passar a tag who, eu quero selecionar dentro da tag de parágrafo e eu quero selecionar a tag span. E agora, talvez haja muitos parágrafos em nossa página da web e também tenhamos muitas tags de extensão em nossos parágrafos Então, eu quero selecionar o parágrafo específico do elemento profundo. Para isso, em nosso terceiro exemplo, usamos aqui uma tag profunda específica. Então eu quero selecionar todos os parágrafos. E dentro dos parágrafos, quero selecionar toda a tag de extensão Basicamente, quero selecionar toda a tag span que está dentro do parágrafo, e também nosso parágrafo vem de uma tag profunda específica. Então, esse é o exemplo de seletores descendentes. E lembre-se, aqui podemos usar várias etiquetas secundárias, caso contrário, várias etiquetas principais. Então, vamos começar a prática e ver como podemos usá-la. Então, como você pode ver, novamente, estamos no meu codificador do Visual Studio e eu já criei uma página ESTimL chamada index two dot TML E dentro da página de estímulos, temos uma tag de parágrafo e também uma tag profunda E dentro dessa tag profunda, também temos um parágrafo. E aqui, vou usar seletores descendentes. Primeiro, vou escolher a tag do parágrafo, P. Depois, dentro da cor versus, vou digitar a cor. E eu quero cor, leia. Se eu definir esse arquivo, ele aplicará a cor vermelha a todas as tags de parágrafo e também às que estão dentro da tag profunda, mas quero direcionar os parágrafos que estão dentro da caixa de identificação. Para isso, o tipo de herói tem tag, nosso nome de ID é caixa. Se eu definir esse arquivo, desta vez você poderá vê-lo colorido nas tags de parágrafo, que estão dentro do elemento caixa. E agora eu quero atribuir uma cor às nossas etiquetas de extensão. Então, Hete se estende dentro da cor cardíaca. Verde. Depois de subtrair esse arquivo, como você pode ver, ele colore ambas as tags pan, mas eu quero colorir somente essa tag de span específica Para isso, precisamos selecionar os elementos principais. Portanto, nosso primeiro elemento pai é dip tag, Dev e nosso segundo elemento pai é Paragraptag. Então, eu quero direcionar aquelas tags span que estão dentro da tag de parágrafo e aquelas que estão dentro da tag Dep Se eu definir esse arquivo, como você pode ver, agora ele se aplica a essa tag de extensão específica, que está dentro da tag de parágrafo. Nosso próximo seletor combinador é o seletor direto para crianças. Às vezes, é conhecido como seletor de filhos. Esse símbolo do seletor direto de crianças é maior que o pecado. Aqui, selecionamos toda a tag LI que vem diretamente da tag UL e também aqui selecionamos a tag de parágrafo, que é diretamente do elemento box. Então, vamos entrar no código do Visual Studio e começar a prática. Então, novamente, estou no meu editor de código do Visual Studio e já crio um documento TML, indexo HTML de três pontos E você pode ver no meu documento que temos a tag UL e, dentro dessa tag UL, temos outra tag UL. Então, dentro dessa tag UL, temos uma ALI direta e, em seguida, outra tag UL. Agora, se eu segmentar pelo menos, algum tipo tem tag, leste e todas as tags LI dentro, pelo menos. Dentro da resina colorida, eu quero a cor verde Cor verde. Substitua esse arquivo, como você pode ver, ele converte toda a tag LI para a cor verde, que está dentro da menor Aplicou a cor no filho direto, também no neto. Então, vou duplicar esta seção e aqui vou usar um seletor direto de filhos, leste e todos os filhos diretos dentro da tag least Então eu quero atribuir a cor vermelha. E eu quero configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele aplica todas as tags LI, que são filhas diretas do elemento da lista. Deixe-me mostrar outro exemplo de filho direto. Aqui você pode ver que temos uma tag profunda e, dentro dessa tag profunda, temos uma tag de parágrafo. E dentro dessa caixa profunda, temos outra profundidade chamada caixa dois. E nessa profundidade, temos outra tag de parágrafo. E agora eu quero aplicar a cor da fonte azul, que está dentro da tag da caixa em nossos parágrafos. Para isso, aqui vou selecionar a tag de hash, caixa e quero selecionar os parágrafos, que estão dentro da tag da caixa E depois dentro da cor da classe. E eu quero a cor azul. Ao testar este arquivo, você pode ver o resultado. Como você pode ver, ele aplica a cor azul a todo o parágrafo, que está dentro da caixa D, e também aplicou a cor azul, que está dentro da caixa dois Deep. Mas eu não quero aplicar a cor azul em nossa caixa de dois parágrafos profundos Para isso, aqui precisamos usar o seletor direto de crianças. Alguns tipos de caixa, maior que P. Altere esse arquivo, agora você pode ver o resultado. Agora, ele seleciona somente o parágrafo filho da caixa D. Então, este é o exemplo do seletor secundário direto Agora vamos falar sobre seletores de irmãos adjacentes. Agora a pergunta é: o que é irmão? Siply é seu irmão e o sinal de média mais adjacente. Significa a próxima tag de parágrafo dessa tag profunda. Da mesma forma, essa é a próxima tag de parágrafo dessa tag UL. Então, para deixar isso mais claro, vamos começar a prática. Então, como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão light de servidor, e já criei um documento HTML chamado indexfod Neste documento, temos a tag UL e, acima dessa tag UL, temos uma tag de parágrafo. Não apenas uma tag de parágrafo, temos várias tags de parágrafos. E agora eu quero selecionar o primeiro parágrafo até a tag URL. Para isso, aqui vou tocar em UL e precisamos usar o sinal adjacente, que é mais, mais a tag de parágrafo. Então você diz as cores, eu quero aplicar coloridas. Cor vermelha. Após a etapa deste arquivo, você pode ver o resultado. Ele aplica a cor vermelha à nossa tag de parágrafo, que é a próxima tag UL. E se você quiser segmentar as outras tags de parágrafo, eu quero ver a próxima tag de parágrafo, então podemos chamá-la de tags irmãs generalizadas Este é o exemplo de seletores generalizados de irmãos. Aqui você pode ver um sinal de pedal. Isso significa general Simons, e você pode ver o sinal no teclado acima do botão da guia Isso vai direcionar toda a tag de parágrafo até a tag profunda. Da mesma forma, ele direcionará todas as tags de parágrafo até a tag UL. Deixe-me mostrar o exemplo. Então, vou comentar a primeira linha e depois vou digitar o sinal geral de irmãos da UL Então, vou focar em todos os parágrafos. Aumente a etiqueta UL. Então, dentro do reces de cores, vou aplicar a cor Cor vermelha. Depois de configurar esse arquivo, você pode ver o resultado. Como você pode ver, ele tem como alvo todos os parágrafos após a tag UL Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos nos seletores de avaliação Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 11. Seletor de atributo: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com outro seletor avançado relacionado ao tutorial E neste tutorial, abordaremos o seletor de atributos Em nosso tutorial anterior, já aprendemos o seletor de combinadores Em nosso tutorial anterior, falamos sobre quatro tipos de seletor: seletor simples, seletor combinador, seletor de atributos, seletor de elementos Poidoglass e Posido simples, seletor combinador, seletor de atributos, seletor de elementos Poidoglass Poidoglass E neste tutorial, vamos aprender o seletor de atributos Então, todos esses são seletores de atributos, e temos que dizer sete tipos de seletor de atributos Como você pode ver, ela usa uma etiqueta. Se você quiser usar qualquer outra tag, sim, você pode. E agora você pode ver o atributo e a Val. ATTR significa atributo e well significa valor Aqui você pode ver que usamos uma etiqueta de estimativa, que é tabilag. E nesta etiqueta de TV, você pode ver uma palavra na cor laranja com borda se estendendo, o colapso se estendendo. Todos esses são atributos. E você também pode ver que, dentro do curso duplo, tudo isso tem valor. Valor desses atributos. Outro exemplo que você pode ver na tag de imagem, você pode ver a fonte ou o título com, todos esses são atributos da tag de imagem. Então, vamos segmentar essa imagem usando o nome dos atributos, não o nome da classe ou do ID. Outro exemplo que você pode ver, temos a tag de entrada. Temos o valor do nome do ID do tipo. Todos esses são atributos da tag de entrada. Então, vamos ver o que podemos fazer para usar nosso primeiro seletor de atributos Significa o elemento com o atributo especificado. Então, vamos ver como podemos usá-lo. Como você pode ver, lado a lado, abro minhas imagens no seu editor de código e no meu navegador, e já crio um documento de TV chamado index dot t. E você pode ver no meu navegador que temos que dobrar duas imagens e, entre essa imagem, temos um parágrafo E no meu parágrafo, colocamos um total de três faixas. E, finalmente, temos um formulário básico simples. Então, aqui vamos aprender sobre o seletor de atributos. Então, vamos começar nosso primeiro seletor de atributos. Eu quero segmentar a imagem, a imagem com atributo estranho Como você pode ver, temos que fazer duas imagens, uma imagem de gato e uma imagem de tigre. Em nossa imagem de tigre, não temos atributo, mas em nossa imagem de gato, temos o atributo antigo. Então, eu quero selecionar as imagens que têm esse atributo. E para direcioná-lo, primeiro, precisamos passar o tagnyme e o nome da tag é image IMG, e então precisamos usar E dentro da resina quadrada, e agora eu quero selecionar as imagens que têm o atributo alt Então eu copio o nome do atributo odd e vou colar dentro dele Então, dentro da resistência C, aqui vou adicionar uma borda. Borda, eu quero borda, três pixels, e eu quero borda sólida. Com isso, nossa cor de borda é vermelha. Se eu definir esse arquivo e reconectar meu navegador, você poderá ver o resultado Como você pode ver, está na fronteira com a imagem do nosso gato. Mas na próxima imagem, não temos a fronteira. Mas o que? Se eu usar a tag Al em nossa próxima imagem, copiarei a tag Al e a colocarei em nossa próxima imagem. Depois disso, vou colar aqui, e aqui vou digitar a imagem do Tiger. Depois de configurar este arquivo, como você pode ver, se eu dete meu navegador, agora, ambas as imagens têm a mesma borda, borda sólida de três pixels E agora eu quero selecionar as imagens que têm o atributo de título. Como você pode ver, em nossa imagem de tigre, temos o atributo title, mas em nossa catimage não temos o atributo title Então, vou copiar o nome do atributo e colá-lo aqui. Vou configurar esse arquivo. Se eu detectar meu navegador, você poderá ver o resultado É uma borda na nossa imagem do tigre, não na imagem do CAT. Portanto, esse é o primeiro exemplo de seleção de atributos. No próximo exemplo, vou focar âncoras que têm o atributo target Então, vou digitar e obter tang A. Então, dentro da base quadrada, precisamos passar o nome do atributo, e o nome do nosso atributo é target Então, copiarei o nome do atributo e o colarei aqui. Então, dentro da base de cores, vou usar uma propriedade e nome da nossa propriedade é cor. Cor y. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu recarregar meu navegador, como você pode ver, em nosso parágrafo, temos uma tag NCat, a tag enga com o atributo target Então, mudou a cor desse texto. Agora, vamos falar sobre nosso próximo seletor de atributos. Nesse seletor de atributos, precisamos especificar o nome do atributo Além disso, precisamos especificar o nome do valor. Se o valor e o atributo corresponderem, ele selecionará esse elemento Então, vamos começar a prática. Então, primeiro, vou comentar os dois seletores. Então, como você pode ver na minha seção de entrada, usamos quatro tags de entrada e, dentro da tag de entrada, usamos o atributo type. Mas nossos tipos de entrada são diferentes. Em nossa primeira entrada, usamos texto. Em seguida, nossa próxima entrada, usamos o botão de rádio, e em nossa terceira entrada para endereço, também usamos texto, e para senha, usamos senha. E agora eu quero selecionar as tags de entrada que têm atributo de tipo. Além disso, seu valor é texto. Então, dentro da tag de estilo, vou digitar o nome do elemento e o nome do elemento é inserido. Então, dentro do recesso quadrado, nome do nosso atributo é type E dentro dos códigos duplos, caso contrário, você pode usar códigos únicos. Precisamos passar o nome do valor. O valor é texto. Então, dentro do recesso do carro, precisamos usar as propriedades. E aqui eu quero digitar borda. Borda de três pixels, e eu quero borda sólida, sólida e quero fundo vermelho colorido. Cor da borda vermelha. Após a etapa deste arquivo, se eu recarregar meu navegador, você poderá ver o resultado Como você pode ver, tinha quais são as seções de entrada que têm o atributo de tipo. Além disso, qual valor é texto. E agora eu quero direcionar a imagem com sua fonte e a fonte Val. Para isso, devo copiar uma das fontes. Eu quero mirar na imagem do gato. Então copie a fonte e o. E então Hamer digite a imagem e insira o quadrado ss, vou passar o nome do atributo e o valor Então, dentro do Cariss, quero adicionar uma borda. Quero adicionar a mesma borda, então copio a propriedade e o valor e vou colá-los aqui. Eu colei esse arquivo. Se eu recarregar meu navegador, você poderá ver o resultado. Desta vez, selecionamos a imagem com nome do atributo específico e o valor específico. Além disso, você pode selecionar a imagem com outros atributos, como com d title, etc Portanto, este é o exemplo de atributo com seletor de valor. Então, novamente, vou comentar esta seção. E agora vamos falar sobre nosso próximo seletor de atributos. Esse é outro seletor de atributos. Nesse seletor, precisamos passar o nome do atributo e, em seguida, usar esse sinal Você pode encontrar esse sinal depois de pressionar a forma, e você precisa pressionar seis, depois igual a, e você precisa passar a onda. Esse atributo começa com o caminho. Aqui, precisamos passar a palavra-chave ou o valor inicial . Deixe-me te mostrar. Neste exemplo, vou selecionar esse código e colá-lo aqui. Se eu definir esse arquivo e reescrever meu navegador, você poderá vê-lo como uma borda da imagem do nosso gato Mas se eu remover um caractere desse valor, eles configuram esse arquivo e relacionam esse navegador, agora você pode ver que ele não adiciona nenhuma borda à nossa imagem do gato porque o valor está incompleto. Mas, à nossa imagem, nosso valor começa com o gato. Desta vez, eu uso o atributo source, mas em nossas várias seleções, passamos apenas as palavras-chave iniciais, CAT. Então, se eu usar esse sinal, esse sinal de partida para isso, precisamos elogiar ovelhas e sincronizar e, em seguida configurar esse arquivo e restaurar meu navegador, você pode ver o resultado. Novamente, ele adiciona borda a essa imagem específica. Porque em nossa imagem, usamos o atributo source e também nossa imagem, começamos com CAT. Agora, vamos falar sobre nosso quarto seletor de atributos. Neste seletor, precisamos usar atributo com operador. atributo começa com um valor ou sua primeira lista separada de IA des. Esse seletor de atributos, ou quando temos des sine, caso contrário menos começa com um valor ou sua primeira lista separada inata Então, vamos ver o exemplo. Primeiro, vou copiar essa linha e comentar essa linha. Então eu vou colar aqui. Desta vez, vou usar dd. Vou usar o atributo Ímpar, copiar e colar. Se eu definir esse arquivo e recarregar meu navegador, ele não funcionará porque nosso atributo de valor não é seguro e agora vou usar esse sinal de operadores Ou se eu definir esse arquivo e redirecionar meu navegador, ele também não funcionará . Mas o que? Se eu usar o sinal de traço. Então, em nosso valor antigo, aqui vou usar o sinal de traço, caso contrário, sinal de menos Se eu definir esse arquivo e redirecionar meu navegador, agora você poderá ver Isso adiciona borda à nossa imagem CAT porque temos o sinal de traço em nossa seção de valores Primeiro, ele coincide com o nome do nosso atributo, aqui usamos old depois de eu usar essa condição, passamos uma imagem de texto. Corte essa porção. Esse não é o seletor muito usado. Agora, vamos falar sobre nosso próximo seletor de atributos. Nosso próximo seletor de atributos com cifrão, atributos termina com valor Então, vamos começar a prática e ver como podemos usar esse seletor Para isso, primeiro, vou duplicar esta seção e comentar a anterior E aqui, eu vou usar o cifrão. E nesta imagem, aqui usamos tag, e nosso valor d da imagem termina com Image of CAT. Então, vou copiar os últimos três caracteres, CAT, copiar, e vou colá-los aqui. Depois de configurar esse arquivo, se eu desfizer meu navegador, você poderá ver o resultado Não há alterações nesse resultado. Da mesma forma, como você pode ver na próxima imagem, temos a tag de título. Desta vez, vou copiar o título desse atributo. Então, aqui para digitar o título. Título igual a, e nossos títulos terminam com GER. Então, vou substituir o gato pelo GER. Depois de definir esse arquivo e carregar meu navegador, você pode ver o resultado. Agora está no Bar com nossa imagem amarrada. Agora, desta vez, quero selecionar as tags de âncora que têm a tag HRF e também a extensão JPG em seu poço Por isso, vou passar pelo HRM. Eu copio o nome do atributo e vou colá-lo aqui, HD e quero selecionar essas tags de âncora, então aqui vou remover a imagem e vou passar NCN A. Com isso, precisamos passar o valor final e nosso valor ensuite Copie o valor e eu vou colá-lo dentro do código duplo. E eu quero mudar a cor da fonte desse lead. Então, vou remover essa borda e, aqui, vou digitar a cor. Cor vermelha. Depois de configurar esse arquivo, se eu recarregar meu navegador, você poderá ver o resultado Opa, nosso HRF termina com GER ou HRDF termina Vou usar esse nome de extensão dot JPG. Se eu definir esse arquivo e recarregar navegador novamente, você poderá ver o resultado Como você pode ver, ele adiciona cor vermelha a esse gata. Então esse é o seletor de terminar com W, agora vamos falar sobre nosso próximo seletor de atributos Esse é nosso seletor de seis atributos. Aqui podemos usar o seno estelar. Se o valor ocorrer em qualquer lugar no atributo , ele selecionará esse elemento. Então, deixe-me mostrar o exemplo. Então, primeiro, vou duplicar esta seção e comentar a seção anterior E aqui eu vou usar o signo estelar. E desta vez, quero direcionar aquelas tags NCat que têm o atributo alvo Então, para copiar o atributo chamado target, vou colá-lo aqui. E agora eu quero passar apenas dois caracteres nesta seção de valores, e eu quero passar AN e vou definir esse arquivo. Depois de definir esse arquivo, se eu recarregar meu navegador, agora você pode ver que ele tinha a cor vermelha em nossa segunda tag NGA porque se o valor do atributo de destino contivesse um caractere em seu valor, ele selecionaria essa tag Nga Eu quero dizer que, se esse caractere estiver disponível em qualquer lugar nesse valor , ele selecionará essa tag de âncora Então, esse é o uso do pecado estelar. Agora, vamos marcar nossos últimos atributos selecionados. Então, novamente, vou duplicar esta seção e comentar a anterior E em nosso seletor de atributos de lista, precisamos usar o atributo triDlsGee que corresponde ao valor Isso significa que qualquer valor que você passar, o valor deve ter espaço antes e depois. Então, vamos entrar no código do Visual Studio para deixá-lo mais claro. Novamente, estou no meu código do Visual Studio e aqui vou usar o TrIDlSig E agora vou direcionar a imagem. Então, vou copiar a tag da imagem e colá-la aqui. E a partir da imagem, vou selecionar o atributo t. Então, tipo Hemo E aqui, vou passar um nome de valor. Para A. Se você notar, você pode ver antes da Operação, temos espaço, e acima da Operação também temos espaço. Então, se eu definir esse arquivo, eu recarrego meu navegador , depois configurei esse arquivo, como você pode ver, ele não está funcionando porque usamos a propriedade colorida Precisamos usar boer Border, e eu vou digitar três pixels, e quero uma borda sólida Com isso, a cor da nossa borda é real. E vou comentar nosso nome anterior de P Barty, Cull Se eu definir esse arquivo e recarregar meu navegador novamente, você poderá ver o resultado porque temos espaços antes e depois do desligamento Da mesma forma, se eu usar a mesma tag Al em nossa próxima imagem, copio a tag All e vou colá-la aqui. E desta vez, vou digitar a imagem do tigre. E defina esse arquivo e carregue meu navegador. Além disso, você pode vê-lo adicionar uma borda à imagem do nosso pneu. Mas o que? Se eu remover o espaço acima do caractere, quero configurar esse arquivo novamente. E alerte meu navegador. E depois de alertar meu navegador, como você pode ver, ele remove o velejador da imagem do tigre porque devemos ter espaço antes e depois do personagem Então é assim que podemos usar esse seletor de atributos. Espero que agora esteja claro para você. Então você já aprendeu sobre seletor simples, seletor combinador e seletor de atributos No próximo tutorial, iniciaremos aulas de poseido e elementos positivos Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 12. Tutorial de seletores de pseudo-classes em CSS Parte 1: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS avançado. E neste tutorial, vamos aprender classes CSS poseido Em nosso tutorial prefest, falamos sobre como saber que tipo de seletor, seletor simples, seletor combinador, seletor de atributos, classes postuto e elementos de posto E já aprendemos sobre seletor simples, seletor combinador e seletor de atributos Neste tutorial, vou abordar as aulas de gambá. Então, vamos ver quantos positoglss temos em CSS. Aqui você pode ver um total de 32 vidros poseido. Inclui nossas antigas classes de posto, também as classes de posto avançadas, que são introduzidas no CSS three. Vamos começar o tutorial com o copo de poseido do primeiro filho e do último filho E lembre-se, para usar a classe posto, precisamos usar o sinal de coluna. Então, sem perder seu tempo, vamos começar pela prática Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão de servidor Lip, e já crio um documento estável chamado ponto de índice M. E em nosso documento, como você pode ver, primeiro temos uma lista desordenada, depois temos três parágrafos Então, novamente, temos uma lista nodal. Também temos dois parágrafos. A partir daqui, iniciaremos nosso primeiro filho e a última prositoclasse infantil E agora eu quero direcionar a primeira tag LI que está dentro da tag UL. Eu quero ter como alvo o primeiro filho. Para isso, vou amarrar LI, então precisamos usar cólon e depois do cólon, lembre-se, não precisamos fornecer nenhum espaço após Caso contrário, alimentamos o cólon. Em seguida, precisamos passar o nome Posidocla, que é o primeiro filho Então, dentro dos Cards, aqui vou usar uma propriedade CSS chamada color. Cor y. Se eu definir esse arquivo, como você pode ver, temos uma lista total para desordenar em nosso documento Esta é a primeira lista nodal e esta é a segunda lista desordenada Temos um total de dois primeiros filhos em nossa lista de pedidos desordenados. Se eu definir esse arquivo, aqui você pode ver que ele mudou a cor de fundo até o primeiro filho da lista unwaal Primeiro, ele coloriu o primeiro item da lista um e depois o primeiro item da lista dois. Se você notar, você pode ver nossa etiqueta LI dentro da etiqueta UL. A tag I é a primeira filha da tag UL. Da mesma forma, se eu pegar esta seção e comentar a linha anterior, agora vou mudar a tag nove. Aqui eu vou passar P significa tag de parágrafo. Como você pode ver, temos várias tags de parágrafo em nosso documento. Se eu definir esse arquivo, não haverá alterações. Eu não mudo a cor do telefone da etiqueta do parágrafo, mas a pergunta é por quê? Porque nossa tag de parágrafo não é a primeira filha. Aqui, usamos diretamente a tag de parágrafo dentro da tag body. De outra forma, não usamos nenhuma etiqueta de mergulho em nenhum outro momento. É por isso que o parágrafo não é nosso primeiro filho. Mas se eu mover a tag de parágrafo dentro da tag profunda, nesse caso, ela funcionará. Deixe-me te mostrar. Aqui vou digitar Deep tag. D. Vou reservar esses três parágrafos dentro dessa tag profunda. Configure este arquivo, agora você pode ver o resultado. Agora, ele coloriu o primeiro elemento filho da nossa tag de parágrafo, que está dentro da tag profunda. Ao contrário, temos o último elemento filho. Se eu digitar o último cabelo infantil , defina esse arquivo, agora você poderá ver um resultado diferente. Agora, ele seleciona o último filho desse elemento profundo, que é um parágrafo. Da mesma forma, se eu passar a tag here, i e depois definir esse arquivo, agora você pode vê-lo como elemento de lista de destino de ambas as listas unwodal Agora eu quero selecionar o elemento de luxúria do último. Como você pode ver, a última criança seleciona o elemento da lista na lista unwodal Mas desta vez, quero selecionar o último elemento da primeira lista unodal. Para isso, aqui precisamos passar o ID da lista. Então, vou duplicar esta seção e comentar as linhas anteriores Aqui vou digitar hashtag, nossa lista 1 IDNMe é lista Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode vê-lo como alvo do último elemento LI da lista. Espero que agora esteja claro para você o que é o último filho e o que é o primeiro filho. Agora, vamos falar sobre a criança e a enésima última criança. A partir daqui, vou remover o último filho e vou substituir o último por N filho. Então, aqui precisamos usar as chaves redondas. No seletor do primeiro filho e no seletor do último filho, podemos segmentar somente o primeiro , caso contrário, o último Mas em nosso seletor nHLD, podemos direcionar o específico Suponha que eu queira atingir o terceiro filho. Dentro do recesso redondo, você precisa passar três. Se eu definir esse arquivo, você poderá ver o resultado. Então, aqui selecionamos a criança em particular usando o número do índice. Da mesma forma, se você quiser atingir o quinto , sim, nós podemos. Só ela passa cinco e configura esse arquivo, e você pode ver o resultado. Além disso, na redondeza você pode realizar alguns cálculos Suponha que eu passe dois N. Basicamente, N representa o número de série como um, dois , três, quatro, isso significa que ele vai multiplicar dois em zero, dois em um, dois em dois, desta forma Ao abrir esta perna, você pode ver o resultado. Seu alvo é um após o outro. Primeiro, ele vai multiplicar dois em zero e dois em zero igual a zero É por isso que você não seleciona o primeiro. Então dois em um, dois em um igual a dois. É por isso que ele seleciona o segundo. Em seguida, dois em dois e dois em dois iguais a quatro. É por isso que você seleciona o quarto. Então, da mesma forma, vai selecionar os elementos secundários. Como você pode realizar alguns outros cálculos básicos. Se você quiser experimentar isso, sim, você pode. Agora, vamos falar sobre o último filho. Quero acessar esta seção e comentar a anterior. E vou digitá-lo pela última vez, filho. Também funciona como em Gil, mas vai começar do final desta lista. Deixe-me te mostrar. Então, aqui vou digitar dois e depois definir esse arquivo. Depois de definir esse arquivo, como você pode ver, ele seleciona o penúltimo elemento da nossa lista. Basicamente, quero dizer que é da direção oposta. Espero que agora esteja claro para você o que está na criança e nela a última criança. Agora vou falar sobre o último tipo e o tipo IO. Aqui, vou duplicar esta seção e comentar a anterior Vou digitar pelo menos N de Ti. Então, dentro das redondas, passo por duas. Desta vez, quero selecionar a partir do parágrafo. Aqui eu vou digitar P. Depois de carregar esse arquivo, como você pode ver, primeiro ele seleciona o segundo elemento filho, que é da tag profunda. Esses parágrafos têm sua tag principal. Mas o que? Se eu rolar um pouco para baixo, agora você pode ver em nossos dois últimos parágrafos que não usamos nenhuma tag principal, mas nosso tipo de número também seleciona o último parágrafo. Mas nosso seletor de tipo de entropa pode selecionar os parágrafos que não têm nenhum elemento Basicamente, quero dizer que ele pode selecionar o elemento do elemento pai. Além disso, ele pode selecionar os elementos que não têm elemento pai. Para entender melhor, vou remover a tag profunda. Se eu definir esse arquivo, agora, nossas tags de parágrafo não terão nenhum elemento pai. Então, se eu definir essa pilha, como você pode ver, ela seleciona o segundo parágrafo do nosso documento principal Só é preciso lembrar que ele pode selecionar o elemento sem o pai. Agora, vamos falar sobre o tipo de última parada. Novamente, vou duplicar esta seção. E comente a seção anterior e o HemotyPen por último. Basicamente, ele selecionará o elemento na direção oposta. Após a etapa deste arquivo, você pode ver o resultado. Eu seleciono nosso penúltimo parágrafo do nosso documento. Agora, vamos falar sobre outra aula positiva sobre crianças. Esse seletor funciona quando você tem apenas um filho em seu elemento pai. Deixe-me te mostrar. Novamente, vou selecionar esta seção e duplicar esta seção e comentar as linhas anteriores E vou digitar nas etiquetas LI, aqui vou executar nosso novo seletor positivo, que é filho único Se eu definir esse arquivo, como você pode ver, ele não selecionou nenhum elemento da nossa lista porque nossas tags LI não são apenas filhas de nossas tags UL, mas o quê? Se eu remover tudo isso. Agora você pode ver que temos apenas um filho em nossa tag UL e, em seguida, definir esse arquivo, você pode ver o resultado. Agora, selecione nosso elemento perfeitamente porque temos apenas um filho em pelo menos um. Mas se eu digitar qualquer coisa dentro dessa tag UL, suponha que o tipo de herói seja a tag pan e, em seguida, defina esse arquivo. Agora você pode ver que você não configura a criança porque funciona apenas com a criança solteira. Esse é o uso de filho único. Se houver um irmão dessa criança, então não vai funcionar Espero que agora esteja claro para você. Isso é tudo para este tutorial. Eu não quero fazer esse vídeo muito longo. Então, na próxima parte deste tutorial, abordarei o tipo Ono, primeiro do tipo, último do tipo, vazio, não atraso Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 13. Seletor de pseudo-classes de CSS parte 2: Olá pessoal, é bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao seletor de classes Css poseido E vamos começar nosso tutorial a partir desse seletor, somente do tipo Op Em nosso tutorial anterior, já aprendemos sobre alguns seletores de poseido Sem desperdiçar seu tipo, vamos começar pela prática. Como você pode ver lado a lado, abro meus sais no seu codaor e no meu navegador usando a extensão lip server, e meu navegador usando a extensão lip server, abro minha estimativa anterior Dopomin Vamos começar apenas com o tipo Op. Ele digita apenas do tipo. Se eu definir esse arquivo, você não verá nada. Agora, a questão é: qual é o significado de apenas o tipo Op? Suponha que, em nossa lista, tenhamos várias tags LI. Vou comentar a maioria das tags LI. Agora temos apenas uma tag LI nessa lista. Depois de configurar esse arquivo, você pode ver o resultado. É selecionar a etiqueta LI que está dentro da nossa lista de primeiros pedidos. Agora você pode pensar que é muito parecido com o Seletor de filhos únicos, mas não é No Seletor Only Child, se você usar qualquer outra tag, como span tag, span, hemo type P. Então você configura esse arquivo, ele não funcionará Mas com apenas o tipo up, se você configurou esse arquivo, ele também funcionou. Como você pode ver, aqui usamos apenas o tipo Op com a tag Ali e, em nossa tag UL, não temos nenhuma tag it. Temos apenas uma etiqueta LI. Mas se obtivermos essa linha e definirmos esse arquivo, agora não funcionará porque agora temos várias tags LI. Se a tag LI for apenas do tipo O neste UL, nesse caso, ela será selecionada. Então, se eu remover essa linha novamente e depois definir esse arquivo, você poderá ver o resultado. Agora, selecione nosso item da lista. Da mesma forma, se você usá-lo com a tag span, deixe-me mostrar. Quero substituir a IA por span. Extensão. Antes de definir esse arquivo, novamente, vou duplicar essa tag span e definir esse arquivo Agora você pode ver, temos que fazer duas tags de span, mas ela não selecionou nenhuma de uma. Mas o que? Se eu remover uma tag de extensão, se eu remover uma tag de extensão dessa lista e, em seguida, definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo selecionar a tag span. Esse é o uso do único tipo de seletor. Agora vamos falar sobre o primeiro e o último dos seletores de tipo Significa o mesmo tipo de tag primeiro e último. Vamos começar com a prática. No começo, vou pegar esta seção e comentar as linhas anteriores. E aqui vou digitar Foptype. Se eu definir esse arquivo, como você pode ver, ele seleciona a tag span, mas agora eu quero usá-lo com a tag LI. Então, vou digitar I. Depois de configurar esse arquivo, agora você pode vê-lo selecionar a primeira tag LI em nossa lista, na direção oposta, o último tipo principal funciona. Se eu fizer esta linha e comentar seção anterior quero substituir a primeira pela última. Depois de subir esse arquivo, você pode ver o resultado. Agora é selecionar a última e, em nossa lista 1, temos apenas uma tag li. É por isso que este também é considerado o último e o primeiro. Agora, vamos falar sobre nossa próxima carta, que está vazia. Ele é usado para selecionar o elemento vazio. Deixe-me te mostrar. Então, primeiro, vou desvendar essas linhas implorar esta seção e comentar a seção E aqui, vou criar um elemento profundo antes da lista. D. Não só isso, vou criar várias profundezas. Vou duplicar isso profundamente em tempo e, em nossa segunda profundidade, aqui vou digitar um Costela baixa dez, e eu vou configurar esse arquivo. Mas nosso primeiro DF e último DV estão completamente vazios. Desta vez, quero atingir nosso vazio D. Como podemos atingir esse vazio profundo? Deixe-me te mostrar. Para isso, vou digitar bip colon empty Então, dentro da resina de carvão, aqui vou usar uma borda de nome de propriedade, borda de três pixels e quero borda sólida Com isso, nossa cor de broca é vermelha. Se eu subtrair esse arquivo, você poderá ver o resultado. Você pode ver no meu navegador, este é o nosso primeiro de border. Depois, aprofunde-se com o conteúdo porque nosso segundo dV não está vazio Depois vem o terceiro de border porque nosso terceiro div está vazio. Nossas profundezas estavam vazias. É por isso que nossas fronteiras ficam umas com as outras. Mas se eu adicionar um pouco de preenchimento, deixe-me mostrar o preenchimento de cinco pixels e, em seguida, definir esse arquivo Agora você pode ver o resultado. Mas tenha cuidado ao usar o seletor vazio, pois ele também conta espaço como um caractere. Deixe-me te mostrar. Em nosso terceiro a, aqui vou fornecer um espaço. Você pode ver nosso terceiro se estiver vazio, mas aqui eu forneço um espaço. Se eu definir esse arquivo, agora você pode ver que ele não tem nenhuma borda em nosso terceiro mergulho, porque aqui usamos um espaço. Agora vamos falar sobre nosso próximo seletor Posido. Se não quisermos direcionar essa classe especificada, de outra forma especificada , usamos o seletor not Ele terá como alvo outros elementos, mas não terá como alvo o elemento especificado. Deixe-me mostrar. Agora, novamente, convido o Visual Studio Code Hit, e aqui você pode ver que temos que indicar a tag de cinco parágrafos em nosso documento. Vou selecionar todo esse elemento de parágrafo. Para isso, vou digitar P e , nas corridas de cauda, vou adicionar cor Cor, vermelho, e eu vou configurar esse arquivo. Para configurar esse arquivo, como você pode ver, você seleciona todas as tags de parágrafo. Mas em nossa tag do segundo parágrafo, como você pode ver, temos uma classe chamada sabor. Não quero selecionar essa tag de parágrafo. Para isso, precisamos usar não PoidoClass. Aqui eu quero digitar P, dois pontos, nada. Então, dentro da classe, vou selecionar a classe específica chamada taste, dot, taste. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-la selecionar todas as tags de parágrafo, exceto a segunda , porque ela não usa PositoCass e especificar o parágrafo usando o nome da classe Agora, vamos falar sobre nossa próxima aula de posito, Lang. Lang significa linguagem. Se você quiser segmentar algum idioma específico em sua página da web, nesse caso, você precisa usar essa seleção. Nesse exemplo, como você pode ver, criamos um nome de página de estimativa diferente, Langt TML, em nossa tag body, aqui você pode ver 23 O primeiro é o idioma inglês. A segunda é a língua francesa e a terceira é a língua alemã. Para declarar esse idioma, aqui usamos o atributo Lang Agora, quero direcionar este parágrafo usando a linguagem deles. Para isso, precisamos usar o seletor de procedimentos Lang. Primeiro, quero focar no idioma francês. Para isso, vou amarrar P, dois pontos e vou usar a classe Lang Linha. Então, dentro das prensas redondas, vou digitar a foto de, que é FR. Dentro da Classe, vou mudar a cor do parágrafo. Leitura colorida. Depois de configurar esse arquivo, você pode ver o resultado. Você pode ver no meu navegador que ele tinha como alvo o parágrafo francês. Da mesma forma, se você quiser atingir o alemão, vou escolher esta seção novamente e quero segmentar o alemão. Para isso, aqui você precisa passar de DE. Se eu definir esse arquivo, você poderá ver o resultado. Agora, temos como alvo o terceiro porque nosso terceiro parágrafo está em alemão. Portanto, esse é o uso do seletor de idiomas. E agora vou falar sobre link posto class over Posidoclass, visitei PositoClass e active Posidoclass visitei PositoClass e active Posidoclass Basicamente, o posto plus é usado com etiquetas de ângulo. Além disso, você pode usar over e ativar com outras tags. Vamos ver como podemos usá-lo. Novamente, estou trabalhando com o editor de código do estúdio e, como você pode ver, aqui criamos outro documento estável chamado ling dot HTML E, como você pode ver, temos uma lista não usada e, dentro dessa lista não ordenada, temos algumas E essas etiquetas LI são conduzidas por etiquetas NGA. E para estilizar essas tags NGA, podemos usar para pseudoclasses Então, esses são todos links. Então, eu quero colorir todos os links. Para isso, vou segmentar todas as tags ancha na UL A, link de dois pontos Então, dentro das cores está, eu quero definir a cor vermelha. E eu quero configurar esse arquivo. Até configurar este arquivo, como você pode ver, ele converte todos os links na cor vermelha. E agora eu quero mudar a cor ao passar o cursor neste link. Para isso, vou duplicar esta seção e vou amarrar dois pontos E quando eu passo meu cursor, eu quero a cor verde Depois de configurar este arquivo, quando eu observo meus carros neste link, você pode vê-lo converter nossa cor de texto em verde e você pode usar a classe Obert Posito com qualquer Você pode usá-lo com parágrafo, tag profunda, tag span, etc Eu sei que você já está familiarizado com isso. Nosso próximo Posito selecionado é visitado e você pode usar visitado apenas com uma âncora Quero duplicar esta seção, e aqui vou digitar em visitei aqui vou usar a cor azul Visitado significa que você já clicou neste link uma vez e pode ver no meu navegador todas as tags estão vermelhas porque eu não visito nenhum link, então vou clicar em Contatar TAs. Então, sempre que clico em ContactAs, como você pode ver, ele converte todas as tags NCT visitadas porque espero ter cometido Como você pode ver, estou na minha página HTML de pontos de link, e em nosso contato Anctag redirecionamos nossa página da web, página e em nosso contato Anctag redirecionamos nossa página da web, página HTML de pontos de índice. E eu defino esse arquivo e abro esse arquivo sem usar o Live Server e você pode ver a localização do arquivo na seção URL. Agora, desta vez, novamente, vou clicar em Contatos. Vou clicar neste link. Depois de clicar neste link, como você pode ver, você redireciona para nossa outra Mas se eu clicar no botão Voltar, agora você pode ver que esta página de contato é visitada. Espero que agora você possa entender como podemos usar a classe VisitatePosdo Agora, vamos falar sobre outra Posidoclass que Vou duplicar esta seção e vou amarrar a actina do cólon Então, dentro dos processos redondos, vou mudar a cor. Aqui eu vou usar a cor rosa. Vou configurar esse arquivo. Vou reescrever esta página. Agora a questão é: qual é o uso da classe Pozo ativa Como você pode ver, sempre que abro meu Carter nele, você pode ver que nosso link mudou de cor, mas eu não clico nesse link Agora vou clicar neste link. Vou clicar com o botão direito do mouse neste link. Como você pode ver, ainda mantenho o botão direito do mouse neste link. Quer dizer, nosso link está ativo. Até eu soltar meu clique com o botão direito, o link ainda está ativo. Quer dizer, sempre que eu clicar nesse link O, ele ativará esse link e mudará a cor do texto desse link. Esse é o uso da classe ativa e, sempre que eu solto meu botão direito , ele volta à cor visitada porque clico neste link. É isso para este tutorial. Do próximo tutorial, vou iniciar o foco no alvo, verificar, desativar a ativação, o opcional obrigatório etc Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 14. Seletor de pseudo-classes de CSS parte 3: Agora, Olá pessoal, é bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS PoseoClasses, vamos começar nossa jornada a partir Alvo, seletor Target PozioGlass. Este PosoGass é muito útil com a tag âncora. Vamos ver como podemos usá-lo. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão light server, e já crio um documento de estimativa chamado index dot HTML. E você pode ver em nossa lista não ordenada que temos um total de três tags âncora, DML CSS JavaScript e, na seção HDF, aqui eu uso Isso significa que eu quero segmentar e redirecionar para uma seção específica desta página da web Eles são chamados de link da mesma página. Caso contrário, podemos chamá-lo de vinculação interna. E, como você pode ver em nossa seção de parágrafos, usamos um ID semelhante para esses parágrafos Então, sempre que clico nesse link HTML, quero destacar a tag de parágrafo específica relacionada ao HTML Da mesma forma, sempre que clico em JavaScript , quero destacar no parágrafo JavaScript. Para isso, podemos usar o PozioCAS alvo . Deixe-me te mostrar como. Suponha que eu queira direcionar o elemento P, dois pontos P e vou usar Target PosidOLSS Alvo. Então, dentro dos laboratórios de automóveis, vou mudar a cor de fundo desse parágrafo em particular. Plano de fundo e eu quero fundo de cor vermelha. Vou configurar esse arquivo. Depois de configurar esse arquivo, você não verá nada em nosso navegador. Mas sempre que eu clico no link específico, suponha que eu queira clicar no link CSS. Vou clicar em CSS. Depois de clicar em CSS, você pode ver o resultado. Ele destacou o parágrafo específico relacionado ao CSS porque esse link e os parágrafos estão vinculados a esse ID chamado CSS Da mesma forma, se eu quiser destacar a parte do Javascript, sim, eu posso. Agora a questão é: qual é o processo para reconhecer esse ID? Como você pode ver na minha seção de URL, depois do DML, temos um ID, Hazteg Sempre que clico em CSS você também pode ver que o ID foi alterado. Agora você pode ver que o link é hashtag CSS. Da mesma forma para DML. Método de destino, reconheça esse ID nessa barra de URL. Espero que agora esteja claro para você como podemos usar o Target PosoClass. Agora vamos falar sobre o foco de vidro poseido. Aqui você pode ver todo o PosidoGlass na cor rosa. Tudo isso funciona com formulários de entrada. Vou experimentar tudo isso em nosso AtableFM. Vamos começar a prática e ver como podemos usá-la. E vamos começar com foco. Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Lifesaver, e já abro um nome de documento HTML a partir de pontos Em nossa etiqueta corporal, como você pode ver, temos um formulário. E em nosso formulário, temos diferentes tipos de entrada. Para o primeiro nome, usamos o texto do tipo de entrada e, para o sobrenome, também usamos o texto do tipo de entrada. Com isso, dissemos obrigatório porque não podemos deixá-lo em branco. Da mesma forma, ao mesmo tempo, temos seu H, mas seu tipo de entrada é número. Em nossa seção H, você precisa passar os números. Além disso, estabeleci um limite para esta seção de entrada, limite mínimo de dez anos e limite máximo de 20 anos. Portanto, você precisa passar o valor entre eles. Nossa próxima seção de entrada é a seção de e-mail. Aqui usamos o tipo de entrada e-mail. Nossa próxima seção são hobbies, e todos esses são do tipo de entrada de caixa de seleção Em seguida, usamos seu gênero, para seu gênero, aqui usamos o tipo de entrada de rádio. Esses são todos botões de rádio. L para usar a caixa CLG. Se você clicar nesse menu suspenso, poderá ver muitos nomes de países. Esta é uma caixa Seleg e todas essas são opções dessa caixa de seleção Por padrão, não selecionamos nenhum e, por fim, temos um botão de envio, tipo de entrada submin. Então, vamos começar com focus p zero class. Dentro da seção de estilo, aqui vou digitar e vou usar o foco com a tag de entrada. Entrada. Sempre que focamos na entrada , dentro da classe eu quero adicionar uma borda a essa seção de entrada específica, borda a pixel, e eu quero uma borda sólida Com isso, nossa cor de borda é vermelha. Depois de configurar este arquivo, sempre que clico em qualquer seção de entrada, quero clicar na última seção de entrada Se eu clicar nesse campo de entrada, como você pode ver, ele adiciona uma borda a esse campo de entrada. Mas o problema é que não podemos ver a cor vermelha da borda. Vou aumentar a largura da borda. Eu quero uma borda sólida de cinco Pi. Se eu definir esse arquivo e clicar em qualquer campo de entrada, você poderá ver o resultado. Ele adiciona uma borda vermelha a esse campo de entrada, mas não funcionará na caixa de seleção e no botão de rádio Este é o uso do focus PozioClass Agora vou falar sobre a Essa classe posito funciona com seleção e caixa de rádio do tipo de entrada Vamos ver o código do Visual Studio. Para isso, vou pegar esta seção e comentar a linha anterior. Aqui vou usar a entrada, verifique se nosso PositoGlass está verificado Então, dentro dos vestidos redondos, não vou usar a propriedade de borda porque as bordas não funcionam com caixas de seleção e botões Aqui, precisamos usar box shadow box shadow. Quero definir box shadow, zero, zero, zero e quero três pixels. Com isso, eu quero a cor vermelha. De Ss e Xs, eu pego zero pixel e para opacidade, eu também pego Se eu configurar esse arquivo , passar a caixa de seleção Meus carros para cima e clicar na caixa de seleção, você poderá ver o resultado. Está na sombra da caixa em nossa caixa de seleção. Da mesma forma, se eu clicar nos botões de rádio, você poderá ver o mesmo resultado. Sempre que eu desmarco esse botão, você pode ver que ele removeu a sombra da caixa Agora vou te mostrar um lindo truque. Para isso, vou usar um seletor de comunidade, e já aprendemos sobre isso em nossos tutoriais anteriores Aqui eu vou usar um seletor adjacente usando plusine. Em seguida, quero adicionar o nome da tag e o nome da nossa tag é rótulo. Aqui eu vou comentar esta linha e também vou adicionar outra propriedade chamada cor, e vou definir a cor vermelha. Vou configurar esse arquivo. Então, sempre que eu clicar em qualquer caixa de seleção, ela selecionará a próxima etiqueta Ele selecionará exatamente o próximo rótulo, que está ao lado da caixa de seleção. Deixe-me mostrar. Então, se eu clicar na caixa de seleção de música, você poderá ver o resultado. Ele aplica CSS de cores divertidas ao nosso rótulo. Então, espero que não ultrapasse 40. Qual é o uso do check PositoClass? Agora, vamos falar sobre nosso próximo PositoClass, que está desativado Então, vamos ver como podemos usá-lo. Então, como você pode ver, todas as entradas estão habilitadas. E agora vou desativar nosso primeiro nome usando o caixa eletrônico. Então, na verdade, seção de entrada, aqui eu quero digitar disable. Após a etapa deste arquivo, você pode ver o resultado. Não podemos digitar nada nesse campo de entrada, mas podemos passar a entrada em nossas outras tags de entrada. Então, primeiro, vou comentar esta seção. E aí vou adicionar uma borda a esse campo de entrada. Aqui, o tipo de entrada é texto. Vou digitar input, depois vou usar o quadrado *** dentro do quadrado sis, vou mencionar o tipo de entrada, e já aprendemos sobre isso em nossos tutoriais anteriores Aqui eu uso o seletor de atributos, tipo de tipo igual a inserir os códigos únicos, vou passar o nome do tipo, Então, dentro do Cariss, vou estabelecer uma fronteira. Borda de três pixels, e eu quero uma borda sólida. Com isso, nosso borderclor é y. Após a etapa deste arquivo, você pode ver Mas o problema é que dizia borda ao nosso botão de desativação. Nosso primeiro campo de entrada está desativado, mas nosso segundo campo de entrada está ativado. Agora, não quero adicionar borda ao nosso botão de desativação. Para isso, vou usar um positioglass enable. Deixe-me te mostrar. Quero adicionar ao limite somente o campo de entrada habilitado Depois de resis quadrada, vou digitar colon enable. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo adicionando apenas a borda em nosso campo de entrada de sobrenome porque esse é o campo de entrada capaz Da mesma forma, se eu duplicar esta seção e comentar a anterior, desta vez, quero adicionar borda em nosso campo de entrada de desativação Ele digita desabilitado. E defina esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora está na borda do nosso campo de entrada de desativação. Este é o exemplo de habilitar e desabilitar Posidoclass. Agora, vamos falar sobre duas outras classes de posito, que são obrigatórias e opcionais Se algum campo de entrada for necessário, você poderá segmentar esse campo. E se o campo de entrada for opcional, você também pode segmentar esse campo. Deixe-me mostrar o exemplo. Como você pode ver, nosso campo de nome e sobrenome é obrigatório, mas em nosso campo de e-mail, eu não uso o atributo obrigatório. Então, agora eu quero segmentar esse campo obrigatório. Então, vou escolher essa linha e comentar a seção anterior Como você sabe, o campo obrigatório é muito importante. Se você tentar enviar este formulário sem a entrada de campo obrigatório, haverá uma exibição em massa. Por favor, preencha este campo. Você não pode enviar o formulário sem preencher esse campo de entrada. Antes de iniciar meu CSS, vou remover o atributo de desativação e salvá-lo novamente. Aqui, quero remover esta seção e vou digitar a entrada e selecionar a necessária. Então, se o campo de entrada for obrigatório, fale sobre essa borda. Além disso, quero adicionar cor de fundo. Plano de fundo, e eu quero a cor de fundo verde. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, selecionamos com sucesso os campos de entrada necessários e também estilizamos esses campos de entrada obrigatórios. Da mesma forma, no sentido oposto, temos outra classe Pozio, que é opcional Vou comentar a seção anterior e aqui vou digitar a entrada opcional. Se o campo de entrada for opcional, você poderá ver que ele aplicará propriedades CSS, cujo campo de entrada é opcional. Usando esse PoseRoGlass, podemos direcionar a seção de entradas que é opcional, que não é obrigatória que Agora vamos falar sobre duas outras classes Posidoclass, que estão dentro e fora do alcance Essas classes Posido funcionam apenas com o número do tipo de entrada. Então, aqui você pode ver em nosso campo H, aqui usamos o número do tipo de entrada e também você pode ver em nossa estimativa o número do tipo de entrada. Com isso, também definimos valores mínimo e máximo para esse campo de entrada. Não podemos levar mais de 20, também não podemos levar menos de dez. Então, se alguém tentar passar de 30, nesse caso, nossa seção de entrada não aceitará esse número. Então, agora está fora de alcance. Para isso, temos o PositoGlass, que está dentro e fora do alcance Então, deixe-me mostrar como funciona. Aqui vou digitar a entrada no intervalo. E eu quero usar a borda e a cor de fundo vermelha, e vou definir esse arquivo. Sempre que eu passo o valor 10-20 , ele não mostrará nenhuma cor porque agora nossa entrada está no intervalo Mas se eu passar um valor fraco, suponha 60, agora você pode ver que nosso CSIS desapareceu porque esse valor não está no intervalo que eu especifiquei para lidar com o valor fora do intervalo, também podemos refletir outras propriedades do Csis Deixe-me te mostrar como. Para isso, precisamos usar uma pseudoclasse fora do alcance. Primeiro, vou remover a seção da borda. Eu não preciso disso. Então eu vou pegar esta seção. E desta vez, vou digitar fora do alcance, e aqui vou dizer cor de fundo, vermelho, e vou definir cinco. Por padrão, como você pode ver, nosso campo de entrada H é verde. Então, se eu passar dez, 11, ele retornará propriedades de positocls no intervalo Mas se eu passar dos nove, agora você pode ver que mudou a cor do fundo. Agora nosso número está fora da página, você pode avisar seu usuário se ele passar uma entrada errada Então, isso é tudo para este tutorial. No próximo tutorial, abordarei os Posidóculos restantes Então, obrigado por assistir a este vídeo Stune, para o próximo tutorial 15. Seletor de pseudo-classes de CSS parte 4: Olá, pessoal, é bom ver vocês de volta. Este é outro tutorial relacionado ao seletor CSS poseudoglass Neste tutorial, aprenderemos os óculos poste restantes. Então, vamos começar com Read only e readwrite PosidoGlass Em nosso EstimLpm, se usarmos o atributo somente leitura, só poderemos ler esta seção de entrada Não podemos escrever nada nesse feed de entrada, e o modo de leitura/gravação é o modo padrão Vamos voltar ao código do Visual Studio e tentar entender qual é o uso dos dois select. Como você pode ver, lado a lado, abro meu editor de código isalts Studio e meu navegador usando ipServeRetension, e meu navegador usando ipServeRetension, já crio um abro meu editor de código isalts Studio e meu navegador usando ipServeRetension, e já crio um nome de documento estimado a partir do ponto dez. Então, no campo de entrada do nosso primeiro nome, se eu clicar nele, como você pode ver, aqui podemos digitar o conteúdo. Mas se eu usar o atributo somente leitura, então digite herald, somente leitura Este arquivo, agora você pode ver que o campo de entrada do seu primeiro nome não está visível Mas sempre que eu clico nele, e se eu tentar inserir, os dados não funcionarão. Não podemos preencher esse campo de entrada com dados, mas também podemos passar o valor padrão aqui. Deixe-me te mostrar. Ele digita o valor e eu quero passar o nome em um. Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, automaticamente, ele tinha um valor padrão nesse campo. Mas sempre que tento remover esse valor padrão, não consigo porque temos apenas uma pessoa para ler esse campo de entrada, não está certo Agora eu quero selecionar esse campo de entrada usando PosoGass. Para isso, precisamos usar o positoglass somente para leitura. Entrada de tipo pequeno. Colon, somente leitura. Então, primeiro dentro da clivrass , eu vou dizer a fronteira Borda, quero uma borda de um pixel e quero uma borda sólida e a cor da nossa garrafa é vermelha. Se eu definir esse arquivo, você poderá ver o resultado. Podemos segmentar com sucesso o campo somente leitura usando a classe Posito somente para Mas se eu duplicar esta seção e comentar a anterior e quiser digitar a entrada, leia, escreva Leia e escreva. Em seguida, defina esse arquivo, você pode ver um resultado diferente. Agora, selecione o outro campo de entrada porque leitura e gravação é o modo padrão do campo de entrada. Agora vamos falar sobre nossa próxima classe posito, que é válida e inválida Usamos essas classes de posito se nosso tipo de entrada for e-mail e número de telefone Quero dizer que quando o campo de entrada exigiu um valor válido , podemos usar essas classes. Na maioria das vezes, usamos uma classe inválida. Suponha que se alguém digitou o e-mail errado, nesse caso, eu quero mostrar um aviso para esse campo de entrada Deixe-me mostrar a demonstração. Aqui você pode ver que temos um campo de entrada chamado seu e-mail. Vamos direcionar esse campo de entrada e aplicar as duas classes. No início, vou duplicar essa seção de entrada e comentar a seção de entrada anterior Em seguida, entrada herramuty, dois pontos inválidos. Depois de definir esse arquivo, como você pode ver, ele adiciona uma borda ao nosso campo de entrada de sobrenome. Mas a pergunta é por quê? Porque nesse campo de entrada, usamos o atributo obrigatório, então não podemos deixá-lo lá. Por enquanto, vou remover esse atributo obrigatório e definir a idade do arquivo, depois vou aumentar o pixel da borda cinco pixels e definir esse arquivo novamente. Agora você pode ver sempre que clico nesse campo de entrada e tento adicionar um e-mail, como você pode ver, ele tem uma borda vermelha. Mas se eu usar add the res sign e digitar um e-mail adequado, algo como gmail.com Agora você pode vê-lo remover a borda vermelha porque agora é um e-mail válido. É um formato de e-mail válido. Se não passarmos os dados válidos em nosso campo de entrada, nesse caso, ele retornará as propriedades inválidas Se eu remover o.com, você poderá ver o resultado. Novamente, ele adiciona uma borda vermelha a esse campo de entrada. Espero que agora esteja claro para você como funciona. Agora vou usar uma classe válida. Vou começar esta seção e aqui vou digitar o tipo de entrada válido. Aqui usamos uma classe pasito válida e vou digitar a cor verde Vou configurar esse arquivo. Depois de definir esse arquivo, a classe válida desempenha o papel oposto de inválida Se passarmos um e-mail válido, algo como adicionar um, adicione o gmail.com vermelho Como você pode ver, ainda aplica a cor da borda verde. Sempre que você usa o.com e preenche a condição, agora você pode vê-lo aplicar a cor vermelha da borda Então, espero que agora esteja claro para você. Na maioria das vezes, usamos vidro postal inválido. Novamente, vou comentar esta seção e agora vamos falar sobre nosso próximo seletor Posido Nosso próximo PoidoGlass é o padrão. Funciona se o valor já existir e pudermos usar vidro padrão com três coisas. Podemos usá-lo com caixa de seleção, caso contrário, tipo de entrada rádio e o terceiro é o tipo de opção, que usamos dentro do tanque selecionado Vamos entrar no código do isalt studio e ver como podemos usá-lo na prática Como você pode ver em nosso formulário, nossas caixas de seleção estão desmarcadas Mas sempre que relato meu baile de formatura, caso contrário , abro pela primeira vez, quero marcar uma das opções Então, podemos usar a classe padrão. Estou voltando ao campo de entrada do hobby e, por padrão, quero verificar a viagem. Aqui vou digitar check. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, quando eu recarrego meu navegador, por padrão, ele marcou a opção de viagem Agora, dentro desta seção de estilo, vou usar a classe padrão. Aqui vou digitar input, dois-pontos, default. Então, dentro da resina de Cali, vou usar uma propriedade chamada box shadow box shadow Sombra da caixa, zero, zero, zero, e eu quero três pixels. Com isso, quero uma sombra de caixa de cor vermelha. Depois de configurar esse arquivo, você pode ver o resultado. Ele tem como alvo o valor padrão, que já está selecionado, e você também pode usar a opção padrão com botões de rádio. Agora vou fazer isso Sen em nossa caixa de seleção na seção Botext Como você pode ver em nosso país, temos que inserir o nome de quatro países, EUA, Índia, Reino Unido e alemão Em nossa tag de seleção, por padrão, herramter slate para Depois da Índia, vou digitar select it e vou definir esse arquivo. Então, para configurar esse arquivo, sempre que clico nesta seção Dp down, como você pode ver, ele não está funcionando Não, está funcionando, mas não podemos aplicar sombra de caixa em nossas tags selecionadas. Deixe-me mostrar. Aqui, vou adicionar a cor verde. Em seguida, defina esse arquivo. Depois de definir este arquivo, se eu abrir essa opção de dp down, ela ainda não está funcionando Vamos usá-lo com a tag nove específica. Eu vou estar nesta seção e comentar a anterior aqui, vou digitar a opção. Se eu definir esse arquivo e abrir esse ponto marrom, agora você poderá ver o resultado. Agora você pode ver que mudou a cor da fonte padrão , que é a Índia. Agora, vamos falar sobre nossa positoclasse americana. Nossa classe usa posito é root. Já usamos a classe root posito em nosso tutorial anterior Quando você diz que é variável, usamos essa classe. Usamos essa classe para declarar variáveis. Não vou explicar isso Se você quiser aprender sobre isso, vá para a seção de variáveis e assista a este vídeo. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial No próximo tutorial, iniciaremos o seletor de pseudoelementos Fique ligado. 16. CSS3 é aprimorada com PseudoClasses: É bom ver vocês de volta, pessoal. Neste tutorial, você aprenderá que um novo nome de classe Posito é posto class Suponha que temos uma profundidade com ID ABC e dentro dessa profundidade, temos um parágrafo Da mesma forma, temos outro ID profundo X Y e, dentro dessa profundidade, temos outro parágrafo. E agora eu quero mudar a cor dos dois parágrafos. Ambos os parágrafos estão dentro de um elemento p diferente, mas talvez tenhamos algum outro parágrafo em nosso site, mas, especialmente, eu quero mudar as cores dos parágrafos. Para selecionar ambos os parágrafos, primeiro atribuímos o ID, depois selecionamos o parágrafo específico que está associado a esse D. Em seguida, alteramos a cor. Esse é nosso método antigo e, para criar esse método, precisamos digitar várias linhas. Mas agora temos classe es poseido para fazer esse código de alinhamento múltiplo em uma única Algo parecido. Primeiro, precisamos usar o seletor poseido E, depois, dentro da prensa redonda, precisamos passar a ID D e, fora da prensa redonda precisamos passar o elemento, qual elemento eu quero atingir e qual elemento fica entre eles Então, aqui passamos P, então dentro das cores, precisamos usar a propriedade CSS. Portanto, esse tipo de código reduz o tamanho do nosso arquivo CSS. Também aumentou e também aumentou a velocidade da página. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Além disso, vou mostrar outras variantes dessa classe de poseido Então, como você pode ver, lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão Lifesaver, e eu já crio um nome de documento estim index dot t. Então, primeiro, vou dizer o resto Então, dentro da etiqueta corporal, primeiro, vou pegar um DV e nosso nome profundo é taste one, taste one Em seguida, vou duplicar esse desenvolvedor e atribuir um novo ID a essa profundidade, que é o sabor dois Então, dentro do Taste one Deep, vou atribuir uma tag de cabeçalho H one. Então, em nosso primeiro cabeçalho, vou digitar a seção um E em nosso cabeçalho CND, vou digitar Seção dois, Seção dois Em seguida, vou pegar outro título em nosso gosto, um D, e vou usar o título dois. E aqui vou digitar o subtítulo. Em seguida, vou digitar a tag de parágrafo, P, e aqui vou passar um parágrafo fictício, abaixo, e vou passar duas palavras E depois desse parágrafo, vou usar outra tag de cabeçalho, que é H três. E aqui vou passar o subtítulo dois. Então eu vou pegar outro parágrafo. P. E neste parágrafo, vou passar e digitar, hum cinco Então, dentro do teste dois D, vou adicionar um pequeno parágrafo. Low T. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o conteúdo no meu navegador. E agora eu quero adicionar uma linha horizontal entre esses dois D. Para isso, Healtype HR A partir desse arquivo, você pode ver o resultado. Agora vou mostrar o método antigo. Eu quero mudar toda a cor do título dentro da cor de sabor. Para isso, precisamos selecioná-lo várias vezes. Deixe-me te mostrar como. Primeiro, precisamos selecionar o ID e o Dame é o primeiro gosto Em seguida, precisamos selecionar o elemento, que é H um. Então precisamos fornecer coma e eu vou duplicar essa linha a tempo Para selecionar o elemento H dois, precisamos passar H dois e, para selecionar o elemento H três, novamente, precisamos passar H três. Agora, dentro da cor ss, vou usar a propriedade CSS que é colorida. Colorido de vermelho. Se eu subtrair esse arquivo, você poderá ver o resultado. Mudou todo tipo de cor de cabeçalho do nosso gosto para D. Mas o problema é que precisamos digitar três linhas de código, e agora vou fazer uma linha usando seu seletor Psitoglass Deixe-me te mostrar como. Novamente, vou digitar nosso nome de identificação, provar um. Prove um. Em seguida, precisamos usar seu seletor Positro. E. Então, dentro dos versos redondos, precisamos selecionar o nome do elemento Nosso primeiro elemento é H um. Nosso segundo elemento é H dois e nosso terceiro elemento é H três. Então, dentro dos armários, podemos selecionar nossa propriedade, e nossa propriedade é a cor E desta vez, vou usar a cor verde. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, substitui nossa propriedade antiga por uma nova. Se eu comentar toda essa seção e configurar esse arquivo novamente, você verá o mesmo resultado. Agora, não precisamos digitar nosso nome de identificação várias vezes. Só precisamos usar o seletor Po zero. Agora, deixe-me mostrar outro exemplo. Para isso, vou adicionar outra tag de cabeçalho fora da tag profunda, H one, e vou digitar fora do título. E eu vou configurar esse arquivo. Como você pode ver, temos uma tag de cabeçalho dentro de taste one Dev, taste two Dev e fora de DD. Agora, decido que quero selecionar essa tag de título, que está dentro do sabor um e do sabor dois. Não quero selecionar o externo. Para isso, vou duplicar esta seção e, desta vez, preciso amarrar, pois precisamos usar um vestido redondo Então, dentro dos vestidos redondos, precisamos passar o nome de identificação. Hashtag prove one. Experimente a hashtag de uma vírgula, experimente duas. Depois disso, quero selecionar apenas o título de uma tag. Vou tirar esses vestidos redondos e vou digitar um H. Desta vez eu quero a cor rosa. Depois de configurar esse arquivo, você pode ver o resultado. Este é o segundo método que podemos usar é o Positroselector É assim que podemos selecionar o título específico que veio do sabor um e do sabor dois. Mas se você não for fácil, como você pode ver, ele não pode selecionar o título externo. Agora vou te mostrar outro exemplo. Aqui, vou criar uma seleção complexa. Para isso, vou usar Is Posidselected to time. Suponha que eu queira selecionar todo o parágrafo, que é do primeiro sabor, e colar dois. Para isso, novamente, precisamos usar is Posidselected. Então, vou duplicar esta seção e comentar esta seção E aqui eu vou amarrar o tar E. Em seguida, nas resistências redondas, vou selecionar os elementos, que são H um, vírgula e parágrafo P. Se eu definir esse arquivo, agora você pode ver o resultado Agora você pode ver com o título que ele também aplicou cores em nossos parágrafos E agora vou mostrar nosso outro exemplo. Neste exemplo, vou mostrar como podemos usar o seletor Over com is Positoselector Para isso, vou duplicar esta seção e comentar a seção anterior E eu vou remover esse. E aqui eu quero falar sobre Hober em nosso parágrafo. Então, primeiro, precisamos digitar o elemento, qual elemento eu quero passar o mouse Vou digitar P. Em seguida, Colon, precisará passar o seletor hoberPosito, que é hober E eu vou configurar esse arquivo. Depois de definir esse arquivo, se I Her my Carr neste parágrafo, você pode ver que a cor da fonte mudou Então é assim que podemos usar Her com is PozioSelector Então, esses são quatro exemplos diferentes de como podemos usar o seletor Posido Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 17. CSS tem Pseudo-Classe: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro Positoseletor. Desta vez, abordaremos CSS como PostoClass. É outra nova positoclasse em CSS. Agora vamos tentar entender o que é hash PosidoGass. Para entender isso corretamente, deixe-me mostrar um exemplo. Como você pode ver, colocamos dois elementos. Aqui temos ProTolt encabeçando um elemento. Como você pode notar, o sabor dentro dessa etiqueta, hello world é o mesmo. Mas em nossa primeira tag de cabeçalho, aqui usamos a tag span. Movemos o mundo dentro da tag span, e agora eu quero selecionar o elemento, qual deles tem essa tag span. No nosso caso, nosso primeiro elemento H um, essa tag, porque aqui usamos a tag span, mas em nosso elemento St. H um, não usamos essa tag span. Usando a tag Span, vamos selecionar o elemento pai dessa tag span. No nosso caso, H uma tag. É um seletor principal. Ele selecionará o primeiro título de um elemento. Então, como podemos usá-lo? Vamos falar sobre sua sintaxe. Primeiro, precisamos dar a dica H one, o elemento principal que eu quero selecionar, depois precisamos digitar dois pontos, has Então, dentro do Rundss precisamos passar esse elemento filho No nosso caso, span. Então, dentro do Calviss, você pode implementar as propriedades CSS Se houver uma tag span dentro da tag de cabeçalho um , ela selecionará a tag de cabeçalho. Caso contrário, ele não selecionará o elemento pai. Aqui, o elemento alvo é H one tag e esse seletor é span Então, dentro da calivs, você pode aplicar qualquer propriedade CSS. No nosso caso, aqui aplicamos o sublinhado da decoração. E ele adicionará esse sublinhado em nossa primeira tag H one Então, vamos começar a prática e ver como podemos aplicá-la. Então, como você pode ver lado a lado, abri meu editor de código do Visual Studio e meu navegador usando a extensão light de servidor e já criei o nome do documento HTML index dot TML Agora, você pode ver em nossa tag body, aqui temos duas tags H one, mas em nossa primeira tag H one, temos a tag Span para este mundo mundial E também temos uma tag de dois parágrafos. E em nossa tag do primeiro parágrafo, aqui usamos a palavra em negrito, B, tag em negrito, essa. Mas em nossa tag de segundo parágrafo, aqui não usamos nenhum elemento filho. Agora vamos entrar nessa seção de estilo. Aqui, vou digitar a tag de estilo. Estilo. Dentro dessa tag de estilo, quero selecionar somente essa tag de título que tenha a extensão do elemento filho. Para isso, precisamos digitar H um cólon. Então, precisamos usar o hash p zero class has. Então, dentro da resina redonda, aqui precisamos digitar o nome do elemento filho No nosso caso, span. Então, dentro do Cariss, podemos usar a propriedade CSS, como se eu amarrasse a cor, então vou mudar a cor da fonte desse título e quero torná-la vermelha Em seguida, defina esse arquivo, você pode ver o resultado. Usando a tag filha, span, aqui selecionamos o elemento pai. Da mesma forma, você pode selecionar a tag de parágrafo porque nessa tag de parágrafo, ela usa a tag bool dentro dela, B. Vou pegar esta seção e, desta vez, quero selecionar a tag de parágrafo, P aqui vou pesquisar a tag B, negrito, e vou definir esse arquivo Depois de configurar esse arquivo, você pode ver o resultado. Além disso, aqui podemos passar várias tags de uma só vez. Suponha que, com a tag bool, eu queira pesquisar a tag span, e aqui vou adicionar a tag span, span E dentro da etiqueta span, vou colocar essa palavra. Se eu definir esse arquivo , ele aplicará o mesmo CSS em nosso segundo parágrafo. Deixe-me te mostrar. Suponha que defina esse arquivo, você pode ver o resultado. Agora a pergunta é por quê? Porque, como eu disse, aqui podemos passar várias tags. Agora, ele pesquisará os parágrafos que têm a tag B dentro dele e a tag span dentro dele. É por isso que ele seleciona uma tag de vários parágrafos. Agora, deixe-me atribuir uma classe a essa tag de parágrafo. Class e HendTyo. Em nosso segundo parágrafo, vou adicionar um ID. Identificação dois. Com isso, também vou usar a classe um. Eu vou satisfazer. Agora, vou selecionar o parágrafo, caso contrário, elementos usando seu nome de classe. Aqui, direcionamos o elemento usando o nome da tag, mas desta vez vamos direcionar o elemento usando o nome da classe. Sim, podemos fazer isso usando essa classe Posido. Deixe-me te mostrar como. Então, aqui vamos digitar um, Colin hash. Dentro desse seletor PostoClass, eu quero ter como alvo a tag span span Então, dentro do recesso de cores, vou usar propriedade, texto, decoração, sublinhado Além disso, vou atribuir a mesma classe em nossa primeira classe de tag H one e vou aprovar uma. Agora, se eu colocar essa pilha, aqui você pode ver o resultado Agora você pode ver que são essas classes que têm a tag child span. Aqui você pode ver aqui que usamos mesmo nome de classe em três tags, H uma tag ou tag de primeiro parágrafo, e em nossa tag de segundo parágrafo, usamos o mesmo nome de classe, um, um, um, mas em nosso primeiro parágrafo, não temos a tag de gastos dentro dela. É por isso que não o selecionamos. Mas em nosso segundo parágrafo, temos essa caneta dentro dela. É por isso que ele seleciona este parágrafo e o sublinha. Da mesma forma, ele seleciona a primeira tag H one porque nesta tag H one, temos essa tag pan. Então é assim que podemos usar essa classe poseido. E lembre-se de que também podemos aplicar a seleção avançada dentro dela, como o seletor direto de crianças e muito mais Mas eu não vou mostrar tudo isso neste tutorial. Mas deixe-me mostrar um seletor avançado. Então, aqui, amtype deep tag, DV dentro dessa tag profunda, uma seção de amotype E dentro desta seção, vou colocar nosso primeiro elemento profundo. Então, aqui, eu vou amarrar outra etiqueta profunda. Dentro dessa tag profunda, aqui, vou passar nosso segundo elemento de mergulho. Vou mover esse elemento dentro dessa tag profunda. Agora vou contar toda a seleção e vou salvá-la Depois disso, aqui, vou usar o seletor direto para crianças. Aqui você pode notar, tanto no elemento profundo, que temos a tag H one. Mas em nosso primeiro elemento, aqui usamos a seção antes da tag H one. Agora, vamos criar uma seleção ha pasito. Então, digite o hash de ponto e vírgula D. Dentro do recesso redondo, vou digitar H. Então dentro do Caris aqui eu vou mudar a cor do fundo, digitar fundo vermelho Agora, como você pode ver, os dois elementos profundos tinham a mesma tag H um, mas eu quero selecionar aqueles elementos profundos que têm seletor direto de filhos, tag h de filho direto, como esta Como você pode ver, em nosso primeiro elemento div, após essa tag dip, temos a tag section Mas em nosso segundo elemento div, temos diretamente H uma tag Então, aqui, vou usar o seletor dichl, este, e vou definir esse arquivo Depois de configurar esse arquivo, aqui você pode ver o resultado. Aqui, selecione esse segundo elemento dip porque dentro dele, temos o seletor secundário direto H one tag, mas em nosso primeiro elemento div, temos a tag section e, em seguida, temos a tag H É por isso que ele seleciona este. Então é assim que podemos usar o Hash Persio Selector. Acho que agora está claro para você. Obrigado por assistir a este vídeo. Fique atento ao nosso próximo tutorial 18. Pseudoelemento CSS Parte 1: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS avançado. E neste tutorial, vamos aprender o elemento CSS poseto Em nosso tutorial anterior, aprendemos óculos CSS poseido Em nosso tutorial anterior, já sabemos que precisamos dizer qual tipo de categoria de seletor de CSS Seletor simples, seletor combinador, seletor de atributos, óculos Busudoglasses e seletor de elementos postos. Eu já abordei tudo isso em nosso tutorial anterior, exceto posteto element Então, hoje, neste tutorial, vou abordar o elemento posito Vamos ver que tipo de elementos positivos temos. Como você pode ver, temos um total de seis tipos de elementos posito antes, primeira letra, primeira linha, seleção e pasta de localização E neste tutorial, abordarei apenas os quatro seletores, a primeira letra, a primeira linha, a seleção e o espaço reservado E vamos aprender mais sobre isso no próximo tutorial. Então, sem perder seu tempo, vamos começar pela prática Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já crio um documento de estimativa chamado index dot HTML. E nosso documento de estimativa começa com um parágrafo e Adalis depois novamente com um parágrafo Então, vou aplicar a primeira letra e primeira linha nesses parágrafos. Então, vamos começar. Então, eu quero selecionar o nome do elemento do tipo filho do parágrafo P. Então eu vou usar dois pontos seno, mas precisamos usar dois pontos seno dois t. Para elementos positivos, precisamos usar dois t. Então eu quero selecionar a primeira letra, tipo de invocação, primeira letra. Então eu quero selecionar a primeira letra, tipo de invocação, primeira letra invocação Dentro das calibragens, vou usar uma propriedade colorida Cor y. Além disso, vou aumentar o tamanho da fonte. Tamanho da fonte. Aqui eu vou dizer que é de 32 pixels. Acima desse arquivo, você pode ver o resultado. Como você pode ver em nossa página da web, ele aplicou essa primeira letra CSS deste Panagrama Isso mudou a cor da fonte dessa letra. À medida que aumenta o tamanho da letra. Da mesma forma, se você quiser selecionar o elemento AI da primeira letra para isso, basta substituir P por AI e esse arquivo. Acima desse arquivo, você pode ver o resultado. Esse é o uso do elemento da primeira letra. Agora, vamos falar sobre nosso segundo elemento, que é a primeira linha. Para isso, vou datar esta seção e comentar a seção anterior. E aqui eu vou amarrar, vou selecionar o parágrafo P e também vou amarrar a primeira linha. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode vê-lo aplicar esse estilo, a primeira linha deste parágrafo. Agora, vamos falar sobre nosso próximo seletor de elementos, que é a seleção Isso é introduzido no CSS três. Vamos ver como podemos usá-lo. Primeiro, vou comentar esta seção e depois notei essa. Se você notar, você pode ver que, sempre que eu seleciono meu parágrafo, você pode ver a cor do nosso texto ficar branca e a cor de fundo ficar azul. Isso é chamado de seleção. Se você quiser alterar a cor de fundo, caso contrário, qualquer propriedade após a seleção, poderá usar esse seletor de elementos Deixe-me mostrar como, primeiro, vou selecionar o elemento P. Em seguida, ligue para dois pontos, vou digitar a seleção. Seleção e dentro das prensas redondas, nossa primeira propriedade é o plano de fundo fundo e a cor de fundo são vermelhos, e nossa segunda propriedade é a cor. Cor, por quê? Se eu definir esse arquivo, altere esse arquivo, se eu definir esse elemento de parágrafo, como você pode ver, agora nossa cor de fundo ficará vermelha e a cor do texto ficará branca. Este é um usuário do elemento de seleção. Mas se eu selecionar a tag LI, ela não funcionará. Eu decido aplicar a seleção CSS a toda essa página da web. Para isso, basta remover o nome da tag P, você precisa usar a seleção de códons de dois pontos. Ala, esse arquivo. Se você selecionar as tags de parágrafo e LI, poderá ver o resultado. Como você pode ver, ele aplica a fundo vermelho e a cor branca do texto. Este é o nosso trabalho com elementos de seleção. Agora, vamos falar sobre nosso último elemento positivo, que é mais antigo. Para isso, vou duplicar esta seção. E comente a seção anterior. Vou configurar esse arquivo. Basicamente, os espaços reservados funcionam com um formulário estável. É por isso que abri meu Dpment estável anterior que é a tabela de pontos frontais, e você já está familiarizado com esse estábulo Como você pode ver neste formulário, não temos nenhum espaço reservado neste formulário, aqui vou adicionar um espaço reservado Em nossa seção de entrada do primeiro nome, aqui vou usar um espaço reservado e vou digitar Digite seu Da mesma forma, adicionarei o espaço reservado em nossa seção de sobrenome Então, vou copiar o espaço reservado e digitá-lo aqui e colocá-lo aqui e digitar Hemo e inserir seu sobrenome Além disso, vou adicionar um espaço reservado em nossa seção. Então, vou digitar o espaço reservado e aqui vou passar 15 e vou definir esse arquivo Depois de definir esse arquivo, você pode ver o espaço reservado em nossa tag de entrada E sempre que tento preencher qualquer entrada, ele remove nosso espaço reservado Esse é o uso do espaço reservado. Agora eu quero estilizar esse espaço reservado. Para isso, precisamos digitar o espaço reservado para dois pontos e dois pontos e, dentro das calibragens, vou aplicar Cor e eu quero a cor vermelha. Depois de acessar esse arquivo, você pode ver o resultado. Ele aplica a cor vermelha a todo o texto do espaço reservado. Espero que agora esteja claro para você, qual é o uso do espaço reservado No próximo tutorial, vou subir e começar o seletor de elementos Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 19. CSS antes e depois de pseudoelementos: Se. Ei, pessoal, é bom ver vocês de volta. Este é o segundo tutorial relacionado ao seletor de elementos CSS e, neste tutorial, abordarei a recuperação do CSS antes dos posidoseletores Em nosso tutorial anterior, já aprendemos sobre a primeira letra, primeira linha, a seleção e o espaço reservado Neste tutorial, vou encobrir tudo o que foi dito antes. Mas antes precisamos aprender como realmente funcionam os Posidoelectores superiores e anteriores Neste documento, como você pode ver, temos um parágrafo. Agora vou estilizar este parágrafo usando upturn anterior Primeiro, vou selecionar o parágrafo do nome do elemento. Em seguida, cólon e cólon. Eu vou digitar antes. Isso é antes do seletor de elementos. Então, em Cali versus nossa primeira propriedade é o plano de fundo. Leitura de fundo. Com isso , também vou mudar a cor da fonte. Cor e a cor é branca. Vou usar o HexaValuhTag FFA. Se eu definir esse arquivo, nada vai acontecer. Agora, o quociente é como ele realmente funciona. Aqui você pode ver um parágrafo. A maioria dos desenvolvedores acha que Ara significa depois da tag do parágrafo e antes significa antes da tag do parágrafo. Não, não é assim. Antes quero dizer o primeiro filho deste parágrafo. Até antes, nosso parágrafo começa. Before é o primeiro filho deste parágrafo. Da mesma forma, atar é o último estilo deste parágrafo. Quando o conteúdo do parágrafo termina, vem o apta tang Ambos os elementos estão dentro da tag de parágrafo, não fora da tag de parágrafo. Vamos ver como podemos realmente usá-lo. Mas antes de mergulharmos nisso, você deve saber como usar upar e, antes disso, precisamos usar um conteúdo de nome de propriedade csus Sem conteúdo, não podemos usar upturn antes do Clectron. Dentro desse seletor anterior, vou usar outra propriedade csus que é content Conteúdo. Aqui você pode passar qualquer texto, qualquer imagem, qualquer URL, o que quiser. Aqui eu quero digitar um texto. Vou usar códigos duplos e vou digitar olá. Agora, se eu definir esse arquivo, você poderá ver o resultado. Antes do início do nosso parágrafo, ele adiciona essa palavra olá da mesma forma, vou criar um seletor superior Vou duplicar esta seção e vou digitar em alto Dentro do curso Doble, vou digitar world. Se eu definir esse arquivo, você poderá ver o resultado. No final deste parágrafo, é um mundo. Vamos reduzir o tamanho da fonte. Aqui eu quero digitar o tamanho da fonte 30 pixels e vou definir esse arquivo. Agora você pode ver o resultado. Agora, todos esses são elementos secundários da tag de parágrafo. Basicamente, criamos dois elementos usando o seletor antes e depois E se você quiser usá-lo como um elemento D, sim, você pode. Você pode definir uma largura d alta para esse elemento, etc. Vou digitar este bloco play, display, e vou usar a mesma propriedade em nossa seção superior. Essa peça, blá. Depois de definir esse arquivo, você pode ver o resultado. Agora é em um Demin. Além disso, se você quiser adicionar altura e largura, sim, você pode. Vou digitar altura, altura, 100 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Agora, deixe-me mostrar outro exemplo. Para isso, vou comentar esta seção e também vou remover essa propriedade. Com isso, quero usar o efeito Over. B, C e mais. Se eu definir esse arquivo, como você pode ver, isso é apenas um parágrafo. Mas quando abro meu cursor neste parágrafo, você pode ver o resultado. Como você pode ver, agora aparece o mundo dos elementos superiores e sempre que eu removo meu cursor, agora ele desaparece. Este é um bom exemplo de upper poco select. Lembre-se de que você pode usar os procedimentos antes e depois selecionados com qualquer tag. Você pode usá-lo com parágrafo, etiqueta âncora, elemento profundo, etc., o que quiser Mas há uma exceção. Você não pode usá-lo com a tag de imagem. Você precisa se lembrar disso. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 20. Tutorial de pseudoelementos de marcador: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao Advancess e, neste tutorial, aprenderemos um novo elemento posito , chamado marcador Já estamos familiarizados com esses elementos do posito depois da primeira letra, primeira linha, seleção e espaço reservado Nessa lista, havia um novo elemento positivo, que é o marcador. Primeiro, vamos tentar entender qual é o significado disso. Aqui você pode ver a lista de pedidos e temos alguns nomes de alimentos nesta lista. Agora eu quero mudar a cor desses pontos. O que costumávamos fazer para mudar a cor desse ponto? Nós apenas atribuímos uma nova cor a uma tag LI e chamamos esse marcador de processo, mas não podemos separar a cor do texto da cor do marcador para resolver esse tipo de problema, introduzindo o CSS, classe Marker Posido Vamos começar a prática e ver como podemos usar esse novo elemento posito Como de costume, lado a lado, abro meu editor de código do estúdio de resultados e meu navegador usando a extensão de servidor Lip, e já crio um documento estável chamado index dot HTML Como você pode ver no meu navegador, temos a lista nwterlist e a lista WADA Além disso, você tem a Lista de Guerra. Agora eu quero separar a cor do marcador da cor do texto Para isso, precisamos usar o seletor Marker Posito. Aqui vou digitar o marcador de cólon e cólon. Então, dentro da resina colorida, eu vou dizer que é cor Cor e eu quero dizer isso de cor vermelha. Se eu definir esse arquivo, você poderá ver o resultado no meu navegador. Aqui você pode ver no meu navegador que as cores dos marcadores foram alteradas Qualquer que seja o menor tipo que usemos, aplicaremos tudo isso. Mas agora eu decido que quero mudar a cor do marcador subaquático. Para isso, aqui vou vincular a UL Unwater East AI. Dentro da lista abaixo de todas as tags LI, eu quero aplicar o marcador seletor poseido Se eu definir esse arquivo, você poderá ver o resultado. Agora, ele aplica a cor do marcador, somente a lista abaixo Lembre-se de que, por enquanto, esse seletor de marcadores suporta apenas uma propriedade CSS, que é Você não pode aumentar o tamanho do marcador usando esse seletor. Talvez possa apoiar no futuro. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial