Guia completo de CSS (incluindo animação, Flexbox, Grid e Sass)

1. Introdução ao curso: Olá e bem-vindo. Meu nome é Jet Shokar Sou desenvolvedor web Full Stack, freelancer e instrutor on-line E bem-vindo ao Guia Completo de CSS do Webcourse. Este é o curso mais completo, bem organizado e amigável para iniciantes para desenvolvedores web que desejam aprender CSS Não vou explicar por que o CSS é importante. Porque você está aqui, você já sabe disso. Então esse é um dos cursos mais completos sobre CSS. Aqui você pode aprender sobre animação CSS, flexbox, ganância e SAS Até hoje, eu já carrego mais de 19 horas de conteúdo. Além disso, ele vem com uma lista de 171 vídeos. Vamos começar com noções básicas sobre CSS, como cor de fundo, borda, contorno, preenchimento, etc seguir, aprenderemos todas as propriedades do texto, todos os tipos de propriedades do plano de fundo . Vamos aprender sobre o layout CSS como propriedade de exibição, visualidade, índice Z, posição, consultas de mídia, estável, etc Além disso, aprenderemos sobre unidades CSS, funções, variáveis e muito mais. Depois disso, vamos pular para a seção seletora avançada Sim, aprenderemos o seletor avançado de CSS, como seletor combinador, seletor de atributos, seletor de pósito Em seguida, abordo alguns tópicos avançados de CSS, como regra de entrada, comportamento de rolagem, proporção e cor de subida A seguir, aprenderemos a animação CSS. Em seguida, vamos entrar na grade CSS, no CSS ex box e, por fim, abordaremos o pré-processador CSS Vamos aprender CS. Como eu disse, esse é o curso mais completo sobre CSS. E se você quiser se interessar em aprender CSS em detalhes , podemos começar nossa jornada a partir da próxima lição. Muito obrigado 2. O que é CSS: Olá, amigos, bem-vindos. A partir deste tutorial, iniciaremos o CSS três. Este é o primeiro tutorial relacionado ao CSS e, neste tutorial, apresentarei a introdução do CSS. O nome completo do CSS é Cascading Style Sheet. E usamos folhas de estilo em cascata em DML. Sem o TML, não é tão útil. Primeiro, você precisa criar uma estrutura TML e, em seguida, usar CSS para estilizar as estruturas Agora você pode ter explicado por que aprendemos CSS. O uso básico do CSS é estilizar as tags TML. Suponha que você pegue qualquer tag de parágrafo, caso contrário, crie Davil de outra forma, qualquer tag profunda, e agora queira dar cor a essas tags, caso contrário, podemos fazer com CSS, adicionando preenchimento, mesclagem, borda , etc Podemos fazer todo tipo de estilo em nossa tag ATML com CSS. Nós apenas criamos uma estrutura usando ASTML e lidamos com essa parte de estilo usando E em seguida, usamos CSS para sites responsivos. Site responsivo que apresenta CSS três. Agora você pode ter uma ideia, o que é um site responsivo Suponha que você crie um layout de site para resolução de desktop e, em seguida, queira abrir o mesmo site em seu tablet e celular. Nesse caso, o CSS desempenhará o papel fundamental. Isso mudará o design do layout acordo com a resolução do dispositivo. E o terceiro uso mais importante do CSS é a animação na página da web. Usando o CSS três, você pode animar qualquer estrutura TMS e o quarto uso importante do CSS é a transformação de dois D e três D de elementos AT Você pode girar o elemento, você pode mudar a perspectiva Além disso, você pode jogar com o índice Z, etc. E o quarto ponto importante é tornar nosso processo de desenvolvimento web muito rápido. Agora você pode ter explicado como isso tornou nosso site muito rápido. Deixe-me te mostrar. Então, aqui você pode ver, temos um arquivo CSS no centro e, ao redor do arquivo CSS, temos o total de buscas. Documento estável, como página inicial, página externa, página de contato, galeria, etc Então, agora podemos estilizar todo o documento TML, caso contrário, todos os arquivos de estimativa de um único arquivo CSS Se você observar qualquer site, o cabeçalho, o rodapé, a barra lateral, tudo permanece exatamente igual Só para alterar o conteúdo dentro da página. Suponha que você queira alterar a cor de fundo do seu site. Você deseja usar a cor de fundo vermelho em suas páginas da web. Para isso, basta alterar uma vez em seu arquivo CSS. Depois de alterar a cor do plano de fundo no arquivo CSS, ela será refletida em cada documento HTML Mas se você quiser fazer isso sem CSS, para isso, você precisa usar a cor BG em suas tags TML, e você precisa fazer a mesma coisa em seu arquivo ETML por seis vezes Um por um, você precisa abrir todo o documento HTML e alterar a cor do plano de fundo E é um processo muito demorado e irritante. Agora, vamos falar sobre o tipo de software que precisamos para aprender CSS. Basicamente, precisamos de dois softwares, um editor de CSS e um navegador. Para isso, você pode usar qualquer editor de HTML, como Note plus plus, Visa studio code, atom, etc Basicamente, para este tutorial, vou usar o Vs code Editor. Mas depende de você qual editor você vai escolher. Então, isso é tudo para este tutorial. Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 3. Tutorial de implementação de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao CSS 3. E neste tutorial, aprenderemos como podemos implementar CSS em nosso documento StBL. Basicamente, temos um total de três maneiras implementar CSS com um estável. A primeira e mais fácil maneira é o estilo embutido. Usando o estilo embutido, você pode usar CSS diretamente em suas tags estáveis Você só precisa atribuir o atributo de estilo em sua tag estável. E o segundo método é a tag de estilo Impage. Dentro do seu documento de tabela, você pode usar a tag de estilo para implementar o CSS. E na terceira forma, você pode criar uma folha de estilo externa para seu código CSS. Este é o método mais popular e eficaz. Aqui, precisamos criar um arquivo CSS separado e vincular esse arquivo a tags estáveis. Agora vamos tentar entender o que é o método de estilo interior, como podemos usar o método de estilo interior Como você pode ver neste exemplo, temos um cabeçalho e, dentro desse título, uma tag, temos um texto. Bem-vindo. E agora eu quero mudar a cor da fonte desse texto. Para isso, vamos usar o método de estilo Inland. Primeiro, precisamos usar o atributo de estilo dentro dessa tag de cabeçalho. Em seguida, precisamos atribuir a propriedade CSS, no nosso caso, a cor, e então precisamos fornecer o valor e o valor é verde. E se você notar, como você pode ver, separamos propriedade e valor usando dois pontos seno e terminamos nossa linha com ponto e vírgula terminamos nossa linha com ponto e Da mesma forma, se você quiser adicionar outra propriedade, sim, você pode, algo parecido. Suponha que você queira aumentar o tamanho da fonte. Para isso, você precisa usar essa propriedade, tamanho da fonte, dois pontos e fornecer o valor, que é 15 pixels Portanto, esse é o método de estilo embutido. Usamos o código CSS diretamente em nossa tag ESTaml. Agora você pode pensar que esse é o bom processo, mas não é. Vale a pena quando você tem uma pequena quantidade de tags ESTaml porque quando você tem muitas tags estáveis , não é possível estilizar todas as tags uma por uma Sim, você pode, mas não é um bom hábito. Porque sempre que você precisa alterar qualquer propriedade ou valor , é muito difícil descobrir a propriedade. Além disso, torna nossa página muito longa e pesada. E para resolver esse problema, você pode usar a tag de estilo Impage Como você pode ver neste exemplo, essa é a estrutura básica da tabela. Se você gosta de usar a tag de estilo Impage, então você precisa usar a tag de estilo dentro da tag de cabeçalho Agora podemos usar toda a propriedade CSS dentro da tag de estilo. E uma coisa importante que você precisa lembrar que você pode usar a etiqueta de estilo na parte interna da etiqueta principal, não em nenhum outro lugar. Então, dentro dessa tag de estilo, precisamos pegar um seletor, algo parecido Suponha que você queira selecionar essa tag de título e alterar a cor da fonte. Nesse caso, você precisa segmentar essa tag de cabeçalho usando o nome da tag, H one. Então, dentro do Caliss, você pode usar propriedade e valor. Agora, ele aplicará a cor verde a todo o título de uma tag. Se você tiver vários cabeçalhos em uma tag, ela selecionará tudo. Por enquanto, em nossa tag body, temos apenas um título, uma tag, mas esse método também tem uma desvantagem Suponha que você tenha dez arquivos estáveis, então você precisa fazer a mesma coisa em todos os seus arquivos estáveis. Portanto, essa não é a melhor maneira de implementar CSS. Agora, vamos falar sobre o método mais popular, que é a folha de estilo externa. Nesse método, precisamos criar um arquivo CSS separado. Então, para criar esse arquivo CSS, precisamos definir a propriedade e o valor usando o seletor LPop Suponha que aqui criemos um arquivo CSS, estilo CSS de pontos. Para criar o arquivo CSS, precisamos usar essa extensão dot CSS e, em seguida, vincular o arquivo CSS ao nosso documento em tâmil Dentro da tag principal, aqui precisamos usar a tag Link. A tag de link é usada especialmente para essa finalidade. É usado para vincular documentos CSS. Dentro da tag de link, precisamos usar algum atributo. Nosso primeiro atributo é RL. RL significa folha de estilo de relação. Em seguida, precisamos declarar o tipo desse arquivo, que é CSS de texto Isso significa que o formato do arquivo é texto e o estilo é CSS. E esse é o atributo mais importante, que é o HRF. Nesse atributo, precisamos fornecer o caminho do arquivo. HREF significa referência de hiperlink. E aqui você precisa fornecer o nome exato do arquivo, caso contrário, o caminho do arquivo Portanto, esse é o melhor método para usar CSS. Usando esse método, podemos conectar um arquivo CSS a vários documentos ESTiml Então, isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos sobre isso na prática. Então, obrigado por assistir a este vídeo, Estátua. 4. Tutorial de cores e fundo em CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao CSS 3. E neste tutorial, aprenderemos sobre a propriedade de cor CSS e a cor de fundo. Usamos a propriedade color para alterar a cor do texto e, para alterar a cor de fundo de qualquer elemento, usamos a cor de fundo. Pode ser qualquer etiqueta de tamale. Seria um parágrafo, uma tag profunda, uma tabela, etc Então, sem perder seu tempo, vamos começar pela 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 Lip e já criei um documento TM chamado index dot TML Como você pode ver em nossa tag corporal, temos uma tag de cabeçalho. E nesta tag de cabeçalho, aqui digitamos, hello world. Se você notar, você pode ver no meu navegador, por padrão, que a cor é preta. Agora eu quero mudar a cor estrangeira. Para isso, aqui vou usar o método CSS embutido. Então, aqui vou digitar estilo, atributo de estilo e, em seguida, quero usar essa propriedade CSS chamada gull. Cor, e eu quero atribuir a cor vermelha ao vermelho. Se eu definir esse arquivo e aprender meu navegador, você poderá ver o resultado. Agora você pode ver que mudou a cor da fonte desse texto. Aqui você pode usar qualquer nome de cor. Suponha que você queira a cor verde, para digitar o nome da cor. E então você acabou de definir esse arquivo e pode ver o resultado no meu navegador. E lembre-se, podemos usar diferentes cores formatadas Vdo. Podemos usar o valor hexavalu argv, o valor argv etc Se você pesquisar por websp color, deixe-me mostrar e abrir qualquer página Aqui você pode ver o valor xa dessa cor. Com isso, também fornece valor RGV. Isso é chamado de valor xA e é chamado de valor argv. Se eu copiar esse valor e rasgar esse verde com esse número xa e depois definir esse arquivo e voltar ao documento, agora você poderá ver o resultado Ele transforma a cor da nossa fonte em verde claro e quase não é visível. Então, vamos mudar a cor. Desta vez, vou usar essa cor rosa. Então, vou copiar esse valor hexa. E vou substituir esse valor hexa por ele. Depois de substituir o arquivo definido e voltar para o documento, agora você pode ver a cor. Lembre-se de que o hexavalu vem com sempre o código de dígito, mas começa com uma Como eu disse, o CSS suporta vários formatos de cores. Ele suporta cores hexadecimais, cores decimais ixa com transparência, cores RGB, cores RGBA, cores HSL, cores HSLA. Vamos aprender sobre tudo isso em nossos próximos tutoriais Mas para este tutorial, vou usar hexa Valu, caso contrário, o nome da cor Em seguida, vou criar um parágrafo, P. E dentro desse parágrafo, vou adicionar um texto fictício Então eu vou digitar Loren. 20. Basicamente, ele adicionará 20 palavras de parágrafo com texto fictício E eu vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o parágrafo no meu navegador, mas vou duplicá-lo Então, vou selecionar este parágrafo e duvidar. Primeiro, vou configurar esse arquivo e depois vou mudar a cor da fonte do parágrafo. Então, esse é o nosso primeiro parágrafo. Então, para alterar a cor da fonte do parágrafo, aqui vou usar o método Ilenss Então, para digitar o atributo de estilo, quero aplicar a cor. Cor e eu quero a cor verde. Passe este arquivo, você pode ver o resultado. Além disso, quero adicionar uma cor de fundo a este parágrafo. Para isso, depois de semicolor aqui você precisa digitar a cor de fundo E eu quero a cor de fundo lou e vou definir esse arquivo Use este arquivo, como você pode ver, ele adiciona uma cor de fundo ao nosso primeiro parágrafo, e eu vou fazer a mesma coisa com o segundo parágrafo Então eu copio o atributo com valor e propriedade. Além disso, vou colá-lo em nosso segundo parágrafo. E desta vez, vou usar outra cor. Desta vez, como plano de fundo, vou usar a cor vermelha. E para cores agradáveis, eu quero usar a cor branca. Depois de configurar esse arquivo, você pode ver o resultado. Usando a propriedade de cor de fundo, podemos alterar a cor de fundo de qualquer elemento e, usando a propriedade de cor, podemos alterar apenas a cor da fonte, e você precisa se lembrar disso. E agora você decide destacar essa palavra construtora no primeiro parágrafo Para isso, você precisa usar a tag Span. Você precisa mover essa palavra dentro da tag span. Deixe-me te mostrar como. Então, aqui, você precisa usar a tag span. Cuspiu. E dentro da tag span, você precisa mover essa palavra, caso contrário, a frase. E então você precisa filtrar e destacar essa palavra, você decide que vai mudar a cor de fundo dessa palavra Para isso, novamente, você precisa usar o atributo de estilo. Estilo e, novamente, você precisa usar a propriedade de cor de fundo. Cor de fundo, e desta vez você quer fundo verde. Verde. Se eu definir esse arquivo, você poderá ver o resultado. Mas há um problema. A cor da fonte e a cor do plano de fundo são as mesmas. É por isso que agora sua fonte não está visível. Para isso, você decide vai mudar a cor da fonte agora. Você vai mudar a cor da fonte dessa parte, construtor Então, aqui, você pode usar a propriedade color. Pinte e você decide usar a cor branca. Por quê? Após a etapa deste arquivo, agora você pode ver o resultado. Então, é assim que você pode usar propriedades coloridas e propriedades de cor de fundo. Basicamente, neste tutorial, usamos o método Lenses. No próximo tutorial, aprenderemos sobre seletores básicos Então, obrigado por assistir a este vídeo, Statute, para o próximo tutorial 5. Tutorial de CSS Basic Selectors: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS 3. E neste tutorial, aprenderemos os seletores básicos de CSS Quando trabalhamos com o método impage, caso contrário, com um arquivo CSS externo , os seletores básicos são muito úteis e não são úteis para métodos de estilo embutidos Então, vamos ver quantos tipos de seletores básicos temos. Temos um total de três tipos de seletor básico. Podemos selecionar o elemento pelo nome da tag, pelo nome da classe e pelo nome do ID. Agora, vamos ver como podemos selecionar o elemento pelo nome da tag. Este é o exemplo do seletor de nome de tag. Podemos selecionar o elemento usando um nome de tag estável. Suponha que eu queira selecionar todas as tags de cabeçalho em nossa página da web Para isso, basta digitar H um, então precisamos usar Cariass Ele selecionará todas as tags de cabeçalho em sua página da web. Da mesma forma, se você quiser selecionar a tag da tabela, caso contrário , a tag profunda, basta colocar o nome e depois usar o Cariss Então, dentro das calices, você pode passar sua propriedade e testamento Suponha que você queira atribuir uma cor de fonte vermelha ao título de uma tag com a qual deseja definir o tamanho da fonte, 15 pixels. Em seguida, precisamos passar essa propriedade e valor dentro da classe. Esse método é chamado de seletor tagnEM porque aqui usamos as tags estabal para direcionar o Mas há um pequeno problema com esse seletor. Se você tiver várias tags de tabela, caso contrário, várias tags profundas em sua página da web, nesse caso, ela aplicará todas as propriedades a toda essa tag profunda. Agora vamos falar sobre nosso próximo seletor básico, que é o seletor de classes Como eu disse, suponha que tenhamos várias tags H one, mas você não deseja aplicar essa propriedade em todas as operações. Nesse caso, você pode usar o seletor de nome de classe. Para isso, o seletor de nome de classe é muito eficaz. Então, como podemos usá-lo, deixe-me mostrar a você. Então, como você pode ver aqui, selecionamos um cabeçalho de nome de classe. Para selecionar a classe, você precisa usar o sinal de ponto. Acima de um sinal de ponto, você precisa passar o nome da turma. No nosso caso, cabeçalho. Então, dentro dos calres, você pode usar suas propriedades CSS. E para atribuir essa classe em sua tag TML, você precisa usar o atributo de classe Suponha que aqui você use uma tag profunda e, dentro da tag Dip, você precise usar o atributo de classe Igual ao curso duplo, você precisa passar o nome da turma. Você pode escolher seu próprio nome de classe para qualquer coisa. Agora, qualquer CSS que você usar será aplicado somente nesse elemento profundo, porque esse elemento profundo atribuiu uma classe de cabeçalho. Agora, vamos falar sobre a especificação do nome do seletor de classes. Temos algumas limitações para usar Classes. Deixe-me te mostrar. Esse é o primeiro método que você pode usar a classe. E esse é outro exemplo de que você pode usar a classe. Aqui você pode ver até um ponto, usamos o menu total de duas palavras, menos hífen Sim, você pode usar hífen seno. Além disso, você pode usar asco sine. Com isso, você também pode usar o estojo de camelo. Mas uma coisa mais importante que você precisa lembrar você não pode atribuir, caso contrário, forneça qualquer espaço entre duas palavras. Se você usar espaço entre essas duas palavras , nesse caso, não funcionará. Então você precisa se lembrar dessa coisa importante. Agora, vamos falar sobre outro seletor, que é o seletor de ID É muito parecido com o seletor de classes. Só quero usar o HTagSign antes do nome do ID. No nosso caso, quero dizer Hateg. Usando o hastag, nosso CS identificará que é um ID. E este é o exemplo de como podemos usar o seletor de ID. Como você pode ver, temos uma lista nor e, nessa lista desordenada, atribuímos um ID ID igual a mid para atribuir esse ID, precisamos usar o atributo ID. Então agora você pode ter uma pergunta. Qual é a diferença entre o seletor ID e CLS? ID deve ser Q. Você pode usar o seletor de ID uma vez em uma página da web Você não pode usar o mesmo ID várias vezes, mas você pode usar o mesmo seletor de classe várias vezes. Se você quiser usar milhares de vezes, sim, você pode. Agora a pergunta é: por que isso? Porque alguns elementos são criados apenas uma vez. Em uma página da web, não criamos uma seção de cabeçalho várias vezes Nós o criamos apenas por uma vez. É por isso que usamos ID para isso. Basicamente, o ID atribui a esse elemento uma identidade única. Então essa é a diferença básica entre eles. Agora, vamos falar sobre alguns seletores de descendentes. É um seletor bastante avançado e de próximo nível. Suponha que você tenha centenas de tags Anca em seu site. Pode estar em qualquer lugar na seção de cabeçalho, seção de conteúdo, seção da barra lateral, seção rodapé, seção nebr, etc., mas você deseja segmentar as tags de gato que estão dentro da seção mas você deseja segmentar as tags de gato que estão dentro Caso contrário, elemento de cabeçalho. Nesse caso, precisamos usar esse tipo de seletor de anúncios Esse é o cabeçalho de seleção principal e, como você pode ver, é um ID. Então eu quero direcionar toda essa tag âncora, que está dentro desta seção de cabeçalho Então, eu forneço um espaço, alvo e miro o elemento âncora Da mesma forma, se você quiser direcionar todo esse parágrafo, que está dentro do item da lista, para isso, você pode usar este. Como você pode ver, esta é uma classe, menos espaço. Quero segmentar todo o parágrafo que está dentro do elemento da lista. E em nosso último seletor, temos como alvo essa tag UL específica, que tem ID de menu Em seguida, forneço um espaço e direciono toda a tag LI que está dentro dessa tag UL específica. Eu sei que parece confuso. Não se preocupe com isso. Isso está apenas começando. Eu já criei capítulos específicos para esses seletores avançados Agora eu simplesmente esqueci disso. Você não precisa se lembrar de nada. Nem eu tento me lembrar de todas essas coisas. Quando trabalhamos com isso , procuramos por ele. Este é apenas um vídeo básico de introdução do seletor CSS. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 6. Tutorial de CSS Border: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre a propriedade de borda CSS. Por que precisamos usar propriedades fronteiriças? A fronteira do CS tem algumas propriedades. Nosso primeiro nome de propriedade é borda nosso segundo nome de propriedade é estilo de borda e nosso terceiro nome de propriedade é cor da borda. Usando a fronteira do CS com a propriedade, podemos controlar a fronteira com. Podemos fazer com dois pixels, um pixel, caso contrário, 100 pixels também. E usando a propriedade de estilo de borda, podemos alterar o estilo de borda. Pode ser pontilhado, tracejado, temos um total de dez estilos de borda diferentes e aprenderemos sobre isso neste tutorial E usando nossa terceira propriedade, podemos atribuir qualquer cor à nossa borda. Deixe-me mostrar um exemplo dessa garrafa. Como você pode ver, temos um elemento profundo. E nesse elemento profundo, temos um parágrafo. Mas fora do parágrafo, temos uma borda vermelha. Esse é o exemplo da fronteira. Se você quiser criar esse tipo de borda, precisará definir uma borda com dois pixels. Com isso, você precisa digitar o estilo de borda sólido. Essa é uma borda sólida. borda sólida fornece a linha reta, e nossa terceira propriedade é a cor da borda. Como você pode ver, nossa borda é vermelha. Então é assim que podemos usar essa propriedade e criar uma borda. Agora, vamos falar sobre o estilo de borda. Como eu disse, temos dez estilos diferentes de borda. O CSS fornece um total de dez bordas. A primeira borda é sólida. A segunda borda é pontilhada. Depois vem o pai, depois o dobro. Em seguida, Grove. Em seguida, elevamos a fronteira. Em seguida, temos inserido, depois externo, nenhum e misturamos Então, esse é o estilo de borda que vamos aprender neste tutorial. Agora vamos falar sobre a abreviatura de fronteira. Como você pode ver neste exemplo, aqui usamos um total de três propriedades diferentes de borda com estilo e cor, mas eu não quero usar três linhas diferentes. Eu quero fazer todas as coisas em uma única linha. Para isso, a borda Cs tem uma abreviatura, e esse é o exemplo da Basta digitar a propriedade da borda e, em seguida, fornecer os valores. Primeiro, você precisa fornecer a largura da borda. Em seguida, você precisa fornecer o estilo da borda e, por último, fornecer a cor da borda. Agora você não precisa digitar três linhas diferentes para esse trabalho. Agora, vamos falar sobre um tópico diferente. Suponha que você queira atribuir uma borda somente ao lado direito. Nesse caso, você precisa usar a propriedade de direito de borda. E se você quiser usar apenas a parte inferior, caso contrário, somente a esquerda, poderá usar essas propriedades. Então, essas são todas as propriedades relacionadas à borda que abordarei neste tutorial. Então, sem perder seu tempo, vamos começar pela 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 lip server e já criei um documento HTML chamado index dot HTML Como você pode ver nesta página, criarei uma tag H um, uma tag de título, e você também terá um total de dois parágrafos. Agora eu decido que quero dar uma borda a essa tag de título. Para isso, vou usar o método de estilo Impage. Então, dentro da etiqueta principal, vou usar o estilo de etiqueta de estilo. E dentro dessa tag de estilo, primeiro, precisamos selecionar o título de uma tag. Em nosso tutorial anterior, já aprendemos sobre alguns seletores básicos Aprendemos sobre o seletor de impostos. Então, aqui, vou usar um seletor Stimaltax, que é Então, por dentro, o Oliver diz, eu vou usar propriedades de fronteira Primeiro, vou atribuir fronteira à propriedade. Borda Limitamos com, e eu quero atribuir uma borda de dois pixels. Dois pixels. Nossa próxima propriedade é em estilo fronteiriço. Estilo de borda. Estilo de borda, e eu quero uma borda sólida. Sólido. E nossa última propriedade é cor da borda, cor da borda, e eu quero atribuir uma borda vermelha. Certo. Depois de definir esse arquivo, você pode ver o resultado. Aqui você pode vê-lo adicionar uma borda vermelha ao título de uma tag. Podemos usar a propriedade border em qualquer tag Astb. Pode ser tabela, parágrafo, tag LI, qualquer coisa. Agora, vamos fazer alguns experimentos com esse valor. Suponha que eu queira aumentar a borda Alguns digitam cinco pixels. Se eu definir esse arquivo, você poderá ver o resultado. Aumentou a borda em até cinco pixels. Agora está muito visível. E agora vou mostrar um estilo de borda diferente. Primeiro, vou mostrar o estilo de borda pontilhada, algumas removem o sólido e digitam Após a etapa deste arquivo, você pode ver o resultado. Este é o exemplo do estilo de borda pontilhada. Agora nossa borda feita com pontos. Agora, vamos falar sobre outro estilo de borda, que é o traço Então, vou remover o pontilhado e digitar traço e definir Após a etapa deste arquivo, você pode ver o resultado. Agora nossa fronteira feita com traço. A próxima borda eu vou aplicar, que é dupla. Isso fornecerá fronteiras duplas. Duplique e defina esse arquivo. Vamos ampliar o ritmo um pouco. Espero que agora esteja claro para você. Agora, ele fornece um estilo de borda dupla. próximo estilo de borda que vou aplicar, que é groove Se eu definir esse arquivo, você poderá ver o resultado. Vamos ampliar um pouco mais. Então, isso é chamado de estilo de borda de grupo. Se você notar, pode ver que parece uma moldura. Basicamente, ele fornece uma pequena visão em três D, e a próxima borda que vou aplicar, que é levantada. Levantado e configurado este arquivo, você pode ver o resultado. É bem parecido com o Grupo. Exatamente na direção oposta à da luz. Próxima borda que vou aplicar, que é inserida. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, agrupados, elevados, inseridos, iniciais, ambos os estilos de borda fornecem uma visão em três D. Esses efeitos dependem do valor da cor da borda. Agora, vamos falar sobre outro estilo de borda que não é nenhum. Como você pode ver, não há fronteira. Nenhum valor define fronteiras. Nosso próximo e último estilo de borda é o mix. Para misturar, não digitamos o nome. Só para fornecer os valores. Deixe-me te mostrar como. Aqui, primeiro, precisamos fornecer o valor superior, depois o valor correto, depois o botão e, em seguida, o elevador. Então, no topo, eu quero uma borda pontilhada, pontilhada. À direita, então eu forneço espaço, e à direita, eu quero a borda tracejada tracejada E no fundo, eu quero uma garrafa sólida, sólida. E à esquerda, quero uma garrafa dupla. Duplo. Se eu definir esse arquivo, você poderá ver o resultado diferente. Agora, essa borda é feita com estilo de borda mista. No topo, temos uma borda pontilhada. À direita, temos uma fronteira tracejada. No final, temos uma borda dupla e, na parte inferior, uma borda sólida. Então é assim que o estilo de borda mista funciona. Agora, vamos falar sobre o método abreviado, como podemos usar o método abreviado e digitar todas as coisas em Então, primeiro, vou comentar todas as linhas, depois vou digitar border property, border. Como eu disse, primeiro, precisamos atribuir a fronteira com. Então, vou atribuir a borda de pixels. Em seguida, precisamos fornecer um estilo de borda, que seja sólido. Com isso, precisamos fornecer a cor da borda. E até o espaço, vou usar verde boercolor E eu vou configurar esse arquivo. Após a etapa deste arquivo, você pode ver o resultado. Agora, não precisamos digitar três linhas para obter esse resultado. Podemos fazer isso com uma única linha. Agora você decide que eu não quero fronteira em toda a direção. Eu quero bordar na posição inferior. Para isso, você precisa usar probidade de fronteira diferente. Vou comentar esta linha e, aqui, vou digitar borda inferior borda inferior. E eu quero uma borda de três pixels. Com isso, quero uma borda sólida, sólida, e a cor da nossa borda é cinza. Se eu definir esse arquivo, agora você pode ver, agora ele atribuiu uma borda na posição inferior. Da mesma forma, se você quiser atribuir borda na posição correta, sim, você pode, você precisa alterar a propriedade. Agora em tipo, borda, prateleira. Se eu definir esse arquivo, você poderá ver o resultado. Agora, ele atribuiu uma borda na posição correta. E uma coisa muito importante sobre a qual esqueci de falar, que é o raio da fronteira Suponha que eu tenha comprometido essa linha e quero essa fronteira. Então, eu descomento essa linha. Agora, como você pode ver, temos uma borda sólida. Mas se você notar, as bordas são muito nítidas. Eu não quero uma ponta afiada na minha borda. Eu quero fazer com que seja suave. Para isso, temos raio de borda purpert Somer tight, raio de borda, aqui vou passar Se eu definir essa pilha, agora você pode ver que nossas bordas estão curvas e você pode controlar o teor de carbono dessa borda se aumentar ou diminuir Suponha que desta vez eu passe 50 pixels, raio de borda, 50 pixels e defina esse arquivo Agora você pode ver a forma diferente dessa borda. Portanto, usando a propriedade do raio da borda, podemos controlar as idades da fronteira. Então, isso é tudo para este tutorial. No próximo tutorial, falaremos sobre o esboço. Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 7. Tutorial de esboço de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos sobre o esboço do CSS Qual é o uso da propriedade outline? Mas antes precisamos saber quantas propriedades temos em resumo Temos total para propriedade de contorno, contorno com estilo de contorno, cor do contorno e contorno Assim como a borda, temos dez estilos de contorno diferentes. Deixe-me mostrar um exemplo. Aqui você pode ver um elemento profundo. E nesse elemento profundo, temos um parágrafo, e essa é a parte inferior desse elemento profundo. Se eu disser valor de deslocamento e atribuir o contorno de Oset a esse elemento de imersão, deixe-me mostrar que será algo parecido com isso Aqui você pode ver outra borda fora da borda vermelha, e nós a chamamos de contorno Basicamente, usamos o contorno para criar duas bordas diferentes. Agora, se você perceber que pode ver, temos um espaço entre a borda e o contorno, e podemos atribuir esse espaço usando a propriedade oposta do contorno E se eu falar sobre estilos de contorno, temos estilos quase semelhantes aos que temos em borda, traço pontilhado sólido, duplo, tateado, inserção em relevo , fora, freira Agora, vamos falar sobre a abreviatura do esboço. Semelhante à propriedade de borda CSS, contorno do CS também tem uma abreviatura Não precisamos usar essas três linhas para criar um contorno, apenas para digitar uma linha, mas antes, apenas para usar esse contorno de propriedade Depois de usar a propriedade outline, precisamos passar para três Primeiro, precisamos passar a asa do contorno, depois precisamos passar o estilo e a cor do contorno Então é assim que podemos usar a abreviatura. Então, sem perder seu tempo, vamos estudar a prática e ver como podemos usar o outline Como de costume, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão lip server e já crio um documento de estimativa chamado index dot DML Então, como você pode ver nesta página do festival, temos um título e uma tag Além disso, temos que marcar parágrafos. Agora, primeiro, vou atribuir uma borda à nossa tag de parágrafo. Para isso, vou usar a tag de estilo dentro do estilo da tag de cabeçalho dentro da tag de estilo. Primeiro, vou selecionar o parágrafo usando a tag P. Então, dentro do CarlSso, a primeira propriedade nav é border. Borda, e eu quero uma borda de três pixels, três pixels. Com isso, eu quero sólido, não sólido. Além disso, quero usar a cor vermelha. Se eu definir esse arquivo, você poderá ver o resultado no meu navegador. Agora vou criar um esboço para este parágrafo. Para isso, como eu disse, primeiro, precisamos usar Outline With property Contorne com Outline With, e eu vou usar três pixels Nosso próximo nome de propriedade é estilo de contorno. Esboço, estilo, estilo de contorno, vou usar sólido E nossa última propriedade é o contorno colorido. Esboço, cor, contorno colorido verde. E eu vou configurar esse arquivo. Coloque este arquivo no topo, aqui você pode ver o resultado. Aqui você cria um contorno fora da borda, fora da área da borda E se você quiser alterar o estilo do contorno o máximo possível, se quiser usar o contorno pontilhado, pontilhe-o, então você poderá ver o resultado pontilhe-o, então você poderá Então é assim que você pode usar contorno e borda juntos. E se você quiser fornecer lacuna entre o contorno e a borda, nesse caso, precisará usar um contorno de nome de propriedade ao um contorno de nome de propriedade Deixe-me mostrar algum tipo de contorno oposto, e eu vou passar o valor de três pixels, três pixels Até configurar esse arquivo, você pode ver o resultado. Ele fornece uma pequena lacuna entre o contorno e a borda. Se eu aumentar o valor , vou passar oito pixels e definir esse arquivo, agora você pode ver o resultado. Agora, a lacuna entre o contorno e a borda é de oito pixels. Agora, deixe-me mostrar como podemos usar a abreviação para obter o mesmo Para isso, vou remover toda essa linha. E desta vez, precisamos usar apenas a probabilidade de contorno. Esboço. Nosso primeiro valor é a largura do contorno, que é de três pixels Nosso próximo valor é o estilo de contorno, e vou usar sólido, e nossa cor de contorno é verde Se eu definir esse arquivo, você poderá ver o resultado. Então é assim que podemos usar a propriedade outline shorten. E lembre-se, podemos usar a propriedade outline na tag Atmel. Então, isso é tudo para este tutorial. No próximo tutorial, falaremos sobre preenchimento. 8. Tutorial de CSS Padding: Bem vindos de volta, pessoal, mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre preenchimento CSS Por que o preenchimento é a parte mais importante do CSS? Agora, vamos falar sobre quantas propriedades temos no preenchimento CSS Temos um total de quatro propriedades relacionadas a CSS padding, padding top, padding right, padding bottom, padding let Mas antes, precisamos entender como o preenchimento funciona basicamente Como você pode ver neste exemplo, dentro desse elemento profundo, temos um parágrafo. Mas se você notar, você pode ver que temos um espaço entre esse parágrafo e a borda. Basicamente, falo sobre essa lacuna, e chamamos essa lacuna de preenchimento. De acordo com esse exemplo, a lacuna entre a borda e o parágrafo é chamada de paddy Podemos controlar o preenchimento de cada lado. Suponha que, se você quiser adicionar o mesmo preenchimento em todas as direções, nesse caso, você possa usar o mesmo valor Além disso, você pode usar uma abreviatura para isso, adicionando dez pixels. Nesse caso, você não precisa digitar quatro linhas para isso. Se eu fornecer preenchimento de dez pixels , ele atribuirá preenchimento de dez pixels a cada lado Mas e se você usar preenchimento diferente em um site diferente para preencher a parte superior, você usa dez pixels Para a direita, você usa 20 pixels. Para baixo, você usa 15 pixels e para a esquerda, você usa 25 pixels. Para isso, também, você pode usar a abreviatura. Você só precisa fornecer um total de quatro valores diferentes. Primeiro, você precisa fornecer o valor superior, depois o valor correto, depois o valor inferior e , em seguida, o valor libbed Então, sem perder tempo e para criar esse tópico, vamos estudar o estágio 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 ao vivo, e já crio um nome de documento HTML com o nome do índice de pontos TML como você pode ver dentro da nossa tag body, temos uma tag de cabeçalho Primeiro, vou criar uma Dip dentro da tag body Então, vou digitar DIV, D. E dentro dessa tag dip, vou atribuir uma tag de parágrafo, P. E para parágrafo, vou digitar Loren e quero adicionar um total E eu vou configurar esse arquivo. E agora eu quero atribuir uma classe para esse mergulho. Para atribuir uma classe, precisamos usar classe de atributo de classe, e eu vou atribuir, e o nome da nossa classe é taste, e vou definir esse arquivo. E agora eu quero estilizar esse elemento deb usando seu nome de classe Para isso, vou amarrar o Dot Taste. Aí está o fígado que diz, primeiro, vou atribuir uma borda a este parágrafo, borda. E eu quero adicionar uma borda de dois pixels. E nosso estilo boer é sólido. Com isso, eu quero a cor preta entediada. E eu vou configurar esse arquivo. Por enquanto, você pode ver neste parágrafo, temos uma pequena lacuna na parte superior e inferior. Chamamos isso de margem, não de preenchimento. E vamos aprender sobre margem e o próximo tutorial. Agora, de volta à cobertura. Então, por enquanto, vou remover essa tag de parágrafo. Não preciso dessa tag de parágrafo e defino esse arquivo novamente. Agora você pode ver que Bdfaul não forneceu nenhuma margem para esses textos Agora vamos adicionar um pouco de preenchimento, preenchimento, e eu quero preencher dez pixels em Se eu definir esse arquivo, você poderá ver o resultado. Agora, de todas as direções, ele adiciona um preenchimento de dez pixels Se eu aumentar, vou torná-lo em 30 pixels e salvá-lo novamente. Agora você pode ver o resultado. A distância entre a borda e texto agora é de 30 pixels em todas as direções. Lembre-se, preenchendo, não espalhe para fora da borda. Está espalhado dentro da fronteira. Se eu definir uma cor de fundo para esta div, deixe-me mostrar algum tipo de cor de fundo, cor fundo, y. Com isso, eu quero usar a cor da fonte Cor branca. E se eu definir esse arquivo, agora fica mais claro para você, qual é a área de preenchimento Se eu comentar esse preenchimento e definir esse arquivo novamente, agora você pode ver que essa é a área exata que nosso texto ocupou Mas se eu usar o preenchimento e definir esse arquivo, agora você pode ver que ele adiciona espaço extra fora da área de texto E agora você decide que deseja manter um preenchimento diferente em um site diferente Suponha que, no topo, você queira manter um preenchimento de 50 pixels. E, para a direita, você quer dar um hambúrguer de 30 pixels, caso contrário, um hambúrguer de dez pixels E na parte inferior, você quer dar um hambúrguer de 100 pixels. E para a esquerda, você deseja atribuir um patty de cinco pixels. Se eu definir esse arquivo, você poderá ver o resultado. Do lado superior, ele fornece preenchimento de 50 pixels. E do lado direito, ele atribuiu um preenchimento de dez pixels. Do lado inferior, atribuiu um preenchimento de 100 pixels e do lado esquerdo, atribuiu um preenchimento de cinco pixels Então é assim que os acolchoamentos funcionam. Agora, deixe-me mostrar outro método abreviado de como você pode usar o preenchimento Para isso, vou comentar esta linha e configurá-la novamente. Agora eu quero atribuir o preenchimento. Então, primeiro, vou digitar preenchimento, preenchimento e, de cima para baixo, quero atribuir preenchimento de 100 pixels E da esquerda e da direita, quero atribuir um preenchimento de dez pixels Se eu definir esse arquivo, você poderá ver o resultado. Portanto, esse é outro método abreviado. Aqui, no primeiro valor, precisamos fornecer o valor superior e inferior e, no segundo valor, precisamos fornecer o valor à esquerda e à direita. Então, isso é sobre a propriedade de preenchimento. No próximo tutorial, falaremos sobre a propriedade de margem. Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 9. Tutorial de margem de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS 3. E neste tutorial, vou falar sobre a margem CSS. É uma das propriedades mais úteis em CSS. Agora, deixe-me mostrar como funcionou. Como você pode ver neste exemplo, temos uma tag profunda e, dentro dessa tag profunda, temos um parágrafo. Em nosso tutorial anterior, aprenderemos sobre o pad. Já sabemos que o preenchimento funciona por dentro, mas a margem é oposta É um trabalho externo. Eu adiciono espaço fora da área da fronteira. Agora, a questão é por que precisamos usar margem? Suponha que você queira adicionar outra profundidade abaixo desse elemento profundo. Nesse caso, você precisa fornecer espaço entre essas duas profundezas. Deixe-me te mostrar como. Então, esse é o exemplo de outra profundidade. E entre essas duas profundezas, como você pode ver, temos um espaço, e podemos atribuir esse espaço usando margem. Essa é uma das propriedades mais úteis em CSS. Se não usarmos margem , os dois elementos se sobrepõem Agora, vamos falar sobre propriedades de margem. Quantas propriedades temos em margem? Temos que rebocar quatro propriedades margem superior, margem direita, margem inferior e margem ascendente É muito parecido com o acolchoamento. E se eu falar sobre a extremidade curta dessa propriedade, você pode usar apenas a propriedade de margem. Se você quiser adicionar a mesma margem de todas as direções, nesse caso, você pode usar a margem e, em seguida, usar o do. Então você não precisa digitar essas quatro linhas para isso. Eu reduzo seu carvão. Mas o que? Se você precisar usar um valor diferente para toda essa direção, sim, você pode. Além disso, você pode usar palavras curtas e para isso. Primeiro, você precisa fornecer valor, depois à direita, depois ao fundo e depois ao levantamento. Basicamente, ele segue no sentido horário. F para, depois para a direita, depois para baixo e depois para cima. Agora, a margem vem com outro valor, que é automático. Usamos o valor automático quando você precisa centralizar um elemento profundo em nossa página da web. Se você fizer Auto a partir do elevador e na direção certa e definir parte desse elemento profundo , automaticamente você mergulhará o elemento no centro 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, abrimos meu coordenador do Salt Studio e meu navegador usando a extensão light server, e eu já criei um documento de estimativa chamado index dot stem. E como você pode ver nesta página tamal, temos uma tag de cabeçalho e duas tags profundas E dentro dessa tag de mergulho, temos algum texto. E se você notar, você pode ver em nossa primeira tag Dip, atribuímos um nome de classe primeiro, e em nossa segunda tag Dip, atribuímos uma classe chamada Agora, usando essa classe, vou selecionar esse elemento dip. Então, dentro dessa tag de estilo, vou selecionar a primeira classe, vou digitar ponto primeiro. Então Madi caribra diz, primeiro, eu vou usar propriedade fronteiriça, fronteira E vou atribuir uma borda de dois pixels, e nosso estilo de borda é solente e nossa cor de borda é vermelha Em seguida, vou duplicar esta seção. E rasgue isso primeiro com o segundo. Além disso, vou mudar o nome da cor, que é verde. Se eu definir esse arquivo, você poderá ver o resultado. Agora, se você perceber que pode ver, não há espaço entre esses dois D. Se você quiser fornecer espaço, usar preenchimento não funcionará . Deixe-me te mostrar. Suponha que em nossa primeira tag, eu queira adicionar preenchimento inferior, preenchimento inferior, dez pixels E defina esse arquivo. Agora você pode ver que ele adiciona espaço por dentro, não por fora. Então, se você quiser adicionar espaço entre esses dois elementos, você precisa usar a propriedade de margem. Portanto, se você usar margem, margem inferior e definir esse arquivo, agora poderá vê-lo adicionar um pequeno espaço entre esses dois elementos. Basicamente, ele adiciona espaço de dez pixels e, se você fizer 100 e depois definir esse arquivo, agora poderá ver a distância. Da mesma forma, quero adicionar margem em nosso segundo debilitamento. Desta vez, vou usar a margem superior, para passar 50 pixels, e vou definir esse arquivo, margem superior a 500 pixels. Se eu definir esse arquivo, agora você pode ver que a distância entre um elemento profundo e dois profundos é um total 600, porque em nosso primeiro elemento de imersão, usamos a propriedade margin bottom e fornecemos 100 pixels E em nosso segundo elemento de queda, usamos a probabilidade máxima da margem Propriedade superior da margem, 500 pixels. Portanto, a distância entre o primeiro elemento de mergulho e o segundo elemento é de 600 pixels Por enquanto, vou remover essa propriedade de margem superior. Eu não quero isso e defino esse arquivo novamente. Agora, quero atribuir a propriedade margin lip em nosso segundo elemento de banco de dados. Então, digite Hemo margin, lip, margin lap, e eu vou atribuir 150 pixels Se eu definir esse arquivo, você pode ver nosso segundo elemento profundo se mover para o lado direito porque, no lado esquerdo, usamos uma margem de 150 pixels. E se você quiser usar uma abreviatura e atribuir margem a partir da direção para isso, basta usar a propriedade de margem E se você definir esse arquivo, agora poderá ver o resultado. De ambas as direções, ele tinha uma margem de 150 pixels. Agora, se eu criar outro elemento profundo abaixo desse segundo elemento profundo, deixe-me mostrar o DIV Dev e dentro desse elemento profundo, vou digitar um parágrafo Lowm e quero adicionar 30 palavras Se eu definir esse arquivo, agora você pode ver que a distância entre o segundo e o elemento 30 é de 150 pixels porque ela usa a propriedade de margem. Basicamente, ele adiciona margem ao nosso segundo elemento de toda a direção. E se você quiser adicionar uma margem diferente de uma direção diferente, sim, você pode. Deixe-me te mostrar como. Então, do lado superior, eu quero uma margem de 70 pixels. E do lado direito, eu quero uma margem de 50 pixels. E do lado inferior, eu quero uma margem de dez pixels. E do lado esquerdo, eu quero uma margem de 200 pixels. Se eu colocar essa pilha, agora você pode ver o resultado. Do lado superior, temos uma margem de 70 pixels. Se eu comentar essa linha e configurá-la novamente, agora está mais claro para você. Do topo, temos uma margem de 70 pixels. Da direita, temos uma margem de 50 pixels. De baixo, temos uma margem de dez pixels e, de P, temos uma margem de 200 pixels. Agora, deixe-me mostrar outra forma abreviada de como podemos usar Então, vou escrever esta linha e comentar a anterior. Desta vez, quero atribuir a margem de cima para baixo e para a direita e para o final. Então, de cima para baixo, eu quero 200 pixels. E da esquerda para a direita, eu quero 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Agora, de cima para baixo, temos 200 pixels, e da esquerda e da direita, temos 20 pixels. Agora, deixe-me mostrar outra foto, então vou duplicar esta linha e comentar a anterior Desta vez, do lado positivo, vou atribuir valor zero E da esquerda e da direita, também vou atribuir valor zero. E, de baixo para baixo, quero atribuir 100 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Da esquerda, da direita e de cima, temos valor zero, mas da parte inferior, temos 100 pixels. Então, esse é basicamente o nosso trabalho de fusão. Agora, deixe-me falar sobre outra propriedade, que é a margem automática. Deixe-me mostrar o exemplo de como podemos usar o valor automático. Então, vou comentar essa linha e, primeiro, vou atribuir wed a esse contêiner porque, por padrão, D não tem altura interna. Então, vou atribuir N V a esse contêiner com 500 pixels. Vou configurar esse arquivo. Além disso, vou aumentar o tamanho da fase e diminuir um pouco o conteúdo Agora, nosso segundo elemento D é de 500 pixels. Mas se você notar, você pode ver que esse elemento DP não está alinhado no meio Eu me alinho no lado esquerdo. Quero atribuir espaço igual à direita e ao elevador. Para isso, precisamos usar a propriedade automática de margem. Então digite a margem de cima para baixo, eu quero 50 pixels, e da esquerda e da direita, eu quero ou se eu definir esse arquivo, você pode ver o resultado. Agora, de cima para baixo, ele usou uma margem de 50 pixels e, da esquerda e da direita, ele usa Auto e o coloca no centro. Agora ele se torna bastante responsivo. Agora você também pode ver seu centro de alinhamento. Espero que agora esteja claro para você como podemos usar a propriedade de margem. No próximo tutorial, aprenderemos sobre essa propriedade, largura e altura. Obrigado por assistir a este vídeo Sy tune para o próximo tutorial. 10. Tutorial de altura e largura do CSS: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre as duas propriedades mais importantes sobre CSS, que são altura e Wi. Como você pode ver, esse é o D, e isso é chamado com propriedade. Se você quiser aumentar seu tamanho de profundidade, acordo com a posição horizontal, nesse caso, você precisa usar com propriedade. E se você quiser aumentá-la na direção vertical, nesse caso, você precisa usar a propriedade de altura. Você pode usar com a propriedade de probabilidade e altura com valor percentual, também valor de pixel. Se você quiser usar o valor fixo, precisará usar o valor do pixel. E se você quiser usar a altura ajustável, nesse caso, você precisa usar o valor percentual. Vamos aprender sobre unidades em nosso próximo tutorial. Esse método fica mais claro se começarmos o prático. 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 lp server e já crio um documento HTML chamado index dot TML Dentro da tag body, como você pode ver, temos um Deptag com o nome de ID primeiro Então, primeiro, vou selecionar esse DP usando seu nome de ID E para selecionar o D com ID, usamos HTagsInhTag ID Em seguida, defina a propriedade clRasf que vou usar, que é Com, e vou usar um peso fixo de 300 pix e vou definir esse arquivo Se eu definir esse arquivo, você não verá nada na minha página. Então eu decido que vou adicionar a cor de fundo. Cor do plano de fundo, vermelho, e defina esse arquivo. Além disso, você pode ver que não há nada nesta página porque acabamos de definir o casamento, não a altura. Então, vou decidir que vou atribuir altura a esse diabo Altura, 200 pixels. E eu vou configurar esse arquivo. Agora você pode ver o elemento profundo na minha página da web. As unidades de pixel são unidades estáticas. Se eu aumentar, caso contrário, diminuir a altura e a janela do navegador, isso não refletirá esse elemento porque todas são unidades fixas. E agora eu decido que quero atribuir 50% da largura do navegador a esse elemento. Para isso, precisamos usar a unidade dinâmica, que é o valor percentual. Então, aqui, vou remover essa unidade estática e vou substituí-la por 50%. Não se preocupe Vamos aprender sobre essa unidade em nosso próximo tutorial. Agora você pode ver que esse elemento profundo ocupa 50% do nosso navegador. Se eu clicar com o botão direito do mouse em nosso navegador , inspecionar o elemento e alterar o tamanho da janela do navegador Como você pode ver, de acordo com o tamanho da janela do navegador , a largura do elemento foi alterada porque aqui tomamos 50% da largura do navegador. Da mesma forma, se você quiser aumentar a largura desse elemento em até 80%, sim, basta alterar o valor percentual. E eu vou substituir 50 de largura 80. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Mas e se usarmos o valor estático e depois alterarmos o tamanho, deixe-me mostrar. Então, desta vez, vou usar 500 pixels. Agora, aqui usamos o valor estático. Agora não podemos alterá-lo dinamicamente. Então, se eu reduzir o tamanho do navegador, agora você pode ver que nossa largura não está mudando de acordo com o tamanho do navegador, porque aqui usamos tamanho fixo, e agora vou colocar algumas imagens fictícias desse elemento profundo Então ela vai digitar Loren, 300, o quê? Se eu definir esse arquivo, agora você pode ver, no meu navegador, nosso conteúdo de texto extraído desse elemento profundo Se você observar em nossa seção de estilo, aqui você pode ver em qualquer altura, ambos os casos, usamos valor estático, mas nosso texto se ajusta de acordo com o vento profundo. Se eu aumentar o Doi, 500 pixels e definir esse arquivo, como você pode ver, novamente, ele ajusta o texto, mas não funciona muito bem para a altura, e esse é o grande problema com a propriedade de altura Você precisa usar a propriedade de altura quando sabe que seu conteúdo não vai transbordar para esse elemento de banco E se você quiser resolver esse problema, precisará usar a propriedade de altura mínima e altura máxima. Então, isso é tudo para este tutorial. E no próximo tutorial, vou falar sobre altura mínima e altura máxima. Então, obrigado por assistir a este vídeo. 11. Tutorial de altura mínima e altura máxima de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos a propriedade da altura mínima e da altura máxima Por que precisamos usar a altura mínima e a probabilidade máxima de altura. Então, vamos estudar de forma prática. Como você pode ver, aqui eu abro meu documento de estimativa e navegador anteriores E você já sabe que, se usarmos altura fixa, nosso conteúdo será transbordado desse contêiner Para resolver esse problema, não usamos a propriedade de altura. Sem usar a propriedade de altura, gostaríamos de usar a altura máxima e a probabilidade mínima de altura. Deixe-me mostrar o exemplo. Suponha que você tenha menos conteúdo. Então, vou remover algum conteúdo desse parágrafo. Então eu vou configurar esse arquivo. Agora, nosso conteúdo está perfeitamente organizado em nosso elemento profundo e também temos algum espaço nesse contêiner. Portanto, para esse elemento profundo, nosso requisito de altura mínima é de 200 pixels. Então, vou remover a propriedade de altura e vou substituí-la pela altura mínima. Altura mínima, altura mínima de 200 pixels. Depois de definir esse arquivo, como você pode ver, não há alterações em nossa forma. Mas o que? Se eu aumentar um pouco o conteúdo, deixe-me mostrar para você. Novamente, vou adicionar mais conteúdo. Baixo 200. E então defina esse arquivo. Agora você pode ver a alma diferente. Agora, a altura aumenta de acordo com o tamanho do conteúdo. Portanto, podemos aumentar a altura o quanto quisermos, mas não podemos diminuí-la menos de 200 porque aqui usamos a propriedade de altura mínima. Dizemos altura mínima de 200 pixels. Então esse é o uso da propriedade de altura mínima. Agora vamos falar sobre a propriedade de altura máxima. Mas antes, vou remover todo o conteúdo deste parágrafo. Por enquanto, vou adicionar um pouco menos de conteúdo, Lowm 50. É isso mesmo. Agora eu decido que não quero aumentar a altura em mais de 600 pixels. Nesse caso, precisamos usar a propriedade de altura máxima. Então, aqui vou digitar altura máxima, altura máxima, 600 pixels. Vou configurar esse arquivo. Até configurar esse arquivo, como você pode ver, não há alterações. Basicamente, quero dizer que não quero aumentar a altura em mais de 600 pixels. Agora vou aumentar o tamanho do conteúdo. Então, aqui vou digitar wim 200. Configure este arquivo. Como você pode ver, a altura profunda do nosso contêiner ainda não chega a 600 pixels, então vou adicionar mais conteúdo. Mais baixo. Aqui eu vou adicionar outro parágrafo de 300 palavras. Se eu definir esse arquivo, agora você poderá ver o resultado. Devido à propriedade de altura máxima, nosso contêiner não pode atingir mais de 600 pixels. É por isso que desta vez nosso parágrafo saiu desse contêiner Portanto, esse é o uso da propriedade de altura mínima e altura máxima. Espero que agora o tópico esteja claro 42. Obrigado por assistir a este vídeo. Fique ligado nos próximos dois, muito escuro. 12. Tutorial de largura mínima de CSS e largura máxima: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, você aprenderá duas novas propriedades CSS, largura mínima e largura máxima. Então, sem perder seu tempo, vamos estudar de forma 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 lip server, e já crio um documento HTML chamado index dot HTML. Dentro da tag body, temos uma tag de cabeçalho e uma tag profunda, e primeiro definimos um ID para esse elemento div Agora, vamos usar esse ID para estilizar esse elemento DV Então, aqui dentro da tag de estilo, vou selecionar o ID. Hashtag primeiro Depois, dentro do Cirass. Então, primeiro, vou atribuir uma borda a esse contêiner profundo. Então, vou usar a propriedade da fronteira. Borda, e eu quero uma borda de três pixels, e eu quero uma borda sólida. Com isso, quero uma borda vermelha, y. Altere esse arquivo. Opa, não está funcionando. Acho que cometi alguns erros. Sim. A primeira grafia do nosso nome de identificação está errada. Primeiro, e salve-o novamente. Perturbe esse arquivo, você pode ver o resultado. Agora vou atribuir um peso fixo a esse elemento DV Então, vou usar com o ppty We 300 pixels e vou salvá-lo novamente. Agora, deixe-me mostrar o problema. Como você pode ver no meu diretório de trabalho atual, há um nome de imagem Amita dot JPG Então, dentro desse elemento profundo, vou usar a tag de imagem IMG Com isso, precisamos fornecer a fonte da imagem em nosso atributo source. E o nome da nossa imagem é Amita Amita dot JH. Se eu definir esse arquivo, aqui você pode ver o resultado. Esse é o problema. Aqui você pode ver largura da nossa imagem é muito maior que a do Deid Como você pode ver, nosso With profundo é de 300 pixels, mas nossa imagem é muito maior. É por isso que a imagem saiu desse contêiner. E então eu vou usar a tag de imagem. IMG, e dentro da tag da imagem, vou definir a largura com 100% E eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele é fixado nesse contêiner. Mas neste tutorial, aprenderemos sobre a largura mínima e a largura máxima. Desta vez, vou usar a propriedade de largura mínima. A largura mínima e a largura máxima funcionam juntas. Deixe-me te mostrar como. Então, aqui, eu vou definir a largura mínima. Largura mínima, vou definir 300 pixels. Então eu vou usar a largura máxima, largura máxima, a largura máxima, eu vou usar 500 pixels. E eu quero configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, agora nosso elemento profundo se torna uma roda de 500 pixels. Se eu inspecionar esse elemento, deixe-me mostrar e abrir meus cartões nesta imagem, como você pode ver, largura da imagem é 500 pixels e a altura é 357 pixels , porque aqui definimos a largura máxima de 500 Portanto, não podemos expandir essa largura profunda do elemento em mais de 500 pixels. E se eu tentar reduzir a largura do elemento profundo, não podemos reduzi-la abaixo dos 300 pixels porque o Hear definiu a largura mínima de 300 pixels. É bastante semelhante à altura mínima e à altura máxima. Basicamente, com essa propriedade, podemos definir o limite superior e o limite inferior. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre a paridade de dimensionamento de caixas CSS Então, obrigado por assistir a este vídeo. 13. Tutorial de dimensionamento de caixas CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre o tamanho das caixas Antes de falar sobre por que usamos o dimensionamento de caixas, deixe-me mostrar um problema Aqui você pode ver um elemento profundo, e definimos com 200 pixels. Mas essa profundidade vem com uma borda de dez pixels. Depois de usar a borda, aumentou a profundidade da erva daninha. Se usarmos dez pixels corpóreos à esquerda e à direita , o total será 220 pixels Além disso, se adicionarmos preenchimento à esquerda e à direita, suponha que à esquerda, usaremos preenchimento de dez pixels Também à direita, usamos preenchimento de dez pixels. Agora, a largura total se torna 240 pixels, mas a largura real é 200 pixels. Como usamos preenchimento de dez pixels de cada direção, também usamos uma borda de dez pixels É por isso que a largura total se torna 240 pixels. Para resolver esse problema, tamanho da caixa vai nos ajudar. Se usarmos o tamanho da caixa , a largura do nosso elemento profundo será sempre 200 Isso não vai aumentar a asa do elemento profundo. Em última análise, para resolver esse problema, dimensionamento de caixas introduz o CSS Depois de usar o tamanho da caixa, o tamanho total seria de 200 pixels E para aplicar esse tamanho de caixa, precisamos usar a propriedade de tamanho da caixa, o tamanho e o valor é a caixa Basicamente, a propriedade de dimensionamento da caixa veio com dois valores, borda e caixa de conteúdo Se usarmos a caixa de borda, não poderemos aumentar a largura, o que quer que usemos. Se usarmos a borda da margem de preenchimento, ela também não aumentará a largura, mas se usarmos a caixa de conteúdo , ela funcionará como está Nesse caso, pode aumentar o Oi. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la 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 nome de documento Tim, índice, ponto de índice, HTML. E dentro desse documento de estimativa, temos uma etiqueta profunda. E dentro dessa tag profunda, temos um texto fictício Primeiro, vou atribuir um ID a esse elemento profundo. ID do desenvolvedor, ID igual à caixa. Então, dentro dessa tag de bloco, vou selecionar esse elemento profundo usando seu nome de ID. Tem etiqueta, caixa. Então você define os cálices, nossa primeira propriedade é nós W, e eu vou dizer 500 pixels Eu quero definir esse arquivo e, seguida, vou adicionar borda para desvalorizar Então, vou usar a propriedade da fronteira. Pixel BDert. E eu quero pó sólido. Com isso, a cor da borda é vermelha. Vou configurar esse arquivo. E agora vou usar o preenchimento. Depois de usar o preenchimento, ele aumenta nossa largura. Deixe-me te mostrar. Acolchoando de cada direção, eu quero dez pixels E defina esse arquivo. Depois de definir esse arquivo, você percebe que ele aumenta a largura do elemento. Se eu inspecionar esse elemento e como minhas cartas estão nesse elemento profundo, agora você pode ver nossa largura profunda se tornar 524 pixels porque 500 é a largura real dessa E então temos uma borda de dois pixels de cada lado, então ela se torna 504 Com isso, também temos um preenchimento de dez pixels à esquerda e à direita É por isso que se torna 524. Portanto, esse é um dos grandes problemas. Se usarmos a margem de preenchimento da borda, ela aumentará a largura da profundidade Mas depois de usar a propriedade de dimensionamento da caixa, isso não aumentará a largura do elemento profundo tamanho da caixa permanece na largura profunda, o que atribuímos. Deixe-me te mostrar. Então, aqui, vou digitar o tamanho da caixa, o tamanho da caixa e vou usar a caixa de borda. Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele reduziu o peso do elemento profundo. Agora, se eu usar preenchimento, 50 pixels, e também usar borda, cinco pixels e definir esse arquivo E se eu inspecionar esse elemento e passar por cima do meu carro, agora você pode ver que ele ainda está escrito como erva daninha de 500 pixels porque usamos o tamanho da caixa Pubert. Depois de usar preenchimento e borda, isso não aumenta Mas se você usar um valor diferente para isso, se usarmos o tamanho da caixa, a caixa de conteúdo e, em seguida, definirmos esse arquivo Agora você pode ver que se eu abrir meu azar neste elemento, nossa largura se torna 610 pixels porque A não usamos a propriedade de tamanho de caixa Basicamente, a propriedade de dimensionamento da caixa reduz o tamanho do conteúdo que está dentro dessa É por isso que manteve o real. Portanto, a caixa de conteúdo é o valor padrão dessa propriedade. Então, precisamos usar a caixa de borda. E depois de definir esse arquivo, você pode ver o resultado. Novamente, ele se torna 500 pixels. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre a propriedade CSS overflow Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 14. Tutorial de CSS Overflow: Ei, pessoal, é bom ver vocês de volta. O que vai voltar com um novo tutorial relacionado a CSS? E neste tutorial, aprenderemos sobre a propriedade CSS overflow Como você pode ver neste exemplo, temos um elemento profundo, e nosso texto transborda desse elemento profundo, e esse é o problema Esse tipo de problema aparece quando usamos altura fixa para esse elemento profundo. Suponha que usemos 200 pixels de altura para esse elemento profundo e, sempre que tentarmos inserir dados de mais de 200 pixels, nesse caso, haja um bom transbordamento desse contêiner E para lidar com essa situação, CSS introduz a propriedade de estouro e vem com quatro valores diferentes O primeiro valor que podemos usar está oculto. Podemos ocultar dados de estouro usando esse valor. O próximo valor é scroll. Podemos usar a barra de rolagem dentro desse elemento profundo para rolar os dados de estouro Podemos ler os dados depois de rolar. Pode ser na horizontal, caso contrário na vertical. Nosso próximo valor é automático, e há uma pequena diferença entre rolagem e automático. A diferença entre rolagem e automático é que, se usarmos o valor de rolagem, você poderá ver essa barra de rolagem nesse elemento profundo Se não houver dados de estouro. Mas se usarmos autovalu, ele mostrará a rolagem ou quando nossos dados Os dados IB são transbordados verticalmente, então o valor automático fornece palavra de rolagem vertical e os dados IP transbordam horizontalmente e, em seguida, o valor automático E o último valor é visível. É o valor padrão. Ele mostrará os dados de estouro como estão, e temos que dizer três tipos de propriedades de estouro O primeiro é o estouro, o segundo é o estouro X e o terceiro é o estouro Y. Nosso primeiro estouro de propriedades funciona em todas as direções Funciona na vertical e na horizontal em ambos. Nossa próxima propriedade é overflow X. Se você quiser controlar os dados de estouro na posição horizontal, precisará usar overflow X. E, particularmente, se quiser controlar os dados de estouro vertical, nesse caso, você precisa usar a propriedade overflow nesse caso, você Então, sem falar muito, vamos começar a prática e ver como funciona. Então, finalmente, estamos no codificador do meu estúdio de vistos e, como de costume, aqui eu crio um documento de estimativa chamado index dot DM E nesta página de estimativa, temos uma tag profunda com a caixa de nome de ID. E dentro desse elemento profundo, temos um parágrafo. E agora vou selecionar esse elemento profundo usando seu nome de ID. Então, dentro da tag de estilo, vou usar a tag has, e o nome do ID é box. Então dentro do Cali diz, primeiro, eu vou usar com Cupertin com 250 pixels, altura 250 pixels Então, a grade usa a mesma altura. E se você notar, você pode ver Harrow usar altura fixa, e com isso, eu quero atribuir uma borda Borda, dois pixels e eu quero uma borda sólida com isso, nossa cor de borda é vermelha. E eu vou satisfazer. Depois de satisfazer, você pode ver o resultado. Agora você pode ver nosso conteúdo extraído desse diabo E para resolver esse problema, o CSS introduz a propriedade overflow Então, primeiro, vou digitar o nome da propriedade overflow. E o primeiro valor que vou usar, que está oculto. Se eu salvar esse arquivo, agora você não poderá ver os dados de estouro fora do contêiner Basicamente, ele esconde todo o conteúdo excedente, mas eu não quero esconder esses dados Eu quero ler esses dados dentro desse elemento profundo. Para isso, temos outro valor, que é scroll. Se eu definir esse arquivo, agora você pode ver dentro desse elemento dip, temos uma barra de rolagem Aqui temos a barra de rolagem horizontal. Também temos barra de rolagem vertical. Agora você pode ler todo o parágrafo dentro desse elemento de imersão Você pode rolar para cima e rolar para baixo no parágrafo. Se você perceber, pode ver que apenas a barra de rolagem vertical está ativa, não horizontalmente, porque nosso Se inserirmos uma imagem nesse elemento profundo , nossa barra de rolagem horizontal também E agora vou reduzir o tamanho do parágrafo. Então, vou remover alguns dados. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, agora você pode ver nosso conteúdo não vai transbordar desse contêiner, mas ainda temos a barra de rolagem horizontal e vertical Para resolver esse problema, temos outro valor, que é Auto. Portanto, para remover o valor de rolagem e substituir por automático. Se eu definir esse arquivo, você poderá ver o resultado. Agora não temos barra de rolagem neste elemento deb. Mas se eu adicionar mais palavras a este parágrafo, deixe-me mostrar uma palavra baixa de M 150 e, em seguida, definir esse arquivo novamente. Agora você pode ver que nossa barra de rolagem está emparelhada novamente. Desta vez, você pode ver somente a barra de rolagem vertical, não a barra de rolagem horizontal Então, se usarmos o AutoPpert, podemos ver essa barra de rolagem se nossos dados Caso contrário, não mostrará a barra de rolagem. Portanto, na maioria dos casos, usamos o valor automático de estouro. Agora, vamos falar sobre a propriedade perdida, que é visível. Então, vou remover auto e digitar visible. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, é o valor padrão e mostrará os dados de estouro como estão Agora vamos falar sobre outras propriedades de transbordamento. Então, aqui vou usar o overflow. Y? E aqui vou usar o valor oculto. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo ocultar dados de transbordamento vertical. Mas se eu passar o valor de rolagem, rolagem estourará Y, role e defina esse arquivo Agora você pode ver a barra de rolagem vertical. Se você se lembra, ao usar apenas a propriedade overflow , nosso valor de rolagem fornece a barra de rolagem na direção, vertical e horizontal Mas se usarmos particularmente o overflow Y e, em seguida, usarmos o valor de rolagem , nesse caso, ele mostrará apenas a barra de rolagem vertical E se eu usar os dados e definir esse arquivo novamente, ainda assim, você pode ver a barra de rolagem vertical Para resolver esse problema, se você quiser mostrar a barra de rolagem sempre que tivermos dados estourados, nesse caso, precisamos usar a propriedade Auto Até configurar esse arquivo, você pode ver que não há barra de rolagem Mas se eu aumentar os dados, sorrir para M 150 palavras e definir esse arquivo novamente, agora você pode ver a barra de rolagem Agora vamos falar sobre outra propriedade que é overflow X. Então, vou remover y e digitar X. Após a etapa deste arquivo, como você pode ver, não há barra de rolagem horizontal nesse elemento profundo, pois nesse elemento profundo, seu uso usa dados Não temos dados que possam transbordar na direção XX. E agora eu decido que vou criar um elemento profundo dentro desse elemento de imersão em caixa Então HemoTypeTV e aqui vou usar o método de estilo interno Então, vou usar estilo de atributo de estilo. A primeira propriedade é a altura. Para altura, vou usar 100 pixels. Para o Wi, vou usar 400 pixels. E para cor de fundo, cor de fundo, vou usar vermelho. Se eu definir esse arquivo, você poderá ver o resultado. Agora temos o scullr horizontal neste elemento de imersão porque agora temos o conteúdo que transborda na direção que transborda Então é assim que podemos usar essa importante propriedade CSS, overflow Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 15. Tutorial de CSS Border Radius: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre a propriedade CSS border radius Já aprendemos sobre isso em nossos tutoriais anteriores. Mas neste tutorial, vamos aprender sobre isso em detalhes. Então, como você pode ver, temos um elemento profundo, e dentro desse elemento profundo, temos algum conteúdo. Por padrão, esse elemento profundo vem com cantos afiados. Mas neste exemplo, você pode ver a curva no canto e podemos controlar a curva usando a propriedade do raio da borda raio da borda vem com um total de quatro propriedades lábio superior da borda, raio superior direito da borda, raio inferior direito da borda, raio borda E se você quiser fazer a mesma coisa em uma única linha para isso, temos uma abreviação, e a abreviatura é a propriedade do raio da borda Aqui você pode usar todos os quatro valores de uma só vez. Neste exemplo, temos um total de quatro cantos diferentes. Primeiro, segundo, terceiro e quarto. E se você quiser usar essa propriedade abreviada, precisará digitar algo assim Para nossa primeira curva, usamos o raio de borda de 20 Bixel. Para o segundo, usamos o raio da borda de 30 pixels e, para o terceiro, usamos o raio da borda de 50 Bixel E para a última curva, usamos um raio de boerraio de dez pixels. Isso é só um exemplo. Vamos começar a prática e ver como podemos usá-la. 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á crio um documento ETML chamado index dot TML E nesta página da tabela, temos uma tag profunda com a caixa de nome de ID. Inicialmente, vou estilizar esse elemento profundo usando seu nome de ID. Então, aqui vou digitar tag de estilo, estilo, e dentro dessa tag de estilo, vou selecionar o elemento caixa, tem caixa de tag. Em seguida, dentro do CalibrSSO, as primeiras propriedades são com, e eu vou dizer 300 pixels Nosso segundo nome de propriedade é preenchimento, e eu quero fornecer preenchimento de 25 pixels Além disso, vou dizer a fronteira. Borda, e eu quero uma borda pupilar, e nossa borda é sólida Com isso, eu quero uma borda de cor preta. Preto. E eu quero configurar esse arquivo. Depois de definir esse arquivo, você verá o resultado. E se você notar, você pode ver todos os cantos são muito nítidos, mas eu não quero cantos afiados para a borda. Então, primeiro, eu quero atribuir o raio da borda ao canto superior do lábio Para isso, precisamos usar a borda do raio superior esquerdo. Limite o raio superior esquerdo, vou usar dez pixels e vou definir esse arquivo Depois de configurar esse arquivo, se eu dividir um pouco esta página, você poderá ver o resultado. Da mesma forma, quero alterar o raio do canto superior direito Para isso, precisamos usar a borda superior, direita, raio 50 pixels. Eu quero configurar esse arquivo. Até configurar esse arquivo, você pode ver o resultado. E a seguir, vou alterar o raio do canto inferior direito. Para isso, precisamos usar a probabilidade do raio inferior direito da borda, a soma do tipo, a borda inferior, a direita, a propriedade do raio E eu vou ultrapassar 50 pixels. Eu quero configurar esse arquivo. Ao configurar esse arquivo, você pode ver o resultado. E nosso último nome de propriedade é Border Bottom Lip Radius. Então, para duplicar esta seção, vou substituí-la diretamente por ela E hemo, para dizer dez pixels. Se eu salvar esse arquivo, você poderá ver o resultado. Então, de canto a canto, você pode alterar o raio usando essas propriedades. Mas o que? Se você quiser um raio igual em todos os cantos para isso, você pode usar a abreviação Então, vou comentar essa linha e esse herói para usar outro nome de propriedade, raio de borda, raio borda, 30 pixels Agora, ele fornecerá um raio de 30 pixels em cada canto Se eu definir esse arquivo, você poderá ver o resultado. E se você quiser atribuir raio diferente para um canto diferente, sim, você pode Suponha que, para o canto superior esquerdo, eu queira usar 30 pixels e, para o canto superior direito, eu queira usar 50 pixels, passe de som de 50 pixels. E para o canto inferior direito, eu quero usar dez pixels. E para o canto inferior do lábio, eu quero usar 20 pixels. Se eu definir essa bile, você poderá ver o resultado. Agora, não precisamos digitar essas quatro linhas para isso. Além disso, temos outra abreviatura. Deixe-me te mostrar como. Vou pegar esta linha e comentar a anterior. Aqui eu vou passar dez pixels, 50 pixels. Agora você pode ter uma almofada. O que isso significa? Aqui , passamos o valor total de dois. O primeiro raio do botter será aplicado, superior do lábio e no canto inferior direito E o segundo aplicará o canto inferior do lábio e o canto superior direito. Se eu definir esse arquivo, você poderá ver o resultado. É na direção oposta. Além disso, podemos usar valor percentual com o raio da borda Deixe-me mostrar como alguns duplicam essa linha e comentam a anterior E desta vez, vou usar 20% do raio de borda. Se eu definir esse arquivo, você poderá ver o resultado. E se você quiser obter a forma excessiva de qualquer retângulo, para isso, você precisa usar 50% do raio da borda Se eu definir esse arquivo, você poderá ver o resultado. Podemos obter uma forma oval perfeita usando esse valor. E se você quiser fazer um círculo usando o raio da borda para isso, você precisa usar um tenóide de altura igual, então se eu usar altura, 300 pixels e depois definir esse arquivo, e nosso raio de borda for 50%, ele criará Portanto, este é o tutorial detalhado sobre a propriedade do raio de borda Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 16. Tutorial de CSS Box Shadow: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender sobre CSS, box shadow. Então, vamos ver o que é sombra de caixa e como podemos usar sombra de caixa. Aqui você pode ver um elemento profundo e, dentro desse elemento profundo, temos algum texto. E se você perceber que pode ver, não há sombra nesse elemento profundo. E se adicionarmos sombra a esse elemento profundo , ficará assim. Aqui você pode ver, depois de usar a sombra da caixa, aqui você pode ver uma sombra na parte inferior e direita, e podemos criar essa sombra usando a propriedade da sombra da caixa. Agora, vamos ver como podemos usar a propriedade box shadow. Para usar a propriedade box shadow, total precisaria usar cinco valores. Cada valor tem um propósito diferente. O primeiro valor significa horizontal oposta. Usando esse valor, você pode definir esquerda e direita. Basicamente, funciona na direção de Xxx. Nosso próximo valor significa V oposto, ou seja, verticalmente oposto Você pode compará-lo com a direção de YxS. Usando esse valor, você pode controlar o lado superior e inferior. Nosso próximo valor é desfoque. Você pode controlar o desfoque da sombra usando esse valor. Se você não quiser usar sombra fechada, poderá usar esse valor. E o quarto valor significa spread. Em quanta área você deseja espalhar sua sombra? Você pode controlar com esse valor, e o quinto e último valor é colorido. Usando esse Vu, você pode controlar a cor da sombra. 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 light server, e já crio um nome de documento estim index dot TM E como você pode ver, dentro desse código de estimativa, temos uma tag profunda com a caixa de nome de ID, e agora vou estilizar esse elemento Então, vou selecionar essa profundidade usando seu nome de ID. Então, vou usar alguém para usar como tag boobs. Então, dentro da resina colorida, primeiro, vou usar com propriedade Com 300 pixels. Nossa próxima propriedade é altura, altura, 200 pixels. Com isso, quero adicionar alguma margem. Margem, esquerda, 200 pixels. Se eu definir esse arquivo, você não verá nada aqui porque não usamos nenhuma cor de fundo. Então, vou adicionar uma cor de fundo, vermelho. Se eu definir esse arquivo, você poderá ver o resultado. E agora eu quero adicionar sombra de caixa a esse elemento profundo. Para isso, precisamos usar a propriedade box shadow, box shadow, box shadow, primeiro, precisamos usar XS Valu Então, vou passar dois pixels e, em seguida, precisamos passar o valor Y XS. Além disso, vou usar dois pixels. Para sombras horizontais e verticais, usamos dois pixels. E lembre-se, também, que você pode usar valores negativos para mover a sombra E então eu quero usar o valor de desfoque. Para desfoque, vou usar cinco pixels. E, por enquanto, não quero usar o valor do spread. Então, diretamente, eu quero pular para o valor da cor. Para cores, vou usar a cor preta. Se eu definir esse arquivo, aqui você pode ver o resultado V. Basicamente, depois de usar a sombra, parecia um objeto de três D. E agora eu quero mover a sombra na direção XXS, então vou aumentar o valor XXS. Então, aqui eu vou passar oito, oito pixels. Depois de definir esse arquivo, aqui você pode ver o resultado. E da mesma forma, se você quiser movê-lo para baixo, precisará aumentar XS V, mas eu decido que quero movê-lo para cima Então, como eu disse, podemos usar o valor negativo aqui. Então, vou usar menos oito pixels. Vou configurar esse arquivo. Para configurar esse arquivo, agora você pode ver, movemos nossa sombra para cima Então é assim que podemos posicionar nossa sombra em qualquer direção. Se eu usar o valor negativo de quatro, agora você pode ver que mudamos com sucesso a direção da sombra E uma coisa mais importante que você precisa lembrar: o valor do desfoque, o valor da cor e o valor da dispersão são opcionais Se você não fornecer, também funcionará. Deixe-me te mostrar. Se eu remover o valor e salvar o arquivo, você poderá ver o resultado. Mas se você notar, você pode ver desta vez que temos uma sombra sólida porque removemos o valor do desfoque Portanto, sem desfoque, nossa sombra não parece tão bonita. Então, vou adicionar um pouco de desfoque. Três, pixel. E eu quero enviar esse arquivo. E se você quiser deixar essa sombra nítida novamente, basta passar zero pixel. É isso mesmo. Agora, vamos falar sobre o valor do spread e eu quero distribuí-lo em até dez pixels. Então, aqui, depois da propriedade do sangue, depois do valor , vou amarrar dez pixels e vou configurar esse arquivo novamente. Depois de definir esse arquivo, como você pode ver, agora nossa sombra se espalha em até dez pixels. E se eu adicionar um pouco de desfoque, algo desfoque de dez pixels e defino esse arquivo Agora você pode ver o resultado. Espalhe Vallow, espalhe a sombra em todas as direções. E se você quiser mudar a cor, sim, você pode. Suponha que você queira usar a cor azul. Sei que parece muito nojento, mas, por exemplo, vou usá-lo. E eu quero subtrair esse arquivo Então é assim que as sombras funcionam. Agora, você deseja adicionar outra sombra de caixa a esse elemento. Sim, você pode. Você só precisa usar coma e fornecer os mesmos valores. Desta vez, quero uma sombra de caixa de oito pixels na dicção. Além disso, para a dicção YX, vou usar cinco pixels E para sangue, novamente, vou usar dez pixels. E para o valor do spread, vou usar cinco pixels. Não, não vou usar o valor do spread para este exemplo. Então, diretamente, eu vou usar a cor, e para a cor, eu vou usar a cor preta. E eu vou configurar esse arquivo. Para configurar esse arquivo, aqui você pode ver que temos outra sombra. Aqui, adicionamos outra sombra de cor preta. Se eu aumentar o valor, algo de 15 pixels, 15 pixels e definir esse arquivo novamente, agora você poderá ver a sombra com muita clareza. Então, é assim que podemos usar várias sombras em múltiplas ducções. Aqui você pode usar várias sombras o quanto quiser. Então é assim que você pode usar a propriedade shadow. Por enquanto, vou remover dessa forma também. Basicamente, vou comentar essa linha. Agora vamos falar sobre outro valor, que é inserido. Aqui você pode ver essa sombra fora da caixa, mas agora eu quero usar a sombra dentro da caixa. Então, como isso é possível? Sim, é possível se usarmos o Vd inserido. Então, depois da propriedade de cor, vou digitar inset Se eu definir esse arquivo, você poderá ver o resultado. Agora, você pode ver essa sombra por dentro. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre a propriedade do flutuador Então, obrigado por assistir a este vídeo. Fique ligado. 17. Tutorial de CSS Float: Ele é bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre a propriedade CSS float É a propriedade mais útil em CSS. Basicamente, sem essa propriedade, não podemos imaginar um site. Então, vamos entender o valor flutuante com imagens. Aqui você pode ver um elemento profundo. E se eu criar outro elemento profundo, algo parecido, ele o colocará abaixo desse elemento de imersão anterior Mas se você notar, pode ver no lado direito que temos muito espaço em branco, mas, por padrão, ele colocará o D abaixo do elemento de anterior. Então, precisamos mover esse elemento profundo, esse lado. Eu quero colocar o novo de lament, no lado direito do elemento anterior. Basicamente, o primeiro elemento de mergulho ocupa todo o vento do navegador É por isso que não temos nenhum lugar para nosso segundo elemento de imersão colocá-lo ao lado desse elemento profundo Para resolver esse problema, o CSS introduz a propriedade float Usando a propriedade float, podemos ajustar esse segundo elemento dip no lado direito desse elemento profundo anterior, e nossa propriedade float vem com total de dois valores, esquerdo Para azul profundo, precisamos usar float leaf e para red deep, precisamos usar float right Além disso, temos um valor padrão para float, que é none 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 Live. E eu já crio um documento EstiML chamado index dot TML E, como você pode ver nesta página de estimativa, temos um total de dois elementos profundos, um e dois. E eu já estilizo esse elemento profundo. Nosso primeiro elemento profundo com 300 pixels e nosso segundo elemento profundo com 200 pixels. Mas depois de criar esse elemento profundo, como você pode ver, temos muito espaço no lado direito, mas, por padrão, o CSS é nosso segundo elemento de imersão abaixo do elemento db one Por padrão, nossos elementos profundos ocupam toda a largura desta página e agora precisamos remover o espaço não utilizado usando a propriedade float Então, em nosso primeiro elemento dip, vou usar a propriedade float, float Após a etapa deste arquivo, como você pode ver, agora você pode ver nosso segundo elemento profundo segundo plano debo one element Mas se eu usar o valor flutuante em nossa primeira parte direita, se eu definir esse arquivo, como você pode ver, nosso primeiro elemento se moverá para o lado direito e nosso segundo elemento profundo ocupará o espaço em branco Mas eu não quero essa estrutura. Quero colocar nosso primeiro elemento profundo na primeira posição, depois quero mover nosso segundo elemento profundo para o lado direito. Então, aqui eu quero usar float, P, e para o segundo elemento profundo, vou usar float right Se eu definir esse arquivo, agora você pode ver a resina, e se eu aumentar a largura do navegador, ainda assim, você pode ver que ele coloca nossos elementos à direita Agora temos outro problema. Se você notar, você pode ver que temos um grande espaço entre esses dois elementos profundos. Eu não quero nenhum espaço. Eu quero mover o segundo elemento profundo eb sentar ao lado do elemento Deb one Para isso, precisamos usar o valor flutuante t. em nosso segundo elemento profundo Se eu definir esse arquivo, você poderá ver o resultado. Agora, não temos espaço entre esses dois elementos profundos. Além disso, eles ficam um com o outro. E agora eu vou te dar outro exemplo. Então, vou criar outro elemento profundo e, desta vez, seu ID é três. Além disso, vou escrever o texto três. E eu vou duplicar esta seção, e vou substituir nosso ID dois por três E eu vou fazer com que a cor de fundo floresça. Por enquanto, vou remover a propriedade flutuante. Eu não preciso disso. E eu vou configurá-lo com 500 pixels, e vou definir esse arquivo. Depois de definir esse arquivo, como você pode ver, por padrão, ele o coloca atrás do elemento DB one e deep two porque esse é o terceiro elemento dB. E se eu usar a propriedade float, float, right, e este arquivo, agora você pode vê-lo posicioná-lo abaixo e depois na profundidade dois, porque não temos espaço no lado direito para colocar esse elemento profundo porque ele tem 500 pixels Mas se aumentarmos a largura do navegador, o que aconteceu? Depois de aumentar a largura do navegador, agora você pode ver, agora ele coloca nosso elemento profundo, lado direito desses dois elementos profundos porque agora temos espaço suficiente para colocá-lo aqui. Mas e se você quiser colocá-lo abaixo de um e dois elementos profundos, deixe-me mostrar como usar a propriedade float lip, float led Se você usar float lap, definir esse arquivo e reduzir a largura do navegador, agora você pode ver que agora ele está perfeitamente posicionado na lateral do navegador, porque não temos espaço suficiente para mergulhar Basicamente, usando propriedades alimentares, colocamos o Dep Elements do lado direito e do lado da borda, o que torna nosso site bastante responsivo Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre propriedades de nível. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 18. Tutorial CSS Clear: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com uma nova tese relacionada ao tutorial. E neste tutorial, aprenderemos sobre a propriedade clear. Agora, vamos ver quantos valores temos em uma propriedade clara. Temos que dizer três propriedades claras, esquerda, direita e ambas. Agora, vamos tentar entender por que precisamos usar essa propriedade. Como você pode ver neste exemplo, temos que mergulhar o elemento lado a lado e temos algum texto abaixo dos dois elementos de imersão E para esses dois elementos de imersão, usamos a propriedade de altura mínima E para o elemento de rodapé, não usamos nenhum valor flutuante Mas para esses dois elementos profundos, usamos o valor flutuante para a direita e para a esquerda Mas o problema é que, suponha que tenhamos muito conteúdo em nosso elemento Dp one Nesse caso, esse elemento profundo transbordará do elemento profundo Puta, e esse é o grande problema se usarmos o valor flutuante Mas, para resolver esse problema, o CSS introduz uma propriedade clara. Para resolver essa propriedade, precisamos usar a propriedade tear para nosso último elemento dip, e aqui precisamos usar car P. Mas você pode ter dúvidas Por que precisamos usar o valor de elevação? Porque temos dados de sobrecarga em nosso elemento de imersão de laboratório. Se tivermos dados de estouro em nosso elemento profundo direito, nesse caso, precisamos usar o correto Mas o que? Se tivermos dados dinâmicos e não soubermos qual elemento profundo vai transbordar Nesse caso, usamos os dois rasgos. Se usarmos os dois valores , teremos que limpá-los dos dois lados. Então, sem perder seu tempo, vamos estudar a prática e ver como podemos usá-la Como você pode ver, lado a lado, abro meu editor de código do Visu Studio e meu navegador usando a extensão p server, e já crio um nome de documento HTML index dot TML E aqui você pode ver nesta página de estimativa que temos um total de três elementos profundos, e dizemos três IDs para isso, um, dois e três Se você notar, você pode ver em nosso primeiro elemento profundo um, e em nosso segundo elemento de profundidade dois, usamos para probidade, esquerda e direita É por isso que o primeiro elemento de imersão é colocado no lado esquerdo e o segundo elemento de imersão é colocado no lado direito Mas e quanto ao terceiro elemento de imersão? Aqui não usamos nenhuma propriedade flutuante. É por isso que nosso terceiro elemento dip fica atrás de um e dois elementos dip, e eu não quero usar a propriedade float para o terceiro Então, vou usar a propriedade clear para isso. Então, para digitar, limpe os dois. Se eu definir esse arquivo, agora você poderá ver o resultado. Por enquanto, vou usar 100% com 100%. Vou configurar esse arquivo. Depois de usar 100% de largura, ainda funciona como está. Agora, novamente, vou comentar este slide e vou aumentar a profundidade até a altura. Vou digitar 400 pixels. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, agora você pode ver, agora estamos enfrentando o mesmo problema. Mas desta vez, não vou usar a propriedade clear both. Desta vez, vou usar o clear right porque a altura do recipiente profundo do lado direito é muito maior do que a do lado esquerdo. Então, se eu definir esse arquivo, agora você pode ver o resultado. Agora ele funciona perfeitamente novamente. Mas o que? Se eu aumentar a altura de um elemento de profundidade. Então, aqui eu vou passar 600 pixels. Se eu fizer com 600 pixels de altura e depois definir esse arquivo, agora você poderá ver o problema. Nosso contêiner profundo, um transbordamento e três contêineres de altura Para resolver esse problema, precisamos usar a propriedade lap porque colocamos nosso contêiner profundo em um lado. Então, se eu passar o Lap Tear Vulate e definir esse arquivo, você pode ver, novamente, que resolvemos nosso problema Mas se usarmos as duas propriedades, rasgarmos ambas e definirmos esse arquivo, agora você pode ver que não há alterações. Agora ele se ajusta de acordo com o elemento de transbordamento. Se nosso segundo elemento div estiver transbordando, ele o colocará de acordo com os dois elementos profundos Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 19. Tutorial de fonte CSS: Olá, pessoal. É bom ver você de volta. 1 segundo. Estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre fontes CSS. Então, vamos ver que tipo de propriedade de formulário vamos aprender neste tutorial. Então, todas essas são propriedades de fonte que aprenderemos neste tutorial. Nossa primeira propriedade é o tamanho da fonte. Usando essa propriedade, podemos definir o tamanho da fonte. Nossa próxima propriedade é a família de fontes. Usando essa propriedade, podemos definir qual fonte vamos usar. Então, temos o peso da fonte. Podemos controlar a ousadia da fonte usando essa propriedade. Também temos outra propriedade chamada estilo de fonte. Usando a propriedade de estilo de fonte, podemos deixar nossa fonte em itálico Depois, temos a variante da fonte e a altura da linha, e aprenderemos sobre isso em nosso tutorial. Nossa propriedade de tamanho de fonte vem com algum valor predefinido extra pequeno, extra pequeno, pequeno, menor, médio grande, extra grande, extra grande, etc Agora, vamos falar sobre a probidade do tamanho da fonte. Na probidade do tamanho da fonte, podemos fornecer valor em unidades diferentes Podemos usar unidade de pixel, unidade percentual, unidade EM, unidade ER EM, etc E vamos aprender tudo sobre isso neste tutorial. Agora vamos falar sobre outra propriedade que é a família de fontes. Usando a propriedade da família de fontes, você pode definir qual fonte vai usar e pode usar várias famílias de fontes ao mesmo tempo. Suponha que você use a família de fontes Arial, Heldica e Vardana, caso Areal não esteja disponível em Nesse caso, ele vai usar o Heltica. E se as duas fontes Arial e Heltica não estiverem disponíveis em seu sistema, elas entrarão na Verdana Então, em nossa família de fontes, podemos passar um valor, caso contrário, podemos passar vários valores. E lembre-se de que, se alguma família de fontes não estiver disponível em seu sistema, nesse caso, ela usará a fonte padrão, a fonte padrão do seu navegador. Agora, vamos falar sobre outra propriedade que é a altura da linha. Como você pode ver neste parágrafo, temos várias linhas. Mas se usarmos a propriedade de altura da linha, ela fornecerá espaço entre as linhas, algo assim. Podemos controlar o espaço entre as linhas usando a propriedade de altura da linha. Então, sem perder muito tempo, vamos começar a prática e ver como podemos usar essas propriedades 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 Lip e já crio um documento ETML, chamado index dot TML Você pode ver em nossa tag corporal, temos uma tag de cabeçalho e também temos uma tag profunda, e dentro dessa tag profunda, temos um grande paragrama E agora vou estilizar essa caixa usando o nome da classe. Então, dentro da tag principal, vou usar a tag de estilo. Estilo. Dentro dessa etiqueta de bloco , primeiro, vou selecionar esse elemento profundo usando sua caixa de pontos do tipo ID Então, dentro da resistência do carro, nossa primeira propriedade é com. Primeiro, vou atribuir um molhado a esse contêiner com 400 pixels. Em seguida, vou atribuir preenchimento. Acolchoamento de 25 pixels. Nossa próxima propriedade é borda, borda, e eu quero uma borda de dois pixels. Com isso, eu quero uma borda sólida. E a cor da nossa borda é y. E eu quero definir esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Primeira propriedade que vou usar, que é tamanho da fonte, tamanho da fonte, e vou usar o tamanho da fonte, 15 pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Isso reduzirá o tamanho da nossa fonte. E se você quiser reduzir ainda mais, precisará reduzir o valor. Suponha que eu digite oito pixels. E defina esse arquivo. Agora você pode ver fonte do nosso parágrafo é muito pequena e é muito difícil ler esse texto. Então eu decido que vou aumentar o tamanho da fonte. Vou fazer com que seja de 20 pixels. Se eu definir esse arquivo, agora você poderá ver o resultado. Então, aqui usamos o valor estático. E agora vou mostrar outro exemplo em que vamos usar o valor dinâmico. Para isso, vou reduzir algumas linhas deste parágrafo. E eu vou duplicar esta seção. E aqui, vou usar outra classe, que é a caixa dois, e vou definir esse arquivo. Com isso, também precisamos estilizar a seção dois da caixa. Então, vou duplicar esta seção e a caixa de hemotipagem dois Mas desta vez eu usei uma fonte de tamanho de dez pixels. Se eu definir o arquivo, você poderá ver a diferença entre o tamanho da fonte. Mas, como eu disse, vamos usar o zero dinâmico. Então, por enquanto, vou comentar as duas linhas e aqui vou estilizar a tag corporal. Sim. Então, vou digitar body e, dentro do carro ss, vou usar a propriedade de tamanho da fonte. Tamanho da fonte 30 pixels. Se eu definir esse arquivo, agora você pode vê-lo tornar nossa fonte de 30 pixels, que está dentro da tag body. Agora você pode ter quotien. Novamente, eu uso valor estático, mas prometo que vamos usar valor dinâmico. Basicamente, vamos usar o valor percentual. Agora vou usar o valor percentual, então vou usar o tamanho da fonte e vou passar 25%. É chamado de valor relativo. Se eu definir esse arquivo, agora você pode ver o diferente. Para usar o valor dinâmico, caso contrário, porcentagem é valor, devemos compará-lo com a tag principal. E, como você pode ver, nossa caixa um e a caixa dois são do elemento profundo dentro da etiqueta corporal. Então, aqui usamos o tamanho da fonte da tag body de 30 pixels. Então, quando usamos 25% de 30 pixels, nosso tamanho de fonte é 7,5 pixels. E se aumentarmos o valor, suponha 50 pixels e defina o arquivo. Agora você pode ver que o tamanho do nosso telefone é de 15 pixels. E se usarmos 100% e depois definirmos o arquivo, agora você pode ver que o tamanho do telefone está à venda. Agora, faz com que nosso telefone 30 pixels porque, em nossos pais, usamos 30 pixels. A próxima unidade que vamos usar para nosso quarto tamanho, que é EM. Deixe-me te mostrar. Tamanho da fonte, e eu vou usar um EN. Essa unidade também funciona de acordo com o valor principal. E, como você pode ver, nosso valor principal é 30 pixels. Se usarmos 1:00 da manhã e, em seguida, definirmos esse arquivo, como você pode ver, não há diferença no tamanho da fonte Mas se chegarmos às 2:00 da manhã e depois definirmos o arquivo, agora você pode ver que o tamanho da fonte do nosso segundo elemento de mergulho é o dobro do nosso primeiro elemento de mergulho Como você pode ver em nossa tag principal, aqui usamos 30 pixels. Então, um M de estrelas por 30 pixels, e se formos dois, basicamente, o dobro do valor. E, como eu disse, o EM também funcionará de acordo com o valor do contêiner pai. Da mesma forma, se você quiser reduzir o tamanho da fonte, basta passar abaixo de um v. Suponha que eu passe 0,5 da manhã e depois no arquivo, e aqui você pode ver o resultado. Agora está escrito em 15 pixels. Então é assim que esse tipo de valor funciona em conjunto. Sem isso, temos outras unidades ERM e muitas toupeiras. Então, vamos aprender sobre isso em nossos próximos tutoriais Por enquanto, vou falar sobre outra propriedade que é a altura da linha. Então, vou comentar as duas linhas. E eu vou configurar esse arquivo. Além disso, vou remarcar o tamanho de fonte padrão para a tag body E em nossa primeira caixa, vou usar a propriedade altura da linha altura da linha, altura da linha. Aqui eu vou usar 15 pixels. Se eu definir esse arquivo, basicamente reduzimos a altura da linha do nosso primeiro elemento. Se eu reduzir mais, cinco pixels e depois definir esse arquivo, agora você pode ver nossas linhas se sobrepondo umas às outras E da mesma forma, se você quiser aumentar a lacuna entre linhas, suponha que eu passe 50 pixels e depois defina esse arquivo, agora você pode ver a diferença. Agora aumentamos o espaço entre essas linhas. Além disso, também podemos usar a unidade EM. Deixe-me te mostrar. Suponha que um EM seja a unidade padrão. Um EM é o tamanho padrão. Se eu definir esse arquivo, como você pode ver, C não há diferença. E se eu quiser aumentar o tamanho da lacuna entre essas duas linhas em relação à lacuna existente, quero dois intervalos de tempo. Para isso, precisamos passar dois valores EM. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, esse tutorial é para fontes, não para unidades, e eu já crio outra seção diferente para unidades. Então não se preocupe com isso. Agora, vamos falar sobre nossa outra propriedade, que é o peso da fonte. Podemos controlar a espessura e a ousadia da fonte usando essa propriedade Então, vou digitar fonte Wait, fonte para oito, e podemos usar alguns ve predefinidos Temos ousadia, mais ousada, mais leve. Suponha que eu use o negrito e, em seguida, defina esse arquivo Depois de definir esse arquivo, você pode ver o resultado. Como você pode ver, ele aumenta nossa fonte. Sei que minha fonte raramente é visível, então vou aumentar o tamanho da fonte. Tamanho da fonte 18 pixels. E eu vou configurar esse arquivo. Agora você pode ver que nossa fonte parece muito ousada. A fonte para oito propriedades vem com algum valor predefinido. Temos o valor 100-900. Se usarmos 100 e depois definirmos esse arquivo, você verá que nossas fontes parecem muito mais finas Da mesma forma, se usarmos 900, esse é o ponto mais alto e definirmos esse arquivo, agora você pode ver, novamente, que nossa fonte fica mais ousada Agora vamos usar outra propriedade, que é família de fontes. Família de fontes, e eu vou usar a fonte ARL. ARIEL. Por enquanto, vou usar apenas uma antena de fonte e vou configurar esse arquivo Após a etapa deste arquivo, agora você pode ver o resultado. Aqui usamos a fonte para 8900, então isso torna nossa fonte aérea Mas se eu usar 100 de vez em quando definir esse arquivo, você pode ver que nossas fontes parecem muito mais finas do que a versão anterior E agora você pode aumentar a espessura da fonte uma a uma. Se usarmos 700 e este for esse arquivo, agora você poderá vê-lo tornar nossa fonte mais ousada novamente. Por enquanto, vou fazer com que a fonte seja oito normal. E eu quero configurar esse arquivo. A próxima propriedade que vou usar, que é estilo de fonte estilo de fonte. estilo BDFaultFont vem com três valores, itálico normal e oblíquo itálico normal Se você quiser colocar sua fonte em itálico e sem usar a tag I para isso, basta inserir tie fonttyle Se eu definir esse arquivo, você poderá ver o resultado. Agora, torna nossa fonte em estilo itálico. E o próximo valor que temos, que é oblíquo. Basicamente, itálico e oblíquo Só que eles têm uma pequena diferença entre eles. Deixe-me dizer a diferença. Suponha que usemos uma fonte aérea, e essa fonte al venha com uma variante em itálico Mas o que em qualquer fonte não tem nenhuma versão em itálico, nesse caso, precisamos usar o valor obrigatório Esse valor oblíquo torna essa fonte em itálico. Agora, vamos falar sobre a próxima propriedade, que é uma variante de fonte, uma variante de fonte de algum tipo. E nossa propriedade de variante de fonte Cai totaliza dois valores, normal e maiúsculas. Se usarmos letras maiúsculas e depois definirmos esse arquivo, você poderá ver o resultado Basicamente, ele torna todo o caractere em letras maiúsculas. Além disso, se você notar após o ponto final, isso torna o segundo caractere um pouco maior. Além disso, você pode usar uma abreviatura para toda essa propriedade. Deixe-me te mostrar como. Então, em nosso segundo elemento div, vou usar uma fonte de nome de propriedade Primeiro, precisamos fornecer o valor do estilo da fonte, e eu vou usar o Obliq Em seguida, precisamos fornecer uma variante de fonte e vou usar letras maiúsculas. E terceiro, precisamos fornecer a espessura da fonte, e eu vou usar a fonte normal. Em seguida, precisamos fornecer a altura da linha. E aqui eu vou fornecer dois E. E também, precisamos fornecer sinais de fonte. Então, vou usar o Slash e vou passar de 18 pixels Em seguida, precisamos passar a família da fonte. Aqui você pode passar vários nomes de fontes de uma só vez. Além disso, você pode usar um quarto nome. Por enquanto, vou usar a fonte AL. Aéreo. Se eu definir esse arquivo, agora você pode ver o resto. Desculpe, esse valor representa o tamanho da fonte e esse valor testa a altura da linha. Então, o tamanho da fonte, eu vou usar um, serve. E para a altura da linha, vou usar dois EM. E se eu definir esse arquivo, você poderá ver o resultado. Primeiro, precisamos fornecer o tamanho da fonte, depois você precisa fornecer a altura da linha e lembrar essa ordem para usá-la em uma linha Portanto, essas são as propriedades mais importantes sobre a fonte. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre CSS, formatação de texto, decoração de texto e muito mais Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 20. Propriedades de formatação de texto CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com o novo tutorial relacionado ao CSS. E neste tutorial, aprenderemos CSS básico relacionado a propriedades de texto. Então, todas essas são propriedades relacionadas a texto em CSS. texto, alinhamento do texto por último, transformação do texto, recuo do texto, espaçamento entre palavras, espaçamento entre letras. E vamos aprender tudo sobre isso neste tutorial. 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 Lip e já crio um documento ESTiml chamado index dot TML chamado index dot TML E neste documento ESTiml, temos um Deep e dentro desse elemento profundo, temos um parágrafo E, como você pode ver, aqui atribuímos uma caixa de nome de ID e estilizamos essa caixa. Ele está com acolchoamento, borda e uso como antena familiar Primeiro, vou usar uma propriedade chamada text align text Align O alinhamento do texto do parágrafo BitIfulo fica à esquerda. Mas se eu usar corretamente e, em seguida, definir esse arquivo, agora você pode ver o resultado. Agora, o texto do nosso parágrafo está alinhado do lado direito. Além disso, temos outro valor para essa propriedade, que é o centro. E eu vou subtrair esse arquivo. Agora nosso parágrafo está alinhado a partir do centro. Com isso, temos outro valor, que é justificar. Então, se eu usar justify e depois definir esse arquivo, agora você pode ver o resultado Agora você pode ver de ambos os lados, temos o mesmo espaço. Agora, nosso texto se alinha do lado do lábio e também do lado direito. Portanto, esta é a nossa justificativa para alinhar o trabalho com o texto. E lembre-se de que o valor padrão de alinhamento de texto está atrasado. Agora vamos falar sobre outra propriedade que é alinhar o texto por último Então, aqui, vou digitar o alinhamento do texto por último. Essa propriedade de alinhamento de texto é usada para nossa última linha. Você pode controlar, por que você quer alinhar sua última linha. Suponha que se você quiser alinhá-lo do lado direito, direito e depois definir esse arquivo, agora você pode ver o resultado Basicamente, ele tem como alvo a última linha e se alinha no lado direito E se eu torná-lo central e denso, está bem, e está encravado neste arquivo, você pode ver o resultado Além disso, temos outro valor para essa propriedade. Marcamos o valor em estrelas. Também temos valor de luxúria. Se eu usar o valor da estrela, é como elevar o alinhamento E se você usar lust value, então que tal write align Agora, vamos falar sobre nossa próxima propriedade, que é transformação de texto, algum tipo de texto, transformação. E o primeiro valor que vou usar, que é maiúsculo. Se eu colocar em maiúsculas e compactar esse arquivo, agora você poderá vê-lo convertendo todos os caracteres em Agora estão todas em letras maiúsculas. Ao contrário, temos outro valor chamado minúsculo. Depois de configurar este arquivo, como você pode ver, ele converte todos os caracteres em minúsculas O próximo valor que vou usar, que é capitalizar. Se eu usar esse valor e definir esse arquivo, agora você pode vê-lo converter todo o primeiro caractere de qualquer palavra em maiúscula. Todas as palavras que você pode ver neste parágrafo começam com maiúsculas mais tarde. Além disso, temos outra propriedade que não é nenhuma. Funciona como valor padrão. Então, por enquanto, vou usar maiúsculas. E eu vou definir essa multa. A próxima propriedade que vou usar, que é o recuo do texto Então, vou digitar o recuo do texto. Esta propriedade, particularmente, funciona na primeira linha. Usando essa propriedade, você pode mover a primeira linha. Suponha que você não queira começar sua primeira linha a partir dessa posição. Você deseja iniciá-lo com até 100 pixels. Então você pode passar para passar de 100 pixels. E se eu definir esse arquivo, você poderá ver o resultado. Agora, nossa primeira linha fornece uma margem de 100 pixels em t. Para esclarecer esse tópico, por enquanto, vou comentar essa linha. E se eu configurá-lo novamente, agora fica mais claro para você como funciona. A próxima propriedade que vou usar, que é espaçamento entre palavras, tipo de som, espaçamento entre palavras Usando essa propriedade, podemos fornecer espaço entre as palavras. Suponha que eu adicione 30 pixels de espaço entre nossas palavras. Se eu definir esse arquivo, você poderá ver o resultado. Agora, como você pode ver, a diferença entre as palavras é de 30 pixels. Se você quiser aumentá-lo, basta passar um valor maior e partir desse arquivo, você pode ver o resultado. Por enquanto, vou comentar essa linha. Em seguida, vou usar outra propriedade, que é o espaçamento entre letras Espaçamento entre letras, eu quero 20 pixels. Se eu definir esse arquivo, agora você poderá ver o resultado diferente. Usando a propriedade de espaçamento Watts, podemos criar espaço entre duas palavras Mas usando a propriedade de espaçamento entre letras, podemos criar espaço entre as letras É por isso que você pode ver a lacuna entre essas letras. Por enquanto, vou usar cinco pixels porque 20 pixels são usados em números para letras. E eu vou configurar esse arquivo. Portanto, essas são as propriedades de formatação de texto mais úteis em CSS Então, isso é tudo para este tutorial. No próximo tutorial, falaremos sobre a propriedade de decoração de capturas CSS. Então, obrigado por assistir a este vídeo. Fique ligado. 21. Tutorial de decoração de texto CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova tese relacionada ao tutorial. E neste tutorial, aprenderemos sobre as propriedades de decoração da tomada. Aqui você pode ver, temos um total de três tomadas de propriedade de decoração, pega linha de decoração, pega cor de decoração, assume estilo de decoração. Se você usar a propriedade da linha de decoração fiscal , terá quatro valores sublinhados, acima da linha e nenhum E tudo isso considera valores de propriedades de estilo de decoração, pontos sólidos, ondas duplas, e também consideram que a propriedade de decoração vem com Você não precisa digitar essas três linhas para propriedade e VDO Você pode usar essa abreviatura. Usa a decoração abaixo da taxa de linha WV. Primeiro, você precisa usar Taste DegreonPperty e, em seguida, passar o valor da linha de decoração Takes , E em seguida, você precisa passar o valor da cor take degree. E, finalmente, você precisa passar pelo valor do estilo de decoração. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usar essas propriedades Então, como você pode ver lado a lado, abro meu Visual Studio Cditor e meu navegador usando a extensão Lip Server e abro meu documento de estimativa anterior Então, vamos usar tax DecoronPperty. Mas primeiro, vou usar essa propriedade em nossa tag de cabeçalho. Então, aqui, vou selecionar a tag de cabeçalho, H one, depois a lista. Vou digitar leva a decoração. Linha de decoração de impostos, e eu vou usar sublinhado propriedade Sublinhe o valor. Se eu definir esse arquivo, aqui você pode ver o resultado. Como você pode ver, tinha um sublinhado em nosso cabeçalho, uma tag E se você não quiser usar o sublinhado, basta digitar outro valor Linha oval e defina este arquivo. Você pode ver o resultado. Você pode usar a linha de decoração Tex em qualquer texto. Pode ser parágrafo, tag de título, tag UL, etc Agora, deixe-me mostrar outro anúncio sobre a linha de decoração de texto, que é uma linha a outra. Se eu usar esse valor e depois definir esse arquivo, como você pode ver, ele funciona como uma etiqueta de ataque em nossa tabela. Tinha uma linha no meio desse texto. Por enquanto, vou usar o valor sublinhado. Sublinhado. Toma a cor da decoração, assume a cor da decoração. Toma cor de decoração, vou usar a cor vermelha. Se eu definir esse arquivo, você poderá ver o resultado. E nossa última propriedade é assumir o estilo de decoração. Então, vou digitar texto, decoração, estilo. Se eu usar o dash e depois definir esse arquivo, você poderá ver o resultado Assim como a borda dst, ela adiciona sublinhado a este texto Da mesma forma, você pode usar outros valores. Se você quiser usar o dotate, poderá ver o resultado. Além disso, você pode usar o Dowel Film. Você adicionará um sublinhado duplo este teste e teremos outro valor, que é onda Se eu usar essa visualização e depois definir esse arquivo, como você pode ver, agora nosso sublinhado segue o estilo padrão, e agora vou mostrar o resumo e como você pode usar a propriedade shorten Então, o tipo Hemo exige decoração. Faz decoração, primeiro precisamos passar o valor da linha, que é sublinhado, e depois precisamos passar o valor da cor, que é vermelho Em seguida, precisamos passar o estilo de decoração velo, que é o caminho. E se eu comentar essa linha e definir esse arquivo, você verá o mesmo resultado. Eu sempre prefiro a abreviação sem usar várias linhas. Então, isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos sobre qual encapsulamento e qual propriedade de quebra. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 22. Wrap de palavras em CSS e tutorial de quebra de palavras: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. Neste tutorial, aprenderemos duas novas propriedades, linha e quebra de palavra. Vamos ver por que precisamos usar a propriedade WordAP. Como você pode ver neste exemplo, temos um recipiente profundo e também uma palavra inquebrável Como você pode ver, a palavra é muito longa. Então, se você usa esse tipo de palavra grande e já diz Dev weed, nesse caso, ela vai transbordar para esse contêiner Para resolver esse problema, o CSS introduz o WordAp e essa propriedade Wadrap vem com dois valores, quebrada Se usarmos palavra-quebra e arquivo epi , você dividirá a palavra de acordo com o tamanho profundo Agora, vamos falar sobre nossa outra propriedade que é o Art Break. Esta propriedade artbrek vem com um total de dois valores, break all e keep Manter todo o valor é o valor padrão. Precisamos usar o valor break all. Deixe-me mostrar um exemplo. Como você pode ver, temos um elemento DB e dentro desse elemento deve, você pode ver um parágrafo. Neste parágrafo, temos muitas palavras. Se usarmos qual valor de quebra e quebra , isso dividirá nossa palavra em caracteres. Basicamente, isso vai quebrar todas as palavras. Se não usarmos a propriedade break , nossa palavra hindi começará na próxima linha Espero que agora esteja claro para você como podemos usar qual propriedade break. Sem perder seu tempo, vamos começar o prático e ver como podemos usá-lo de forma 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á crio um documento de estimativa chamado HTML de ponto de índice. Nesta página de estimativa, como você pode ver, temos um elemento profundo com ID, caixa. Além disso, temos uma tag de cabeçalho. No começo, vou estilizar essa caixa D. Ele para digitar tem tag, e nosso deep ID é box. Em seguida, surge a primeira propriedade que vou usar com o W 400 Pixel. Além disso, vou usar borda e quero uma borda de um pixel. Com isso, quero uma borda sólida e cor da nossa borda é vermelha. Vou configurar esse arquivo. Vamos fazer com que seja de dois pixels. Agora está mais visível. Agora vou adicionar uma palavra, que terá mais de 400 pixels de largura. Deixe-me te mostrar. Vou aumentar Lorem O R E M. Se eu definir esse arquivo, você pode ver o problema Agora, nossa palavra transborda desse elemento profundo. Agora precisamos dividir a palavra de acordo com o tamanho profundo. Para isso, precisamos usar uma propriedade e a propriedade chamada Wordrap Aqui vou digitar a palavra rap e precisamos usar um valor chamado breakword Se eu usar esse valor e depois subtrair esse arquivo, você poderá ver o resultado Agora, ele quebra a palavra de acordo com a largura profunda. Se eu ampliar um pouco esta página, agora fica mais claro para você. Esse é o uso da propriedade Wadrap e vem com outro valor que é normal e é o padrão Então, eu não vou usar essa visão. Basicamente, o Wadap costumava quebrar palavras longas, mas agora vou aumentar um pouco o tamanho dessa palavra Vou digitar um pouco de D depois disso e vou copiar esse arquivo Se eu definir esse arquivo, agora você poderá ver o resultado diferente. Não quebrou a palavra. Basicamente, ele o move para a próxima linha. Como eu disse, o Wadrap é usado apenas para quebrar palavras longas, não as esferas de tamanho médio Para resolver esse problema, precisamos usar outra propriedade que é Quebra de palavra. Vou comentar essa linha na próxima linha, vou usar o Word Break. Propriedade Word Break, precisamos usar o valor break all. Se definirmos esse arquivo, você poderá ver o resultado. Ele quebra com sucesso a palavra longa e também quebra com sucesso a palavra pequena. Esse é o uso de ambas as propriedades. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 23. Tutorial de sombra de texto CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova tese relacionada ao tutorial. Neste tutorial, aprenderemos sobre uma nova propriedade, que é sombra de texto. Agora vamos ver o que é sombra de texto. Aqui está uma palavra chamada olá e ela não tem nenhuma sombra. Mas se eu usar a sombra para essa palavra, agora fica assim. Agora você pode ver uma sombra por trás todos os personagens e, para criar essa sombra de captura, precisamos usar a propriedade shadow. Como você pode ver, primeiro passamos dois pixels, dois pixels, cinco pixels e laranja. Nosso primeiro valor de dois pixels significa sombra H. Sombra H significa sombra horizontal. E nosso próximo valor significa sombra vertical, sombra V, e nosso terceiro valor significa raio de desfoque sombra horizontal funciona na direção esquerda e direita, e a sombra vertical funciona na direção superior e inferior. Usando o valor de desfoque, você pode controlar a nitidez dessa sombra e nosso último valor significa Aqui você pode usar o nome da cor, hexadecimal, valor argv, Agora vamos tentar entender a sombra horizontal e vertical com a interface gráfica. Aqui você pode ver que temos X xs e a direção YxS XXStNDs para sombra horizontal e YXStNDs para sombra vertical e YXStNDs Se você quiser mover sua sombra horizontalmente para o lado direito, precisará passar o valor 1234 e, se quiser movê-la para o lado esquerdo, precisará passar o valor menos Da mesma forma, a sombra vertical funciona. Se você mover sua sombra para baixo, precisará passar o valor de um, dois, três, quatro Se você quiser mover sua sombra para cima, precisará usar o valor negativo menos um menos dois menos três menos quatro Espero que agora esteja claro para você o que é sombra H e o que é sombra V. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server e meu navegador usando a extensão Live Server já crio um nome de documento ESTiml com o nome de um documento, índice, ponto de índice, HTML E, como você pode ver, em nossa tag body, temos uma tag de cabeçalho. Em primeiro lugar, vou estilizar essa tag de cabeçalho. Vou selecionar essa tag de cabeçalho usando seu nome de tag H one. Então, dentro da propriedade CliRasf, vou usar a cor preta colorida Segunda propriedade que vou usar, que é sombra de texto, texto, sombra. Primeiro, vou fornecer o valor horizontal horizontal em pixel. Em seguida, precisamos fornecer o valor do eixo vertical em pixel. Se você perceber que pode vê-la usar um valor horizontal positivo, ela moverá nossa sombra para o lado direito e também usará um valor vertical positivo. Isso significa que vai mover a sombra para baixo. Em seguida, precisamos passar o valor do desfoque. Para o valor do desfoque, vou passar cinco pixels e precisamos passar a cor Para colorir, vou usar verde. Se eu definir esse arquivo, você poderá ver o resultado. Se eu remover o valor do desfoque e definir esse arquivo, agora você pode ver nossa sombra muito nítida e, se eu quiser movê-la para o lado do lábio, vou passar valor menos dois pixels na Se eu definir esse arquivo, você poderá ver o resultado e, se quiser movê-lo para cima, precisará usar o valor vertical negativo Se eu definir esse arquivo, você poderá ver o resultado. Agora, novamente, vou usar o valor de desfoque, mas desta vez, vou usar o valor de desfoque de dois pixels Depois de definir esse arquivo, como você pode ver, ele dois pixels de sangue até essa sombra E se você remover a cor e definir esse arquivo , por padrão, ele adicionará a cor preta como sombra. É assim que podemos usar a propriedade take shadow. É uma das propriedades mais úteis em CSS. Isso é tudo para este tutorial. Obrigado por assistir a esta estátua em vídeo. 24. Tutorial de espaço em branco CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos sobre a propriedade de espaço em branco do CSS. Essa propriedade veio com um total de cinco valores, normal, sem AP, pré linha, pré dap. Normal é o valor padrão. Agora vou explicar o que é espaço em branco e por que precisamos usar essa propriedade. Como você pode ver neste exemplo, temos um elemento profundo e, dentro desse elemento profundo, temos um parágrafo fictício Se você notar que pode ver aqui que fixamos neste contêiner, 200 pixels, então eu uso o valor padrão, espaço em branco, normal. Como eu disse, normal é o valor padrão, então funciona como está. Mas se você usar espaço em branco, acene com a cabeça para cima e verá a diferença Agora você pode ver o parágrafo inteiro em uma única linha. Você pode ver que nosso conteúdo está transbordando desse contêiner e, se quiser ocultar o conteúdo estouro, sim, você pode, você precisa usar o overflow você pode, você precisa usar o overflow Às vezes, precisamos mostrar em uma única linha. É por isso que precisamos usar o Nodev VD. Essa propriedade vem com outro valor, que é pré-tag em nosso Se você sabe como a pré-tag funciona na Atmel, então você pode entender Aqui você pode fornecer o espaço que você deseja para Asma. Você pode fornecer muito espaço em branco em seu texto e também é semelhante ao valor do nob Deixe-me explicar o tópico com um exemplo. Como você pode ver, aqui usamos pre tag. Neste elemento profundo, temos um total de três linhas, mas não usamos nenhuma tag de quebra para quebrar a linha. Mas se você notar a saída, aqui você pode vê-la impressa como está em nossa estrutura TMA Ele imprime as duas linhas separadamente. Suponha que, se eu fornecer espaço entre Dlo e set, aqui você pode ver o exemplo Além disso, fornece o espaço em nossa seção de saída dentro desse desenvolvimento. Esse é o uso do pre-wave. Por padrão, a tag TML não ocupa esse espaço, mas o herói usa o valor anterior É por isso que ocupa esse espaço. Ele fornece o mesmo espaço, o que fornecemos em nossa estrutura ESTiml Agora, vamos falar sobre outro valor que é preline. É muito semelhante ao valor anterior, mas não ocupa mais do que um único espaço. É só contar o espaço único. Essa é a diferença entre pré-linha e pré-valor. E se eu falar sobre nosso próximo valor, que é pré-Ap, ele também funciona como pré-tag. Ele ocupa espaço em branco como está, insere a tag como está, mas nenhum AP não funciona nela. Você não pode mostrar tudo em uma única linha aqui. Sem perder seu tempo, vamos começar a prática e ver como podemos usá-la 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 Live Server e já crio um documento HTML chamado index dot DM Então, como de costume nesta página de estimativa, temos uma tag profunda com a caixa de nome de ID e estilizamos essa tag dip Aqui dissemos 300 pixels fixados nele e definimos uma borda para pixels em preto sólido. No início, vou ampliar um pouco esta página para que você possa vê-la claramente. No começo, vou fazer um forro, então não vou usar Rb Vou digitar espaço em branco, sem RAD. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora, faz do nosso parágrafo um forro. Como você pode ver, barra de rolagem horizontal na parte inferior. Se eu quebrar o parágrafo em nossa etiqueta de estimativa usando Enter, você ainda poderá vê-lo imprimir nosso parágrafo em uma única linha. Além disso, se eu fornecer vários espaços e depois definir o arquivo, você ainda poderá ver o mesmo resultado. Se você quiser ocultar esses dados de estouro, poderá usar a propriedade oculta de estouro Transbordamento oculto. E defina esse arquivo. Por enquanto, eu não quero isso, então vou usar, então vou comentar essa linha e, desta vez, vou mostrar que você prevalece Espaço em branco, pré. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver o espaço em branco diante deste mundo. Se eu passar mais espaço em branco e definir esse arquivo, você ainda poderá ver o resultado. Além disso, você pode notar que a partir daqui, quebramos nossa linha. Se eu quebrar essa linha novamente e depois definir esse arquivo, ainda assim, você poderá ver o resultado. Suporte pré-valorizado NoDAP. É por isso que nosso conteúdo pode transbordar desse contêiner. Também suporta espaço em branco. Além disso, também suporta quebras de linha. Se você perceber, pode ver nossa última linha transbordar desse contêiner porque não há espaço suficiente para essa linha nesse contêiner É por isso que ele transborda e imprime todo o conteúdo em uma única linha Agora vamos falar sobre outro valor que é pré-linha. Se usarmos a pré-linha e, em seguida, definirmos esse arquivo, aqui você pode ver a diferença. Eu não apoio nenhum rap, mas ele apóia a nova linha. Se eu dividir essa linha e depois definir esse arquivo, aqui você pode ver o resultado. Se usarmos o valor da pré-linha , você não imprimirá nosso parágrafo em uma única linha Agora vamos falar sobre o último valor, que é pré-rap, algum tipo, pré-rap. Vou submeter esse arquivo Depois de submeter esse arquivo, agora você pode ver o resultado. pré-rap também não suporta RAP, mas suporta espaços em branco e quebras de linha. Essa é a diferença entre todo esse valor, e ele também vem com outro valor chamado normal e é o valor padrão, então não vou usá-lo aqui. Isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre estouro de texto Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 25. Tutorial de overflow de texto em CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a SSIs e, neste tutorial, aprenderemos sobre um novo CSIS relacionado a propriedades e o nome da nossa propriedade é Esses são os valores que vêm com a propriedade CSS text overflow Clipe de clipe é o valor padrão, elipse e string. Agora vamos ver por que precisamos usar a propriedade de estouro de texto. No tutorial anterior, aprenderemos sobre o NoAp. Sabemos que se usarmos espaço em branco com valor norab, sem RAP, ele transformará nosso parágrafo inteiro em uma única linha e ele transbordará do Se usarmos a propriedade oculta de overflow, ela ocultará o texto. Mas agora quero dizer ao nosso usuário esse texto ainda não acabou. Eu quero mostrar a ela pontos triplos, caso contrário, ETC, etc. Se usarmos a propriedade diretamente oculta, como você pode ver, às vezes ela pode cortar nosso texto e não parecer tão profissional para resolver esse problema, você pode usar a propriedade de estouro de texto Se usarmos reticências de valor de estouro de texto, ela adicionará um ponto triplo após essa frase e virá com outra string de Aqui podemos especificar a string exata que eu quero imprimir. Suponha que dentro dos quadrados passemos um ponto duplo, você imprimirá a mesma string que está depois dessa linha Vamos começar a prática e ver como podemos usá-la. 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á crio um documento HTML chamado index dot HTML E, como você pode ver dentro da tag body, temos uma tag profunda e aqui definimos uma caixa de identificação e também estilizamos nossa ID. Aqui dizemos 300 pixels de largura borda de dois pixels e espaço em branco, Depois de usar o Whitespace No AB, como você pode ver, nosso conteúdo transborda desse contêiner Se eu apenas usar overflow e usar hidden e definir esse arquivo, aqui você pode ver que não parece ótimo Cortou nosso texto. Um usuário não consegue entender se é esse fim ou não, mas eu quero mostrar ao usuário que ainda há mais palavras neste parágrafo. Para isso, precisamos usar o excesso de texto. Então, para comentar essa linha, vou digitar texto estouro e vou usar reticências Se eu definir esse arquivo, opa, acho que há um problema Precisamos usar o valor de estouro de texto com o valor de estouro. Precisamos fazer com que ele transborde oculta e, em seguida, definir esse arquivo, agora você pode ver o resultado Ele adiciona três pontos por último desta linha. Quero dizer, temos mais conteúdo no Sparagram. Esse é o primeiro valor. Também temos outro valor. Então, para duplicar essa linha e comentar a anterior. Desta vez, vou usar outro valor que é stream. Não precisamos digitar o nome do valor, precisamos passar dentro dos códigos duplos, vou passar a string exata que eu quero imprimir. Quero imprimir o quadrado ss e, dentro do quadrado sis, quero imprimir dois pontos. Depois de configurar esse arquivo, como você pode ver, ele não está funcionando, acho que há um problema com o navegador. Talvez o Chrome não ofereça suporte a esse recurso. Vou copiar meu URDL e vou abrir o Firefox. Como você pode ver, aqui eu abro meu navegador Firefox e se eu passar esse URL e pressionar Enter, agora você pode ver o resultado. Aqui você pode vê-lo na string exata, o que digitamos em nossa seção CSS. É assim que você pode usar a propriedade de estouro de texto. Aqui você pode passar qualquer string, o que quiser imprimir. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado. 26. Tutorial do modo de escrita CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender outra propriedade nova, que é escrever move. Então, vamos ver que tipo de valor temos nessa propriedade. Então, todos esses são valores que vamos usar nessa propriedade. Nosso primeiro valor é TV com hífen horizontal e é um valor padrão TV significa parte superior e inferior. Nosso próximo valor é RL vertical. RL significa direito de levantar. Em seguida, temos R. R vertical que significa lábio para a direita. Então temos o lado RL e lado R. Então, como você pode ver, temos um elemento profundo, e nesse elemento profundo, temos um E se você usar a propriedade do modo de escrita, poderá escrever seu parágrafo assim. Você pode girar verticalmente seu parágrafo. Usando essa propriedade, podemos girar particularmente o conteúdo do texto, não o elemento profundo 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 p server e já crio um documento de estimativa chamado index dot HTML. E se você notar, você pode ver nesta página estal que temos uma tag profunda e aqui definimos uma caixa de nome de ID Além disso, temos um parágrafo nessa tag profunda. E se você observar em nossa seção de estilo, já definimos uma largura fixa para esse desenvolvimento e também usamos bordas. Então, primeiro, vou usar nossa propriedade, que é o modo de escrita. Modo de escrita. Primeiro valor que vou usar, que é RM vertical Até a etapa deste arquivo, aqui você pode ver o resultado. Se você notar, agora você pode ver que nosso D ainda tem 400 pixels, mas está roteado para o parágrafo e giramos esse parágrafo verticalmente da direita Se eu aumentar o tamanho do parágrafo, então o hemótipo é baixo m 100 e depois neste arquivo, agora você pode ver o resultado Começa da direita e depois vai para o lado do lábio. E se eu fizer isso do lado oposto do lábio para a direita. Então, primeiro digite L, depois vou digitar R e, em seguida, definir esse arquivo. Além disso, você pode ver o resultado. Agora você pode ver que nossas gravatas começam do lado do lábio e vão para o lado direito. Agora, deixe-me mostrar outra propriedade que é lateral RL Então, vou remover o R vertical e vou digitar o RL lateralmente Se eu definir esse arquivo, depois de subtraí-lo, como você pode ver, ele não está funcionando porque navegador Chrome não envia esse recurso Então, vou abrir esse arquivo no navegador Firefrogs. Se eu digitalizar esse URL e abrir esse arquivo, você poderá ver o resultado. Portanto, alguns recursos não são compatíveis com o navegador Chrome. É por isso que precisamos usar o navegador Firebog. Agora, vamos falar sobre o último valor, que é TV horizontal. Eu quero usar a TV horizontal. Se eu definir esse arquivo, como você pode ver, ele imprime o resultado como está. Além disso, se eu abrir meu navegador Firefox e recarregar esse navegador, você também poderá vê-lo impresso como está, porque é o valor padrão Então, isso é tudo sobre escrever propriedades de modo em CSS. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 27. Tutorial de contagem de colunas CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à árvore CSS. E neste tutorial, aprenderemos um novo CSS relacionado à propriedade, e o nome da nossa propriedade é Colm count É uma das propriedades mais úteis. Então, vamos ver por que isso é útil. Então, como você pode ver, temos um elemento profundo e, nesse elemento profundo, temos um parágrafo. Esse é um parágrafo normal e é chato. Não parece muito interessante. Mas se você notar em jornais e outras revistas, poderá ver nossos parágrafos, o parágrafo dividido em colunas Às vezes parece assim. Ele fornece espaço entre a coluna. Podemos criar essa parte usando a contagem de colunas. E todas essas são propriedades relacionadas à contagem de colunas, contagem de colunas, clumGap, regra de coluna, regra de coluna com, estilo de regra de coluna, cor da regra de coluna, coluna com, aleta da coluna, extensão coluna Já sabemos sobre a contagem de colunas e vamos ver como a lacuna de colunas funciona. Usando a propriedade de contagem de colunas, podemos dividir o parágrafo em três partes, mas usando a propriedade de lacuna de coluna, podemos fornecer espaço entre essas partições Você pode aumentar o tamanho da lacuna, caso contrário, você pode diminuir o tamanho da lacuna. Nossa próxima propriedade também é uma propriedade importante, que é a regra da coluna. Usando essa propriedade, você pode fornecer linhas entre essas partições e também controlar a espessura usando essa propriedade Próxima propriedade, temos a largura da coluna. Usando essa propriedade, você pode aumentar a largura da coluna, caso contrário, diminua a largura da coluna. Nosso parágrafo está dividido em três colunas, mas usando essa propriedade, você pode controlar o tamanho. 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 Visals Studio e meu navegador usando a extensão de servidor ao vivo, e já criei um documento HTML chamado index dot ASTML chamado index E nesta página HTML, temos uma tag profunda e atribuímos uma ID a essa profundidade, que é box E se você notar, ela estiliza esta caixa. O uso do herói é fixo em 600 pixels, e também dizemos borda. Então, a primeira propriedade que vou usar, contagem de colunas. colunas, contagem de colunas, e eu quero dividir este parágrafo em três colunas três. E eu vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Ele divide nosso parágrafo em três partes. Aqui você pode dividir seu parágrafo em várias partes. Suponha que, se você quiser dividir esse parágrafo em quatro seções, sim, você pode. Você precisa passar quatro. Você precisa definir esse arquivo. Mas, por enquanto, eu gostaria de escolher três partes. Portanto, esse é o uso da propriedade de contagem de colunas. Agora vamos falar sobre outra propriedade que é a lacuna na coluna. Então, a lacuna da coluna de hemótipo e ele deve passar um peso. E, como você pode ver, essa é a lacuna padrão. E se eu quiser aumentar a diferença, ajude-me a ultrapassar uma onda. Suponha que eu queira aumentar a lacuna de 50 pixels. E se eu definir esse arquivo, aqui você pode ver o resultado. E se você quiser mais lacuna, basta aumentar o valor. Então ela passa de 100 pixels. Depois de definir esse arquivo, esse é o resultado. Por enquanto, eu gostaria de usar 50 pixels. Próxima propriedade que vou usar, que é a regra da coluna. E temos muitas propriedades relacionadas às regras de coluna. Então, na primeira propriedade, vou usar a coluna Regra W. Por enquanto, vou usar a coluna com três pixels. E na próxima propriedade, vou usar o estilo de regra de coluna. Coluna. Regra. Estilo. Estilo de raiz de coluna, e eu vou usar o valor do ponto. Se eu definir esse arquivo, sim, você pode ver o resultado. Opa, acho que fiz algo errado porque aqui usamos PC, não pixel Portanto, precisamos usar o valor do pixel PX. Então, se eu definir esse arquivo, agora você pode ver o resultado. Se eu remover essa borda , vou torná-la zero pixel e definir esse arquivo novamente. Agora você pode ver essa linha aparecer apenas entre as colunas, não no lado esquerdo, não no lado direito, temos um estilo diferente semelhante à propriedade da borda. Eu não vou te mostrar um por um. Porque já estamos familiarizados com isso. E agora vou usar outra regra de coluna relacionada à propriedade. Então, vou duplicar esta seção e, desta vez, vou usar cores. Regra da coluna, cor. E aqui eu vou usar a cor vermelha. Se eu definir esse arquivo, agora você poderá ver a cor das regras da coluna. Além disso, você também pode usar uma abreviatura para a propriedade da regra de coluna Deixe-me te mostrar. Então, apenas quando você amarra a regra da coluna. E primeiro, precisamos passar a regra da coluna com, que é de dois pixels. Em seguida, precisamos passar o estilo Column Rule, que é sólido. E então precisamos passar a regra da coluna colorida. Por enquanto, vou usar verde. E eu vou comentar essas três linhas. Se eu definir esse arquivo, como você pode ver no meu navegador, agora nossa regra de coluna é verde, tem dois pixels e seu estilo é sólido. E se você quiser aumentar a regra da coluna apenas para aumentar o valor, suponha que eu use dez pixels e defina esse arquivo, você pode ver o resultado. Agora vamos falar sobre outra propriedade que é o peso da coluna. Para usar essa propriedade, precisamos comentar essa linha, contagem de colunas, porque não usamos as duas propriedades ao mesmo tempo. Então, vou comentar essa linha e ela usar a coluna “nós”. Largura da coluna, e eu quero fazer minha coluna com 100 pixels. Se eu definir esse arquivo, aqui você pode vê-lo dividindo nossa coluna em quatro partes. Mas se eu reduzir a coluna deu valor, zero pixel e também vou reduzir a regra da coluna com um pixel e depois esse arquivo. Agora você pode vê-lo dividir nossa coluna em seis partes porque sempre tenta dividir nossa coluna em partes iguais. Como você pode ver, o herói é fixado com 600 pixels. Então, se eu dividir 600 pixels por 100, ele retornará seis. É por isso que se dividiu em seis partes. Agora vamos falar sobre outra propriedade chamada extensão da coluna. Mas antes, vou comentar essa linha e vou descomentar essa linha, contagem de colunas Além disso, vou usar uma lacuna de 20 pixels entre essa coluna e nosso estilo de regra de coluna sólido e dois pixels. E a espessura é de dois pixels. Se eu definir esse arquivo, novamente, voltaremos ao estágio antigo. Agora vou mostrar como podemos usar a propriedade Spen da coluna Suponha que eu queira mover esse título para uma tag dentro dessa desvalorização Então, vou mover esse título para uma tag dentro desta caixa D. Se eu definir esse arquivo, você poderá ver o resultado. cabeçalho um é muito maior neste exemplo, então vou usar o cabeçalho cinco, tag, H cinco. E salve-o novamente. Agora você pode ver nosso ajuste de tag de cabeçalho cinco em nossa coluna um, e eu não quero isso. Quero aumentar o tamanho dessa coluna para essa tag específica. Então, se eu usar o título três, defina esse arquivo. Agora vou mostrar exatamente como isso vai funcionar. Então, precisamos selecionar esse título de tag três, H três. Então eu disse que a culia diz que precisamos usar a extensão da coluna Extensão da coluna. E eu vou fornecer todo o espaço dentro dessa profundidade. Então, eu vou passar por tudo. Se eu definir esse arquivo, você poderá ver o resultado. Agora, para essa tag específica, expandimos o tamanho da coluna. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre CSS para a regra de fase. Então, obrigado por assistir a este vídeo. Fique ligado. 28. Tutorial de regra de CSS @font face: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos uma nova propriedade na fase de fonte vermelha. Usando essa propriedade, você pode baixar qualquer fonte e usá-la em sua página da web. Agora, a questão é por que precisamos usar essa propriedade? Já temos uma propriedade chamada família de fontes. Então, como você pode ver, se usarmos a família de fontes, podemos fornecer ARIA Heltica e Sensory nessa família de fontes Se a fonte ARL instalar o sistema do usuário , ela aplicará a fonte ARL. Se não estiver, ele também verificará se há Heltka se o Heltica não estiver disponível, ele entrará no Sansai E se tudo isso não estiver disponível , será usado o navegador de fontes padrão. Para resolver esse problema, anteriormente usamos WebSafFonts As fontes Websap são suportadas por muitos sistemas operacionais populares como Windows, Mcewas, Além disso, é compatível com sistemas operacionais móveis, Android Iwase Esse sistema operacional usa um grupo comum de fontes em seu sistema. Então esse é o método anterior em que podemos usar fontes diferentes. Mas agora temos uma propriedade de reajuste de fonte aerada. Com ele, podemos usar qualquer fonte em nossa página da web. E é assim que você pode usar essa propriedade fontchase. O Fontchase está nos limites que você precisa para transmitir à família. E aqui você pode usar seu próprio nome. Você pode passar qualquer nome. E a próxima propriedade que você precisa usar, que é a fonte. E em vez da fonte, você precisa passar o URL, o URL exato da fonte. E lembre-se de usar o nome da fonte, aqui você não pode usar nenhum espaço entre o nome. Aqui você pode usar caixa de camelo, caso contrário, hífen, mas não pode usar espaço Em seguida, você precisa passar a fonte e, aqui passar o caminho exato com a extensão Primeiro, você precisa passar o nome da pasta e, em seguida, usar a barra e o nome da fonte Agora vamos ver como você pode usar essa fonte? Para usar esse fundo, você precisa usar a propriedade da família de fontes. Em seguida, você precisa passar o nome da fonte, o nome da fonte que você atribui no seu vasto seletor de fontes 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 lip server, e já criei um documento ML chamado index dot TML E como você pode ver, dentro da tag body, temos uma tag profunda com a caixa de nome de ID. E agora precisamos usar essa propriedade de fase da fonte. Mas antes precisamos baixar uma fonte para usá-la. Existem muitos sites que fornecem fontes para download, mas eu gostaria de preferir o Font Squirrel Aqui, você pode ver diferentes tipos de fonte. Por enquanto, eu gostaria de usar o OpenSNS. Essa é uma das fontes mais úteis do site. Então, vou selecionar essa fonte, então vou clicar nela aqui. E se você notar, pode ver que ela também fornece uma versão de espessura diferente dessa fonte, clara, negrito, negrito, itálico, etc E se você quiser experimentar essa fonte, basta selecionar essa opção, drive de sabor. E se você digitar algo, suponha que eu digite hello word. Aqui você pode ver o resultado. Portanto, é uma fonte muito boa para usar em nosso site. E se você quiser alterar o tamanho da fonte, a partir daqui, você pode alterar o tamanho da fonte. Se eu usar 14, o tamanho de 14 pixels será usado para parágrafos. Então, se eu usá-lo, você pode ver o resultado. É uma fonte muito boa para usar em nosso site. E se você abrir esse menu suspenso, aqui poderá ver diferentes estilos de fonte dessas fontes, Opensun negrito, negrito, itálico, etc E se você decidir usar essa fonte em seu site, precisará acessar esta seção webfont Keith E tudo isso é WebfonFleetEnsion. Então, TTF EotSG. E o W overlap é o mais recomendado porque suporta todos os navegadores modernos Depois de selecionar essa extensão, precisamos baixar essa fonte. Então, vou clicar no botão Download. Como você pode ver, aqui está o download da nossa fonte com sucesso. Em seguida, movo esse arquivo baixado essa fonte de nome de pasta. Então, como você pode ver, precisamos extrair esse arquivo. Então, vou pressionar extrair aqui. Então, após a extração, aqui você pode ver as fontes da web da pasta. Se eu abri-lo, essas são todas as fontes que podemos usar em nossa página da web. Suponha que eu queira usar uma fonte normal. Então, eu vou abrir essa pasta e vou copiar. Em seguida, vou copiar esse arquivo específico que abre em fonte web normal dot Olive. E vou mover esse arquivo para a pasta de fontes principal. Além disso, vou excluir esses arquivos desnecessários. Eu não preciso disso. Agora vamos voltar ao editor de código do Visual Studio Então, como você pode ver, novamente, estamos no meu editor de código visual do Studio Em primeiro lugar, precisamos usar a propriedade de regra de fase de fonte CSS. Então, aqui vou digitar na fase de leitura da fonte. Em seguida, precisamos usar o Cali Vss. Em primeiro lugar, precisamos usar a propriedade da família de fontes. Família de fontes. E nessa propriedade da família de fontes, precisamos passar um valor Precisamos passar o nome da fonte. E se eu mostrar o nome da minha fonte, o nome da fonte é open sans Então, o tipo dela abre sóis. E então precisamos fornecer o caminho de origem dessa fonte. O tipo Su é RC. E aqui precisamos usar o valor da URL para localizar essa fonte. Como você sabe, URL significa localizador uniforme de recursos e, dentro do rundres, fornece o caminho da Então, como você sabe, nossa fonte está em nossa pasta de fontes. Fontes e nosso nome de fonte é OpenSNSRgular web font. É isso mesmo. Se eu definir esse arquivo e usá-lo em nossa caixa profunda, algum tipo, caixa de hastag É dos calibres aqui que eu quero usar o OpenSensFont para Então, novamente, precisamos usar a família de fontes. Então, basicamente, vou copiar essa linha e colá-la aqui. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, você poderá ver o resultado. Então, depois de configurar esse arquivo, como você pode ver, ele aplica o Opensunspw em E da mesma forma, se você quiser alterar a fonte do título de uma tag, sim, você pode. Suponha que eu selecione o título um, H um e, dentro do fígado, diga: vou usar uma família, família de fontes, fontes, OpenSN. Se eu definir esse arquivo, você poderá ver o resultado Então é assim que você pode baixar qualquer tipo de fonte e aplicá-la em seu navegador. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos as fontes do Google. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 29. Tutorial de CSS com fontes do Google: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS. E neste tutorial, aprenderemos por que devemos usar a fonte do Google em nossas páginas da web? Agora, vamos tentar entender o que são as fontes do Google. Como você pode ver, temos um servidor e, nesse servidor, temos nossas imagens CSS de arquivo estáveis e nossas fontes Se o visitante aumentar para este site , o tempo de carregamento do nosso servidor aumentará. Nosso servidor demora para concluir a solicitação porque há muitos visitantes ao mesmo tempo. Suponha que um visitante tenha tentado acessar esta página e nosso servidor tenha tentado atender à solicitação. Ao mesmo tempo, dois outros visitantes vieram e enviaram a solicitação. Nessa situação, aumentou o tempo de resposta do servidor. Ao mesmo tempo, esse servidor servirá HTML, CSS, imagens e fontes Mas se usarmos fontes do Google , precisaremos reduzir a carga do servidor , pois usaremos diretamente o servidor do Google para servir a fonte. Desta vez, nosso servidor entregará teses e imagens em HTML. Mas para as fontes, ele usará o servidor do Google, que diminuirá nosso tempo de carregamento e abrirá nossa página mais rápido do que na etapa anterior. Desta vez, acessaremos todas as fontes do servidor do Google. Agora vamos começar a prática e ver como podemos usar o Google Fonts. Para acessar a fonte do Google, você precisa visitar este site, phons.google.com Isso vai redirecionar você para esta página. Aqui, você pode ver muitas fontes. E a partir daí, você pode pesquisar qualquer frente que você imaginar. Por enquanto, eu gostaria de usar MonsatFont para selecionar essa A partir daqui, você pode alterar o tamanho da fonte, e esses são os estilos fornecidos por essa fonte. Para acessar essa fonte, você precisa clicar neste botão, fonte Gate. A partir daqui, você pode baixar essa fonte em seu sistema local. Além disso, você pode usá-lo no servidor do Google. Para isso, você precisa clicar em Obter código incorporado. Sim, você pode ver que essa fonte está disponível para dispositivos web Android, dispositivos IOS e aplicativos flutter Mas vamos usá-lo para ondas. Se selecionarmos onda, você também pode ver que temos duas outras opções, tinta e entrada. Por enquanto, vamos usar a opção Link porque não aprendemos sobre as regras de entrada, estamos familiarizados com as tags de link. Vamos aprender o método da regra de entrada em nossos próximos tutoriais Então, por enquanto, eu gostaria de usar links. Você só precisa copiar esse código. Em seguida, volte para o código do Visual Studio. No seu código do Visual Studio, você precisa colar esse código dentro da tag de cabeçalho. Então, abaixo da meta tag, vou colar esse código e vou definir esse arquivo. Agora podemos usar essa fonte, e agora vou usar essa fonte específica para a tag H one. Então, abaixo da tag de título, aqui vou usar a tag de estilo. E dentro dessa etiqueta de ladrilho e dentro dessa etiqueta de ladrilho, então dentro dessa etiqueta vou selecionar essa tag H um, H. Então essa cárdia diz, primeiro, vou usar a família de fontes do nome da propriedade Família de fontes. Em seguida, vamos voltar ao navegador. Aqui, você pode ver a família de fontes, Monsor it sensory. Então, copie esta seção. E voltando ao código do estúdio. E aqui eu vou passar esse valor. Depois de definir esse arquivo e executar esse código, você pode ver o resultado em nosso navegador. Ele mudou o título de um formulário. Além disso, você também pode usar qualquer fonte d com valor 100-900. Então, é assim que você pode usar a fonte do Google em sua página da web. É um processo muito fácil. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 30. Tutorial de estilo de lista de CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender sobre o estilo CSS Agora vamos ver o que é estilo e como funciona. Todas são propriedades de estilo. Estilize a imagem, a posição do estilo, o estilo t e o brinquedo da lista. Então, como você pode ver, esse é o exemplo da lista. E nesta lista, temos um total de quatro itens da lista. Mas se você notar o ícone de estilo, é uma imagem. Não é um marcador, caso contrário, uma caixa quadrada. Você pode usar qualquer imagem como imagem de estilo de lista. Em seguida, vem a posição de estilo. Temos dois tipos de posição interna e externa e vamos aprendê-la na prática. Então, nossa próxima propriedade é seu tipo de estilo. Como você sabe, temos um total de dois tipos de itens de lista, Wada e lista unwale Agora, vamos falar sobre nossa última propriedade, que é estilo. Usamos essa propriedade como um único revestimento. Se você não quiser digitar essas três propriedades, poderá usar essa. 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, abri meu editor de código do Visual Studio e meu navegador usando a extensão light server, e eu já criei um ponto de índice de nome de documento HTML t. E se você notar que pode ver dentro da tag body, temos uma tag de cabeçalho Além disso, temos uma lista abaixo e uma lista de Wadlelist. E agora vou estilizar essa lista de medalhas. Então, para isso, aqui vou usar a tag Style. Coloque lado a lado e insira essa etiqueta de estilo. Primeiro, precisamos selecionar se o nodal é UL. E lembre-se, se você quiser aplicar todas as propriedades mínimas, precisará usar a tag UL, caso contrário, tag OL, não os itens mínimos. Eu quero dizer que não as etiquetas LI. Então, aqui eu vou usar o UL. Em seguida, insira o recesso colorido. Primeira propriedade, vou usar o tipo de estilo. Tipo de estilo Les. Tipo de estilo, vou usar o valor do círculo. Se eu definir esse arquivo, você poderá ver o resultado. Se você notar, você pode ver no meu navegador que nosso item da lista aponta ou circula. E se você quiser usar caixas quadradas, sim, você pode. Só para digitar quadrado. Se eu definir esse arquivo, você poderá ver o resultado. E se você não quiser mostrar nenhum marcador, você também pode usar um valor chamado none Se eu definir esse arquivo, você poderá ver o resultado. Agora, não há nenhum marcador antes dos itens da lista. Por enquanto, eu gostaria de usar o círculo V. Agora, vamos falar sobre a lista de Wada Então, vou duplicar esta seção e vou substituir a UL pela OM Dal is list style é diferente de nodal ist. Se você quiser usar o alfabético, precisará digitar o Alpha superior Se eu usar Ea superior, como você pode ver, um, dois, três, quatro, substitua por AVCD Da mesma forma, se você quiser usar Alfa inferior, Alfa inferior. E isso neste arquivo, agora você pode ver o AVCD ser substituído por um pequeno AVCD Além disso, você tem outros testamentos, romano superior e romano inferior Então, se eu digitar Lower Roman e isso neste arquivo, sim, você pode ver o resultado. Agora, os itens da nossa lista começam com números romanos. E se eu passar alto romano, alto romano e depois definir esse arquivo, agora você poderá ver o resultado. E o valor padrão é decimal. Se eu passar decimal e depois definir esse arquivo, você poderá ver o resultado Esse é o valor padrão. É por isso que imprime um, dois, três, quatro. Então, esses são os valores wardaistas mais populares. E se você não quiser mostrar nada, você pode não passar nada aqui e depois enviar esse arquivo. Por enquanto, eu gostaria de usar Alpha superior, então HemotyPuper E agora vou falar sobre posição de estilo. Em uma propriedade de posição de estilo, temos um total de dois valores. Mas primeiro, vou usar o border. Borda a pixel, borda sólida. Com isso, nossa fronteira é vermelha. E eu vou configurar esse arquivo. Primeiro, vou digitar a posição do estilo da lista, posição do último estilo e vou passar para dentro. Se eu definir esse arquivo, você poderá ver o resultado. Ele moveu o menor item um pouco para dentro desta caixa. E se eu usar fora, neste arquivo, aqui você pode ver o resultado. Depois de usar o valor interno, ele move nosso item da lista um pouco para o lado direito. Então esse é o uso dessa propriedade. Agora vamos falar sobre outra propriedade, que é a imagem de estilo de lista. Então, tipo herói, imagem em estilo de lista. Então aqui você precisa usar o valor da URL, URL. Então, dentro do recesso redondo, precisamos fornecer o caminho do arquivo URL significa localizador uniforme de recursos. E dentro do recesso redondo, precisamos fornecer o caminho do arquivo de imagem Agora vamos baixar uma imagem do site. Como você pode ver na tela, aqui abrimos um localizador de ícones de nomes de sites A partir daqui, você pode baixar o ícone osp. Você pode pesquisar qualquer tipo de ícone e baixá-lo. Então, na barra de pesquisa, vou digitar a seta para a direita. Depois de pesquisar este ícone, você pode ver o resultado. Ele fornece ambos os tipos de ícone gratuitos e premium. Então, a partir daqui, vou selecionar as versões gratuitas. Então, todos esses são ícones gratuitos que você pode baixar. Eu gostaria de escolher este. Então, vou clicar nesse ícone. Depois de clicar neste ícone, você pode ver Hey fornece diferentes tipos de formato, PNG, SVG e outros formatos Neste exemplo, vou usar PNG. Além disso, você pode selecionar sua própria resolução. Eu não quero um ícone maior. É por isso que vou usar o tamanho de 48 pixels e depois clicar no botão Download. Depois de clicar no botão Download, como você pode ver, ele é baixado em nossa pasta descendente Agora vamos mover esse ícone da pasta descendente para o nosso diretório de trabalho atual Então, como você pode ver no meu diretório de trabalho atual, eu já movi essa imagem PNG para o meu diretório e renomeei esse arquivo de seta para PNG E agora vou usar esse arquivo PNG na minha seção de URL. Então, dentro dessa barra de URL, vou fornecer o caminho do arquivo. Ponto de seta PNG. Depois de submeter esse arquivo, você pode ver o resultado. Mas há um problema. Como você pode ver, roubar nossas imagens maior do que marcadores, e não há uma maneira fácil de resolver esse problema Sim, podemos usar o seletor combinador, caso contrário, podemos criar conteúdo em branco para alinhá-lo, caso contrário, reduzir o tamanho Mas, basicamente, estamos agora apenas na fase inicial. Então, vou reduzir o tamanho da imagem usando o Photoshop. Como você pode ver, abro essa imagem no aplicativo Photoshop e agora vou reduzir o tamanho da imagem Então, vou selecionar esta seção de imagem e o tamanho da imagem da opção Aquece aqui, e quero torná-la de 12 pixels por 12 Bigel Eu acho que é bom para isso. Caso contrário, posso torná-lo em 16 pixels. OK. Então eu vou elogiar O. E vou definir esse arquivo como um arquivo PNG exportado como PNG. Além disso, vou substituir essa imagem por essa imagem. Sim. E então, novamente, vou entrar no editor de código do visult studio Se eu definir esse arquivo, você poderá ver o resultado. Esta é a seção básica do Tutorial. Ainda não conhecemos o seletor avançado, então não pude mostrar muitos exemplos Em nossos próximos tutoriais e na seção avançada, aprenderemos sobre diferentes tipos de Então eu posso te mostrar os exemplos. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 31. Tutorial de imagem de fundo CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre CSS, propriedade da imagem de fundo. Imagem de fundo, repetição do plano de fundo e posição do plano de fundo. Agora, vamos tentar entender o que é imagem de fundo. Se você quiser definir a imagem em seu plano de fundo, poderá usar essa propriedade, imagem de fundo. Se você quiser usar essa propriedade, você precisa digitar background hibadimage em vez disso , o URL, você precisa passar o caminho do arquivo de imagem , algo parecido Suponha que você tenha uma imagem chamada JPG de um ponto e precise colocar esse caminho de arquivo de imagem nessa seção de URL Então, vamos ver como podemos usá-lo na 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 de servidor ativo e já crio um documento HTML chamado index dot TML Então, primeiro, dentro dessa tag de estilo, vou estilizar a tag body. Então, eu sou um tipo de corpo. E dentro dessa etiqueta corporal, vou aplicar a imagem de fundo. E aqui, vou digitar o URL da imagem de fundo, slaver dot JPG Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele cobre todo o fundo da nossa página com esta imagem. Além disso, repete a imagem de fundo várias vezes para cobrir esse espaço. Esta é a primeira propriedade. Agora, vamos falar sobre a segunda propriedade, que é a repetição em segundo plano. probidade de repetição em segundo plano vem com seis valores, repita, sem repetição, repita X, repita Y, espaço e arredonde Repetir é o valor padrão. E se você não usar a repetição, não repetirá a imagem repetidamente. Além disso, você pode repetir sua imagem da direção XX e também da direção x. E se você usar o valor do espaço , ele fornecerá espaço entre essa imagem. E se você usar o valor arredondado , isso ampliará sua imagem. Todos esses são valores predefinidos propriedade de repetição em segundo plano Agora vamos ver como podemos aplicá-lo na prática. Então, primeiro, vou usar essa propriedade, repetição em segundo plano, repetição em segundo plano. E aqui vou aplicar sem repetir. Não, repita. Se eu definir esta página, como você pode ver, agora, nossa imagem não se repete. Agora apareceu apenas por uma vez. E agora eu quero repetir essa imagem da direção X. Então, aqui vou passar, repetir em segundo plano, repetir X. Se eu definir esse arquivo, você poderá ver o resultado Da mesma forma, se você quiser repetir a direção x da imagem, basta passar a repetição Y. Depois de definir esse arquivo, você poderá ver o resultado E agora vou usar o próximo valor, que é espaço. Espaço de repetição do plano de fundo. Se eu definir esse arquivo, você poderá ver o resultado. Se eu estender a largura do navegador, agora está claro para você. Agora você pode ver que ele fornece espaço entre a imagem. Se tivermos conteúdo ativo , ele também funcionará horizontal e verticalmente . Deixe-me provar isso. Então, para reduzir o tamanho do navegador, vou duplicar essa caixa cinco vezes e depois definir esse arquivo novamente. Agora você pode ver o resultado. Esse é o uso do valor do espaço. Agora, vou remover todos os condilos desnecessários. Mas é assim que o valor do espaço funciona na propriedade de repetição em segundo plano. O próximo valor que vou usar, que é linha. Então, aqui, vou substituir o espaço por Run. Após a etapa deste arquivo, você pode ver o resultado. Como eu disse, valor arredondado, amplie nossa imagem. Agora, vamos falar sobre o valor da posição de fundo. Todos esses são valores predefinidos da posição de fundo, aptp, centro do lábio, parte inferior do lábio, parte superior direita, centro direito, direita, inferior, centro central, centro, Além disso, você pode usar o valor percentual para a propriedade de posição de fundo do CSS. Com isso, você também pode passar valor do pixel na dicção YxS e na direção Xs Então, vamos ver como podemos usá-lo na prática. Então, primeiro, vou usar o valor de repetição em segundo plano, sem repetição. Não, repita. Em seguida, vou usar a propriedade de posição de fundo. Posição de fundo. Se eu definir esse arquivo, por padrão, ele virá na posição do laptop. Então, vou usar we top property, right top. Se eu definir esse arquivo, você poderá ver o resultado. Agora, ele move nossa imagem de fundo para a posição superior direita. Esta é a posição superior correta. Então eu vou usar o centro direito. Depois de configurar esse arquivo, aqui você pode ver o resultado. Não temos um upcontent. É por isso que ele sobe para cima. Então, vou duplicar essa seção 510 da caixa de linha. Se eu definir esse arquivo, agora você poderá ver o resultado. Acho que não é um bom exemplo. Então, vou remover todas as operações. Além disso, vou remover o conteúdo de dentro da encosta do pântano Em seguida, vou estilizar essa etapa do blog usando seu ID, caixa Hatag Então, por dentro, a caliva diz eu vou dizer isso com a altura de 100% Altura 800 pixels. E então eu vou adicionar uma borda. Borda de um pixel, sólida, e aquarela é y. Acima deste arquivo, como você pode ver, esse é o tamanho da nossa caixa E agora vou usar todas essas propriedades dentro dessa caixa D. E vou remover a tag body. Se eu definir esse arquivo, agora fica mais claro para você. Vamos aumentar a largura da borda. O pixel. Agora nossas fronteiras estão muito mais visíveis. Então, como você pode ver, aqui usamos o centro direito, e você pode ver a posição. Agora eu decido que vou mover nossa imagem de fundo para baixo. Para isso, precisamos usar o valor inferior direito. Da mesma forma, deixamos de lado o valor. Se você quiser movê-lo para baixo, você precisa substituir a direita pela esquerda E então você precisa definir esse arquivo. E se você quiser colocá-lo na posição central, nesse caso, você precisa substituir o valor inferior pelo centro. E se você usar o valor do centro da volta, poderá ver o resultado. Da mesma forma, temos o valor central. Se você quiser colocar esta imagem, no centro desse elemento profundo, basta passar pelo centro central. Se eu definir esse arquivo, você poderá ver o resultado. E se você quiser pressioná-lo no centro da parte superior, basta passar pelo topo central. Agora, ele moverá a posição superior do centro da imagem. Além disso, você pode movê-lo para o centro e para a posição inferior. Além disso, como eu disse, você pode usar o valor percentual para mover sua imagem de fundo. Então, vou duplicar esta seção e vou comentar a linha anterior E aqui eu quero mover nossa imagem usando o valor percentual. De XX é, eu quero movê-lo em 25%. E dos YXs eu vou transferi-lo em 50%. Se eu definir esse arquivo, você poderá ver a posição. De XXs, ele se move 25% e, de xs, ele se move 50% Além disso, você pode usar a unidade Pixel. Então, vou duplicar esta seção e comentar a linha anterior E desta vez eu vou usar o Pixel Unit. Do XXs eu quero movê-lo 300 pixels e do YxS eu quero movê-lo 200 Se eu definir esse arquivo, agora você pode ver a posição. De Xs, ele se moveu 300 pixels, e de xs, ele se moveu 200 pixels. Além disso, você pode usar várias imagens de fundo ao mesmo tempo. Para isso, basta usar entre essa onda. Novamente, vou digitar URL e, dentro da URL, precisamos fornecer outro caminho de arquivo. Então, se eu mostrar meu diretório de trabalho atual, lá você pode ver outra imagem, cara, ponto JPH, vou usar essa imagem Muitos pontos JPG. Por outro lado, precisamos fornecer um valor de repetição em segundo plano para essa imagem. Então, novamente, vou passar uma vírgula e aqui vou passar sem repetir Além disso, precisamos definir a posição. Então, vou usar vírgula e vou definir o canto inferior direito . Direita, embaixo. Se eu definir esse arquivo, aqui você pode ver a imagem. Basicamente, nossa imagem anterior se sobrepõe a essa É por isso que vou mudar o canto do laptop. Laptop. Então, como você pode ver, no mesmo elemento de banco de dados, aqui usamos fundos diferentes Além disso, podemos fornecer propriedades de repetição de fundo diferentes e propriedades de posição de fundo diferentes. Dessa forma, você pode usar várias imagens em segundo plano. E se você quiser usar a abreviatura das três propriedades, basta digitar background Antecedentes. E então, primeiro, você precisa fornecer o caminho do arquivo UR. Portanto, para copiar o caminho do arquivo , você precisa fornecer o valor da propriedade de repetição em segundo plano, que é sem repetição, sem repetição, e também é necessário definir a posição. E eu vou passar por ptaf. E eu vou comentar todas essas linhas anteriores. Se eu definir esse arquivo, se eu definir esse arquivo, você poderá ver o resultado. Além disso, se você quiser aplicar a cor de fundo, sim, você pode. Basta intercalar a cor de fundo do cabelo. Suponha que eu queira usar fundo dourado, dourado. E, em seguida, defina esse arquivo, você pode ver o resultado. Então, ao mesmo tempo, podemos usar a cor de fundo. Além disso, podemos usar imagens. Então, espero que agora esteja claro para você como podemos usar esses três antecedentes relacionados a propriedades. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado. 32. Tutorial de anexo de fundo CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre uma nova propriedade, que é a anexação em segundo plano. Temos dois anexos de fundo relacionados à propriedade, rolados e fixos. Rolagem é o valor padrão. E se você usar um valor fixo , ele corrigirá sua imagem de fundo e você poderá rolar suas tomadas, de outra forma contidas na imagem de fundo. Então, vamos ver como podemos usá-lo. 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 lip server, e eu já criei um documento STL, chamado index dot TML Então, como você pode ver neste STML, temos uma tag profunda com a caixa de nome de ID Além disso, você pode ver em nossa tag corporal que usamos um plano de fundo. Aqui usamos um plano de fundo, uma imagem de flor. E agora vou adicionar um texto fictício nesta caixa. Então, aqui eu quero digitar Lorem 1.000. Depois de pressionar Enter e definir esse arquivo, você poderá ver o resultado. Agora você pode ver que temos uma barra de rolagem no lado direito. E se eu reduzir a largura do navegador, deixe-me mostrar algo parecido. Agora você pode ver se eu rolo para baixo na minha barra de rolagem, também se move nossa imagem de fundo com a barra de rolagem. Para resolver esse problema, precisamos usar a propriedade de anexo em segundo plano. Então, vamos usar a propriedade. Então, em vez do Carirass vou usar o nome da propriedade, anexo de fundo e vou usar o campo fixo Se eu definir esse arquivo, novamente, volte ao navegador e role o conteúdo, desta vez você poderá ver o resultado diferente. Agora você pode ver, até rolar esse conteúdo, como você pode ver, a imagem de fundo fixou seu próprio lugar, nosso conteúdo se movendo para cima e para baixo E se você usar outro valor, que é rolagem, e definir esse arquivo, e se eu rolar minha página para baixo, agora você pode ver, novamente, nosso plano de fundo está se movendo com o conteúdo porque rolagem é o valor padrão. Para corrigir o plano de fundo, você precisa usar um valor fixo. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre o tamanho do plano de fundo. Então, obrigado por assistir a este vídeo. Fique ligado. 33. Tutorial de tamanho de fundo CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre a propriedade de tamanho do plano de fundo CSS. Todos esses são valores relacionados à propriedade do tamanho do plano de fundo. Nosso primeiro valor é Auto. O segundo valor é o comprimento. Aqui você pode fornecer o valor do pixel para o tamanho do seu plano de fundo. Então você pode usar porcentagens. Você pode definir o tamanho do plano de fundo com valor percentual. Então venha escondido, e o último está contido. Então, 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 de laboratório e já crio um documento SML chamado index dot ATM Então, como de costume, temos uma etiqueta profunda com caixa de identificação. Você pode ver a caixa, aqui definimos uma borda e um plano de fundo, e definimos nosso plano de fundo, sem repetir. E nossa posição de fundo é laptop. Por enquanto, vou remover a posição de fundo, laptop. Eu não preciso disso. Portanto, este é o nosso loop de imagem fundo sem a propriedade de tamanho do plano de fundo, mas eu quero reduzir o tamanho do plano de fundo. Para isso, vou usar a propriedade tamanho do plano de fundo, tamanho do plano de fundo e aqui vou usar o valor do pixel. Eu vou passar de 150 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Reduziu o tamanho da imagem de fundo. Como você pode ver, aqui passamos apenas um valor. Isso significa que, para ambos, o eixo aplicará 150 pixels. Mas se eu passar 200 para YxS e isso definir esse arquivo, agora você pode ver, agora ele aplica 150 pixels para Xxs e 200 pixels para Assim, você pode controlar o tamanho XX e o tamanho YX da imagem de fundo de forma diferente Como você pode ver, a altura de inclinação da nossa caixa é 800 pixels, então passe 800 Depois de definir esse arquivo, como você pode ver, aumentamos o tamanho do plano de fundo na direção YxS Mas desta vez, para excessos de direção, quero usar 100% porque, para essa largura de caixa, usamos 100% do tamanho Então, depois de definir esse arquivo, agora você pode ver o resultado. Agora está cobrindo nossas profundezas com essa imagem de fundo. Assim, você pode usar a unidade fixa e a unidade dinâmica juntas. Caso contrário, você também pode usar apenas uma porcentagem desse valor. Deixe-me mostrar algumas para duplicar esta linha e comentar a linha anterior Então, de ambas as direções, eu quero 100% de altura para esta imagem de fundo. Se eu definir esse arquivo, aqui você pode ver o resultado. Da mesma forma, se você quiser usar apenas 30%, defina esse arquivo. Como você pode ver o resultado. Então, é assim que você pode controlar o tamanho da imagem de fundo com esses valores. E agora vou usar um valor predefinido. Desta vez, vou usar um valor chamado cover. Se eu definir esse arquivo, você poderá ver o resultado. Se você usar o valor da capa, ele cobrirá um buraco profundo com essa imagem de fundo. Mas se você notar, você pode ver do lado direito, ele corta nossa imagem. Basicamente, esse valor redimensiona a imagem de fundo para cobrir todo o contêiner Mesmo que seja necessário esticar a imagem ou cortar um pouco de um lado da imagem. Agora, vamos falar sobre outro valor, que é conter. Vou duplicar esta seção e comentar a linha anterior, e vou substituir a capa por conter Antes de configurar esse arquivo, deixe-me dizer o que esse LE vai fazer. Basicamente, ele redimensionará a imagem de fundo para garantir que a imagem esteja totalmente visível Então, se eu definir esse arquivo, agora você pode ver que nossa imagem está completamente visível. E de acordo com a proporção da imagem, como você pode ver, nossa parte inferior não está coberta por essa imagem. Portanto, esse é o uso da propriedade de tamanho do plano de fundo. Espero que agora esteja claro para você. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre a origem do plano de fundo do CSS. Então, obrigado por assistir a este vídeo, State. 34. Tutorial de origem de fundo CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos a propriedade de origem do plano de fundo. Agora, vamos ver quais são os valores fornecidos pela origem do plano de fundo. Então, esses são todos os valores que podemos usar em nossa propriedade de origem de fundo, caixa de preenchimento, caixa de borda, caixa de contenção Agora você pode ter uma pergunta, o que isso significa? Então, vamos começar a prática e ver como podemos usá-la. Então, deixe-me explicar com a prática. Então, como você pode ver lado a lado, abro meu editor de código vis Studio e meu navegador usando a extensão if server. E aqui eu abro um documento estável chamado ponto de índice t. Então, se você observar nesta caixa D, definimos com 60% Além disso, definimos a altura, 800 pixels, com isso, o Hero usa preenchimento. Acolchoamento de 30 pixels em cada direção. Além disso, temos uma borda de três pixels, mas vou torná-la de 20 pixels. E eu vou configurar esse arquivo. E seu tamanho de fundo definido de 200 pixels também usa a propriedade de fundo como uma única linha. Então, vamos usar a propriedade de origem do plano de fundo. Origem do plano de fundo. Como eu disse, essa propriedade vem com três valores, preenchimento, caixa de borda e caixa de conteúdo A caixa de preenchimento é o testamento padrão. Se usarmos a caixa de preenchimento, nossa imagem de fundo começará a partir desse preenchimento Mas se usarmos caixa de conteúdo, caixa de conteúdo, até para configurar esse arquivo, agora você pode ver nossa imagem de fundo começar na área de conteúdo porque usamos esse valor. Então, se eu aumentar o tamanho do plano de fundo, 500 pixels e depois definir esse arquivo, você poderá ver o resultado. Nossa imagem de fundo começa na área de conteúdo. Basicamente, usando essa probidade, podemos declarar de onde quero começar nosso histórico Esse valor só funciona se não usarmos nenhum valor repetido. Mas se removermos o valor sem repetição e, em seguida, definirmos esse arquivo agora você poderá ver, novamente, que ele começa na organização real em vigor. Então, eu vou usar Val sem repetição. Agora, vamos pular para o próximo valor, que é caixa de preenchimento Caixa de preenchimento, se eu usar esse valor e definir esse arquivo, agora você poderá ver nossa imagem de fundo começar na área de preenchimento Mas se usarmos a caixa de borda e depois definirmos esse arquivo, agora você pode ver nossa imagem se mover levemente dentro da borda. Desta vez, nossa imagem de fundo começa na área da fronteira. Se eu usar o estilo de borda, pontilhe-o e defina esse arquivo, agora está mais claro para você. Assim, podemos começar nossa imagem de fundo a partir da área de preenchimento e também da área de conteúdo Então esse é o uso da propriedade de origem do plano de fundo. Espero que agora esteja claro para você. Obrigada Obrigado por assistir a este vídeo. 35. Tutorial de clipe de fundo CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre um novo plano de fundo relacionado a propriedades, que é o plano de fundo delas. Basicamente, essa propriedade está relacionada à cor de fundo. Essa propriedade é bastante semelhante à nossa propriedade anterior, background origi Agora, vamos falar sobre os valores dessa propriedade. Esses são todos os valores que vou usar com clipe de fundo, preenchimento, caixa de borda e caixa de conteúdo Então, 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 Live e já crio um documento de estimativa chamado index dot DML Como de costume, temos uma tag profunda com a caixa de nome de ID e, dentro dessa tag profunda, temos algum conteúdo de texto fictício E já estilizamos essa tag dip usando sua caixa de identificação, Heist, com 60% de altura, 300 pixels, e também forneço preenchimento, que é de 30 pixels, em cada direção Com isso, temos uma borda pontilhada. Então, vamos começar com o nome da propriedade, que é Background Tet claro em segundo plano. Aqui, o primeiro val que vou usar, que é a caixa de conteúdo. Contém caixa. Se eu definir esse arquivo, ele não funcionará porque não fornecemos nenhuma cor de fundo para essa caixa. Então, vou passar a cor de fundo branca. Então, se eu definir esse arquivo, agora você pode ver, agora você pode ver que ele fornece cor de fundo branca apenas para a área de conteúdo. E agora eu quero cobrir a área de preenchimento com essa cor de fundo Então só quero passar a caixa de preenchimento. Depois de definir esse arquivo, aqui você pode ver o resultado. Com isso, se você quiser cobrir a área da borda com a cor de fundo, para isso, basta passar a propriedade da caixa de borda. Caixa de borda. Se eu definir esse arquivo, você poderá ver o resultado. Então esse é um dos usos dessa propriedade. Agora, deixe-me mostrar outro exemplo. Também podemos usar essa propriedade com a imagem de fundo. Agora, vamos adicionar uma imagem de fundo à nossa tag de cabeçalho. Ajude a digitar a imagem de fundo. E vou usar o URL da imagem de fundo. Temos uma imagem de flor em nosso plano de fundo, ponto de flor JPG. Se eu definir esse arquivo, você poderá ver o resultado. É uma imagem de fundo de uma flor em nossa etiqueta auditiva. Agora vou usar o tamanho da fonte, tamanho da fonte do tipo e vou usar 150 pixels. Além disso, vou alterar o tipo de família de fontes da família de fontes e vou usar a fonte Impact, impact, somente o impacto. Não quero mais nada e vou configurar esse arquivo. Depois de configurar esse arquivo, ele fica assim. E se você não quiser repetir seu plano de fundo, basta não usar nenhum valor de repetição. Repetição em segundo plano, sem repetição. Por enquanto, eu gostaria de usar o plano de fundo repetido e, em seguida, vou usar a propriedade background lip. Clipe de fundo. E aqui eu vou passar uma mensagem de texto. E vou tornar minha cor transparente. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que mantém perfeitamente a imagem de fundo de acordo com o título de um texto. Se eu reduzir o tamanho, se eu fizer com que ele seja de 100 pixels e esse arquivo, agora você pode ver que ele parece muito melhor do que o anterior. Se eu deixar a cor de fundo do corpo branca, agora ela fica muito mais visível. E uma coisa que eu esqueci de falar sobre propriedade do clipe de fundo vem com outro valor, que é texto, e isso funcionará somente no texto Espero que agora esteja claro para você como podemos usar a propriedade do clipe de fundo. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 36. Tutorial de modos de cores CSS: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS, e essa é a parte mais importante deste tutorial. Neste tutorial, aprenderemos sobre os modos de cores. Aqui vamos aprender como podemos atribuir cor a um elemento usando um modo diferente? O primeiro modo que temos é o nome da cor. Você pode usar qualquer nome de cor, suponha vermelho, amarelo , azul, cinza escuro, o que quiser usar. Em seguida, temos o código hexadecial e o terceiro é o valor RGV Argv significa vermelho, verde e azul. Da mesma forma, temos o RGBA. A significa valor Alpha. Usando o valor A, podemos controlar a transparência dessa cor. E então temos o valor HSL. HSL significa saturação de matiz e luminosidade. E da mesma forma que damos valor, temos o HSLA. A significa valor Alpha. Agora vamos falar sobre o valor do nome da cor, como podemos usar o valor do nome da cor. Então, essas são todas as cores mais populares em CSS que usamos: vermelho, verde, azul, laranja, amarelo, rosa, mazina, marrom, tomate, Vallet, etc E há muitos nomes de cores, que eu não defino aqui. Você pode pesquisá-lo em sites. Você só precisa pesquisar websubclor em seu navegador e, em seguida, ele fornecerá todos os nomes das cores Agora, vamos falar sobre o modo hexadecimal. Esse é o exemplo do modo hexadecimal. Os códigos de cores hexadecimais começam com tem um caractere. Então precisamos passar para seis dz. Como você pode ver, aqui passamos um valor AF 0000. Este código de cores significa vermelho. E no próximo exemplo, usamos a hashtag 0000 AF, e esse código de cor significa azul Se você pesquisar a cor websp com código hexadecimal, poderá encontrar os códigos hexadecimais de qualquer Nosso próximo modo de cor é RGB. R significa vermelho, G significa verde e B significa azul. Primeiro, precisamos fornecer o valor vermelho e fornecer o valor 0-255, não menor que zero, não mais E é assim que podemos criar qualquer cor. E se eu passar o código de cor exato, ele retornará a cor vermelha porque nosso valor verde é zero. Além disso, nosso valor azul é zero. E para o valor vermelho, usamos o valor mais alto 255. É por isso que ele retornará a cor vermelha perfeita. Não se preocupe. Vou mostrar o exemplo com praticamente. O próximo valor é HSL. HSL significa H para matiz é para saturação, L para No Hue, aqui você pode passar um valor entre zero, dois, 360. Se você passar de zero, a cor vermelha retornará. Se você passar 120, retornará a cor verde e, no próximo valor, saturação significa intensidade Você pode controlar a intensidade da cor usando esse valor. Você pode controlar o brilho dessa cor, caso contrário, o embotamento dessa cor usando essa propriedade E nosso próximo valor, a luminosidade, você controla a luz dessa cor E aqui você pode passar um valor entre zero e cem por cento. Não se preocupe. Vou mostrar o exemplo com praticamente. E nossos dois últimos valores de cor são RGBA e HSLA. A significa valor Alpha. É opacidade média de qualquer cor. Aqui você pode passar o valor 0-1. Se você passar o valor zero , isso tornará seu objeto completamente transparente. E para fornecer cores completas, você precisa passar um valor. E se você quiser aplicar 50% de cor, caso contrário, 50% de transparência, precisará passar 0,5 Wow Então, sem perder tempo, vamos começar a prática e ver como podemos usar esses modos de cores Então, como de costume, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server. Então, primeiro, vou colorir nossa tag H one, cabeçalho 1. Então, aqui eu uso a propriedade de cor. Como você sabe, nosso primeiro modo de cor é o nome da cor. Então, aqui, eu vou fornecer uma cor. Por padrão, ele vem com a cor preta. Então eu quero a cor vermelha. Passe o nome da cor RED. Se você definir esse arquivo, poderá ver o vermelho. Não há nada de especial. E agora vou usar modo de cor diferente em nossa etapa de caixa. Então, aqui vou usar uma propriedade chamada cor de fundo. Então, vou descomentar essa linha e, a princípio, vou usar um nome de cor chamado azul E eu vou configurar esse arquivo. Como você pode ver, depois de passar o nome dessa cor, ela preenche nossa caixa com a cor azul. Se você quiser usar a cor dourada, ouro DOURADO, você pode ver o resultado. Ele fornece a cor dourada. Além disso, você pode pesquisar qualquer nome de cor. Vamos pesquisar um nome de cor, que começa com A. Aqui você pode ver um nome de cor verde forçado. Se eu usar essa cor e definir esse arquivo, você poderá ver o resultado. Aqui podemos usar centenas de nomes de cores. Agora, vamos falar sobre esse segundo modo, que é o código decimal xa Para usar o valor decimal xa, primeiro digite x que um código tem Então eu quero a cor azul. Para a cor azul, precisamos usar esse código de cor, 0000 se for Se eu usar essa cor, como você pode ver, como você pode ver desta vez, nossa caixa está cheia de cor azul. E se usarmos a cor vermelha, apenas a cor vermelha pura, você precisará passá-la começando com FF e depois 0000 Se eu definir esse arquivo, você poderá ver o resultado. E se eu usar azul e vermelho juntos, eu passaria FF 00 FF. E este é esse arquivo, ele vai retornar a cor rosa. Se você tem conhecimento sobre a roda de cores , pode entender por que ela está escrita em rosa. E se eu usar o valor FF para a cor verde, agora temos seis F em nosso valor hexadecimal Ele retornará a cor branca pura porque se misturarmos o RGV Advance com todo o potencial , ele retornará a cor branca Então, usando essa combinação, podemos usar várias cores. Nosso estúdio visual fornece a paleta de cores. Se eu arrastar o mouse e alterar o valor, como você pode ver, ele fornece muitas versões adicionais dessa cor. Suponha que eu queira usar a cor verde. Então, todas essas são variantes de cor verde com o valor hexadicial. Aqui você pode ver o valor Disial do cabeçalho . Se eu usar essa cor e definir esse arquivo, como você pode ver, aplique a cor em nossa caixa Agora vamos falar sobre o movimento RGV. Então, vou duplicar esta seção e comentar a anterior E desta vez, vou empatar o RGB. Então eu disse que a rodada usa primeiro a passagem do valor R R stas para vermelho. Então, vou usar 255. E para verde, eu vou passar de zero, e para azul, também, vou passar de zero. Se eu definir este arquivo, retornará a cor vermelha pura. Mas se eu usar o valor 255 para azul, novamente, ele retornará a cor rosa Da mesma forma, se eu passar 255 para verde, o valor retornará a cor branca Se eu abrir essa paleta de cores , fornecida pelo editor de código do Wiser Studio, aqui você poderá ver o valor do RGV Se eu arrastar o mouse e selecionar qualquer cor, caso contrário, qualquer variante de cor, aqui você pode ver o valor do RGV Se eu usar esse código e definir esse arquivo, como você pode ver, ele aplicará exatamente essa cor em nossa caixa. Agora vamos falar sobre outro modo de cores, que é o HSL. Vou duplicar esta seção e comentar a linha anterior, e vou substituir o RGB pela saturação e HSl Hue Para Hue, vou passar de 120. É para a cor verde e, para saturação, vou usar 50% Também para maior leveza, vou usar 50% de luz. Se eu definir esse arquivo, como você pode ver, ele retornará a cor verde. E se eu aumentar o valor, se eu aumentar o valor da saturação, então você pode ver que se eu chegar a 100%, ele retornará a cor verde pura Mas se eu aumentar o valor da luminosidade, suponha que eu o torne 100% , ele retornará a cor branca exata, porque se eu aumentar a luminosidade de qualquer cor, ela se transformará em Preciso usar abaixo de 100%. Suponha que eu use 90, 90%. Agora você pode ver, agora ele usava essa cor verde muito clara. Então, se eu mudar a cor usando essa paleta de cores, você pode ver o valor do HSL De a, você pode usar qualquer cor. Se você diminuir o valor de luminosidade dessa cor , ela fornecerá a versão mais escura dessa E agora eu vou passar 240, valor 240. Esta estrela para a variante de cor azul. Se eu subtrair esse arquivo, agora você pode ver ele fornece uma versão mais escura da cor azul E se eu conseguir chegar 100%. E esse é esse arquivo. Além disso, se eu fizer luz, 50%, aqui você pode ver o resultado. Agora ele fornece a cor azul exata. Agora, vamos falar sobre o valor Alpha. Vou usar o valor Alpha com o valor RGV. Então, duplique esta seção e comente a linha anterior, e aqui vou passar o RGBA Como você sabe, primeiro cabelo, você precisa passar o valor da cor vermelha. Para a cor vermelha, vou usar o vermelho puro 255 e, para o verde, vou usar zero Também para azul, vou usar zero. Mas para Alpha, por enquanto, vou usar um. Se eu definir esse arquivo, como você pode ver, ele fornece uma cor vermelha pura. Agora, vou anexar uma imagem de fundo à caixa D. Então, digite o URL da imagem de fundo e fornecerei uma imagem de outono ou flor. Se eu definir esse arquivo, você poderá ver o resultado. Desculpe, precisamos usar essa imagem de fundo em nossa tag de inicialização, não o limite do banco de dados. Então, vou cortar essa seção. E eu vou colá-lo dentro do guia corporal . Eu quero configurar esse arquivo. Agora, como você pode ver, não podemos ver nossa imagem de fundo por meio desta etapa do blog porque nosso DVD está cheio de vermelho e não é transparente Mas se eu quiser torná-lo completamente transparente, precisamos passar o valor zero como Alpha. Se eu fizer com que seja zero , defina esse arquivo. Agora você pode ver que nossa caixa é totalmente transparente. E se eu quiser diminuir a transferência C, precisamos aumentar o valor um por um. Primeiro, vou usar 0,1. E isso neste arquivo agora você pode ver, agora você pode ver que nossa caixa ainda está transparente, mas você pode ver a camada vermelha. E da mesma forma, se eu aumentar o valor, se eu fizer cinco, e isso neste arquivo, como você pode ver, agora a cor da nossa caixa é semitransparente Então é assim que você pode controlar a transparência. Se eu passar nove valores e isso neste arquivo, você pode ver o resultado. Da mesma forma, Hs A valoriza o trabalho. Então, vou duplicar essa linha e comentar a anterior E se eu passar Hs A, para você, vou usar 120 graus. E para saturação, vou usar 100%. Além disso, para lightnas, vou usar 50%. E para o Alpha Velu eu vou usar um. Se eu definir esse arquivo, como você pode ver, ele retornará a cor verde pura. Mas desta vez nossa caixa não é transparente. Se eu fizer zero e depois definir esse arquivo, agora você poderá vê-lo completamente transparente. E se eu aumentar um pouco o valor, 0,3 e depois definir esse arquivo, agora ele é semitransparente Então é assim que você pode controlar a transparência de qualquer cor. Então, isso é tudo para este tutorial. Espero que agora esteja claro para você como podemos usar modos diferentes em nossa propriedade colorida. E também aprendemos sobre transparência. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 37. Tutorial de fundo de gradiente de CSS: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre cores de gradiente Agora a questão é: o que é gradiente? Se você quiser aplicar mais de uma cor em um único elemento, nesse caso, precisará usar gradiente. Agora, vamos tentar falar sobre os diferentes tipos de gradientes CSS Em quantos estilos podemos aplicar cor gradiente. Podemos aplicar gradiente em estilo linear. Também podemos aplicar gradientes radiais, e também temos gradientes lineares repetidos e gradientes radiais repetidos lineares repetidos e gradientes Agora, primeiro, vamos tentar entender o que é gradiente linear Este é o exemplo do gradiente linear. O gradiente linear de cores flui de um lado para o outro. Pode fluir de cima para baixo, volta para a direita, da direita para a volta e de baixo para cima. Como você pode ver em nosso primeiro exemplo, na parte superior, Herou usa a cor verde escura, mas na parte inferior, Herrow usa a cor verde claro Da mesma forma, em nosso segundo exemplo, no lado esquerdo, usamos amarelo escuro e, no lado direito, usamos amarelo claro. Mas em nosso terceiro exemplo, no lado direito, usamos a cor azul escuro no lado esquerdo, usamos a cor azul claro. E em nosso último exemplo, na parte inferior, usamos a cor rosa escuro e, na parte superior, usamos a cor rosa claro. Além disso, você pode fornecer o valor da diagonal e do ângulo. Agora, vamos falar sobre gradiente radial. Este é o exemplo do gradiente radial. Esse estilo de gradiente não vai começar de nenhum lado. Pode ser iniciado do centro, também da parte inferior direita, da parte inferior lábio, do laptop, etc Se você observar o quarto exemplo, como você pode ver, nossas cores de gradiente começam no canto superior No canto superior do lábio, você pode ver a variante escura dessa cor. E no canto inferior direito, você pode ver a versão mais clara dessa cor. Então, sem perder seu tempo, vamos começar a prática e ver como podemos nos inscrever 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 lip server, e já criei um documento Sal chamado index dot a table. Então, como você pode notar, em nossa etiqueta corporal, temos uma etiqueta profunda com vidro chamada caixa. E eu estilizo essa etiqueta de mergulho em nossa seção de estilo. Aqui dizemos 90% de largura e dizemos 600 pixels de altura, e também definimos um sólido com corpo de pixels, e nossa cor de fundo é cinza Então, como você pode ver nesta caixa, aplicamos apenas uma cor, que é cinza, mas eu quero aplicar várias cores em nosso plano de fundo. Para isso, precisamos usar calvas de gradiente. Então, vou excluir essa linha e aplicar o plano de fundo do nome da propriedade. E eu quero aplicar um gradiente linear. Gradiente linear. Como eu disse, as cores com gradiente linear funcionam direcionalmente. Ele pode ser movido do colo para o lado direito, de cima para baixo e de baixo para cima, também do lado direito para o lado do lábio. Aqui você pode aplicar várias cores o quanto quiser, mas eu gostaria de começar com duas cores. Portanto, nossa primeira cor é vermelha e nossa segunda cor é amarela. Se eu definir esse arquivo, você poderá ver o resultado. Por padrão, ele se move de cima para baixo. Aplica a cor vermelha na parte superior e a cor amarela na parte inferior. E agora eu quero dar a direção. Eu quero direcioná-lo para o lado direito. Então, aqui, vou amarrar a posição inicial para passar a vírgula para a direita Você pode ver o resultado. Começa do lado do lábio e nós o direcionamos para o lado direito. É por isso que a cor U aparece no lado direito. E se eu passar Value para lap e definir esse arquivo. Agora você pode vê-lo enviado na cor vermelha no lado direito. Agora está se movendo da direita para o lado esquerdo. Além disso, você pode mudar a direção. Você pode colocá-lo no topo, caso contrário, no fundo. Mas agora vou mostrar como podemos espalhar a cor na posição diagonal? Suponha que eu queira definir a direção nesta esquina. Para isso, precisamos passar pelo canto inferior direito. Deixe-me te mostrar o canto inferior direito. Se eu definir esse arquivo, você poderá ver o ângulo. Agora, as cores começam nesse canto e se encaixam nesse canto. E é assim que você pode sentar no canto superior direito, no lábio superior, no lábio inferior, o que quiser. Além disso, você também pode passar por um ângulo específico. Então, vou duplicar essa linha e comentar a linha anterior E desta vez eu vou passar por um ângulo específico. Suponha que eu queira passar 45 D. Se eu definir esse arquivo, você poderá ver o resultado. Agora, nosso gradiente de cor começa no ângulo de 45 graus. Assim, você pode girar a cor do gradiente linear em qualquer direção e também pode passar o valor negativo Suponha que você passe de -45 graus. Se eu definir esse arquivo, você poderá ver o resultado. Agora diz a direção do gradiente linear. Com isso, como eu disse, podemos aplicar várias cores. Podemos aplicar mais de duas cores. Então, aqui vou aplicar outra cor chamada verde. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, você pode aplicar cores o quanto quiser. Se você quiser aplicar a cor azul com a cor verde, sim, basta passar o valor. Depois do coma, você precisa digitar azul. Depois de definir esse arquivo, você pode ver o resultado. E lembre-se de que você pode digitar qualquer tipo de valor de cor. Por enquanto, aqui usamos nomes de cores, mas você pode aplicar o valor hexa RV, caso contrário, cores transparentes Deixe-me mostrar o exemplo. Então, para duplicar essa linha e comentar a anterior. E desta vez, primeiro, vou remover esse valor de grau e, depois da cor vermelha, quero aplicar a cor no modo RGB, algum tipo RG BA Como você sabe, um valor significa Alpha. Para vermelho, vou digitar 255. Para verde, vou passar de zero, e para azul, vou passar de 255 novamente. E para o valor Alpha, vou usar 0,0 0,5. É meio semitransparente. Se eu definir esse arquivo, você poderá ver o resultado. Opa, há algum erro de digitação no meu código. Precisamos fechar o latão marrom. Se eu definir esse arquivo novamente, você poderá ver o resultado. Já aprendemos sobre os diferentes modos de cores em nosso tutorial anterior. Portanto, nossa cor é semitransparente. Mas se eu passar apenas zero, defina esse arquivo. Agora você pode ver que nossa cor é totalmente transparente. Agora você pode ver apenas a cor vermelha. Espero que agora esteja claro para você. Agora vamos falar sobre bezerros de gradiente linear repetidos. Deixe-me mostrar como podemos usá-lo. Então, vou datar esta seção e comentar esta linha e, primeiro, vou mudar o nome do valor. Para isso, precisamos digitar gradiente linear repetido, repetindo o gradiente linear, taxa, verde e taxa Eu quero configurar esse arquivo. Ao definir esse arquivo, você pode ver o resultado. Agora você pode ter uma pergunta: qual é a diferença entre esses dois? Você pode pensar que o processo de trabalho deles é o mesmo, mas não é. Mas aqui podemos usar o valor percentual com o c. Deixe-me mostrar. Suponha que, para o verde, eu aplique 10%. Também para o azul, vou aplicar 20%. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver que nosso gradiente de cor está se repetindo. Isso é chamado de gradiente linear repetido. Além disso, você pode fornecer orientação. Então aqui passaria 45 graus. Se eu definir esse arquivo, você poderá ver o resultado. Agora, vamos falar sobre o valor do gradiente radial. Vou duplicar esta seção e comentar a linha anterior, e vou remover essa linha E como valor, desta vez vou digitar gradiente radial E vou começar a comer duas cores: vermelho e amarelo. Se eu definir esse arquivo, você poderá ver a resina. Aqui, não fornecemos nenhuma direção e é a posição padrão. É por isso que os gradientes radiais começam do centro. Na posição central, ele começa com a cor vermelha e depois é pulverizado de amarelo nos cantos Além disso, você pode fornecer a cor que quiser. Suponha que, com vermelho amarelo, eu queira aplicar a cor verde. E defina esse arquivo, você pode ver o resultado. Além disso, você também pode definir a proporção dessa cor. Suponha que eu queira aplicar 5% de cor vermelha. E para amarelo, vou usar 15%. E para verde, você pode usar qualquer valor. Eu vou usar 60%. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, você pode definir a forma desse gradiente. Você pode usar elipse, também circular . Deixe-me te mostrar. Se eu definir a altura da minha caixa de 300 pixels e depois definir esse arquivo, agora você pode ver que nossa forma de gradiente é elipse É a forma padrão, mas eu não quero a forma de elipse. Eu quero um círculo. Para isso, aqui você precisa digitar círculo. Após a etapa deste arquivo, como você pode ver, agora ele aplica a forma de círculo. Além disso, você também pode definir o tamanho do gradiente. E para definir o tamanho, temos um total de quatro valores. Nosso primeiro valor é o canto mais distante, e aqui está o valor padrão Então temos o lado mais próximo. Além disso, temos o canto mais próximo e nosso último vale é o lado mais distante Então, vou aplicar um por um todos esses. Então, primeiro, vou duplicar essa linha e comentar a linha anterior E, primeiro, vou remover esse círculo de valores. O primeiro valor que vou usar, que é visão de perto isso, precisamos digitar uma palavra-chave, que é depois disso, precisamos fornecer a direção. Então, para orientação, vou passar 50% e 50%. Sou eu no centro. Se eu definir esse arquivo, você poderá ver o resultado. E agora vou mover esse círculo ao lado do lábio. Então, vou usar 20%. Se eu definir esse arquivo, você poderá ver o resultado. Nosso primeiro valor significa direção e nosso segundo valor significa direção Y xs. E se você quiser movê-lo verticalmente, precisará alterar o segundo valor Suponha que eu queira movê-lo 90%. Se eu definir esse arquivo, você poderá ver o resultado. Da esquerda, eu me movo 20%, e do topo, aqui eu me movo 90%. E, por enquanto, vou remover esse valor percentual dessa cor. Eu não quero isso. E eu vou configurar esse arquivo novamente. Agora vou aplicar o outro lado, que está longe desse sinal. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver que nossa cor pode se mover para este lado o máximo possível porque a que usamos para esse lado, mas a posição do centro ainda permanece a mesma, que é de 20% por 90%. Se eu fizer 50% por 50% a partir do xs e do xs, se eu fizer 50% por 50%, você pode ver o resultado. O próximo valor que temos é o canto mais distante. Se usarmos o canto mais distante e isso neste arquivo , nossa cor tentará alcançar o canto o máximo possível Depois de definir esse arquivo, você pode ver o resultado. Além disso, temos a esquina mais próxima. Então, se substituirmos o mais distante pelo mais próximo e eles definirem esse arquivo, desculpe, lado mais próximo, não canto Então, se eu deixar de lado, eles configuram esse arquivo, você pode ver o resultado. Se eu movê-lo de 20% por 90% e depois definir esse arquivo, é assim que ele funcionará no lado mais próximo. Mas se eu deixar o canto mais próximo e depois definir esse arquivo, agora a cor tentará chegar ao canto mais próximo. Mas se eu substituir o mais próximo mais distante e este for esse arquivo, você poderá ver o resultado Agora ele tenta chegar ao canto mais distante. É assim que esse gradiente funciona em conjunto, e precisamos fazer experiências com isso Agora vamos falar sobre o último valor, que é a repetição do gradiente radial. Então, novamente, vou duplicar esta seção e comentar na linha anterior Por enquanto, vou remover tudo isso e amarrar o nome do valor que repete gradiente radial e semigld Primeira cor que vou usar: vermelho. A segunda cor que vou usar é amarela. E a terceira cor, eu vou usar verde. Para verde, vou aplicar 15%, e para amarelo, aqui vou aplicar 10%. Se eu definir esse arquivo, você poderá ver o resultado. Então, isso é tudo para este tutorial. No próximo tutorial, falaremos sobre outra propriedade do gradiente, que é o gradiente cônico Então, obrigado por assistir a este vídeo. Fique ligado. 38. Tutorial de fundo de gradiente cônico de CSS: É bom ver vocês. Neste tutorial, falaremos sobre uma nova propriedade de gradiente, que é gradiente cônico Agora você pode descobrir que tipo de gradiente é esse? Um gradiente cônico é um gradiente com transição de cores, gire em torno Para criar um gradiente cônico, você deve definir pelo menos duas Agora, vamos definir o gradiente cônico. Então, vamos remover a cor de fundo, e aqui vou usar outra propriedade, que é a imagem de fundo. E eu vou aplicar gradiente cônico. Gradiente cônico. Então precisamos usar latão redondo. Primeiro, vou aplicar um gradiente cônico de três cores. No começo, vou passar pelo vermelho, e nossa segunda cor é amarela e a terceira cor é verde. Se eu definir esse arquivo, você poderá ver o resultado. Este é um gradiente cônico com três cores. Agora vou aplicar mais duas cores. Então, em seguida, vou aplicar azul e preto. Se eu subtrair esse arquivo, é assim que ele fica. Além disso, você também pode definir o grau. Além disso, você pode definir o grau para cada cor. Deixe-me te mostrar. Então, vou duplicar essa linha e comentar a linha anterior E vou apresentar duas cores. Suponha que, para a cor vermelha, eu queira aplicar 90 graus. Para a cor amarela, também quero aplicar 90 graus. E para a cor verde, vou aplicar 180 graus. Se eu subtrair esse arquivo, você poderá ver o resultado. Então, como você pode ver , combine em 360 graus. Agora, vamos criar um gráfico circular com isso. Se eu digitar raio da borda, raio da borda 50% e, em seguida, subtrair esse arquivo, ele se transformará em um Além disso, você também pode especificar o ângulo inicial dessa cor. Deixe-me te mostrar. Novamente, vou duplicar esta seção e comentar na linha anterior e, desta vez, vou usar apenas duas cores Além disso, vou revogar esses graus de valores. E eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, nossas cores começam nessa linha de estado, nesse ângulo. Mas podemos girar esse gradiente. Deixe-me te mostrar como. Agora, aqui, eu vou passar de 90 graus. Se eu definir esse arquivo, você poderá ver a resina. Nós o giramos em até 90 graus. Se eu passar 45, você pode ver o resultado. Agora você gira esse ângulo em 45 graus. Além disso, você também pode mudar essa posição central. Deixe-me te mostrar como. Então, novamente, vou duplicar esta seção e comentar a linha anterior E desta vez, eu vou mudar a posição. Então, aqui vamos digitar 60% de XXs e de YxS eu vou usar 45% Se eu definir esse arquivo, você poderá ver o resultado. Então é assim que podemos usar a cor do gradiente cônico. Além disso, ele vem com outro valor, que é o gradiente cônico repetido Então, novamente, vou duplicar essa linha e comentar a linha anterior E desta vez vou aplicar gradiente cônico repetido Acho que há um erro ortográfico ao repetir o gradiente cônico repetido, e vou aplicar em duas cores: vermelho, 10% e amarelo, 20% Se eu definir esse arquivo, você poderá ver o resultado. Portanto, essa é a nova propriedade de cor de gradiente em CSS. Se você quiser explorá-lo, então você precisa experimentar por si mesmo. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 39. Tutorial de opacidade em CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos sobre a nova propriedade do ACS chamada opacity Basicamente, usamos opacidade para tornar transparente qualquer elemento de ML. Então, vamos começar a prática e ver como podemos usá-la. Então, como você pode ver, lado a lado, abro meu código do Visual Studio e meu navegador usando a extensão lip server e já crio um documento HTML chamado index dot TML Se você escreveu, pode ver que temos uma etiqueta de mergulho e também definimos uma caixa de identificação E dentro dessa etiqueta de imersão, temos uma imagem, uma audição para marcar e um parágrafo E agora vou usar a propriedade Opacity em nossa tag de caixa. Então, tipo herói, Opacidade. E aqui precisamos passar o valor 0-1. Suponha que eu passe de 0,5. É meio semitransparente. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora, toda a nossa seção de imersão se torna semitransparente e, se você a tornar totalmente transparente, basta reduzir o valor, Caso contrário, zero diretamente. Se eu definir esses cinco, como você pode ver, agora nosso elemento dip não está visível Agora está completamente transparente. E se você quiser torná-lo totalmente visível, aqui você precisa passar por um. Se eu definir esse arquivo, esse é o motivo. Em nosso tutorial anterior, aprendemos sobre o valor alfa de transferência de cores RGVaClor Isso vai tornar nossas cores de fundo transparentes. Mas se usarmos a propriedade de opacidade, ela vai tornar transparente todo o conteúdo, todo o conteúdo dentro desse elemento de caixa Vai tornar transparente a imagem, o texto, tudo. Agora, se você quiser tornar essa imagem particularmente transparente, basta usar a propriedade de opacidade em sua tag de imagem Então, dentro da tag da imagem, vou digitar Opacity e quero torná-la semitransparente Então, eu vou passar 0,3. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, não há nada demais nessa propriedade, mas é uma propriedade muito útil. Então, isso é tudo para este tutorial. Obrigado por assistir a esta estátua em vídeo para o próximo tutorial 40. Mistura de fundo CSS e mistura mista: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado à propriedade CSS. E neste tutorial, aprenderemos sobre uma nova propriedade CSS, que é o modo de mesclagem em segundo plano. Agora a pergunta é: o que isso significa? Suponha que, ao mesmo tempo, você use a cor de fundo do gradiente, também a imagem de fundo, e agora decida mesclar os dois planos de fundo Você deseja misturar a imagem com a cor de fundo e pode criar efeitos diferentes com ela. E isso é possível por essa propriedade, o modo de mesclagem de fundo E todos esses são valores do modo de mesclagem de fundo CSS , borda colorida normal, matiz, múltiplo , cor, cor, tela, luz forte, saturação, luz suave sobreposta, Então, vamos parar com 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 estúdio de resultados e meu navegador usando a extensão lip server, e já crio um documento ML chamado index dot TML Se você notar, você pode ver que temos uma tag profunda neste documento. E aqui usamos gradiente de cor gradiente para essa etiqueta de imersão com a cor de fundo gradiente, e agora vou colocar uma imagem Para isso, vou usar a propriedade de imagem de fundo, imagem de traço de fundo Então, aqui, depois da vírgula, vou usar o URL Em seguida, dentro dos arredondamentos dentro dos códigos únicos, fornecerei o nome da imagem, ponto de flor JPG Se eu mostrar meu diretório de trabalho atual, você poderá ver o nome da imagem. Portanto, o aplicativo deve ser Capito. Depois de definir esse arquivo, você não pode ver a imagem porque antes de eu usar a imagem da flor, aqui usamos um fundo gradiente Agora, a imagem da flor é o fundo do PhaniGradient. Então, vou usar um plano de fundo de propriedade e depois o modo. Antecedentes. Modo sem graça O primeiro valor que vou usar, que é a tela. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver nossa imagem, tentar combinar com o fundo gradiente e ela retornará esse efeito se usarmos o modo de mesclagem de tela E agora vou usar outro valor, então vou duplicar essa linha e comentar a anterior, e aqui vou usar a sobreposição Se eu definir esse arquivo, você poderá ver o resultado. Novamente, vou duplicar essa linha e usar outro valor, que é múltiplo Se eu definir esse arquivo, você poderá ver o resultado. Em seguida, vou usar o escurecimento. Então, vou começar esta linha e comentar a anterior, e aqui vou substituir multiplicar por escurecer Depois de definir esse arquivo, você pode ver o resultado. Em seguida, vou usar o valor da cor. Então, vou comentar sobre essa linha e quero substituir o escuro pela cor Depois de definir esse arquivo, você pode ver o resultado. Toda vez, ele retornará um resultado diferente. E você deve tentar um por um todo esse valor para obter o resultado diferente. E lembre-se, normal é o valor padrão. Além disso, você pode usar várias imagens. Se você não quiser usar nenhum gradiente de cor e quiser mesclar entre duas imagens, sim, você pode Você só precisa passar duas imagens de fundo. E então você pode aplicar os mesmos modos de mesclagem, um por um. Agora vamos falar sobre outra propriedade do modo cego, que é o modo cego misto A diferença entre o modo misto e o modo mesclado está na propriedade de fundo e depois no modo Precisamos usar a cor de fundo e a propriedade simuladora inata da imagem propriedade simuladora inata Quero dizer que precisamos usar o fundo inato da cor gradiente da imagem e do plano de fundo inato Mas no modo misto, você pode usar uma das propriedades value inear Quero dizer, suponha que você use cor gradiente e queira misturar a cor de fundo com um texto Caso contrário, você pode misturar diferentes elementos DV de uma só vez. Agora, vamos falar sobre os valores. Todos esses são valores que podemos usar em ambientes de marcas mistas Então, sem perder seu tempo, vamos começar pela prática Por enquanto, vou duplicar essa linha e comentar a linha anterior E desta vez, vou usar apenas a imagem de fundo. Quero remover a cor do gradiente e vou definir esse arquivo Depois de configurar esse arquivo, você pode ver o resultado. Além disso, vou comentar essa linha. E agora vou colocar um texto nesse elemento profundo. Então, aqui, vou usar a tag H two, H two e, em vez do título da tag, vou digitar hello world. E eu vou configurar esse arquivo. E agora precisamos estilizar esse elemento H dois. Então, aqui, vou selecionar H dois e dentro do recesso de cor, primeira propriedade vou usar fundo, fundo e vou usar fundo vermelho Tarifa. Na segunda propriedade, vou usar texto, linha de texto, Salton, e vou definir o tamanho da fonte, tamanho da fonte, e quero torná-la de 55 pixels Depois de definir esse arquivo, você pode ver o resultado. Além disso, quero colocá-lo no meio, então vou adicionar uma margem superior. Mesclando a parte superior superior, quero atribuir 200 pixels Se eu definir esse arquivo, você poderá ver o resultado. E também, se você quiser alterar o estilo da fonte, sim, você pode. Basta marcar as antenas da família de fontes da família de fontes. E agora eu quero aplicar a propriedade do modo mix blend em nosso elemento HT. Modo de mistura. Primeiro eu vou usar, que é tela. Se eu definir esse arquivo, aqui você pode ver o resultado. Em seguida, vou aplicar outro valor, que é sobreposição Depois de configurar esse arquivo, você pode ver o resultado. Em seguida, vou usar outro valor. Então, vou comentar as duas linhas e, desta vez, aplicarei a diferença Se eu salvar esse arquivo, você poderá ver o resultado. Então, um por um, você pode testar todos os valores, e isso vai te dar um efeito diferente. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre a propriedade de exibição. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 41. Tutorial de exibição de CSS: Olá, pessoal, é bom ver vocês. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender uma nova propriedade chamada display. A propriedade display especifica o comportamento de exibição de um elemento. Deixe-me simplificar isso. A propriedade display no CSS especifica como um elemento estimado deve ser exibido na página da web. Ele define o tipo de caixa de renderização usada para o elemento, que afeta seu layout e posicionamento em relação a outros elementos Agora, vamos falar sobre os valores dessa propriedade. Todos esses são valores dessa propriedade. Aqui você pode ver, temos um total de 21 valores. E neste tutorial, abordarei esses cinco valores, não embutido, bloco embutido e último item E eu crio uma seção mais segura para esses quatro valores, linho GET, linho interior e Então não se preocupe com isso. Em nosso próximo tutorial, aprenderemos sobre isso e aprenderemos os valores relacionados à tabela em nossos próximos tutoriais 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 código do Visual Studio e meu navegador usando a extensão de servidor ativo e já crio um documento ML, chamado HTML de ponto de índice. Portanto, em nossa tag corporal, temos uma lista de itens indesejados e, nessa lista, temos um total de cinco itens da lista Então, vamos começar nossa jornada com disbidez. Então, dentro dessa tag de título, primeiro, vou selecionar H uma tag, H um. Então, dentro do Calvers, vou usar o dstablet Primeiro val que vou usar, que é freira. Basicamente, Nun Value costumava esconder o elemento NONE. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo ocultar a tag H one desta página. Se você usar nun value, ele removerá completamente o elemento Da mesma forma, se você quiser ocultar a lista abaixo, basta amarrar. Primeiro, você precisa selecionar esse elemento, L, L, depois dentro dos versos do carro Novamente, você precisa usar a função de exibição display none. Se eu definir esse arquivo, como você pode ver, não há uma lista nodal nesta página Agora está completamente em branco. Lembre-se de que esse elemento e tags ainda estão disponíveis em nossa página. Simplesmente sem propriedade, oculte esse elemento. Se eu selecionar este documento e pressionar Controlar você, você poderá ver o resultado. Aqui você pode ver todas as tags li. Além disso, você pode ver a tag do título. É um valor muito útil. Por que não usar Hort Efect, caso contrário, animação, eles nunca usam esse valor Então, por enquanto, vou remover esse valor nn. Eu não preciso disso. Agora vamos falar sobre nosso próximo valor, que está alinhado. Então, como você pode ver, há uma lista e temos que contar cinco itens da lista. E agora vou adicionar borda a todo esse item da lista para que você possa entender claramente todas as tags LI. Então, vou digitar AI e, dentro do Colver, diz: vou adicionar uma borda Limite um pixel e eu quero uma borda sólida. Com essa borda, a cor é vermelha. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver que os itens LI ocupam toda a largura desse elemento. Um item ocupa espaço completo. Para limpá-lo com mais facilidade, adicionarei o contorno em nossa tag UL Então, para copiar essa propriedade e valor, vou colá-los aqui, e desta vez, vou usar a cor preta entediada, preta E eu quero dois pixels entediados. Depois de definir esse arquivo, como você pode ver, a lista não ordenada, consuma toda a área, toda a área em branco Então, se eu especificar a largura dessa etiqueta maligna, suponha com 300 pixels. Em seguida, defina esse arquivo. Agora você pode ver que os itens da nossa lista consomem a largura exata desse contêiner, que é especificada em nossa seção de largura de 300 pixels. E agora eu quero mostrar todos os itens da lista lado a lado. Não quero mostrá-los um abaixo do outro, então precisamos exibir em linha todos os itens da LI. Então, dentro dos itens LI, vou usar a propriedade de exibição Exibir em linha. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo imprimir todo o item em uma única linha. É malvado lado a lado. Esse valor embutido é muito útil para propriedades relacionadas a texto, como extensão, itens de lista, etc Na maioria das vezes, usamos valor embutido e etiquetas de corte. Agora, vamos falar sobre o valor do blog. Para isso, vou usar uma etiqueta de extensão fictícia. Extensão. E dentro da tag span, vou digitar uma. Então eu dupliquei essa tag de extensão quatro vezes. E vou numerar essa tag de extensão. Dois. Cinco. Antes de definir esse arquivo, como você pode ver, não usamos a propriedade display para a tag span. Então, se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo imprimindo todos os itens um por um em uma única linha. Se eu usar o bloco de propriedades de exibição, basicamente, ele desempenhará o papel oposto de em linha. Deixe-me te mostrar. Então, se eu selecionar todas as etiquetas, girar e, em seguida, dentro da resolução do carro, vou usar o display disboty e vou usar o bloco de exibição Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode vê-lo imprimir todo o item em uma linha diferente. Se eu adicionar a borda, alguém para copiar essa linha e testá-la aqui e definir esse arquivo, você poderá ver o resultado. Agora, ele reproduz o valor oposto do rolamento da linha. Basicamente, esse terceiro valor de bloco converte o elemento span em um desenvolvimento. Agora, esses elementos funcionam como um desenvolvimento. Deixe-me te mostrar. Agora podemos atribuir W com 300 pixels. Depois de atribuir a erva daninha, você pode ver o resultado. Mas o que? Se eu descomentar essa linha, atribuída com, agora você pode ver que nossa propriedade With não funciona corretamente na tag span porque span é uma tag relacionada a texto Mas se você usar o bloco de propriedades de exibição , ele o converte e agora funciona como um desenvolvimento. Agora vamos falar sobre outra propriedade, que está no bloco de empréstimos Como você pode ver, todos os itens da lista estão alinhados em uma única linha porque ela usa a propriedade embutida, mas você deseja atribuir W a esse Se você usar o valor embutido, não poderá atribuir a esses itens Além disso, quero atribuir preenchimento e margem de todas as direções Se atribuirmos preenchimento ou margem, deixe-me mostrar algum tipo de preenchimento de 20 pixels Se eu definir esse arquivo, ele atribuirá preenchimento do lado esquerdo e do lado direito Ele não atribuirá preenchimento da parte superior e inferior. Se eu definir esse arquivo, você poderá ver o resultado. Se atribuirmos margem a esse item da lista, ele não funcionará de todas as direções. Vai funcionar apenas no lado esquerdo e direito. Deixe-me te mostrar. Margem Quero adicionar pH de margem de cinco pixels. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele fornece uma margem de cinco pixels do lado esquerdo e do lado direito, mas não fornece margem de cinco pixels da parte superior e inferior. Para resolver esse problema, temos o bloco embutido V. Quero imprimir todo o elemento em uma única linha Também quero atribuir margem. Não se preocupe com cinco. Se eu aumentar a largura do navegador, agora ele estará alinhado à linha única Mas se usarmos o valor de lob embutido, bloco embutido e, em seguida, esse arquivo, agora você pode ver que ele fornece margem de Agora você pode vê-lo imprimir todo o elemento em uma única linha. Como funciona como um elemento de bloco. É por isso que podemos atribuir com margem, etc. Tag Span, tag LI, tags CAT, todos esses são elementos relacionados ao texto. Por padrão, ele não funciona como um limite. É por isso que não podemos fornecer ervas daninhas, altura, margem, etc Mas podemos converter esse elemento como um dilmento usando propriedade interior, propriedade, propriedade de bloco embutido, etc Agora, vamos falar sobre a última propriedade deste tutorial, que é o item da lista. Como você pode ver, em nossa tag span, usamos o bloco de exibição. Mas, por enquanto, vou duplicar essa linha e comentar a linha anterior E se convertermos o item da lista, desvalorize Listá-lo e seguida, definir esse arquivo após definir esse arquivo, como você pode ver, não haverá alterações porque item da lista converte essas etiquetas de caneta em itens da lista Agora funciona como uma lista de itens da tag UL. É muito confuso. Deixe-me esclarecer o conceito com um exemplo. Então, aqui, vou criar uma tag de mergulho. BF, e eu vou atribuir o nome da classe dot, e o nome da classe é box E dentro dessa tag dip, vou pegar um total de dois parágrafos, P. E nessa tag de parágrafo, vou usar spentag span in paragraph, vou usar um total de três Então, vou duplicar o spentag duas vezes. Esse é o primeiro período. Esse é o segundo período. E esse é o intervalo número três. Em seguida, vou duplicar a seção inteira novamente. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. E agora vou selecionar toda a tag de parágrafo dentro dessa caixa. Então, dentro dessa etiqueta de bloco, primeiro, vou digitar dot BOX. Não se preocupe Aprenderemos sobre os avançados selecionados em nosso próximo tutorial. Por enquanto, vou mostrar a caixa de exemplo e quero selecionar todo o parágrafo dentro dessa caixa. Então dentro do Calibra diz, primeira propriedade, eu vou usar a cor de fundo, cor de fundo, eu vou usar azul Na próxima propriedade, vou usar um pouco de preenchimento, preenchimento, dez pixels Além disso, vou usar uma pequena margem. Margem, 20 pixels. Finalmente, vou usar essa propriedade. Exiba, e eu quero o menor item. Deseja definir esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Agora você pode vê-lo funcionar como uma lista de itens. Além disso, se eu comentar esta seção por enquanto, não preciso dessa seção e vou configurá-la novamente. Agora você pode ver o resultado real. Agora você pode vê-lo converter toda a tag do parágrafo em um item da lista. Além disso, você pode ver os pontos de madeira. Mas você percebe que aqui não usamos nenhuma tag LI ou UL, apenas para usar a tag de parágrafo e a tag span, mas elas ainda funcionam como itens de lista. Esse é o poder do nome do item da lista. E agora podemos aplicar todas as propriedades do item da lista nesses itens. Agora podemos usar a propriedade da imagem de estilo, posição do estilo, etc. Deixe-me te mostrar. Então, vou usar uma propriedade chamada ist tyle position. Posição do estilo da lista. Por padrão, nosso valor está externo, então vou usar o valor interno. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver os pontos dos itens da nossa lista serem movidos para dentro desse contêiner. Então esse é o poder desse valor. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado nos próximos tutoriais 42. Tutorial de visibilidade de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com uma nova tese relacionada ao tutorial. E neste tutorial, aprenderemos sobre uma nova propriedade, que é a visibilidade. Visibilidade muito semelhante à propriedade Disbnun. E todos esses são valores relacionados à propriedade de visibilidade, ao colapso oculto visível. Eu sei que você já está familiarizado com vídeos visíveis e ocultos, mas a propriedade de Cole funcionará com TVs Então, vamos começar a prática e ver como podemos usá-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 Lifesaver, e já criei um documento STL chamado Então, como você pode ver em nossa tag body, temos abaixo da lista e um parágrafo, e vou usar a propriedade de visibilidade em nossa tag de estilo. Então, em primeiro lugar, vou usar a tag UL para selecionar a tag UL. Então eu disse que a propriedade clrassF, vou usar display Agora você pode ter se perguntado por que eu uso a propriedade de exibição. Deixe-me te mostrar. Valor de exibição e exibição do hemótipo, freira Se eu usar o valor de exibição nun e depois definir esse arquivo, como você pode ver, oculto nossa tag UL Ele removeu completamente a etiqueta UL. É por isso que nossa tag de parágrafo muda para cima. Mas se eu comentar essa linha e usar visibilidade, visibilidade, ocultar e densificar esse arquivo. Agora você pode ver o diferente. Como você pode ver, ele oculta nossa tag UL, mas ainda temos a área exata nesta seção, e essa é a principal diferença entre exibição e propriedade de visibilidade. Basicamente, é muito útil com Hor Effect e animações. Agora, vamos falar sobre nosso último valor, que é lapis. Para isso, como eu disse, precisamos criar uma tabela. Então, aqui, dentro da tag body até a tag UL, vou criar uma tabela. Tabela. E dentro dessa tabela, vou criar dois dados de tabela, TD. Dentro da tabela, primeiro criarei PR de linhas agudas e eu criarei um total de duas linhas de tabela Então eu dupliquei essa seção e, dentro dessa linha da tabela, vou criar duas colunas, então digite TD E aqui eu vou digitar um. E eu vou criar outra tag TD. Então eu dupliquei essa seção e, neste dia, vou digitar dois Esta é a célula número um, e esta é a célula número dois. E vou duplicar toda essa seção e substituir uma por C e substituir duas por quatro E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver a tabela, mas não pode ver as células da tabela porque aqui não usamos nenhuma borda. Então, dentro da tag da tabela, vou usar borda. Border, e eu vou usar o border one. Se eu definir esse arquivo, você poderá ver o resultado. Agora, ele adiciona uma borda a essa tabela. Então, como você pode ver, temos um total duas linhas nesta tabela e duas colunas nesta tabela. E agora eu quero esconder o valor das quatro colunas desta tabela. Para isso, precisamos usar a propriedade de visibilidade. Eu quero esconder a quarta, então vou atribuir uma classe à classe T tag, e nossa classe deles é quatro. Em seguida, você define a etiqueta de estilo, tipo ramo, ponto quatro. Então eu disse, o Cairass, vou usar a visibilidade do nome da propriedade Visibilidade igual a oculta. Se eu definir esse arquivo, você poderá ver o resultado. Depois de definir esse arquivo, como você pode ver, ele ocultou com sucesso a célula número quatro dessa tabela. Então, esta é a maneira que você pode esconder a célula desta tabela. Mas o que? Se você precisar esconder uma linha desta tabela, deixe-me mostrar. Então, remova este exemplo ou alguns removam esse vidro. Então, nesta tag Tar, vou atribuir uma classe de classe X. Você pode atribuir qualquer nome de classe Então, vou selecionar essa classe dentro dessa tag de estilo, X dentro da visibilidade do Cliras Desta vez, vou usar esse valor Caps. E se eu definir esse arquivo, e se eu definir esse arquivo, ele não está funcionando porque aqui não usamos Tau Agora, se eu definir esse arquivo, você poderá ver o resultado. Ele atingiu com sucesso uma linha dessa tabela. Esse é o uso desse valor, colapso. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 43. Tutorial de design de layout básico de CSS Html: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, vamos criar esse design básico de layout. É um design de layout muito fácil e básico, e vou criar esse design usando as propriedades que aprendemos em nossos tutoriais anteriores Aqui, não vou usar nenhuma propriedade CSS avançada. Basicamente, neste tutorial, vou resumir todas as propriedades CSS que aprendemos em nossos tutoriais anteriores Como você pode ver, neste layout, vamos criar uma seção de título, uma seção de menu, uma seção de conteúdo, seção barra lateral e seção de rodapé Então, vamos começar a prática e ver como podemos usar as propriedades básicas do CSS para criar o layout. Como você pode ver, estamos no meu codeator do Visual Studio vamos tentar criar um layout DML básico Primeiro, vou pegar um elemento profundo dentro da tag body, D. Depois, dentro desse elemento de, vou pegar um total de cinco outros elementos div, Dev e vou duplicá-lo por Agora vou atribuir um ID ao nosso elemento Deb pai, Bev ID, e vou digitar Você pode atribuir qualquer nome. Depende de você. Além disso, vou atribuir um ID ao nosso primeiro elemento div, que está dentro do contêiner Caso contrário, você pode chamá-lo de rapper. Ele digitou o ID. Este elemento profundo é para a seção de cabeçalho, vou atribuir cabeçalho. E em nosso segundo elemento div, vou atribuir ID Min em nosso terceiro elemento div, vou atribuir conteúdo ID E em nosso quarto elemento, vou digitar a palavra lateral de ID. Esta é a seção de palavras secundárias em nosso quinto elemento profundo, aqui vou atribuir o rodapé de ID Então, dentro do elemento profundo do cabeçalho, aqui vou usar a tag header one, H one. Então eu vou digitar, você pode digitar tudo, então, por enquanto, vou digitar hello word. Caso contrário, você pode digitar o nome do seu próprio site. Por enquanto, vou digitar hello world. Em seguida, vou pular para a seção do menu, aqui vou usar a tag UL. Dentro da lista nodal, vou usar a tag LI, I. Também dentro da tag LI, vou usar a Cuttag Como você sabe, a etiqueta NCT é usada para vazamentos. Então digite A, e dentro dessa tag C, nosso primeiro nome de link é H. Então eu vou duplicar esta seção várias vezes e no nosso segundo link do menu, aqui vou digitar sobre nós Em nosso terceiro link, aqui vou digitar Galla e em nosso quarto item, vou passar contatos E então eu vou pular para a seção de conteúdo. Primeiro, dentro da seção de conteúdo, vou passar o título para a tag e ele digitar. Vou digitar o layout básico do design. Layout de design básico. Em seguida, vou digitar o parágrafo fictício. Então, aqui eu uso a tag P, e vou digitar uma palavra de 30. Além disso, vou duplicar esta seção. Aqui eu passo dois parágrafos. Em seguida, vou pular para a seção da barra lateral. Também nesta seção, quero imprimir, quero imprimir a opção de menu. Eu copio a tag UL com a tag LI. Em seguida, vou colá-lo na seção da barra lateral. Então, dentro da seção de rodapé, aqui eu quero digitar um DammiTextoWise, você pode Caso contrário, você pode digitar qualquer parágrafo, caso contrário, você pode fornecer algum vazamento Basicamente, vou digitar meu site. Nos direitos autorais. 2024. Portanto, esta é a estrutura básica de TMS do nosso site E se eu definir esse arquivo e mostrar meu navegador, deixe-me mostrar a você. Agora você pode ver que nosso site está assim, e isso parece muito chato e inútil E agora vamos começar a tese. Então, vamos começar esse estilo com a tag rapper. Desculpe, rapper Element. Então, vou usar a tag de estilo dentro do estilo de tag de cabeçalho. Então, dentro dessa etiqueta de estilo, vou selecionar o rapper Quero selecionar o elemento Dip pai e vou usar o invólucro de ID Então você copia o nome do ID e eu vou colar aqui. Então, dentro da cor res está, a primeira propriedade que vou usar borda de borda. Eu quero um pixel, borda sólida. Com isso, eu quero a cor preta boddblack. Vou configurar este arquivo E também vou atribuir maconha a esse recipiente de embalagem, maconha, e quero definir com 1.000 pixels É esse arquivo, se eu te mostrar meu navegador, deixe-me te mostrar, fica assim. Agora vou abrir meu site e meu editor lado a lado. Então, dentro do invólucro, também vou usar outra propriedade chamada cor de fundo Plano de fundo e eu quero definir a cor branca. Lembre-se de que, ao começar a estilizar sua página de tabela, você precisa começar com a tag body Em primeiro lugar, vou selecionar a tag do corpo. corpo, então dentro da culivra, diz: vou selecionar a propriedade da família da fonte, a família da fonte e vou usar a fonte aérea Verdadeiro. Eu quero configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Ele altera todas as fontes que estão dentro da etiqueta corporal e, em seguida, vou atribuir uma cor de fundo à nossa etiqueta corporal. Incrível tipo de fundo dentro da etiqueta corporal, depois vou usar, e vou usar fundo cinza, cinza. Eu quero configurar esse arquivo. E aqui você pode ver o resultado. E agora eu quero centralizar esse elemento profundo dentro desta página da web. Para isso, vou usar a propriedade de margem. Deixe-me te mostrar. Então, dentro do invólucro, vou digitar margem. De cima para baixo, quero margem de zero pixel, zero e, da esquerda e direita, quero margem automática. Automático. Vamos submeter o arquivo e voltar para o navegador Agora você pode ver o alinhamento bem-sucedido do contêiner principal no meio desta página Da esquerda e da direita, ele fornece espaço igual. E se você perceber que pode ver, há uma margem desse lado superior, mas não usamos nenhuma margem da parte superior e inferior. Para isso, insira sua tag body, precisamos usar outra propriedade. Então, insira a etiqueta corporal dela na margem de texto. Margem, zero. Além disso, precisamos tornar a propriedade de preenchimento zero E se eu definir esse arquivo e voltar ao navegador, você poderá ver o resultado. Agora não temos nenhum espaço na parte superior. E agora vamos projetar o layout por dentro. Então, vamos voltar ao código de estúdio do usuário. E agora vamos estilizar a seção do cabeçalho. Então, vou digitar o cabeçalho da hashtag. Então eu disse a calress que vou usar uma propriedade chamada background, e quero dizer que é cor carmesim Eu quero satisfazer o carmesim. Além disso, quero duplicar esta seção e desta vez, desta vez, quero definir a seção do menu Vou digitar o menu Hateg. Aqui vamos dizer que é cor de fundo, salmão claro E eu quero configurar esse arquivo. Além disso, vou usar a mesma cor em nossa seção de rodapé Então, eu dupliquei essa seção novamente e, desta vez, vou selecionar Rodapé Então copie o nome de ID Footer, e eu vou colá-lo aqui Colocamos o menu com rodapé. E para a barra lateral, vou usar azul claro para duplicar esta seção e substituir o menu pela Copie o nome do ID e eu vou substituir por Min. Quero definir esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, aqui você pode ver o resultado. Desculpe, para a seção da barra lateral, eu quero usar azul claro Então, vou substituir a cor salmão claro azul claro E eu vou configurar esse arquivo. Depois de configurar esse arquivo, o layout fica assim. Agora, primeiro, quero atribuir altura à nossa seção de cabeçalho. Então, vou digitar na seção do cabeçalho, propriedade de altura. Altura, e eu vou atribuir 100 pixels de altura, e vou definir esse arquivo. Vamos abrir o navegador e o editor lado a lado. Depois de fornecer 100 pixels de altura para a seção do cabeçalho, você pode ver o resultado. Agora vamos entrar na opção de menu. Aqui você pode ver o item do menu como um item da lista, e os itens estão abaixo um do outro, mas eu quero imprimir os itens do menu em linha Para isso, precisamos usar a propriedade display inline. Caso contrário, você pode usar a propriedade dp inline. Vamos selecionar todos os itens da lista, que estão dentro da tag do menu. Então, Herodotype, hashtag, menu dentro do menu, toda a tag LI e , dentro da cor, diz: vou usar display e vou usar inland Eu quero configurar esse arquivo. configurar esse arquivo, você pode ver o resultado. Agora ele imprime o valor lado a lado. Agora você pode vê-lo imprimindo os itens um ao lado do outro. Agora, esses itens estão organizados em uma linha. Além disso, funcionará como um elemento de bloco. Também quero dizer que funcionará como um elemento profundo. Agora, aqui podemos atribuir margem de preenchimento do que quisermos usar Agora vou segmentar toda a etiqueta Cut que está dentro do menu. Para isso, vou duplicar esta seção e selecionar toda a LI dentro da tag do menu, toda a tag LI e, dentro da tag LI, quero selecionar toda a tag NGA Então eu vou usar essa propriedade just block. Eu quero configurar esse arquivo. Agora vou fornecer um pouco de acolchoamento para esses tanques de ancoragem Para isso, vou usar a propriedade de preenchimento. Preenchendo da esquerda para a direita, vou passar cinco pixels e, de cima para baixo, vou passar dez pixels Se eu definir esse arquivo, você poderá ver o resultado. De cima para baixo, vou passar cinco pixels e da esquerda e direita, vou passar dez pixels. Depois de configurar esse arquivo, você pode ver o resultado. Acho que não é suficiente, então vou aumentar o valor. De cima para baixo, vou usar dez pixels e da esquerda e direita, vou usar 15 pixels. Depois de configurar esse arquivo, você pode ver o resultado. E agora precisamos fornecer largura a essa área de conteúdo. Além disso, precisamos fornecer peso a essa área lateral. Então, como você sabe, nossa largura total desse contínuo é de 1.000 pixels. Então, para a área de conteúdo, vou usar 800 pixels, e para a área da barra lateral, vou usar 200 pixels Então, primeiro, precisamos selecionar a área de conteúdo usando sua fonte DNameHzta Então, dentro dos calibres, vou atribuir o trigo. Resíduos, 800 pixels. Então, dentro da palavra secundária? Como eu vou atribuir molhado. Oeste de 200 pixels. Se eu definir esse arquivo, agora ele ficará assim, e agora precisamos mudar a seção da barra lateral no lado direito Para fazer isso, precisamos usar a propriedade float e já estamos familiarizados com isso Dentro da seção de conteúdo, vou digitar float, float, it Para a barra lateral, vou usar a propriedade float wt. Eu quero configurar esse arquivo. Depois de definir esse arquivo, ele ficará assim. Como você pode ver nosso conteúdo transbordar do contêiner, você também pode ver nossa tag com rodapé, nossa seção de rodapé abaixo da seção Agora, se você se lembra de nossos tutoriais de flutuação, aprenderemos sobre outra propriedade Em nossa barra lateral de elementos anterior, usamos a propriedade float. É por isso que publicará a rodapé abaixo da seção da barra lateral Agora, precisamos limpar a seção do rodapé. Basicamente, a propriedade clear controla o fluxo próximo ao elemento flutuante Se eu usar transparente, vou usar ambos transparentes. Se eu subtrair esse arquivo, você poderá ver o resultado. Já aprendemos sobre essa propriedade em nosso tutorial anterior, então não vou explicá-la em profundidade. Agora, vamos adicionar mais conteúdo às nossas tags de parágrafo. Dentro dessa tag de parágrafo, novamente, vou usar Lim. Lorem, desta vez eu quero adicionar 100 palavras, e eu vou fazer a mesma coisa para o nosso próximo parágrafo Limão 100. Ao configurar este arquivo, você pode ver o resultado. Basicamente, eu uso o conteúdo extra para sentir a área de conteúdo e, em seguida, vou atribuir pouco de preenchimento à nossa seção de rodapé Então, digite preenchimento e eu vou usar a extremidade curta. De cima para baixo, quero fornecer cinco pixels e da esquerda e direita, quero fornecer dez pixels. E da esquerda para a direita, vou fornecer dez pixels. Ao configurar este arquivo, você pode ver o resultado. E se você quiser mover esse conteúdo para o lado direito, basta usar a propriedade de alinhamento de texto Alinhamento do texto, à direita. E você precisa definir esse arquivo. Depois de configurar esse arquivo, você pode ver que ele moveu o conteúdo para o lado direito. Agora, se você notar que nossa seção da barra lateral não está muito boa Então, para isso, vou usar a propriedade de altura mínima. Além disso, vou usar a propriedade de altura mínima para a área de conteúdo. Então, vou usar a altura mínima e quero atribuir uma altura mínima de 500 pixels. Em seguida, copiarei esta seção e usarei o mesmo valor para a seção da barra lateral, altura mínima, 500 pixels Se eu definir esse arquivo, agora ele ficará muito bom. Agora você percebe que há uma lacuna entre a seção de cabeçalho e a seção negativa Essa lacuna é fornecida pela nossa etiqueta UL. lista ByefultUnwal fornece essa lacuna e agora precisamos direcionar a tag UL, que está dentro do que Aqui está o menu Hastag do tipo Hastag. Em seguida, ao definir o menu, vou direcionar a tag UL UL. Então, dentro dos cartuchos, precisamos tornar a propriedade de margem e a propriedade de preenchimento zero. Digitamos margem zero. Além disso, precisamos tornar o preenchimento zero. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, você pode ver a mesma coisa no título de uma tag. Também fornece uma pequena margem a partir do topo. Como precisamos torná-lo zero. Ele digita o cabeçalho da hastag, então eu vou selecionar a tag H one que está dentro da tag de cabeçalho Então, no interior, o fígado diz: vou digitar propriedade de margem, margem zero. Além disso, vou fazer com que o preenchimento seja zero. Se eu definir esse arquivo, você poderá ver o resultado. Agora eu quero remover todo o sublinhado das tags âncora, que estão dentro do menu Vou selecionar toda a tag âncora que está dentro do menu Para isso, precisamos usar a propriedade de decoração de texto, decoração de texto, nenhuma. E eu quero configurar esse arquivo. Também quero alterar a cor padrão dessa tag de âncora Por padrão, ele fornece a cor azul, mas eu quero a cor preta para essa fonte. Vou usar a propriedade de cor, cor, preto. Vou configurar esse arquivo. Além disso, precisamos fazer a mesma coisa opção do menu da barra lateral Aqui vou amarrar a hashtag, barra lateral e, dentro da barra lateral, quero segmentar todas elas e cortar a Então, dentro dos carnívoros que vou usar, fica a propriedade de decoração Precisa de decoração, aprenda também que vou usar cores. Cor, eu quero a cor preta. Vou configurar esse arquivo. E agora, se você notar, pode ver que não há nenhuma lacuna entre o conteúdo e a barra lateral do navegador Para isso, vou adicionar um pouco de preenchimento a esta seção de conteúdo Então, vamos entrar na seção de conteúdo e vou usar a propriedade de preenchimento Preenchimento, e vou atribuir um preenchimento de dez pixels de todas as direções Antes de configurar esse arquivo, vou te dizer uma coisa. Se eu definir esse arquivo, ele aumentará a largura real do contêiner. Porque, como eu disse, se adicionarmos preenchimento de todas as direções, caso contrário, lado a lado, isso aumentará a largura do elemento. Deixe-me mostrar. Depois de definir esse arquivo, você pode ver o resultado. Como você pode ver, ele oferece pouco espaço no lado esquerdo. Como oferece pouco espaço no lado direito , nossa estrutura de estimativa está completamente reorganizada Para resolver esse problema, precisamos usar a propriedade de dimensionamento de caixas, e já aprendemos sobre isso em nosso tutorial anterior Tamanho da caixa de gravata Hemo, e vou usar o valor da caixa de borda Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, como eu disse, vamos usar somente essas propriedades que aprendemos em nossos tutoriais anteriores É por isso que não vou usar nenhuma propriedade avançada para criar esse layout. Eu apenas uso apenas as propriedades básicas que aprendemos em nossos tutoriais anteriores Depois de usar o tamanho da caixa para puberdade, podemos adicionar o máximo de preenchimento Basicamente, reduza a área de conteúdo e adicione o preenchimento ao redor dela E agora eu gostaria de alterar a adição da cor de fundo. Aqui eu uso a cor preta, mas não quero a cor preta. Então, para isso, vou usar a cor branca. Vou configurar esse arquivo. Pois vou atribuir uma pequena margem a ele. Então, de cima para baixo, vou atribuir 40 pixels. E da direita, eu quero usar zero pixel. Da parte inferior também vou usar zero pixel e da esquerda, quero atribuir 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. E agora eu quero adicionar um pouco de preenchimento à seção do cabeçalho Aqui, vou digitar atribuir o preenchimento na parte superior Vou usar o preenchimento da propriedade. superior acolchoada, parte superior acolchoada, vou usar T pixel. Além disso, vou reduzir um pouco a altura. Aqui vou ultrapassar a altura de 80 pixels e vou definir esta. Eu apenas tento corrigir o alinhamento vertical etiqueta do cabeçalho Então, vou aumentar o vedo superior acolchoado. Vou fazer com que seja de 30 pixels. Em seguida, defina esse arquivo novamente. Acho que 40 é perfeito. Depois de estudar esse arquivo, você pode ver o resultado. Sim, 40 é perfeito. Aqui, eu apenas tentei criar um layout básico com essa propriedade que aprendemos em nosso tutorial anterior. Não usamos nenhuma propriedade CSS avançada e esse design não é responsivo É apenas um design de revestimento. Aqui, não aplicamos nenhuma propriedade de posição. Além disso, não aplicamos nenhuma animação, efeitos de foco, etc porque esse é o fim da seção CSS básica No próximo tutorial, entraremos na seção adversa. Vamos aprender sobre posição, índice Z, consultas de mídia, etc Vamos aprender sobre unidades, variáveis, funções e muito mais. 44. Tutorial de posição de CSS (absoluto, relativo, fixo, pegajoso) 90p aprimorado: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender sobre uma nova propriedade, que é a posição CSS. Basicamente, essa propriedade vem com cinco valores, estático, relativo , absoluto, fixo e fixo. Para usar o valor corretamente, precisamos usar algumas propriedades de ajuda Todas essas são propriedades auxiliares que podemos usar com propriedades de posição P direito, superior e inferior. Não podemos usar lept e right juntos, precisamos usar uma propriedade entre eles. Da mesma forma, de cima para baixo, precisamos usar uma propriedade e, para entender a volta à direita e a posição superior e inferior, precisamos entender Xs Xxs e YxS Suponha que você queira mover o elemento para o lado direito. Para isso, você precisa usar Xs, Xs positivos e se quiser movê-lo para o lado esquerdo, nesse caso, você precisa passar valores negativos Da mesma forma, se você fornecer um valor positivo de Y xs , ele moverá o elemento para baixo e, se você fornecer um valor negativo , ele moverá o elemento para Sem falar muito, vamos começar a prática e ver como podemos fazer isso. 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. Como você pode ver em nosso documento de estimativa, temos uma tag de título e duas tags de parágrafo. E entre essas tags de dois parágrafos, temos uma tag profunda com gosto de ID e, em nossa seção de estilo, já estilizamos esse elemento profundo. Vamos fazer experiências com a propriedade de posição. Primeiro, vou usar valor relativo, posição relativa. Posicione, relacione. Basicamente, aqui eu uso apenas uma propriedade, posição relativa, mas não uso o valor superior da volta inferior. Se eu definir esse arquivo, isso não mudará nada. Deixe-me te mostrar. Depois de separar esse arquivo, como você pode ver, não há alterações. Como eu disse anteriormente, para usar a propriedade de posição, precisamos usar outra propriedade de suporte Vou usar a propriedade P. P e do colo, vou movê-lo em cem pixels. Se eu definir esse arquivo, agora você poderá ver o resultado. Ele move nosso elemento 100 pixels do lado esquerdo. Além disso, quero movê-lo do lado superior. Então, vou usar a propriedade superior, os cem pixels superiores. Se eu definir esse arquivo novamente, você poderá ver o resultado. Ele moveu o elemento, 100 pixels do lado superior. posição relativa move o elemento da posição exata do elemento. Se eu passar -100 pixels do topo definir esse arquivo, agora você poderá ver o resultado É assim que a posição relativa funciona. Agora, vamos falar sobre nossa próxima propriedade, que é absoluta. No começo, vou comentar a linha e vou mudar a posição. Em relação ao absoluto. Se eu definir esse arquivo, agora você poderá ver o resultado. Em CSS, o posicionamento absoluto é uma técnica de layout que permite controlar com precisão a posição de um elemento em relação aos ancestrais que o contêm ou a posição mais próxima. Como você pode ver, não usamos as propriedades lit e top, apenas para usar a posição absoluta. Nosso segundo parágrafo, por padrão, está atrás desse elemento. Agora vou usar a propriedade superior, a propriedade superior e a propriedade labial. Quero atribuir ao tipo dela, do topo, 100 pixels. Se eu definir esse arquivo, ele funcionará acordo com a posição absoluta da tela. Essa é a posição absoluta da nossa janela, então ela moverá o elemento a 100 pixels dessa posição. Se eu definir esse arquivo, você poderá ver o resultado. Se eu fizer dez pixels e definir esse arquivo, agora você pode ver que agora está mais claro para você. Basicamente, funciona de acordo com o elemento Tarrant. Da mesma forma, se eu tentar movê-lo para o lado p, para isso, vou usar o valor p, volta de 20 pixels. Desculpe, 20 pixels, não 200 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Como eu disse, essa posição funciona de acordo com o elemento pai. E, como você pode ver, no nosso caso, nosso elemento pai é a tag body. Só precisa se lembrar de uma coisa. posição relativa funciona de acordo com a posição exata, mas a posição absoluta funciona de acordo com o elemento pai. Agora, vamos falar sobre nosso próximo valor, que é a posição fixa. Mas antes de usar esse valor, vou duplicar essa tag de parágrafo várias vezes E eu vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver a barra de rolagem. Se eu rolar essa barra de rolagem para baixo, como você pode ver, ela move nosso elemento profundo com essa barra de rolagem. Mas se eu usar a posição de valor fixo fixa e, em seguida, definir esse arquivo, agora você pode ver que não há alterações. Mas se eu rolar minha página para baixo, como você pode ver, nosso elemento é fixado em sua posição. Nosso elemento não está se movendo com essa barra de rolagem. Então esse é o uso do valor fixo. Mas se você usar absoluto, caso contrário relativo , você moverá o elemento com o pergaminho. Agora, vamos falar sobre o próximo valor, que é permanente. Mas antes, novamente, vou duplicar esse parágrafo várias vezes e configurar esse arquivo Então, aqui vou usar o controle de posição e vou definir esse arquivo Depois de configurar esse arquivo, você pode ver o resultado. Agora você pode ver antes do elemento, temos que dizer quatro parágrafos. Eu também uso a propriedade de iluminação superior Por enquanto, vou mudar os valores. De cima, quero colar 50 pixels e, do colo , também vou colar 50 pixels e vou configurar esse arquivo. Depois de configurar esse arquivo, se eu rolar para baixo nesta página, como você pode ver, os elementos ficam na posição exata. O que mencionamos em nossa seção de estilo, top 50 e volta 50. Se eu tentar rolar minha página para baixo, como você pode ver, ela não está se movendo. A propriedade position sticky em CSS é uma posição híbrida de relativa e posição fixa Até obter a posição de rolagem especificada, o que você menciona usando as propriedades top e lip, ela se comporta como uma posição relativa e, após atingir a posição de rolagem , ela se torna fixa Esse comportamento é particularmente útil para criar elementos como cabeçalho, barra lateral e rodapé Desculpe, não o rodapé. Nós não o usamos como rodapé. Basicamente, nós o usamos para cabeçalho e barra lateral. Sempre que os usuários rolam a página para baixo, às vezes precisamos colocar a barra lateral e a seção do cabeçalho em nossa área de ponto de vista É por isso que precisamos usar a posição adesiva. Agora vou mostrar como podemos usar o valor absoluto e o valor relativo juntos. Primeiro, vou limpar todos os elementos da nossa tag corporal. Vou remover tudo isso. Então, por enquanto, nosso corpo está completamente preto. Primeiro, dentro da tag body, vou atribuir a tag de parágrafo usando P e quero um texto fictício Menor 200. Depois desse parágrafo, vou criar uma tag profunda e quero atribuir uma caixa de nome de classe. Então, dentro dessa tag profunda, aqui vou criar uma tag profunda, caixa de pontos B dois. E agora, primeiro, vou estilizar esse elemento box def É essa etiqueta de estilo, vou digitar caixa de pontos. Então, dentro das cores, primeiro, vou atribuir a largura com 500 pixels. E também, vou atribuir altura, altura de 500 pixels. Em seguida, vou atribuir a cor de fundo. Antecedentes. Amarelo, caso contrário, cor vermelha. Vou configurar esse arquivo. Então, para definir esse arquivo, como você pode ver, esse é nosso elemento profundo, e é um elemento parêntico-profundo Em seguida, vou estilizar o elemento da caixa dois, tot, caixa dois Então eu defino os carros. Primeira propriedade: vou usar W W 100 pixels. Em seguida, vou usar altura, altura de 100 pixels e a cor de fundo é rosa. Mas vou usar a propriedade de posição, posição absoluta. E do topo, eu quero 50 pixels. E do laboratório, eu quero 50 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Como eu disse anteriormente, posicionamento absoluto funciona de acordo com o elemento de imersão pai, caso contrário, o elemento pai, mas você pode ver que não está funcionando de acordo com ele Para resolver esse problema, precisamos usar a propriedade position em nosso elemento box dip. Vou digitar a posição e precisamos tornar nossa posição relativa. Se eu definir esse arquivo, agora ele funcionará de acordo com o elemento pai exato. Agora, se eu mover nosso elemento parente para a esquerda e para a direita, ele moverá o elemento filho de acordo com o elemento parentb . Deixe-me te mostrar. Do topo, quero movê-lo de 100 pixels. E do laboratório, eu quero movê-lo em 200 pixels. Depois de definir esse arquivo, você pode ver o resultado. Então, essa é a posição relativa e a posição absoluta trabalhando juntas. Lembre-se de que o posicionamento absoluto funciona acordo com o elemento relativo imediato. Então, espero que agora esteja claro para você como o posicionamento funciona em CSS. Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 45. CSS Zindex: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre o índice CSS Z. Uma propriedade de índice depende da propriedade de posição CSS. E se você não usar a propriedade de posição, não poderá usar a propriedade de índice Z. Então, vamos tentar entender como podemos usar essa propriedade. Eu sei que você já está familiarizado com Xxs e YxS. direção vertical significa xs e direção horizontal significa eixo X. Agora, vamos tentar entender o que é o índice Z. Sem Xxs e Yaxs, temos outro eixo, conhecido como Zixis É muito semelhante à ordem de pilha. Vamos entender isso com essa imagem. Como você pode ver, temos três elementos div, Di A, B e C. É principal, primeiro criamos Di A, depois criamos D B e por último criamos profundidade C. É por isso que segue esta ordem, B está no topo do elemento A e C está no topo do elemento B. E usando a propriedade de posição, nós a organizamos dessa maneira, e agora eu quero trazer B acima de B. Caso contrário, se eu quiser trazê-la acima do, nesse caso, precisamos usar o índice Z. Em uma frase, ele pode controlar a ordem de empilhamento do elemento posicionado em uma página Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la na 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 lip server e já crio um documento HTML chamado index dot HTML Então, em nossa tag corporal, temos um total de três dim Db A, D B e C profundo C. Além disso, aqui atribuímos ID, caixa um, caixa dois e caixa três E se eu mostrar minha seção de estilo, como você pode ver, em nossa tag body, usamos a fonte Aerial Em seguida, estilizamos o elemento DB. Ouça, atribuímos 200 pixels de largura e 200 pixels de altura e definimos a posição absoluta. Em seguida, atribuímos uma borda, uma borda sólida. Então, uma por uma, projetamos as caixas. Como você pode ver, em nossas caixas, Harrow usa a cor verde escura Além disso, definimos a posição a partir da parte superior e da tampa. De cima, atribuímos 100 pixels e de p atribuímos 50 pixels. Em seguida, em nossa caixa dois, do topo, atribuímos 150 pixels e, do laboratório, atribuímos 100 pixels. E em nossa caixa dois, atribuímos 200 pixels do topo e 150 pixels do leito. Então, basicamente, eu quero dizer que dizemos três posições diferentes para os três elementos diferentes. E, como eu disse, precisamos usar a propriedade de posição para usar o índice Z. É por isso que, para todo o nosso D, usamos a posição absoluta. E agora vou usar a propriedade de índice Z. Suponha que eu queira mover B acima do. Para isso, em nosso quadro dois, vou usar a propriedade do índice Z, o índice Z e, aqui, vou passar um. Por padrão, o valor do índice Z é automático. E se eu definir esse arquivo, como você pode ver, ele move o elemento B acima do R. Da mesma forma, se você quiser mostrar A acima do, para isso, você precisa usar o mesmo índice Z. Então, vou copiar esse índice Z e removê-lo. Em seguida, insira a caixa 1, vou colar aqui. Se eu definir esse arquivo, você poderá ver o resultado. Agora ele move um elemento acima do R. Além disso, você também pode usar o valor do índice Z em menos Deixe-me te mostrar. Para isso, vou comentar esta linha. Então, na nossa caixa dois, novamente, vou usar o índice Z. O índice menos um. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver, agora ele se moveu de forma elementar atrás do A e C. Agora eu vou criar outra caixa Então, vou fazer com que obtenhamos esta seção e C com B. E também quero mudar o ID, ligar para a caixa quatro. Além disso, precisamos fazer o CSS desse elemento, então vou duplicar esta seção e substituir três por quatro, e precisamos posicioná-lo, então vou alterar o valor do rótulo superior Aqui eu vou passar 250, e também vou aumentar o valor em camadas, que é 200 E então eu vou mudar a cor e a cor laranja do conjunto dela. E agora eu vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Agora vou comentar o índice Z da caixa dois. Se eu definir esse arquivo, você poderá ver essa ordem de pilha. E agora eu quero colocar A acima do. Então, em nossa caixa um, vou usar o Zain dx one e vou definir esse arquivo Depois de definir esse arquivo, você pode ver o resultado. E agora eu quero colocar B acima do A. Para isso, precisamos usar a propriedade de índice Z. Valor do índice Z dois. Se eu passar o valor dois do índice Z e definir esse arquivo, você poderá ver o resultado. Da mesma forma que eu quero colocar C acima de A e B. Para isso, novamente, vou usar a propriedade do índice Z e vou passar o valor três do índice Z. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, quero dobrar a caixa quatro acima do A B C. Então, aqui vou passar o vídeo quatro do índice Z. Se eu subtrair esse arquivo, você poderá ver o resultado. Então, é assim que você pode organizar o item usando a propriedade de índice Z. Espero que agora esteja claro para você como o índice Z funciona. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 46. Tutorial de consultas de mídia CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos uma nova propriedade, que é a consulta de mídia. Basicamente, a consulta de mídia é usada para criar diferentes SS para plataformas diferentes. E se eu falar sobre os tipos de mídia, esses são todos tipos de mídia. E aqui temos quatro tipos de mídia, todos impressos, tela e voz, e todos os tipos funcionarão para tudo, funcionarão juntos para impressão, tela e fala. Suponha que alguém tenha tentado imprimir seu site. E usando a mídia do tipo de impressão, você pode controlar o estilo de impressão da sua impressão. Quero dizer que você pode criar CSS separadamente para fins específicos de impressão, e o tipo de mídia mais comumente usado é a tela. Tela mínima, tela do celular, tela do computador, tela do tablet. Todas essas telas de dispositivos vêm com resoluções diferentes. E para criar nossa página da web perfeitamente responsiva, precisamos seguir tudo isso Quero dizer que precisamos criar um atrevimento diferente para a tela do celular, tela do laptop, caso contrário, tela do tablet E o último é o discurso do tipo mídia. Pessoas cegas não conseguem ler nossas páginas da web. Então, eles usam leitores de tela e mídia de voz para ler o texto em seu site. Especialmente neste tutorial, vou me concentrar no tipo de mídia de tela porque o tipo de tela é o mais popular e útil. Agora, vamos tentar entender o que é tela. Aqui você pode ver o navegador, e chamamos o navegador com visor. Para sites de janelas de visualização diferentes, digitamos diferenciais. Suponha que seja um visor e sua resolução seja 1920. Da mesma forma, temos outro visor 14 40, 13 66, 1024 e 700-900 Esses são nossos tamanhos de visor comumente usados para consultas de mídia. 700-900, usamos esse pote para tela móvel. Além disso, temos resolução para telefones de baixo custo, que está entre 320 e 480. Para criar sua página da web perfeitamente responsiva, precisamos digitar sass diferente para toda essa resolução Agora vamos ver como podemos usar a tela de mídia. Primeiro, você precisa digitar na taxa de mídia. Então, como você sabe, vamos usar para tela. Então, aqui precisa digitar a tela. Então, aqui definimos a propriedade de largura máxima de 900 pixels. Na consulta de mídia, aqui executamos o condicionamento usando o Qor. O primeiro é a tela e o segundo é o valor que fornecemos nas corridas da rodada D. Ele passa pela condição em que a largura da tela está abaixo 900 pixels , porque aqui dizemos largura máxima de 900 pixels. 900 pixels é o ponto de interrupção da nossa tela. E podemos criar pontos de interrupção diferentes para diferentes resoluções para celular, laptop e tag Agora vamos ver como podemos digitar CSS dentro dessa consulta de mídia. Se nossa condição for verdadeira, se nossa resolução for inferior a 900 pixels, ela definirá a classe do contêiner com 50%. Agora vamos ver, sem essa condição de largura máxima, quantas opções temos. Então, todas essas são condições que podemos usar com a consulta de mídia. Semelhante à largura máxima, temos altura mínima, largura mínima, orientação, digitalização, todos os pinos Além disso, você também pode usar largura máxima e a largura mínima juntas. E para usar o avanço de várias condições, ele também suporta operadores lógicos e não comigo. Suponha que você queira dizer CSS 600-900. Nesse caso, você pode usar um operador. Além disso, você pode usar o operador not, se não quiser atingir ambas as condições. Também suporta orientação, resolução. Além disso, você pode segmentar usando cores, etc. Então, sem perder seu tempo importante, vamos começar a prática e ver como podemos usá-la Então, como você pode ver, lado a lado, abri meu editor de código do Serve Studio e meu navegador usando a extensão Lifesaver, e já criei um documento estim chamado index Portanto, em nosso documento de estimativa, e dentro da etiqueta corporal, apenas para digitar uma etiqueta auditiva, diz que são tutoriais de consulta de mídia E aqui dissemos que a cor de fundo do corpo era branca e a antena Heldica sensorial da família distante Em primeiro lugar, vou mostrar uma demonstração básica de como a tela de mídia funciona. Mas antes, em nosso navegador, vou abrir a seção de inspeção e selecionar essa opção Depois de selecionar essa opção, como você pode ver, ela fornece a largura da janela de visualização nesta seção R: fornece altura. Então, a partir daqui, podemos controlar a largura da janela de visualização Por enquanto, a largura do nosso visor é de resolução 898. Se você notar, você pode ver que a cor de fundo do nosso corpo é branca. Agora, quero definir cores de fundo diferentes em resoluções diferentes. Para isso, precisamos usar a tela de mídia. Então, aqui estão os tipos na tela de mídia d. Dentro das prensas redondas, precisamos definir uma condição. E aqui, vou usar uma propriedade chamada vento máximo para definir a condição. Largura máxima máxima, dois pontos, 800, 800 pixels Significa que, se a janela de visualização w estiver abaixo de 800 pixels, ela acionará essa condição Então, aqui eu quero dizer cor de fundo. Primeiro, vou selecionar a etiqueta, o corpo e, em seguida, dentro das carnívoras, selecionar a etiqueta corporal Corpo, depois dentro do cardiorss. Eu vou dizer cor de fundo, fundo e quero dizer cor rosa. Rosa. Em seguida, vou duplicar esta seção Desta vez, vou dizer largura máxima, 600 pixels. Se o máximo pesar abaixo de 600 pixels, então eu vou dizer cor de fundo, leia. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, não há alterações na minha área de ponto de vista Ainda assim, ele retornou a cor de fundo branco porque nossa resolução é maior que 800 pixels e agora vou diminuir a largura dessa área do visor Então, como você pode ver, estamos diminuindo área dessa janela de visualização Agora você percebe que há menos de 800 pixels, ele acionou essa condição e disse a cor de fundo rosa. Se eu reduzir abaixo de 600, agora você pode ver que nossa cor de fundo se torna vermelha porque agora nossa resolução é de 584 pixels Como eu disse, eles são chamados de breakpoint. Primeiro, dissemos ponto de interrupção em 800 pixels, depois dizemos ponto de interrupção em 600 Agora você pode ter uma pergunta. O que isso significa? Para que serve o uso real? Suponha que você use um tablet e a resolução da tela seja maior que 800 pixels. Então você pode ver que a cor do corpo do seu site é branca. E se você usa a resolução de tela do celular 800-600, nesse caso, no seu celular, você pode ver que a cor de fundo é porco E se a resolução do seu dispositivo estiver abaixo de 600 pixels, nesse caso, você poderá ver as diferenças. Agora o fundo se transforma em vermelho. Agora vamos adicionar outro ponto de interrupção. Então, vou duplicar esta seção e, desta vez, vou dizer ponto de interrupção em 400 pixels Mas desta vez eu não vou mudar a cor de fundo. Aqui eu vou usar uma propriedade diferente. Quero alterar o tamanho da fonte. Tamanho da fonte, e eu quero torná-la de 12 pixels. E eu quero configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, não há alterações porque nossa resolução de tela é maior que 400 pixels. Mas se eu diminuir a resolução da tela, agora você pode ver que mudou o tamanho da fonte. Agora, faz com que a fonte seja de 12 pixels. E se eu aumentar, agora você pode ver que aumentou o tamanho da fonte. É assim que a consulta de mídia funciona. E agora vou abrir meu projeto anterior, que é o design básico do layout TML Então, em nosso tutorial anterior, criamos esse projeto, que é chamado de layout de design básico em TML Esse layout de design da TM não é responsivo. Não usamos nenhuma consulta de mídia para torná-la responsiva. Se eu reduzir a resolução do navegador, como você pode ver, não há ponto de interrupção e nosso site fica parcialmente visível. E você também pode ver a barra de rolagem horizontal. E agora eu quero torná-lo responsivo usando consulta de mídia. Se não o tornarmos responsivo, se alguém tentar abri-lo no celular, caso contrário no tablet, nesse caso, precisará usar a barra de rolagem para visualizar Então, vou usar a consulta de mídia para torná-la responsiva. Então, vamos voltar ao código do estúdio. No começo, vou criar uma consulta de mídia para o rapper. Como você pode ver em nossa seção de rapper, aqui está com 1.000 pixels Então, aqui, vou criar uma consulta de mídia. Na leitura, na tela de mídia e no interior da redonda, aqui é necessário dizer a condição E aqui, vou dizer que é a largura máxima. Largura máxima, Colon, e eu vou dizer que é 1.000 pixels Vamos considerar mais de 1.000, algo em 1020. Então eu quero trocar o rapper por. Então, dentro desta seção, eu configuro o invólucro, essa tag. Copie esta seção e invólucro de hemorrótipo dentro da carruagem com a qual vou montar, com e vou E então eu vou duplicar esta seção. E desta vez, se nosso ponto de interrupção for 810, algum tipo, 800, dez, então eu vou fazer com que a largura do rapper Além disso, vou criar outro ponto de interrupção. Então, vou duplicar esta seção e, desta vez, vou dizer que é a largura máxima 510 e depois vou dizer a largura do rapper Se eu usar autovalu , ele ocupará a largura exata dessa resolução Agora vamos submeter o arquivo e voltar para o navegador. E agora vou tentar reduzir a largura do navegador. Então, se eu tentar reduzir a largura do navegador, como você pode ver, primeiro, ele ativa esse ponto de interrupção Agora nosso navegador tem menos de mil e 20 pixels, e se eu reduzir mais, agora ele está ativo, esse ponto de interrupção Agora, nosso navegador tem menos de 810 pixels e tem uma largura de invólucro de 500 E se eu reduzir mais, menos de 510 pixels, agora você pode ver que a largura do nosso invólucro é igual à nosso painel de visualização, porque aqui usamos Agora você percebe que nosso sabor transborda desse recipiente porque dentro desse mergulho rápido, temos um elemento profundo onde usamos altura e largura fixas É por isso que você pode ver a barra de rolagem horizontal. Basicamente, nosso objetivo é esconder essa barra de rolagem. Agora, deixe-me mostrar a seção de conteúdo. Como você pode ver em nossa seção de conteúdo, uso do Hero é fixo com 800 pixels. Portanto, em nossa seção de consultas de mídia, precisamos controlar o conteúdo com Então, vou copiar o seletor contido voltar ao nosso primeiro ponto de interrupção Então, aqui, vou selecionar a parte do conteúdo. Então, em vez de Carlss aqui, vou dizer isso com valor com, e vou usar valor percentual Eu vou usar 80%. Da mesma forma, precisamos lidar com a seção lateral da broca. Se eu mostrar minha seção da barra lateral, como você pode ver, ela usou uma correção com 200 pixels Então, vou copiar o seletor da barra lateral. Então, em nosso primeiro ponto de interrupção, vou definir a barra lateral dentro da resina Cari, vou usar com a propriedade with E aqui eu vou pegar 20%. Vamos ficar abaixo de 20% porque temos preenchimento, borda, etc Então, aqui eu vou pegar 18%. Agora, vamos configurar o arquivo e voltar ao navegador. E desta vez, vou abrir minha seção de console e selecionar o L. Como você pode ver, agora nosso navegador com 3.080 Se eu reduzir a largura do navegador e deixar abaixo de 1020, agora você pode ver nosso navegador Ws 1002 E essa condição corresponde ao nosso primeiro ponto de interrupção. É por isso que reduziu a largura da embalagem. À medida que define uma nova largura para nossa seção de conteúdo, também em nossa seção da barra lateral Além disso, precisamos lidar com a seção de conteúdo e a seção barra lateral para obter uma resolução mais baixa Então, vamos voltar ao com um código de estúdio e vou copiar essas seções. Portanto, se nossa resolução for inferior a 510 , quero tornar a largura do conteúdo automática Além disso, a largura da barra lateral é automática. E eu vou configurar esse arquivo. Se eu mostrar esta seção da barra lateral, aqui você pode ver que usamos float proptFloatr É por isso que vou usar o valor 100% da barra lateral, não Auto. Além disso, vou usar o conteúdo 100%. Ele vai fazer exatamente o mesmo que Auto. Além disso, precisamos remover o float dessa seção de conteúdo e da barra lateral Então, aqui, eu vou usar a propriedade flutuante, float Nun. Além disso, vou usar o mesmo valor em nossa seção da barra lateral. Então copie o valor e eu vou colá-lo aqui. E eu vou configurar esse arquivo. Até configurar esse arquivo, se eu mostrar meu navegador e tentar reduzir a área da porta do navegador, agora você pode ver abaixo de 800 pixels. Nossa seção da barra lateral não é tão perfeita. Então, vamos voltar para o código do estúdio, e eu vou para a seção da tela de mídia. Essa é nossa segunda condição. Se nossa tela de mídia estiver abaixo de 810 pixels, ela tornará nosso invólucro de 500 Mas também precisamos lidar com a conteúdo e a seção da barra lateral Então, vou copiar o mesmo valor com o seletor. E aqui eu vou pagar a etapa. E eu vou configurar esse arquivo. Se eu definir esse arquivo e voltar ao meu navegador, como você pode ver, isso não resolverá o problema. Então, vou aumentar a largura da seção da barra lateral. Então, aqui eu vou fazer com que seja 25%. Além disso, vou fazer com que a seção de conteúdo seja de 75%. E eu vou configurar esse arquivo. Configure esse arquivo, se eu voltar ao meu navegador, configuro esse arquivo, como você pode ver, ainda não está funcionando porque acho que cometi algum erro. Sim, eu mudei o valor em nossa primeira condição. Precisamos alterar o valor nessa posição. Então, aqui, vou digitar 75%. E para SDVar eu vou usar 25%. E em nossa primeira condição, vou usar 80% de largura para nossa seção de conteúdo e 18% de largura para nossa seção de barra lateral E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador novamente, agora você pode ver que ele resolve o problema. Agora temos outro problema nesse momento. Se você notar que a altura da nossa barra lateral é limitada. Precisamos aumentar a altura dessa barra lateral. Então, vou fazer com que seja de quase 800 pixels. Então, vamos voltar ao editor de código. E desta vez, vou usar outra propriedade. Altura. Se eu mostrar minha altura anterior para a barra SD por padrão, altura é a altura mínima de 500 pixels. Então, vou mudar a altura mínima. Então eu copio essa propriedade e o valor e volto para a consulta de mídia. E aqui eu vou passar da altura mínima, 900 pixels. Se eu definir esse arquivo e voltar para o meu navegador, agora você pode ver que está funcionando, perfeito. Essa resolução é para tablet. Agora, vamos reduzir o navegador Weav. Agora vou fazer com que seja menor que 510 pixels. Depois de fazer menos de 510 pixels, como você pode ver, agora nosso rapper pega maconha para 100 pessoas Agora, se eu rolar minha página para baixo, isso aumenta a altura da seção da barra lateral porque, em nossa condição anterior, usamos 900 pixels Então, precisamos ajustar a altura. Então, vamos voltar ao código do estúdio de resultados e, desta vez, vou dizer altura mínima em nossa barra lateral, vou definir a altura mínima de 300 pixels. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu voltar ao meu navegador, você poderá ver o resultado. Ainda assim, ocupa uma grande quantidade de espaço. Vamos usar o valor. Então, vou fazer com que seja de 150 pixels. Se eu mostrar meu navegador, também podemos imprimir nossa opção de menu cibernético em linha. Além disso, precisamos alinhar o texto com rodapé no meio. Então, vamos alinhar o texto com rodapé no meio. Então, vamos voltar ao código do Visual Studio e vou selecionar o elemento de rodapé Então, vou copiar o rodapé desta seção e vou colá-lo aqui Em seguida, dentro do Cass, vou digitar texto alinhar texto e alinhar o centro E eu vou configurar esse arquivo. E se eu mostrar meu navegador, como você pode ver, agora está o Align no meio Da mesma forma, podemos alinhar texto da seção de cabeçalho no meio Então, novamente, estou de volta ao meu editor de código do Visual Studio e, desta vez, vou focar nesse elemento, cabeçalho H um. Então, volte para minha seção de mídia aqui. E aqui, vou digitar dentro do alinhamento de texto Calira. Centro. Depois de definir esse arquivo, se eu mostrar meu navegador, você poderá ver o resultado. Além disso, se você não quiser mostrar o menu da barra lateral no Mobile Resolutation, se quiser ocultar esta seção, sim, Você pode ocultar especialmente esta seção para resolução móvel. Deixe-me te mostrar. Vamos voltar ao código do estúdio do usuário. E para esta seção da barra lateral, aqui vou usar a propriedade display none Não exibir nenhum. Se eu definir esse arquivo e comentar todas essas linhas desnecessárias porque aqui usamos display in, é por isso que não precisamos dele. E voltando ao meu navegador, agora você pode ver que não há nenhuma seção da barra lateral acima da seção do rodapé Só temos a seção de conteúdo e a seção do menu e a seção do cabeçalho. Mas se eu aumentar a largura do navegador, deixe-me mostrar. Depois de aumentar o navegador com, ele lançou outra condição, a verdadeira condição da versão para tablet É por isso que, novamente, ele retornou à seção da barra lateral. Mas se eu reduzir a resolução, você pode ver, novamente, a altura da seção da barra lateral Então é assim que você pode controlar diferentes CSS para diferentes resoluções. Espero que agora esteja claro para você como podemos usar consultas de mídia Em nosso próximo tutorial, aprenderemos mais sobre consultas de mídia avançadas Além disso, aprenderemos sobre capacidade resposta avançada Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo Satune. 47. Tutorial de propriedades de tabela CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao estilo CSS E neste tutorial, aprenderemos a estilizar etiquetas de tabelas Vamos aprender todas as propriedades CSS relacionadas à tabela. Então, vamos ver o nome das propriedades que é usado para formatar nossa guia Então, essas são todas as propriedades que eu vou usar neste tutorial. Espaçamento da borda, colapso da borda, alinhamento vertical, lado da legenda, célula vazia e Usando essas propriedades CSS, você pode ignorar atributos estimais, como preenchimento de células, espaçamento entre células e alinhamento vertical Não precisamos usar esse atributo se usarmos essas propriedades. Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver lado a lado, abri meu editor de código do Viisal Studio e meu navegador usando uma extensão de servidor ativa e já criei um documento STL chamado index dot t. E, como você pode ver no meu navegador, aqui criará uma tabela E nesta tabela em nossa primeira linha, criamos um título. E nessa linha, temos um total de três colunas, nome, sobrenome e economias. Além disso, você pode ver a estrutura da tabela em nossa página astável Dentro dessa tag de tabela, primeiro temos tabelas TR e dentro de nossa primeira linha da tabela, temos o cabeçalho da tabela Em seguida, temos os dados da tabela. Como você sabe, Tia tax significa linha da tabela e tag TD significa dados da tabela. Caso contrário, coluna de TV. Agora, vamos ver como podemos usar as propriedades CSS nesta tabela. Então, a princípio, como você pode ver dentro dessa tag de bloco, temos Tavil e Tavildta e o cabeçalho da tabela, e aqui está um boer sólido de um pixel e nossa Então, primeiro, vou usar nossa primeira propriedade, que é o espaçamento entre bordas Então, aqui, vou selecionar a tabela tagnyme. Então, dentro do carro ss, nome da nossa propriedade é espaçamento entre bordas E eu vou dizer que é espaçamento entre bordas, dez pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora você pode ver na minha guia de todos os lados que ela adiciona espaço à nossa borda. E se você quiser mais lacunas, precisará aumentar o valor. Se eu passar 20 e depois definir esse arquivo, você poderá ver o resultado. Além disso, você pode especificar diferentes lacunas para coluna e linha. Suponha que, para a coluna, eu ocupe um espaço de dez pixels e, para as linhas, ocupe um espaço de 20 pixels Se eu definir esse arquivo, você poderá ver o resultado. Para coluna, são necessários dez pixels e, para linha , 20 pixels. E se você não quiser mostrar a lacuna entre as colunas, basta torná-la em um pixel e, em seguida definir esse arquivo, você poderá ver o resultado. Mas, por enquanto, vou adicionar a mesma quantidade de espaço de todas as direções. Então, eu vou passar dez pixels de toda a direção. Agora, vamos falar sobre nossa próxima propriedade. Primeiro, vou comentar essa linha e, em seguida, vou usar o colapso da fronteira. Fronteira sob colapso do escopo. Esta é uma propriedade relacionada à tabela. Então, precisamos usar essa propriedade dentro do seletor de tabela Essa propriedade vem com dois valores separados e um colapso. O valor padrão é separado. Então, aqui eu vou usar um valor chamado colapso. Agora, se eu definir esse arquivo, como você pode ver, ele mostra uma única borda para as células. Mas se eu usar os valores diferidos separadamente e depois definir esse arquivo, agora você poderá ver o resultado Agora você pode ver isso adicionar uma borda extra às nossas células. Agora você pode vê-lo adicionar uma borda para todas as tags TD. E se você não quiser mostrar o espaço, precisará usar o valor de colapso, colapso. Isso é diferente. Agora, vamos falar sobre nossa próxima propriedade, que é o alinhamento vertical Para isso, precisamos adicionar alguns dados extras em nossas células. Além disso, precisamos atribuir um valor fixo à nossa tabela. Então, primeiro, vou adicionar alguns dados fictícios. Então, de acordo com Mohan, eu quero adicionar wim e eu quero adicionar cinco palavras fictícias, e eu vou definir esse arquivo Depois de definir esse arquivo, aqui, adicionarei o fix we a essa tabela. Então eu vou passar com 300 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Vamos adicionar um pouco mais de dados de dammi para este exemplo. Novamente, vou adicionar Lim ten e vou configurar esse arquivo novamente. Agora você pode ver depois disso mais dados nesta tabela, ela aumenta a altura da linha e alinha os dados da segunda coluna no meio Por padrão, ele alinhou verticalmente os dados no meio. E agora eu quero movê-lo para o topo. Para isso, temos um atributo estável, que é V align Mas, como eu disse, não vamos usar nenhum atributo estável. Vamos usar CSS. Então, vamos entrar nessa tag de estilo. Primeiro, precisamos direcionar todos os dados da tabela, então HemoTypeTD Então é na resina de Cali que vou passar por uma propriedade, alinhamento vertical E aqui, vou usar a propriedade chamada alinhamento vertical, alinhamento vertical, e quero alinhá-la no topo, então vou passar para Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver o alinhamento de nossos dados na parte superior. Essa propriedade vem com três valores, superior, inferior e médio. E se você quiser colocá-lo no fundo, basta passar por baixo. É isso mesmo. Então, espero que agora esteja claro para você como o alinhamento vertical funciona. Agora, vamos falar sobre preenchimento. Se você se lembra, em HTML, basicamente usamos preenchimento de células E se você não se lembra, deixe-me mostrar o atributo. Já que na tag da tabela, vou usar o atributo chamado cell padding Preenchimento de células, e eu vou atribuir dez pixels. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver em cada célula de todas as direções , um preenchimento de dez pixels E agora vou fazer a mesma coisa usando CSS, sem usar esse atributo. Então, vou remover essa linha. E se você quiser fazer a mesma coisa, basta usar o preenchimento Suponha que em nossas células de dados da tabela eu queira adicionar o preenchimento, mas não no cabeçalho da tabela Então, aqui vou usar o preenchimento de dez pixels. E se eu definir esse arquivo, você poderá ver o resultado. Não adiciono preenchimento em nossa primeira linha porque nossa primeira linha compôs os dados TH, que são o cabeçalho da tabela, e atribuímos preenchimento aos dados da tabela, tags TD É por isso que começa no preenchimento da segunda linha. E se você quiser atingir a etiqueta TH, basta passar o pH. E se eu definir esse arquivo, você poderá ver o resultado. Agora, ele adiciona preenchimento às nossas tags de cabeçalho de tabela. Agora vamos falar sobre a próxima propriedade, que está no lado da legenda. Mas antes, deixe-me tentar explicar o que é legenda. Em nossa tag de tabela, temos uma tag chamada caption. Deixe-me te mostrar. Tag de legenda E dentro dessa legenda, vou digitar employ E se eu definir esse solo, você pode ver a legenda acima da tabela empregar Esta é a tabela de funcionários. Podemos mudar a posição dessa legenda. Então, vou selecionar dentro da tag de estilo, vou selecionar a legenda, a tag da legenda Legenda do tipo de som. Então você disse os cálices, vou usar nossa propriedade que é chamada de site da legenda, site da legenda, e ela vem com um total de dois valores, inferior Por padrão, ele vem com o valor superior, então vou usar o valor inferior. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver a captura e a parte inferior. Agora, vamos falar sobre nossa próxima propriedade, que é a célula vazia. Se você observar em nossa tabela, em cada célula, temos dados, e agora vou remover um dos dados da nossa célula. Então, vou remover 150. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora você tem a escolha. Ou você pode mostrar a venda estável, caso contrário, você pode ocultar essa venda estável. Então, vou usar, e dentro da tag da tabela, precisamos usar a propriedade chamada D sell. Células vazias, seu Taoi totaliza dois valores, ocultar e mostrar. Mostrar é o valor padrão, então vou usar ocultar. Depois de definir esse arquivo, como você pode ver, ele não muda nada porque o herói usa o valor de colapso da borda. Mas se eu usar separado, deixe-me mostrar para você. Em seguida, defina esse arquivo. Agora você pode ver o resultado. Agora você pode ver que tinha uma célula específica. Então esse é o uso da propriedade de célula vazia. Nossa próxima e última propriedade é que eles farão o layout. Então, vou usar essa propriedade. Depois da célula vazia, vou digitar o layout da tabela, essa propriedade vem com um total de dois valores: automático e fixo. Primeiro, vou usar o valor automático. Após a etapa deste arquivo, você não pode ver nenhuma alteração, mas deixe-me mostrar. Suponha que nossa segunda linha da tabela, em nossa primeira coluna, eu queira adicionar uma palavra grande. Depois de nob, quero adicionar um pouco de B. Se eu definir esse arquivo, você poderá ver o resultado Mas se você se lembra da seta, use maconha fixa nesta mesa, 300 pixels, mas ainda assim estenda nossa tabela. Isso aumenta a largura dessa tabela. Portanto, de acordo com o tamanho dos dados, ele pode aumentar a largura fixa. Mas se eu usar o layout fixo da tabela, e eles configurarem esse arquivo, agora você pode ver o resultado. Ele transborda os dados da célula, mas não estende o Tavy Então, se eu usar o valor automático, que é o valor padrão, tenho esse arquivo e, novamente , para a situação antiga. Então, essas são todas as propriedades que se recuperam neste tutorial. Espero que agora esteja claro para você como podemos usar essas propriedades com células de tabela. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial 48. Tutorial de redimensionamento de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos sobre uma nova propriedade, que é o redimensionamento de CSS Basicamente, você terá a facilidade alterar o tamanho da profundidade pelo usuário. Você pode alterar a altura e a largura usando dragon drop. Agora vamos falar sobre os valores, quantos valores temos nessa propriedade, horizontal, vertical, ambos e nenhum, e nenhum é a propriedade padrão. Vamos começar a prática e ver como podemos usar esses valores. Como você pode ver, lado a lado, abro meu editor de código isalstudio e meu navegador usando a extensão Lifesaver e já crio um documento de estimativa chamado Além disso, você pode vê-la criar um elemento profundo, e dizemos que ela tem 300 pixels de altura e 500 pixels de espessura. Se eu tentar redimensioná-lo usando o Kurzar, não, não vai funcionar Então, vou usar a propriedade resis, mas se eu usar apenas a propriedade precise , ela não funcionará Com isso, precisamos usar outra propriedade de ajuda. Aqui, redimensione o motivo. Redimensionar verticalmente. Se eu definir esse arquivo, como você pode ver, não há nada. Não podemos redimensionar o DV verticalmente. Para usar a propriedade precise, precisamos usar a propriedade overflow Aqui vou digitar overflow. Automático. Agora vou configurar esse arquivo. configurar este arquivo, como você pode ver na esquina, temos a opção de redimensionamento Agora podemos redimensioná-lo verticalmente. Podemos redimensioná-lo na direção vertical. Para entender melhor, vamos adicionar um parágrafo fictício nessa caixa D. Vou digitar a tag P e , dentro dessa tag P, vou digitar low e quero adicionar 300 palavras. Vou configurar esse arquivo. configurar este arquivo, como você pode ver, temos uma barra escolar vertical. Mas se eu aumentar o tamanho da caixa, agora você pode ver que ela foi removida da barra vertical da escola porque não temos dados estourados Aumentamos verticalmente a altura da profundidade e agora vamos aumentar a largura da profundidade Para isso, aqui você precisa passar o valor horizontal, redimensionar horizontalmente Se eu definir esse arquivo, agora temos a opção de aumentar a largura da profundidade, mas não podemos redimensionar a altura da profundidade porque desta vez passamos o valor horizontal e, se você quiser redimensioná-lo nas duas direções, para isso, você precisa usar os dois Redimensione os dois. Se eu definir esse arquivo, desta vez você pode redimensionar o elemento profundo de ambas as direções Como você sabe, no formato de estimativa, temos uma tag chamada área de texto e, por padrão, a área de texto suporta redimensionamento Deixe-me te mostrar. Aqui, vou digitar essa etiqueta de mergulho. Caso contrário, fora dessa área de texto da tag dip. Vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver a área de texto. Por padrão, ele vem com recurso de redimensionamento. Mas se você quiser interromper esse redimensionamento, para isso, use resize nun Value. Deixe-me te mostrar como. Então, aqui, primeiro, vou selecionar a área de texto. Então, dentro das resinas redondas, depois dentro das calices, vou passar resize, none, e definir Ao configurar este arquivo, agora você pode ver que não há opção de redimensionar a caixa externa porque o herói usa redimensionar caixa externa porque o herói usa redimensionar Isso é tudo para este tutorial. Espero que agora esteja disponível para você, como podemos usar o redimensionamento do Paperty Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 49. Tutorial de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, vamos aprender sobre uma nova propriedade chamada CSS cursor. Como você pode ver dentro da caixa quadrada vermelha, temos um Kursel Você pode ver o cursor dentro da caixa quadrada vermelha e, se quiser alterar o estilo do Kazar, precisará usar CarsAlpperty Todos esses são valores que costumavam mudar o estilo do Kazar. Como você pode ver, quase temos um total de 36 valores padrão, freira, menu de contexto, saúde, ponteiro, progresso, peso, peitoril, etc Então, vamos começar a prática e ver como podemos usar esses valores. 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 já criei um documento de ML chamado index dot Então, aqui você pode ver neste navegador que já criamos um elemento profundo. Agora vou usar a propriedade chamada cursor. Então aqui você disse esta caixa. Vou digitar o nome da propriedade cursor. CurzR e eu queremos atribuir um valor infernal. Caramba, se eu coloquei esse arquivo e o meu neste elemento profundo, agora você pode ver com a erosina que temos o quociente É malvado, indica o inferno. E então eu vou duplicar essa linha e comentar a linha anterior Desta vez, vou mudar o valor. Aqui eu vou mudar o CursPonter. Se eu definir esse arquivo e passar meu curr nesse elemento profundo, você poderá ver o resultado Agora ele substitui a arosina pelo seno ponteiro. E o próximo valor que vou usar, que é progresso. Então, vou duplicar esta seção e comentar a linha anterior e substituir o ponteiro pelo Se eu definir esse arquivo e mostrar meus carros nesse elemento profundo, você poderá ver o resultado. Você pode ver com a seta, temos um círculo, um círculo de carregamento. Isso indica progresso. Então eu vou usar outro estilo de carro. Vou duplicar essa linha novamente e comentar a linha anterior Desta vez, vou usar o menu de contexto. Vou substituir o progresso pelo contexto Minu. Se eu definir esse arquivo e Huber meu cartão nesse elemento profundo, você não poderá ver nada Depois de usar o menu Concurso, não há alterações. É como um valor padrão. O próximo valor eu vou usar Auto. Novamente, vou duplicar essa linha e comentar a linha anterior e substituir o menu do concurso por Auto Se eu definir esse arquivo e sempre que meus cartões estiverem nesse elemento, você pode ver o que é o valor padrão. Em seguida, vou pular para outro valor, que é peso. Novamente, vou duplicar essa linha e comentar a anterior e substituir auto por peso Se eu definir esse arquivo e meus cartões estiverem nesse elemento profundo, como você pode ver, é muito semelhante ao carregamento, caso contrário, ao progresso. Isso é para sinal de peso. Então, novamente, vou começar esta linha e comentar a anterior e substituir o peso por vender. Se eu definir esse arquivo e passar o cursor sobre esse elemento profundo, você poderá ver o resultado Tinha um sinal positivo. Agora parece um sinal de adição. E se você não quiser mostrar o cursor ao posicionar o cursor nesse elemento profundo, precisará usar Nun Então, novamente, vou duplicar essa linha e omitir linha anterior e substituir L pelo valor Nun Nenhuma. Se eu definir esse arquivo e passar o cursor sobre ele, você pode vê-lo ocultar meu cursor porque desta vez usamos nun Vd. Portanto, é muito difícil mostrar todo o valor um por um. Eu crio esse arquivo para você e aqui aplico todos os valores, um por um, ao texto do parágrafo. Portanto, se você ouvir seus carros nos itens do parágrafo, poderá ver os diferentes resultados. Crosshair, padrão, E Resize, EW redimensionar, pegar, agarrar ajuda a mover, N redimensionar, N redimensionar, sem soltar, nenhum, não permitir, tudo nenhum Assim, você pode experimentar sozinho e verificar o valor um por um. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 50. Unidades CSS Tutorial 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. 51. Unidades CSS Tutorial 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 cabeçalhos 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 é 300 pixels e a janela D do navegador tem 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 a 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. O 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 52. 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. 53. 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. 54. Tutorial de caminho de clipe de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender uma nova propriedade, que é CSS clip path. Essa propriedade vem com um total de quatro valores: círculo, elipse, inserção e polígono Então, vamos ver como podemos usar esse valor e criar uma forma diferente. Em primeiro lugar, vamos começar com um círculo. Para criar um círculo, precisamos de uma imagem. Agora, nesta imagem, precisamos criar esse círculo. Basicamente, precisamos remover a parte escura dessa imagem. Precisamos mostrar o que está dentro dessa parte do círculo. Para criar o círculo, precisamos de três coisas. Primeiro, precisamos do raio. Usando o raio, podemos definir o tamanho do círculo. Em seguida, precisamos definir a posição em que precisamos criar esse círculo. Para isso, precisamos fornecer Xxs e YxS. Como você pode ver, colocamos esse círculo no meio. Para isso, podemos pegar XX 50% e YxS 50%. Depois de fornecer esse valor, nosso caminho de clipe fica assim. Então, vamos começar a prática e ver como podemos aplicá-la. 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 Live e já criei um documento HTML chamado InexoteTM Como você pode ver, dentro da etiqueta corporal, aqui inserimos a imagem. Agora eu quero aplicar um caminho de clipe em forma de círculo a esta imagem. Para isso, precisamos ir até a seção de estilo. Estilo. E dentro dessa etiqueta de estilo , primeiro, vou selecionar a imagem. Então, dentro da resina do carro, vou aplicar o clipe path Caminho do clipe, círculo do clippath. Como eu disse, para criar esse círculo, primeiro precisamos definir o raio Então, aqui, eu vou pegar 30%. Além disso, você pode obter o valor em pixels e, em seguida, precisamos definir a posição em que queremos colocar nosso círculo. Então, vou digitar em 50%, quero colocá-lo no meio. É por isso que passo o valor de 50% de Y xs e 50% de X xs e vou configurar o arquivo. Depois de configurar esse arquivo, você pode ver o resultado. E se você quiser aumentar esse tamanho de círculo, você precisa jogar com esse valor. Suponha que eu passe de 60%. Se eu definir esse arquivo, você poderá ver o resultado. E da mesma forma, se você quiser diminuir o valor, basta passar 10%. Você pode ver o resultado. É assim que funciona. Além disso, se você quiser mudar a posição desse círculo, sim, você pode simplesmente jogar com os valores X e Y Xs. Suponha que, a partir de ss, eu queira colocá-lo em 70%. E a partir de xs, eu quero colocá-lo em apenas 30%. Se eu definir esse arquivo, você poderá ver o resultado. A partir de XXs, são necessários 70%. Do YXS, são necessários 30%. E se você quiser criar a forma de um círculo central, deixe-me mostrar. Aqui eu vou passar YX é 50% e XX é 0%. No topo deste arquivo, você pode ver o resultado. Agora ele cria a forma de um círculo central. E se você quiser colocar o canto do laptop do skip path, você precisa passar x é zero e YX é No topo deste arquivo, você pode ver o resultado. Então, espero que agora esteja claro para você como podemos usar o valor do círculo. Agora vamos falar sobre a forma do eclipse. Então, vou duplicar essa linha e comentar a linha anterior Mas antes, deixe-me explicar como podemos criar essa forma. Então, este é o exemplo da forma de elipse. Para criar essa forma de elipse, precisamos dizer quatro coisas Primeiro, precisamos do raio horizontal, do raio vertical e, em seguida, precisamos de Xxs e de uma posição YxS Agora, vamos aplicar esse valor para criar essa forma. No início, vou substituir a elipse circular. Elipse, primeiro, você precisa fornecer o valor horizontal. Para o valor horizontal, vou pegar 10% e para o valor vertical, aqui vou pegar 40%. Então eu quero colocar a forma da elipse no centro. Aqui eu vou passar 50% de Xxs e 50 e 50% de YxS Depois de definir esse arquivo, você pode ver o resultado. Agora, vamos aumentar o valor horizontal. Eu vou fazer com que seja 20%. Depois de definir esse arquivo, você pode ver a forma oval perfeita. E se você quiser fazer essa forma de Ellipe horizontalmente, basta Faça com que seja 40% e faça com que este seja 20%. Em seguida, defina esse arquivo novamente. Você pode ver o resultado e, alterando XXs e YxS, você pode alterar a posição dessas elipses Agora, vamos falar sobre o próximo valor, que é inseto. Basicamente, esse valor criará uma forma retangular e, para criar essa forma, precisamos de t quatro poços Parte superior, direita, inferior e elevador. Vamos começar a prática e ver como podemos criar essa forma. Vou duplicar esta linha e comentar a linha anterior Aqui vou digitar inset. Então, primeiro, removerei todos os valores e primeiro fornecerei o valor superior do topo. Do topo, vou pegar 10%. E da direita, eu vou pegar 20% e de baixo, eu vou pegar 15% e da esquerda, eu vou pegar 10%. Se eu definir esse arquivo, você poderá ver o resultado. Isso é o que ele cria. E para deixar isso mais claro, vamos alterar o valor. Do topo, eu vou pegar 25%, e da direita, eu vou pegar 30%. E do fundo, eu vou pegar 35 pessoas, e da esquerda, eu vou pegar 40%. Se eu definir esse arquivo, você poderá ver o resultado. Usando esse valor, você pode criar uma forma retangular, caso contrário, qualquer forma quadrada Agora vamos falar sobre a forma mais importante dessa propriedade, que é polígono Usando o valor do polígono, você pode criar qualquer tipo de forma. Como você pode ver, ela criará um triângulo. Além disso, você pode criar a forma de estrela, qualquer tipo de forma geométrica Como você pode ver neste exemplo, ele criará uma forma retangular Para criar a forma retangular, precisamos de um total de três pontos E para definir cada ponto, precisamos do excesso de valor e do valor YXS Portanto, precisamos de um total de três pares de excessos e o valor de YxS. Então, vamos começar esse retângulo a partir desse ponto, ponto vermelho Então vamos criar esse ponto azul, depois vamos pular para o ponto amarelo. Então, vamos começar a prática e ver como podemos criar essa forma. Então, primeiro, vou duplicar essa linha, comentar a anterior e configurar esse arquivo novamente. E vou substituir a inserção por seu polígono. Para criar o triângulo, aqui precisamos reduzir três pontos No começo, quero começar a partir desse ponto. Então, dos Xxs eu vou passar 50% e dos YxS eu vou passar E então eu quero criar outro ponto no canto inferior direito. Portanto, precisamos fornecer uma vírgula e, a partir de ambos os xs, precisamos obter 100% Do Xxs eu vou passar 100% e do YxS eu vou passar Coma, e então vou criar ponto a lábio até o canto inferior. Então, dos Xxs eu vou pegar 0% e dos YxS eu vou tirar Se eu definir esse arquivo, você poderá ver o resultado. Ele cria uma forma de triângulo perfeita. E agora vou criar outra forma geométrica usando o mesmo valor, polígono Vou ser esta linha e comentar a anterior. E, novamente, vou remover todos os valores e definir esse arquivo. Então, a princípio, vou enfatizar essa posição. Novamente, vou passar do Xs, vou passar de 50% e do Y xs, vou passar de 0%. Vírgula. Desta vez, vou passar por quatro vitórias e depois quero marcar um ponto nessa posição. Então, dos XXs eu vou passar de 100%, e dos Ys, vou passar de 50% Então eu quero enfatizar essa posição. Então, dos XXs eu vou passar 50% e dos YxS eu vou passar E a seguir, vou enfatizar essa posição. Então, dos XXs eu vou passar 0% e dos YxS eu vou passar Se eu definir esse arquivo, você poderá ver o resultado. Desta vez, crio esse tipo de geométrica usando essa forma poligonal E agora vou criar outro exemplo. Aqui eu vou criar um sinal de adição. Para isso, vou duplicar essa linha e comentar a anterior, remover os nvals e definir Então, para criar o sinal de adição, quero começar a partir deste ponto. Então, aqui eu vou passar 40% da direção X e 0% da direção YxS Esse é o nosso primeiro ponto. No segundo ponto, vou passar 60% da XX e 0% da direção YxS No próximo ponto, a seguir, vou criar outro ponto, e quero criá-lo nessa posição. Então, do XXX, eu vou pegar 60% novamente e dos YXs eu vou pegar 40% Então eu vou criar um ponto nessa posição. Para isso, novamente, vou passar 100% X e 40% da posição YxS Então eu vou passar da posição 100% X e 60% da posição YxS Em seguida, vou passar pela 60% XX, 100% pela posição YxS Em seguida, vou passar pela posição de 40% Xxs apenas para remover esse coma desnecessário porque precisamos de espaço entre esses dois valores 40% da direção do excesso e 100% da direção YxS. Em seguida, vou pegar 0% da direção ss e, da direção Xs, vou pegar 60%. Por fim, vou pegar 40% de direção excessiva e 40%, YX é direção Vamos salvar o arquivo e ver o que ele cria. Espero que isso crie o sinal de adição. Não, não é criar o sinal de adição. Acho que cometi algum erro. Aqui eu não crio esse ponto, quando criar esse ponto. Acho que esqueci de mencionar alguns pontos. O objetivo principal é usar esse valor, você pode criar diferentes tipos de forma geométrica Você só precisa mencionar os pontos certos usando os valores XX e YXS Isso é tudo para este tutorial. Espero que agora esteja claro para você como podemos aplicar o Keep path. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 55. Tutorial de forma de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outra tese relacionada ao tutorial. E neste tutorial, vamos aprender uma nova propriedade chamada shape outside. Basicamente, usamos essa propriedade para formatação de texto. Mas vamos usar essa propriedade com o caminho do clipe. Essa propriedade vem com quatro valores, elipse circular, inserção e polígono Agora vou mostrar por que usamos essa propriedade. Suponha que criemos um círculo usando o caminho do clipe. Além disso, você pode criar o mesmo círculo usando o raio da borda. Mas o problema é criar esse círculo, ainda assim ele ocupa a área do texto, mas eu quero usar esse espaço em branco assim. Para isso, precisamos usar a forma fora da propriedade. Depois de usarmos essa propriedade, nossas tomadas se ajustam de acordo com a forma. Então, vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código salt studio e meu navegador usando a extensão if server, e já crio um documento HTML, chamado index dot TML chamado index dot TML Então, como você pode ver em nossa tag corporal, temos uma tag de imagem e, em seguida, temos um paragrama E eu configuro a reprodução do fluxo da imagem. E então, primeiro, vou aplicar o teclado a essa imagem Então, aqui estou eu para usar essa propriedade, clip path. Círculo do Key Path. Primeiro, precisamos definir o raio. Eu vou usar 30%. Além disso, precisamos definir a posição, então vou empatar em 50% por 50%. Vou configurar esse arquivo. configurar esse arquivo, você pode ver o resultado. Isso cria nosso círculo perfeitamente, mas o problema é que aqui você pode ver o espaço em branco desnecessário. Precisamos preencher esse espaço em branco desnecessário com o texto. Precisamos cobrir esse espaço em branco. Para isso, vou usar uma forma de chamada de propriedade externa Forma lá fora e aqui eu vou usar o valor. E aqui, vou passar o valor exato da forma do círculo. Então, para copiar esse valor. E eu vou colá-lo no formato externo. Se eu definir esse arquivo, você poderá ver o resultado. Agora é correto ajustar de acordo com a forma. Agora vamos mover esse círculo um pouco com o lado do lábio. Então Hemo para passar Xs 20%, também para alterar esse valor X é 20% Depois de configurar esse arquivo, você pode ver o resultado. Caso contrário, você pode fazer com que seja 30% por resultado perfeito. Está parecendo bom. Como você pode ver, desta vez, nosso parágrafo tenta ajustar de acordo com a forma redonda. Agora você pode ver outro problema. Nosso texto quase se anexa com essa forma. Aqui, precisamos fornecer uma pequena margem. Aqui, vou passar Shape, margin, 20 pixels. Precisamos usar particularmente essa propriedade, forma, margem. Depois de definir esse arquivo, você pode ver o resultado. Agora vou redirecionar para um site, que é nfili.com A partir daqui, podemos criar formas diferentes usando Keep Path. Podemos criar qualquer forma. Depois de criar essa forma, a partir daqui, podemos copiar a propriedade do caminho chave e o valor. Vou copiar o valor da forma do polígono. E então eu vou substituir o valor de Kipath por esse valor Além disso, vou substituí-lo em nossa forma na seção externa. Se eu definir esse arquivo e voltar ao meu navegador, aqui você pode ver o resultado. Neste site, você pode obter diferentes tipos de forma de seta para a direita, sinal fechado, elipse, hexágono, pentágono, o que quiser Este site é um site muito bom. A partir daqui, você pode extrair qualquer tipo de forma com o valor. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, Situne para o próximo tutorial 56. Tutorial de filtro de CSS Part1: Olá, pessoal. É bom ver você de volta. Este é o primeiro tutorial relacionado à animação CSS, e vamos começar este tutorial usando a propriedade de filtro CSS. Usando o filtro, podemos alterar os efeitos da imagem e temos que t 12 efeitos que podemos usar em nossa imagem. Nosso primeiro nome de efeito é nenhum. Se você não quiser usar nenhum efeito, poderá usar essa propriedade. E usando a propriedade desfocada, você pode desfocar sua imagem. E usando o valor do teste, você pode reduzir o brilho ou aumentar o brilho E para contraste, você pode usar o valor de contraste, e o valor do disparador Rp funciona como uma sombra dessa imagem Usando o valor malandro, podemos usar nossa imagem em preto e branco. E usando a rotação, você pode sentir cores diferentes com ângulos diferentes, e nosso próximo valor é invertido Se você se lembrar da antiga regra do caminar, poderá entender o efeito com muita facilidade, e nosso próximo valor é a opacidade Usando o valor de opacidade, podemos controlar a transparência dessa imagem Se quiser controlar a saturação dessa imagem, você pode usar o valor saturado Se você quiser mais cor em sua imagem ou menos cor em sua imagem, você pode usar esse valor, e nosso próximo valor é Cipia e nosso último valor é URL Esse valor de URL funciona com imagens SVG. Neste tutorial, abordarei os seis efeitos. Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu coetor do Visual Studio e meu navegador usando a extensão if server Eu já criei um documento de estimativa no meu diretório de trabalho atual. Como você pode ver no meu navegador, há uma imagem e eu já insiro essa imagem usando o Imgtag, e eu já insiro essa imagem usando como você pode ver na minha seção de estilo, definimos a espessura de 600 pixels para essa imagem e a altura automática Vou usar todo esse filtro nessa imagem. Os efeitos desempenham um papel muito importante na animação CSS. É por isso que eu começo este tutorial com efeitos CSS. No início, vou usar a propriedade de filtro. Filtre e nosso primeiro valor é nenhum. Se eu definir esse arquivo, aqui você pode ver que não há alterações, não há alterações nesta imagem porque esse é o valor padrão dessa propriedade e nosso próximo valor é desfoque, então digite, desfoque Suponha que eu queira aumentar essa imagem em até quatro pixels. Se eu definir essa imagem, aqui você pode ver o resultado. Se você quiser produzir mais sangue, você pode aumentar o valor. Suponha 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. O valor padrão dessa propriedade de desfoque é zero. Se eu usar o valor zero e depois definir esse arquivo, aqui você pode ver o resultado. Agora nossa imagem está claramente visível e esse é o uso do valor de desfoque e nosso próximo valor é o brilho 100 é o valor padrão do brilho, 100%. E esse valor funciona com porcentagem. Se eu definir esse arquivo, você verá que não há alterações e agora quero reduzir o brilho em 20%. Se eu definir esse arquivo, você poderá ver o resultado. Isso reduziu o brilho dessa imagem. E se você quiser obter o brilho normal, precisará passar de 100. Se eu definir, você poderá ver o resultado. E se você quiser aumentar o brilho dessa imagem, precisará passar mais de 100% do valor. Suponha que eu passe de 300%. Se eu definir esse arquivo, você poderá ver o resultado. Se passarmos 0% de brilho e definirmos o arquivo, você pode ver que agora ele está completamente preto. Vamos pular para o próximo valor, que é contraste. Vou digitar contraste. 100 é o valor padrão do contraste, 100%. Se eu definir esse arquivo, você poderá ver o resultado. Se você quiser aumentar o contraste desta imagem, você precisa passar o valor e depois passar mais de 100%. Suponha 200%. Se eu definir esse arquivo, agora você pode ver o contraste, se quiser diminuir o contraste, precisará passar abaixo do valor de 100%, algo em 50%. Se eu definir esse arquivo, você poderá ver o contraste. Se passarmos o valor de 0% e depois definirmos o arquivo, agora você pode ver que não há contraste nesta imagem. Se passarmos de 0%, como você pode ver, nossa imagem ficará cinza. Nosso próximo valor é sombra projetada. Mas antes de usar esse valor, vou reduzir a imagem. 400 pixels. Esse valor é semelhante à propriedade box shadow Primeiro, precisamos fornecer sombra horizontal. Eu vou fornecer dez pixels. Isso é para a direção XX. Em seguida, precisamos fornecer sombra vertical. Para YxS, vou passar de dez pixels mais uma vez, e depois vou passar o desfoque dessa sombra, que é de que Então precisamos passar a cor da sombra. Vou usar a cor verde. Se eu definir esse arquivo, aqui você poderá ver o resultado e também poderá alterar o desfoque dessa sombra Se eu passar zero pixel e depois definir o arquivo, agora você pode vê-lo agir como uma sombra sólida. Além disso, você pode usar valor negativo nesse parâmetro. Suponha que eu queira essa sombra menos a direção de YxS. Se eu definir esse arquivo, você poderá ver o resultado. Este é o efeito go drop shadow do Reino Unido, e nosso último valor é a escala de cinza. Deixe-me te mostrar. Escala cinzenta. Usando esse efeito, podemos converter nossa imagem colorida em uma imagem em preto e branco. 0% é o valor padrão desse parâmetro de escala de cinza. Se eu definir esse arquivo, você verá que não há alterações. Mas se eu usar 100% e depois definir o arquivo, agora você pode ver que transformou completamente essa imagem em preto e branco. Você precisa se lembrar de que precisamos passar um valor entre zero a cem por cento, não mais que 100%. Você pode usar qualquer valor entre eles. Suponha que eu queira passar de 70%. Se eu definir esse arquivo, você poderá ver o resultado. Agora, a imagem é preenchida com 70% de cinza e 30% de cor. Isso é tudo para este tutorial. No próximo tutorial, abordarei os filtros restantes, rotação U, opacidade invertida, saturação, CIPia Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 57. Tutorial de filtro de CSS Part2: Olá, pessoal. É bom ver você de volta. Essa é a segunda parte do tutorial filtrado por CSS. Neste tutorial, abordaremos os seis filtros. Huh, gire, inverta, opacidade, saturação, espião e URL saturação Vamos começar a prática e ver como funciona. Aqui você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão lifesaver e abro meu documento de estimativa anterior para este exemplo Primeiro, vou chamar a propriedade do filtro, filtro. Nosso primeiro valor é Hu Rotate. E aqui você pode usar 023 60 graus Vdo. Vou passar no DAG de 150 graus e depois definir este arquivo, aqui você pode ver o resultado Se eu passar 100 graus, eu configuro esse arquivo, você pode ver o resultado diferente. Usando esse valor, você pode tentar combinação 360, 360 graus. Se eu definir esse arquivo, você poderá ver o resultado. Não há nenhum parâmetro negativo para esse valor. Vamos pular para o próximo valor, que é invertido. Em breve mergulhe invertido. Se eu definir esse arquivo, aqui você pode vê-lo inverter completamente a imagem, e podemos passar o parâmetro zero, 200% Suponha que eu queira passar de 0%. Se eu definir esse arquivo, aqui você pode ver, esse é o valor diferido dessa propriedade Se eu passar 50% e depois definir o arquivo, se eu usar o valor de 50%, agora ele ficará completamente cinza. Se eu aumentar o valor, algo em 70% e definir esse arquivo, agora você poderá ver o resultado. Nossa imagem ainda está invertida, mas você pode ver a camada cinza nela Da mesma forma, se eu reduzir o valor abaixo de 50%, algo em 20% e depois definir o arquivo, como você pode ver, não inverta a imagem completamente Esse é o uso do valor invertido. Nosso próximo valor é a opacidade. Como você pode ver, agora nossa imagem está totalmente visível e agora eu quero torná-la transparente. Para isso, precisamos usar o valor da opacidade. Se eu definir esse arquivo, como você pode ver, não haverá alterações porque não fornecemos nenhum parâmetro nesse valor. Agora eu quero tornar essa imagem semitransparente. Eu quero fornecer 50%. Se eu definir esse arquivo, você poderá ver o resultado. E se você tornar essa imagem completamente transparente, precisará passar de 0%. Se eu definir esse arquivo, as imagens ainda existirão neste lugar, mas nós o tornamos completamente transparente. E se você tornar essa imagem completamente visível, precisará passar o valor de 100%. Então, espero que agora você possa entender esse valor, como ele é usado. Espero que agora você possa entender valor da opacidade, como ela é usada Ou o próximo valor é saturar. Esse valor fornecerá força em pixels coloridos. Vou digitar saturar. Usando esse valor, você pode controlar a intensidade dessa cor, e 100 é o valor padrão dessa propriedade, 100%. Se eu definir esse arquivo, você verá que não há alterações e agora quero saturar essa cor Eu vou passar de 200%. Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver a mudança da cor e, se quiser dessaturá-la, precisará passar um valor menor que 100%, algo Se eu definir esse arquivo, agora você pode ver a cor da imagem parecendo muito opaca Se eu passar o valor de 0% e depois definir o arquivo, agora você pode ver que essa imagem completamente transformada em uma imagem em tons de cinza significa imagem em preto e branco Espero que agora você entenda o que é saturado. Nosso próximo valor é a Cipia. Alguém para amarrar a Ciphia. Esse filtro oferece a aparência vintage dessa imagem. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode passar parâmetros entre zero a cem por cento. Se eu passar 0% e depois definir esse arquivo, agora você poderá ver a imagem real. Se eu aumentar o valor em 50% e depois definir o arquivo, aqui você pode ver que ele aplica algum efeito Ciphia nesta imagem, e 100 é o valor mais alto dessa propriedade Não há valor negativo nem valor pixel para essa propriedade, e nosso último valor é URL. Para isso, você deve ter conhecimento de imagens SVG. E se você não tem conhecimento básico de animação SVG ou imagem AVG, confira meu curso, e este curso está disponível nesta plataforma Basta acessar meu perfil de instrutor e você encontrará este curso A última coisa que quero dizer, suponha que você queira aplicar vários efeitos nesta imagem. Suponha primeiro que você queira usar o efeito desfocado nessa imagem Alguns para digitar desfoque em pixel. E então eu quero aplicar o efeito SPI nesta imagem. Espião 50%. Se eu definir esse arquivo, você poderá ver o resultado. E agora eu quero aumentar o brilho dessa imagem. Luminosidade, 200%. Se eu definir esse arquivo, você poderá ver o resultado. Assim, você pode adicionar o efeito que quiser. Então, espero que agora o conceito de filtro CSS esteja claro para você. No próximo tutorial, vamos entender o que são transições CSS Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 58. Tutorial de transição de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova propriedade relacionada ao CSS, que é a transição CSS. Essa é uma das propriedades mais importantes da animação CSS. Agora a pergunta é: o que é transição? Transição significa suavidade. Suponha que você queira mudar a posição de um objeto. Caso contrário, você deseja aumentar a largura do objeto. Deixe-me mostrar o exemplo. Como você pode ver no meu documento de estimativa, precisamos nos aprofundar demais e quero aumentar a largura ao passar o mouse sobre meu objeto vermelho E eu já vejo uma transição nesse objeto. Se eu passar o cursor sobre esse objeto, você poderá ver o resultado E você pode ver quando nosso contêiner aumenta a largura, você pode ver um efeito de suavidade. Se não usássemos o efeito de transição, o trabalho seria feito de uma só vez. Então você não pode ver a suavidade quando aumenta a largura É por isso que precisamos usar a transição. Da mesma forma, para nosso próximo objeto, reduzimos as bordas sobre o objeto Deixe-me te mostrar. Como você pode ver, há uma bela transição. E se não usarmos essa transição, ela será feita de uma só vez. Isso seria feito com apenas um piscar de olhos feridos. Portanto, para fins de suavidade, precisamos usar essa transição Vamos falar sobre propriedades. Basicamente, a transição vem com cinco propriedades: transição, propriedade de transição, duração da transição, atraso de transição e função de tempo de transição Basicamente, nossa primeira propriedade é a menor quantidade de todas essas propriedades. Se você quiser usar essas quatro propriedades em uma linha, nesse caso, poderá usar somente a propriedade de transição. Basicamente, nossa primeira propriedade é a propriedade de transição. Usando essa propriedade, podemos especificar por que queremos usar essas transições. Suponha que eu queira usar essa transição para o raio da borda. Caso contrário, nós. Nesse caso, precisamos declarar o nome da propriedade. Algo como propriedade de transição, raio da água, caso contrário, largura da propriedade de transição Nossa próxima propriedade é a duração da transição. Nessa propriedade, você pode especificar por quanto tempo deseja executar a animação. Nossa próxima propriedade é o atraso na transição. Usamos essa propriedade para determinar quando a transição começará, e nossa última propriedade é a função de tempo de transição. Essa propriedade vem com alguns efeitos embutidos e, usando esses efeitos, você pode controlar a suavidade dessa transição . É isso mesmo. Vamos estudar a prática e ver como ela funciona. Aqui você pode ver, lado a lado, que abro meus recursos visuais do Coretor e meu navegador usando a extensão if server, e eu já criei um documento HTML chamado index E aqui você pode ver um DV dentro deste documento. E a altura do DV é de 200 pixels e também de 200 pixels. Eu não uso nenhum efeito Hover nessa profundidade. E agora eu quero aumentar a largura desse Div. Então, primeiro, vou usar a propriedade de transição. Propriedade de transição. Como eu disse, quero aumentar a largura. Vou chamar a propriedade de largura. Com essa propriedade, precisamos usar outra propriedade. Precisamos usar a propriedade de duração da transição , duração da transição. Usando essa propriedade, podemos declarar por quanto tempo queremos executar essa transição e eu quero executar nossa animação por dois segundos Vou digitar dois a. Você pode pegar seu próprio valor, caso contrário, você também pode usar milissegundos Ao passar o cursor neste d, quero aumentar a largura do contêiner. Vou usar psutocls com um ponto e dois pontos ao passar o mouse. Então, dentro da resistência do carro eu quero aumentar a largura do contêiner, algum tipo com 400 pixels. Se eu definir esse arquivo, se eu definir esse arquivo e passar o cursor nesse mergulho, você poderá ver a transição e a suavidade dessa Da mesma forma, se eu passar o mouse para fora do meu cursor, você também pode ver a suavidade Vamos ver o que acontece se eu remover a transição. Então, vou comentar essas duas propriedades. Se eu definir esse arquivo e meus curs estiverem nessa caixa, você poderá ver o resultado Não há suavidade quando aumenta a largura. Basta um piscar de olhos completar a transformação. É por isso que precisamos usar a propriedade de transição pois ela dará um belo efeito de suavidade a essa transformação E como você pode ver, nós apenas aplicamos essa transição em nossa largura. Mas se eu aumentar a altura em nosso seletor Her, altura 350 pixels E, em seguida, defina esse arquivo. E se eu passar o cursor, como você pode ver, piscar de olhos , aumenta a altura Mas você ainda pode ver o efeito de suavidade na sua largura E se você quiser adicionar o mesmo efeito para altura, depois de largura, você precisa digitar o nome da propriedade height. Além disso, você precisa declarar a duração dessa transformação Então, eu quero usar três segundos. Se eu definir esse arquivo e passar o cursor para esse DV, você poderá ver o resultado Ou com a transformação concluída em dois segundos, mas nossa transformação de altura concluída em três segundos. Além disso, podemos aplicar o mesmo efeito à cor de fundo. Fundo do tipo Soto, verde. Além disso, precisamos chamar essa propriedade de background, height, background. Como plano de fundo, quero usar quatro segundos. Se eu colocar esse arquivo e passar o cursor nesse D, você pode ver que demorou quatro segundos para mudar a cor. Portanto, esse é o uso da propriedade de transição e da duração da transição. E agora eu quero usar todo esse valor em uma única linha. Então, vou comentar essas duas linhas e agora vou chamar apenas de transição. E agora vou usar todo o valor em uma única linha. Então, vou copiar os valores e colar aqui. Além disso, vou copiar os valores de duração e, depois de um espaço, vou colá-los. Se eu definir esse arquivo e o HobermKarr neste Dev, você poderá ver todos os Usando essa propriedade, podemos transformá-la em um forro. Essa é a parte mais curta de toda essa propriedade. Primeiro, você precisa declarar nomes das propriedades de transição e, em seguida, declarar duração da transição Agora, suponha que você queira usar dois segundos de duração de transição para toda essa transformação. Nesse caso, você pode digitar tudo aqui, um Dowlin também precisa passar apenas um tempo de duração, dois segundos Agora ele vai aplicar o efeito de transição, todas essas propriedades. Se eu definir este arquivo e Her, meu cursor e sobre minha coalhada estiverem neste D, você poderá ver o resultado Ao mesmo tempo, foi aplicado para suavizar isso em altura, largura e fundo. Se você quiser usar a mesma duração para todo esse efeito, você pode usar essa abreviatura tudo. É isso para este tutorial Em nosso próximo tutorial, falaremos sobre a função de tempo de transição. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 59. Tutorial de função de temporização de transição de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, falaremos sobre a função de temporização de transição. Usando essa função, você pode controlar a suavidade dessa transição E esses são alguns valores comuns relacionados à função de tempo de transição. Linear, está dentro, está fora, está dentro fora manjericão cúbico E também temos outro valor, mas esses não são tão importantes. Nosso primeiro valor é: é um valor padrão. Especifique um efeito de transição com um início lento, depois primeiro e depois termine lentamente. Nosso próximo valor é linear. Especifica um efeito de transição com a mesma velocidade do início ao fim Do começo ao fim, ele mantém a mesma velocidade. Nosso próximo valor está em. Especifique um efeito de transição com um início lento, e nosso valor es out é onde entra o roll-up oposto. Especifique um efeito de transição com um final lento e nosso próximo valor de tempo será eso. Especifique um efeito de transição com início e fim lentos, e nosso último valor é bezier cúbico Permite definir seus próprios valores em uma função cúbica de Bezier Assim, você pode definir seus próprios valores de tempo. Sem esse valor de seis, temos outro valor, que é o início da etapa, fim da etapa e as etapas. Isso não é tão importante, mas é bom saber disso. Vamos ver como está funcionando na prática. Aqui você pode ver, eu abro um site, qvhypenwzia.com. Aqui você pode ver o exemplo em tempo real desses valores. É linear, está dentro, está fora e está fora. No início, vou aumentar o tempo de duração, a duração para a segunda. Em seguida, vou começar este exemplo com o valor padrão. Se eu clicar no botão Ir, você poderá ver o resultado. Nosso próximo valor é linear. Se eu clicar no botão Ir, você poderá ver o resultado. valor linear mantém a mesma velocidade do começo ao fim, e daí vem se eu clicar no botão Ir, você pode ver o resultado Daí vem então. Se eu clicar no botão Ir, você poderá ver o resultado. Nosso último valor é fácil agora. Então, é fácil especificar o efeito de transição com início lento e lento. Deixe-me mostrar outro exemplo. Como você pode ver, existem cinco DV diferentes e eu uso cinco valores de função de temporização diferentes para eles. Se eu pegar meus carros ou todo esse item, você poderá ver o resultado. Isso é para linear, e isso é para facilitar, isso é para es em. Isso é para es out e isso é para Easy out. Espero que você possa entender a diferença. Então, vamos entrar no estúdio de resultados eator e ver como podemos usá-lo Como você pode ver na tela, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão Lifesaver e já criei um documento STML chamado index dot DML chamado index E como você pode ver, eu já criei D para este exemplo. Em nosso tutorial anterior, aprenderemos sobre a propriedade e a duração da transição. Mas neste tutorial, vamos aprender a função de temporização de transição. Então, vou chamar essa propriedade de função de temporização de transição. Vamos começar a prática com o valor padrão, que é E. Alguns do tipo E. Se eu definir esse arquivo e passar o cursor para esse div, você poderá ver o resultado Esse efeito de transição começa com lento, depois primeiro e depois termina com lento. Esse é o valor padrão e nosso próximo valor é linear. Alguns para digitar, lineares. Se eu definir esse arquivo e passar o cursor para esse div, você poderá ver o resultado Esse efeito de transição mantém a mesma velocidade do começo ao fim, e nosso próximo valor está em. Então, o tipo está ativado Se eu configuro esse arquivo e passo o cursor no DV, especifico um efeito de transição com início lento Da mesma forma, temos um valor oposto fora. Sum Rotive está fora. Se eu definir esse arquivo e as curvas Hoberm estiverem nessa caixa, como você pode ver, especifique um efeito de transição com uma Nosso próximo valor está em entrar e sair. O motivo da soma está dentro e fora. Se eu definir esse arquivo e, mais uma vez, as curvas de Hobermi estiverem nesse D, você poderá ver É especificar um efeito de transição com início e fim lentos. Vamos falar sobre outro valor, que são etapas. Em breve digitarei, Steps. Aqui, podemos concluir nossa transição com etapas. Suponha que eu queira concluir essa transição em duas etapas, então eu quero passar duas aqui. Se eu definir esse arquivo e colocar meus carros nesse DV, você poderá ver o resultado Como você pode ver, em duas etapas, ele completa a transição e, se eu remover o cursor, você poderá ver o mesmo efeito. Em duas etapas, ele conclui a transição. E agora eu quero concluir essa transição em cinco etapas. Se eu colocar esse arquivo e colocar meus carros nessa caixa, você poderá ver o resultado. Em cinco etapas, ele conclui a transição. Portanto, esse é o valor do USKaso Steps. Na maioria das vezes, tentamos evitar esse valor. Não usamos esse valor. Mas, para fins educacionais, você deve ter conhecimento sobre isso. Nosso próximo valor é começar. Então eu vou digitar, dar um passo, começar. Se eu definir esse arquivo e passar o cursor para esse div, você poderá ver em uma única etapa que ele completa a animação Mas se eu usar o valor final da etapa, salve a extremidade e defina esse arquivo. Se eu abrir meu cursor , minha animação começará em até dois segundos. Deixe-me te mostrar. Então, vou passar meu cursor até essa profundidade. Como você pode ver, em dois segundos, ele inicia a animação e completa a transição em uma única etapa Portanto, esse é um UCs de valor final da etapa. Vamos pular para o último valor, que é Qubic bezier Algum tipo de Qubic Bezier. Em Cubic Bezier, você pode completar a animação em Por que não usar o valor da etapa em nossa transição, não há suavidade. Mas no manjericão cúbico, podemos manter a suavidade dessa transição. Suponha que para o nosso primeiro passo, eu vou levar 0,5 segundo, para o nosso segundo passo, eu vou levar 0,6 segundo, e para o nosso terceiro passo, eu vou levar 1 segundo. E para nossa quarta etapa, vou levar 0,1 segundo. Se eu definir esse arquivo e meus cartões estiverem no div vermelho , você poderá ver o resultado Você começa devagar e depois termina primeiro. Para nosso primeiro sf, levou 0,5 segundo e para nossa segunda etapa, levou 0,6 segundo, e para nosso terceiro sf levou 1 segundo, e para nosso último tf levou Este é um valor de usuário do KuScope V. Você pode alterar a duração conforme desejar. Espero que agora esteja claro para você o que é a propriedade da função de tempo de transição. Em nosso próximo tutorial, falaremos sobre a propriedade de atraso de transição. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 60. Tutorial de atraso de transição de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos o que é propriedade de atraso de transição. Basicamente, significa que depois de quanto tempo você deseja iniciar a transição? Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando extensão de servidor Lip e abro meu documento de estimativa anterior. Vamos usar a propriedade de atraso de transição. Vou vincular o atraso da transição e passar o valor de três segundos, três S. Se eu definir esse arquivo e os Obermcurs estiverem nesse D, como você pode ver, depois de três segundos, você inicia a Da mesma forma, se eu remover meu cursor, como você pode ver, em até três segundos, ele faz uma transição completa. Você pode definir a qualquer hora que quiser. Essa é uma função UTs da função de atraso de transição, e agora vou usar a abreviação de toda essa propriedade Como você pode ver, o total usa quatro propriedades de transição, propriedade transição, duração da transição, função de tempo de transição e atraso de transição. Eu quero fazer disso um forro. Para isso, primeiro, vou comentar essas quatro propriedades de transição. Em seguida, vou solicitar a transição. Primeiro, você precisa declarar o nome da propriedade. No nosso caso, com som para colar aqui. E então precisamos passar o valor da duração da transição, que é dois segundos dois a, e então vem a função de tempo de transição, que é E. E nosso último valor é o valor do atraso de transição, que é dois segundos. Agora, não precisamos usar essas quatro propriedades. Só precisa lembrar que precisamos seguir essa sequência. Primeiro, você precisa passar a propriedade, depois a duração e, em seguida, a função de temporização. Por fim, você precisa passar por um atraso. Então, se eu definir esse arquivo e o cursor Hoberm neste DV, você pode ver até dois segundos ele iniciar Como você pode ver, funcionou perfeitamente. E agora eu quero te dizer uma coisa importante. Não é necessário que usemos a transição apenas com o seletor Her Você pode usar essa transição ao carregar sua página. Além disso, uma coisa que você precisa lembrar se não declararmos a propriedade em nosso caso, então vou comentar isso E então defina esse arquivo. Como você pode ver, não vai funcionar corretamente. Portanto, precisamos declarar a propriedade antes de usá-la em nosso seletor de Hobart, e você precisa se lembrar dela E agora vou usar essa transição com diferentes pseudosseletores Então digite ativo. Primeiro, vamos remover o valor do atraso. Então eu vou configurar esse arquivo. Se eu passar por cima do meu carro neste div, como você pode ver, ele não está funcionando porque nosso pseudo seletor Precisamos pressionar o clique do mouse para executar esta animação. Deixe-me te mostrar. Como você pode ver, continuo pressionando o mouse com força, apenas executo minha animação. Quando nosso mouseti estiver ativo, ele executará a animação Caso contrário, não funcionará. Isso é tudo para este tutorial. Espero que agora todas as propriedades de transição estejam claras para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 61. Introdução de CSS Transform 2D: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova propriedade, que é transformar. E, basicamente, vamos nos concentrar na retransformação. Primeiramente, vamos ver um exemplo do que é transformar? Aqui você pode ver dois exemplos. Este é um elemento normativo, e esse elemento profundo é girado no sentido horário Usando a transformação Kuri, podemos girar qualquer profundidade no sentido horário, caso contrário, no sentido anti-horário Da mesma forma, temos outro exemplo. Isso é uma normalidade e esse elemento profundo está inclinado 20 graus ao longo dos Xxs e dez graus ao longo dos YxS Assim, podemos distorcer nosso elemento, girar nosso elemento, escalar nosso elemento e muito Vamos ver quais são os valores em duas transformações D. Como você pode ver, temos um total 11 valores em transformação. Traduza, traduza X, transfira Y, gire, escale, escale X, escala Y, incline, incline, incline Y, e nosso E temos outro valor que é o valor padrão, que é nenhum. E usando a propriedade de matriz, você pode usar todo esse valor em uma linha. Neste tutorial, abordarei esses quatro valores. Traduza, traduza Translate Y e anote-o. Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão de servidor Lip e já criei um documento HTML chamado index dot TML Como você pode ver, dentro da minha estrutura de estimativa, eu já criei o elemento Dev. Eu disse, 200 pixels de largura e 100 pixels de altura. E também digo cor de fundo e moderna. Primeiro, vou começar essa transformação com valor de rotação, tipo de som, propriedade de transformação Vou usar o valor de rotação. Dentro do parêntese, precisamos passar o parâmetro de grau. Suponha que eu queira girar esse elemento em 40 graus. Eu vou passar por 40 DG. Se eu definir esse arquivo, você poderá ver o resultado. Da mesma forma, se eu passar 90 graus e depois definir esse arquivo, como você pode ver, nosso elemento profundo gira 90 graus Nosso valor rotacionado faz parte da titransformação. Ele não apenas gira nosso elemento, mas também gira nosso conteúdo Além disso, você também pode usar um valor negativo. Suponha que eu queira girá-lo -60 graus -60. Se eu definir esse arquivo, você poderá ver o resultado. E se você quiser virar tão fundo, você pode usar menos 180 graus, caso contrário, 180 Se eu definir esse arquivo, você poderá vê-lo como elemento de pré-alimentação. Portanto, esse é o uso do valor de rotação. Vamos falar sobre nosso próximo valor, que é traduzir. Então, eu quero digitar translate aqui. Vou configurar esse arquivo. Como você pode ver, não há mudanças. Agora a pergunta é: qual é o significado de traduzir? O método translate move um elemento de sua posição atual. Como você pode ver, essa é a posição atual desse elemento, e eu quero mover esse elemento, 100 pixels na direção X e 200 pixels yx na direção Nesse caso, precisamos usar esse valor, traduzir. Primeiro, precisamos passar na direção XX, depois precisamos passar na direção x. Então, primeiro, eu quero mover esse elemento na direção de 100 pixels. Eu vou passar 100 px. Isso é para o parâmetro XX. Em seguida, quero mover esse elemento na direção yxs de 50 pixels. Eu vou passar 50 px. Se eu definir esse arquivo, como você pode ver, ele moveu o elemento de sua posição atual acordo com o parâmetro fornecido para Xxs e YxS Na direção SS 100 pixels e na direção YxS 50 pixels. Vamos pular para o próximo valor, que é translate X, Summer digite translate X. É o parêntese, precisamos passar um parâmetro, que é o parâmetro que é Esta função move o elemento ao longo do eixo X. Se eu definir esse arquivo, como você pode ver, essa é a posição exata desse elemento porque não passamos nenhum parâmetro aqui. E agora eu quero mover esse elemento direção Xxs de 200 pixels Eu vou passar 200 aqui PX. Se eu definir esse arquivo, você poderá ver o resultado. Da mesma forma, temos outro valor para a direção YxS. Vou digitar, traduzir Y. Como você pode ver, essa é a posição exata desse elemento Agora eu quero mover esse elemento 100 pixels na direção YxS Dentro do parêntese, vou passar 100 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Ele move nosso elemento 100 pixels na direção YxS. Isso é tudo para este tutorial. No próximo tutorial, abordarei essas propriedades de escala, escala X, escala Y. Obrigado por assistir a este vídeo, fique ligado no nosso próximo 62. Escala CSS Transform 2D: Olá, pessoal. É bom ver você de volta. Este é o segundo tutorial relacionado à transformação. E neste tutorial, vamos aprender essa escala de três valores, escala X e escala Y. Vamos tentar entender o que é escalabilidade e como ela funciona Suponha que esse seja nosso elemento DV, seja a direção excessiva e a direção YxS Se você quiser diminuir e aumentar o tamanho desse elemento, nesse caso, precisará usar o valor da escala. Vamos aumentar o tamanho desse elemento para aumentar o tamanho desse elemento, precisamos de dois parâmetros. Parâmetro de excesso e parâmetro YxS. Esse método de escala aumenta ou diminui o tamanho de um elemento. Então, vamos ver como podemos usá-lo na prática. Como você pode ver na tela, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão Lifesaver, e já criei um documento de estimativa chamado index two dot Então, vamos tentar aumentar o elemento profundo em dois V, duas vezes a largura original e três vezes a altura original. Então, primeiro, vou chamar nossa propriedade de transformação do nome. Transforme a escala. Primeiro, precisamos passar o valor da direção em excesso Quero escalar esse elemento duas vezes. Eu quero passar dois aqui e na direção Xs, eu quero escalar três vezes, então eu quero passar três aqui. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele escala nosso elemento e também dimensiona nosso texto dentro desse elemento. Da mesma forma, você pode reduzir o elemento. Vamos voltar à posição normal. Se eu definir esse arquivo, ele terá o tamanho normal desse elemento e agora quero diminuir o elemento profundo para aumentar sua largura e altura originais Para a direção de x, vou passar 0,5, para a direção de YxS, também vou passar 0,5 Se eu definir esse arquivo, você poderá ver o resultado. Este é o caso de uso do valor de escala e nosso próximo valor é a escala x. Deixe-me mostrar a você. Vamos voltar ao tamanho padrão, vou chamar a escala X e definir esse arquivo. O método KX aumenta ou diminui a largura de um elemento Suponha que agora eu queira aumentar a largura do elemento profundo duas vezes. Nesse caso, precisamos passar apenas o valor XX, e eu quero aumentá-lo duas vezes. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele aumenta a largura duas vezes. Se você quiser diminuir a largura, você precisa passar o valor de 0,1 entre 0,9. Passe de som 0,5. Se eu definir esse arquivo, você poderá ver o resultado. Isso diminui a largura desse elemento. Vamos voltar ao tamanho padrão desse elemento. E agora nosso próximo método é a escala Y. Vou digitar a escala Y. Esse método da escala Y aumenta ou diminui a altura de um elemento Eu quero aumentar a altura três vezes do tamanho original, então eu quero passar três aqui. Se eu definir esse arquivo, você poderá ver o resultado. E da mesma forma, se você quiser diminuir a altura, você precisa passar um valor entre 0,120 0,9 Aqui eu vou passar 0,6, 0,6. Se eu definir esse arquivo, você poderá ver o resultado. Diminuiu a altura desse elemento. Esse é o caso de uso do valor da escala. Espero que agora esteja claro para você como funciona. No próximo tutorial, aprenderemos esses três valores, inclinação x e inclinação Y. Mas antes, aprenderemos outra propriedade, que é Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 63. CSS Transform 2D Skew: Olá, pessoal, é bom ver vocês de volta. Este é o terceiro vídeo relacionado à transformação de histórias em CSS. Neste tutorial, aprenderemos essas três propriedades, inclinação, inclinação x e inclinação y. Esse método usa um elemento ao longo dos eixos X e Y pelos ângulos dados Em vez desse parâmetro, precisamos passar ângulos. Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão lifesaver e já crio um documento HTML chamado index dot ML Então, primeiro precisamos chamar o nome da propriedade transform sum para digitar transform. Em primeiro lugar, vou começar este tutorial com o valor de distorção x. Vou passar a inclinação X. Dentro desse parêntese, precisamos Usando esse valor, podemos mudar somente a direção XX. Se usarmos esse valor a partir desse ponto, ele mudará o ângulo. Suponha que eu vá passar 20 graus. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, a partir deste ponto, é preciso um ângulo de 30 graus. Da mesma forma, você também pode usar um valor negativo. Eu passo -20 graus e, em seguida, defino esse arquivo, como você pode ver, a partir deste ponto, ele gira na direção do lado direito Como nosso ângulo de rotação é de 20 graus, mas nesse caso, -20 graus Como você pode ver, essa rotação se move apenas na direção X, não YX na direção Vamos chegar à posição padrão e vou usar inclinação Yo inclinação Y. Agora, a rotação funciona na direção vertical. Agora, a rotação funciona na Se eu passar 20 graus, 20 DG e definir esse arquivo, você poderá ver o resultado A partir desse ponto, ele se moveu na direção de 20 graus YxS. Basicamente, ele é movido para baixo. Se você quiser movê-lo para cima, você precisa passar o valor negativo Se eu passar de -20 graus e depois definir esse arquivo, você poderá ver o resultado Espero que agora esteja claro para você como as propriedades X e sky funcionam. Vamos falar sobre nosso próximo valor, que é apenas distorção No início, vou voltar para a posição padrão e vou digitar apenas SQ Neste método, em nosso primeiro parâmetro, precisamos passar o ângulo X e, em seguida, precisamos passar o ângulo YX No começo, vou passar pelo ângulo Xs de 30 graus. E então eu vou passar pelo ângulo YX de 20 graus. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, com valor positivo, você também pode usar valor negativo. Suponha que eu queira passar -20 graus na direção Y xs. Se eu definir esse arquivo, você poderá ver o resultado. Depende de você, como você pode usar esses valores? Vamos falar sobre outra propriedade relacionada à transformação, esse nome de propriedade é origem da transformação. Agora, a questão é: qual é a propriedade Ukage of transform origin É tudo U para mudar a posição no elemento de transformação. O que isso significa? Suponha que esse seja nosso elemento DV Se você se lembrar do valor da rotação, também poderá se lembrar do ponto de rotação, que é o centro desse elemento Esse ponto de rotação está no centro de XXs e também de YxS, mas não quero girar meu elemento a partir do Eu quero mudar o ponto de rotação. Eu quero girar esse elemento a partir deste ponto, significa canto do laptop Da mesma forma, se eu quiser girar a partir desse ponto , esse é o nosso canto inferior direito e esse é o canto inferior do colo Além disso, este é o nosso canto superior direito. Você pode entender o ponto pelo nome. Caso contrário, você pode obter um valor percentual ou de pixel. Se você quiser pegar o ponto de rotação dentro desse elemento profundo, algo nessa posição, sim, você pode. De acordo com a posição do ponto branco, você precisa pegar 20% na direção do excesso e também 30% na direção YxS Apenas uma coisa que você precisa lembrar ao usar essa propriedade você pode alterar a posição do elemento de transformação. Vamos até o criador do Visual Studio e veja como funciona. Como você pode ver, este é o nosso ty normal, e eu giro esse dp da posição central em 20 graus Mas se eu mudar a posição da origem da transformação a partir deste ponto, o som para t transforma a origem. E eu vou passar da posição do lábio XXs e da posição YxStp Som para passar por cima. Antes de configurar esse arquivo, quero voltar a essa posição normal. Vou comentar essas duas linhas. Se eu definir esse arquivo, agora ele voltará à posição normal. Agora vou descomentar essas linhas, e agora vou configurar esse arquivo, basta focar neste canto Se eu definir esse arquivo, você poderá ver o resultado. Deste canto , ele se move 20 graus. Vamos aumentar o valor da rotação. Vou digitar 80 graus. Se eu definir esse arquivo, você poderá ver esse resultado. A partir desse ponto, ele gira 80 graus. Vamos voltar à posição padrão. Mais uma vez, vou mudar o ponto de rotação. Vou inclinar para o fundo direito. Agora, a partir desse ponto, ele rotacionará nosso elemento Se eu definir esse arquivo, você poderá ver o resultado. Agora, a rotação ou está no ponto é esse ponto. Vamos voltar à posição padrão. Mais uma vez, vou mudar a rotação ou está na posição. Mas desta vez eu não vou usar nenhum canto. Agora eu quero fazer um ponto de rotação neste lugar. Direção XX, vou passar 20% para a direção YxS, vou pegar 40% Se eu definir esse arquivo, você poderá ver o resultado. A partir desse ponto, ele gira o elemento em 80 graus. Se eu passar XX é o valor zero e valor YX 100 e depois definir o arquivo Além disso, vou alterar o ângulo de rotação 20 graus e, em seguida, definir esse arquivo novamente. Como você pode ver, agora nosso ponto de rotação é canto inferior oposto porque na direção X, usamos o valor zero, mas na direção YxS, usamos o valor de 100% É por isso que nosso ponto de rotação é o canto inferior do colo. Agora, a questão é: qual é o caso de uso dessa propriedade? Basicamente, essa propriedade é usada para animação. Como você sabe, este é o nosso tutorial de animação CSS. É por isso que precisamos aprender sobre isso. Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos nosso próximo valor. Vamos aprender nosso último valor, que é matriz. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 64. CSS Transform 2D Matrix: Olá, pessoal. É bom ver você de volta. Este é o último tutorial relacionado à transformação. E neste tutorial, vamos aprender o valor da matriz. Agora a questão é: o que é matriz? O método de matriz, combine todos os métodos de transformação tui em um Esse método usa um total de seis parâmetros, contendo a função de matriz que permite girar, dimensionar, mover e inclinar Especialmente se não usarmos muito esse elemento. Então, vamos ver como isso funciona. Como você pode ver, lado a lado, abro meu Visual Studio Coator e meu navegador usando a extensão if server, e já crio um documento de estimativa chamado Idexfo dot SML Primeiro, chamarei o nome da propriedade transform e chamarei nossa matriz de valores. Em primeiro lugar, precisamos passar o valor da escala X. Então, eu vou passar por um. Em nossa direção excessiva, não quero escalá-la. É por isso que eu passo um valor e, em seguida, precisamos passar o valor de inclinação Y, e eu vou passar -0,3 E então precisamos passar o valor de inclinação x, e aqui vou passar zero Em seguida, precisamos passar o valor da escala Y, e aqui vou passar um. Agora temos apenas dois parâmetros lay translate X e translate Y. Para traduzir X, vou passar zero, e para traduzir Y, vou passar zero Se eu definir esse arquivo, como você pode ver, é apenas inclinar nosso elemento profundo em -0,3 graus E se você quiser escalar esse elemento duas vezes, você precisa passar a escala X dois e a escala Y dois. Se eu definir esse arquivo, você poderá ver o resultado. Com inclinação, também dimensiona nosso elemento. Esse é o caso de uso desse método matricial. Agora, vamos usar todo o valor da transformação ti, um por um, com o efeito Her e tentar criar uma animação flutuante Vou comentar essa linha e, a princípio, vou criar o pseudo seletor, D, com dois pontos Em seguida, dentro do Calibra diz: vou usar a propriedade transform e vou digitar transform No início, vou usar o valor da escala e quero escalar esse elemento em duas vezes. Eu vou passar para aqui. Se eu definir esse arquivo e passar o cursor para esse elemento de, você poderá ver o resultado. Como você pode ver, em uma única etapa , ele completa a transição. Para proporcionar uma suavidade nessa transformação, precisamos usar a propriedade de transição Eu quero digitar a transição. Aqui, primeiro, precisamos declarar da propriedade e o nome da nossa propriedade é transform Em seguida, precisamos declarar o tempo de transição, que é de 1 segundo Se eu definir esse arquivo e passar o cursor sobre esse elemento de, você poderá ver a suavidade dessa transformação Mas neste exemplo, nosso elemento profundo é dimensionado a partir da posição central. Mas agora eu quero mudar a posição de origem da transformação. Então, para digitar, transforme Aisin. Top tardio. Se eu definir esse arquivo e como minha coalhada está nesse elemento profundo, como você pode ver, a partir deste ponto, ele escalará nosso elemento profundo Vamos usar nossas próximas duas propriedades de transformação d, que é translate. Então, para duplicar essa linha, quero comentar a anterior Aqui vou digitar translate. E eu quero mover nosso elemento profundo, 200 pixels na direção dos excessos e 150 pixels na direção YxS Se eu colocar esse arquivo e Her Mikers nesse elemento profundo, você poderá ver o resultado Ele move nosso elemento profundo, 200 pixels excedem a direção e 150 pixels YX é Vamos usar nosso próximo valor, que é distorção. Mais uma vez, vou duplicar essa linha e comentar a anterior Aqui vou digitar skew. E na direção XX, quero girá-la em 20 graus e na direção x, quero girá-la em dez Se eu definir esse arquivo e Obermkurs estiverem tão profundos, você poderá ver Como você sabe, nossa origem de transformação é Lap Off. Então, quando eu, Obermkers mergulhando, você pode ver o resultado Espero que agora esteja claro para você o que é transformação de dois D e como podemos usá-la em nossa animação. Obrigado por assistir a este vídeo. Em nosso próximo tutorial, aprenderemos três transformações D. Fique ligado no nosso próximo tutorial. 65. Tutorial de Transformação 3D de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos esses quatro métodos de tradução. Traduza, traduza Y, traduza Z e traduza três D. Já aprendemos sobre essas duas VLU em nosso tutorial anterior Mas aqui, vou usá-lo com três transformações D. Vamos ver como funciona. Como você pode ver, lado a lado, abro meu Visual Stereo Creator e meu navegador usando a extensão Lifesaver, e já criei um documento HTML chamado index dot HTML chamado Como você pode ver, dentro do contêiner de patentes, temos um contêiner em caixa Vamos usar nossa primeira VLU, mas antes vou chamar a propriedade transform Alguns para digitar transform. Nosso primeiro valor é traduzir X, alguém para digitar, traduzir X. Dentro do parêntese, vou passar 200 pixels Se eu definir esse arquivo e cursor Hobermi neste elemento, você poderá ver Isso moverá meu elemento de 200 pixels na direção XXLs. E se você quiser movê-lo na direção oposta, nesse caso, você precisa passar -200 pixels Se eu definir meu arquivo e cursor Hobermi nesta caixa, você poderá ver o resultado Já aprendemos isso em nosso tutorial de precessão, vamos fazer essa transição em três D. Quero passar outro valor, que é prospectivo, prospectivo Também quero passar o valor de rotação Y, girar, Y aqui vou passar 30 graus Se eu definir esse arquivo e passar meu cursor neste elemento de, você poderá ver o resultado Como você pode ver, ele move nosso elemento profundo e também gira nosso elemento profundo Você sabe, usamos prospectiva, é por isso que ela dá uma aparência de três D. Então, vamos falar sobre nosso próximo valor, que é traduzir Y. Então, para usar, traduza Y. Aqui eu vou usar o valor positivo Se eu definir esse arquivo e colocar o cursor sobre esse elemento de, você poderá ver o resultado Deixe-me usar o valor de rotação x. Então, para digitar, gire X. Se eu definir esse arquivo e o Obermicursor neste DP, você pode ver que agora ele parece Vamos usar nossa próxima propriedade, que é traduzir Z, alguém para digitar, traduza Z. Se eu passar 200 pixels, defina esse arquivo Se eu usar o cursor Hoberm neste div, como você pode ver, ele não está funcionando Mas eu já disse traduzir esse valor neste mergulho. Vamos usar outro valor com isso. Vou usar o valor de rotação com isso, rotação y, 60 graus. Se eu definir esse arquivo e o cursor Hobermi neste DV, você poderá ver Mas parece muito parecido com traduzir X, mas não é. Deixe-me te mostrar. Deixe-me usar o valor prospectivo com isso SmTypSpective, prospectivo de 900 pixels. Se eu definir esse arquivo e cursor Hobermi neste DV, você poderá ver Deixe-me mostrar a demonstração real, que você possa entendê-la adequadamente. Suponha que esse seja nosso elemento de desenvolvimento. No início, vou girar esse DVlement se usarmos o valor transls Z, então ele se moverá dessa maneira Espero que agora esteja claro para você como a tradução de valores z funciona. Vamos falar sobre nosso último valor, que é traduzir três D. Alguns para digitar, traduzem três D. Aqui precisamos passar o total de três valores, XX YxS e Zaxs Suponha que para XXs eu passe 50 pixels e para xs, eu passe 50 pixels também para Zexs eu passe zero Se eu definir esse arquivo e abrir meu Carter neste DV, você poderá ver o resultado E se eu aumentar o valor do Translate Z, suponha que eu digite 40 pixels e, em seguida, defina esse arquivo e passe o cursor sobre esse desenvolvimento, você poderá ver o resultado. Ao mesmo tempo, seu movimento na direção XX é direção, direção YxS e direção Z xs Espero que agora esteja claro para você o que é o valor de trânsito três D. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos esses dois valores, escala três D e escala Z. Obrigado por assistir a este vídeo, fique ligado no nosso próximo 66. Escala de tutorial de Transformação 3D do CSS: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado à transformação de três D. Neste tutorial, aprenderemos esses quatro métodos, escala ScalX Y, escala Z e habilidade três D. Já aprendemos sobre método ScalX e a escala Y em nossos tutoriais anteriores Mas, mais uma vez, vou repetir esse método neste tutorial. Mas o método mais importante para três D é a escala. Ele define uma transformação de escala de três D fornecendo um valor para os Zs e nosso último método é a escala três D. Usando esse método, podemos usar três valores diferentes ao mesmo tempo. Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu coordenador do Visual Studio e meu navegador usando a extensão p server e já crio um documento HTML chamado index dot HTML Então, primeiro, vou usar o nome da propriedade transform, sum to type, transform aqui. Nosso primeiro valor é a escala SKXUTyp x aqui, habilidade X. Eu quero escalar esse elemento duas vezes na direção x, então vou passar Se eu definir esse arquivo e colocar meu cursor nesse elemento D, você poderá ver o resultado Da mesma forma, podemos usar o valor da escala Y. Vou alterar a escala Y. Se eu definir esse arquivo e meu cursor sobre esse elemento de, você poderá ver o resultado Como não fornecemos nenhum ponto de origem de transformação, é por isso que é uma escala intermediária desse elemento. É uma posição de origem padrão. Mas se você usar o valor de origem de transformação com isso, deixe-me mostrar e seguida, definir esse arquivo e os cartões Hobermi estiverem nesse desenvolvimento, você poderá ver o resultado diferente Vamos falar sobre nosso valor mais importante, que são as habilidades. Mas primeiro, vou comentar essa linha. Vou digitar escalas a aqui. Dimensiona de acordo com o tempo. Se eu definir esse arquivo e cartões Hobermi estiverem em desenvolvimento, como você pode ver, não haverá alterações porque esse valor só funciona com três transformações D, precisamos dar a ele três D L. Vou comentar esta linha e vou usar esse valor com prospectivo e rotacionar Y. Além disso, vou usar esse valor com prospectivo e vou descomentar essa linha. vou Se eu definir esse arquivo e passar o cursor sobre esse desenvolvimento, agora você poderá ver o resultado. Se eu aumentar o valor do conjunto de escala, somar o tipo sete aqui e definir esse arquivo e passar o cursor sobre esse desenvolvimento, agora você pode ver a diferença, como funcionou. Da mesma forma, se eu diminuir o valor da escala, somar para o tipo 0,5 e definir esse arquivo e passar o cursor sobre esse desenvolvimento, você poderá ver o resultado. Espero que agora esteja claro para você como o método Scalet funciona Vamos falar sobre nosso último método, que é a escala três D. Tipo soma escala três D aqui, escala três D. Usando esse método, aqui precisamos passar um total de três valores na escala X, escala Y e nas escalas. Usando isso, podemos usar três valores diferentes ao mesmo tempo. Então, para XXs, eu quero escalá-lo duas vezes. Para YxS, eu quero escalá-lo três vezes e para Xxs eu quero escalá-lo cinco Se eu definir esse arquivo e colocar meu cursor sobre esse elemento de desenvolvimento, você poderá ver o resultado Inicialmente, ele escalou esse elemento duas vezes na direção do excesso, depois três vezes na direção de Y x e depois cinco vezes na direção da Xerox Esse é o uso do valor D da escala três. Espero que agora esteja claro para você. Isso é tudo para este tutorial. No próximo tutorial, aprenderemos sobre uma nova propriedade, que é prospectiva Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 67. Tutorial de CSS Transform Rotate 3D: Olá, pessoal. É bom ver você de volta. Neste tutorial, iniciaremos três transformações em D. Em nosso capítulo anterior, aprendemos sobre duas transformações D. Mas neste capítulo, aprenderemos três transformações D. Sem três transformações em D, não podemos imaginar a animação. Então, vamos ver os valores relacionados à transformação de três D. Como você pode ver, temos um total de dez valores relacionados à transformação de três D. Gire X, gire Y, gire Z, gire três D, transfira Z, transfira três D, escale três D, escala Z, prospectiva e matriz três D. No método de rotação X, precisamos Da mesma forma, precisamos passar o valor do ângulo para girar Y, mas para girar três métodos D, precisamos passar o total de quatro parâmetros, X Y Z e o valor do ângulo Então, neste tutorial, vamos abordar esses quatro métodos, girar x, girar Y, girar Z e girar três D. Vamos ver como os métodos Como você pode ver, precisamos indicar um elemento profundo em nosso documento, e eu disse um valor enraizado diferente neste exemplo Se eu passar por cima do meu cursor, girar o elemento x de profundidade, você poderá ver a transformação Dessa forma, gire o trabalho X. Aqui, usamos o valor rotatx com prospectivo. Se usarmos o valor de rotação, ele desenha uma linha na direção X desse ponto até esse ponto Deixe-me mostrar o verdadeiro exemplo. Suponha que seja um elemento profundo e, se eu usar o valor rotatx, ele criará uma linha desse ponto até esse ponto Esta é a nossa linha de origem de transformação. Se eu passar um valor positivo, algo em 40 graus, ele girará nosso elemento dessa maneira Se eu passar de -40 graus , ele girará esse elemento dessa maneira Consegue ver meu rosto? Absolutamente não. Mas se eu usar um ângulo de 90 graus , ele vai girar esse elemento assim Agora, o elemento não está visível corretamente. Mas se eu girar 180 graus, agora você pode ver a parte oposta desse elemento Dessa forma, a rotação aquecerá. Vamos falar sobre nosso próximo valor, que é girar Y. Se eu colocar meu cursor neste DV, você poderá Além disso, usamos valor prospectivo para que você possa entender esse valor facilmente Se usarmos o valor de rotação Y, ele desenha uma linha desse ponto até esse ponto Direção média de YxS. É por isso que o chamamos de rotação Y. Usando o valor do ângulo, você pode girá-lo para o lado esquerdo, caso contrário, para o lado direito Vamos ver o exemplo de como isso funciona. Se usarmos o valor de rotação Y, ele desenhará uma linha desse ponto até esse ponto, significando a direção de YxS Essa é a nossa linha de origem e, por padrão, ela sempre veio para o centro. Se eu passar por um perímetro positivo de 40 graus, ele girará esse elemento dessa maneira Da mesma forma, se eu passar de -40 graus , ele girará esse elemento dessa Se eu girar esse elemento em 90 graus, agora todo o elemento ficará menos visível e você poderá ver meu rosto Se eu girar 180 graus, você pode ver a parte oposta desse elemento Nosso próximo valor é girar Z. Se eu girar o cursor neste mergulho, você poderá ver Ele define três rotações D ao longo dos Zs. Vamos ver como isso funciona. Este é o exemplo da rotação do Zexis. Ele define três rotações D ao longo do eixo Z; por padrão, ponto de análise está sempre centralizado e, usando valor positivo ou negativo, podemos girá-lo dessa maneira, caso contrário, dessa maneira Nosso último e último valor é girar três D. É definir rotação completa de três D. Se eu colocar o cursor do Hoberm nesta div, você poderá ver o resultado. No final deste exemplo, darei uma demonstração de como isso funciona. Vamos começar a prática com o valor da rotação dos ovos. Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão if server, e já crio um documento de estimativa chamado demo dot TML Como você pode ver, dentro de um contêiner principal, eu crio um contêiner de caixa e disse altura e largura semelhantes para nosso contêiner pai e nosso contêiner filho Para o recipiente principal, eu disse uma cor de fundo cinza, e para o recipiente infantil, eu digo cor de fundo chocolate Vamos chamar a propriedade de transformação e usar o valor de rotação dos ovos Então, para chamar transform rotate X. Aqui precisamos passar um parâmetro de ângulo de rotação, então eu vou digitar 40 Se eu definir esse arquivo, aqui você pode ver o resultado. Ei, está certo, mas você não pode sentir muito a mudança. Para isso, vou usar a perspectiva e transição que você possa entender com muita facilidade Vou usá-lo com o seletor Her, ponto, caixa, dois pontos, Dentro das calibrações, vou chamar essa propriedade. E vou chamar propriedade de transição para suavidade. Transição e o nome de nossa propriedade é transform e nossa duração de transição é de 1 segundo. Se eu dissesse esse arquivo e passasse o cursor sobre esse elemento profundo, você pode ver como ele funciona, mas não está nada claro. É por isso que vou usar outro vdo que é prospectivo Isso lhe dará os três x dois, e eu não vou explicar como as perspectivas funcionam Para fins de prospecção, vou te dar um vídeo separado. Vamos usar o valor prospectivo. Então digite prospectivo. E dentro dos parênteses, precisamos passar o valor e nosso valor é 200 pixels Se eu definir esse arquivo e depois passar o cursor sobre esse elemento de, você poderá ver o resultado, como funciona. Suponha que ele crie uma linha desse ponto até esse ponto , significando a direção Xx. Usando esse valor, você pode girá-lo para cima, caso contrário, para baixo Esse é o uso do valor de rotação. Vamos mudar o ângulo de rotação em 90 graus. Se eu definir esse arquivo e passar o cursor sobre esse elemento de, agora você poderá ver o resultado. Agora está completamente invisível. Se você quiser revertê-lo completamente, precisará passar o valor de 180 graus em 180 graus. Se eu definir esse arquivo e passar o cursor neste mergulho, você poderá ver o resultado. Como você pode ver, ele gira nosso elemento deve em 180 graus. Além disso, você também pode alterar a posição de origem da transformação. Deixe-me te mostrar. Vou chamar a propriedade de origem da transformação. Transforme a origem. Agora eu não quero girar esse elemento no meio desse elemento Eu quero girá-lo a partir deste canto. Nesse caso, precisamos usar o valor inferior direito, direito, fundo. Antes de configurar esse arquivo, também vou alterar o ângulo de rotação, que é de 30 graus. Se eu colocar esse arquivo e passar meu cursor nesse elemento de, como você pode ver, no canto inferior direito, ele gira 30 graus Espero que agora esteja claro para você como o valor rotativo funciona. Então, vamos pular para o próximo valor, que é rotacionar Y. Mas antes, vou comentar essa linha E aqui, vou digitar rotate Y. Se eu colocar esse arquivo e cursor Obermi neste elemento, você poderá Como você pode ver, divida nosso elemento e desenhe uma linha desse ponto até esse ponto. É a direção YX média. E a partir dessa linha, você pode girá-la para o lado esquerdo, caso contrário, para o lado direito, de acordo com o valor do ângulo Tudo é semelhante ao valor de rotação x. Basta desenhar uma linha e dividir esse elemento desse ponto até esse ponto na direção YxS É por isso que o chamamos de rotação Y. Vamos falar sobre nosso próximo método, que é girar Z. som apodrece, gire Z. Se eu definir esse arquivo e passar cursor em profundidade, Ele traça uma linha no Zdaxs. Eu quero dizer meio desse elemento DV. Deixe-me mostrar um exemplo e ver como funciona. E você pode ver uma foto. Se você usar girar x, ele desenha uma linha desse ponto até esse ponto Usando esse valor, você pode girar seu elemento para cima ou para baixo Se você usar o valor de rotação Y, poderá girar seu elemento, lábio ou lado direito Se você usar o valor de rotação Z, deixe-me mostrar como funciona Espero que agora esteja claro para você como funcionam as rotações desse valor Vamos falar sobre nosso último valor, que é rotacionar três D. Primeiro, vamos ver a demonstração real Se eu usar a rotação três D, podemos usar todo o valor da rotação de uma vez Esta linha é para a linha de rotação XXS, e esta é para yXst , uma é a nossa linha Zxs Agora vou girá-lo na direção S. Ao mesmo tempo, vou girá-la na YxS, esta linha é para a direção Xxs, ao mesmo tempo, podemos girá-la na direção ao mesmo tempo, podemos girá-la na Basicamente, é definida uma rotação de três D. Primeiro, vou chamar o valor, girar o CD. Então, dentro dos parênteses, você precisa passar um total de quatro parâmetros, XX YxS Zaxs Você pode especificar o acesso da rotação usando um número para os três primeiros argumentos Mas para o quarto argumento, você precisa especificar o valor do ângulo. Para Xs, vou passar duas vírgulas; para YxS, vou passar menos um menos um Da mesma forma, para Zaxs também vou passar menos um. Mas em nosso quarto parâmetro, precisamos passar o valor do ângulo, alguns para digitar 45 graus. Se eu definir este arquivo e Rober mycar neste elemento de desenvolvimento, você poderá ver Este é o Reino Unido do método de rotação de três D. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei esses dois valores. Traduza Z e traduza três D. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 68. Tutorial de perspectiva de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova propriedade, que é CSS prospectiva Em nossos tutoriais anteriores, já aprendemos sobre isso Mas neste tutorial, vamos usá-lo individualmente. Mas antes de começarmos a prática, vamos ver alguns exemplos. Aqui você pode ver que este é o exemplo da rotação e esse também é o exemplo da rotação Mas a diferença é que, para esse elemento, usamos o prospectivo. É por isso que fornece três D L. Da mesma forma, este é o exemplo da rotação YXS Para nosso primeiro exemplo, não usamos prospectivo, mas para nosso segundo exemplo, usamos prospectivo É por isso que fornece três D L. Se você usa prospectivo, pode ver claramente a rotação e, se não usar prospectivo, consegue entender a Vamos tentar entender isso com mais detalhes. Suponha que você esteja assistindo uma tela de projetor a partir deste ponto Você pode dizer que a distância e o ângulo do ponto de vista são chamados de prospectivos Parecerá maior se você olhar mais de perto e se você olhar à distância, parecerá menor. Deixe-me mostrar a demonstração real. Suponha que esse seja nosso elemento div. Se você olhar de perto, parecerá maior e, se você olhar à distância, parecerá menor. Isso é chamado de prospectivo. Parece pequeno e grande, apesar de não ter sido redimensionado. Espero que agora esteja claro para você que prospectivo vem com outra propriedade prospectiva Por padrão, ele vem com um centro, mas você pode alterar o prospectivo onde quiser Vamos tentar entender a origem prospectiva com detalhes. Suponha que este seja o seu quarto. Se você olhar da posição central, poderá ver claramente todas as paredes e o chão. Este é o seu último andar, este é o seu andar de baixo. Esta é a parede do lado direito, essa é a parede lateral do lábio e essa é a parede do fundo. Mas se você olhar para o seu quarto do canto do laptop, eu quero dizer que deste canto, então você não pode ver o andar esquerdo e o último andar mais cedo. Da mesma forma, se você olhar para o seu quarto a partir dessa posição, significa posição superior, então você não pode ver o último andar mais cedo. Você pode ver o piso inferior, parede de fundo, a parede lateral direita e a parede lateral esquerda porque sua posição de origem potencial é superior Da mesma forma, se você olhar para o seu quarto pelo canto superior direito, não poderá ver a parede certa e também seu último andar é pouco visível ou não. Porque sua origem potencial está certa e no topo. Mas se você olhar para o seu quarto do lado direito, por engano, eu digito a palavra certa na posição do elevador. Se você usar a origem prospectiva do lado direito, não poderá ver a parede direita corretamente Você pode ver o fundo, você pode ver o piso inferior, você pode ver o andar superior e também você pode ver a parede lateral do lábio. Mas sua parede lateral direita não está visível. Se você usar a origem prospectiva no canto inferior direito , também não conseguirá entender a parede direita Como você pode ver, também a parede direita não é visível. Com isso, o piso inferior raramente é visível. Da mesma forma, se você olhar para o seu quarto da posição inferior, não poderá ver o piso inferior corretamente. Se você olhar para o seu quarto pelo canto inferior do colo, não poderá ver o oval. Além disso, você não pode ver completamente o piso inferior. Se você usou apenas a origem prospectiva do colo, não poderá ver o lábio al. Você pode ver o val direito, você pode ver o fundo l, você pode ver o piso inferior, também você pode ver o andar superior, mas você não pode ver o lábio al. Todos esses são valores de origem. Além disso, você pode usar o valor percentual com isso. Com o prospectivo, você pode alterar a origem do prospectivo. Vamos começar com a prática e tentar entender como podemos usar propriedades de origem prospectiva e prospectiva Como você pode ver, lado a lado, abro meu Visual Studio Coreor e meu navegador usando a extensão if server, e já crio um documento HTML chamado index dot TML Como você pode ver, há um elemento DB. Agora eu quero girar esse DVElement ao posicionar meu cursor sobre Então, aqui eu vou usar a propriedade transform, então digite transform. Transforme a rotação, gire X e eu quero girá-la até 50 graus na Se eu definir esse arquivo e Hobermkaza nesse elemento profundo, você poderá ver Como você pode ver, ele gira nosso elemento, mas não está claro porque não usamos nenhum valor prospectivo Em nossos tutoriais anteriores, usamos a prospectiva como um valor de transformação, mas agora vou usar a propriedade potencial e precisamos usar essa propriedade potencial em nosso contêiner base, e precisamos usar essa propriedade potencial não na continuadora secundária Aqui, precisamos amarrar a perspectiva. Vou ultrapassar o Prospective 800 pixels. Se eu definir esse arquivo e o Hobermcur estiver neste elemento, agora você pode ver Em nossos tutoriais anteriores, usamos a perspectiva como um valor de transformação Você só precisa se lembrar de que, em potencial dê ao elemento três uma aparência D. Além disso, lembre-se de que, se você usa a propriedade potencial individualmente, precisará usá-la no contêiner principal, não no contêiner filho Agora vamos mudar o valor potencial. Suponha que eu passe dos 100. Como eu disse anteriormente, diminuir o valor do prospectivo fará com que as coisas pareçam maiores Se eu passar o cursor sobre este elemento, você pode ver a diferença Agora parece maior porque observamos esse elemento de perto. É por isso que parece maior. Da maneira oposta, se aumentarmos o valor prospectivo de 1.200 pixels e, em seguida, definirmos esse arquivo e passarmos o cursor sobre esse elemento, você poderá ver Agora você pode ver o objeto menor. Porque sabemos que um objeto parece pequeno quando o vemos à distância. Como você pode ver, agora a distância é de 1.200 pixels. Por enquanto, vou digitar um prospectivo de 800 pixels. Vamos falar sobre a origem potencial e como ela funciona. Então, primeiro, vou chamar essa propriedade, que é origem prospectiva, origem prospectiva Por padrão, centro de valor S e centro de valor YxS. Então, tipo de raiz, centro e centro aqui, centro central. Se eu definir esse arquivo e carros Hobermi estiverem nesse desenvolvimento, como você pode ver, do ponto central, ele gira nosso elemento Como você pode ver, não há mudanças porque essa é a posição central. No começo, vou usar valor. Origem prospectiva, certo. Se eu definir esse arquivo e o Obermicars estiver nesse desenvolvimento, você poderá ver o resultado Como você pode ver, nosso elemento não transborda do lado direito porque agora nossa perspectiva está do lado certo É por isso que não podemos ver o véu certo. Da mesma forma, se usarmos valor de elevação p e definirmos esse arquivo e bermca neste elemento de, agora você não pode ver o lip vel, como você pode ver, nosso elemento não transborda do lado do lábio, mas transborda do Se usarmos qualquer forma de cubo, você poderá entendê-la adequadamente Você pode testar todos os valores de origem, um por um. Além disso, você também pode usar o valor percentual. Vamos aprender tudo isso quando trabalharmos com projetos reais. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 69. Tutorial de estilo de transformação de CSS: Olá pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova animação CSS relacionada à propriedade, e o nome da propriedade é transform style. Basicamente, esse papel funciona com transform Property. Vamos aprender mais sobre isso. A propriedade de estilo de transformação especificou como declarar que os elementos são renderizados em três espaços D. Basicamente, essa propriedade vem com dois valores. Nosso primeiro valorem é plano. Eu especifiquei que o elemento filho não preservará sua posição de três D, esse é o valor padrão. O valor principal e importante é preservado três D. Especifica que os elementos secundários preservarão sua posição de três D. Basicamente, quero dizer que, se usarmos três valores D preservados no elemento pai , nosso elemento pai funcionará como um objeto de três D. Deixe-me mostrar o exemplo. Aqui você pode ver que animamos um elemento filho, como você pode ver, o elemento dV menor passando pelo elemento DV maior Como você sabe, dv maior ou elemento pai. Se usarmos três valores D preservados , podemos realizar esse tipo de três efeitos D. Se não usarmos o valor preservado de três D, deixe-me mostrar a você. Agora você pode ver que nosso elemento pai não age como um elemento de três D, e nosso elemento filho não pode passar pelo elemento pai. Portanto, esta é a gaiola de uso da propriedade de estilo transform. Deixe-me mostrar outro exemplo. Aqui você pode ver um pai Deb, e dentro do pai Deb, temos um filho profundo, e eu giro nosso filho a 40 graus na ducção YxS. Por padrão, nosso estilo de transformação de caneta É por isso que nossos pais, Deep não agem como três objetos. Mas se usarmos a propriedade de estilo de transformação e preservarmos três valores D , nossa profundidade de fundo agirá como três objetos, e nosso filho, em movimento profundo passará pelo elemento de fundo. Então, sem perder seu tempo, vamos começar pela prática Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão de servidor Lip e já crio um documento SML chamado index dot HTML Aqui você pode ver o total de dois elementos div, elemento pai e nosso elemento filho Como você pode ver, já giramos nosso elemento filho 50 graus na direção Xxs, e eu já uso a propriedade prospectiva em nosso Eu digo valor prospectivo de 800 pixels agora quero girar o elemento DIV pai Vou usar a propriedade transform em nosso contêiner principal. Transformar. Gire Y, e eu quero girá-lo 30 graus na direção YX, Se eu definir esse arquivo, você poderá ver o resultado. Sim, ele rotacionou nosso elemento, mas não forneceu nenhum loop de três D porque não usamos nenhuma propriedade de estilo de transformação, então vou usar a propriedade então vou usar a transformação, estilo de transformação Por padrão, essa propriedade veio com um valor fixo, mas vou usar três valores D preservados. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver nosso elemento filho passar pelo elemento pai. Você precisa se lembrar de que precisa usar essa propriedade em seu contêiner principal, não no contêiner filho. Se eu ativar minha barra de ferramentas do desenvolvedor e selecionar esse elemento, como você pode ver, nosso valor de rotação de transformação X é de 50 graus Ei, esse é o nosso elemento infantil. Se eu aumentar o ângulo de rotação, você pode ver a transformação. Se eu diminuir o ângulo de rotação, você também poderá ver a transformação. Vamos girar o contêiner principal. Então, vou selecionar o contêiner pai e vou girar esse contêiner pai Se eu girar o contêiner principal, você poderá ver a aparência de três D. Agora você pode ver claramente nosso elemento filho passar pelo elemento pai. Essa é a gaiola de uso da propriedade de estilo transform. Agora, vamos mudar a origem da transformação do nosso elemento filho. Então digite, transforme a origem e eu escrevo na parte inferior. Se eu definir esse arquivo, agora você poderá ver o resultado. De baixo, ele gira nosso elemento filho em 50 graus. Deixe-me te mostrar claramente. Se eu aumentar o valor de rotação ou elemento pai, você poderá vê-lo claramente. Como você pode ver, do lado inferior, ele gira nosso elemento Isso é tudo para este tutorial. Espero que agora você entenda qual é o uso da propriedade de estilo de transformação Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 70. Tutorial de visibilidade de backface de CSS: Olá, pessoal. Bem-vindo de volta. Mais uma vez, eu vim com um novo tutorial e, neste tutorial, você aprenderá uma nova propriedade, que é a visibilidade da face traseira Você precisa usar essa propriedade com a propriedade transform. Antes de começar a prática, vamos tentar entender o que é visibilidade da face traseira A propriedade de visibilidade da face traseira define se a face traseira de um elemento deve ou não estar visível quando voltada para o usuário Agora a questão é: o que é backface? A face traseira de um elemento é uma imagem espelhada da face frontal que está sendo exibida Suponha que dentro desse elemento de, você digite hello world. Se eu girar 180 graus, você poderá ver a face traseira de um elemento Como você sabe, ele reflete seu elemento. Como você pode ver a reflexão do texto. Essa propriedade é útil quando um elemento é girado. Ele permite que você escolha se o usuário deve ver a face traseira ou não Suponha que você não queira mostrar a face traseira de um elemento Usando essa propriedade, você pode controlá-la. E nossa propriedade de visibilidade da face traseira vem com dois valores, visível e oculto Deixe-me explicar isso com três objetos D. Como você pode ver na tela, aqui está um cubo de três D. Se você usar valor oculto, não poderá ver a parte oposta desse cubo Mas se você usar o valor visível, poderá ver a outra parte por meio desse cubo Essa é a principal diferença desses dois valores. Deixe-me mostrar outro exemplo. Como você pode ver na tela, há dois elementos div, e eu uso a propriedade transform, ambos desse elemento Como você pode ver, usamos o valor de rotação Y. Se eu passar o cursor em nosso primeiro elemento div, você pode ver, você pode ver face traseira do nosso Como você pode ver, ele espelha nosso texto, mas não quero mostrar a face traseira ao girar nosso elemento Nesse elemento, usamos a propriedade de visibilidade do backfat. Se eu passar o cursor, agora você não poderá ver a face traseira desse elemento Porque usamos valor oculto para este. Vamos começar a prática e tentar entender como funciona. Como você pode ver, lado a lado, abro minha cor do Visual Studio e meu navegador usando a extensão Lifesaver, e já crio um documento HTML chamado index dot HTML Como você pode ver no meu navegador, temos um total de dois elementos Dev, continuer e box Como eu disse anteriormente, se você quiser usar a propriedade de visibilidade do backface, também precisará usar a propriedade transform Dentro do seletor Hober, vou digitar transform Transforme, gire, Y, e eu quero girá-lo 180 graus. Se eu definir esse arquivo e as curvas Hoberm estiverem nesse elemento, você poderá vê-lo Além disso, você pode ver o texto espelhado. Agora vou usar nossa nova propriedade, que é a visibilidade traseira Vou digitar “Back Phase Visibility”. Primeiro, vou usar o valor visível. Se eu definir esse arquivo e os curs de Obermi estiverem neste elemento, você poderá ver Mas se eu usar valor oculto, deixe-me mostrar e definir esse arquivo e a mica nesse elemento deve. Não, não consigo ver a face traseira desse elemento Este é o caso de uso da propriedade de visibilidade da face traseira. Isso é tudo para este tutorial. No próximo tutorial, aprenderemos animações CSS Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 71. Tutorial de animação CSS Part1: Olá, pessoal. É bom ver você de volta. Então, finalmente, vamos aprender animação CSS. Você pode animar qualquer elemento SML usando animação CSS. Vamos ver um exemplo. Como você pode ver, há um elemento DV. Ele é animado automaticamente sem passar o mouse. É converter retângulo em círculo e depois converter círculo em retângulo Esse é o pequeno exemplo de animação. Funciona automaticamente. Você não precisa de nenhum efeito de foco. Vamos ver que tipo de propriedade temos em CSS para criar essa animação. Como você pode ver, temos um total nove propriedades relacionadas à animação CSS. Nosso primeiro nome de propriedade é nome da animação. Usando essa propriedade, você pode definir um nome para a animação. Daí vem a duração da animação. Usando essa propriedade, você pode definir por quanto tempo deseja executar essa animação. Daí vem a propriedade de atraso da animação. Ele especifica um atraso para o início de uma animação. Daí vem a contagem de iterações de animação. Ele especifica o número de vezes que uma animação deve ser reproduzida; nossa próxima propriedade é a direção da animação. Ele especificou se uma animação deveria ser reproduzida para frente, para trás ou em ciclos alternados E depois vem a função de temporização da animação. Ele especifica a curva de velocidade da animação. Nossa próxima propriedade é o modo de filme de animação. Ele especifica um estilo para o elemento quando a animação não está sendo reproduzida. Vamos aprender sobre isso em nossos últimos tutoriais. Nossa próxima propriedade é o estado da fase de animação. Ele especifica se a animação está sendo executada ou pausada, e nossa última propriedade é animação Essa é a propriedade abreviada. Você pode usar o valor de todas essas propriedades de uma só vez usando essa propriedade. Vamos aprender todas essas propriedades uma por uma. Agora, para usar todas essas propriedades de animação, você precisa criar um seletor e o nome do seletor é Addit Primeiro, você precisa digitar quadros-chave Aderate e, em seguida, fornecer qualquer nome de animação Só é preciso lembrar que não forneça nenhum espaço nesse nome. Você pode fornecer hífen, também pode usar sublinhado ou maiúsculas, mas não forneça nenhum espaço Então, dentro das calices, você precisa fornecer duas palavras-chave diferentes de e duas Significa que de onde você deseja iniciar a animação e, usando duas palavras-chave, você precisa fornecer o ponto final da animação Dentro das calices, você pode usar qualquer propriedade CSS. Suponha que você queira alterar a largura do contêiner. Sim, você pode. Existe outro método que você pode usá-lo. Você pode usar a porcentagem para o mesmo trabalho. Você pode substituir a posição inicial por 0% e, da mesma forma, pode substituir a posição final por 100%. Ambas as declarações retornarão o mesmo resultado. Mas aqui você pode usar qualquer valor percentual de 0 a 100. Suponha que você queira alterar a cor no ponto inicial da animação e também queira alterar a cor em 20%. Você pode fornecer vários valores se usar esse método. Então, sem perder tempo, vamos estudar de forma prática e ver como funciona Como você pode ver, lado a lado, abro meu criador do isalts studio e meu navegador usando a extensão t server. Como você pode ver, eu já criei um documento HTML chamado index dot TML Como você pode ver, há um elemento profundo e o nome da classe é box. E eu já estilizei esse elemento de com 250 pixels, altura de 200 pixels, e também alinho esse elemento profundo no meio desta página da web Agora eu quero animar tão profundamente. Eu quero transformar esse retângulo em um círculo. Com isso, eu também quero mudar a cor sem usar o seletor Her Vou usar diferentes propriedades de animação CSS. Em primeiro lugar, vou criar um seletor de quadro-chave na taxa Keyframe Depois do seletor Keyframe, precisamos fornecer um nome de animação Para nossa animação, vou dar um exemplo. Então, dentro do Surge, precisamos usar duas palavras-chave de e duas, de, e então eu vou usar duas. Do ponto de partida, quero dizer raio de borda zero, alguma propriedade de raio de fronteira temporal Raio de borda 0%. No final desta animação, quero alterar o raio da borda, 50%. Raio de borda de 50% Se eu definir esse arquivo, ele não executará a animação porque precisamos vincular o nome da animação a essa caixa. Para isso, vou pegar uma propriedade, que é nome da animação nome da animação, nosso nome de animação é exemplo. Usando esse método, você pode usar esse quadro-chave várias vezes e não precisa criar essa animação repetidamente. Agora, com o nome da animação, também precisamos declarar o tempo de duração da animação Vou ligar para outra propriedade, que é a duração da animação. E por 2 segundos, eu quero rodar essa animação. Aqui você também pode usar o valor de segundo ou milissegundo. Então, se eu definir esta página, você pode ver a animação aqui, mas ela executa nossa animação por apenas uma vez e leva dois segundos para concluir essa animação. E agora eu decido rodar essa animação por cinco vezes. Para isso, precisamos usar outra propriedade, que é a contagem de iterações da animação Então, animação t, contagem de iterações, e eu quero executá-la cinco vezes É por isso que eu passo cinco aqui. Então, se eu definir esse arquivo, como você pode ver, ele executará nossa animação cinco vezes. Três, quatro e cinco. Depois de concluir o prazo, ele para de executar nossa animação E se você quiser executar essa animação para sempre, você precisa passar um valor infinito aqui, alguns t infinitos. Se eu definir esse arquivo, como você pode ver, agora ele executará nossa animação para sempre. Não quero executar essa animação para sempre, então quero passar três valores aqui. Eu quero executá-lo três vezes. Agora, como você pode ver, depois de concluir a animação, ela volta à posição anterior em uma única etapa. Quando ele retorna do valor final para o valor inicial, como você pode ver, não há transição. Em uma única etapa, ele completa a animação. Para fornecer uma base suave, precisamos usar outra propriedade, que é a direção da animação, a direção da animação St. E eu vou usar um valor alternativo. Se eu definir esse arquivo, agora você pode ver a suavidade quando ele volta à posição normal Se eu executá-lo por tempo infinito, você pode ver a suavidade. Como você pode ver, quando volta à posição inicial, há uma suavidade. Agora, vamos falar sobre a propriedade da direção da animação. Basicamente, a direção da animação veio com quatro valores, reverso normal alternativo alternativo reverso. Normal é o valor padrão. A animação é reproduzida normalmente. Eu trabalho para frente. Da maneira oposta, os reversos funcionam de trás para frente. Se você usar o valor inverso, a animação será reproduzida na direção inversa. Em seguida, vem o valor alternativo. Se você usar um valor alternativo, primeiro ele será reproduzido para frente, depois será reproduzido para trás Nosso último valor é inverso alternativo. Nesse caso, a animação é reproduzida primeiro para trás e depois para frente Você já aprendeu sobre o valor alternativo. Ele se move da posição inicial para a posição final e, em seguida, volta para a posição inicial. Nosso próximo valor é invertido. Deixe-me te mostrar. Se eu usar esse valor e depois definir esse arquivo, como você pode ver, a animação começa do círculo e depois é convertida em um quadrado. Vamos falar sobre nosso último valor, que é inverso alternativo. Se eu usar um valor inverso alternativo e depois definir esse arquivo, como você pode ver, a animação será reproduzida primeiro para trás e depois para frente Portanto, esse é o caso de uso da propriedade de direção da animação. Por enquanto, vou usar um valor alternativo. Se eu definir esse arquivo, você já aprenderá sobre ele. Isso é tudo para este tutorial. No próximo tutorial, mostrarei os diferentes métodos de quadros-chave Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 72. Tutorial de animação CSS Part2: É bom ver vocês. Neste tutorial, mostrarei o segundo método para executar a animação. Em nosso tutorial anterior, usamos a palavra-chave from e two. Mas neste tutorial, vamos usar o valor percentual. Sem perder tempo, vamos voltar ao codificador do Visual Studio Como você pode ver, lado a lado, abro meu coreator do Visual Studio e meu navegador usando a extensão Lifesaver e abro meu documento EStiML anterior Como você sabe, de é a nossa posição inicial. Vou reprimir com 0%, 0%. Você conhece duas palavras-chave ou posição final. Vou reprimir duas palavras-chave com 100%. Então, se eu salvar esse arquivo, como você pode ver, é do mesmo jeito. E agora eu quero mudar a cor de fundo na posição final, então vou usar a propriedade de fundo, fundo, nossa cor de fundo é vermelha. Se eu definir esse arquivo, como você pode ver, com a transformação da forma, ele também mudou a cor. Como você pode ver, para essa animação, usamos um total de quatro propriedades de animação CSS diferentes, nome da animação, duração da animação, contagem de iterações da animação e direção da animação Agora vou mostrar como podemos usar 410 dessa animação Eu quero dizer, como podemos usar esse valor de quatro propriedades em uma única linha? Para isso, precisamos chamar outra propriedade de animação, que é animação. Animação. Em primeiro lugar, precisamos passar o nome da animação. Como você pode ver, o nome da nossa animação é um exemplo. Então, para copiar o nome e colar aqui. Em seguida, precisamos passar o tempo de duração da animação. Como você pode ver, o tempo de duração da animação é de dois segundos, som deve passar para um segundo Lembre-se de que você precisa seguir essa sequência e, em seguida, passarei o valor da contagem de iterações, que é infinito Em seguida, vou passar o valor da direção da animação , que é alternativo. Por enquanto, essas quatro linhas extras não são necessárias. Vou comentar essas linhas e vou configurar esse arquivo. Como você pode ver, funcionou perfeitamente. Funciona da mesma forma. Agora vou falar sobre outra nova propriedade, que é o atraso na animação. Para isso, vou comentar esta linha e descomentar essas Depois da propriedade de duração, vou digitar o atraso da animação. Aqui eu vou passar três é, ganha três segundos. Você também pode obter o valor de milissegundos. Isso significa que se eu reprimir esse arquivo, nossa animação será estrelada por até três segundos Deixe-me mostrar alguns para configurar este arquivo. Como você pode ver, depois de três segundos , começa nossa animação. Portanto, esse é o caso de uso da propriedade de atraso. Por fim, vou usar outra propriedade, que é a função de temporização da animação. Mas antes, vou mostrar os valores relacionados à função de temporização de animação CSS. Basicamente, temos que executar seis valores são lineares estão dentro estão fora, estão dentro fora Q weg bezier Se você usar o valor E, ele especifica uma animação com início lento, depois primeiro e depois termina lentamente. Esse é o valor padrão. Nosso próximo valor é linear. Eu especifico uma animação com a mesma velocidade do início ao fim. Em seguida, vem nosso terceiro valor, que está em, especifique a animação com um início lento. Ao contrário, temos outro valor. Pronto, especifique uma animação com um final lento. Nosso quinto valor é e in out, especifique uma animação com início e fim lentos e nosso último valor é Bzier cúbico Você pode definir seus próprios valores em uma função sier cúbica. Deixe-me mostrar o exemplo real de como eles funcionam. Aqui você pode ver os elementos com diferentes valores de função de temporização. Linear está dentro está fora e ele sai. Como você pode ver, usamos o tempo de duração da anuação para tudo isso Mas, como você pode ver, o trabalho é diferente. A velocidade deles não é a mesma. Como você pode ver, o linear mantém a mesma velocidade do início ao fim e, em seguida, vem nosso próximo valor, que é a facilidade. Como você pode ver, começou devagar, depois primeiro e terminou lentamente. E então entre. Ele especificou a animação com início lento. E depois vem IO. Ele especifica a animação com final lento e nosso último vil é EEO Ele especifica a animação com início lento e final lento. Então essa é a diferença entre todos os valores da função de temporização. Então, deixe-me mostrar como podemos usá-lo na prática. Então, vou chamar nosso nome de propriedade que é função de temporização de animação. Animação, função de temporização. No início, vou usar is value, summon to type is Se eu definir esse arquivo, como você pode ver, ele começa devagar, depois primeiro e termina lentamente. E esse é o valor padrão. Vou usar nosso próximo valor, que é linear. Tipo de invocação, linear. Se eu definir esse arquivo, como você pode ver, ele mantém a mesma velocidade. Você não consegue entender a diferença neste exemplo. Você pode entendê-lo adequadamente quando iniciamos nosso exercício e projeto. Então eu vou usar nosso outro valor, que é EN. Se eu definir esse arquivo, como você pode ver, ele especifica a animação com início lento. Nossos próximos valores foram divulgados. O tipo de soma está esgotado. Se eu definir esse arquivo, como você pode ver, ele especifica a animação com final lento. Nossos valores de luxúria estão dentro para fora, soma para tipo está dentro para fora. Se eu definir esse arquivo, como você pode ver, ele especifica a animação com início lento e final lento. Agora vou usar nosso valor de luxúria, que é Bzier cúbico. Vou digitar Cubic Bzier aqui, você precisa passar o valor total de quatro, não mais que quatro valores, não menos que Primeiro, vou pegar o valor 0,1 e depois vou pegar o valor 0,4. Em seguida, vou usar o valor 1,0. Em seguida, vem o valor de 0,1. Ele cobrirá a animação em quatro etapas. Para nossa primeira etapa, levará 0,1 segundo. Para nossa segunda etapa, vai levar 0,4 segundo, e para nossa terceira etapa, vai levar 1 segundo, e para nossa última etapa, vai levar 0,1 segundo mais uma vez. Então, se eu definir esse arquivo, você poderá ver o resultado. Depois de três segundos, você pode ver o padrão de animação. Com esse valor, você pode concluir sua animação em quatro etapas. Como você pode usar todas as etapas como uma abreviatura. Para isso, você precisa usar esse valor na terceira posição. Primeiro, você precisa passar o nome da animação, depois o tempo de duração, depois a função de temporização, depois o valor do atraso, depois a contagem de iterações e, em seguida, a direção da animação. Não se preocupe com isso. Vamos aprender tudo isso quando iniciarmos nossos projetos. Agora vou mudar de cor em 50% da animação. Quero dizer que 50% da posição da animação, 50% dentro do Caris é, quero mudar a cor do fundo Fundo azul. Se eu definir esse arquivo, como você pode ver, na posição de 50% da animação, ele mudará a cor. Primeiro, ele converte a cor chocolate em azul, depois converte a cor azul em vermelha Podemos usar o valor que você quiser aqui. Então, isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos o que é o modo de filme de animação e o que é o modo animação reproduzida Portanto, não perca nosso próximo vídeo. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 73. Tutorial do modo de preenchimento de animação CSS: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos uma nova animação CSS relacionada à propriedade e o nome da nossa propriedade é CSS Animation Fl Mode. Mas agora a questão é: o que é o modo de filme de animação? A propriedade do modo de filme de animação especifica um estilo para o elemento quando a animação não está sendo reproduzida. Podemos usá-lo antes de começar. Também podemos usá-lo depois disso. Caso contrário, podemos usar tanto a condição. Ao mesmo tempo, podemos usá-lo antes da animação e aumentar a animação. Agora, vamos falar sobre os valores relacionados ao modo de filme de animação. Essa propriedade vem com um total de quatro valores, nenhum, para frente, para trás e ambos Nenhum é o valor padrão. animação não aplicará nenhum estilo ao elemento antes ou depois da execução. Nosso próximo valor é avançar. O elemento manterá os valores de estilo definidos pelo último quadro-chave Basicamente, depende da direção da animação e da contagem de iterações da animação Nosso próximo valor é inverso. O elemento obterá os valores de estilo definidos pelo primeiro quadro-chave e os manterá durante o período de atraso da animação Caso contrário, podemos usar nosso último valor, que é ambos. A animação seguirá as regras para frente e para trás, estendendo as propriedades da animação em ambas estendendo as propriedades da animação em Vamos usar esse valor do modo de quatro filmes neste tutorial. Vamos começar a prática e ver como funciona. Como você pode ver lado a lado, abro meu criador de estúdio de resultados e meu navegador usando a extensão Lifesaver, e já criei um documento HTML chamado ponto de índice STML . Você também pode ver um E eu defino 150 pixels de largura e 100 pixels de altura neste elemento deve. Agora vou animar esse elemento profundo e também vou colocar cores diferentes nesse elemento Vou aumentar a largura desse elemento. E como você pode ver, eu já criei o quadro-chave para essa animação, e o nome do nosso quadro-chave é exemplo Dentro da cruz eu vou amarrar. No começo, vou pegar 0%. início, dentro do cliorss, vou mudar a cor do fundo, o plano de fundo Vou colocar a cor amarela. Como vou aumentar a largura do item, soma a largura do tipo W, como você pode ver, nossa largura anterior é de 150 pixels e agora vou colocar 200 pixels. Além disso, vou duplicar essa linha três vezes. 0%, depois vem 50%, finalmente, 100%. Em 50% da animação, vou aumentar a largura para 50 pixels. E também vou mudar a cor do plano de fundo. Cor de fundo vermelho. E em 100%, vou dizer item com 300 pixels, e também vou mudar a cor. Desta vez, vou usar a cor azul. Então, basicamente, criamos um quadro-chave de animação simples. Vamos usar esse quadro-chave nesta caixa. Para o primeiro, vou usar a propriedade de animação, animação. Nosso nome de animação é exemplo. Então, precisamos passar o tempo de duração da animação, e eu quero completar essa animação em 2 segundos. Em seguida, vou passar o valor do atraso da animação e quero atrasar essa animação por três segundos. Se eu definir esse arquivo, como você pode ver, em até três segundos ele executará nossa animação. E depois de concluir a animação, ela volta à sua posição inicial. Agora vou usar a propriedade do modo de filme de animação. Podemos usá-lo após o valor da duração, caso contrário, podemos chamar o nome da propriedade. Vou chamar o nome da propriedade Animation field mode. Como você sabe, essa propriedade veio com quatro valores. No início, vou usar o valor inverso ao contrário. Se eu usar o backward, ele pulará diretamente para 0% dessa animação Deixe-me aumentar o tempo de atraso da animação. Vou usar cinco segundos para este exemplo. Se eu definir esse arquivo, como você pode ver, ele já saltou para a pessoa zero Começa com a pessoa zero, depois vem 50%, depois vem 100%. Depois de concluir a animação, ela volta à posição normal. Deixe-me te mostrar mais uma vez. Se eu definir esse arquivo, ele iniciará a animação da pessoa zero e, em seguida, atrasará por 5 segundos e, em seguida, executará nossa animação Como você sabe, se usarmos o valor inverso, o elemento obterá os valores de estilo definidos pelo primeiro Crefon e os manterá durante o período de atraso da animação Vamos passar para nosso próximo valor, que é o futuro. Alguém para amarrar aqui. Se usarmos esse valor, ele simplesmente executará nossa animação, mas, no final, ela não voltará ao estado inicial. Deixe-me te mostrar. Se eu definir esse arquivo, como você pode ver, após 5 segundos, ele executará nossa animação. Como você pode ver, não volta ao estado inicial. Como você sabe, o elemento reterá esses valores de bloco definidos pelo quadro-chave da lista Como você pode ver, nosso iframe de luxúria é 100% e sua cor de fundo é azul Nessa posição, definimos o item com 300 pixels. Vamos pular para o próximo valor, que é ambos. Se eu usar esse valor, ambos, ela iniciará nossa animação a partir de 0% e, depois de concluir a animação, ela ficará na posição de cem por cento. Se eu definir esse arquivo, como você pode ver, ele começa com 0%. Então, após um atraso de cinco segundos, ele inicia nossa animação. Como você pode ver depois de concluir a animação, ela não volta ao estado inicial desse elemento. Se usarmos esse valor, ele seguirá a regra para frente e para trás Esse é o caso de uso de ambas as propriedades. Agora, vamos falar sobre nosso último valor, que é nenhum. Alguns do tipo, nenhum aqui. Se eu definir esse arquivo, como você pode ver, nada vai acontecer aqui. Depois de cinco segundos, basta executar nossa animação. Portanto, esse é o caso americano da falta de valor. Isso é tudo para este tutorial. Espero que você goste desse tutorial. Agora está claro para você o que é o modo de filme de animação. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 74. Tutorial do modo de jogo de animação CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova animação CSS relacionada à propriedade, e o nome da nossa propriedade é Animation Place State Moon. Agora, a questão é: qual é o estado do local da animação? A propriedade de estado do local da animação especifica se a animação está sendo executada ou pausada Você pode executar sua animação, caso contrário, você pode pausar sua animação com essa propriedade Basicamente, essa propriedade vem com dois valores, pausa e execução Se você usar o valor de pausa, será especificado que a animação está em pausa e a execução é o valor padrão dessa Sem perder tempo, basta estudar prática e tentar entender o que é o estado de reprodução da animação Como você pode ver, lado a lado, abro meu Visual Studio Coreor e meu navegador usando a extensão p server, e abro meu documento HTML anterior Agora eu quero parar minha animação ao abrir minha Kara nesse elemento profundo Para isso, precisamos usar a propriedade animation place state. Como você pode ver, atrasamos nossa animação por 5 segundos. Se eu definir esse arquivo, você pode ver depois de cinco segundos, ele executa nossa animação. Agora eu quero parar essa animação enquanto ela está sendo executada. Para parar a animação, vou até Her my cursor. Primeiro, vou criar um seletor de foco para essa caixa Vou digitar ponto, caixa, mouse dentro do Cariss, vou usar nosso estado de reprodução de animação de propriedade No início, vou usar o valor da pausa, então vou digitar pausa Se eu definir esse arquivo, como você pode ver, depois de cinco segundos, ele executará nossa animação. Mas vou colocar meu cursor nesse elemento. Como você pode ver, isso interrompe nossa animação. Eu não executo a animação completamente. Eu removo meu cursor, como você pode ver, ele completa a animação. Deixe-me mostrar o exemplo mais uma vez. Mas antes, vou reduzir o tempo de atraso. 1 segundo. Se eu definir esse arquivo, como você pode ver, uma vez, ele executou nossa animação. Mas quando eu passo o cursor sobre esse elemento, ele interrompe a animação Mas agora vou remover o cursor desse elemento. Como você pode ver, agora está completa a animação. Em seguida, volte ao estado normal desse elemento. Mas agora eu quero executar essa animação quando coloco meu cursor sobre esse elemento. Para isso, vou copiar essa propriedade. E cole aqui. Por padrão, quero pausar essa animação. Mas quando abordo minha carreira sobre esse elemento, quero rodar essa animação Então, em nosso seletor Hober, vou digitar animation play State running Se eu definir esse arquivo, como você pode ver, mais uma vez, a animação não está sendo executada, mas se eu colocar minha cara nesse elemento, como você pode ver, mais uma vez, ele executa nossa animação Esse é o caso de uso da animação PlayTatepperty. Espero que agora esteja claro para você como funciona. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 75. Tutorial de ajuste de objetos CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender outra propriedade CSS, que é ajuste de objetos. Essa propriedade de ajuste de objeto CSS é usada para especificar como uma imagem ou um vídeo deve ser redimensionado para caber em seu contêiner Essa propriedade faz com que o recipiente encha o recipiente de várias maneiras, como preservar a proporção esperada ou esticar e ocupar o máximo de espaço possível. Esta propriedade vem com um valor total de cinco. Sinta contenção, capa, freira e reduza a escala. Vamos começar com a prática de como podemos aplicar esses valores. 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á criei um documento HTML chamado index Como você pode ver, dentro dessa tag corporal, temos uma imagem e a resolução padrão da imagem é 600 por 450 pixels. Mas aqui, vou atribuir a altura e o peso dos peixes a esta imagem Então, dentro da tag principal, vou usar a tag de estilo. Estilo e dentro da tag de estilo, vou selecionar a imagem IMG Então, dentro do clivuss, vou definir a altura. Largura, vou atribuir 200 pixels. Além disso, vou atribuir altura, altura, 300 pixels. Se eu definir essa imagem, como você pode ver, a imagem está sendo comprimida para caber no contêiner, e o tamanho do contêiner da imagem é de 200 e 300 pixels. Agora, o problema é que a proporção original foi completamente destruída e aqui, aqui, a propriedade do objeto entra. Vou aplicar a propriedade do objeto. Vou digitar object fit e vou começar com cover value cover. Se eu definir esse arquivo, você poderá ver o resultado. Se usarmos a capa de alimentação de objetos, a imagem manterá sua proporção original esperada e, de acordo com a proporção exata do objeto, sentirá a dimensão dada. Como você pode ver, nossa largura é 200 pixels e a altura é de 300 pixels. Portanto, de acordo com a dimensão, sem alterar a proporção, ela se ajusta à imagem. Agora, nossa imagem não parece comprimida. Agora, vamos falar sobre o próximo valor, que é conter. Vou duplicar esta linha e comentar a linha anterior E desta vez, vou usar contain value, contain. Depois de definir esse arquivo, você pode ver o resultado. Se você usar ajuste de objeto, contenha a imagem, mantenha sua proporção, mas ela seja redimensionada para caber na dimensão especificada E como você pode ver, nossa dimensão é 200 pixels y 300 pixels. Agora você pode ver que isso não altera a proporção da imagem, mas se encaixa na dimensão dada. E se você usar o som do valor do campo, duplique esta linha e comente ou visualize um, como eu disse, o campo é o valor padrão Preencha e, em seguida, defina esse arquivo, você pode ver o resultado. Agora apertou a imagem. Além disso, se eu usar sem valor. Novamente, vou duplicar essa linha e comentar a anterior colocar fill with none e definir esse arquivo Agora você pode ver que não aperta a imagem. E o último valor que vou aplicar é reduzido. Então, vou duplicar essa linha e comentar a anterior e substituir nenhuma por uma redução. No topo deste arquivo, você pode ver o resultado. É muito semelhante ao valor do conteúdo, caso contrário, ao valor nun. Se você usar o feed de objetos, reduza a escala das imagens até a menor versão de nenhum conteúdo. Então é assim que as propriedades de ajuste de objetos funcionam. Agora, deixe-me mostrar o exemplo real por que precisamos usar o valor do feed do objeto. Como você pode ver neste exemplo, temos um total de duas imagens lado a lado e, como você pode ver, definimos com 100% e definimos a altura de 400 pixels. A altura do contêiner é de 400 pixels e a largura é de 100% Em nossas imagens, como você pode ver, usamos o estilo embutido Usamos flutuador, elevador e conjunto com 50% e altura 100% Usamos o mesmo valor CSS para nossa próxima imagem. Agora, o problema é que, se eu tentar redimensionar a janela do navegador, suponha que eu queira reduzir a largura da janela do navegador Agora você pode ver que ela comprimiu as duas imagens. Então, isso destruirá a proporção real dessas imagens. Mas se eu usar a propriedade object fit Suppose Object fit, cover Além disso, vou usar em nossa imagem para ajustar o objeto, cobrir e, em seguida, definir esse arquivo. Depois de definir esse arquivo, como você pode ver depois de recarregar este navegador, ele resolve o Como eu disse, o valor da capa mantém proporção da resolução da imagem como está. Além disso, sente a imagem em determinada dimensão. É por isso que precisamos usar a propriedade de ajuste do objeto. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 76. Tutorial de seleção de usuários de CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outra tese relacionada ao tutorial. E neste tutorial, você aprenderá uma nova propriedade, que é a seleção do usuário. Basicamente, o usuário seleciona o trabalho como segurança. Não permito que o usuário copie dados do seu site, e esse é o principal motivo pelo qual usamos a seleção de usuários. Essa propriedade vem com quatro valores, auto, nenhum, texto e tudo. Auto é o valor padrão. Então, vamos começar a prática e ver como podemos usá-la. 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á crio um documento HTML, chamado HTML de ponto de índice Então, como você pode ver em nossa tag body, temos uma caixa de classe de tag profunda. E nesse elemento de imersão, temos um texto fictício Agora, se eu tentar copiar isso, caso contrário, selecione esse texto fictício, sim, podemos Mas eu não quero dar permissão ao usuário para copiar o texto. Caso contrário, selecione o texto. Portanto, precisamos usar a propriedade de seleção do usuário. Então, para digitar, selecione o usuário. Como você sabe, o valor padrão é automático. Se eu usar o valor automático e definir esse arquivo e tentar selecionar esse texto, sim, podemos selecionar o texto. Mas se eu usar non-value, some para substituir auto por none, e então definir esse arquivo, desta vez se eu tentar copiar o texto, caso contrário , selecionar o texto, não podemos porque desta vez não vai permitir copiar ou selecionar porque aqui usamos a propriedade user select, none. Mas podemos selecionar o texto do título, mas não podemos selecionar o texto que está dentro desse desenvolvimento. O próximo que vou usar, que é texto. É muito semelhante ao valor automático. Se eu usar esse valor, como você pode ver, agora podemos selecionar o texto. Em seguida, temos outro valor, que é, então vou substituir o texto por A. Se eu definir esse arquivo, ele permitirá copiar, caso contrário, selecione o texto. Só precisamos clicar uma vez em nossa seção de texto. Depois de um clique, ele selecionará automaticamente todo o conteúdo. Esse é o uso do valor. Em vez de clicar , permitia selecionar o texto em um clique. Essa é a principal diferença entre todos os valores. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 77. Quebra de decoração de caixa CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos uma nova propriedade, que é a pausa na decoração de Bob. Ele é usado para decoração e estilo de texto, e vem com um total de dois valores, fatia e Agora, vamos começar a prática e ver como podemos usar o valor e criar efeitos diferentes. 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á crio um nome de documento TML no Exotst Então, em nossa tag body, temos uma tag de cabeçalho e uma tag de extensão, e eu estilizo a tag de extensão, cor de fundo de Hearst e defino o tamanho da fonte 21 pixels com a altura da linha dela de 32 pixels E agora vou adicionar uma tag break dentro dessa tag span. Então, nesta frase, aqui vou usar uma tag de quebra BR BR. BR. Tag de quebra e quebra BR, e vou adicionar outra tag de quebra, BR. Vou roubar esse arquivo Ao configurar esse arquivo, você pode ver o resultado. Ele divide a frase em várias linhas. E agora vou adicionar borda a essa tag de extensão. Borda a pixel, e eu quero uma borda sólida. Com isso, nossa cor de borda é preta. Se eu definir esse arquivo, você poderá ver a resina. Agora você pode perceber que pode ver ou contornar, começar dessa posição e terminar nessa posição. Além disso, vou adicionar o raio da borda. Raio de borda de cinco pixels. Depois de definir esse arquivo, você pode ver o raio da borda, mas eu quero o raio da borda em cada linha Eu não quero isso na linha inicial e na linha final. Eu quero todas as linhas. Para resolver o problema ao usar a quebra de degradação da caixa Então hematita, caixa, decoração, quebra. E, como eu disse, ele vem com total de dois valores, fatia e clone Slice é o valor padrão, então ela usa o valor Clone Depois de configurar esse arquivo, como você pode ver, ele não está funcionando porque aqui eu uso o navegador Chrome. O navegador Chrome não suporta essa propriedade. Para usar a propriedade em um navegador Chrome, você precisa usar o prefixo Então, vamos duplicar a linha e usar o prefixo. Web. Se eu definir esse arquivo, desta vez você pode ver, agora ele adiciona o raio da garrafa a cada palavra Agora, ele nos permite atribuir preenchimento a cada seção. Portanto, se eu passar o preenchimento e quiser adicionar preenchimento e quiser adicionar um preenchimento de dez pixels de todas as direções e, em seguida, definir esse arquivo, você poderá ver Vamos aumentar a altura da linha para melhor visibilidade, 50 pixels. Até configurar esse arquivo, você pode ver o resultado. Esse recurso só é possível por esta propriedade, quebra na decoração da caixa. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 78. Tutorial de citações de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, você aprenderá outra nova propriedade, que são os códigos. Essa propriedade não funciona com nenhuma tag TML. Para isso, você precisa usar uma tag especial, que é código, Q. Qtag significa tag de cotação Vamos começar a prática e ver o exemplo. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server e já crio um nome de documento TML (índice, ponto de índice) Como você pode ver na tag body, temos uma tag Q usada como tag de cotação É por isso que você pode ver a frase nesta citação. Basicamente, usando a propriedade COTS, podemos substituir a citação por qualquer outro caractere Suponha que, sem usar códigos eu queira mostrar o cifrão. Vou usar a propriedade Quotes. Códigos, então aqui precisamos usar o código duplo sin e dentro dos códigos duplos, vou passar o cifrão. Isso é para começar a seno. Além disso, vou passar outro personagem. Aqui eu vou passar e por cento. Depois de definir esse arquivo, você pode ver o resultado. Agora ele substitui códigos por cifrão e também substitui códigos por uma pessoa seno Começa com o cifrão e termina com o signo da pessoa. Você pode substituir a cotação por qualquer sinal. Suponha que, se você quiser usar menos que seno e maior que seno, nesse arquivo, você possa ver o resultado Se você pesquisar entre aspas do Google, ele mostrará vários sites que fornecem diferentes tipos de cotação e você pode copiar a cotação e aplicá-la Se eu abrir o site da Wikipedia, você verá muitas aspas A partir daqui, você pode copiar o sinal de cotação. Suponha que eu queira usar esse sinal de citação, esse. É divertido copiar este sinal de citação e substituí-lo por ele. Se eu definir esse arquivo e voltar ao meu navegador, você poderá ver o resultado. Dessa forma, você pode usar Imogs qualquer tipo de caractere como citação Isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 79. Tutorial de imagem de borda CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, aprenderemos a propriedade da imagem de borda. Você já está familiarizado com propriedade de cor da borda, borda com propriedade, propriedade raio da borda, mas usando a propriedade da imagem da borda, podemos atribuir imagens em nossa borda Além disso, podemos atribuir cor de gradiente em nossas bordas. Antes de começar a prática, deixe-me mostrar alguns exemplos. Aqui você pode ver que temos uma doença e, nesse desenvolvimento, temos uma fronteira, mas essa fronteira não é sólida É feito com imagens. Parece uma moldura de imagem. Basicamente, neste tutorial, aprenderemos como podemos criar bordas usando imagens usando a propriedade de imagem de borda. Então, vamos começar a prática. Temos um total de seis propriedades relacionadas à imagem de borda. Fonte da imagem da borda, fatia da imagem da borda, largura da imagem da borda, imagem da borda, início, repetição da imagem da borda e imagem da borda Nossa última imagem de borda de propriedade funciona como um forro único. Então, vamos começar a prática e ver como podemos usar. Então, como você pode ver, lado a lado, abro meu editor de código de estúdio e meu navegador usando a extensão de servidor ao vivo. E eu já criei um documento HTML chamado index dot HTML Então, em nossa etiqueta corporal, temos uma caixa D. E nesta caixa, temos um texto fictício Se você escreveu, pode ver como usamos borda, borda sólida, e nossa cor de borda é preta e nossa largura de borda é 30 pixels. E agora precisamos substituir a borda preta sólida por uma imagem. Se eu mostrar meu diretório de trabalho, temos algumas imagens e vou usar essa imagem, 05. Se você ver, você pode ver que esta imagem está em branco no meio e coberta com formas geométricas Vamos usar essa imagem como imagem de borda, e essa é uma imagem PNG. Vamos voltar ao editor de código. No início, vou usar uma propriedade que é a fonte da imagem de borda. Fonte da imagem da borda do tipo de som. Em seguida, precisamos fornecer o caminho da imagem, URL. Então, digite o URL do Hemo e, em seguida, defina os versos redondos para fornecer o caminho do arquivo de imagem, que é PNG de 05 pontos Agora, vamos configurar o arquivo e ver o que ele retorna. No topo deste arquivo, você pode ver as imagens, mas você pode ver a imagem nos cantos. Além disso, você pode notar que ele removeu a cor preta sólida da borda. Então, vamos pular para nosso próximo valor, que é border Image slice Eu uso essa propriedade porque quero mostrar essa forma geométrica em todos os lados Mas antes precisamos entender o que é fatiar. Vamos entrar no compartilhamento do photoshop. Como você pode ver em nossa fotosfera, aqui abrimos uma imagem. Usando a técnica de fatiamento, você pode definir quanta parte da imagem deseja mostrar na borda Suponha que eu queira mostrar essa quantidade de área na minha seção de fronteira. Essa quantidade de área contém a forma geométrica completa. É por isso que eu quero mostrar essa área. Se eu selecionar essa área novamente, você poderá observar na seção de informações a quantidade de área que selecionamos. Da mesma forma, quero selecionar a área desta imagem porque vamos aplicar essa imagem como imagem de borda. Então, a partir daqui, eu quero selecionar essa quantidade de área. Depois de selecionar a área, aqui você pode ver o resultado. Se eu selecionar essa área novamente, agora você pode ver em nossa seção de informações que ela retornará a quantidade de área que selecionamos. Ele retorna com a altura, 28 por 28. Quero dizer, 28 pixels. Agora, vamos voltar ao co-editor novamente. Aqui, vou passar pela borda da imagem, fatia 28. Pixel. Não precisamos mencionar a unidade, precisamos passar o número. Agora, vamos configurar o arquivo e ver o que ele retorna. Depois de configurar esse arquivo, você pode ver o resultado. Isso é o que ele retornou. Agora você pode ver a forma geométrica nos quatro cantos e, na borda, ela esticava a imagem Da mesma forma, se você quiser mostrar a imagem do hub, eu quero dizer que se você quiser mostrar a área geométrica do hub, deixe-me mostrar, se você quiser mostrar essa quantidade de área, então você precisa passar esse valor, pixel por 15 pixel Deixe-me te mostrar. Se eu passar, se eu substituir 28 por 15 e esse arquivo, agora você poderá ver um design diferente. Mas, por enquanto, eu gostaria de escolher 28. Eu quero para toda a área geométrica em nossa fronteira. E se você quiser remover a área de alongamento para isso, precisará usar outra propriedade, que é a repetição da imagem da borda. Todos esses são valores que podemos usar com a propriedade de repetição, repetição, alongamento, arredondamento e espaço da imagem de borda . Aqui, vou usar a terceira propriedade chamada border Image repeat. Borda, imagem, repita. E aqui vou passar o valor chamado repeat. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver, agora na horizontal e na vertical, repetir a forma geométrica, e se eu a esticar e definir esse arquivo, você pode ver que é muito semelhante ao resultado antigo e há Mas antes de mostrar o valor, vamos voltar a digitar repeat novamente. Repita a configuração deste arquivo. Você pode ver na esquina que ele não está perfeitamente alinhado. Para isso, precisamos usar outro valor chamado round. Vou duplicar esta linha e comentar a anterior e substituir a repetição por rodada Se eu definir esse arquivo, desta vez você verá que não há problema na esquina. Além disso, você pode definir valores horizontais e verticais de forma diferente. Deixe-me te mostrar. Então, novamente, vou duplicar essa linha e comentar a anterior E desta vez horizontal, vou usar valor de repetição, repetição, e para vertical, vou usar valor de estiramento, alongamento. Se eu definir esse arquivo, você poderá ver o resultado. Agora, repita a forma geométrica do Xxs e estique a forma na direção YxS Então, é assim que você pode definir os valores de repetição da imagem. E se você quiser dimensionar o tamanho da borda de outra forma, reduza o tamanho da borda, apenas para alterar o valor Suponha que, por enquanto, nossa largura de borda seja de 30 pixels. Se eu fizer 20 pixels e depois definir esse arquivo, você poderá ver o resultado. Como você pode ver, agora reduziu a largura da borda. Se eu reduzir ou aumentar a largura da borda, isso não afetará a imagem. De acordo com a largura da borda, ela diminuirá, caso contrário, aumentará a imagem. Por exemplo, se eu aumentar o tamanho, se eu fizer 50 pixels e depois definir esse arquivo, você poderá ver o resultado. Então, por enquanto, eu quero fazer com que seja de 30 pixels. E agora vou mostrar outra propriedade, que é o início da imagem de borda Tipo de hemo, imagem da borda, início. Usando essa propriedade, você pode controlar a distância da área da borda que deseja mostrar a imagem. Mas, para entender melhor, quero adicionar uma cor de fundo a essa caixa. Plano de fundo, vou usar a cor roxa. Vou usar a cor roxa média. Vou digitar roxo médio médio. Depois de definir esse arquivo, você pode ver o resultado. Agora você pode notar que nossa imagem da borda está dentro da área da caixa. Não é sair da área da caixa. Agora use essa propriedade, podemos mover a imagem da borda para fora da área da caixa. Suponha que eu queira movê-lo 20 pixels para fora. Se eu definir esse arquivo, você poderá ver o resultado. Agora, ele moveu o pixel de boerimage para fora dessa caixa. Em seguida, vou usar outra propriedade que é a largura da imagem da borda. Depois da fatia da imagem, quero usar esse cabeçalho de propriedade. Alguns tipos limitam a largura da imagem. Usando esse valor, podemos controlar a largura da imagem da borda. Se eu passar 15 pixels, caso contrário, dez pixels, agora ele vai definir a imagem com dez pixels. Desculpe, precisamos passar o pixel unitário. Se eu definir o arquivo, você poderá ver o resultado. Isso reduz o tamanho da imagem. Da mesma forma, se eu passar 20 pixels e depois definir esse arquivo, você poderá ver o resultado. Basicamente, usamos essa propriedade para dimensionar a imagem, caso contrário, reduzimos a imagem. Então, já usamos os cinco valores. Agora vou usar o valor lst, que é a imagem da borda Como eu te disse, vai funcionar como um one liner. Se você usar esse valor, primeiro precisamos passar a fonte da imagem, depois precisamos passar a área do corte, depois precisamos atribuir o peso, depois precisamos fornecer o valor externo e, por último, precisamos fornecer o valor de repetição Vamos começar a prática e ver como podemos aplicar essa. No início, vou comentar todas as linhas, incluindo a fonte da imagem. Em seguida, vou usar a propriedade, que é a imagem da borda. Em primeiro lugar, aqui precisamos passar o caminho de origem. Vou copiar esse URL e colá-lo aqui. Depois do espaço, precisamos fornecer a área da fatia, que é 28 Em seguida, precisamos passar a largura da imagem, que é de 20 pixels e, entre o valor da fatia e o valor da largura, precisamos usar a barra Isso é necessário. Então, novamente, eu vou usar slash, e desta vez eu vou passar, e aqui precisamos passar o valor inicial, e eu vou usar algo de dez pixels, e, finalmente, precisamos passar o valor de repetição, e eu quero usar o valor redondo Vamos configurar o arquivo e ver se ele funciona corretamente ou não. Depois de configurar esse arquivo, acho que cometi algum erro Opa. Quando não precisar dessa barra após o penúltimo valor. Se eu definir esse arquivo, agora ele funcionará perfeitamente. Você pode ver o resultado. Essa é a abreviatura da propriedade da imagem de borda. Primeiro, precisamos fornecer a fonte, depois precisamos fornecer a área de corte Em seguida, precisamos fornecer a largura da imagem. Em seguida, precisamos fornecer o valor inicial e, finalmente, fornecer o valor de repetição Agora eu não quero mostrar a imagem da borda. Eu quero mostrar a cor do gradiente. Para isso, podemos usar essa propriedade novamente. Vou ser esta linha e comentar a anterior e , desta vez, aqui vou usar uma cor de gradiente linear Eu vou dirigir de forma linear. Gradiente. Então, dentro dos rounders, eu quero as cores vermelha e azul Vermelho e a próxima cor é azul. Também podemos definir a direção do gradiente. Hemo tipo dois, certo. Opa, há um ingrediente de erro ortográfico, DENT. Além disso, se você quiser fornecer o valor da fatia, suponha que eu corte 25 pixels, 25 Se eu definir esse arquivo, novamente não está funcionando. Acho que cometi algum erro. Primeiro, vou remover essa direção, vamos remover a direção e depois definir esse arquivo novamente. Agora é trabalho. Se eu passar na direção, deixe-me tentar novamente. Heitize dois Depois de definir esse arquivo, novamente, ele não está funcionando. Oh, opa, precisamos fornecer a vírgula. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora funcionou perfeitamente. É assim que podemos usar as propriedades da imagem Ber. Espero que agora esteja claro para você. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 80. Seletor de combinador de 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. 81. Seletor de atributos: 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. 82. Tutorial de CSS Pseudo Classes Selectors, 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 saber que tipo de seletor, seletor simples, seletor combinador, seletor de atributos, classes postuto e elementos 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 83. CSS Pseudo classes Selector, 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 84. CSS Pseudo classes Selector, 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 o 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 85. CSS Pseudo classes Selector, parte 4: Olá, pessoal, é bom ver vocês de volta. Este é outro tutorial relacionado ao seletor de vidro CSS poseido Neste tutorial, aprenderemos os óculos poste restantes. Vamos começar com somente leitura e reescrever o post glass Em nosso TimLpm, 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 vermelho de leitura é o modo padrão. Vamos voltar ao código do Visual Studio e tentar entender qual é o uso dessas duas seleções. Como você pode ver, lado a lado, abro meu editor de código do isults Studio e meu navegador usando libServeRetension, e já crio um abro meu editor de código do isults Studio e meu navegador usando libServeRetension, e já crio um nome de documento estimado a partir do ponto dez. 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 aqui digitamos somente leitura. E este arquivo, agora você pode ver que o campo de entrada do nosso primeiro nome não está desabilitado. 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 digitará 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 escudo de entrada usando Poidoglass. Para isso, precisamos usar o positoglass somente para leitura. Entrada Smotype, dois pontos, somente leitura. Então, dentro dos calibradores , primeiro, vou dizer a borda Borda, quero uma borda de um pixel e quero uma borda sólida e a cor da nossa borda é vermelha. Se eu definir esse arquivo, você poderá ver o resultado. Podemos direcionar com sucesso o campo somente para leitura usando a classe Posido 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 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 de Positro 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 eu carrego meu baile, 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 nome de quatro países, EUA, Índia, Reino Unido e Alemanha 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 configurar esse 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 aula de posito. 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, então eu não vou explicar isso Se você quiser aprender sobre isso, vá para a seção Variável 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. 86. Pseudo elemento 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, 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 e seletor de posto-elementos . 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 Adaist e depois novamente com um 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 soma de parágrafos 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 aplica o CSS, primeira letra 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 te mostrar como. Então, primeiro, vou selecionar o elemento P. Em seguida, chame 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 etiqueta P, você precisa usar a seleção de refrigerante de cólon. 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 elemento positivo americano, que é a solda 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 comentário estável anterior, que é da tabela de pontos, e você já está familiarizado com essa tabela. Como você pode ver neste formulário, não temos nenhum espaço reservado neste formulário, então aqui vou adicionar um espaço reservado Em nossa seção de entrada do primeiro nome, aqui vou usar um espaço reservado, 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. 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 configurar 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 87. CSS antes e depois de pseudo elementos: 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 88. Função CSS Attr() aprimorada: 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, abro meu editor de código do Visual Studio e meu navegador usando a extensão if server, e já criei um documento HTML chamado indexoTetml Então, como você pode ver em nossa tag de corpo ab, tag de parágrafo, P, e aqui digite hello word. E em nossa seção de estilo, como você pode ver, nossa família de fontes, nossa família de fontes corporais é aérea 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 e 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 eu ouço minhas cartas 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. 89. Tutorial de incremento de contador e redefinição de contador: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao CSS e, neste tutorial, você aprenderá sobre uma nova propriedade chamada CSS counter e aprenderemos sobre o contador relacionado à propriedade. Contra-incremento e contador é isso. Mas antes, vamos ver o que é contador. Este é o exemplo do contador. Os contadores CSS são variáveis mantidas pelo CSS cujo valor pode ser incrementado pela regra CSS Ele é usado para rastrear quantas vezes eles são usados. Então, como você pode ver neste exemplo, temos uma tag de corpo e, dentro dessa tag de corpo, temos uma tag de título e, dentro desse título, uma seção, temos duas tags de cabeçalho. Depois, temos o RH, que dividirá essa seção. Mas se você notar em nosso navegador, o resultado é diferente. Antes do texto, como você pode ver, termo e CSS, ele imprime a seção um. Da mesma forma, para a próxima etiqueta H um, imprime a Seção dois, e para a terceira etiqueta H um, imprime a seção três. Além disso, você pode ver que temos algumas subseções dentro desta seção um Também aqui, numeramos esta subseção. Isso é o que podemos fazer usando o contador. Não precisamos mencionar essa seção manualmente. Se eu duplicar essa parte, se eu duplicar essa parte e alterar o texto, suponha que eu o torne HTML e JavaScript Então, nesta seção, você pode ver o resultado. Agora ele cria uma nova seção chamada Seção quatro, e se eu duplicar uma das subseções e definir esse arquivo, você pode ver o resultado Em nossa Seção dois, agora temos um total de quatro subseções, mas antes da tag H two, não criamos nada Não o digitamos manualmente. Então, usando o contador, podemos rastrear quanto tempo usamos. E, como eu disse, os contadores são como variáveis. Como eu disse, temos que executar dois contadores relacionados à propriedade, incremento do contador e redefinição do contador, e também temos a função relacionada, que é contador Essas duas propriedades e a função se correlacionaram entre si Agora vamos tentar entender como essa propriedade e a função funcionam. Nossa primeira propriedade é a contra-resistência. Aqui, primeiro, precisamos passar um nome de contador. Em seguida, precisamos mencionar em qual ponto eu quero operar o contador Aqui você pode usar qualquer contra-nome. Só é preciso lembrar que você não pode fornecer nenhum espaço nesse nome. Basicamente, aqui criamos uma variável e um valor. Nossa variável é o nome do contador e o valor que passamos aqui e nosso valor é um. Agora precisamos imprimir esse contador. Para isso, precisamos usar essa função de contador e, para executar essa função de contador, você precisa usar o conteúdo da propriedade CSS. Em seguida, você precisa mencionar o contra-nome exato usando a função Counter contador dentro do endereço redondo é, como você pode ver aqui, criamos um contador chamado meu contador. Vou passar o nome da variável. Em seguida, ao chamar esse valor, precisamos incrementar o valor Basicamente, quero dizer que aumentamos o contador. Para isso, novamente, você precisa usar essa propriedade, incremento de contador Nesta propriedade, em primeiro lugar, você precisa mencionar qual contador deseja incrementar No nosso caso, meu contador, e então você precisa passar o valor de incremento cinco No nosso caso, quero incrementar o contador com cinco. Ele imprimirá primeiro , imprimirá um, depois imprimirá seis porque incrementa o contador com cinco Em seguida, ele imprimirá seis mais cinco. Vai imprimir 11. Em primeiro lugar, precisamos criar a redefinição do contador. Aqui, precisamos mencionar o nome do contador e o valor do contador. Em seguida, precisamos imprimir o contador usando a função de contador. Para isso, precisamos usar a propriedade de conteúdo, contador de conteúdo e, dentro do recesso redondo, precisamos passar o contador que eu quero incrementar Na próxima etapa, precisamos incrementar o contador usando a propriedade de incremento do contador . Então, ele não reiniciará o contador. Ele imprimirá o contador novamente. Após o incremento, a contagem não reiniciará o contador Em seguida, ele imprimirá o contador. Depois de imprimir o contador novamente, ele incrementará o contador e continuará Agora vamos falar sobre o uso prático dessa propriedade. 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á crio um documento de estimativa chamado HTML de ponto de índice. Em nossa etiqueta de estimativa, temos uma etiqueta de cabeçalho. Depois, temos algumas tags de parágrafo e duas tags de cabeçalho. Primeiro, temos o título dois, depois o parágrafo. Primeiro, temos o título dois, depois o parágrafo. É assim que repito o título dois e o parágrafo por um tempo. E agora eu quero começar um contador antes de todos os títulos. Para isso, vamos usar incremento do contador CSS e o valor de redefinição do contador Vamos ver como funciona. Então, primeiro, vou pular para a tag body, counter rest, e aqui vou chamar counter resit property. Contra-descanso. Primeiro, vou fornecer um nome de contador, e nosso sobrenome é M e nosso nome de contador é M Counter Depois de fornecer o nome, vou passar um valor e vou passar zero. Isso significa que iniciará o contador após o valor zero. Então, ele iniciará esse contador a partir de um, e agora vou selecionar o título para marcar, H dois, título dois, e vou usar sudo classes B quatro Então, antes de todo o H para marcar dentro das prensas redondas, vou usar conteúdo Primeiro, precisamos fornecer NameFirst, precisamos fornecer um nome para esse conteúdo e eu vou passar o capítulo do Em seguida, vou executar uma função chamada counter. Então, tipo de cabelo. Contador, depois dentro dos latões redondos, depois dentro das prensas redondas, precisamos passar o nome do contador e o nome do contador é meu contador Então eu vou usar o curso duplo e dentro do curso duplo, eu vou usar a coluna seno e usar este sinal de coluna, eu uso ponto e coluna para terminar a Se eu definir esse arquivo, na etapa superior deste arquivo, agora você pode ver que antes de cada H duas tags, ela adiciona o Capítulo zero. Agora a questão é por que ele imprime zero? Porque aqui não incrementamos nosso contador. Precisamos incrementar nosso contador e, para incrementar o valor, precisamos usar a probabilidade de incremento do contador Então, vamos chamar a propriedade de incremento do contador. Dentro dos dois, então eu vou usar o contra-incremento. Então eu quero incrementar meu contador. E eu quero incrementar em um. E eu vou configurar esse arquivo. Até configurar esse arquivo, você pode ver o resultado. Agora ele imprime o Capítulo um, Capítulo dois, Capítulo três, Capítulo quatro. Toda vez que ele incrementa seu contador r em um. Agora, se eu mudar o valor dois, agora, toda vez ele vai incrementar nosso contador r em dois Até configurar esse arquivo, você pode ver o resultado. Primeiro, imprime o capítulo dois, depois imprime o capítulo quatro, depois imprime o capítulo seis, depois imprime o capítulo oito. Vamos mudar a cor do capítulo para entender melhor. Então, vou usar a propriedade de cor e vou dizer cor verde. Desculpe, verde, não cinza. Pronto para configurar esse arquivo. Agora está muito mais visível. Agora, vamos mudar o contador, reinicializaremos o testamento. Se eu fizer cinco e depois definir esse arquivo, desta vez você poderá ver nosso capítulo começar com sete porque, por padrão, valor do nosso contador começa com cinco e, em seguida, ele adicionará dois nesse contador. É por isso que ele imprime o Capítulo sete, toda vez que adiciona dois em nosso valor anterior. É por isso que imprime o Capítulo nove Capítulo 11 e o Capítulo 13. Se eu passar um contador e eles configurarem esse arquivo, agora você pode vê-lo imprimir números de série, mas começa com o Capítulo seis Você só precisa se lembrar de que, em nossa propriedade de contador, precisamos primeiro fornecer um nome do contador e, em seguida, mencionar de onde queremos começar nosso contador. E se eu não fornecer nenhum valor para contrariar a propriedade de redefinição, removerei esse valor e, em seguida, definirei esse arquivo, para que você possa vê-lo funcionando em série. Por padrão, o valor de redefinição do contador vem com zero. É por isso que é impresso a partir de 1234. Agora você decide que não quer imprimir o número no contador. Você quer imprimir Alpha etics. Para isso, basta mencionar a parte superior do meu contra-coma, você precisa mencionar a parte superior do Alpha Alpha. Se eu definir esse arquivo, você poderá ver o resultado. Agora ele imprime o Capítulo A, Capítulo B, Capítulo C, Capítulo D. Da mesma forma, você pode imprimi-lo em minúsculas, para mudar de cima para baixo. Alfa inferior. Até sufocar, você pode ver o resultado Desta vez, você pode vê-lo imprimindo letras minúsculas, Capítulo A, Capítulo B, Capítulo C, Capítulo D. E se você quiser imprimir Roman Vu, você pode, você precisa passar a letra inferior do romano Você pode ver agora que imprimimos números romanos, e o último valor é romano superior. Então, se eu passar em maiúscula , esse arquivo, você pode ver que ele imprime números romanos em letras maiúsculas. Além disso, você pode criar um subcontador dentro do contador Deixe-me mostrar o exemplo. Para o próximo exemplo, novamente, eu crio um novo documento html chamado index two style. Como você pode ver, temos um cabeçalho e , abaixo desse título, uma tag, temos um título para tag. Depois de cada tag H um, temos H para marcar. Temos três H para marcar. Esses são todos subtítulos. E agora eu quero correr para um contador diferente para título e um contador diferente para subtítulo Então, primeiro, vou criar uma tag H one do contador quatro. Então, primeiro, vou ligar para a propriedade de redefinição do contador. Reinicialização do contador, seção de reinicialização do contador. Vou chamá-la de seção. E então eu vou criar o H one antes. Então, aqui eu quero digitar H um, ponto e vírgula, dois pontos, dois pontos, seletor de posição antes e, dentro do CIERSSF, chamarei a propriedade CIERSSF, chamarei a Contin. Então, em códigos duplos, quero imprimir a seção. Espaço da seção. Então eu vou pintar o balcão. E eu disse que a prensa redonda é que precisamos fornecer o nome do contador, e nosso nome do contador é seção. Depois de imprimir esta seção, quero imprimir e, em seguida, quero imprimir um sinal de dois pontos É isso mesmo. E então precisamos incrementar o contador Portanto, precisamos chamar a propriedade de incremento do contador. Incremento do contador, incremento do contador, e eu vou passar pela seção E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Primeiro, ele imprime a Seção um, depois imprime Seção dois, depois imprime a Seção três em nosso cabeçalho, uma tag. Agora, precisamos criar quatro subtítulos do contador, e isso funcionará quando tivermos apenas H uma tag Então, para criar esse subcunar, vamos pular para a tag H one Em seguida, dentro da seção de texto H one, criaremos o contador. contagem é reiniciada, e eu vou passar um nome, e vou chamá-lo de subseção E vou incrementar com um, então não vou passar nenhum valor Então, precisamos criar antes de quatro H dois, H dois, dois pontos, dois pontos, antes de prosseguir para o seletor, antes Então, dentro do clirass, eu quero copiar esta seção e vou colá-la Primeiro, vou substituir a seção por subseção, copiar o valor e nomear a seção de conteúdo por subseção Então, em nossa função de contador, precisamos alterar o valor. Seção dois, subseção. Além disso, precisamos mudar nossa seção de contra-ataque. Depois de definir esse arquivo, você pode ver o resultado. Dentro de cada seção, temos uma subseção e também atribuímos um contador a cada subseção Então essa é a nossa contra-palavra. Espero que você goste desse processo. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 90. Cor de caret CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender sobre uma nova propriedade, que é a cor correta. Então, vamos ver como podemos usar essa propriedade prática e qual é a vantagem de usar essa propriedade. Então, como você pode ver lado a lado, abri meu editor de código so studio e meu navegador usando a extensão if server, e eu já criei um documento HTML chamado index dot HTML Então, em nossa etiqueta corporal, temos um profissional. Além disso, você pode ver o t no meu navegador. Temos alguns campos de entrada, nome, sobrenome, idade, e-mail e hobbies Agora, o quien é o que é carrinho? Se eu clicar em qualquer campo de entrada, como você pode ver, se eu ampliar um pouco, como você pode ver, um cabelo Karsalblink Isso é chamado de cursor. Se você quiser alterar a cor intermitente de Karzal, basta usar uma propriedade chamada cor basta usar uma propriedade chamada Deixe-me mostrar como você pode usá-lo. Como você pode ver, eu já selecionei a tag de entrada e a área de texto. Dentro dessa seleção, vou usar a cor do cursor. Arrete a cor e eu vou dizer que é vermelho. Se eu definir esse arquivo e pensar em qualquer campo de entrada, agora você pode ver que ele mudou meu carro ou minha cor. Agora você pode ver que mudou a cor do quilate. Agora fica vermelho e é aplicada a cor do tapete em todos os campos de entrada Também em nossa área de texto. Você pode usar qualquer formato de cor, hexa, RGBA, etc. Se você passar automaticamente, deixe-me mostrar ele aplicará a cor padrão, ou seja, que ele aplicará a cor padrão, ou seja, se eu clicar em qualquer campo de entrada, agora você poderá vê-lo retornar a cor preta. Além disso, se você não quiser mostrar o quilate para isso, pode usar cores transparentes Deixe-me te mostrar. Quero substituir Auto por transparente. Se eu definir esse arquivo e clicar em qualquer campo de entrada, agora você não poderá ver meu carrinho porque agora ele se tornou transparente. Mesmo assim, você pode escrever qualquer coisa nesse campo de entrada. Adicione um. Mas você não pode ver o quilate Espero que agora esteja claro para você o que é cor em quilates. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 91. Regra @import: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender uma coisa nova em CSS, que são as regras de importação de CSS. Então, por que usamos o método da regra de entrada? Suponha que você tenha dois arquivos CSS do tutor. Agora você quer usar um arquivo CSS em outro arquivo CSS. Para isso, usamos a regra de entrada. Não precisamos criar um link para o arquivo em nossa TimlPage. Só precisamos vincular o arquivo CSS principal à nossa página de estimativa e outro desempenhará o papel de suporte, que você vinculará ao arquivo CSS de pontos mínimos, e para importar o arquivo CSS para outro arquivo CSS, precisamos usar essa regra na entrada vermelha Então, dentro do curso duplo, precisamos passar o nome do arquivo, caso contrário, o caminho do arquivo. Além disso, há outro método pelo qual você pode definir a entrada. É outro método em que você pode usar o URL. Se você quiser fornecer um caminho absoluto, nesse caso, você pode fornecer um caminho como esse usando URL. Em nosso primeiro método, você pode transmitir o caminho relativo, mas em nosso segundo método, você pode passar o caminho relativo, também o caminho absoluto. Com isso, ele vem com outra opção em que podemos definir mídia. Como você pode ver neste exemplo, Hero usa uma mídia chamada print. Então, sempre que alguém tentar imprimir a página, nesse caso, ele aplicará esse CSS, estilo de impressão ou CSS. Espero que você já esteja familiarizado com essa mídia. Tudo impresso, em tela e em voz. Todos os tipos de mídia abrangem três tipos de mídia ao mesmo tempo. O segundo é impresso. Ele é usado apenas para fins de impressão e o terceiro é a tela. Ele é usado em nossa tela de celular, tela sensível ao toque , tablet, laptop, computador, etc., e o último é Agora, vamos ver como podemos usar essa regra de mídia na 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 de servidor ativo, e já criei um documento HTML chamado index dot HTML. E, como você pode ver, criamos um layout básico da web. Aqui você pode ver, temos a seção de cabeçalho, seção de menu, seção de conteúdo, a seção da barra lateral e, na parte inferior, temos o FootarSection e não colocamos nenhuma cor nesta Então, se você notar, dentro da etiqueta principal, temos uma etiqueta de link. E nesta tag de link, aqui eu vinculo o arquivo css do ponto principal. Este é o nosso arquivo CSS de pontos mínimos. E nesse arquivo CSS, escrevemos CSS visualmente para a estrutura, não para a cor. É por isso que você não consegue ver nenhuma cor nesta página. E se você notar, você pode ver também temos outro arquivo chamado color dot CSS. Esse arquivo é criado separadamente para cores, cor de fundo, cor seção do cabeçalho, cor da seção do menu, seção de conteúdo, cor, cor do aparador, etc E agora vou inserir esse arquivo CSS de pontos coloridos específico no arquivo CSS de pontos principais. Posso usar diretamente o arquivo CSS de pontos coloridos com nosso HTML usando a tag Link, mas não vou usar isso. Vou importar o arquivo CSS de pontos coloridos para o arquivo CSS de pontos principais. Então, vou inserir esse arquivo. Apenas uma coisa que você precisa lembrar: você precisa importar o arquivo na parte superior. Então, aqui, vou digitar na entrada vermelha. Então, dentro dos códigos duplos, vou passar o caminho do arquivo, que é CSS com pontos coloridos. E ponto e vírgula nesta linha. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, como você pode ver, agora ele coloca toda a cor no meu layout. Parece colorido na seção do cabeçalho, seção menu, seção da barra lateral e seção do rodapé Além disso, o plano de fundo desta página da web. E agora eu quero importar o arquivo CSS PrintStyle dot. Se alguém tentou fixar esta página da web , não quero imprimir a seção da barra lateral Além disso, não quero imprimir este manual. Eu só quero imprimir a seção exata do conteúdo. Ou que seu CSS criativo de cinco estampas. Aqui, basicamente ocultamos a barra lateral e a seção do menu. Como você pode ver, o menu e a barra lateral não exibem nenhum. Além disso, eu também aumento o conteúdo com área de 100%. E agora vou inserir esse arquivo usando o método de regra de entrada. Então, aqui vou digitar na taxa Import e, desta vez, vou usar o URL. E dentro dos códigos duplos, vou passar o CSS do Printylet e vou definir esse arquivo Depois de definir esse arquivo, você pode ver o resultado. E há outro problema. Após a entrada, o estilo de impressão CSS, ele remove nossa manobra e nosso lado era Para resolver o problema, precisamos definir a mídia. Precisamos definir o propósito da mídia. Para isso, você precisa definir a mídia. Então, aqui, vou digitar print. Se eu definir esse arquivo, agora você poderá ver a seção cibernética, também a seção de menus. Mas se eu tentar imprimir a página, deixe-me mostrar a impressão. Agora você pode ver em nossa página de impressão que não temos a seção de menus e a seção da barra lateral Eu imprimo o cabeçalho, o conteúdo e a seção de rodapé. Então é isso que podemos fazer usando mídia impressa. 92. Fontes de ícones de Css: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos sobre fontes de ícones. Vamos aprender como podemos usar telefones com ícones em nossas páginas de tamale Mas antes de começarmos nossa prática, vamos ver o que são fontes de ícones. Então, como você pode ver, aqui eu abro o modelo de site. E nesta seção da barra superior, como você pode ver, temos endereço do escritório, departamento de vendas, horário de funcionamento, etc Mas aqui você pode ver os ícones antes do texto. Horário de abertura, ligue para nós e endereço do escritório. Aqui você pode ver o ícone de chamada, ícone do mapa e o ícone do relógio. Isso não é uma imagem. Essas são fontes de ícones. Além disso, você pode ver esse ícone na seção Ícone GR, ícone Subot, ícone de documentação e ícone de carrinho Não usamos imagens para isso. Usamos fontes de ícones para criar esse ícone. Como qualquer outro telefone, todas essas são fontes. Esses ícones são feitos com fontes. Se usarmos imagens sem fonte , isso aumentará o tempo de carregamento do nosso servidor. Além disso, isso tornará o layout do nosso site muito pesado. É por isso que usamos fontes de ícones. A vantagem de usar a fonte do ícone é que todos os tipos de fontes estão disponíveis em um único arquivo. Não precisamos pesquisar nenhum tipo de ícone no site. Você pode acessar milhares de imagens de um único arquivo. Agora vamos ver como podemos inseri-lo em nossa página da web. Para isso, precisamos ir ao Google e pesquisar as fontes dos ícones. E aqui você pode ver um site, Font Awesome. Este é um dos sites mais populares que fornecem fontes de ícones. Sem isso, existem muitos sites que fornecem fontes de ícones. Até o Google fornece fontes de ícones. Mas neste tutorial em vídeo, eu gostaria de usar o Font Awesome. Então, vou clicar neste link. Como você pode ver, é um redirecionamento para este site. Portanto, ele fornece a versão gratuita e também fornece a versão P, mas gostaríamos de usar a versão gratuita. Então, vou clicar nesse botão e começar de graça. Depois de clicar, comece gratuitamente, é redirecionado para esta página Agora, aqui você pode ver nesta seção, ele ensina como podemos usar esse telefone. Podemos usá-lo em nossos projetos web, projetos desktop com APIs Em vários projetos, podemos usar esses telefones, mas eu gostaria de entrar em nosso projeto web Então, aqui você pode ver a opção de download. Basta clicar na opção Download. Depois de clicar em As opções de download foram refeitas para esta página. Agora somos nós. Esta é a fonte awesome Verse six. Essa é a versão mais recente. Foi lançado em abril de 2024. Para baixar esta fonte, basta acessar a página de download do fontsom.com slash A partir daqui, você pode ver a opção de download. Como você sabe, vamos usar essa fonte para nossos projetos na web. Para isso, precisamos usar essa opção. Precisamos baixar essa opção, gratuita para a web. Eu já baixei essa fonte. Se você clicar nessa opção, automaticamente, essa fonte será baixada. Se você baixar essa fonte, ela fornecerá o arquivo Cs que você pode usar com pré-processadores Além disso, ele fornece arquivos SVG. E não se preocupe. Vamos aprender sobre SAS, pré-processador CSS e gráficos WIG em nosso próximo tutorial Então, depois de clicar neste botão de download, ele será baixado em um arquivo Z. Em seguida, você precisa extrair esse arquivo. Depois de extrair esse arquivo. Como você pode ver, se eu abrir essa pasta, ela fornece arquivo CSS, arquivo CS, como pilha, script, SVG, formulários web, etc Então, primeiro, vou abrir a pasta CSS. Aqui, ele fornece todos os tipos de fontes, marcas, SVG sólido regular, etc E se você quiser usar tudo isso, então você pode usar todo esse arquivo. Agora vamos tentar explorar qual é o significado de todo tipo de fonte. Então, vamos acessar o site e clicar nos ícones dessa opção de menu. Se eu clicar em ICOs, como você pode ver, aqui você pode ver que a versão seis do Font Awesome fornece um total de 30.199 Mas é só para proversão. Agora, vamos rolar um pouco para baixo na página e pular para a seção de fontes. Então, vou começar com formas sólidas. Aqui você pode ver que todos os ícones são sólidos. E se você quiser formas claras, clique em Luz. Agora você pode ver que todas as fontes são feitas com linha de borda. Agora, essas não são fontes sólidas. Da mesma forma, se eu selecionar a seção fina e desmarcar a seção clara, agora você pode ver que a borda dos ícones é mais fina do que a versão anterior E se eu te mostrar o normal, deixe-me te mostrar o normal. Agora você pode ver que todos os ícones são feitos com 50 50. Eu quero dizer que é feito com sólido. Como foi feito com a linha de fronteira. Então, ele divide nosso ícone em um estilo diferente. Portanto, ele fornece todo tipo de CSS para isso. Mas se você quiser usar todo tipo de avanço de fonte para isso, você pode usar esta, esta opção. Então, vamos usar todas as fontes. Então, para copiar esse arquivo, quero movê-lo em nosso diretório de trabalho atual. Este é meu diretório de trabalho atual e eu quero colá-lo aqui. Com isso, preciso copiar mais cinco, desculpe, outra pasta, que é web fonts. Então, vou copiar essa pasta de fontes da web. Aqui você pode ver todos os tipos de fontes. Então, vou copiar a pasta inteira e colar no meu diretório de trabalho atual. Para mim e para você, é uma maneira difícil de usar fontes da web. Não se preocupe Além disso, vou te mostrar o caminho mais fácil. Agora, vamos entrar no editor de código do estúdio Wizard. Então, como você pode ver, estamos no meu editor de código e este é meu diretório de trabalho atual Aqui você pode ver o arquivo css do Adt. Também temos uma pasta chamada web fonts. Agora vou abrir a pilha Adt Css. E agora precisamos vincular todas as fontes que dentro da nossa pasta de fontes da web a esse arquivo. Para isso, precisamos rolar minha página para baixo. Precisamos rolar para baixo na página Aldo CSS. E como você pode ver, temos a fonte, e essa fonte redireciona para toda a fonte que está dentro da pasta webfont Então, precisamos vinculá-lo novamente. Para isso, para isso, precisamos alterar o diretório raiz atual. Precisamos redirecionar sua própria pasta. Então, vou reescrever isso para um ponto de cada link de URL. Porque essa pasta é meu diretório de trabalho atual. É por isso que não precisamos dar mais dois passos para vincular a pasta. Eu sei que essa é a maneira muito difícil. Essa não é a maneira mais fácil, mas preciso te mostrar isso. E então eu vou configurar esse arquivo. É isso mesmo. E agora vou abrir meu projeto anterior, onde criamos um layout web do Bessy. Você se lembra desse projeto Bessy web layout? Sim, vamos aplicar todas as fontes de ícones neste projeto. E agora precisamos vincular todos os arquivos CSS de pontos nesta página da web. Então, dentro da tag de cabeçalho após a tag de título, vou digitar link, link, e precisamos fornecer o caminho desse arquivo, todo CSS de pontos, e eu vou definir esse arquivo. Agora nossos ícones estão prontos para uso. Agora, vamos ver qual ícone vamos usar. Vamos usar o ícone inicial para o menu Home Link. Então, vamos entrar no site. Então você precisa selecionar a opção gratuita porque vamos usar a versão gratuita da fonte. É por isso que eu gostaria de escolher a opção gratuita. E para casa, vou usar esse ícone, casa. Então, vou clicar nesse ícone. Depois de clicar nesse ícone, como você pode ver, ele fornece algumas opções. Podemos baixá-lo como um arquivo SVG. Além disso, ele fornece um link Sable. Se eu usar o código, o código exato , ele criará o ícone. Além disso, se você estiver codificando com react, ele também fornece código para react Para VA e também é muito bom fornecer. Mas vamos usar a fonte em nossa página t. Então, vou copiar esse link. E se você notar que nosso ícone é sólido. É por isso que atribuir uma classe F é sólido. E esse é o ícone da casa. Além disso, atribui uma casa de classe FA. Se eu usar a versão normal, agora você pode ver que nossa classe ainda é a mesma de uma casa, mas também atribuída a outra classe chamada Aregular Da mesma forma, se eu clicar na versão mais leve, agora ela atribui uma classe, Flight, e é uma casa. É por isso que ele retorna a uma casa. E se eu selecionar essa opção, agora ela atribui uma nova classe, que é Fa dutne, que significa tom duplo Da mesma forma, se você clicar nessa opção fina, agora poderá ver que ela fornece vidro fino FA. Então, vamos começar com uma classe sólida, F é sólida. Então, novamente, vou copiar esse código. Então eu copio esse recorte e vou colar antes de casa Então, precisamos ir para a seção do menu na minha página estável. Então, antes de ir para casa, eu quero passar, precisamos colá-lo aqui. Então, se eu definir esse arquivo, agora você pode ver o ícone inicial anexado à opção Menu Inicial. E se você não gosta de um ícone sólido, basta alterar o nome da classe. Suponha que eu queira usar o Light Virgin. Voo leve. E se eu configurar esse arquivo, até configurar esse arquivo, como você pode ver, ele não funcionará corretamente porque acho que se eu selecionar a versão light, sim, é uma versão profissional. Somente a versão pro pode usar essa opção. Agora temos apenas uma opção. Precisamos usar o sólido. Então, eu quero copiar esse código novamente e substituí-lo pelo antigo e definir esse arquivo novamente. Portanto, temos alguma limitação. Esta versão não é gratuita para todos. Em nossa versão gratuita, ele fornece apenas 1.392 ícones. Portanto, precisamos usar uma versão mais antiga dessa fonte. Como eu disse anteriormente, vou mostrar um total dois métodos pelos quais podemos usar telefones da web em nossas páginas da web. Essa é a mais difícil, e agora vou mostrar a vocês o método fácil, o método muito fácil. Como você pode ver, aqui eu abro um site chamado wthschool.com Este site é o melhor recurso para aprender o desenvolvimento de sites. Agora, clique na seção CSS. Depois de clicar na seção CSS, role um pouco para baixo. Aqui você pode ver a opção. Nomeie os ícones CSS. Clique nessa opção e isso fornecerá total de três exemplos de como você pode usar ícones CSS. Ele fornece um link CDN fontosom. Além disso, ele fornece o link CDN do ícone Boosterp. Com isso, ele fornece fontes do Google. Como eu disse, vamos usar o fontosom para este tutorial Então, aqui você pode ver uma opção, nome, ler mais sobre como começar com pontosom em nosso tutorial PontosomFive Sua edição gratuita fornece um total de 588 ícones. Defina rápido somente para copiar essa tag de script. Então, vou copiar essa tag de script e, em seguida, vou entrar no meu editor de código do Visual Studio. Em seguida, insira essa tag de cabeçalho Primeiro, vou colar essa tag de script Então, um título, vou colar essa tag de script e vou definir esse arquivo. Em seguida, vamos acessar o site novamente. A seguir, vamos experimentar alguns ícones de acessibilidade. Então eu clico neste link e, como você pode ver, ele fornece alguns ícones de acessibilidade. Suponha que você queira usar esse ícone de legenda. Para isso, você precisa copiar essa classe. Depois de copiar essa classe, vamos entrar no código do estúdio. Deixe-me te mostrar. Então, aqui, eu vou usar o ITAC I. Então, dentro dessa iTAG, vou atribuir uma classe E, como eu disse, precisamos usar a classe específica para usar o ícone de legenda, que é uma legenda oculta AA rápida Vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele não está funcionando porque aqui precisamos de um código J específico. Para isso, vamos voltar ao navegador novamente. Para isso, você precisa fazer login neste site. Ele fornecerá o código JavaScript, o código JavaScript Wontosom, algo parecido Este é o seu link CDN pessoal do pontosom. Basta copiar esse código e voltar ao navegador e substituir esse código, substituir o código antigo pelo código. E então defina esse arquivo. Após a etapa deste arquivo, agora você pode ver o resultado. Eu imprimo o sinal da legenda e, em seguida, vou duplicar essa linha várias vezes . Total de três vezes. E agora, passo a passo, vou aumentar a altura dessa fonte. Então, para isso, precisamos usar estilo de atributo de estilo. Como eu disse, nossos ícones funcionam como uma fonte, então você pode usar as propriedades da fonte para manipular esse tamanho de fonte Então, vou usar a propriedade do tamanho da fonte, o tamanho da fonte e vou atribuir 24 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, aumentou nosso primeiro tamanho de fonte. Da mesma forma, vou aumentar todo o tamanho da fonte. Então, na próxima fonte, vou atribuir o tamanho 36 da fonte ao estilo sal de 36 semanas. Com isso, quero atribuir uma nova cor de fonte, e é muito simples alterar a cor dessa fonte. Só para usar a propriedade de cor. Cor, e eu quero a cor vermelha. Em seguida, basta definir esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Em seguida, vou duplicar essa linha novamente e, desta vez, vou remover as duas linhas porque você não precisa experimentar tanto ar frio Eu vou aumentar o valor. Desta vez, vou usar 48 pixels, e aqui vou usar a cor verde e definir esse arquivo novamente. Agora vamos experimentar outros ícones. Então, novamente, volto ao site, entro na seção de ícones CSS e redireciono para pontosm A partir daqui, de acordo com a situação, você pode obter vários formulários. Suponha que, se você quiser fontes de alerta, essas são as fontes de alerta que você pode usar em seu site. E se você quiser ícones de animais, basta colar nos ícones de animais, você pode ver o resultado. Ele fornece todos os tipos de ícones de acordo com suas necessidades, data e hora, design, editor, educação, etc Suponha que eu use este, esse ícone Por. Mas desta vez, não vou usar esse nome de classe. Vou usar o Unicode. Apenas para usar apenas um nome de classe FAs. Deixe-me te mostrar. Vou copiar esse UICode e voltar ao editor de código do estúdio Então, aqui, eu vou criar um botão, botão, e neste botão, em seguida, dentro desse botão, eu vou usar a iTag I. E nesta tag I, primeiro, eu vou encontrar uma classe, e nesta classe, precisamos usar apenas um nome de classe, AA é Em seguida, vou usar o Unicode específico. Usaremos esse unicode para usar o ícone Bal. Além disso, vou passar uma mensagem neste botão e no botão Estou digitando. E eu vou configurar esse arquivo. Agora você pode ver essa etiqueta de botão com um ícone de bola. E se você quiser aumentar o tamanho do botão, o tamanho da bola, caso contrário, aumentar o tamanho, você precisa usar a propriedade de tamanho da fonte. Estilo, vou usar o tamanho da fonte. E para esse botão, vou usar 24 pixels e vou configurar esse arquivo novamente. Depois de definir esse arquivo, você verá o resultado. Então é assim que podemos usar ícones diferentes de acordo com a situação. Existem vários sites que fornecem esse tipo de fonte, mas a fonte também é a melhor Se você tiver uma assinatura profissional, poderá acessar tudo isso. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 93. Tutorial de estilo de barra de rolagem CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao CSS e, neste tutorial, aprenderemos o estilo da barra de rolagem. Antes de começarmos nossa prática, vamos ver que tipo de estilo podemos aplicar em nossas barras de rolagem. Como você pode ver neste exemplo, temos um total de seis barras de rolagem diferentes. Temos uma barra de rolagem sólida, temos uma barra de rolagem Temos uma barra de rolagem que é feita com borda, temos uma barra de rolagem com gradiente Para criar esse tipo de barra de rolagem, CSS introduz algumas propriedades novas Essas não são propriedades. Esses são elementos poseido Então, vamos tentar entender os elementos do poseido. Os elementos positivos são particularmente introduzidos na barra de rolagem de estilo. O primeiro elemento positivo é a barra de rolagem. O segundo elemento positivo é o polegar da barra de rolagem. O terceiro é o scroll bat track e o quarto é o canto da barra de rolagem Alguns navegadores não oferecem suporte a esse elemento. Somente o Chrome, o Safari e o Opera o suportam adequadamente. Além disso, não usamos essa propriedade diretamente em nosso navegador. Precisamos usar o prefixo, webkit, e depois de usar o prefixo webkit, fica assim Depois de dois pontos, precisamos digitar hífen webkit, hífen e, seguida, precisamos passar o nome positoelmin Então, sem falar muito, vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código do estúdio Rizal e meu navegador usando a extensão if server, e já crio um documento HTML chamado index dotsTML Então, como você pode ver, Harry criou o mal e também definimos um Com isso, você também pode ver uma barra de rolagem vertical. E eu vou estilizar essa barra de scrull, e eu já aplico um pouco de CSS nesse sabor profundo Aqui definimos com 250 pixels de altura 400 pixels. Além disso, definimos a borda da margem e o transbordamento, o transbordamento automático. É por isso que você pode ver essa barra de rolagem. Então, primeiro, precisamos selecionar o elemento DV usando seu nome de ID Tem DAG, sabor, sabor, cólon, cólon, hífen, webkit Precisamos usar esse prefixo sem usar o prefixo, acho que não vai funcionar Então, vou digitar webket scrollbar. Então, dentro da resina de Cali, usando esse vidro posto, podemos definir a largura da barra de rolagem Podemos definir uma barra de rolagem personalizada com. Então, eu vou usar com 20 pL. Se eu definir esse arquivo, você não poderá ver nada porque precisará aplicar uma cor de fundo. Então, vou usar o plano de fundo da propriedade do diagrama e vou usar a cor cinza. Depois de definir esse arquivo, você pode ver o resultado e também observar a espessura da barra de rolagem E agora precisamos aplicar a trilha da barra de rolagem. Então, vou atualizar esta seção e aqui vou digitar o painel da barra de rolagem Aqui, eu não vou mencionar. Só quero mencionar a cor de fundo. E, por enquanto, vou aplicar a cor verde. E eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele define nossa trilha. Além disso, vou comentar essa cor de fundo na barra de rolagem Lembre-se de que nossos carros se movem na trilha da barra de rolagem, não nessa barra de rolagem Para deixar isso mais claro, deixe-me aplicar um raio de borda Em algum momento, no raio da borda, vou aplicar dez pixels. Depois de definir esse arquivo, você pode ver a borda. Esta é nossa área de rastreamento da barra de rolagem, e agora vou aplicar nossa terceira propriedade, nosso terceiro elemento posito, que é o polegar da barra de rolagem Então, eu vou cavar esta seção. E eu vou substituir Jack pelo polegar. Com isso, vou mudar a cor do polegar. Caso contrário, você não entenderá o polegar. Vou aplicar a cor amarela e vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Agora você pode ver nosso polegar da barra de rolagem funcionando corretamente. Além disso, você pode aplicar cores gradientes. Então, vou aplicar cores de gradiente linear. Então, vou duplicar esta seção e comentar a linha anterior E aqui, vou digitar gradiente linear. E aqui, vou passar para as duas cores vermelhas, e nossa segunda cor é amarela. Depois de estudar esse tempo, você pode ver o resultado. Além disso, podemos aplicar a cor do gradiente em nossa faixa. Vamos tornar esse pergaminho, mas a trilha, um pouco atraente. Então, aqui vou aplicar a cor cinza. E eu vou configurar esse arquivo. Vamos usar uma versão mais clara dessa cor cinza. Não há cinza preciso, muito cinza. E eu vou configurar esse arquivo. Sim, agora está muito bom. Além disso, vou aplicar uma pequena sombra de caixa. Então, vou digitar box shadow. Primeiro, vou inseri-lo. Insira, então de XX é zero, de YX é zero e, para o desfoque, vou usar E também precisamos aplicar a cor da sombra. Então digite RGBA RGBA dentro do latão redondo, vermelho para vermelho, eu vou passar zero Para verde, também vou passar zero e para azul, também vou passar de zero. E para o valor Alpha, vou passar 0,3. Eu quero 30% de transparência. Se eu definir esse arquivo, se eu definir esse arquivo, você poderá ver o resultado. Depois de atribuir a sombra da caixa, ela parece uma forma de três D. Agora, nossa barra de rolagem parece um pouco atraente. Com isso, vou usar o tipo similar de sombra em nossa área do polegar Então, vou copiar essa sombra da caixa de seção e colá-la aqui. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Então essa é a barra de rolagem vertical. Além disso, você pode aplicar a barra de rolagem horizontal. Para isso, precisamos passar uma imagem. Então, hero digite mag dot source, e se eu mostrar meu diretório de trabalho atual, há uma imagem de imagem com ponto JPG Vou passar o caminho do arquivo, ponto da imagem JPG. Vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver a barra de rolagem horizontal e ambas as barras de rolagem seguem a mesma propriedade. Agora, se você notar, você pode ver na esquina, temos um espaço. Para preencher essa área de canto, ele também vem com esse elemento positivo, que é o canto da barra de rolagem. Para isso, vou duplicar esta seção e substituir o polegar pelo canto E na esquina, vou usar somente a cor de fundo. Não preciso usar o raio de vento. Sim, você pode, se quiser usá-lo. Então digite o plano de fundo e eu quero a cor vermelha do fundo. Se eu definir esse arquivo, você poderá ver o resultado. Além disso, você pode usar cor gradiente se quiser usar. Então, espero que agora esteja claro para você como podemos estilizar nossa barra de rolagem Para isso, precisamos usar algum seletor de elementos Posido, que é barra de rolagem, faixa de palavras escolares, polegar de palavras escolares e canto de palavras E se você quiser brincar com a largura da escola, sim, você pode. Se você quiser reduzi-lo para dez pixels e, em seguida, submeter o arquivo, você pode ver a barra de rolagem E é aplicada a propriedade de largura somente à palavra vertical da escola. Ao mesmo tempo, se você quiser mencionar a altura, aplicará a palavra escolar horizontal. Agora, seu design de palavras de rolagem e controle de comportamento estão em suas mãos. Utter mencionou a largura dessa barra escolar, então precisamos fornecer uma trilha da barra de rolagem para onde nossa barra escolar se moverá e, em seguida, precisamos criar o elemento polegar E, finalmente, podemos controlar a esquina do bar da escola. Então, espero que agora esteja claro para você como podemos usar essas propriedades. Então, obrigado por assistir a esta estação de vídeo para ver o próximo tutorial. 94. Tutorial de raiz de fluxo de exibição de CSS: Ei, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos um novo valor. Esse valor é uma propriedade de exibição relacionada, que é a raiz do fluxo. Em nosso tutorial anterior, já abordamos esses valores relacionados à probidade de exibição, mas há outro valor introduzido na propriedade display, que é a raiz do fluxo Agora, vamos ver onde podemos usar esse valor. Suponha que temos um elemento profundo e, dentro desse elemento profundo, temos outro elemento profundo. Então, esse é o elemento profundo de nossos pais, e esse é o elemento profundo de nosso filho. Portanto, sempre que usamos a propriedade float como elemento filho , isso cria um problema Não importa o valor que você usa. Pode ser à direita ou à esquerda. E o problema é assim. Como você pode ver, o pai se aproxima profundamente do elemento filhodiv e o filho e o elemento filho vão para o fundo do Para resolver esse problema, já temos duas soluções. Nossa primeira solução é que precisamos usar a propriedade de estouro em nosso automático de estouro Mas essa solução não está funcionando corretamente em todo o navegador. Às vezes, ele não funciona no Internet Explorer. Portanto, essa solução não é sugerida. Sem isso, temos outra solução, que é a correção de engrenagens. Para usar o clear fix, precisamos usar o Aptar Positoselector. Precisamos usar essa classe pasito em nossos pais. E então precisamos usar três propriedades CSS, conter um conteúdo em branco e, em seguida, exibir a propriedade e a propriedade tear. Além disso, essa solução não é perfeita porque aqui precisamos digitar várias linhas. Precisamos usar o seletor upra, precisamos criar, precisamos pegar três propriedades e chamamos esse método car fix E isso também não é uma solução permanente. Mas agora o CSS introduz uma solução permanente , chamada raiz de fluxo de exibição. Então, 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 if server, e já crio um documento de estimativa chamado index dot HTML. Então, como você pode ver em nossa tag corporal, temos uma tag Deep principal e, dentro dessa tag Deep principal, temos uma tag Dip secundária E você pode ver o resultado no meu navegador. E também, eu estilizo esses elementos profundos. Isso é o que geram Deep Element. Aqui definimos com 600 pixels e, em seguida, definimos a margem 55 a 50, e também definimos uma borda sólida de dois pixels. Então, em nossa tag secundária, usamos 100 pixels e 100 pixels de altura. Com isso, sua cor de fundo é vermelha. E agora vou usar a propriedade float no meu elemento filho Então HemotypeFloat, flutue, let. Subindo este arquivo, aqui você pode ver o problema. Agora, o elemento filho sai do elemento pai. Para resolver esse problema, o CSS introduz o valor raiz do fluxo. Então, em nosso elemento parentib, vou usar essa propriedade Exibir raiz do fluxo. E eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Como você pode ver, agora isso resolve nossa proteína. Se eu usar float, à direita, e depois definir esse arquivo, você poderá ver o resultado Agora ele move nosso elemento filho para o lado direito. Além disso, não destrói a estrutura de nossos pais. Espero que agora seja Clearfo, qual é o uso desse valor? Se você usar esse valor, não precisaremos usar overflow, caso contrário, clearfake Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo Stun para o próximo tutorial 95. O que é layout de grade de CSS: Olá, pessoal. Bem-vindo de volta. Neste tutorial, vou apresentar a você o que é CSS grid e como funciona Por que devemos usar CSS greed A primeira parte restante é que é um sistema de grade bidimensional É um novo sistema de layout. Chamamos isso de bidimensional porque podemos lidar com linhas e colunas juntas. Nosso segundo benefício é que o layout da grade substitui o layout flutuante. Não precisamos mais usar propriedades flutuantes, como Margin tier, e não precisamos nos concentrar em flutuar colocado e flutuar Podemos criar layouts com muita facilidade. Nosso terceiro benefício é criar nosso código de forma muito rápida e limpa, porque não precisamos nos concentrar nas propriedades flutuantes e isso aumenta a legibilidade do código Nosso quarto benefício é que não precisamos usar nenhuma estrutura CSS como bootstrap, foundation, CSS materializado, etc. B. Se você entende a grade corretamente , não precisa usar Porque você pode lidar com todas as coisas com a grade CSS. Vamos tentar entender como a grade realmente funciona. Suponha que seja uma profundidade e, dentro dessa profundidade, temos seis profundidades diferentes e chamamos essa estrutura de sistema de grade Sem usar flutuação e margem, podemos fornecer lacunas e lidar com elas juntos Chamamos esse contêiner pai de contêiner de grade. Para criar esse contêiner de grade, precisamos usar a propriedade CSS em nossa profundidade principal , que é a propriedade de exibição, grade de exibição. Quando usamos uma grade de propriedades de exibição, ela automaticamente assume esse contêiner pai como um contêiner de grade Como você pode ver todos os itens neste mergulho, nós o chamamos de itens de grade. Aqui você pode ver uma licença individual, nós a chamamos de célula de grade, aqui você pode ver algumas linhas entre essas profundezas e a chamamos de linha de grade. Aqui você pode ver quatro linhas de grade. Todas essas são linhas verticais. E aqui você pode ver uma lacuna entre essas duas células, que chamamos de sarjeta Da mesma forma, essas linhas estão funcionando verticalmente. Como eu disse, está funcionando em duas dimensões e podemos lidar com isso com muita facilidade, e funciona como células de tabela, linhas e colunas. Aqui você pode ver que, de acordo com essa estrutura, temos duas linhas de grade em nossa imagem, e aqui você pode ver em bordas amarelas, que chamamos de colunas de grade. E aqui você pode ver uma lacuna entre linhas e colunas, e nós a chamamos de área da grade. Em nossos próximos vídeos, entenderemos como podemos criar grades. Em nosso próximo vídeo, abordarei todas as propriedades da grade nesta série de tutoriais. Também aprenderemos como criar um layout bonito usando essas propriedades de grade. Aqui você pode ver o nome do navegador que pode suportar nosso sistema de grade. O Internet Explorer não oferece suporte ao sistema de grade. idade, suporte para Firefox, suporte para Chrome, suporte para Safari e também para Opera Na maioria das vezes, trabalhamos com o Chrome Saffer e o Firefox Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 96. Construção de CSS Grid com linhas e colunas: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos como podemos criar grãos Vamos começar com duas propriedades. Nossa primeira propriedade é Greet tablet column, e nossa segunda propriedade é Greet template Então, vamos começar a prática e tentar entender como funciona. Aqui você pode ver que eu já criei um documento eTmal e abro esse documento HTML usando a extensão de servidor Life E no nosso lado direito, você pode ver nosso navegador. Então, primeiro, vou criar um De onde vou criar um contêiner de grade. Dev e também, vou atribuir uma classe a esse contêiner de classes profundo. E dentro dessa profundidade, vou criar outras seis profundezas e vou definir como classe, item e item um Vou duplicar essa profundidade por cinco vezes. Aqui eu uso várias classes e vou mudar o nome da classe. Item dois, item três, item quatro, item cinco e item seis. Dentro dessa profundidade, vou digitar algum texto. O primeiro, o segundo, o terceiro, o quarto, quinto e o último é o sexto. Se eu definir esse arquivo, aqui você pode ver todas as dicas, primeira, segunda, terceira, quarta, quinta e sexta. Primeiro, vou definir uma cor de fundo para esse contêiner, ponto, contêiner , plano de fundo, cinza. Eu configurei esse arquivo, aqui você pode ver o resultado. Além disso, vou atribuir wed a este contêiner, com 700 pixels. Pois vou fornecer margem para este contêiner. Margem. Para completar, vou usar 50 pixels. Para elevador, vou usar zero. Para baixo, vou usar zero, e para p, vou usar 50 pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora vou fornecer cores diferentes para itens diferentes. Então, devo criar um item seletor um. Além disso, vou definir um plano de fundo para este item. Se eu salvar esse arquivo, você poderá ver o resultado. Agora vou duplicar esse item várias vezes. Para o item dois, vou dizer cor laranja. Para o item três, vou dizer cor verde. Ou item quatro, eu vou dizer cor amarela. Para o item cinco, eu vou dizer cor azul, e para o item seis, eu vou dizer cor roxa. Se eu definir esse arquivo, você poderá ver os resultados. Larry pode ver todas as cores em nossas profundezas. Vamos voltar ao nosso pai D, cuja classe é container. Vou usar uma propriedade que é display e vou usar a grade de exibição. Se eu definir esse arquivo, aqui você pode ver que não há alterações porque não criamos linha e coluna nessa grade. Primeiro, vou criar colunas. Vou usar a coluna de modelo de ganância. Aqui podemos mencionar quantas colunas queremos. Com isso, podemos mencionar a largura da coluna. Suponha que eu queira duas colunas, nossa primeira coluna tem 200 pixels de largura e nossa segunda coluna tem 250 pixels de largura. Se eu definir esse arquivo, aqui podemos ver que ele cria nossas colunas. Nossa primeira coluna tem 200 pixels de largura e nossa segunda coluna tem 250 pixels de largura. Aqui você pode ver em uma linha que criamos duas colunas. Suponha que eu queira alterar a largura da primeira coluna, algo em 350 pixels. Se eu definir esse arquivo, você poderá ver a largura da coluna. Da mesma forma, podemos definir a altura usando outra propriedade. Deixe-me te mostrar. Ótimas linhas de modelos. Aqui podemos definir quantas linhas queremos. Aqui você pode ver que temos um total três linhas em nossa continuidade principal Para nossa primeira linha, quero dizer 100 pixels de altura. Se eu definir esse arquivo, aqui você pode ver o resultado. É aplicável somente para nossa primeira linha , e para nossa segunda linha, eu quero definir a altura de 200 pixels, e para a nossa terceira linha, eu quero definir a altura de 100 pixels. Se eu definir o arquivo, aqui podemos ver o resultado. Se você notar, isso não afeta a largura do nosso contêiner, que é de 700 pixels. Além disso, podemos adicionar outra coluna a essa D. Para isso, primeiro, vou reduzir o valor dessa primeira coluna, 150 pixels, e para a nossa terceira coluna, vou usar 150 pixels mais uma vez, 150 pixels novamente. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora ele cria três colunas, e aqui você pode ver que para a nossa primeira linha, ele define a altura de 100 pixels, e para a nossa segunda linha, ele define a altura de 200 pixels, e não há uma terceira linha neste contêiner. Se tivéssemos a terceira linha em nosso contêiner, ela definiria a altura de 100 pixels. Deixe-me te mostrar. Vou duplicar esse item mais uma vez. E se eu definir esse arquivo, desculpe, precisamos duplicar nosso deep, não o seletor Se eu duplicar esse D e definir esse arquivo, aqui você pode ver o resultado Aqui você pode ver que, para nossa terceira linha, ela cria 100 pixels de altura porque mencionamos 100 pixels de altura para nossa terceira linha. Aqui você pode ver um espaço em branco, e agora eu quero preencher esse espaço em branco com nossa terceira coluna. Para isso, precisamos usar uma propriedade, que é automática. Se eu definir esse arquivo, aqui você pode vê-lo preencher a área com nossa última coluna. Vou preencher todo o espaço restante com nossa terceira coluna Suponha que eu queira mudar nossa segunda coluna com 100 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Se eu usar Auto para a largura da segunda coluna e se eu usar esse Valor para a largura da terceira coluna, e se eu definir esse arquivo, você poderá ver um resultado Agora você pode ver que nossa primeira coluna 150 pixels de largura e nossa última coluna tem 100 pixels de espessura. E nosso espaço de mesclagem é coberto pela segunda coluna porque usamos valor automático para nossa segunda coluna. Deixe-me te mostrar uma coisa. Se você usa o navegador Firefox ou Chrome, basta pressionar Ap 12. É uma opção aberta para desenvolvedores em seu navegador. Se você destacar a queda do contêiner aqui, poderá ver uma opção chamada GET Como você pode ver as propriedades, exiba GED. Como você pode ver um ícone do GED aqui. É chamado de GED Editor. Se você clicar nele, aqui você pode ver muitas opções. Por enquanto, não vou estendê-lo. Vou estender todas as coisas mais tarde, então eu fecho. Mas se eu clicar nessa opção de grade, aqui você pode ver algumas linhas e também os números das linhas e nós as chamamos de linhas de grade. Isso só é possível se você usar a propriedade display grid. Aqui você pode ver que usamos pixels, mas também podemos usar porcentagem. Deixe-me te mostrar. Suponha que eu queira usar duas colunas. Para a primeira coluna, eu quero usar 40% e para a nossa segunda coluna, eu quero usar 30%. Se eu definir esse arquivo, aqui você pode ver o resultado. Nossa primeira coluna cobre 40% da área de nossa largura total de contêiner. E agora eu quero usar a terceira coluna para a nossa terceira coluna, vou usar o Auto Vin. Se eu definir esse arquivo, você poderá ver o resultado. Nossa primeira coluna recebe 40% ou a segunda coluna recebe 30%, e nossa terceira coluna também recebe 30% porque nossa primeira e segunda coluna recebem 70%. Se eu -70% de 100%, o valor restante será 30% É por isso que são necessários 30%. Além disso, podemos usar pixels com porcentagem. Suponha que, para nossa primeira coluna, eu queira usar 100 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Nossa primeira coluna tem 100 pixels e nossa segunda coluna ocupa 30% da largura do nosso contêiner e nossa terceira coluna cobre o espaço restante. Além disso, há outra unidade que é Fer significa fração. Suponha que eu queira duas colunas de um Fer e outra seja um FR. Se eu definir esse arquivo, aqui você pode vê-lo no fundo do nosso contêiner. Nossa primeira coluna ocupa a primeira metade e nossa segunda coluna ocupa a segunda metade. Se eu usar outro valor de Fer e definir esse arquivo, aqui você pode ver que ele cria um total de três colunas e todas as colunas têm largura semelhante, largura semelhante, dividindo igualmente a largura do contêiner, que é 700. Se eu usar dois valores aer para nossa terceira coluna e depois definir o arquivo, aqui podemos ver nossa terceira coluna ocupar duas vezes mais espaço do que nossa primeira coluna e segunda coluna. Aqui você pode ver que podemos controlar grades sem usar flutuação Em seguida, vou usar outra propriedade que é grid gap. Deixe-me te mostrar. Vou usar 15 pixels e, se eu definir esse arquivo, aqui você pode ver que ele fornece uma lacuna igual entre linhas e colunas. Se eu clicar nessa opção de grade, você poderá vê-la. Agora você pode ver isso claramente. No próximo tutorial, vou explicar você claramente. Há outra unidade que podemos usar como valor da coluna do modelo de grade, que é a repetição. Deixe-me te mostrar. A repetição é basicamente uma função. Suponha que você queira duas colunas com a mesma largura. Em nosso primeiro parâmetro, precisamos passar quantas colunas queremos. No nosso caso, dois, e então você precisa passar o tamanho da largura, que é de 150 pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Aqui, precisamos digitar o valor da largura várias vezes. Se quisermos quatro colunas, precisamos digitar quatro aqui. Se eu definir esse arquivo, aqui você pode ver o resultado. Ele cria quatro colunas com a mesma largura. Por enquanto, vou usar duas colunas. Com isso, quero usar uma coluna de esforço. Sim, nós podemos fazer isso. Basta digitar um FR. Se eu salvar esse arquivo, aqui você pode ver o resultado. Primeiro, ele cria dois tamanhos iguais com coluna e depois cobre o espaço restante com nossa terceira coluna. Da mesma forma, podemos usar o valor percentual e o valor do pixel aqui. Deixe-me te mostrar. Suponha que eu queira uma coluna de 40%. Se eu salvar esse arquivo, aqui você pode ver o resultado. Da mesma forma, podemos usar nossa unidade de fração em nossas linhas. Além disso, podemos usar a unidade de fração para nossas linhas. Mas antes, vou definir uma altura para nosso contêiner principal. Altura 700 pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora eu quero duas linhas com a mesma altura. Vou usar a função refit, duas linhas com um F ou altura Se eu definir esse arquivo, aqui você pode ver o resultado. Aqui você pode ver que dividimos igualmente nossas linhas. Esse valor só se aplica às duas linhas, primeira e segunda. Se eu usar três e depois definir os cinco, aqui você pode ver que todas as três linhas estão igualmente divididas. A altura deles é igual. Da mesma forma, podemos usar o valor do pixel aqui. Suponha que, para nossa primeira linha, eu use 100 pixels. Para nossa segunda linha, vou usar 30%. Para nossa terceira linha, vou usar uma unidade For. Se eu definir esse arquivo, aqui você pode ver o resultado. Espero que agora o conceito esteja claro para você. Essas duas propriedades são muito importantes para criar uma estrutura de grade. Nosso primeiro nome de propriedade é coluna de modelo de grade e nosso segundo nome de propriedade é modelo de grade Row. Em nosso próximo tutorial, entenderemos o que é lacuna na grade. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 97. Tutorial de Grid Gap de CSS: É bom ver vocês. Neste tutorial, aprenderemos uma nova grade CSS relacionada a propriedades. O que é CSS grid gap? Temos um total de três lacunas na grade relacionadas à propriedade. Nossa primeira propriedade é a lacuna da linha da grade, e nossa segunda propriedade é a lacuna da coluna da grade e a última é a lacuna da grade. Vamos tentar entender como as propriedades da lacuna da grade funcionam. Aqui você pode ver uma lacuna entre os itens da grade, que chamamos de lacuna da grade. Se vier com linha a linha , chamamos de lacuna entre linhas. E se vier com coluna em forma de coluna, então nós o chamamos de Column Gap. Vamos começar a prática e tentar entender como ela funciona. Aqui você pode ver, lado a lado, que abro meu coitor do Visual Studio e meu navegador usando a extensão if server, e eu já criei um documento HTML no meu diretório Aqui você pode ver que temos um total duas colunas de grade com Oi valor e temos um total de três linhas em nossa grade, 100 pixels, 150 pixels e 100 pixels. Entre esses itens, quero colocar uma lacuna. Talvez voz em linha, talvez visualização em coluna. Primeiro, quero usar o Row Voice gap. Vou usar uma lacuna de linha da grade de propriedades. E eu quero atribuir uma lacuna de dez pixels entre essas linhas. Deixe-me mostrar dez pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Vamos aumentar o valor em 30 pixels. Aqui você pode ver as lacunas entre as linhas. Você pode aumentar o tamanho da lacuna, quanto quiser. Essa é uma lacuna entre fileiras. Se você quiser espaçar entre colunas, precisará usar a propriedade read column Gap. Deixe-me te mostrar. Vou digitar ed column gap. Vou usar uma lacuna de 20 pixels entre as colunas. Se eu definir esse arquivo, aqui você pode ver o resultado. Aqui você pode ver que a lacuna da linha é 30 pixels e a lacuna da coluna é de 20 pixels. Além disso, podemos usar propriedade Stan para essas duas propriedades. Para isso, precisamos usar a propriedade read gap. Deixe-me te mostrar a lacuna. Primeiro, precisamos passar o valor da linha e, em seguida, precisamos passar o valor da coluna. Para linha, vou usar 20 pixels e para coluna, vou usar 30 pixels. Se usarmos a propriedade red gap, não precisaremos mais usar essa propriedade , então vou removê-la. Se eu definir esse arquivo, aqui você pode ver o resultado. A distância entre a linha é 20 pixels e a distância entre as colunas é de 30 pixels. Se eu usar o mesmo valor para lacuna de linha e espaço de coluna, 30 pixels para linha e 30 pixels para coluna e definir esse arquivo, aqui você pode ver o resultado. Agora eu quero mostrar três colunas em nosso contêiner. Vou digitar C, repetir a coluna três. Se eu definir esse arquivo, aqui você pode ver o resultado. Além disso, você pode ver a lacuna semelhante entre os itens da grade, e aqui você pode ver um espaço em branco porque usamos três tamanhos de linha diferentes. Se eu remover este, quero dizer o último e definir este arquivo. Agora você pode ver que não há nenhuma lacuna. altura da nossa primeira linha é de 100 pixels e altura da segunda linha é de 150 pixels. Espero que agora esteja claro para você o que é propriedade do Bit gap. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 98. Tutorial de posicionamento de itens de grade de CSS: Mais uma vez, estou de volta com um novo tutorial relacionado à grade CSS. Neste tutorial, aprenderemos o posicionamento da grade CSS. Vamos tentar entender quais são os itens da grade e qual é o significado da posição dos itens da grade. Aqui você pode ver um parêntese profundo e nós o chamamos de contêiner de grade Nas profundezas do contêiner principal, nós o chamamos de itens de grade Agora, a questão é: qual é o significado de posicionamento? Suponha que você queira mover três itens do Grid para o quinto lugar e também decida mover Pip para o terceiro lugar, algo assim, e chamamos isso de ótimo posicionamento Como você pode ver, colocamos o terceiro item em quinto lugar. Da mesma forma, movemos o quinto item para o terceiro lugar. Então, relacionado a esse tipo de alinhamento, temos algumas propriedades CSS Deixe-me te mostrar. Como você pode ver, temos sete propriedades CSS, como início da linha da grade, final da linha da grade, linha vermelha, início da coluna da grade, etc Por fim, temos uma propriedade curta chamada grid area. Então, vamos falar com o coordenador do Visual Studio e tentar entender como isso funciona. Aqui você pode ver, eu já crio um documento HTML e abro meu navegador e meu codator lado a lado Se eu mostrar, aqui você pode ver, temos um contêiner pai dentro desse contêiner pai, temos um total de seis profundidades. Significa seis itens da grade. Como você pode ver, cada item da grade colorido é diferente. No início, vou mover o primeiro item da grade para o sexto lugar. Da mesma forma, vou mover o item de seis grades para o primeiro lugar. Como você pode ver, já criamos nossos seletores. Item um, item dois, item três. Como eu disse anteriormente nesta série de tutoriais, temos uma opção de navegador em nosso console, que são linhas de grade. Deixe-me te mostrar. Basta selecionar seu navegador e elogiar Ep 12 mean debloper mode. Vou abrir esse painel, na parte inferior do meu navegador. Vou pressionar essa opção. Aqui você pode ver uma opção no meu contêiner de canetas, que é grade. Se eu clicar nele, aqui você pode ver algumas linhas. Agora você pode ver os números das linhas da grade. Você pode vê-lo em linha reta. Além disso, você pode vê-lo em colunas. Neste tutorial, vamos entender qual é o caso de uso dessas linhas. Vamos entrar em nosso primeiro seletor de itens, que é o item um Como eu disse, vou mover esse primeiro item na posição seis. No início, vou usar uma propriedade que é um ótimo começo de linha. Primeiro, precisamos mover esse item de nota para a segunda linha. Como você pode ver, esta é a nossa segunda fila. Vou digitar dois aqui. Se eu definir esse arquivo, agora você pode ver nosso item da primeira série passar para a segunda linha e também precisamos declarar a posição Para isso, precisamos usar outra propriedade CSS, que é a linha de grade N. Mais uma vez, se eu mostrar minhas linhas de grade, aqui você pode ver que nossa posição final é três. É por isso que precisamos passar por três. Se seu robô usa a propriedade grid row, talvez isso crie alguns problemas quando você responde ao seu site. Se eu definir esse arquivo, aqui você pode ver não há alterações, mas é uma boa maneira de usar essa propriedade. E agora precisamos trabalhar com colunas. Como você pode ver, precisamos mover esse item da grade para a terceira posição. Para isso, vou usar outra propriedade CSS, grid columns stir. Aqui, eu vou definir três. Se eu definir esse arquivo, você poderá ver o resultado. Colocamos com sucesso nosso primeiro item lido em sexto lugar. Também precisamos declarar a posição dessa coluna. Leia a coluna A. Como você pode ver, nossa linha termina na quarta posição, então você precisa passar por quatro. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Não é obrigatório, mas para fins responsivos, é muito importante E agora eu quero mover esse quarto item para a primeira posição. Para isso, copiarei esse código, entrarei em nosso quarto item selecionado e passarei o código. Então, nossa linha inicial é a primeira, então vou digitar uma e nossa linha final é duas. Da mesma forma, como você pode ver, nossas colunas começam com um e terminam com dois, tipo Sumo, colunas iniciam, um e coluna terminam com dois. Se eu definir esse arquivo, aqui você pode ver o resultado. Movemos com sucesso nosso quarto contêiner em primeiro lugar. Mas o importante é que não mudamos nossa estrutura de timus Aqui você pode ver nossa estrutura extremista. Usando propriedades de grade CSS, podemos mudar suas posições sem alterar sua estrutura real. Agora vou mostrar a você um método abreviado de todas essas propriedades Agora eu quero mover o quinto item em primeiro lugar. Então, eu pulo para o quinto seletor de itens e, em seguida, vou usar uma propriedade de grade CSS diferente Se você quiser criar uma abreviação para linha, precisará usar a propriedade grid row Deixe-me te mostrar a linha de notas. Primeiro, precisamos fornecer essa posição inicial da linha, que é uma, e então você precisa usar a barra e, em seguida, fornecer a posição final da linha, que é duas Da mesma forma, temos uma propriedade abreviada para coluna, que é coluna de grade. Deixe-me te mostrar. Nossas colunas começam com a linha número um e terminam com a linha número dois. Se eu definir esse arquivo, aqui você pode ver, movemos com sucesso nosso item da quinta graduação em primeiro lugar. Mas e quanto ao item da quarta raça? Não removemos itens de quarta raça deste contêiner. Ele ainda existe em primeiro lugar. Apenas o item cinco, sobreponha o quarto. É por isso que não podemos ver o quarto. Além disso, temos outra abreviatura dessa propriedade Usando essa abreviatura, podemos passar o valor da porta de uma só vez, que é a área da grade. Deixe-me te mostrar. Suponha que eu queira mover o sexto item para o segundo lugar. Para isso, precisamos fornecer o ponto inicial da linha e o ponto inicial da coluna. Nosso ponto inicial da linha é um e o ponto inicial da coluna é dois, e então precisamos fornecer linha e o ponto final da coluna Nosso ponto final de linha é dois e nosso ponto final de coluna é três. Se eu definir esse arquivo, aqui você pode ver movemos com sucesso nossos seis contêineres em segundo lugar. Só precisamos usar uma propriedade de grade CSS, que é a área da grade. Basta lembrar que, primeiro, você precisa fornecer o ponto de partida da linha e, em seguida, fornecer o ponto de partida da coluna. Em seguida, você precisa fornecer ponto final da linha e o ponto final da coluna. Espero que agora esteja claro para você como as colunas de linha funcionam. Há muitos métodos pelos quais podemos posicionar nossas grades. Nos meus próximos vídeos, vou te ensinar todos eles. Em nosso próximo tutorial, aprenderemos como podemos abranger nossos itens da grade? Suponha que você queira abranger seu terceiro item com Eu só quero preencher esta área em branco com este terceiro item. Significa que serão necessárias duas colunas de largura. Eu me lembro desse método, span. Fique ligado no nosso próximo tutorial. Obrigado por assistir a este vídeo. Te vejo em breve. 99. Itens de grade de CSS abrangendo tutorial: É bom ver vocês. Mais uma vez, estou de volta com um novo tutorial relacionado à grade CSS. Neste tutorial, aprenderemos o item CSS grid, spanning Mas antes de começar a prática, precisamos entender qual é o significado de amplitude. Vamos simplificar isso. Aqui você pode ver um contêiner de grade, e dentro desse contêiner de grade, temos seis itens. Se você notar, você pode ver cada item D com o mesmo, e agora eu quero estender d1w Quero estender o item número um para até dois itens. Da mesma forma, quero estender o item duas linhas, algo assim. Para o item um, usamos a extensão da coluna e, para o item dois, usamos a extensão de linha e outros itens organizados automaticamente em seu próprio lugar Vamos começar a prática e tentar entender como funciona. Aqui você pode ver, lado a lado, que abro meu Visual Studio Coreor e meu navegador usando a extensão light server Como você pode ver, temos um total de seis itens de grade em nosso contêiner de patentes e os organizamos em série. Vamos começar com as linhas da grade. Vou elogiar Atwel. E se eu clicar nessa opção, você poderá ver as linhas da grade. E agora eu quero passar nosso primeiro item, coluna em coluna, eu quero estender essa coluna até a linha número três. Vou digitar Bad column d three. Você já sabe que o item um é nosso primeiro item. Se eu definir esse arquivo, aqui você pode ver o resultado. Abrange com sucesso nosso primeiro item da grade, a coluna um. Se você perceber, pode ver todos os itens da grade mudarem automaticamente de lugar. Você pode ver que o item número seis caiu e não especificamos nenhuma altura para nossa terceira linha. É por isso que parece pequeno. Agora vou especificar a altura para essa terceira linha, 100 pixels. Se eu definir esse arquivo, agora você poderá ver o resultado. A altura da primeira linha é 150 pixels e a altura da segunda linha é 150 pixels, mas a altura da terceira linha é 100 pixels. Mais uma vez, vou ativar minhas linhas de grade. E agora eu quero estender nosso segundo item em linha, e quero estendê-lo deste ponto até este ponto. Significa quatro. Para isso, precisamos trabalhar com essas duas propriedades. Vou copiar essas propriedades e colar aqui. Vou mudar o ponto final da linha de notas, que é quatro. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora parece uma página da web. Este é o nosso cabeçalho e esta é a nossa barra lateral. Além disso, podemos usar propriedades abreviadas para isso. Deixe-me mostrar a linha de leitura. Se eu comentar isso para a propriedade, digitar 14 e definir esse arquivo, aqui você poderá ver o mesmo resultado. Não há mudanças. Espero que agora esteja claro para você como as grafias são usadas. Deixe-me te mostrar uma coisa. Aqui você pode ver que temos que contar três colunas com um e ou valor. Neste exemplo, vou comentar essa propriedade. Mais uma vez, vou ativar as linhas da grade. Aqui você pode ver que temos que contar a linha de quatro colunas em nossa estrutura. Mas o que aconteceu se passarmos cinco valores aqui, se eu definir esse arquivo, aqui você pode vê-lo estender nossa coluna com o valor padrão. Agora temos um total de quatro colunas em nosso contêiner. Mas aqui você pode ver que não declaramos quatro colunas, apenas declaramos apenas três Podemos estender nosso item de grade além do contêiner. Em seguida, ele organiza automaticamente o item da grade de acordo com o valor da fração Mas essa não é a boa prática, então vou usar quatro. Se eu definir este, você poderá ver o resultado. Agora vou fixar o terceiro item em sua posição absoluta. Para isso, dentro do seletor do item três, vou digitar grit Row. E também vou ativar as linhas da grade. Nosso terceiro item começa na linha número dois e termina na linha número três, nossa próxima propriedade é a coluna da grade. E você também começa na coluna número dois e termina na coluna número três. Se eu definir esse arquivo, você verá que não há alterações. Essa é a posição absoluta do terceiro item. Agora não consigo mover essa grade desse espaço e agora quero estender a largura da segunda coluna até a linha número três. Para isso, vou usar a propriedade de coluna de grade. E nossa coluna começa na linha número um e termina na linha número três. Se eu definir esse arquivo, você poderá ver um resultado diferente porque já colocamos nosso terceiro mergulho nessa posição, então nosso segundo item da grade não pode ocupar seu lugar Em seguida, ele encolhe automaticamente. Mas se você notar, você pode ver usamos apenas a propriedade da coluna de grade. Não usamos a propriedade grid row. Se eu usar a propriedade grid row, deixe-me mostrar a você. Fila e tente mover este item neste local. Deixe-me te mostrar. Mas primeiro, vou ligar a linha vermelha. Nossa linha começa na linha número dois e termina na linha número três. Se eu definir esse arquivo, agora você poderá ver um resultado diferente. Agora estão se sobrepondo. Se você quiser ver o item S completamente, precisará usar a probidade do índice Z. Deixe-me te mostrar. Vou digitar o nome de probidade Z index. Por padrão, ele vem com zero. Raiz de soma tipo um. Se eu definir esse arquivo, agora você poderá ver o segundo item completamente. Nosso terceiro item ainda existe por trás desse segundo item. Agora vou mostrar o valor diferente que usamos para abrangência, que é amplitude Deixe-me te mostrar. Soma o tipo de quarto, a extensão e eu quero abranger nosso primeiro item até quatro colunas , espaço, quatro Se eu definir esse arquivo, desculpe, não temos quatro colunas em nosso contêiner. É por isso que ele estende a coluna e cria uma nova linha de grade. Para isso, precisamos usar o intervalo três. Se eu definir esse arquivo, agora voltaremos ao nosso resultado antigo. Se eu mostrar as linhas da grade, aqui você pode ver que temos um total de quatro linhas. Esse valor funciona com números de itens de grade e isso funciona com números de linha de grade. Essa é a principal diferença entre dois valores. Como podemos expandi-lo em linhas. Deixe-me te mostrar. Abrange dois. Se eu definir esse arquivo, agora abrangeremos nosso primeiro contêiner, linha também é a coluna vazia Como usamos a propriedade de índice para nosso segundo item, é por isso que nosso primeiro item não cobre o segundo item. Sei que é um pouco complicado, mas estou tentando explicar de forma muito simples. Além disso, podemos usar esse valor com esse valor diferente. Deixe-me mostrar para você o segundo período. Se eu definir esse arquivo, aqui você pode ver o resultado. Por enquanto, eu não preciso disso, vou desfazer isso. E também quero alterar o valor final do desenho da grade. Dois. Mais uma vez, vou ativar as linhas da grade. Suponha que tenhamos muitas colunas em nosso contêiner e eu queira estender o item da grade vermelha do início ao fim desse contêiner. Mas eu não sei quanta linha de coluna temos. Para isso, podemos usar pontos negativos. Aqui você pode ver um número de linha menos um. Lembre-se de que o número da nossa última linha sempre começa com menos um Então, podemos usar o menos vo aqui. Deixe-me te mostrar. Se eu digitar menos um e definir esse arquivo, aqui você pode ver que não há alterações Espero que agora esteja claro para você como são as tensões w. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 100. Tutorial de nomenclatura de linhas de grade CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos a nomenclatura de linhas de grade CSS. Em nosso tutorial anterior, usamos linhas de grade para girar nossos itens de grade. Mas neste tutorial, aprenderemos como podemos atribuir o nome da linha e como podemos usar o nome da linha como valor? Deixe-me simplificar isso. Este é nosso item de cabeçalho e esse é nosso item da barra lateral Para criar esse item da barra lateral, precisamos usar gdrawpperty Na propriedade redraw, primeiro, precisamos passar o ponto inicial da linha e depois passar o ponto final da linha Mas neste tutorial, não vamos usar números de linha. Vamos criar nosso próprio nome de valor. Como você pode ver, como ponto de partida, eu uso o início lateral e, para o ponto final, uso o SideburdN Vamos começar a prática e ver como ela funciona. Aqui você pode ver, lado a lado, que abro meu estúdio de usuários Creator e meu navegador usando a extensão de servidor Lip. Eu já criei um documento estimal para este exemplo, aqui você pode ver um layout da web, que eu crio usando grades Aqui você pode ver um cabeçalho, uma manobra para caixas diferentes, barra lateral e um rodapé Aqui você pode ver o contêiner e todo o DV dentro desse contêiner e todo o DV dentro desse Eu crio esse layout usando spanning. Vamos entrar no seletor profundo do contêiner. Aqui você pode ver que temos um total três colunas de grade com um A como valor. Como você pode ver, temos um total de cinco linhas com tamanhos diferentes. Para cabeçalho, eu uso 150 pixels de altura. Para manobra, uso 50 pixels de altura e, para nossa terceira linha, mais uma vez, uso 150 pixels E para rodapé, mais uma vez, eu uso 50 pixels de altura E aqui você pode ver, eu estendo meu cabeçalho do começo ao fim de um a menos um, e aqui você pode ver, usamos o valor da linha de grade Vou ativar minhas linhas de grade usando o modo de desenvolvedor. E você pode ver os números das linhas. Esse não é um modelo muito complexo, mas às vezes precisamos enfrentar modelos difíceis ou muito complexos Nesse caso, é muito difícil lembrar esses números e isso pode criar problemas muito grandes. Então, para resolver esse problema, atribuímos um nome a essas linhas e chamamos esse processo de nomenclatura de linha de grade Então, vamos ver como isso funcionou. Primeiro, vou começar com linhas e precisamos atribuir esses nomes de linha com esses valores. Então, para a linha de grade número um, vou usar um nome que é início do cabeçalho. Deixe-me te mostrar. Primeiro, vou usar a irmã quadrada. Em vez da irmã quadrada, vou atribuir um nome para nossa primeira linha, início do cabeçalho. Só é preciso lembrar que você não pode fornecer ritmo entre duas esferas E vou ativar o Word Wrap. Caso contrário, você não poderá ver minhas linhas. Você pode usar hífens, sublinhado ou qualquer outro caractere Se eu começar esse cabeçalho, também precisamos terminar esse cabeçalho, e eu quero terminar esse cabeçalho na linha número dois. Quero usar o quadrado *** mais uma vez e, em vez do quadrado ***, vou digitar fim do cabeçalho, fim do cabeçalho Se eu definir esse arquivo, aqui você pode ver que não há alterações. Agora vou mostrar como podemos usar esses nomes em nosso valor. Em nossa propriedade gredro, vou digitar header start porque esse é nosso ponto de partida E para nosso endpoint, vou usar o valor final do cabeçalho Se eu salvar este arquivo, aqui você pode ver que não há alterações. Portanto, nossos nomes estão funcionando corretamente. Vamos entrar na seção do menu. Vamos criar um ponto de partida para o Menu. Para isso, não precisamos usar outra base quadrada. Só quero usar um espaço entre final do cabeçalho e o ponto inicial do menu. Para o ponto de partida do menu, vou usar o Manurt Vou usar o nome inicial do menu. Do início ao fim deste menu após 50 pixels, vou usar o nome final do menu Fim do menu. Vou usar esses nomes em nossas propriedades em Bedro. Deixe-me te mostrar. Vou copiar o nome inicial do menu e vou reprimir dois com esse nome Para o valor final do nosso menu, vou usar o nome final do menu. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Funciona muito perfeitamente. Similaridade, você pode usar nomes para todas as linhas. Esses métodos de nomenclatura de linha são muito úteis quando trabalhamos com layouts complexos Agora vou nomear nossas colunas. Aqui você pode ver que temos duas colunas. Mas se você perceber que pode ver, usamos o valor de repetição aqui, e eu uso um valor de esforço para três colunas. Como podemos atribuir nomes para valores repetidos? Há dois métodos pelos quais você pode atribuir nomes às suas colunas. Ou você digita um esforço três vezes e toda vez que usa esses colchetes. Caso contrário, podemos atribuir um nome com esse valor de repetição. Deixe-me te mostrar. Antes de um para valor, vou usar um nome, que é início da chamada. E depois de um valor de esforço, vou digitar call end. Você pode digitar o nome que quiser , mas há um problema. Ele vai usar a chamada Iniciar e ligar três vezes. Primeiro, ele usará o início da chamada aqui e, em seguida, o final da chamada aqui. Mais uma vez, ele usará o Call Start aqui e depois usará o Call end aqui e continuará. Como podemos usá-lo adequadamente? Para isso, primeiro, precisamos digitar call Start. E então precisamos atribuir de onde nossas colunas começam. Nossas colunas começam com uma do tipo inteligente. Para endpoint, vou usar call end Call. Porque eu tenho até três colunas, então vou usar três cabelos. Você não precisa observar o número da linha aqui, você precisa observar quantas colunas deseja usar. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Portanto, não há problema. Funcionou perfeitamente. Agora eu quero estender nosso cabeçalho em até duas colunas. Eu quero usar dois cabelos. Se eu definir esse arquivo, você poderá ver o resultado. Ele usou o valor de duas colunas para o item de cabeçalho. Quero voltar à minha antiga posição, algumas para usar três. Podemos usar o mesmo valor para nossas colunas de menu. Deixe-me mostrar alguns para copiar o valor e vou substituir por este. Como nosso item de menu ocupa uma parte da área da coluna, é por isso que podemos usar esse valor. Se eu salvar esse arquivo, você verá que não há alterações. Dessa forma, você pode atribuir qualquer nome às suas linhas e usá-lo várias vezes. Espero que o conceito de nomes de linhas de grade esteja claro para você. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 101. Tutorial de nomenclatura de área de grade CSS: É bom ver vocês de volta, pessoal. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS Grid. Tutorial em inglês, vamos aprender a área da grade CSS, nome Em nosso tutorial anterior, aprendemos sobre nomenclatura de linhas de grade Mas neste tutorial, aprenderemos a nomenclatura de áreas de grade. Usamos esse método para posicionar nossos itens da grade. Vamos ver que tipo de propriedades temos que podemos usar para posicionamento. Nossa primeira propriedade são as áreas do modelo de grade e nossa segunda propriedade é a área da grade. Vamos começar a prática e tentar entender como funciona. Aqui você pode ver em nosso tutorial anterior que criamos um layout básico usando as propriedades da grade e aqui atribuímos nomes às linhas da grade. E usando esses nomes, posicionamos nosso item e abrangemos nossos itens. Agora vou criar o mesmo modelo sem usar a propriedade da linha da grade e a propriedade da coluna da grade. Não precisamos usar nomes de linha para isso. Aqui você pode ver, eu tenho outro arquivo de tabela, área de grade em, e vou usar esse modelo. Inicialmente, dividimos essa grade em três colunas com um F para Valor e já temos fibroso para cabeçalho para menu, para caixas e para rodapé Agora vou atribuir um nome diferente para cada item da grade. Para isso, vou usar a propriedade da área da grade. Dentro dessa área da grade, você pode usar qualquer nome. Vou usar o mesmo nome para isso, que é cabeçalho. E não precisamos usar códigos invertidos para isso. Da mesma forma, vou usar a mesma propriedade para cada item de nota. Para Menu, vou usar o mesmo nome, Menu por caixa, vou usar a caixa um. Para a caixa dois, vou usar a caixa dois. Para a caixa três, vou usar a caixa três. Da mesma forma, para a caixa quatro, vou usar a caixa quatro. Para a barra lateral, vou usar o mesmo nome, que é a barra lateral do rodapé, vou usar o rodapé vou usar Se eu definir esse arquivo, aqui você pode ver que tudo desapareceu. Como não usamos nenhum posicionamento, é por isso que os itens sumiram. Em nossa família, vou usar uma nova propriedade. Deixe-me mostrar a você e o nome da nossa propriedade é ótimas áreas de modelo, ótimas áreas de modelo. Dentro das áreas do modelo de grade, vou usar códigos duplos. Deixe-me te mostrar uma coisa. Vou voltar para o meu arquivo antigo. Aqui você pode ver meu layout anterior. Se eu pressionar Aptl e ativar as linhas de grade, aqui você pode ver que colocamos três colunas em nossa estrutura e nossa seção de cabeçalho usa três colunas para isso Então, estou de volta ao meu novo layout e aqui vou usar esse nome de cabeçalho três vezes. Deixe-me te mostrar. Então, para copiar o nome, vou colá-lo aqui. Cabeçalho, cabeçalho e cabeçalho. Para três colunas, eu uso esse nome por três vezes. Se eu definir esse arquivo, aqui você pode ver o resultado. Mas se você notar, deixa um ritmo em branco porque espera seis linhas em nossa estrutura de grade, e aqui usamos apenas uma linha. Mais uma vez, se eu mostrar meu layout antigo, aqui você pode ver que nosso menu também usa três colunas. Então, dentro dos códigos duplos, vou usar o nome do menu por três vezes. Se eu definir esse arquivo e mostrar meu layout, aqui você pode ver o resultado. Mais uma vez, estou de volta ao meu layout antigo. Aqui você pode ver em nossa primeira coluna, usamos a caixa um. Em nossa segunda coluna, usamos a caixa dois e, em nossa terceira coluna, usamos a barra lateral Vou duplicar essa linha e, para nossa primeira coluna, vou usar o nome da caixa um Para nossa segunda coluna, vou usar o nome da caixa dois. Para nossa terceira coluna, vou usar o nome da barra lateral Usamos esses nomes de colunas para nossa terceira linha, mais uma vez, vou cavar essa linha Aqui você pode ver nossa quarta linha, começar com a caixa três, depois a caixa quatro e, em seguida, a barra lateral novamente. Vou digitar caixa três, caixa quatro e, em seguida, entrar na barra lateral Em nossa última linha, aqui você pode ver, usamos três colunas como rodapé Vou usar esse nome de rodapé três vezes se for o rodapé , rodapé e rodapé do Dov TER E ponto e vírgula para finalizar essa linha. Se eu definir esse arquivo e mostrar meu layout, aqui você pode ver que criamos com sucesso nosso layout antigo sem usar a linha da grade e a propriedade da coluna da grade. Esse é o segundo método que podemos usar para posicionar nossos itens da grade. Só precisamos usar duas propriedades para isso. Nossa primeira propriedade é a área da grade e nossa segunda propriedade são as áreas da grade tablet. Portanto, esse tipo de técnica de posicionamento é muito útil para pequenos projetos. Se seu layout não for complexo, você poderá usar esse processo. Mas se seu projeto for mais complexo e grande, não recomendo usar esse processo. Se você notar, aqui você pode ver que usamos três nomes de colunas para cada linha. Se eu remover um dos nomes da coluna, qualquer linha, vou remover o menu. E se eu definir esse arquivo, aqui você pode ver que tudo desapareceu. Como usamos três colunas, é por isso que precisamos passar o nome de três colunas. Se eu definir esse arquivo, mais uma vez, aqui você pode ver , agora está perfeito. E agora, suponha que você queira usar duas colunas para a seção do menu. Nesse caso, você precisa passar o ponto aqui. Se eu definir esse arquivo, agora funcionará. Se você quiser usar o item de menu somente na segunda coluna, nesse caso, você precisa passar outro ponto antes do ponto do menu. Se eu definir esse arquivo, você poderá ver o resultado. Podemos alinhar nosso item de grade e posicionar nosso item de grade apenas usando pontos Mas você não pode usar esse ponto no meio dessas duas colunas. Deixe-me te mostrar. Se eu remover o cabeçalho deste local usar um ponto e definir esse arquivo, ele poderá destruir seu layout Mais uma vez, vou repetir esse processo como ele funciona. Primeiro, você precisa usar uma área de ganância com o nome da propriedade para cada item de ganância e, em seguida, atribuir um Você pode usar qualquer nome para isso. Em seguida, dentro do seletor de contêiner pai, você precisa usar uma propriedade que é a área do modelo de grade Em seguida, você precisa se lembrar de quantas colunas você atribui a essa estrutura de grade. De acordo com o meu layout, aqui você pode ver, eu uso três colunas. Então, em cada linha, precisamos passar três Valu e aqui você pode ver nossa linha da barra lateral também está É por isso que eu uso esse nome da barra lateral na linha número três e na linha número quatro Espero que agora você entenda o que é a nomenclatura da área da grade. Obrigado por assistir a este vídeo e fique ligado no nosso próximo tutorial 102. Tutorial de função MinMax de CSS: Ei, é bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a saudação CSS Neste tutorial, vamos aprender a função CSS Greet MinMax. Usando essa função, podemos alterar dinamicamente a altura das linhas e colunas Vamos começar. Neste tutorial, aprenderemos dois outros valores sem Min Max. O primeiro é o conteúdo máximo e o segundo é o conteúdo mínimo. Vamos ver como podemos alterar a altura da largura dinamicamente. Aqui você pode ver, lado a lado, que abro meu Visual Studio Coater e meu navegador usando a extensão lip server E eu já crio um documento HTML. Como você pode ver, dentro do meu contêiner de patentes, temos oito vendas de rede diferentes e declaramos a coluna Ford para nossas vendas de rede com valores de um FR Também temos duas linhas com 175 pixels de altura. Vamos começar a prática. Vamos começar a prática. Como você pode ver no meu primeiro item da grade, há um texto, primeiro o nome. Vou inserir mais texto dentro desse item da grade. Lúmen 20. Ele adicionará 20 palavras dentro desse item da grade. Se eu definir esse arquivo, aqui você pode ver o resultado. Deixe-me reduzir algumas palavras e depois vou configurar esse arquivo. Aqui você pode ver que divide nossas linhas de acordo com o OID deste item da grade nossas linhas de acordo com o OID deste Mas o que aconteceu se eu usar valor máximo de conteúdo para nossa primeira coluna, vamos usá-lo. Vou usar o valor máximo do conteúdo para nossa primeira coluna. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que não há quebra de linha para este parágrafo e também transborda do contêiner com o tamanho Se usarmos esse valor, ele não quebrará nossas linhas. Ele imprimirá todo o parágrafo em uma linha. Não é uma coisa muito útil para nossos projetos reais. Vou reduzir algumas palavras desse parágrafo. E então eu vou salvar esse arquivo. Vamos reduzir mais algumas palavras. Agora está perfeito. Agora vou adicionar mais texto em nosso quarto conteúdo, Lum, dez, e vou salvar esse arquivo Em seguida, vou usar nosso próximo valor para esta coluna, que é o conteúdo do Mint. Se eu definir esse arquivo, aqui você pode ver o resultado. Ele altera dinamicamente os oito acordo com a maior palavra dessa frase Pois vou adicionar mais texto neste item. Vamos adicionar mais texto. Maldita oito. Se eu definir esse arquivo, aqui você pode ver, nosso texto se sobrepõe ao item da grade Para resolver esse problema, podemos adicionar um valor mínimo de conteúdo em nossa linha. Deixe-me te mostrar. Vou remover o valor de 170 pixels e aqui vou digitar o valor do conteúdo Mint. Se eu definir esse arquivo, agora você pode ver que diz a altura do item da nota, acordo com a área de texto. Suponha que eu queira adicionar um parágrafo de 50 watts em nosso sétimo item Vou pular para o sétimo item e vou digitar Lorem 50 Se eu definir esse arquivo, aqui você pode ver, aqui você pode ver, de acordo com o tamanho do texto, a alteração de altura e largura. Ele consumirá altura e peso mínimos de acordo com este texto. É por isso que esse nome de valor é o conteúdo principal. E agora eu quero fixar a altura mínima da nossa linha. Vou remover alguma palavra desse texto. Então eu vou configurar esse arquivo. Agora vou usar a função MinMax para definir uma altura fixa Deixe-me te mostrar. Vou usar a função Min Max aqui. Mínimo máx. Dentro desse parêntese, e aqui precisamos passar os dois valores para o tamanho mínimo do pro e para o tamanho máximo do Suponha que nossa altura mínima de linha seja 175 pixels e, no máximo, vou usar a propriedade de conteúdo principal. Porque eu quero alterar a altura acordo com esse tamanho de conteúdo, se nosso conteúdo tiver mais de 170 pixels de altura. Se eu definir esse arquivo, aqui você pode ver, por padrão, nossa linha vem com 170 pixels de altura. Mas, como você pode ver em nossa primeira linha, ela tem mais de 170 pixels de altura porque contém tamanho maior que 170 pixels para nosso valor máximo Usamos o conteúdo principal. É por isso que ele pode ter a altura que quiser. A função Min Max é muito útil para nossas linhas. Aqui dizemos valor mínimo para a altura do nosso item. Mas se nosso conteúdo tiver mais altura, poderemos usar o valor do conteúdo principal como valor máximo. Mas o que aconteceu se eu disser altura máxima de 200 pixels, deixe-me mostrar a você. Se eu definir esse arquivo, aqui você pode ver que, por padrão, nossa segunda linha tem 175 pixels de altura, mas nossa primeira linha se estende até 200 pixels e seguida, nosso conteúdo transborda desse item É por isso que nos referimos ao uso do conteúdo principal como tamanho máximo. Conteúdo principal. Agora ele pode conter todo o conteúdo em nossa linha e agora vou usar a função MinMax como um valor de coluna Vamos usá-lo. Para nossa primeira coluna, vou usar a função minMax. Vou definir uma largura mínima dessa coluna, que é de 150 pixels. Além disso, vou usar 200 pixels para a largura máxima. E aqui você pode ver que já definimos a largura máxima do contêiner, que é de 700 pixels. Mas vou usar o valor percentual neste lugar, 80%, e isso tornará nossa página da web mais responsiva Se eu definir esse arquivo, aqui você pode ver o resultado. Vamos adicionar mais conteúdo à nossa primeira coluna. Lorom seis. Aqui você pode ver que nossa primeira coluna ocupa uma largura máxima de 200 pixels. Se eu aumentar o tamanho máximo da largura, 300 pixels e depois definir esse arquivo, agora você poderá ver as alterações. Por padrão, ele terá 150 pixels de largura e pode se estender até 300 pixels. Depois disso, ele vai quebrar nossas linhas. Agora vou usar 200 pixels para nossa largura mínima. Se eu ativar minha opção de desenvolvedor e selecionar esse conteúdo, aqui você pode ver que a largura máxima desse conteúdo é de 300 pixels. Se eu tentar torná-lo responsivo e depois selecionar este item, aqui você pode ver que a largura mínima desse item é de 200 pixels porque já definimos um tamanho mínimo para essa coluna Da mesma forma, se aumentarmos nossa janela, deixe-me mostrar a você. Em seguida, selecione este item, você pode ver que ele não pode se estender com mais de 300 pixels. Espero que agora esteja um pouco claro para você como isso funciona. Se eu usar o valor percentual em nosso tamanho máximo, deixe-me mostrar para você. 60%. Em seguida, defina esse arquivo. Agora você pode ver um resultado diferente. Vai ocupar 60% da largura desse contêiner. Aqui podemos usar o valor percentual, valor do ar, o valor do pixel, etc Mas se eu reduzir o tamanho do navegador e ele parar na largura de 200 pixels, não podemos reduzir nossa primeira coluna mais de 200 pixels. Espero que agora esteja claro como valor principal e o valor máximo são trabalhados. Obrigado por assistir a este vídeo e fique ligado no nosso próximo tutorial 103. Tutorial de grade implícito e explícito de CSS: É bom ver vocês. Mais uma vez, estou de volta com um novo tutorial e, neste tutorial, aprenderemos a grade implícita e a ganância explícita Vamos ver o que é isso. Aqui você pode ver, lado a lado, eu abro meu coheor do Visual Studio e meu navegador usando Como você pode ver no meu contêiner principal, temos um total de oito células de grade. No começo, vou definir com altura. Primeiro, vou usar o valor da coluna do modelo de grade, ler as colunas do modelo e criar duas colunas com um valor de effer Para eles, vou usar o valor de repetição. Repita duas colunas com um e ou valor. Se eu definir esse arquivo, você poderá ver o resultado. Também vou dizer altura da linha. Para isso, vou usar a propriedade de raiz temperada de Creta. Mas vou dizer três fileiras de altura a partir dessas quatro fileiras. Vou usar o valor de repetição mais uma vez, repetir o valor de três linhas com vírgula de 100 pixels Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou fornecer uma lacuna entre essas células. Então, para digitar, ler, propriedade de lacuna. 20 pixels. Se eu definir esse arquivo, você poderá ver o resultado. Então, aqui você pode ver, acabamos definir o tamanho de duas colunas e três tamanhos de linha. Mas temos que dizer oito células nessa estrutura. Não estilizamos nosso sétimo item de grade e oito itens de grade. Suponha que extraiamos dinamicamente os dados do servidor, e eu quero mostrar esses dados em nossa sétima e oitava colunas. Para isso, precisamos definir a altura, mas já definimos a altura usando a probidade das linhas do modelo de grade Então, o que são essas colunas? Como podemos definir a altura dessas colunas? Deixe-me te mostrar uma coisa. Se eu elogiar a Eptel e mostrar minha barra de ferramentas para desenvolvedores e clicar neste ícone de grade, aqui você pode ver algumas linhas de grade Como você pode ver, estilizamos três linhas e duas colunas e chamamos essa estrutura de grão explícito, porque definimos explicitamente essa área usando essas E essa que não definimos, e a chamamos de ganância implícita Então, para estilizar essa grade implícita, temos algumas propriedades novas Vamos ver isso. Aqui você pode ver temos um total de três grades implícitas relacionadas a propriedades Nossa primeira são as linhas automáticas da grade, segunda são as colunas automáticas da grade e a última são os fluxos automáticos da grade. Vamos começar a prática e tentar entender como funciona. Depois de grid gap, vou usar nossa nova propriedade, que é grid autoros So type, grit auto Aqui podemos definir a altura implícita da linha da grade. Para nosso item implícito, vou definir a altura de 50 pixels Se eu definir esse arquivo, agora você pode ver que a altura implícita do item de nota é de 50 pixels Se adicionarmos mais células a esse contêiner, deixe-me mostrar alguém que duplicou essa linha duas vezes e configurou esse arquivo Agora você pode vê-lo definir automaticamente a altura de 50 pixels para esses itens da grade. Por enquanto, vou excluir essas colunas. Eu não preciso disso e defino esse arquivo. Aqui você pode ver que quando adicionamos uma nova célula, ela adicionará a linha é. Mas agora eu quero adicionar uma nova célula em termos de coluna. Para isso, precisamos usar outro valor, que é fluxo automático da grade, então digite, grade, fluxo automático. Ele vem com dois tipos de valor, linha e coluna. Por padrão, é trabalhar com linha. Mas aqui eu vou usar a coluna. Se eu disser esse arquivo, agora você pode ver o resultado porque já definimos três linhas em nossa grade explícita e, depois de três linhas, ele adicionará todos os itens de vendas em colunas. Aqui você pode ver que não definimos nenhum tamanho de coluna para este item da grade. É usado de acordo com esse tamanho de texto, e agora eu quero atribuir nós à nossa grade implícita Para isso, precisamos usar uma propriedade que é grid auto columns. E aqui vou fornecer 0,5 e ou valor para nossa grade implícita Se eu definir esse arquivo, aqui você pode ver o resultado. Nossas colunas de grade explícitas usam um e ou valor e nossa coluna de grade implícita usa meio e ou Se eu adicionar mais algumas colunas a esse contêiner, deixe-me mostrar e definir esse arquivo. Agora você pode ver que também é necessário 0,5 e ou valor de acordo com este item da grade. Esta é nossa grade implícita e grade explícita. Espero que agora esteja claro para você, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 104. Tutorial de alinhamento de itens de grade de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos o alinhamento de itens da grade CSS Em nosso vídeo anterior, aprenderemos sobre como podemos criar layouts usando itens de grade CSS e como podemos posicionar esses itens Mas neste tutorial, aprenderemos sobre alinhamento horizontal e alinhamento vertical Temos um total de seis alinhamentos de grade CSS relacionados a propriedades. Alinhe o item, justifique o item, coloque o item, alinhe-se, justifique a si mesmo e coloque a si mesmo Vamos começar a prática e tentar entender como funciona. Aqui você pode ver, lado a lado, que abro meu codificador visual strew e meu navegador usando a extensão life server, e eu já criei o nome do documento HTML index dot TML Aqui você pode ver que temos um total de dez itens da grade. Nossos primeiros seis itens de grade são itens de grade explícitos, e nossos últimos quatro itens de grade são itens de grade implícitos Aqui você pode ver que a altura explícita do item da grade é de 100 pixels e nosso item de grade implícito é de 50 Agora quero gastar meu quinto item da grade e quero gastá-lo em linhas. Para isso, vou pular para o quinto seletor do item e aqui vou usar uma propriedade CSS que é grito Aqui, vou passar esse item em até duas linhas, algumas para digitar, abranger e depois vou passar duas. Se eu definir esse arquivo, você poderá ver o resultado. E aqui você pode ver nosso décimo item da grade e eu quero passar esse item lido em colunas. Vou pular para o seletor do item dez e aqui vou usar uma propriedade CSS, que é a coluna da grade Vou digitar coluna de grade. Eu quero dividi-lo em até duas colunas. Se eu definir esse arquivo, você poderá ver o resultado. Aqui gastamos nosso item, linha em linha, e aqui giramos nosso item em coluna. Vamos começar o alinhamento. Primeiro, vou abordar o alinhamento vertical. Para isso, precisamos usar align item e align self property Essas propriedades vieram com quatro valores. Deixe-me te mostrar. O primeiro é começar, terminar, centralizar e alongar. Se eu usar o valor inicial, ele colocará nosso conteúdo, início desse contêiner significa naquele lugar. Se usarmos valor, ele colocará nosso conteúdo nesse lugar. Se usarmos o centro, ele colocará nosso conteúdo, no centro desse item da grade, e stretch será nosso valor padrão. Mais uma vez, estou de volta ao meu codator do Visual Studio agora vou entrar no contêiner principal Então, primeiro, vou usar um valor CSS, que é alinhar itens, tipo de som alinhar Vou usar nosso primeiro valor e nosso primeiro valor é o centro. Se eu salvar esse arquivo, aqui você pode vê-lo alinhado ao nosso centro de conteúdo E esse é o nosso processo de alinhamento vertical. Se eu mostrar minhas linhas de grade, aqui você pode vê-las claramente. Como você pode ver, este é o nosso item da grade e esse é o conteúdo dentro desse item da grade. Como você pode ver, ele pressiona nosso conteúdo no meio deste item porque usamos o centro de alinhamento de itens Mas o que aconteceu com nosso quinto item? De acordo com essa linha, ela alinha nosso conteúdo ao final desse item da grade, mas não está Como abrangemos nosso quinto item da grade, é por isso que ele usou dois itens e, de acordo com o item, ele centraliza o conteúdo. Além disso, você pode ver o mesmo alinhamento para nossos itens de grade implícitos Agora vou usar o valor final, SoTend. Se eu definir esse arquivo, agora você pode ver o alinhamento. Aqui você pode ver o alinhamento de nosso conteúdo, ao final deste item. Da mesma forma, se eu usar o valor inicial, deixe-me mostrar. E, em seguida, defina esse arquivo, você pode ver o alinhamento. Aqui você pode vê-lo alinhando nosso conteúdo, o início deste item, e valor do nosso último item de alinhamento é stretch. Deixe-me te mostrar. Se eu usar esse valor e definir esse arquivo, é um posicionamento de alinhamento padrão Não é muito importante. É um valor padrão. Por enquanto, vou usar o Center Value. E agora vou falar sobre o eu alinhado. O que é align self? Aqui você pode ver que todo o conteúdo do item está alinhado ao centro, e agora eu decido alinhar nosso item da terceira série Quero dizer que quero usar valor final do Align para este terceiro item Vou pular para o terceiro seletor de itens. E para esse tipo de alinhamento, precisamos usar a propriedade align self, Sumtyp E aqui vou usar o valor final. Se eu definir esse arquivo, você poderá ver o resultado. Se eu ativar minhas linhas de grade, aqui você pode ver que todo o conteúdo está alinhado no centro, mas nosso terceiro item da grade está alinhado no final Podemos usar essa propriedade somente em células individuais, não em todo o contêiner. Agora está claro para você que, se quisermos aplicar o alinhamento, todos esses itens, precisamos usar a propriedade align item E se quisermos aplicar em itens individuais, para isso, precisamos usar a propriedade de célula alinhada Agora vou falar sobre alinhamento horizontal. Para o alinhamento horizontal, precisamos usar duas propriedades, justificar IM e justificar a si mesmo É semelhante ao anterior, e precisamos usar o mesmo valor para isso, começar no centro e esticar. Vamos começar a prática. Mais uma vez, estou de volta ao meu criador do Visual Studio e vou pular para o contêiner principal Agora, quero alinhar nosso conteúdo horizontalmente ao centro. Para isso, precisamos usar uma propriedade, que é justificar IM E nosso valor está no centro. Se eu definir esse arquivo, aqui você pode ver o resultado. Se eu ativar minhas linhas de grade, você poderá vê-las claramente. Ele centralizou horizontalmente nosso conteúdo. Da mesma forma, se eu usar um valor diferente e definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver o final desse item da grade. Da mesma forma, temos outro valor, que é start. Se eu definir esse arquivo, você sabe o resultado. Ele alinha horizontalmente o início do conteúdo desse item esquerdo. Se você quiser mover seu conteúdo, levante para o lado, então você precisa usar o início, se você quiser mover seu conteúdo para o lado direito, então você precisa usar o final. Como você sabe, estresse é nosso valor padrão, então não vou explicar isso aqui. Agora vou falar sobre justificar a autopropriedade. Suponha que você tenha centralizado horizontalmente seu primeiro item. Para isso, precisamos usar justify el property. Deixe-me te mostrar. Aqui eu vou usar a propriedade Justify el Vou usar o valor central. Se eu definir esse arquivo, você poderá ver o resultado. Se eu ativar minhas linhas de grade, você poderá vê-las claramente. Se precisar alinhar seu conteúdo individualmente, você pode usar a propriedade de célula justificada Da mesma forma, você tem um total de três valores para isso, centro, início e fim. Agora eu quero falar sobre duas novas propriedades, colocar item e colocar el. Colocar item é um final curto, alinhe o item e justifique Se você quiser usar esse valor em uma linha, poderá usá-lo. Nessa propriedade, primeiro, você precisa passar o valor do item de alinhamento e, em seguida, passar o valor do item de justificação entre eles, é necessário fornecer um espaço Da mesma forma, temos a propriedade place cell. Isso é para itens individuais da grade. Primeiro, você precisa passar o valor da célula de alinhamento e, em seguida, passar o valor justify elf Vamos ver na prática como funciona. Mais uma vez, estou de volta a ser um criador de estúdio visual. Por enquanto, vou comentar essas duas linhas. Primeiro, vou usar a propriedade do item place. Vou digitar itens do lugar. Como você sabe, primeiro precisamos passar item de alinhamento e, em seguida, você precisa passar o valor dos itens de justificação Nosso primeiro valor é o centro. E nosso segundo hilo é Sir e agora vou configurar este arquivo Se eu definir esse arquivo, aqui você pode ver o mesmo resultado. Não há mudanças. Você pode usar esse valor dessa forma ou daquela forma. Depende totalmente de você. A seguir, vamos ver como funciona o valor da célula posicional. Como você sabe, é um trabalho individual. Em nosso item dois, vou usar essa propriedade. Coloque-se. Primeiro, precisamos passar o valor da célula alinhada e, em seguida, precisamos passar o valor justificado da célula Eu quero fornecer um centro. Nosso valor celular justificado também é central. Se eu definir esse arquivo, você poderá ver o resultado. Ele centraliza nosso conteúdo na horizontal e na vertical. Então, espero que agora esteja claro para você como os itens place self e place funcionam. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 105. Tutorial de alinhamento de faixas de grade de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre o alinhamento de trilhas de grade CSS Para alinhar nossa trilha, temos três propriedades: alinhar conteúdo, temos três propriedades: alinhar conteúdo, justificar conteúdo e posicionar conteúdo. Além disso, a propriedade do conteúdo é uma versão abreviada de alinhar conteúdo e justificar a propriedade do conteúdo Vamos tentar entender o que é o rastreamento de itens da grade. Aqui você pode ver, lado a lado, que abro meu ordator do Visual Studio e meu navegador usando a extensão if server Eu já criei um documento HTML chamado index dot TML. Aqui eu vou usar a mesma estrutura de grade que eu uso no meu tutorial anterior. Aqui você pode ver o total de dez itens da grade. Como você pode ver, gastamos nosso quinto item da grade em linha, também gastamos nossos dez itens de grade, em colunas. Primeiro, vou reduzir a largura da coluna. Deixe-me te mostrar. Vou reduzir um valor de effer e vou digitar 150 pixels Se eu definir esse arquivo, você poderá ver o alinhamento. Pois vou aumentar a altura do contêiner. Então, vou usar a propriedade de altura. Altura, 750 pixels. Se eu definir esse arquivo, você poderá ver esse espaço. Agora vou mostrar como podemos usar o alinhamento do conteúdo e justificar o conteúdo Mas primeiro, precisamos entender o que é conteúdo justificado. Usamos justificar conteúdo para alinhamento horizontal e temos um total de sete valores relacionados ao conteúdo justificado, início, fim, centro, extensão, espaço ao redor do espaço entre e espaço uniforme Nossos últimos três valores são usados como propriedade de conteúdo. Deixe-me mostrar como funcionou. Então, mais uma vez, estou de volta ao meu editor de código do Wiser Studio. No começo, vou ativar minhas linhas de grade, então vou elogiar a Eptel e depois clicar em Grades, aqui você pode ver as linhas da grade Agora vou usar o valor do conteúdo ificado. Primeiro, vou usar o valor central. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver todos os itens da grade se moverem juntos para o centro desse contêiner. Usando a propriedade justify item, podemos centralizar nosso conteúdo dentro desses itens Usando a propriedade de conteúdo justificada, podemos alinhar nossos itens de grade dentro do contêiner Usando conteúdo justificado, podemos mover toda a faixa. Da mesma forma, temos outro valor, que é final. Se eu disse esse arquivo, você pode ver o resultado. Horizontalmente, ele move nossos itens da grade para o final desse contêiner, e start é nosso valor padrão . Deixe-me te mostrar. Se eu definir esse arquivo, você poderá ver o resultado. Agora vou falar sobre nossos três novos valores. Nosso primeiro valor é o espaço entre. Vou digitar um espaço entre aqui. Se eu definir esse arquivo, você poderá ver o resultado. Se usarmos o espaço entre Value , você fornecerá o espaço restante entre os itens da nossa grade. Como você pode ver, ele divide nossos itens da grade de ponta a ponta. Mas se você tiver três colunas, deixe-me mostrar. Então, eu vou passar três aqui. E, em seguida, defina esse arquivo, aqui você pode ver o resultado. Como você pode ver, ele colocou nossa segunda coluna no centro e dividiu nosso espaço em branco em duas partes. E, por enquanto, vou usar duas colunas. Nosso próximo valor é o espaço ao redor. Deixe-me te mostrar. Se eu definir esse arquivo, aqui você pode ver o resultado. Se usarmos esse valor, como você pode ver, primeiro, ele fornece um espaço, depois nosso item de nota e, em seguida, você pode ver o tamanho similar do espaço ao tempo. Então, mais uma vez, nossa coluna e um espaço cego. Você pode ver o espaço igual à esquerda e à direita. Como você pode ver, a mesma quantidade de espaço após a primeira coluna. Da mesma forma, você pode ver esse espaço antes da segunda coluna. Você pode ver quanto mais espaço no centro, e nosso próximo valor é espaço uniformemente, soma ao espaço t uniformemente. Se eu definir esse arquivo, aqui você pode ver que é muito semelhante ao espaço em torno do valor, mas há uma diferença básica. A principal diferença é que você pode ver a mesma quantidade de espaço entre nossos ótimos itens. Se esse tamanho de espaço for um esforço, você poderá ver a mesma quantidade de espaço antes e depois da coluna. Portanto, essa é nossa propriedade de conteúdo justificada. Basicamente, o usamos para alinhamento horizontal, e essa propriedade funciona com truques de grade Vamos falar sobre o valor alinhado do conteúdo. Usamos a propriedade de conteúdo alinhado para alinhamento vertical. E, como você pode ver, existem sete valores para essa propriedade. Comece, termine, centralize, estique, distribua o espaço entre o espaço e o espaço uniformemente. Já sabemos sobre esses quatro valores. Mas neste tutorial, aprenderemos o espaço ao redor do espaço entre e o espaço uniformemente. Vamos voltar à prática. Aqui você pode ver que a altura do contêiner da nossa grade é de 750 pixels. Então, vou digitar o nome dessa propriedade, que é Align content E nosso primeiro valor é o centro. Se eu definir esse arquivo, aqui você pode ver o resultado. Se eu ativar meu modo de desenvolvedor, agora você poderá vê-lo claramente. Como você pode ver, centralizou verticalmente nosso conteúdo. Da mesma forma, se eu usar o valor final e depois definir o arquivo, agora você pode vê-lo colocando nossa estrutura de grade no final desse conteúdo. Como você sabe, start é nosso valor padrão. Mas agora vou usar um espaço de nome de valor entre, para digitar um espaço entre. Se eu definir esse arquivo, aqui você pode ver o resultado. Aqui você pode ver como colocar nosso item da primeira série e nosso último item da grade no final, aqui você pode ver os espaços entre todos os itens da grade. Esse é o caso de uso do espaço entre valores. Vamos pular para o próximo valor, que é o espaço ao redor. Então, para digitar espaço ao redor. Se eu definir esse arquivo, agora você poderá ver o resultado. Esse valor fornecerá o espaço, parte superior do conteúdo e a parte inferior do conteúdo. Suponha que ele forneça dez pixels na parte superior desse item da grade e também forneça dez pixels na parte inferior desse item, e daí vem a área de lacuna de leitura Mais uma vez, no topo deste terceiro item, ele fornece uma fase de dez pixels Dessa forma, acabou, nosso último valor é o espaço uniformemente. Então, para digitar o espaço uniformemente. Então, se eu definir esse arquivo, aqui você pode ver que ele fornece a mesma quantidade de espaço, superior e inferior deste item. Esse é o caso de uso desses valores. Deixe-me te mostrar uma coisa. Aqui você pode ver que abrangemos nossa coluna 102 vezes. Vou remover a propriedade da coluna greet do item dez E agora vou gastar os itens. Então, eu vou predefini-lo aqui. Se eu definir esse arquivo, aqui você pode ver uma lacuna. Aqui você pode ver um espaço vazio. Se você estiver trabalhando com uma estrutura de grade complexa, às vezes esses problemas são estranhos Se você quiser resolver esse problema, temos outra propriedade, que é o fluxo automático da grade. Deixe-me te mostrar. Então digite, grade, fluxo automático. Como você sabe, temos que transformar dois tipos de fluxo, linha Voice e coluna Vise. Vou usar o modo de exibição em linha. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Mas se eu usar outro valor com isso, deixe-me mostrar a você. Vou usar um novo valor que é denso. Se eu definir esse arquivo, aqui você pode vê-lo colocando nosso item de oito grades no espaço em branco. Se eu usar esse valor , ele não preencherá o espaço em branco Espero que agora esteja claro para você o que é rastreamento de rede. Fique ligado no nosso próximo tutorial. Obrigado por assistir a este vídeo. 106. Tutorial de preenchimento automático e ajuste automático de CSS Grid: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos o campo automático e a propriedade de ajuste automático Usando essas propriedades, podemos controlar a largura da grade. Vamos começar a prática e ver como funciona. Aqui você pode ver lado a lado, eu abro meu coordenador do Visual Studio e meu navegador usando a extensão de servidor web, e eu já criei um documento TML Aqui você pode ver um contêiner e dentro do contêiner, temos um total de quatro itens da grade. Como você pode ver, nosso contêiner tem 700 pixels e usamos a propriedade de grade distal E agora vou dizer isso com a altura desses itens. Por enquanto, quero usar duas colunas com um valor eher. Então, vou usar a propriedade de coluna do modelo de grade e vou usar o valor de repetição, repetir dois com um valor de cada vez Se eu definir esse arquivo, você poderá ver o resultado. Além disso, vou fornecer altura para nossa fileira. Vou usar a propriedade de linha da coluna do modelo de grade. E mais uma vez, vou usar o valor de repetição. Duas linhas com 150 pixels de altura. Se eu definir esse arquivo, você poderá ver o resultado. Suponha que eu não queira usar o valor da fração. Vou digitar 100 pixels. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora nossa coluna com 100 pixels. Com isso, quero mostrar três colunas em nossa linha. Se eu definir esse arquivo, você poderá ver o resultado. Agora eu quero ajustar nosso quarto item da grade neste lugar. Para isso, precisamos usar dois valores, autofil e autofit Deixe-me te mostrar. Neste lugar, vou digitar preenchimento automático Se eu definir esse arquivo, você poderá ver o resultado. Ele configura automaticamente nosso item do quarto show até o item do terceiro show Da mesma forma, se eu usar o valor de ajuste automático, deixe-me mostrar e definir esse arquivo Aqui você pode ver que não há alterações. Mas há uma diferença básica. Se eu usar o valor de preenchimento automático, isso criará uma faixa extra Deixe-me te mostrar. Então, vou digitar preenchimento automático mais uma vez. E se eu ativar minha barra de ferramentas do desenvolvedor e clicar nesse ícone de grade, aqui você pode ver que há um espaço para três itens da grade porque nosso contêiner tem 700 pixels e definimos nosso item da grade com 100 pixels É por isso que temos um espaço para três itens da grade. Mas se eu usar o autofit Value, deixe-me mostrar e, em seguida, definir esse arquivo e, em seguida, executar nas minhas linhas de grade, aqui você pode ver que ele não cria linhas de trilha extras Ele cria a trilha de acordo com os itens da grade. Suponha que eu queira mudar a extremidade da quarta coluna desse contêiner, então vou usar o valor final da coluna da grade. Grade, coluna N, e eu vou definir a posição menos um. Se eu definir esse arquivo, aqui você pode ver que não há alterações porque a propriedade autofit não cria trigonometria extra, mas se eu usar a propriedade autofil, deixe-me mostrar e definir esse Agora você pode ver o resultado. Se eu correr nas linhas da grade, agora você pode ver claramente. Como a propriedade de preenchimento automático cria uma coluna extra, é por isso que podemos mover nosso quarto item da grade para o final desse contêiner Essa é a principal diferença entre o valor do preenchimento automático e do ajuste automático Agora vou usar a função Min Mx para nossa coluna. Vou remover este e configurar este arquivo. Primeiro, vou amarrar o ajuste automático e depois vou usar a função Min Max. Quero definir o contêiner mínimo com 150 pixels e o máximo de até um valor de esforço. Se eu definir esse arquivo, você poderá ver o resultado. Mas o que acontece se eu reduzir a largura do contêiner, então vou digitar 70% da largura do contêiner. Se eu definir esse arquivo, aqui você pode ver nosso item da quarta série reduzido. Se eu mostrar minha seção computada, aqui você pode ver que agora a largura do nosso contêiner é de 546 pixels e definimos nosso item mínimo com 150 pixels e se multiplicarmos 150 pixels por quatro, ele retornará 600 Como você já sabe a largura do nosso contêiner abaixo de 600 pixels, é por isso que reduzimos nosso item da quarta série Se eu aumentar a largura do contêiner, deixe-me mostrar para você. Agora você pode vê-lo definir nosso item da quarta graduação em nossa primeira linha. Se eu mostrar a largura do meu continuador, aqui você pode ver que está acima de 600 pixels É por isso que se encaixa nessa linha. Da mesma forma, se eu mostrar a largura do item da grade, aqui você pode ver que a largura do item da grade é 167 pixels Não podemos reduzir nosso item de grade abaixo de 150 pixels. Se tentarmos reduzir nosso item da grade com força, deixe-me mostrar aqui que você pode ver como reduzir nosso item da grade na segunda linha E se tentarmos reduzir mais, aqui você pode ver que isso também reduz nosso terceiro item da grade na segunda linha, porque não podemos reduzir a largura do item da grade abaixo de 150 pixels Sem usar a consulta de mídia, apenas usando o valor de ajuste automático, criamos perfeitamente nosso contêiner responsivo Da mesma forma, se eu aumentar a largura do navegador, aqui você poderá ver todos os itens da grade em uma única linha. Se você notar, pode ver que isso também aumenta a largura do item. Agora, a largura do item é de 245 pixels. Se você quiser mostrar todos os itens da grade em uma única linha, deverá ter uma largura mínima de contêiner de 600 pixels. Se eu reduzir demais a largura do navegador e aumentar a continuação com porcentagens, algo é 85%, e também vou aumentar a largura mínima, então vou aumentá-la em até 300 pixels Se eu definir esse arquivo, agora você pode ver o total de quatro linhas. Agora parece totalmente responsivo. Como você pode ver, definimos a altura para duas linhas, 150 pixels de altura. Espero que agora o conceito esteja claro para você, o que é valor de preenchimento automático e valor de autofd Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 107. Tutorial de conteúdo CSS Grid Fit: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova propriedade relacionada a CSS Grid, que é o conteúdo adequado. Então, vamos ver como podemos usá-lo na prática. Aqui você pode ver, lado a lado, que eu abro meu codator do Visual Studio e meu navegador usando a extensão Lifesaver, e eu já crio um documento HTML chamado index dot TML Aqui você pode ver que, dentro do contêiner principal, temos um total de seis itens da grade. Basicamente, ajuste a propriedade do conteúdo funcionando como uma mistura com a propriedade. Então, vamos usar essa propriedade. Então, vou remover o anterior. E vou digitar Suponha que eu queira mostrar duas colunas usando conteúdo adequado. Então, para digitar conteúdo adequado. E dentro do parêntese, vou dizer 200 pixels largura máxima para nossa primeira coluna Da mesma forma, para nossa segunda coluna, vou usar a propriedade fit content. E para nossa segunda coluna, vou usar o máximo de 400 pixels. Se eu salvar esse arquivo, aqui você pode ver o resultado Aqui você pode ver que, para a primeira coluna, pegamos 200 pixels de largura e, para a segunda coluna, pegamos 400 pixels de largura. Mas se você notar, pode ver nosso item de acordo com o tamanho do conteúdo. Vamos pegar outra coluna com um valor Eer. Então, para digitar um ER. Se eu definir esse arquivo, você poderá ver o resultado. Se disséssemos ajustar o valor do conteúdo, não podemos estender nossa coluna para mais de 200 pixels. Da mesma forma, não podemos estender nossa segunda coluna para mais de 400 pixels. Vamos colocar um pouco de conteúdo em nosso primeiro item. Dentro do primeiro item, vou digitar dum. 30. Se eu definir esse arquivo, aqui você pode ver o resultado. Se eu ativar minhas linhas de grade e mostrar a largura da minha célula, aqui você pode ver nosso primeiro item de grade se estender até 200 pixels. Se usarmos a propriedade fit content, não podemos estender com mais de 200 pixels. Da mesma forma, se eu adicionar mais conteúdo em nosso segundo item da grade, deixe-me mostrar e depois definir o arquivo, aqui você pode ver o resultado. Se eu mostrar o tamanho da minha célula, aqui você pode ver que ela se estende até 400 pixels, não mais que 400 pixels. Porque eu disse largura máxima dessa célula da grade usando a propriedade fit content. Para nossa terceira coluna, usamos o valor da fração, para que ela possa alterar seu tamanho de acordo com o conteúdo. Basicamente, essa técnica é muito útil para galeria de imagens. Além disso, você pode notar que não podemos ver todo o conteúdo deste item. Para isso, podemos usar mnmxFunction em nossas linhas. Deixe-me te mostrar. Então eu vou remover este, e vou dizer Man max. Dentro dos parênteses, aqui podemos definir a altura mínima para o item da grade Eu quero dizer uma altura mínima de 200 pixels. Então, se você quiser estender a altura do Grill de acordo com o conteúdo, para isso, você pode usar a função principal de Conteúdo. Deixe-me mostrar o conteúdo do Amin. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora está perfeito. Aprendemos sobre a propriedade principal do conteúdo em nossos tutoriais anteriores Espero que agora você entenda qual é o caso de uso da propriedade fit content. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 108. Tutorial de propriedades de ordem de CSS: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos uma nova propriedade de posicionamento do item da grade, que é a propriedade da água. Então, vamos ver como podemos usar essa propriedade. Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão de servidor Lip e já criei um documento HTML chamado index dot TML Aqui você pode ver dentro do meu contêiner de patentes, temos um total de seis itens de grade. Então, usando a propriedade da água, podemos mudar a posição das células da grade. Suponha que você queira mover a primeira célula da grade na sexta posição. Para isso, você pode usar a propriedade Água. Em nossos tutoriais anteriores, aprendemos sobre posicionamento Mas neste tutorial, vamos nos posicionar usando a propriedade da água. Suponha que eu queira mover o item uma na posição seis. Para isso, vou pular para o item ou seletor e vou usar a propriedade Água Pedido. Aqui eu vou passar um valor. Se eu definir esse arquivo, aqui você pode ver que ele move automaticamente nosso conteúdo na posição de lista A rega começa na direção oposta. É por isso que chegou ao lugar da luxúria. Da mesma forma, se eu usar o valor zero e depois definir o arquivo, aqui você pode ver que não há alterações na ordem. Zero é o valor padrão dessa propriedade. Mas se eu passar no pedido dois e depois definir o arquivo, aqui você pode ver que ele também está primeiro lugar porque não há pedido um. Suponha que agora eu queira mover nosso segundo item na primeira ordem. Para isso, vou entrar no seletor de itens e digitar a propriedade do pedido Peça um. Se eu definir esse arquivo, aqui você pode ver o resultado. Agora, esta é a nossa posição de ordem um. Agora, suponha que eu queira mover o quarto item para a terceira posição. Vamos pular para o quarto seletor e vou digitar a ordem três Se eu definir esse arquivo, agora você poderá ver o resultado. Esta é a nossa posição 1 da água, e esta é a nossa posição 2, e esta é a nossa posição 3. Primeiro, regamos nosso item um na segunda posição. Chegou à segunda posição e depois regamos nosso item dois na primeira posição. Chegou à primeira posição, depois regamos nosso quarto item na terceira posição e você pode ver o resultado. Chegou à terceira posição. Como você pode ver, não trabalhamos com o terceiro item, quinto item e o sexto item, ele foi apresentado. Suponha que agora você queira mover o terceiro item para trás do quarto item. Então, vou usar a propriedade da água mais uma vez, água, e vou passar o valor de quatro Se eu dissesse esse arquivo, você pode ver o resultado. Agora você pode ver que nosso terceiro item passou pela sexta posição porque usamos quatro valores, então nossa primeira posição de pedido é essa. E esta é nossa posição de segunda ordem. E esta é a nossa posição de terceira ordem, e esta é a nossa posição de quarta ordem. Então, agora está claro para você como isso funciona. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 109. Tutorial de grades aninhadas: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre grades aninhadas Então, vamos tentar entender o que é grade aninhada. Aqui, você pode ver um contêiner de grade, e dentro desse contêiner de grade, temos que ir até essas células da grade. Agora você decide adicionar mais células da grade dentro dessa célula da grade. Em seguida, você precisa converter essa célula da grade em um contêiner da grade e, em seguida, adicionar mais células da grade dentro desse contêiner, algo parecido. Chamamos todo esse sistema de grades aninhadas. Usando a grade aninhada, podemos converter uma célula da grade principal em um contêiner de grade Vamos começar a prática e ver como podemos criá-la. Como você pode ver lado a lado, abro meu coordenador do Visual Studio e meu navegador usando a extensão light server e já crio um documento HTML chamado index dot TML Como você pode ver no meu contêiner principal, tenho quatro vendas de leitura e agora quero adicionar mais vendas de leitura dentro da quarta célula da grade. Para isso, precisamos usar a propriedade display grid para o item quatro, dentro do seletor do quarto item, vou usar a propriedade display, display grid Agora, ele converte nossa célula em um contêiner GET. Agora podemos adicionar mais células de grade dentro desse contêiner. Deixe-me te mostrar. Vou remover esse texto e, dentro dessa div, vou criar mais quatro Dev Dev dot SUB b one e vou duplicar essa linha E também vou numerar o nome da classe sub dois, sub três e sub Dentro dessas células da grade, vou digitar A, B, C e D. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, criamos quatro células de leitura dentro do quarto contêiner e agora vou atribuir largura às nossas células. Para isso, vou usar a propriedade de coluna do modelo de grade. Colunas do modelo Greed, e eu quero atribuir duas colunas com um valor F, um FR, um FR Se eu definir esse arquivo, você poderá ver o resultado. Vamos definir uma cor de fundo com essa profundidade. Caso contrário, não ficará visível. Então, vou selecionar o item quatro. Dentro do item quatro, vou selecionar todas as profundezas. Em seguida, dentro do fundo do escultor, leia. Se eu salvar esse arquivo, você poderá ver o resultado. Como você pode ver, não há lacuna entre essas células, então vou usar a propriedade grid gap. Leitura, lacuna, dez pixels. Se eu definir esse arquivo, agora você pode ver as células claramente. Como você pode ver, dentro de um contêiner ParatentGrid, temos um total de quatro células e, em seguida, convertemos nossa quarta célula de grade em um Dentro desse contêiner, também temos quatro células da grade. Chamamos esse processo de grade aninhada. Usando o interior de um item da grade, podemos inserir mais itens da grade, e você também pode inserir mais itens da grade dentro desses itens da sub-grade Suponha que você queira inserir mais quatro itens da grade dentro dessa célula A. Então, mais uma vez, você precisa seguir o procedimento similar. Primeiro, você precisa usar a grade de propriedades de exibição para essa venda e, em seguida, adicionar mais itens de grade dentro dessa venda. Se eu mostrar minha barra de ferramentas para desenvolvedores, aqui você pode ver dentro dessa grade, temos outra estrutura de grade e você pode ver as linhas dessa estrutura de grade. Se eu mostrar minha seção de layout, aqui você pode ver nas sobreposições de grade que temos um total de dois sistemas de grade, nosso sistema de grade de contêineres principal e, em seguida, nosso sistema de itens de grade de sobreposição, e você pode desligar e ativar suas linhas de grade de acordo com sua Obrigado por assistir a este vídeo. Espero que agora esteja claro para você o que é uma grade aninhada. Fique ligado no nosso próximo tutorial. 110. Tutorial de sobreposição de itens de grade: É bom ver vocês de volta, pessoal. Este é nosso último tutorial relacionado ao CSS Grid. Neste tutorial, aprenderemos o que são itens de grade sobrepostos Então, seguindo em frente, vamos tentar entender o que é isso. Aqui, você pode ver um contêiner de grade. E dentro desse contêiner de grade, temos um total de três itens de grade. E, como você pode ver, os itens estão se sobrepondo. E chamamos isso de itens de grade sobrepostos. E agora você quer esverdear um jogo primeiro, algo parecido. Então, vamos ver como podemos criar os itens de ganância sobrepostos Com isso, aprenderemos como podemos alterar a ordem de pilha desses itens de ganância. A ordem da pilha significa índice Z. Então, vamos começar a prática e tentar entender como ela funciona. Aqui você pode ver, lado a lado, que abro meu médico do Visual Studio e meu navegador usando extensão de servidor if e já crio um documento HTML chamado index Como você pode ver, eu já criei uma estrutura de grade. Há três itens de grade nessa estrutura de grade. Como você pode ver, nosso contêiner tem 400 pixels e nossa coluna tem 200 pixels e também a altura da linha é 200 pixels. Vamos tentar sobrepor os itens da grade. No começo, quero abranger nosso item de grade vermelha. Eu quero dividi-lo em até duas colunas. Para isso, vou usar a propriedade de coluna de grade. Um da coluna um, dois, vão dois. Se eu definir esse arquivo, você poderá ver o resultado. Abrangemos nossa coluna do item dois. Pois vou abranger esse item linha a linha com duas colunas. Deixe-me te mostrar. Vou usar o grado PupityRadow da primeira linha, abrangendo até a linha abrangendo até Se eu definir esse arquivo, você poderá ver o resultado. Então, agora nosso primeiro item abrange até duas colunas e duas linhas, nosso segundo item e terceiro item são nossos itens de grade implícitos Agora vou atribuir uma largura máxima todos esses itens da grade. Como você sabe, usamos esse item mais todos esses itens da grade. Então, vou usar a propriedade de largura máxima, vou digitar largura máxima de 200 pixels. Se eu definir esse arquivo, você poderá ver o resultado. E agora vou alinhar nossa primeira célula verticalmente. Vou digitar, align self sir, se eu definir este arquivo, você pode ver o resultado Se eu mostrar minhas linhas de grade, aqui você pode vê-las ocupando toda a área. Como usamos a propriedade de célula alinhada, é por isso que ela parece menor Se eu comentar essa propriedade e definir esse arquivo, você poderá ver o resultado. Mas, para criar uma grade sobreposta, itens que precisam dela, vou desfazer o comentário e definir Agora, quero mover nosso segundo item para o centro desta página. Para eles, vou usar as mesmas propriedades para o item dois. Se eu passar o código e definir o arquivo, aqui você pode vê-lo se sobrepor ao nosso primeiro item de graduação, mas eu quero colocá-lo no meio Vou usar a propriedade aligned el, Align center. Se eu definir esse arquivo, você poderá ver o resultado. Alinhamos verticalmente nosso item, centro deste contêiner Agora vou centralizar horizontalmente esse item da grade. Para isso, vou usar e justificar a propriedade própria, Justificar o autocentro Se eu definir esse arquivo, você poderá ver o resultado. Para nosso terceiro item da grade, vou usar se property. Mas eu quero alinhar nossa extremidade desse contêiner. Vou usar o align self end. E também justifique o fim próprio. Se eu definir esse arquivo, você poderá ver o resultado. Eu não preciso dessa cor de fundo laranja, então vou removê-la. Agora, todos os itens da ganância ocupam a mesma área. Nós apenas alinhamos os itens, início, centro e fim, mas o tamanho e a posição da coluna são os mesmos Agora vou adicionar um pouco de texto em todos os itens. No item um, vou digitar Lum 15. Isso adicionará um caractere de 15 watts. Ele pode adicionar 15 parágrafos em nosso item, e eu vou copiar o parágrafo e colá-lo em nosso segundo item. Também em nosso terceiro item, se eu definir esse arquivo, você poderá ver o resultado. Ei, precisamos adicionar mais personagens para sobrepor este item. Vou colar esse personagem mais uma vez. Se eu definir esse arquivo, agora você pode ver que eles se sobrepõem Agora vou mostrar como podemos alterar a ordem de pilha desse item Para alterar a ordem da pilha, precisamos usar nossa propriedade antiga, que é o índice Z. Agora eu quero trazer o primeiro item para o primeiro plano. Para isso, vou usar a propriedade de índice Z. Vou digitar o índice Z um. Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver que ficou por cima e agora eu quero colocar o item laranja no topo do. Para isso, precisamos usar o valor do índice Z dois. Então, para digitar Z, índice dois. Se eu definir esse arquivo, você poderá ver o resultado. Agora está claro para você como podemos controlar as áreas de sobreposição Agora vamos ver se eu removo todo o alinhamento desse contêiner Em seguida, defina o arquivo. Aqui, você pode ver o resultado. Agora, todos os itens da grade ainda existem no mesmo lugar. Agora eu quero mostrar nosso item de grade verde. Para isso, precisamos usar o valor do índice Z mais uma vez. Índice Z três, se eu definir esse arquivo, você poderá ver o resultado. Espero que agora tenha esclarecido sua dúvida sobre a sobreposição. Obrigado por assistir a este vídeo, fique ligado no nosso próximo estúdio 111. O que é Flexbox: Olá, pessoal. É bom ver você de volta. Este é o vídeo de introdução do CSS Flexbox. Vamos tentar entender o que é o Flexbox. Basicamente, o Flexbox é um novo módulo em CSS three. Isso torna o alinhamento muito mais fácil em diferentes direções e ordens Ele dá ao contêiner a capacidade de expandir e encolher elementos para melhor usar todo o espaço disponível Essa é a melhor maneira de usar todo o espaço disponível. Nosso próximo ponto é o layout CSS Flexbox substituir o layout flutuante Semelhante ao layout da grade, ele também pode substituir o layout flutuante Isso tornou nosso trabalho muito mais fácil. Usando o Flexbox, você pode criar um layout unidimensional com muita facilidade A grade CSS não é unidimensional. É bidimensional, mas o CSS Flexbox é unidimensional Você não pode manipular a altura da linha e a largura da coluna juntas. Por vez, você pode lidar com apenas uma dimensão. Linha, caso contrário, coluna. Suponha que este seja nosso contêiner principal dentro desse contêiner pai, temos quatro subdps Chamamos o container flex container e, se você quiser criá-lo de flexbox, precisará usar a propriedade de exibição Tela flexível. Em nosso contêiner principal, precisamos usar essa propriedade e, em seguida, convertê-la em um contêiner flexível Todos os itens dentro do contêiner flexível, agora são itens flexíveis Como eu disse anteriormente, flexbks funcionam de forma unidimensional Linha em linha, caso contrário em coluna. Se falamos de linhas significa caminho horizontal. Para isso, chamamos o eixo de eixo principal. Caso contrário, você pode chamá-lo de linha. Se eu falo sobre dimensão vertical , chamamos isso de eixo cruzado. Caso contrário, você pode chamá-lo de colunas. Vamos ver uma pequena demonstração como podemos usar um flexbox Aqui você pode ver, lado a lado, que abro meu Visual Studio Creator e meu navegador usando a extensão if server, e já crio um documento HTML chamado index dot HTML Como você pode ver, há uma profundidade principal, que classifica o contêiner dentro desse contêiner pai, temos um total de quatro itens. Como você pode ver, usamos classes diferentes para todo esse item um, item dois, item três e item quatro Eu já defini uma cor de fundo para todos os subdeps Como você pode ver, nosso contêiner principal é 600. Ao definir uma cor de fundo, margem e borda para esse contêiner pai. Agora, se eu quiser torná-lo um contêiner flexível para eles, precisamos usar a propriedade display, display e eu vou usar o valor flexível Como você pode ver, colocamos todas as quatro linhas em nosso contêiner principal. Se eu definir esse arquivo, como você pode ver, ele salvará automaticamente todos os itens em uma linha. Agora está um pouco claro para você quando convertemos nosso contêiner principal em uma caixa flexível, qualquer item em nosso contêiner, ele vem em uma linha Em nosso próximo tutorial, aprenderemos algumas propriedades novas. Vamos ver as propriedades. São um total de 12 propriedades que você pode usar com a caixa flexível. Flex direction, flexap, flex blow, flex grow, flex syn, flex basics, flexione, justifique o conteúdo, alinhe o conteúdo, alinhe o item, alinhe a si mesmo e, finalmente, alinhe a si mesmo e, finalmente regue. Para o alinhamento, usamos essa propriedade e já aprendemos sobre ela em nosso capítulo sobre grade Em nosso próximo vídeo, abordarei todas as propriedades. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 112. Tutorial de CSS Flexbox Flex Direction: É bom ver vocês. Neste tutorial, aprenderemos o que é a propriedade de direção flexível Vamos ver os valores dessa propriedade. Como você pode ver, temos um total quatro valores relacionados à direção flexível de CSS, reverso de linha, coluna e clumRvers E linha é nosso valor padrão nessa propriedade. Então, vamos começar a prática e ver como funciona. Aqui você pode ver lado a lado, eu abro meu coordenador visual sto e meu navegador usando a extensão if server, e eu já crio um documento HTML, chamado index dot TML, como você pode ver no meu documento, há um contêiner, e dentro desse contêiner, temos um total de quatro itens flix E como você pode ver, já convertemos nosso contêiner Flexbox E você já sabe que, se usarmos a propriedade flex, ela colocará nossos itens em uma única linha E neste tutorial, falaremos sobre a propriedade de direção flexível Essa propriedade está relacionada ao contêiner, não aos itens. Vou usá-lo após a propriedade de exibição e vou digitar a direção dos flocos, nosso primeiro valor é linha Se eu definir esse arquivo, aqui você pode ver que não há alterações. Como eu disse, linha é o valor padrão. Se você usá-lo, ele não afetará sua estrutura por padrão; a sua estrutura por padrão linha segue a direção da esquerda para a direita. Mas se eu usar o valor inverso da linha, deixe-me mostrar e depois definir o arquivo, agora você pode ver o resultado. Aqui você pode ver que a ordem do nosso item está invertida. Agora, a direção é da direita para a esquerda. Este é um caso de uso do valor reverso da linha e nosso próximo valor é a coluna, deixe-me mostrar a você. Vou digitar coluna. Esse valor funciona verticalmente. Se eu definir esse arquivo, você poderá ver o resultado. Basicamente, ele segue a ordem de cima para baixo. Como você pode ver, primeiro, segundo, terceiro, quarto, se você quiser organizá-lo de baixo para cima, precisará usar outro valor, que é a coluna invertida. Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que nosso primeiro item chegou ao final. Depois vem o segundo e depois o terceiro, e nosso último item chegou à primeira posição. Basicamente, é mudar a direção de baixo para cima. Se eu usar apenas o valor da coluna , a direção será de cima para baixo. Essa é a propriedade da direção flexível. Como eu disse anteriormente, é um trabalho unidimensional. vez, funciona com linha em linha, caso contrário em coluna, e você não pode lidar com linha e coluna juntas. Espero que agora a propriedade flex direction esteja clara para você Obrigado por assistir a este vídeo, fique ligado em nosso próximo tutorial 113. Tutorial de CSS Flex Wrap e Flex Flow: É bom ver vocês de novo e de volta com um novo tutorial relacionado ao flexbox E neste tutorial, aprenderemos o que é FlexAP e flex flow Essas duas novas propriedades são muito importantes em nosso flexbox Então, sem mais discussões, vamos começar a prática. Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão lip server, e já crio um documento HTML chamado index Aqui você pode ver em nosso contêiner que temos um total de quatro itens flexíveis e o tamanho do nosso contêiner é maior do que os itens flexíveis Se eu aumentar o item flexível nesta caixa, caso contrário, se eu reduzir a largura do contêiner, nesse caso, os itens serão transferidos para esse contêiner Deixe-me te mostrar. Eu já criei outros seis itens flexíveis, vou descomentar as tags dip e vou configurar esse arquivo Agora você pode ver que temos um total dez itens flexíveis em nosso contêiner e agora vou reduzir a largura do contêiner Usando a propriedade de largura. Então, vou digitar com 400 pixels. Se eu definir esse arquivo, aqui você pode ver o resultado. Aqui você pode ver que itens flexíveis são transferidos para este contêiner Da mesma forma, se eu usar propriedade de altura e aumentar a altura 200 pixels e definir esse arquivo, você poderá ver esse resultado. Mas se eu mudar a direção da flexão, deixe-me mostrar a flexibilidade Direção, coluna e, em seguida, defina o arquivo. Agora você pode ver, mais uma vez, itens flexíveis serem transferidos para esse contêiner Para resolver esse problema, temos outra propriedade flex, que é Flex RAP Basicamente, o flex Rap tem três valores, NoaPrap e RF reverse NoAp é nosso valor padrão. Se você usar ou não, seus dados serão sobrecarregados. Vamos ver como isso funciona. Para isso, vou usar a linha de direção flexível e também vou definir a largura desse contêiner Com 400 pixels. Se eu definir esse arquivo, você poderá ver o resultado. E agora vou usar a propriedade flex Rp, FlexAP. No início, vou usar o valor nob. Se eu definir esse arquivo, aqui você pode ver que não há alterações porque esse é o valor padrão dessa probabilidade, portanto, não afetará os itens flexíveis Se você quiser embrulhá-lo, você precisa usar o Rav Value. Deixe-me te mostrar. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver nosso contêiner com este aço de 400 pixels, mas ele envolve perfeitamente nosso item flexível dentro desse contêiner Como você pode ver, ele passa automaticamente para a próxima linha. Vamos ter uma margem entre esse item ex. Vou digitar margem de cinco pixels. Se eu definir esse arquivo, você poderá ver o resultado. Agora está claro para você quando os dados saem da primeira linha e, em seguida, eles chegam automaticamente à próxima linha Em seguida, ele passa automaticamente para a próxima linha. Mas se eu mudar a coluna de direção flexível também quero usar a propriedade de altura, altura de 200 pixels, e vou comentar a propriedade ampla Se eu definir esse arquivo, agora você poderá ver o resultado. Você pode ver que está definido na ordem vertical, primeiro, segundo, terceiro, quarto, quinto, seis, sétimo, oito, 19 Espero que agora esteja claro para você como os itens são colocados na ordem vertical Agora vou usar o próximo valor dessa probabilidade, que é rap reverse. Vou digitar rap reverse. Se eu definir esse arquivo, agora você pode ver que é apenas inverter a ordem dos itens, agora ele começará do lado direito e terminará no lado do lábio. Se eu mudar a direção da flexão, fileiras e configuro com este contêiner E comute a altura e defina esse arquivo. Como você pode ver, nossos itens partem da segunda linha desse contêiner. Primeiro, segundo, terceiro, quarto, quinto, sexto, sete, oito, 19. Basicamente, usamos a propriedade p para controlar dados de estouro. Espero que você tenha entendido, e nossa próxima propriedade é o fluxo flexível O que é fluxo flexível? É uma propriedade abreviada de chegada flexível e direção de flexão Usando uma propriedade, você pode controlar as duas propriedades e podemos usá-las em uma linha. Vou usar a propriedade flex flow, flex flow. Aqui, primeiro, precisamos fornecer o direção flexível e, em seguida, fornecer o valor da repetição flexível Primeiro, nosso valor de direção flexível é colum, nosso valor de p flexível Vou comentar essas duas propriedades e também preciso comentar com propriedade porque usamos valor da coluna e vou descomentar a propriedade de altura Se eu definir esse arquivo, aqui podemos ver se ele funciona perfeitamente. Se eu não usar um valor aqui, e definir esse arquivo. Agora você pode ver que nossos itens flexíveis são transferidos para este contêiner Basicamente, o Flexplo é um revestimento das duas propriedades, direção flexível Espero que agora os conceitos estejam claros para você sobre o que é FlexAP e Flixlo Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 114. Tutorial de conteúdo CSS Flexbox Justify: Ei, novamente, estou de volta com um novo tutorial relacionado ao flexbox e, neste tutorial, aprenderemos a justificar a propriedade do centro Vamos voltar ao stream do computador. Basicamente, usamos a propriedade justify content para alinhamento horizontal Esta propriedade vem com um total de seis valores. Deixe-me te mostrar. Nosso primeiro valor é o Flex Start. Também é um valor padrão. Em seguida, vem o centro da extremidade, espaço ao redor, o espaço entre o espaço uniformemente. É muito semelhante à nossa propriedade de grade, justifica o conteúdo, e já aprendemos sobre ela em nossa seção de grade Vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu coorreator do Visual Studio e meu navegador usando Dentro do contêiner de patentes, temos um total de quatro itens flexíveis Agora vou alinhá-lo usando a propriedade justify content. Tipo de som, justifique o conteúdo. No início, vou usar o valor central. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele move todo o centro flexível desse contêiner Em seguida, vou usar o valor final flexível. Extremidade flexível. Se eu definir esse arquivo, como você pode ver, ele raspa todo o canto direito do item flexível desse contêiner, e flex tart é um valor padrão Se eu usar essa propriedade, deixe-me mostrar e definir esse arquivo. Como você pode ver, é um valor padrão. Se eu usar qualquer valor flexível ou não, ele retornará esse resultado Nosso próximo valor é o espaço entre eles. Tipo de som: espaço entre. Se eu definir esse arquivo, como você pode ver, ele moverá nosso primeiro item e último item de ponta a ponta deste contêiner. Se eu remover a margem, agora fica mais claro para você. Já que vou remover o acolchoado. Agora você pode ver o resultado e eu vou adicionar todo o espaço entre esses itens. Ele dividiu igualmente esse espaço entre itens flexíveis. Nosso próximo valor é o espaço ao redor. Deixe-me te mostrar. Se eu definir esse arquivo, agora você pode ver que ele fornece espaço igual no primeiro e no último item. E entre esses itens, ele fornece espaço duplo. Como você pode ver, ele fornece espaço igual antes do primeiro item e acima do primeiro item. Da mesma forma, ele fornece espaço igual antes do segundo item e acima do segundo item. É por isso que a lacuna entre os itens é desenvolver essa primeira lacuna, e nosso último valor é o espaço uniformemente. Se eu usar esse v e definir esse arquivo, como você pode ver, ele fornecerá uma quantidade semelhante de espaço entre os itens flexíveis Espero que agora esteja claro para você como podemos alinhar horizontalmente nossos Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 115. Tutorial de alinhamento de itens do CSS Flexbox: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou trazendo um novo tutorial relacionado ao CSS flex box Neste tutorial, aprenderemos a alinhar a propriedade do item Usamos a propriedade de alinhamento do item para alinhamento vertical e temos um total de cinco valores relacionados à propriedade de itens de alinhamento, centro FlextrtFlx, FlextrtFlx Se usarmos o valor flexart, ele colocará meu item flexível no topo desse contêiner Se usarmos o valor flex N, ele colocará meu item flexível no fundo desse contêiner Se você quiser alinhar o centro verticalmente, nesse caso, você pode usar o valor central, e stretch é nosso valor padrão, mas o valor da linha de base é diferente Vamos começar a prática e ver como ela funciona. Como você pode ver, lado a lado, abro meu coorretor do Visual Studio e meu navegador usando IPServeRetension meu navegador Como você pode ver, já criamos um continuador e, dentro desse contêiner, temos um total de quatro itens flexíveis Como você pode ver, usamos a propriedade display flex. Usando essa propriedade, podemos converter nosso contêiner em um contêiner flexível Vou usar essa propriedade, que é alinhar item, alinhar itens Nosso primeiro valor é o alongamento. Se eu definir esse arquivo, aqui você pode ver que não há alterações porque é um valor padrão. Trabalhamos com alinhamento vertical, então precisamos aumentar a do contêiner, altura, 500 pixels Se eu definir esse arquivo, você poderá ver o resultado. Por padrão, o item de alinhamento usa o valor de estiramento. Agora vou usar o primeiro valor, que é flex start Se eu definir esse arquivo, como você pode ver, agora o alinhamento vertical desse item está no topo do contêiner Da mesma forma, se eu usar o valor final flexível e definir esse arquivo, como você pode ver, todos os itens serão alinhados na parte inferior desse contêiner Se você quiser alinhar este item, no centro deste contêiner, você pode usar o valor central Alinhar o centro do item, você pode ver o resultado Ele alinha todos os itens flexíveis no centro desse contêiner. Vamos adicionar um pouco de altura em nosso terceiro item. Vou usar a propriedade de altura em nosso terceiro item, altura de 50 pixels. Se eu definir esse arquivo, como você pode ver, agora a altura do nosso terceiro item é de 50 pixels, e agora vou falar sobre o conceito básico Se eu usar flex end value, flex end e definir esse arquivo, como você pode ver, como você pode ver, os itens terminam na Mas se eu usar o valor inicial e definir esse arquivo, agora a linha de base terminará em E agora vou falar sobre nosso último valor, que é a linha de base Mas, a princípio, vou aumentar o tamanho da fonte do terceiro item. Tamanho da fonte. Eu quero usar a propriedade de tamanho da fonte. Tamanho da fonte 34 pixels. Agora também vou reduzir o tamanho da fonte do segundo item. Vou usar o valor do tamanho da fonte mais uma vez e vou usar dez pixels para isso. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver que o alinhamento da linha de base do texto é diferente e agora eu quero alinhar esse texto na Para isso, precisamos usar a propriedade baseline. Deixe-me mostrar os itens de alinhamento, vou usar o valor da linha de base base. Se eu definir esse arquivo, você poderá ver o resultado. Agora, todos os textos vêm na mesma linha de base. Se você quiser usar o alinhamento horizontal, sim, você pode usar com isso Você só precisa usar a propriedade de conteúdo justify. Vamos usá-lo. Justifique o centro de conteúdo. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode mudar a direção da flexão. Como você sabe, por padrão, nossa direção flexível está errada. Vamos mudar a direção da flexão. Direção flexível. Vou usar o valor da coluna. Se eu definir esse arquivo, como você pode ver, agora nossa propriedade Ant funciona na horizontal, não na Se eu usar a propriedade flex N e definir esse arquivo, como você pode ver, ele será alinhado horizontalmente porque mudamos direção XX e a direção YxS direction Agora vamos seguir o eixo transversal oposto. Então, isso é tudo para este tutorial. Espero que agora o conceito esteja claro para você o que é a propriedade de alinhamento do item Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 116. Tutorial de conteúdo CSS Flexbox Align: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos a propriedade CSS align content Em nosso tutorial anterior, aprenderemos sobre a propriedade de alinhamento do item Essa propriedade também é usada para alinhamento vertical. Como você pode ver, temos muitas probabilidades de alinhamento de conteúdo relacionadas a valores diferentes Início flexível, flexão N, centro, alongamento, linha de base, espaço ao redor do espaço intermediário e espaço uniformemente Em nosso tutorial anterior, aprenderemos sobre alinhar itens Ambas as propriedades são usadas para o mesmo propósito, mas há uma diferença entre duas nessa probabilidade Alinhe o item usado para alinhamento de linha única, mas alinhe o conteúdo usado para alinhamento de várias Suponha que você tenha um conteúdo que não está coberto em uma única linha , está empacotado e vai para a próxima linha. Em seguida, precisamos usar a propriedade de conteúdo Align. Vamos começar a prática e ver como funciona. Como você pode ver lado a lado, abro meu Visual Studio Cater e meu navegador usando a extensão lip server Como você pode ver, eu já criei um documento HTML chamado index dot HTML Aqui você pode ver no meu contêiner principal, temos um total de dez itens flexíveis No início, vou atribuir a esse contêiner. Depois da altura, vou digitar we com igual a 450 pixels. Como você pode ver, nossos dados são transferidos para esse contêiner. Nesse caso, precisamos usar a propriedade flexRP, alguém para digitar flex Vou usar o valor Rab. Se eu definir esse arquivo, você poderá ver o resultado. Em nossos tutoriais anteriores, aprenderemos sobre as propriedades do flex rap Agora você pode ver que os itens overflowc chegaram para o próximo e, como você pode ver, nossos itens já estão Vamos usar nosso alinhamento de propriedades contido. Então digite, alinhe contido. Nosso primeiro valor é o alongamento. Se eu definir esse arquivo, como você pode ver, não haverá alterações porque stretch é nosso valor padrão. Mas se eu usar o valor do ponto flexível e definir esse arquivo, agora você pode ver que ele se move verticalmente Da mesma forma, se eu usar fluxo e valor e definir esse arquivo, agora os itens serão movidos verticalmente Da mesma forma, se eu usar o valor central, defina o arquivo. Agora, todos os itens estão no centro desse contêiner. Nossa próxima propriedade é o espaço entre, o espaço Somlote entre Se eu definir esse arquivo, você poderá ver o resultado. Esse valor preencherá todo o espaço entre duas linhas. Se eu usar espaço ao redor do valor, deixe-me mostrar e depois definir esse arquivo. Aqui você pode ver qualquer espaço que temos no topo da linha, ele será dobrado entre essa linha e, em seguida, virá a mesma quantidade de espaço, na parte inferior da última linha. Em seguida, vem nosso próximo valor, que é espaço uniforme, algum espaço de texto uniforme. Se eu definir esse arquivo, agora você poderá vê-lo com a mesma quantidade de espaço entre as linhas. Essa propriedade só funciona quando temos várias linhas. Se eu remover algum item flexível deste contêiner, deixe-me mostrar e, em seguida, definir este arquivo, você pode ver que todos os itens estão mais centralizados verticalmente Agora, essa propriedade não vai funcionar corretamente. Se eu usar um valor diferente, algo espaçado entre eles, e depois definir esse arquivo, você verá que não está funcionando. Essa propriedade funciona exatamente quando temos várias linhas. Caso contrário, não vai funcionar. Se tivermos uma única linha nesse caso, precisamos usar a propriedade Align item Espero que agora esteja claro para você o que é a propriedade de conteúdo Align Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 117. Tutorial de CSS Flexbox Align Self: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos a propriedade de célula alinhada à caixa ex do CSS Essa propriedade também é usada para alinhamento vertical, semelhante à propriedade de alinhar item Como você pode ver, para essa propriedade, temos alguns valores semelhantes. Só temos um novo valor para essa propriedade, que é automático. Daí vêm o início flexível, a extremidade flexível, o centro, o alongamento Agora, a questão é: qual é a diferença entre alinhar a propriedade do item e alinhar a propriedade da célula Propriedade celular alinhada usada vesicamente para itens individuais Suponha que você queira alinhar verticalmente um item flexível individual. Nesse caso, você precisa usar essa propriedade. Como você pode ver nesta imagem, restando um item flexível, todos os itens flexíveis que chegaram ao topo do contêiner porque, para essa célula específica, usamos a propriedade align Por causa disso, conseguimos nos diferenciar. Então, vamos começar a prática e ver como ela funciona. Aqui você pode ver, lado a lado, que abro meu coretor do Visual Studio e meu navegador usando a extensão p server Vou usar meu arquivo SML anterior para este exemplo. Como você pode ver em nosso contêiner fixo, temos um total de cinco itens flexíveis E, como você pode ver, por padrão, os itens são esticados. Primeiro, quero alinhar todos os itens na parte superior do contêiner Vou usar a propriedade align item. Alinhe o item Flextrt. Se eu definir esse arquivo, você poderá ver o resultado. Agora vou usar a propriedade de célula alinhada porque agora quero alinhar uma célula individual Suponha que eu queira mover a extremidade da célula número três desse contêiner. Em seguida, precisamos entrar no seletor do item três e usar essa venda alinhada Vou usar flex end value flex end. Se eu definir esse arquivo, você poderá ver o resultado. Movemos com sucesso uma extremidade celular individual desse contêiner. Lembre-se de que essa propriedade é usada para alinhamento vertical. Vamos mover o centro da célula número dois desse contêiner. Para eles, mais uma vez, vou para o seletor número dois e vou digitar AlignellPperty e vou digitar AlignellPperty Um centro alinhado. Se eu definir esse arquivo, você poderá ver o resultado. Vamos falar sobre nossa nova propriedade, que é automática. Se eu usar o valor automático em nosso item dois e depois definir esse arquivo, aqui você pode ver que ele está de volta ao grupo. Agora, esse valor está relacionado ao valor de alinhamento do contêiner pai Vamos mudar o alinhamento do contêiner principal. Alinhe o centro de itens. Se eu definir esse arquivo, como você pode ver, nosso valor automático seguirá automaticamente esse alinhamento. Se usarmos align self auto, então é relativamente trabalhoso com o valor de align items Se usarmos o valor central, também agimos como um valor central. Se usarmos o valor final flexível também atuaremos como um valor final flexível Só é preciso lembrar que a propriedade da Alan SEL trabalha apenas com vendas Flexbox, não com o contêiner Flexbox Espero que agora esteja claro para você o que é propriedade de Alan Cell e qual é o Ukage dessa propriedade Obrigado por assistir a este vídeo, fique ligado nos próximos dois estúdios 118. Tutorial de ordem de CSS Flexbox: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos sobre a propriedade da água. Essa propriedade funciona da mesma forma que fizemos na grade. Vamos começar a prática e ver como funciona. Aqui você pode ver, lado a lado, que abro meu revestidor do Visual Studio e meu navegador usando a extensão Lifesaver e já crio um documento HTML chamado index dot HTML Como você pode ver, em vez do contêiner flexível, temos um total de seis itens flexíveis Se você se lembra de usar a propriedade WR, podemos mudar as posições de vendas. Suponha que você queira mover a quarta célula na posição número dois. Nesse caso, precisamos usar a propriedade War. Então, vou pular para o setor do item cinco e vou digitar água. No começo, vou passar o valor zero. Esse é o valor padrão. Se eu definir esse arquivo, aqui você pode ver não há alterações em sua ordem. Mas se eu passar menos um, deixe-me mostrar e configurar este arquivo Agora você pode ver, agora você pode ver nosso quinto item ficar em primeiro lugar neste pedido. Por padrão, o valor da propriedade de água de todas as células é zero. A água começa com um valor negativo. Para o item cinco, usamos o valor negativo. É por isso que veio primeiro. Isso é menos um. Além disso, vou digitar menos um em um quinto disso. Menos um Da mesma forma, para nosso terceiro item, quero passar menos dois, água menos Se eu definir esse arquivo, agora você pode ver que ele ficou em primeiro lugar em nossa água porque menos dois é menor que zero e menos um. É por isso que veio primeiro. Como eu disse anteriormente, o valor mais baixo veio primeiro. Eu quero digitar menos dois em terceiro lugar, menos dois. Primeiro menos dois, depois vem menos um, depois zero, zero, zero, zero e zero Mas se eu passar um valor no item número um, deixe-me mostrar um de água e depois definir esse arquivo, você pode ver que ele veio para o lado direito porque um é maior que o valor negativo e o valor zero É por isso que chegou a zero. Eu vou passar mais um aqui. É mover o menor para o maior valor. Agora, se eu passar no pedido dois em nosso quarto item, deixe-me mostrar o pedido dois, e se eu definir esse arquivo, como você pode ver, agora a capa fica em último lugar porque mais dois é maior que zero e um. Se eu definir esse arquivo, agora está claro para você. Agora você pode entender claramente como os pedidos são redigidos. Não definimos nenhum pedido no item número dois e no item número seis. Então, no outono, a água desses itens é zero. Espero que agora você entenda a rega. Agora a pergunta é: por que usamos a propriedade da água? Quando você quer tornar seu site responsivo , a água é a propriedade mais importante Na visão de Dexter, você quer seguir essa água. Mas na visualização móvel, você quer mover o item quatro em primeiro lugar. Nesse caso, as propriedades da água são muito úteis. Espero que você tenha entendido. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 119. Tutorial de CSS Flexbox Flex Grow: Olá, pessoal. É bom ver você de volta. Mais uma vez, venho com um novo tutorial. E neste tutorial, vamos aprender uma nova propriedade, que é Flix Row. Então, vamos começar a prática e ver como funciona. Como você pode ver, lado a lado, abro meu Visual Studio Creator e meu navegador usando a extensão Lifesaver e já criei um documento HTML chamado index dot HTML E, como você pode ver em nosso contêiner principal, temos um total de seis itens flexíveis Então, vamos usar nossa nova propriedade. Basicamente, a propriedade flex groove não funciona com o contêiner. Eu trabalho com itens flexíveis. Como você pode ver, há itens de nome de classe comuns para todos os itens flexíveis Vou entrar no seletor de itens. Vou usar nossa nova propriedade, que é flex grow flex grow Aqui precisamos passar o valor numérico, se eu passar zero e depois definir esse arquivo, como você pode ver, e não houver alterações Se eu passar um valor aqui, vou digitar um e depois definir esse arquivo, aqui você pode ver que todo o espaço está dividido igualmente para o item flexível Espero que agora esteja claro para você como as propriedades do grupo flex funcionam Se eu passar dois aqui e depois definir esse arquivo, como você pode ver, não haverá alterações. Porque eu dividi igualmente o espaço, todos os itens Lex. É por isso que não vai funcionar. Estou de volta à minha antiga posição um e vou configurar esse arquivo. Agora eu quero aumentar a largura do item. Sim, nós podemos fazer isso. Em primeiro lugar, precisamos selecionar o item individualmente e, em seguida, precisamos usar essa probidade, flocos, crescer Aqui eu vou passar dois. Se eu definir esse arquivo, você poderá ver o resultado. Você pode ver aqui, agora é o dobro em comparação com outras células. Da mesma forma, se eu passar três e depois definir esse arquivo, agora seu tamanho é triplo comparado a todos da mesma forma, vou usar a mesma propriedade em nosso item quatro. Vou digitar, os flocos crescem e quero expandir a largura em até quatro vezes, então quero passar quatro aqui Se eu definir esse arquivo, você pode ver a diferença. Se eu remover a margem entre as células, agora fica mais claro para você. Sem os itens dois e quatro, todas as células são uma. Para o item dois, o valor da propriedade do grupo Flex é três e, para o item quatro, a propriedade do grupo Flex é Essa propriedade só funciona para a largura do item flexível. Basicamente, usamos essa propriedade quando precisamos fornecer a mesma quantia em todas as vendas. Espero que agora esteja claro para você o que é propriedade do grupo Flex Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 120. Tutorial de CSS Flexbox Flex Basis: Ei, mais uma vez, estou de volta com uma nova propriedade relacionada ao CSS Flexbox Neste tutorial, aprenderemos o que é base flexível Essa propriedade é muito semelhante à propriedade max With. Basicamente, ele lida com a largura flexível do item. Vamos ver como podemos usá-lo na prática. Como você pode ver lado a lado, abro meu codator do Visual Studio e meu navegador usando a extensão if server, e já crio um documento HTML chamado index dot Como você pode ver, dentro do contêiner flexível, temos um total de 66 itens Como você pode ver, usamos display property, flex e também usamos flex wrap Usamos a probidade flex Rap porque se o item sobrevoasse É por isso que usamos flex Rap e, para cada item flexível, definimos uma largura comum Como você pode ver, flex grow one. Aprendemos sobre essa propriedade em nosso tutorial preliminar. É por isso que todos os itens ocupam a mesma quantidade de espaço. Vamos usar a base flexível de propriedades. Se um item for selecionado, vou digitar flex basis E aqui eu vou passar 250 pixels. Se eu definir esse arquivo, como você pode ver, agora a largura do nosso primeiro item flexível é de 250 pixels Agora funciona como largura máxima. Vamos ativar a barra de ferramentas do desenvolvedor. Se eu salvar essa imersão, como você pode ver, nosso primeiro item com 250 pixels Mas sem nosso primeiro item, todas as quedas ocupam a mesma quantidade de espaço Mas se eu tentar reduzir o tamanho do navegador, deixe-me mostrar Como você pode ver, isso não afetará a largura deste item. Se reduzirmos a largura do navegador, como você pode ver, agora ela diminuirá Porque essa propriedade funcionava como uma largura máxima. Podemos reduzir a largura desse item abaixo de 250 pixels, mas não podemos esticar a largura desse item para mais de 250 pixels. Agora vou usar a propriedade flex basis em todo esse item Vou comentar essa linha e vou digitar flex basis 100 pixels Se eu definir esse arquivo, primeiro aumentarei a largura do painel do meu navegador. Agora você pode ver que a largura do nosso primeiro item é de 250 pixels. Mas sem nosso primeiro item, largura de cada item é de 100 pixels Se eu tentar aumentar um pouco o tamanho do navegador, deixe-me mostrar, como você pode ver, item cinco mop no canto direito Porque sem o primeiro item, todos os itens estão tentando manter a largura de 100 pixels e também estão tentando preencher o espaço desse navegador. Agora vamos tentar reduzir a largura do navegador e ver o que aconteceu. Se eu tentar reduzir a largura do navegador, como você pode ver, maioria dos itens é enviada para a segunda linha porque usamos a propriedade flexer Caso contrário, eles vão transbordar para esse contêiner Mas se eu reduzir, um pouco mais, como você pode ver, como você pode ver, não há espaço para dois itens em uma única linha. É por isso que eles estão encolhidos. Mas, como você pode ver, reduzimos a largura do item em uma. Mas o restante do item um, todas as larguras dos itens são de 100 pixels porque eles têm espaço para se estender até sua largura total Mas se eu reduzir cada vez mais, como você pode ver, todos os itens estão reduzindo sua largura. Então, espero que agora esteja claro para você que essa propriedade funciona como uma largura máxima. Além disso, essa propriedade também funciona como uma largura mínima. Deixe-me te mostrar. Se eu comentar essa linha, e se usarmos a propriedade flex group para todo esse item e definirmos esse arquivo, como você pode ver, todos os itens chegarão à única linha Usamos a propriedade Flexbsis somente para o item um e, para o restante, usamos a propriedade flex group, e nosso valor flex grow é um e nosso valor flex grow Como eu disse, também funciona como uma propriedade de largura mínima. Deixe-me te mostrar. Se eu tentar reduzir a largura do contêiner, como você pode ver, isso afetará toda a largura do item sem o item um. Se eu tentar reduzi-lo mais, como você pode ver, isso não afetará o item um. Sem o item um, todos os itens estão reduzindo sua largura. Se tentarmos reduzir ainda mais, como você pode ver, nosso último item será enviado para a segunda fila Mas nosso item um ainda mantém a mesma largura de 250 pixels. Se usarmos a propriedade flex Basis com linha flexível, haverá uma largura mínima Mas se usarmos apenas a propriedade de base flexível , ela funcionará como um máximo com. Além disso, aqui também podemos usar o valor percentual. Suponha que eu queira usar 50%, 50%. Se eu definir esse arquivo, como você pode ver, ele ainda funcionará corretamente. Vamos aumentar o valor percentual, 90%. Se eu definir esse arquivo, agora fica claro para você como ele funciona. Agora, toda vez que nosso primeiro item ocupará 90% da largura deste navegador. Então, depende de você que tipo de valor você vai usar. Espero que agora esteja claro para você qual é a propriedade mais básica do Flex Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 121. Tutorial de CSS Flexbox Flex Shrink: Bem vindos de volta, pessoal. Neste tutorial, aprenderemos o que é flex stream Então, vamos entrar na tela do computador e ver o que é isso. Aqui você pode ver, lado a lado, que abri meu Visual Studio Coreator usando a extensão Lifesaver e já criei um documento HTML chamado index dot TML E aqui você pode ver os quatro itens fixos diferentes, um, dois, três, quatro, e este é o nosso contêiner fixo. Se eu te mostrar aqui, você pode ver, usamos a correção distal E em nossa classe comum, eu uso a propriedade fix zero, fix 01. É por isso que as larguras dos itens são divididas igualmente. Mas neste tutorial, vamos aprender uma nova propriedade, que é flex syn. Então, vamos começar. Então, primeiro, vou remover a propriedade fix roo e vou definir W W 200 pixels Se eu definir esse arquivo e redimensionar meu navegador, você poderá ver o resultado Aqui você pode ver que nosso contêiner é maior que a largura dos itens. Como você pode ver, todos os itens com 200 pixels. Agora eu quero usar essa propriedade de flexão em nosso item um. Mas, a princípio, quero lhe dizer qual é o significado de flexionar. Basicamente, usamos a propriedade flexing para criar nosso item flexível responsivo Se você quiser tornar seus itens encolhíveis, precisará usar essa propriedade Aqui você pode vê-lo reduzir a largura do item. Deixe-me esclarecer o conceito. Em nosso primeiro item, vou usar essa propriedade, flex shink Um é o valor padrão. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Mas se eu usar o valor zero e depois definir esse arquivo, agora você pode ver: Ei, eu fiz um synamista Precisamos usar essa propriedade dentro do item um, não em todos os itens. Quero mover essa propriedade em nosso item um. Se eu definir esse arquivo, aqui você pode ver que o item um não mudou de forma. Agora, nosso item um não é encolhível. Agora ele manteve a largura fixa de 200 pixels. Se eu aumentar a largura do navegador, você poderá ver o resultado. E se eu reduzir outro item flix ao limite, deixe-me mostrar aqui que você pode ver nosso outro item flix transbordado deste contêiner Como você pode ver, nosso primeiro item não diminuiu porque usamos o valor de flexão zero Agora está claro para você. Para encolher, podemos usar zero e um valor Se usarmos um valor e depois definirmos esse arquivo, agora você poderá ver o resultado. Aqui você pode ver como ele encolhe nosso item. Se você quiser aumentar o psiquiatra, precisará usar o valor zero Agora vou te mostrar outra coisa. Você já sabe que se eu usar o valor zero, podemos chamar o psiquiatra Mas se eu usar um valor , podemos reduzir nossos itens flexíveis Agora, sem zero ou um, podemos usar valores diferentes. Deixe-me te mostrar. Se eu usar dois cabelos, eu configuro esse arquivo, você pode ver o resultado. Reduz nosso primeiro item em comparação com outros itens. Da mesma forma, se eu usar três valores e depois definir esse arquivo, você pode ver, novamente, que ele reduz nosso item um Se não usarmos o valor zero , nosso item sempre poderá ser reduzido. Agora vou mostrar o Como podemos usar essa propriedade de string de uma maneira diferente? Para isso, primeiro, vou remover a largura do item. Então eu configuro esse arquivo e também vou usar o valor de string um. E agora vou usar a propriedade flex Basis. Base flexível. Base flexível de 200 pixels. Base flexível significa erva daninha dinâmica. Agora você pode ver que não podemos aplicar água em todo o item. Aplicamos com nosso item um usando flex BeSisppity. Agora, se eu definir esse arquivo e tentar reduzir a largura do navegador, como você pode ver, quando o espaço de mesclagem acabar, e se eu tentar reduzi-lo, você pode ver nosso item um também diminuir Agora, a questão é por que encolher? Porque usamos um valor. Mas se eu usar o valor zero e definir esse arquivo, agora você pode ver que nossos itens foram transferidos desse contêiner Mas se eu passar para o valor e depois definir esse arquivo, como você pode ver, ele não funcionará. Se eu usar o valor um e definir esse arquivo, você verá que não há alterações. Nesse método, nossos outros valores não funcionarão. Se você quiser cobrir o espaço restante, nesse caso, você pode usar o valor flex grow Deixe-me te mostrar. Em nosso item quatro, vou usar o valor flex grow Os flocos crescem. Primeiro, se eu definir esse arquivo, como você pode ver, nosso item quatro cobriu toda a peça em branco. Se eu reduzir o navegador com, você pode ver nosso item quatro encolher automaticamente e, ao reduzir novamente, agora ele afeta o item Espero que, nesse momento, esteja claro para você. Agora vou começar com este contêiner. Como você pode ver, não usamos nenhuma largura para esse contêiner e agora vou definir o contêiner com. Aqui vou digitar com LARGURA de 600 pixels. Se eu definir esse arquivo e aumentar a largura do meu navegador, agora você pode ver que o tamanho do nosso contêiner está fixo e agora vou reduzir a largura do contêiner. Vou usar 300 pixels. Se eu definir esse arquivo, você poderá vê-lo reduzir todos os itens. Também o item um. E se eu reduzir um pouco o contêiner com algo para 50 pixels e depois definir esse arquivo, aqui você pode ver que também funciona porque usamos um valor aqui, flexionando um, mas se eu usar valor zero e definir esse arquivo, você pode ver um resultado diferente Aqui você pode ver outros itens sendo transportados deste contêiner Espero que agora esteja claro para você o que é flexionar a propriedade. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 122. Tutorial de CSS Flexbox com Margin Auto: Hoje, neste tutorial, aprenderemos o que é margem automática no Vamos entrar na tela do computador e ver como funciona. Aqui você pode ver, lado a lado, que abro meu coordenador do Visual Studio e meu navegador usando a extensão Lifesaver, e já crio um documento HTML chamado index Como você pode ver no meu navegador, há um contêiner pai e, dentro desse contêiner , temos um DTM temos um Este é o nosso contêiner Flix, e este é o nosso item fixo. Agora vou mostrar como podemos obter resultados diferentes usando Margin autowl Então, em nosso item, vou digitar Margin. Margem. E eu vou usar o Atovil. Se eu definir esse arquivo, você poderá ver o resultado Aqui você pode vê-lo alinhado horizontal e verticalmente e verticalmente Mas o problema é o porquê? Porque há muito espaço livre dentro desse contêiner. É por isso que está alinhado no centro. Agora vou usar Margin Lip Auto, Margin Lab. Se eu definir esse arquivo, como você pode ver, aqui você pode vê-lo enviado automaticamente para o lado direito desse contêiner Nosso item sai do espaço no lado esquerdo e é enviado para o lado direito Se eu usar margin top auto top definir esse arquivo, agora você pode ver que ele está descendo de cima porque tem espaço livre na parte superior. Com isso, vou usar margem de aluguel de propriedade. Margem restante e, mais uma vez, vou usar o valor automático Se eu definir esse arquivo, agora você poderá ver nosso item flexível enviado para o canto inferior direito desse contêiner Espero que agora você possa entender como podemos obter alinhamento diferente usando o Vu automático Deixe-me mostrar outro exemplo. Suponha que temos um contêiner e, dentro desse contêiner, temos que dizer quatro itens flexíveis Aqui você pode ver os itens, item um, item dois, item três e item quatro. Eu digo uma cor de fundo diferente para esses itens. E agora eu vou usar nossa margem automática Velu Eu vou usá-la dentro do nosso item dois Margem, direita, automática Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver que nosso item dois ocupa todo o espaço disponível dentro do contêiner e é fornecido com margem e formato. O item três e o item quatro, lado direito deste contêiner. Da mesma forma, se eu usar a propriedade de aumento de margem, deixe-me mostrar margem, volta e, em seguida, definir esse arquivo. Agora você pode ver que ele fornece todo o espaço, lado esquerdo deste item dois. E se eu usar a mesma propriedade do item um , vou recortar essa propriedade e colá-la aqui. Se eu definir esse arquivo, agora você pode ver que ele fornece todo o espaço antes do item um e move todo o item para o lado direito desse contêiner. Então, quando você trabalha com o lado responsivo, você pode usar essa árvore para alinhar seu item flexível Então, espero que agora esteja claro para você, usando o Auto Value, como podemos criar um layout diferente no flex box Então, obrigado por assistir a este tutorial fique ligado no nosso próximo tutorial 123. Tutorial CSS Flexbox Nested Flex: Ei, este é o último tutorial relacionado à propriedade flexbox e, em nosso tutorial de acoing, abordaremos alguns projetos reais semelhantes Neste tutorial, aprenderemos o que é nested flix Vamos entrar na tela do computador e ver como funciona. Como você pode ver, há um contêiner e dentro desse contêiner, colocamos três itens D. Se convertermos nosso contêiner principal em contêiner flexível , chamaremos esse item De flex Mas se usarmos a propriedade display flex em um item específico, nesse caso, seria um contêiner flexível aninhado, e esses também são itens flexíveis dentro desse contêiner e esses também são itens flexíveis Então, vamos começar a prática e ver como podemos usá-la. 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á crio um documento TM chamado index dot HTML E aqui você pode ver um item div principal, contêiner de classe. E dentro desse contêiner, temos que comprar um item Flexbox Como você pode ver, em nossa classe de contêiner, usamos a propriedade de exibição flix. Primeiro, vou mudar a direção dos seis itens. Então, aqui, vou usar a propriedade de direção flexível. Direção flexível. Vou usar o Clumvi. Se eu definir esse arquivo, você poderá ver o resultado. Já definimos a altura de 100 pixels para nossos itens. Agora vou adicionar mais três DV dentro do nosso segundo item Aqui, vou adicionar um total de mais três DV. Primeiro, vou criar um D com um subitem da classe de subitem Além disso, vou usar outro nome de classe, subitem um, para o nosso primeiro D. Em seguida, vou duplicar essa linha no total de duas t. Então, vou elogiar ovelha com seta reduzida, subitem dois e subitem Aqui você pode ver, eu defino um nome de classe comum, mas também definimos um nome de classe diferente para cada item. Então, dentro dessa divisão, vou digitar A, B e C. Se eu definir esse arquivo, como você pode ver, ele retornará nossos itens em , B e C. Se eu definir esse arquivo, linha, e agora vou converter nosso segundo item flexbox em um contêiner flexbox Aqui, vou usar uma exibição de nome D adequada. Exibir fluxo. Se eu definir esse arquivo, como você pode ver, por padrão, ele organiza nosso item em uma única linha Agora vamos definir uma cor de fundo para nossos itens. Para isso, o item dois, maior que o sinal, pontilha o nome da nossa classe, que é um subitem Então, dentro da classe, eu vou definir a cor de fundo. Antecedentes. Por quê. Além disso, vou definir a cor do texto. Cor preta. Se eu definir esse arquivo, você poderá ver o resultado. Agora eu quero dividir igualmente nosso item flexível aninhado dentro deste Para isso, vou usar uma propriedade chamada flex Grove. Vinho Flex Grove flex grow. Se eu definir esse arquivo, você poderá ver o resultado. Deixe-me dar uma margem aos nossos itens que podem atrapalhar você. Margem de um pixel. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, temos um contêiner fixo principal dentro desse continuador flexível pai, temos P four flex IN e convertemos nosso segundo flex IN em e convertemos nosso segundo flex um contêiner flexível aninhado, e dentro do continuador de correção NSTP, temos três itens flexíveis, A, B e C. Espero que agora esteja claro para você como podemos criar itens de dentro desse continuador flexível pai, temos P four flex IN e convertemos nosso segundo flex IN em um contêiner flexível aninhado, e dentro do continuador de correção NSTP, temos três itens flexíveis, A, B e C. Espero que agora esteja claro para você como podemos criar itens de correção aninhados. Não é muito difícil. É um processo muito fácil. Então, obrigado por assistir a este vídeo, fale sobre nosso próximo tutorial. 124. Tutorial de espessura de decoração de texto CSS3: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos um novo texto relacionado à propriedade, que é a espessura da decoração do texto. Em nossos tutoriais anteriores, já aprendemos sobre propriedades de decoração de texto Toma linha de decoração, assume cor de decoração, assume estilo de decoração. Usando essas propriedades, podemos colocar sublinhado em qualquer texto. Além disso, podemos alterar a cor do sublinhado e o estilo de decoração sublinhado Além disso, também podemos usar a linha O, mas o problema é que não podemos controlar a espessura. Para resolver esse problema, o CSS introduz outra propriedade, que é a espessura da decoração do texto. Então, vamos começar a prática e ver como podemos usar essa propriedade. Então, como você pode ver lado a lado, abro o editor de código Studio dos meus usuários e meu navegador usando a extensão de servidor Light, e já crio um documento ML chamado index dot Então, como você pode ver, temos H uma tag, e aqui usamos essa propriedade, centro da linha de texto. E agora vou usar outra propriedade chamada Text Decoration Line. Então, aqui vou digitar decoração de texto, linha. E essa propriedade vem com total de três valores sublinhados sobre a linha e a linha Então, vou usar o sublinhado. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, aqui você pode ver o sublinhado abaixo do texto E agora vou mudar a cor do sublinhado. Para alterar a cor, precisamos usar uma propriedade chamada Decoração fiscal, cor, decoração de texto , cor, e eu vou usar a cor vermelha. Então eu vou perseguir o estilo de decoração. Então, aqui, vou usar outra propriedade chamada Tax decor style text decor style, e vou usar dst. Se eu definir esse arquivo, você poderá ver o resultado. E agora eu quero controlar a espessura desse sublinhado Portanto, precisamos usar a nova propriedade chamada espessura da decoração fiscal. Decoração SunDuttt. Espessura da decoração do texto. E aqui, vou mencionar esse tamanho e vou usar o Pain Pixel. Se eu definir esse arquivo, aqui você pode ver o resultado. Então, como você pode ver, isso aumenta a espessura desse texto. E se eu torná-lo sólido, agora é mais puro volume. Sólido. Depois de configurar esse arquivo, você pode ver o resultado. E se você quiser adicionar mais espessura, basta aumentar o valor. Suponha que eu passe 20 pixels e você possa ver o resultado. Além disso, podemos aplicá-lo em nossa linha sobreposta. Suponha que, se eu passar com sublinhado, eu queira deslizar sobre Se eu definir esse arquivo, você poderá ver o resultado. Agora usamos sublinhado e sobrelinha juntos. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 125. Tutorial de deslocamento de sublinhado de texto CSS3: Olá, pessoal, é bom ver vocês de volta. Foi mais uma vez que estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender o texto CSS sublinhado ao lado oposto Em nossos tutoriais anteriores, já aprendemos sobre essas propriedades Toma linha de decoração, assume cor de decoração, assume estilo de decoração. Usando essas propriedades, podemos definir cor, espessura, estilo, etc Mas se eu quiser fornecer uma lacuna entre o texto e o sublinhado , não temos nenhuma propriedade Mas o CSS introduz uma nova propriedade, texto sublinhado ao lado Usando essa propriedade, você pode fornecer a lacuna entre o texto e o sublinhado Então, vamos começar a prática e ver como podemos aplicar essa propriedade. 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 if, e já crio um índice de nome de documento HTML dotsTM E como você pode ver em nossa tag corporal, temos H uma tag. Então, primeiro, vou usar uma propriedade chamada Tix Decoration line Decoração de texto tipo filho. Toma linha de decoração. Pega a linha de decoração, vou usar o sublinhado Em seguida, vou usar outra cor de decoração da propriedade Tikes Toma a cor da decoração. Toma cor de decoração, vou usar a cor vermelha. A próxima propriedade que vou usar tem estilo de decoração. Estilo de decoração de texto. Tem estilo de decoração, sólido. E eu vou configurar esse arquivo. Depois de definir esse arquivo, aqui você pode ver o resultado. Além disso, se você quiser controlar a espessura, apenas o uso da unidade assume a propriedade de espessura da decoração. Então, amarre a decoração do texto, a espessura da decoração do texto. E eu vou usar dez pixels. E eu quero configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o sublinhado, mas há um problema Não temos nenhuma lacuna entre o texto e o sublinhado. Quero fornecer uma lacuna entre o texto e o sublinhado. Para isso, o CSS introduziu outra propriedade, que é o texto sublinhado ao lado Então, para digitar texto sublinhado, oposto. E eu quero fornecer uma lacuna de 20 pixels. Depois de submeter esse arquivo, você pode ver o resultado. Agora, ele fornece uma lacuna de 20 pixels entre o texto e o sublinhado Então, isso é tudo para este tutorial. Espero que agora esteja claro para você. 126. Tutorial de CSS atualColor: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, vamos aprender uma coisa nova, que é a cor atual. Em nossos tutoriais reversos, já aprendemos sobre isso Temos um total de seis modos de cores diferentes. Nome da cor hexadecimal, RGB, RGBA, HSL, HSLA. Agora, o CSS adiciona outro modo de cor, que é a cor atual. Agora, vamos tentar entender o que é a cor atual e como é fácil. Aqui você pode ver um elemento profundo. E nesse elemento deve, temos um título, uma linha divisória, um parágrafo, um bloco profundo e um botão. Leia mais Então, neste elemento pai, eu adiciono uma propriedade chamada color, e eu digo que é cor azul. Depois de usar essa propriedade de cor, azul, ela mudará a cor do texto preto para azul. Mas eu quero aplicar a mesma cor nessa etiqueta de gato e nesse elemento profundo. Para aplicar essa cor azul a esse elemento de banco de dados e a esse botão, precisamos usar uma propriedade. Precisamos usar a propriedade de cor de fundo, e aqui precisamos passar esse valor, a cor atual. Quando eu uso esse valor, a cor atual, ele verifica qual cor usamos nosso valor de cor. Como você pode ver, usamos a cor azul. Em seguida, ele aplicará a cor azul a esse elemento profundo e a esse botão. E podemos usar a cor atual em qualquer lugar. Podemos aplicar a cor de fundo, a cor da borda, em qualquer lugar. Então, 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 IPServeRetension e já criei um documento estável abro meu editor de código do Visual Studio e meu navegador usando IPServeRetension e já criei um documento estável chamado index dot DML. Se você perceber que pode ver em nossa tag corporal, temos uma tag de cabeçalho e, em seguida, temos uma tag profunda. E inserindo essa tag de mergulho, temos duas tags de cabeçalho e um parágrafo e um parágrafo e uma tag de corte por botão E aqui definimos uma identificação para esse sabor debilitante. E também, dizemos com margem de preenchimento até esse debilitamento E agora vou aplicar a propriedade de cor nesse elemento de sabor. Então, aqui, eu vou usar uma propriedade chamada cor. Cor, e eu vou usar a cor vermelha. Vermelho. E eu vou configurar esse arquivo. Depois de definir esse arquivo, como você pode ver, ele mudou as cores da fonte. Agora está ficando preto e vermelho, e agora eu quero definir uma borda abaixo do subtítulo Para isso, precisamos selecionar o subtítulo. Então Hemoti tem tag, o elemento pai, que é sabor Prove, então eu quero selecionar o elemento H dois. Oi dois, depois as bobinas, eu quero definir uma propriedade de borda inferior Botão de fronteira. E vou passar dois pixels, dois pixels, borda sólida e, para cor, vou usar a cor atual. Vou usar o local de cores atual. E eu vou configurar esse arquivo. Depois de definir este arquivo, como você pode ver, se notar que a cor da nossa borda é vermelha. Isso é possível porque em nosso elemento pai, ela usa a propriedade de cor, e dizemos cor vermelha E agora, se você quiser alterar a cor, cor do texto e também a cor da borda, precisará mudar uma vez. Suponha que eu queira aplicar a cor verde. Verde. Alterou esse arquivo, como você pode ver, como você pode ver, ele mudou a cor da fonte. Também mudou a cor da borda. Da mesma forma, se você quiser aplicar borda de elemento parental de cor verde, você também pode usar essa cor atual Vu Então, vou copiar esse Valu e substituir o preto pela cor atual E eu vou configurar esse arquivo. Urasep este arquivo, você pode ver o resultado. E se você quiser aplicar a cor atual a essa etiqueta de gato, sim, você pode. Deixe-me te mostrar. Então, o Hemo select tem tag, sabor, então eu quero selecionar o humor de leitura desta classe Então eu copio o nome da classe e o modo de leitura de pontos do tipo Hem. Então, dentro do Caris está o Hemo para usar uma propriedade chamada background E eu quero passar a cor atual. Depois de definir esse arquivo, como você pode ver, nossa cor de fundo do tipo âncora fica roxa porque, por padrão, vem com a cor roxa Se eu comentar esta linha e definir esse arquivo novamente, como você pode ver, aqui você pode notar que a cor do nosso texto é roxa. É por isso que dizia cor de fundo roxa. Agora, há um problema com a cor atual. Se eu tentar mudar a cor da fonte, deixe-me mostrar para você. Então, vou usar a propriedade de cor, cor e vou aplicar vermelho. E então eu vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Agora você percebe que, com a cor da fonte, ela mudou a cor do plano de fundo. Agora, tanto a cor da fonte quanto a cor do plano de fundo ficam vermelhas. É por isso que nossa fonte não está visível nessa seção. Mas o que? Se eu fizer o contrário, se eu disser colorido, cor atual, então eu quero mudar o vermelho com a cor atual. E eu vou mudar a cor de fundo com a cor vermelha. Em seguida, defina o arquivo. Como você pode septar o arquivo, agora nosso texto está visível Agora você pode ver que a cor da nossa fonte é verde porque seu elemento pai, cor da fonte é verde e a cor de fundo é vermelha. Portanto, é preciso lembrar que não é uma boa prática usar a cor atual com a propriedade de fundo. Você pode usá-lo somente com a propriedade de cor. Caso contrário, você pode usá-lo com bordas, etc. Então, isso é tudo para este tutorial. 127. Tutorial de elemento de pseudo 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 128. CSS! Tutorial importante de hack: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial de CSS reel date. E neste tutorial, aprenderemos sobre um hack , conhecido como hack importante Se você quiser entender o rótulo de , antes prioridade do CSS , antes de entender o rótulo de prioridade do CS, primeiro você precisa saber como podemos implementar o CSS em nossa página HTML Podemos usar a tag Name para criar um seletor de CSS. Podemos usar pauptag, tag de cabeçalho, tag de corpo, qualquer Dessa forma, podemos criar o seletor e estilizar o elemento Também podemos pegar o nome da classe e estilizar o elemento. Então, podemos usar o nome do ID e também podemos direcionar o elemento. E o último método é o estilo interior. Quero dizer que podemos usar atributo de estilo em nossas tags de estimativa e, em seguida, podemos estilizar o elemento, e todo o método vem com um rótulo de prioridade diferente. O CSS sempre fornece um método de estilo interno de primeira prioridade. Em seguida, ele fornece o ID prioritário, depois o nome da classe e, por fim, fornece o nome da tag prioritária. Suponha que, em um elemento de estimativa, usemos todos os métodos de segmentação Como você pode ver, aqui use a mesma propriedade, mas o valor é diferente Nesse caso, o CS fornecerá um método prioritário de estilo interno É por isso que ele vai dar cor laranja à cor da fonte. Deixe-me esclarecer o conceito com mais detalhes. Como você pode ver neste exemplo, temos uma tag de parágrafo, e aqui atribuímos um nome de classe primeiro, e aqui atribuímos o ID em segundo lugar. Neste parágrafo, esse é apenas um texto aleatório. Isso é só um teste. Em nossa página CSS, se eu selecionar esse parágrafo usando o nome da tag, P, e definir a cor vermelha , esse parágrafo ficará vermelho. Mas se eu selecionar esse mesmo elemento usando primeiro o nome da classe e, seguida, torná-lo azul em seguida, torná-lo azul, nesse caso, esse parágrafo ficará azul. Da mesma forma, se você usar o nome do ID e torná-lo verde , ele ficará verde. Mas se você usar o método de estilo embutido , o atributo de estilo e depois pintá-lo de marrom, ao mesmo tempo, isso tornará o texto com uma cor Portanto, o CS dará prioridade ao método de estilo embutido prioridade ao método de estilo embutido Então é assim que o rótulo prioritário do CS funciona. Mas agora eu quero quebrar esse rótulo de prioridade. Como você pode ver, ao mesmo tempo, aqui usamos um método de seleção diferente para selecionar este parágrafo. Mas ele prioriza o método de estilo embutido. Ao mesmo tempo, usamos um total de quatro métodos diferentes, mas desta vez, quero dar prioridade à cor azul, esse nome de classe. Para isso, podemos usar essa bruxa. Podemos usar bruxa importante, sinal de exclamação e, em seguida, queremos digitar Se eu quebrar o rótulo de prioridade e tornar isso importante, nesse caso, ele aplicará a cor azul a esse texto. Agora, ele fornecerá a primeira prioridade a esse método de seleção. Isso não é um truque. É uma técnica em que podemos hackear qualquer propriedade CSS Então, vamos começar a prática e ver como podemos usá-la na prática. Como você pode ver lado a lado, abro o editor de código de estúdio do meu usuário e meu navegador usando a extensão Live Server e já criei um documento ML chamado index dot HTML. Então, como você pode ver em nossa tag body, temos uma tag de cabeçalho e, nessa tag, digitamos hello world. E aqui você pode ver nesta tag, atribuímos o nome da classe. Primeiro, também atribuímos um ID, segundo. Além disso, selecionamos essa tag H one em nossa seção de estilo usando o nome da tag H one. E agora vou mudar a cor da fonte. Então, aqui vou usar a propriedade de cor. Color ray, e eu vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. E agora vou selecionar o elemento usando o nome da classe. Então, aqui, eu vou digitar primeiro o ponto, lá nas cores, eu vou usar a propriedade de cor. Cor, e desta vez, vou usar a cor azul. Azul. Se eu definir esse arquivo, você poderá ver o resultado. Agora nosso texto se transforma em azul. Como você pode ver, os dois seletores selecionam o elemento H um Primeiro, para usar o nome da tag, eles agora usam o nome da classe, mas isso dá prioridade ao nome da classe. Em seguida, vou usar o ID. Então HemotyphTag, segundo. Segundo, é que o Carles, vou usar a propriedade de cor. Cor. E desta vez, vou usar a cor verde. Verde. Se eu definir esse arquivo, agora você pode ver que desta vez ele dá prioridade ao seletor de ID Não importa o que aconteça, se eu mudar o pronto-socorro, vou copiar esta seção. Desculpe, vou recortar esta seção e colá-la antes do nome da classe e definir esse arquivo. Além disso, ele retorna a cor verde. Como eu disse, desta vez ele dá prioridade ao nosso seletor de ID E agora vou usar o método de estilo Inland. Então, aqui, vou usar estilo de atributo de estilo e vou usar a propriedade de cor, cor. E aqui, vou usar a cor laranja. Laranja. E eu vou submeter esse arquivo Depois de submeter esse arquivo, agora você pode ver ele prioriza o método de estilo Inland Mas agora, como podemos usar esse truque importante? Suponha que eu queira dar prioridade à cor azul. Eu quero dizer o seletor de clubes. Para tornar isso importante, basta ela digitar o sinal de exclusão do espaço importante Se eu definir esse arquivo, agora você pode ver que desta vez será importante o seletor de ID Da mesma forma, se você quiser dar prioridade à cor vermelha, eu quero dizer o seletor de elementos, para digitar a palavra-chave importante no vil Se eu definir esse arquivo, você poderá ver o resultado. E lembre-se, não é obrigatório que você possa usar esse hack apenas com a propriedade color Você pode usar esse truque importante com qualquer propriedade. Você pode usá-lo com tamanho de fonte, preenchimento, margem, qualquer coisa. Então, isso é tudo para este tutorial. Espero que agora esteja claro para você como podemos usar esse truque. truque importante. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 129. Tutorial de CSS3 @supports: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, aprenderemos um novo seletor, que está em suporte atualizado Agora, a questão é: o que isso basicamente faz? Basicamente, usamos esse seletor para detecção de recursos no navegador Quero dizer que uma nova propriedade CSS caso contrário, é um valor suportado pelo navegador. Suponha que tenhamos uma propriedade CSS chamada GED, display grid. Esse recurso CSS é compatível com Chrome, Firefox, Sapai, ge, etc Mas para saber qual navegador suportará essa propriedade e valor, precisamos usar o seletor de suporte Usando isso, podemos digitar CSS diferente para diferentes navegadores. Então, basicamente, nós o usamos para CSS baseado em condicionais. É por isso que às vezes chamamos isso de regra condicional. Agora vamos ver como podemos usá-lo em nosso CSS. Primeiro, você precisa digitar Adiate support. Então, dentro da resina redonda, você pode colocar sua condição. Suponha que possamos verificar a condição da grade de exibição. Então, agora a questão é o que ele vai fazer? Sempre que um usuário abre a página da web em seu navegador , esse suporte verifica essa condição. Esse navegador suporta a propriedade da grade de exibição ou não? Se ele suportar a condição , ele executará o CSS. Suponha que digitemos o suporte Addd e, em nossa condição, passemos pela grade de exibição Se o navegador suportar o valor da grade , podemos atribuir a grade de exibição do ID principal. Mas se o navegador não suportar essa grade de propriedades , podemos digitar CSS diferente para esse elemento. Além disso, também podemos definir condições opostas usando suporte, algo assim. Adicione suporte, não grade de dispersão. É principal se o navegador não suportar propriedades discordadas; nesse caso, podemos atribuir o bloco de exibição CSS Além disso, podemos usar o seletor com várias condições. Deixe-me te mostrar isso. Como você pode ver com o seletor de suporte, aqui costumávamos usar duas condições flocos ou exibir flocos de webkit Esse é o prefixo do navegador Chrome. Essas são duas condições diferentes. Se uma das condições for verdadeira, outra for falsa, ela executará o CSS. E se ambas as condições forem verdadeiras, ele também executará o CSS para verificar a condição múltipla, como usamos nosso operador, mas temos outro operador, que é operador. Então, como você pode ver entre a condição múltipla que usamos e o operador, se a condição não for verdadeira, ela não executará o CSS. Mas se usarmos o Okword se uma das condições for verdadeira, ele executará o CSS Então, se o navegador suportar grade e grade embutida , ele executará esse CSS Neste exemplo, como você pode ver, Ele costumava usar as duas condições, mas você pode usar uma condição múltipla ao mesmo tempo. Basta usar nossa palavra-chave, caso contrário, e uma palavra-chave entre elas. Então, vamos começar a prática e ver como podemos usar esse seletor, um suporte direto Então, como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando o Lifesaver Extension, e já criei um documento ML chamado index dot Então, primeiro, vou digitar Style tech. Estilo. E dentro dessa tag de estilo, vou usar o seletor de suporte Na mesma proporção, suportes flexíveis. Então, dentro do vestido redondo vou definir a condição. Eu vou dizer display, e vou usar flix display flix. Então, dentro do Cariss, vamos selecionar nossa etiqueta corporal Vamos selecionar a etiqueta corporal. O corpo é o calibracs. Vou usar a propriedade de fundo. Plano de fundo, e eu quero aplicar a cor laranja do fundo. Laranja. Se essa condição for verdadeira e esse navegador suportar a propriedade flex , ele mudará a cor de fundo Se eu definir esse arquivo, como você pode ver, agora, o fundo da cor do nosso corpo é laranja. Agora, deixe-me usar uma propriedade, que não é compatível com o navegador Chrome Então, por enquanto, vou remover flocos de disco e ela digitar tijolo de decoração de caixa, tijolo de decoração e vou usar a propriedade slice Fatia. Além disso, precisamos remover esse ponto e vírgula Não precisamos desse ponto e vírgula em nossa condição. Se eu definir esse arquivo, como você pode ver, agora ele não aplica a cor de fundo laranja porque essa propriedade e valor não são suportados pelo navegador Chrome. Para usá-lo, precisamos usar o prefixo webkit. Portanto, essa propriedade não é suportada pelo Google. Mas se eu usar suportes não curados , não aplique a cor laranja Se os navegadores não oferecerem suporte essa propriedade, ela será aplicada. Então, depois de definir esse arquivo, você pode ver o resultado. Agora você pode vê-lo aplicar a cor de fundo laranja ao corpo. Agora, vamos usar várias condições. Para isso, vou usar o operador. Então, por enquanto, vou remover esse tipo não curado e de hemo. Ou na camisa redonda, vou digitar display flex. Vou remover esse cólon. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver a cor de fundo ainda retornar laranja porque desta vez uma das condições é verdadeira. É por isso que ele retorna laranja. Se ambas as condições falharem , ela não aplicará a cor de fundo. Deixe-me te mostrar. Então, para que essa condição falhe, vou aplicar a mesma propriedade. Eu copio essa propriedade e substituo as falhas por ela. Em seguida, vou alterar o valor dessa propriedade. Agora vou aplicar o valor do clone. Clonar. Se eu definir esse arquivo, como você pode ver, agora as duas condições falham, é por isso que não aplicamos a cor de fundo laranja a esse corpo. Então é assim que o operador trabalha. Agora, deixe-me mostrar a você um operador. Desta vez, vou substituir A por e e vou substituir esse arquivo Depois de submeter esse arquivo, ainda assim, você pode ver que ele não aplica a cor de fundo laranja E agora vou tornar ambas as condições verdadeiras. Se ambas as condições falharem , não será aplicada a cor de fundo. Mas se eu fizer com que ambas as condições sejam verdadeiras, Sootide exibirá flocos Além disso, vou mudar essa condição, que é posição absoluta. E precisamos remover esse ponto e vírgula. Não precisamos colocar esse ponto e vírgula em nossa condição. Se eu definir esse arquivo, agora você pode ver que ele mudou a cor de fundo, porque se usarmos o operador, você precisará ter certeza de que ambas as condições são verdadeiras e, em seguida, aplicar a cor de fundo. Mas se uma das condições falhar , ela não aplicará essa cor de fundo. Então, se eu fizer com que uma das condições falhe, decoração da caixa quebre e compacte esse arquivo Como você pode ver, novamente, ele não aplica o CSS. Mas se eu usar nosso operador aqui e depois compactar esse arquivo, agora ele aplicará a cor laranja porque agora uma das condições é verdadeira. Então é assim que o suporte funciona. Espero que agora esteja claro para você como podemos usá-lo. 130. Placeholder CSS mostrado tutorial de curso pseudo-pseudo: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS. E neste tutorial, aprenderemos uma nova classe de postagem, que é mostrada em um soldado Eu sei que você já está familiarizado com o espaço reservado. Usamos espaço reservado em nossas tags de entrada. Só quero usar esse espaço reservado para atributo, então podemos digitar qualquer texto E esse texto funcionou como um rótulo. E sempre que tentamos digitar algo nesse campo de entrada, ele oculta o texto do rótulo. E se você quiser estilizar o espaço reservado relacionado , o CSS introduza uma nova classe posto, que é mostrada no espaço reservado E funciona apenas com o Total de duas tags, tag de entrada e tag de área de texto. Então, vamos começar a prática e ver como podemos usá-la. Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server, e já crio um documento HTML chamado index dot TML Como você pode ver em nossa tag body, temos uma tag from e, em vez disso, temos um total de quatro campos de entrada. Temos dois campos de entrada de texto, um campo de entrada de números e um campo de entrada de e-mail. Primeiro, precisamos fornecer o nome, depois o endereço, depois o número e, por fim, o e-mail. Eu já estilizo esse campo de entrada de acordo com minhas necessidades. E sempre que tento digitar algo nesse campo de entrada, suponha que adicionar um, como você pode ver, ele oculta o texto do rótulo. E agora eu quero mostrar a borda desse campo de entrada até digitar texto nesse campo de entrada. Quero dizer até que você remova o texto do rótulo. Para isso, precisamos usar espaço reservado mostrado no seletor de vidro poseido Então, aqui, vou digitar a entrada. Então eu vou usar óculos de poseido. E aqui vou digitar o espaço reservado mostrado. Então eu disse à turma, aqui, eu vou atribuir fronteira. Borda, eu quero uma borda sólida de C pixels. Com isso, nossa cor de borda é vermelha. Depois de definir esse arquivo, como você pode ver, ele aplica a cor da borda vermelha em nossos campos de entrada. E sempre que tento escrever algo nesse campo de entrada, ele remove a cor da borda. Ele removeu a borda. Deixe-me te mostrar. Suponha que se eu digitar olá, como você pode ver, ele removeu a cor da borda vermelha. Da mesma forma, se eu digitar palavra do segundo campo você também pode notar que ela removeu a cor da borda vermelha. Se nosso espaço reservado estiver ativo, somente aí poderemos aplicar essas propriedades porque aqui usamos essa classe Posido, espaço reservado mostrado E se eu remover o conteúdo desse campo de entrada, ele aplicará as propriedades mostradas no espaço reservado Então esse é o principal uso do espaço reservado mostrado na classe Posido E lembre-se de que o espaço reservado não funciona em todos os campos de entrada Se eu duplicar esta seção e alterar o tipo de entrada, tipo de entrada, data Eles definiram esse arquivo e, em seguida, vou alterar a data inteira do texto do espaço reservado E, em seguida, defina esse arquivo após definir esse arquivo, aqui você pode ver o campo de data. Mas você pode notar que ele não aplica as propriedades mostradas no espaço reservado D porque esse seletor de poseudoclas não funciona em data, hora, mês, semana, etc., e E se você quiser segmentar qualquer campo de entrada específico, sim, você pode. Suponha que você queira segmentar apenas o campo de entrada do tipo. Para isso, aqui você precisa usar a irmã quadrada. Em seguida, você define a resina quadrada aqui, você precisa fornecer o tipo Digite igual ao interior dos códigos duplos; caso contrário, códigos simples, você precisará fornecer o tipo de campo de entrada, que é texto. Se eu definir esse arquivo, aqui você pode ver o resultado. Desta vez, esse seletor de positoglass só funciona em Então é assim que acabou. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 131. Tutorial de cadeia de tipos de estilo de lista de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. Em nossos tutoriais anteriores, aprenderemos sobre estilo e já estamos familiarizados com sua propriedade de tipo de bloco E essa propriedade introduz um novo valor, string. Agora, vamos tentar entender o que é isso. Se falamos de lista não ordenada, como eu disse, temos um total de três valores, disco , quadrado e círculo, e fica assim Se usarmos o valor de digs , ele retornará um ponto sólido E se usarmos quadrado , ele retornará um quadrado sólido. E se você usar círculo , ele retornará um círculo vazio Agora, sem esses três valores, podemos passar o valor da string. Como você pode ver neste exemplo, aqui usamos uma forma. Não é uma imagem. É um símbolo de ML. Da mesma forma, podemos usar símbolos diferentes, algo assim. Além disso, podemos passar string como um tipo de estilo. No nosso caso, Uau. Agora, vamos começar a prática e ver como podemos usá-la. 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 estável, chamado index dot stem Em nossa etiqueta corporal, aqui você pode ver a lista de nodos, e temos um total de cinco itens nesta lista E agora eu quero estilizar essa lista nodal. Para isso, vou selecionar a tag UL. UL dentro da carruagem que vou usar, a propriedade é gravata Tipo de estilo, e aqui, vou usar o valor da string. Para usar esse valor de string, basta passar esse valor de string dentro da cotação. Então, dentro das aspas duplas, vou passar a demonstração. Depois de configurar esse arquivo, você pode ver no meu navegador que ele substitui todos os marcadores por essa demonstração de string Então é assim que podemos passar qualquer string aqui. Suponha que se eu fornecer espaço, hífen e definir esse arquivo, agora ele parecerá mais amargo Além disso, precisamos mudar a posição. Por padrão, é o oposto. Então, aqui vou usar uma propriedade que é posição de estilo, estilo, posição interna. Se eu salvar esse arquivo, você poderá ver o resultado. Agora, deixe-me mostrar como podemos usar símbolos aqui. Para usar os símbolos da tabela, precisamos pesquisá-los no Google. Então, basta pesquisar os símbolos STL. Muitos sites fornecem um símbolo SML, como três escolas, Toptal, etc. Então eu abro um deste site. Primeiro, vou abrir o Top tell. Então, como você pode ver, existem vários símbolos SML. Esses símbolos não estão disponíveis em nosso teclado. Se você rolar para baixo nesta página, poderá encontrar muitos símbolos. E agora vou usar um dos símbolos. Suponha que eu use Eu quero usar esse símbolo de nuvem. Para usar esse símbolo, basta selecionar o símbolo e pressionar Control C para copiar esse símbolo. E agora precisamos voltar ao nosso documento. E aqui, vou copiar essa demonstração com esse símbolo, Control V, essa nuvem, e vou configurar esse arquivo Depois de configurar esse arquivo, se eu abrir meu navegador, aqui você pode ver o resultado. Agora, substitua o tipo de lista pelo símbolo. A partir daqui, você pode usar qualquer símbolo. Suponha que, se você quiser usar esse símbolo de telefone, basta copiar esse símbolo e colá-lo aqui. Vou substituir o Cloud por esse símbolo e, em seguida, fornecer um espaço e definir esse arquivo. Depois de configurar esse arquivo, se eu mostrar meu navegador, agora você poderá ver a resina. Ele substitui o Cloud por esse símbolo de telefone. Neste site, você pode encontrar todos os tipos de símbolos. Suponha que, se você quiser usar o símbolo da moeda, basta clicar na moeda. E se você quiser usar símbolos MT, clique para ver o número dos símbolos matemáticos, o que você quiser usar. Da mesma forma, outros sites fornecem o mesmo tipo de símbolos. Então é assim que podemos usá-lo. Aqui também podemos passar a picada, podemos passar qualquer símbolo. Então, espero que agora esteja claro para você como podemos usar esse novo stream de vídeo. Então, obrigado por assistir a este vídeo. Fique ligado no próximo tutorial. 132. Tutorial de comportamento de rolagem de CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, você aprenderá uma nova propriedade relacionada ao CSS, que é o comportamento de rolagem. Primeiro, deixe-me mostrar um exemplo, o que podemos fazer usando o comportamento de rolagem? Como você pode ver, aqui eu abro uma página da web, e tínhamos a barra de rede e na nossa barra de rede havia um link de três pólos, um, dois e E aqui, neste exemplo, eu uso o método de vinculação interna Então, se eu clicar em um, ele será redirecionado para a Seção um Se eu clicar em três, ele me redirecionará para a Seção três Mas se você notar, você pode ver se eu clicar em qualquer item, nossa palavra de rolagem muda para a posição. Se eu clicar na Seção dois, você pode notar nossa palavra de rolagem caindo. Podemos criar essa transição scrollbt usando a propriedade de comportamento de rolagem Mas o que? Se não usarmos a propriedade de transição da palavra de rolagem. Se eu comentar essa propriedade, role a palavra comportamento, volte para minha página da web e acesse meu navegador. Se eu clicar na Seção um, como você pode ver, agora, você não sentirá nenhuma transição. Ele salta instantaneamente para esta seção. Se eu clicar na Seção três, agora você pode notar que nossa barra de rolagem não se move Você não consegue sentir nenhuma transição. É por isso que o comportamento do scroller é importante. Então, vamos estudar a prática e tentar entendê-la. Como você sabe, no SDML temos a tag Anca e, usando a tag Anca, podemos criar três tipos de links: link externo, link interno e outro é link de e-mail Sem isso, há muitos links que podemos criar usando a tag NCat, como link para download, link para telefone, então não vou falar sobre isso Nosso tópico principal é o comportamento de rolagem. Se você quiser usar o comportamento de rolagem, precisará usar tinta interna da página, e podemos usar o link interno da página em nosso documento. Caso contrário, podemos usá-lo em um elemento db. Aqui podemos usar overflow hidden, caso contrário, podemos usar a propriedade scroll para criar essa barra de rolagem Podemos usar o comportamento de rolagem quando temos dados de ana para rolar em nossa página. Se você quiser usar essa propriedade em seu documento, nesse caso, precisará usá-la dentro da tag TML E se você quiser usá-la em uma tag profunda, precisará selecionar essa tag dip e atribuir a propriedade de comportamento de rolagem E nessa propriedade, podemos passar um total de dois valores, Auto e Smooth Auto é o valor padrão dessa propriedade. Isso não vai mudar nada. Mas se você usar um valor suave , isso mudará seu comportamento de rolagem 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 Lip e já crio um documento ETML chamado index dot html Então, aqui você pode ver um layout básico. Se eu mostrar minha estrutura de estimativa, aqui você pode ver que temos uma barra de neb Esta é a nossa área da barra n, e temos que preencher o link de três itens da rede Por enquanto, não fornecemos nenhum link em nossa tag âncora. Então, temos seções. Esta é a Seção 1. Esta é a Seção 2. E esta seção é feita com tag de seção, e nesta tag de seção, temos H dois tag, cabeçalho dois. E, como você pode ver em cada seção, atribuímos uma TI. Isso é para a Seção um, ID um, ID dois, ID três. Agora, como você pode ver, temos área de rolagem suficiente em nossa página. Agora vou usar links internos. Se eu rolar um pouco para baixo nesta página, como você pode ver, nossa barra Nb gruda no espaço Aqui você pode ver aqui que usamos a posição da barra N, zero superior. É por isso que se mantém em seu próprio lugar. Agora vou usar links internos de páginas. Primeiro, vou vincular a Seção um à tag ancha número um Para vincular isso, vou usar seu nome de identificação um. Então, para vincular esse ID, HTG one. Esse é um método interno de escrita à tinta da página. Em seguida, vou vincular a Seção dois, hashtag, dois. Por fim, vou vincular a tag três. E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu clicar no Link número dois, como você pode ver, ele redireciona para a Seção Da mesma forma, se eu clicar no link número três, ele redirecionará para a Seção três Mas o problema é que, se você notar esse comportamento de rolagem, se eu clicar no número um, instantaneamente ele pulará para a seção número um, mas eu não quero. Eu quero uma transição suave nele. Portanto, para resolver o problema, podemos usar a propriedade de comportamento de rolagem. Então, aqui, vou criar um seletor em nossa seção de estilo Antes da tag body, vou selecionar a tag TML, o SML inteiro Então, dentro da resina de Cali, vou usar a propriedade, comportamento de rolagem E eu vou usar o valor suave. Depois de definir este arquivo, e se eu clicar no número três, agora você pode ver um efeito de suavização Da mesma forma, se eu clicar no número um, você pode notar que ele redireciona para o número um, mas ele rola a página Então é isso que podemos criar usando o efeito de rolagem. Se você quiser atribuí-la em sua página de função, nesse caso, você precisa selecionar a tag TML Caso contrário, você pode usá-lo em um elemento profundo. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo State até mesmo para o próximo tutorial. 133. Tutorial de Button Pseudo Element Seletor de arquivos CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, você aprenderá um novo elemento posto , conhecido como botão seletor de cinco Aqui você pode ver a lista de todos os elementos do posto, e já abordamos esse elemento posito em nossos tutoriais anteriores Nesse lead, ele tinha um novo elemento positivo, que é o botão seletor de cinco Agora vamos tentar entender o que podemos fazer com o botão seletor de arquivos Em HTML, temos uma tag conhecida como in e essa tag de entrada vem com diferentes tipos de vados, como texto, e-mail, envio, etc Da mesma forma, tem um valor. Cujo tipo é arquivo do tipo de entrada de arquivo. Depois de usar o tipo de arquivo em nossa tag de entrada, podemos ver esse tipo de botão em nosso navegador. Escolha Arquivo. Depois de clicar nesse botão, podemos escolher qualquer tipo de arquivo. Eu sei que você já está familiarizado com isso. Mas se você perceber que pode ver, sempre vem com a cor cinza. Por outro lado, podemos estilizar botões, podemos estilizar qualquer outro elemento. Mas até agora, não podemos mudar a cor desse corante de lima Não podemos atribuir nenhuma cor a esse botão. E se quisermos fazer isso, precisamos usar a tela Java do Hellblog, e é um processo muito simples Eu quero mudar a cor desse botão de entrada, algo assim. E isso só é possível por meio do botão seletor de arquivos Poidoglass Vamos começar a prática e ver como podemos usá-la. 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 de servidor ativa, e já crio um documento HTML chamado index dot HTML Em primeiro lugar, vou criar a estrutura HTML. Então, vou usar a etiqueta frontal. E dentro da etiqueta frontal, primeiro, vou criar uma etiqueta, etiqueta, e aqui vou digitar um texto. Para este exemplo, eu não preciso desses quatro atributos. Vou removê-lo e, dentro desse rótulo, vou digitar upload cinco. Depois disso, vou usar a tag de entrada. Entrada. Entrada, Ti, devo definir o TIF. Além disso, vou atribuir um ID a essa tag de entrada. ID igual a upluot. Então eu vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado no meu navegador. Então eu fiz uma parte muito estimada. Agora, estilizamos a tag de entrada, essa. Então, dentro da tag principal, vou digitar tag de estilo. Estilo. Podemos direcioná-lo usando nosso upload de nome de ID. Além disso, podemos direcioná-lo usando seu tipo. Arquivo. Então, vou selecioná-lo usando sua gravata. Então, aqui, eu vou digitar. Primeiro, vou digitar a entrada do nome da tag. Em seguida, dentro do quadrado ss, fornecerei a gravata, que tipo de entrada vou selecionar. Então, aqui, digite igual ao arquivo. E agora eu quero mudar a cor de fundo desse tipo de arquivo de entrada. Mas eu não posso fazer isso diretamente. Primeiro, precisamos usar o seletor de arquivos PosidoGlass, precisamos vincular à semicor Em seguida, precisamos passar o nome do seletor de posito Arquivo, seletor de hífen, botão de hífen É assim que podemos usar esse seletor. Então, primeiro, vou mudar a cor do plano de fundo. Então, digite a cor do plano de fundo e eu vou defini-la em vermelho. Com isso, vou mudar a cor da borda. Limitado. Eu quero uma borda sólida de dois pixels e a cor da borda é verde. Agora vamos configurar o arquivo e ver se ele funciona corretamente ou não. Depois de definir esse arquivo, como você pode ver, ele funcionou corretamente. Agora adicione um pouco de acolchoamento. Dez Bigel de cada direção. Além disso, vou mudar a cor do texto. Cor. Por quê? Depois deste arquivo, você pode ver o resultado Agora você pode ter uma lata. O que? Se eu remoto esse seletor, se eu remoto o PostoGlass, deixe-me Então, se eu remover o PositoGlass e apenas selecionar o arquivo do tipo de entrada e isso neste arquivo, você poderá ver Não funcionou corretamente. Agora, ele adiciona a cor do diagrama a toda a seção. É por isso que precisamos usar esse Positroseletor, botão seletor de arquivos Se eu salvá-lo novamente, você poderá ver o resultado. Agora, se eu clicar nesse botão, podemos escolher qualquer tipo de arquivo. Suponha que eu selecione essa imagem de aterrissagem. Você pode ver o nome dessa imagem, ponto de aterrissagem JPG. Além disso, você também pode usar o Hobart PoidoClass com isso. Então, vou duplicar esta seção e, desta vez, vou usar o seletor Hobart . Colon Hobart Desta vez, vou mudar somente a cor do plano de fundo. Vou usar a versão mais escura dessa cor vermelha, algo parecido E eu vou configurar esse arquivo. Depois de configurar esse arquivo, se eu colocar minhas cartas neste botão, você poderá ver o resultado Mudou sua cor de fundo. Então, isso é tudo para este tutorial. Espero que agora esteja claro para você como podemos estilizar nossos botões seletores de arquivos Então, obrigado por assistir a este vídeo, fique ligado no próximo tutorial 134. Tutorial de filtro de fundo CSS: Olá, pessoal, é bom ver vocês. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. E neste tutorial, vamos aprender um filtro conhecido como filtro de pano de fundo Suponha que tenhamos uma imagem de fundo em nossa tag de corpo HTML. Caso contrário, podemos supor que enviamos a imagem de fundo para uma tag profunda. Agora, nesse elemento profundo, temos outro elemento profundo. Além disso, essa profundidade vem com cor de fundo, borda, etc Agora, eu, fisicamente, não quero fornecer nenhuma cor de fundo para esse leen profundo Algo parecido. É transparente. Caso contrário, posso ajustá-lo com baixa opacidade. Mas agora eu quero atribuir um filtro ao dip ignit interno e, para tornar isso possível, CSS introduziu o filtro , conhecido como filtro Brop Usando esse filtro, podemos atribuir qualquer efeito à seção interna do elemento profundo. Mas não adicionamos nenhum efeito à nossa imagem de fundo do elemento profundo principal. Não se preocupe, vamos fazer isso de forma prática. Além disso, essa propriedade filtrada de fundo vem com algum peso predefinido. Deixe-me te mostrar. Então, esses são os materiais que podemos usar com o bagrap filtrado. Todos esses são efeitos: desfoque, brilho, contraste, sombra projetada, escala de cinza, rotação de matiz, inversão, opacidade, spa, saturação opacidade, spa, Agora vamos começar a prática e aplicar todo o filtro um por um. 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 Live Server, e já criei um documento de estimativa chamado tabela de pontos de índice. Então, como você pode ver em nosso documento de estimativa, está na tag body, temos um contêiner Da De ID e, em nossa seção de estilo, eu estilizo esse Em profundo. Aqui está com 600 pixels, altura, 800 pixels. Além disso, você disse borda, 500 pixels, borda sólida. Em seguida, adicionamos uma imagem de fundo a este continente, URL de fundo, ponto natural, JPG. Agora, dentro desse elemento profundo contínuo, vou criar outra dívida, algum tipo profunda, e vou atribuir uma ID a esse desenvolvimento, ID igual a Ian. Em seguida, vou estilizar esse desenvolvimento em nossa seção de estilo. Primeiro, vou selecionar esse debilmin usando seu nome de ID, inner Depois, os cálices, primeiro, vou plantar maconha. Weed, aqui vou dizer 400 pixels. Na próxima propriedade, vou usar altura, altura, vou definir 250 pixels. Além disso, vou dizer que é a cor de fundo. Plano de fundo, e eu quero fundo de cor branca. Então, eu vou usar o Hix HH. Na próxima propriedade, vou usar o raio da borda, raio da borda e vou definir o raio da borda Além disso, precisamos atribuir borda com borda com, eu quero borda sólida de dois pixels, sólida E eu quero dizer que a cor da borda é branca. Hashtag KSH. E eu vou configurar esse arquivo. Depois de definir esse arquivo, é isso que ele cria. Agora, quero remover a cor de fundo dessa placa inundada Então, vou comentar essa linha e vou configurar esse arquivo. Depois de definir esse arquivo. Opa. Ele, precisamos usar apenas propriedades fronteiriças, não com propriedades. Fronteira, somente fronteira. Se eu definir esse arquivo, é isso que ele cria. Agora você pode ver que temos um elemento profundo transparente com borda branca sólida a pixel. E agora precisamos mover esse elemento profundo interno vertical e horizontalmente E para alinhá-lo, vou usar um display de propriedades flex Então, em nosso contêiner principal, vou digitar que vou amarrar nome da propriedade display flake E alinhe-o, alinhe os itens no centro, no centro e justifique que contenha Depois de definir esse arquivo, você pode ver o resultado. Vamos aumentar a borda interna para torná-la mais fina Então, para passar, cinco pixels. Até configurar esse arquivo, agora ele está mais visível. E agora vou aplicar o filtro de fundo em nosso elemento interno profundo Assim, podemos ver o efeito do filtro de imagem por meio desse elemento profundo. Agora é hora de usar a propriedade backdrop fitter, sum type, backdrop, backdrop filter E primeiro, e o primeiro vídeo, vou usar desfocado É a versão favorita de Pin. Aqui eu digo desfoque em pixel. Depois de definir esse arquivo, agora você pode ver o efeito do sangue através do elemento interno profundo. Agora você pode ver o efeito do sangue através do elemento de imersão interno E se você quiser aumentar a versão sanguínea, basta aumentar o valor. Se eu fizer um desfoque de seis pixels e depois definir esse arquivo, agora você notará que isso torna essa parte mais desfocada Além disso, ao mesmo tempo, você pode adicionar, você pode adicionar cor de fundo a esse elemento interno profundo. Deixe-me te mostrar. Suponha que eu use essa cor de fundo da propriedade e aqui vou usar o valor RGV Vamos usar o valor Alpha para transparência. Então digite RG, BA, dentro do vestido redondo eu vou digitar cor branca, 255 e 255 E para Alpha Val, vou pegar 0,2. Se eu definir esse arquivo, você poderá ver o resultado. E se eu aumentar o valor da transparência, se eu torná-la 0,5 semitransparente e depois definir a amostra, agora você poderá ver mais brancura nesse efeito sanguíneo E lembre-se de que não definimos nenhum efeito na imagem de fundo. Aqui usamos o efeito em nossa seção interna de elementos profundos. E se eu usar qualquer conteúdo nesse elemento inatp, isso não afetará o conteúdo. Deixe-me te mostrar. Então, dentro desse elemento innatp, vou adicionar um título ao “motie hello”. Por quê? E eu vou dizer alinhamento centro de alinhamento de texto, centro de alinhamento de texto E eu vou configurar esse arquivo. Depois de definir esse arquivo, você verá o resultado. Agora você pode ver que não será quantificado efetivamente que está dentro da eliminação inativa Agora, vamos falar sobre a próxima surpresa. Então, primeiro, vou comentar essa propriedade de cor de fundo. E então vou me aprofundar nesta linha e comentar a linha anterior, e vou substituir o desfoque pelo brilho Nas corridas longas, ele precisará ultrapassar o valor em porcentagem. Suponha que se eu usar 60% e isso neste arquivo, agora você pode ver que isso reduz o brilho dessa seção interna. E se eu fizer 10% e isso neste arquivo, agora você pode notar mais queda de brilho nessa parte. E se eu passar 100%, esse é o valor diferido Agora está preciso. Mas se eu quiser aumentar o brilho, podemos passar mais de 100% do valor. Suponha que se eu passar um 50% e isso para cima neste arquivo, agora você pode ver que ele aumenta o brilho dessa seção interna. Se eu fizer 200, agora está mais claro para você. Então é assim que podemos usar o brilho desse alimentador. Agora vamos passar para o próximo filtro, que é o contraste. Então, vou usar essa linha e comentar nossa linha anterior e rasgar esse brilho com contraste Então você disse que o arredondador diz, eu vou passar dos 40% Então, se eu estiver satisfeito, você poderá ver o resultado. Neste caso, também é necessário passar a unidade percentual d. Agora você pode ver o efeito do cozimento nesta parte. E se eu chegar a 100%, como no brilho, você pode ver a imagem exata. Agora, se eu quiser aumentar o contraste, suponha algo em 50% e depois definir esse arquivo, você pode ver o resultado. Basicamente, o contraste afetará as cores. Isso pode reduzir a quantidade de cor. Também pode aumentar a quantidade de cor. Se eu fizer 200%, 200% e depois definir esse arquivo, você poderá ver mais contraste na seção Agora você pode notar nessa parte que as sombras estão muito mais visíveis Além disso, a cor verde é destacada. Agora, vamos falar sobre o próximo filtro, que é u rotate. Vou duplicar esta seção e comentar a linha anterior E eu vou voltar para filtrar H rotate. Então eu defino a rodada pra está aqui unidade passa aqui unidade passa unidade passa unidade de grau. Então, aqui, eu vou passar o grau de 120 dg. E se eu definir esse arquivo, você poderá ver o resultado. Se você trabalha no Photoshop, essa opção é bastante familiar para você Se você alterar o valor do grau, isso mudará a cor da imagem. Suponha que se eu fizer 150 graus e depois definir esse arquivo, você possa ver cores diferentes no modo de hibernação. E se eu fizer apenas 90 graus, você poderá ver resultados diferentes. E podemos aumentar o valor em até 360 graus. Se eu passar em 360 graus e depois definir esse arquivo, é isso que ele tem. Agora ele parece exatamente o mesmo. E se eu fizer um grau um grau e vamos configurar o arquivo, agora você pode ver que não há diferença. Mas se eu aumentar um pouco o valor, algo em 40 graus e isso neste arquivo, agora você pode notar as mudanças. Agora, vamos falar sobre o filtro. Então, vou duplicar esta seção e comentar a anterior E desta vez, vou usar invert Vale tie invert. Esse valor fornece exatamente o mesmo efeito negativo limpo. Então, aqui, você precisa usar a porcentagem dessa unidade. Então, se eu chegar a 60% e depois definir esse arquivo, é isso. Agora parece um flam negativo. E se eu chegar 100% e depois definir esse arquivo, agora ele parece completamente negativo. Agora, vamos falar sobre o próximo filtro que é o SIPEA. Então, para duplicar essa linha e comentar a linha anterior e substituir o invertido pelo E também ocupa uma porcentagem dessa unidade. Então, por enquanto, vou passar 50% e vou definir esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Basicamente, ele pode fornecer um pouco de efeito vintage. Se eu fizer 100% e definir esse arquivo, você poderá ver o resultado. Alguns filmes e vídeos populares usam esse filtro. Agora vamos falar sobre o próximo filtro, que está saturado. Então, eu dupliquei essa linha e comento a anterior e substituo a RCP por saturada Saturar 100%. Se eu definir esse lado, você poderá ver a imagem padrão. Se você reduzir o valor e ganhar 10% , a cor será removida. Agora vai parecer preto e branco, algo assim. E se você quiser deixá-lo totalmente em preto e branco, basta passar por uma pessoa, caso contrário 0%. Isso fará com que toda a imagem fique em preto e branco. Você pode experimentá-lo para obter resultados diferentes. Além disso, você pode usar vários alimentadores ao mesmo tempo, ele mostra a ele Então, vou duplicar essa linha e comentar a anterior Desta vez, com isso, eu quero usar inverter. Então, primeiro, vou usar valor de desfoque, desfoque e vou usar matriz de dois pixels E então, eu vou usar inverter B. Inverter. Inverta o valor, vou usar 100%. Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode notar com o pneu também que você pode ver o filtro invertido. Assim, você pode usar vários filtros ao mesmo tempo, sempre que quiser. Agora, para tornar esse efeito mais impactante, vou usar o efeito Hover Então, primeiro, vou selecionar a tag dip interna, has tag, inner Então Colon, vou usar Positoselector Hober e depois inserir o Caira diz, vou usar esse sorteio Copie esta seção e eu vou colá-la aqui. Além disso, eu comento essa opção e vou configurar esse arquivo. Então, se eu passar o cursor nesta seção, você pode ver o efeito. Além disso, vamos adicionar algumas transições para torná-la mais animada. Então, aqui, vou usar uma propriedade chamada transição. Transição. E eu quero adicionar um filtro de fundo específico de efeito de transição Então eu estou amarrado, solte o filtro. E para o tempo de transição, vou usar 0,3 segundo. E eu vou configurar esse arquivo. E se eu passar o cursor sobre esta imagem, você pode ver o resultado. E se eu aumentar o tempo de transição, Sabin, e colocar esse arquivo e passar o cursor sobre esse elemento, você pode ver o efeito Agora você pode ver o belo efeito de transição. Então, isso é tudo para este tutorial. Espero que agora esteja claro para você como podemos usar o filtro de fundo Então, obrigado por assistir a este vídeo, Duned para o próximo tutorial 135. CSS3 é() Pseudo Class aprimorado: É 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 cabeçalho, 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 sabor um 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. 136. Tutorial de orientação de texto CSS: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado ao CSS. E neste tutorial, aprenderemos a orientação de texto CSS. A orientação do texto da chamada de propriedade depende de outra propriedade, e já abordamos essa propriedade em nosso tutorial anterior, que é o modo de escrita. Até usar a propriedade do modo de escrita, você não pode usar, você não pode usar a propriedade de orientação de texto. Suponha que temos um elemento profundo e, em vez desse elemento profundo, temos um texto. Agora eu quero girar esse elemento em 90 graus, algo assim Na propriedade do modo de escrita, temos dois valores t, URL vertical e Ea vertical Se usarmos isso como valor, poderemos girar qualquer texto Usando a propriedade do modo de escrita, podemos girar esse texto assim, mas eu não quero esse tipo de texto Eu quero esse resultado. Neste exemplo, como você pode ver, digitamos o texto na vertical. E se você quiser esse tipo de texto hábil para isso, CSS introduz a orientação do texto Além disso, essa propriedade vem com algum valor predefinido. Vamos ver. É um total de quatro valores, misto na vertical, lateral, lateral direita, e misto é o Então, vamos começar a prática e ver como podemos usá-la. Finalmente, 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 um documento est chamado index dot TML Na etiqueta corporal, temos um anel chamado sabor. E também dentro dessa tag corporal, tag corporal, temos um título e um parágrafo. Em seguida, estilizo essa etiqueta de molho usando seu sabor. Primeiro, atribuímos com 550 pixels. Em seguida, atribuímos uma borda, uma borda de cor preta sólida. Também dizemos para. Fonte aérea de 70 pixels, e aí está ela preenchendo dez Agora vou girar toda essa seção profunda em 90 graus Para isso, vou usar uma propriedade chamada writing move aqui vou usar uma vari chamada RL vertical, esta, RL significa da direita para Agora, se eu definir esse arquivo, como você pode ver, ele gira nosso texto Se você alterar a orientação, basta trocar o valor AR dois RL, RL Se eu passar por R e ficar satisfeito, dá para ver o resultado. Agora, a orientação começa da esquerda para a direita. Mas, para este exemplo, eu gostaria de usar RL. E agora vou usar outra propriedade chamada texto, orientação de texto. Em primeiro lugar, vou usar esse valor na vertical. Depois de satisfeito, você pode ver o resultado. Agora você pode ver nosso texto se tornar título vertical, parágrafo ou tipo de texto em Se eu usar outro vídeo chamado mixado e esse arquivo, agora você pode ver que ele voltou ao normal. Se você não quiser nenhuma alteração, orientação do texto terá ondas mistas. Na maioria das vezes, usamos esse efeito quando precisamos digitar verticalmente. Caso contrário, se você tiver um site onde precise colocar o mended em qualquer idioma chinês, precisará desses efeitos Caso contrário, o chinês, o mandarim sempre digita de cima para baixo. É por isso que precisamos de vertical, vertical, e os outros dois valores restantes, lateralmente e lateralmente à direita, não são suportados por nenhum navegador. Não é suportado pela Mozilla, não é suportado pelo Google, Opera ou qualquer navegador Isso é tudo para este tutorial. Espero que esteja claro para você em voz alta. Como você pode usar a orientação de texto? 137. Foco em CSS no Tutorial de Pseudo Class: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS e, neste tutorial, vamos aprender uma nova classe posero, que se concentra nela Agora, deixe-me mostrar como podemos usar essa nova classe. Como você pode ver neste exemplo, temos um elemento profundo e, dentro desse elemento profundo, temos quatro campos, nome, borda, Zender e um botão E agora eu quero mudar a cor de fundo desse elemento profundo quando eu me concentro em qualquer campo de entrada. Se eu focar no nome, caso contrário, no Zener ou em um botão, isso mudará a cor de fundo desse elemento profundo. Algo parecido. Basicamente, focamos o elemento filho e estilizamos o elemento pai. Isso não era possível antes, mas agora é possível porque agora temos o novo foco de vidro interno e precisamos usar essa classe Posido em nosso elemento profundo principal Pode ser parentp, caso contrário, qualquer elemento pai. Se focalizarmos qualquer campo de entrada que esteja dentro desse elemento pai , isso afetará o elemento parente . Agora vamos começar a prática e ver como podemos usar o foco interno em nossos projetos. Como você pode ver lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão Live Server e já crio um documento ML chamado index dot t. Como você pode ver nesta página TL, já criamos um formulário de login. Neste formulário de login, temos um total de quatro campos de entrada, como nome de usuário inserido, senha inserida, botão de login e botão Cancelar. Então, como eu disse, vamos usar o foco dentro do vidro posterior. Por enquanto, você pode ver como fica a partir da cor de fundo branca. Quando eu me concentro em qualquer campo de entrada, como você pode ver, não mudo a cor do fundo. Agora eu quero mudar a cor de fundo do emate principal, o elemento com o foco superior Depois de focar, qualquer campo de entrada está neste formulário. Para isso, precisamos usar um PositoGlass. Então, aqui, vou digitar a partir de dois pontos e nosso nome PositoGlass é focus weening focus Então, dentro do Carrass, vou usar o Bagnoroperty Antecedentes. E aqui, vou enviar a cor de fundo amarela. Vou configurar esse arquivo. Depois de definir esse le, se eu clicar em qualquer campo de entrada, como você pode ver, a cor de fundo desse formulário será alterada . Porque, como eu disse, usando esse seletor PosidoGas, podemos selecionar o elemento dB de fundo Podemos selecionar o elemento principal profundo e, se eu clicar fora desse formulário, ele volta para a cor branca. É assim que esses PosiTroGLS funcionam. Ele pode selecionar o elemento profundo principal usando o elemento De filho. Se você clicar em qualquer botão ou em qualquer campo de entrada, a cor ainda será alterada. Espero que agora esteja claro para você, o que podemos fazer com esse seletor Pozioglas Obrigado por assistir a este vídeo, fique ligado nos próximos dois também. 138. Tutorial de tabela de exibição de CSS, parte 1: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado a CSS. E neste tutorial, vamos aprender essa propriedade da tabela. Já aprendemos sobre essa propriedade em nosso tutorial de prefácio Aprendemos o flex, a grade, esse o bloco em linha, etc. Mas eles vêm com outro d que é uma tabela. Em nossos tutoriais anteriores, já aprendemos sobre propriedades de exibição como bloco em linha, bloco interno, últimos filmes ativos, areia, filme interno, areia interna, areia interna, etc. Mas neste tutorial, eu apenas tento abordar isso. Eles venderão, crescerão, etc. Agora, vamos tentar entender o que é tabela e como elas funcionarão com a propriedade de exibição. Às vezes, precisamos criar uma tabela em nossas páginas da web, algo assim. Como você pode ver nesta tabela, temos que desenhar três linhas e duas colunas. Podemos usar essa tabela de várias maneiras. Podemos mostrar resultados do Stuben, detalhes da conta, etc Para isso, o STML fornece uma tag especial. É conhecido como tag de tabela, algo parecido. Dentro da tag da tabela, para criar a linha da tabela, precisamos digitar TN e, para fornecer a coluna, precisamos usar TD De acordo com esse exemplo, criamos um total de três linhas da tabela. Além disso, temos um total de dois pontos em cada linha. Mas agora o problema é que eu não quero usar nenhuma tag de tabela para uma tabela. Eu só quero usar apenas as tags profundas, algo assim. Quero usar a tag Di para criar as vendas da tabela, linha de TV e a estrutura de guias. Como você pode ver neste exemplo, Herald não usa nenhuma tag de tabela, apenas usa uma tag profunda para criar a mesma estrutura Nossa primeira etiqueta, que está na cor preta, vai funcionar como uma etiqueta de tabela. Então, que está na cor le, funcionará como uma linha da tabela e a verde funcionará como uma coluna da tabela. Mas não é muito fácil criar uma tabela como essa. Para resolver o problema, CSS introduz uma propriedade especial, que é a tabela de exibição. E precisamos usar essa propriedade de tabela de exibição na div externa, que é o elemento paren div E para as linhas, também precisamos usar uma propriedade especial chamada linha da tabela de exibição para as células da tabela Para nossas colunas, podemos usar essa propriedade de células da tabela. É assim que ele vai criar a mesma estrutura estável usando a propriedade display. Então, vamos começar com a prática e ver como podemos criar o TME usando esses três como propriedade Então, como você pode ver lado a lado, abro meu editor de código do Studio e meu navegador usando LiveServeRetension, e já crio um documento ML Então, como você sabe, vamos criar uma TV usando tag profunda. Então, dentro da tag body, primeiro, vou pegar uma tag profunda com o nome de ID tib. Então, aqui eu vou digitar has tag table, e vou pressionar Enter. E dentro dessa etiqueta de tabela, vou pegar três colunas. Por enquanto, vou pegar três colunas. Eu não vou brigar. Então, vou digitar ponto e atribuir o nome da classe às nossas colunas. Então, o nome da nossa classe é call. E eu vou apertar Enter. Em nossa primeira aula, vou digitar A. Depois vou duplicar essa linha duas vezes Aqui é BN. Este é B, e este é C. Agora temos uma tabela com largura de três colunas. E agora vou estilizar essa mesa. Então, primeiro, vou selecionar a tabela ID Hastag. Então, dentro da resina do carro, vou usar uma propriedade chamada tabela de exibição Em seguida, vou selecionar todas as colunas. Sou do tipo dot COL. Dentro da resina de Carli, vou adicionar uma borda. Vou adicionar uma borda. Borda, quero uma borda sólida de um pixel e a cor da nossa borda é preta. Aztag 000. E eu vou configurar esse arquivo. Até configurar esse arquivo, vocês veem esse resultado. Além disso, vou adicionar maconha a esta mesa. Para isso, hern comprou maconha, 800 psil. Além disso, adicionarei uma borda entediada bordas de um pixel, borda sólida e a cor da borda será Eu quero configurar esse arquivo. Perturbe esse arquivo, é isso que ele cria. Eu acho que 500 pixels de largura é um aumento, então eu vou fazer com que seja 500. Até configurar esse arquivo, como você pode ver na minha tabela, temos um total de três linhas. Mas agora eu quero que eles liguem. Até A, quero imprimir B, depois quero imprimir três. Quero imprimir todos eles em uma única linha. Para isso, vou usar essa propriedade novamente. Então, dentro da classe de chamada, tenha o tipo display. E vou usar a célula da tabela de exibição, célula Tamil, e quero definir esse arquivo Perturbe esse arquivo, você pode ver o resultado. Agora, na nossa, temos apenas uma linha e três carvões. Além disso, quero colocar essa tabela no centro desta página, então vou usar a propriedade de margem em nossa tabela. Margem, zero e automático. Abre esse arquivo, você pode ver o resultado. De baixo para cima, adicionaria margem zero e da esquerda para a direita, adicionaria. Agora, aqui você pode observar que todas as células da tabela estão igualmente divididas porque não temos conteúdo suficiente para expandir nenhuma célula. Se eu adicionar algo nesta célula B, suponha que eu queira adicionar cinco palavras na borda inferior. Então satisfaça, você pode ver o resultado. Agora você pode vê-lo expandir a coluna B e reduzir o tamanho das colunas A e C. Agora podemos fornecer largura fixa para essa coluna do meio. Suponha que você queira atribuir 200 pixels de largura a essa coluna do meio. Para isso, você pode usar o método de estilo Inland. Então, o estilo do tipo herói é igual a 200 pixels. Se eu definir esse arquivo, você poderá ver esse resultado. Agora, não podemos estender o tamanho da célula da tabela para mais de 200. Agora vou adicionar mais duas coleiras. Vou duplicar essa linha tempo e vou chamá-la B e essa é E. Se eu definir esse arquivo, como você pode ver, exceto a coluna D, todas as colunas serão divididas igualmente Então, neste exemplo, ele criou uma TV com apenas uma linha e temos várias colunas nessa linha. Mas se você quiser criar várias linhas para isso, precisamos criar o D pai para todas as profundidades da coluna. É muito parecido com o Tata. Sabemos que na TV a tag Tia representa Taviow e a tag TD representa a coluna Tavil Então, vamos criar uma linha. Primeiro, selecionarei toda essa seção e recortarei essa seção e seguida, dentro da tag DV, criarei uma linha Vou amarrar Dot Row. Dentro dessa fileira, vou colar todos os golpes. Desta vez, eu não preciso dessas colunas desnecessárias, então vou remover D e E. Pois vou colocá-las dentro do nível de indentação que você pode entender de forma muito clara a linha e a coluna Com isso, quero criar outra linha. Então, aqui vou amarrar a linha de pontos. E dentro dessa linha, vou criar várias colunas. Então, primeiro, eu vou criar algum tipo D ponto C. E eu vou colocar um nome que é D. Então eu duplico essa linha, e eu vou fazer essa E. E eu quero definir esse arquivo Então, em nossa primeira linha, temos que colocar três colunas, e em nossa segunda linha, temos que fazer duas colunas. E então eu vou remover os dados extras e torná-lo um B. Com isso , eu não preciso desse estilo, então eu vou removê-lo. E acho que, por enquanto, vou usar três colunas para entender melhor. Então, eu dupliquei esse slide novamente e vou amarrá-lo e salvá-lo novamente. Então, temos que fazer duas colunas e três colunas em cada linha. Agora, o problema é que depois de definir esse estilo, agora você pode perceber que não temos nenhum peso em relação aos nossos duendes Isso ocorre porque não estilizamos a classe de linha, então precisamos estilizar a linha. Então, vou selecionar essa classe, então vou digitar uma linha de pontos dentro da resistência encaracolada Eu vou usar a propriedade. Exibir linha da tabela, esta. Se eu disser esse arquivo, você pode ver o resultado. Agora vou adicionar dados reais de estudantes nesses preservativos. Para isso, primeiro, passarei a regra número um, depois passarei o nome do aluno, adicionarei um e, por último, passarei o total de notas, que é 250. Então, novamente, em nossa segunda fila, vou passar Roluba dois, e o nome é Rahul ou scoop be maiúsculo e Então eu dupliquei essa seção, essa linha. Agora temos um total de três, e este é Roluba nome é Ravi. A marca total é Agora vamos configurar o arquivo e ver se ele funciona corretamente ou não. Até configurar esse arquivo, você pode ver o resultado. Em nossa primeira coluna, ele imprime todo o número do rolo, depois relê todos os nomes e, por fim, imprimimos os números totais Agora, vamos adicionar preenchimento às vendas. Para isso, precisamos selecionar a coluna e adicionar preenchimento. Preenchimento, em toda a direção eu quero adicionar uma banda de cinco pixels, e vou definir esse arquivo Até configurar esse arquivo, isso é o que parece. Agora nossa tabela está pronta, mas não temos nenhum título nesta tabela. Então, na próxima parte deste tutorial, aprenderemos como podemos adicionar cabeçalhos usando essas propriedades. Então, isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 139. Tutorial de tabela de exibição de CSS, parte 2: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com outro tutorial relacionado à propriedade de tabela de exibição. Neste tutorial, vamos criar cabeçalho e rodapé usando a propriedade display Para criar esse tipo de título em uma tabela, ST terá uma tag especial, que é o cabeçalho da tabela de tags TH. Mas vamos criar essa seção de cabeçalho usando tag profunda para criar esse tipo de cabeçalho usando tag profunda. Primeiro, precisamos pegar DV e depois inserir essa tag profunda, precisamos pegar essas três colunas Como precisamos usar uma propriedade CSS especial chamada display table header group, precisamos usar essa propriedade no desfile Develen Usando isso, podemos criar o cabeçalho de uma tabela e, da mesma forma, podemos criar o rodapé da tabela, algo assim Como você pode ver, é uma mesa de funcionários e temos número de funcionários, cochilo e aipo Aqui você pode ver que esta é a nossa seção de rodapé e, por fim, imprimimos o aipo total Para criar esse tipo de rodapé, também precisamos pegar uma tag profunda e, dentro dessa tag profunda, precisamos criar as colunas e, na tag profunda principal, queremos usar essa propriedade ss, exibir o queremos usar essa propriedade ss, grupo de rodapé da tabela É assim que podemos criar um rodapé de uma tabela. Vamos começar a prática e tentar limpar o armário. 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 ao vivo Aqui eu abro meu documento de estabelecimento anterior. E, como você sabe, em nosso tutorial anterior, estávamos usando tags profundas. Mas neste tutorial, vamos criar cabeçalho e rodapé de tabela Então, primeiro, vou criar a seção de cabeçalho. Dentro desse blob de tabela, vou pegar uma tag profunda e definir a tabela de tags IDhs e o cabeçalho de sublinhado Então, dentro desse bloco aqui, eu vou criar 23 co então. Eu copio esta seção e a colo aqui. Em nossa primeira coluna, vou digitar linha e em nossa segunda coluna, vou digitar nome. E na nossa terceira coluna, vou digitar marcas e vou definir esse arquivo. Depois de definir esse arquivo, é isso que parece. Como você pode ver, não parece um cabeçalho de tabela. Agora precisamos estilizar esse elemento profundo, o cabeçalho da tabela. Vou copiar seu nome de ID, cabeçalho da tabela e, aqui, vou digitar hashtag, cabeçalho da tabela Em seguida, insira os versos de Gali. Aqui, vou usar uma exibição de propriedades. Display, cabeçalho da tabela, pronto. Essa propriedade. Além disso, vou usar uma cor de fundo para destacar esse papel. Tipos de heróis, plano de fundo, e eu quero algo azul claro, azul claro. Vamos configurar o arquivo e ver se ele funciona corretamente ou não. Depois de definir esse arquivo, como você pode ver, ele funcionará corretamente. É assim que podemos criar o cabeçalho dessa tabela. Só precisamos usar essa propriedade. Nesta jogada, eles cabecearão. Da mesma forma, podemos criar o rodapé da tabela. Deixe-me te mostrar. Para criar o rodapé, vou copiar esta seção e colá-la dentro desta seção , vou mudar o cabeçalho da tabela de nomes de ID para rodapé Em nossa primeira coluna, não quero enviar nenhum valor e, em nossa segunda coluna, vou digitar o total de marcas. Portanto, não precise de marcas. Em nossa última coluna, vou imprimir o total de marcas. Que é 300 mais 350 mais 250. Agora se tornou 900 e eu vou configurar esse arquivo. Depois de definir esse arquivo, ficou assim porque não usamos a propriedade display. Então, primeiro, vou copiar o nome de ID para esse rodapé e depois vou selecionar isso Então, na primeira propriedade da Cal, vou usar display. Display e aqui, vou usar o teto do rodapé da TV. Quero configurar este arquivo Depois de definir esse arquivo, como você pode ver, crie o rodapé Além disso, vou atribuir uma cor de fundo, algum tipo, verde claro . Eu quero configurar esse arquivo. Depois de definir a cor de fundo, acho que há um problema no meu código, veja, esse é o problema. Precisamos removê-lo. Vamos configurar o arquivo novamente. Agora você pode ver o resultado. Como você pode ver, crie com sucesso a parte do rodapé. E se você quiser centralizar o texto, sim, você pode precisar alinhar, alinhar o texto Você precisa usar a propriedade central. Vou usar a propriedade sen no rodapé e vou definir esse arquivo Com isso, se você quiser aumentar a fonte , basta digitar a fonte para oito. Digite, pese e eu vou usar Bond. Vou usar a mesma propriedade na seção de rodapé e vou salvá-la novamente. Agora parece uma cauda completa. É assim que podemos criar uma seção tabulada e de rodapé Só quero usar essa propriedade com. Mas se você quiser fazer a mesma coisa usando a estrutura, a estrutura Tim adequada, para isso, precisamos usar a tag TH, mas podemos fazer a mesma coisa facilmente com a propriedade display. Agora vou mostrar como podemos agrupar as linhas da tabela. Aprendemos como podemos agrupar o cabeçalho e o rodapé da tabela. Além disso, podemos agrupar a linha da tabela e fornecer a cor de fundo. Deixe-me te mostrar. Para isso, vou mover todas as linhas para dentro de outra profundidade. No começo, vou cortar essa porção. Eu seleciono essa parte e a corto. , aqui estou digitando outro tipo profundo Bev, vou atribuir um ID e IDName é um grupo de linhas Grupo de linhas. Então, dentro desse ID de grupo de linhas, vou colar todas as linhas. Em seguida, vou usar esse ID como seletor e pular para a seleção de estilo Primeiro, vou selecionar esse ID, depois dentro da tela do alivss, e vou usar o grupo de linhas na linha da tabela, vá para esta Também vou definir a cor do fundo, o plano de fundo e quero o fundo amarelo. Vou configurar esse arquivo. Depois de configurar esse arquivo, você pode ver o resultado. Então, isso é tudo para este tutorial. No próximo tutorial, aprenderemos o grupo de carvão. Aqui, aprenderemos como podemos agrupar qualquer coluna. Suponha que eu queira agrupar essa coluna, quero mudar a cor de fundo desta sala. Quero selecionar todas as colunas. Então, vamos aprender isso no próximo tutorial. Obrigado por assistir esta estátua em nosso próximo tutorial. 140. Tutorial de tabela de exibição de CSS, parte 3: Olá, pessoal. É bom ver você de volta. Este é o novo tutorial relacionado à propriedade disp table. E neste tutorial, vamos aprender uma tabela chamada groove Como você pode ver neste exemplo, temos o nome do número da linha e a idade. São três colunas e agora eu quero dizer a cor de fundo coluna do nome, algo assim Já fizemos a mesma coisa para uma linha, mas desta vez vamos fazer isso para uma coluna Para definir a cor de fundo dessa forma, CSS introduz outra propriedade, display chamado groove Agora vamos ver como podemos usá-lo. Primeiro, em sua tabela, você precisa criar um elemento DV e, como você pode ver neste Delmate uma classe chamada grupo da tabela C. Basicamente, tentamos criar um grupo de colunas da tabela. Em seguida, você pode mencionar as colunas, quantas colunas deseja selecionar e também pode ascender à classe dessas colunas No nosso caso, coluna da tabela. Neste exemplo, HetYttal de duas colunas. Se você quiser mais, poderá aumentar o tamanho da coluna. Além disso, precisamos usar uma propriedade CSS especial para essa classe, grupo de chamadas de tabela, e precisamos usar essa propriedade Esse grupo de colunas da mesa de jogo e, para a coluna, precisamos usar essa propriedade. Esta coluna da mesa de jogo. Isso criará um grupo de cores e você poderá alterar a cor de fundo com ele. Vamos começar a prática e ver como podemos aplicá-la. Como você pode ver, lado a lado, abri meu editor de código do Visual Studio e meu navegador usando a extensão Live Server e já abri meu nome de documento anterior Atable ponto de índice t. Aqui já criamos uma tabela Aqui criamos o cabeçalho da tabela, o rodapé da tabela, temos que preencher três colunas, também temos que fazer três linhas Agora precisamos criar um grupo usando colunas. Então, dentro da tag da tabela, aqui vou pegar outra tag dip e atribuir o grupo ID call tbcll Grupo de chamadas de mesa. Então, dentro desse grupo de chamadas de tabela, vamos criar um total de três colunas porque sua tabela terá um total de três cores Aqui vou digitar Dev dot e vou atribuir um nome de classe chamado cor da tabela. Vou duplicá-lo várias vezes Se passarmos qualquer valor nesta coluna, suponha que se eu digitar isso é COL, chame um, esta é a coluna um e eu copio esse valor e psi aqui e substituo um por dois e substituo esse valor um por três, e isso neste arquivo uppifle, como você vê, por enquanto, fica Mas agora vou aplicar essas propriedades. Em primeiro lugar, precisamos atribuir a propriedade CSS a esse grupo de chamadas de tabela. Eu copio esse valor e o grupo de chamadas da tabela HemotyEhTag. Então eu defino os calibss e aqui eu quero usar uma propriedade chamada play this tb Column group Eles chamarão um grupo e também selecionarão essa criança. Eles vão C. Opa, há um erro de digitação no nome da minha turma Deveria ser E, não R. Eu corrijo. E então eu vou copiar o nome da classe e criar um seletor usando esse nome de classe, Tabela C. Em vez do cis, aqui, eu vou aplicar essa labilidade Exibir tabela coll Esta, e eu quero definir este arquivo Até configurar esse arquivo, como você pode ver, ele oculta todos os dados dos cols. Aqui você não pode ver os dados que passamos dentro do dip Eins, como Col um, chamada dois, chamada três Agora, precisamos adicionar um nome de adição diferente a toda essa coluna Aqui digite, isso é l11. Então você copia o nome da classe e isso é L dois. Esta é a coluna dois, esta é L três, coluna três. Basicamente, o Hey agrupa três marcas de nome de rolo de colunas diferentes. Suponha que agora eu queira adicionar cor de fundo à cor do nome. Para isso, precisamos selecionar essa coluna, chamar dois. Mas antes de aplicarmos a cor de fundo da coluna, quero remover a cor do livro não autorizado Para isso, como você pode ver, precisamos remover essa cor amarela, então eu comento essa linha. Em seguida, vou selecionar esse grupo de colunas chamado dois e criar um seletor E dentro dos fígados, precisamos aplicar a cor de fundo, algum tipo de fundo, e eu quero dizer rosa Eu quero configurar esse arquivo. configurar esse arquivo, você pode ver o resultado. Agrupamos com sucesso essa cor de nome e definimos uma cor de fundo para essa cor de nome. Da mesma forma, se você quiser adicionar cores diferentes ao rolo, sim, você pode. Só para duplicar essa foto eletrônica e selecionar. Desta vez, precisamos selecionar dois pontos um, chamar um, e aqui vou atribuir a cor vermelha Eu quero definir esse pi. Você pode ver o resultado. Lembre-se de que você só pode se inscrever na propriedade. Você pode alterar a cor de fundo desse grupo de colunas. Além disso, você pode aumentar a largura do grupo de colunas. Caso contrário, você não poderá aplicar outras propriedades CSS. Deixe-me pré-visualizar isso. Suponha que, na coluna dois, eu queira aplicar a propriedade da linha de texto, alinhar o texto e torná-la centralizada Eu quero colocar todo o nome na posição central. Então, se ele configurou esse arquivo, como você pode ver, não funciona. Mas se aplicarmos com then, vou defini-lo em 150 pixels e nesse arquivo, você poderá ver o resultado. Agora, aplicando o, podemos mudar a cor de fundo. Também podemos nos inscrever com. Caso contrário, não podemos aplicar as propriedades da tese, como texto, tamanho da fonte, etc. Vou comentar a linha. Eu não preciso disso. Isso é apenas por exemplo, e você precisa se lembrar disso. Agora vamos falar sobre a última propriedade do BSB, que é o cache da tabela Podemos definir o título usando esse significado labial. Para isso, dentro dessa tag de tabela aqui, vou pegar uma tag profunda, DP e aqui, vou definir um ID chamado caption Então, dentro dessa legenda, vou passar três tags Você pode usar qualquer etiqueta auditiva. Por enquanto, vou pegar três e digitar as informações de hoje. Informações do aluno Para definir essa legenda, precisamos selecionar o nome da turma Em nossa seção de estilo, algum tipo de legenda com pontos dentro dos versos do carro, vou passar pela propriedade Exibir e aqui precisamos usar onde você chama a legenda da tabela Legenda da tabela esta. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Também quero fazer esse centro de captura. Aqui estou digitando linha de texto, centro de alinhamento de texto Então eu quero colocá-lo em maiúsculas, então vou digitar texto, transformar e aplicar Então eu vou mudar a cor da fonte e eu quero dizer cor da fonte, cor , e eu quero cor verde. Eu vou configurar este. Aqui você pode ver que criamos com sucesso a legenda da tabela Criamos o cabeçalho da tabela, o rodapé da tabela, podemos agrupar as linhas Como podemos agrupar colunas. Podemos fazer tudo usando essa propriedade de tabela. Aqui, não precisamos criar nenhuma estrutura de tabela adequada usando a tecnologia TA, tag DD, podemos fazer a mesma coisa usando a tag Dip Espero que você goste desse tutorial. Obrigado por assistir a este vídeo Sadiun, para o próximo tutorial 141. Tutorial de cores de acento em CSS: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com um novo tutorial relacionado ao CSS e, neste tutorial, aprenderemos uma nova propriedade chamada ascent color Como você sabe, em uma tag Fronk estável, temos que dizer duas tags especiais Uma é a caixa de seleção e a outra é o rádio. Ambas são tags de entrada. Se quisermos obter vários valores de várias opções , usamos a caixa de seleção e botão de rádio quando precisamos obter apenas um valor da opção múltipla E sempre que marcarmos essa caixa, caso contrário, clique neste botão. Por padrão, ele retorna a cor azul. Mas se você quiser atribuir cores diferentes, algo assim, vermelho, verde, roxo, amarelo, nesse caso, o CSS introduziu uma nova propriedade, e chamamos essa propriedade de cor ascendente Antes da propriedade de cor ascendente, não temos nenhuma propriedade que possa alterar chapebx, caso contrário, as cores dos botões de rádio Não podemos alterar a cor padrão mais cedo. Para alterar essa cor, o CSS introduziu essa propriedade ascent color Então, vamos começar a prática e ver como podemos aplicar essa propriedade. Como você pode ver lado a lado, abro meu editor de código is studio e meu navegador usando a extensão light de servidor, e já crio um documento HTML chamado index dot HTML Portanto, em nossa tag body, temos apenas uma tag de cabeçalho e, dentro da tag body, vemos aqui a área da família e o tamanho 16 pixels. Agora, dentro da etiqueta corporal , a princípio, vou tirar da etiqueta de. Em seguida, dentro da etiqueta do sapo. Primeiro, vou subir de nível. Eu vou dizer nível Hobbs. Em seguida, aqui vou pegar a tag de entrada, entrada, e nosso tipo de entrada é Jack Wox E também em toct, um nome para esse tipo de entrada, nome hobby. Como hobbies, primeiro vou digitar esportes. Então eu lanço essa linha várias vezes e nosso próximo hobby é música, e nosso último lance são livros Como você sabe, se você usar a caixa de seleção, usuário poderá selecionar várias opções Então, para radiostans, vou passar para outro nível. Vou dar outro lábio. Para o rótulo, vou digitar gengibre. Gênero e aqui, vou digitar o tipo de entrada. Este é rádio. Com isso, precisamos passar o nome Zina. Então, para passar, Valu macho, e também precisamos passar pela esquerda Min. Então eu dupliquei essa linha. Desta vez, eu apenas mudo o nome do valor, feminino. FE, não R, mulher, até eu configurar este arquivo. Depois de definir esse arquivo, você pode ver o resultado. Eles estão na minha opção de caixa de seleção e esses dois são lidos devido à opção do botão Agora, se eu clicar em qualquer opção, caso contrário, várias opções, e se eu pegar os botões de rádio, como você pode ver, eles retornam à cor azul. É a cor padrão. Agora vou estilizar essas tags de entrada. Dentro dessa tag de estilo, vou selecionar a tag de entrada em seguida, você define os versos cali No início, vou atribuir à maconha, nós, 15 pixels. Além disso, vou usar a altura 15 pixels. Vou configurar esse arquivo. Eu defino esse arquivo, como você pode ver, ele aumenta o tamanho da caixa de seleção e dos botões de rádio. Agora eu quero mudar a cor padrão. Como eu disse, podemos mudar a cor, precisamos usar uma propriedade chamada ascend c Ascend cur e você pode colocar nome, qualquer nome de cor, caso contrário, qualquer código xa, valor RG, Vou digitar red cn, red e quero satisfazer. Depois de satisfeito, se eu clicar em qualquer caixa de seleção, como você pode ver, agora ela fica em vermelho. Também botões de rádio Wi. Você pode usar qualquer tipo de cor para fazer. Você pode usar HiXa RGB, RGB, etc. Só uma coisa que você precisa lembrar. podemos aplicar essa propriedade Só podemos aplicar essa propriedade com essas duas tags de entrada, caixa de seleção e rádio. Não podemos usá-lo com textia, texto, número, etc Só podemos aplicá-lo com a caixa de seleção e pronto. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no próximo tutorial 142. Tutorial de esquema de cores CSS prefere: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS. Neste tutorial, aprenderemos sobre uma nova propriedade, que é a cor preferida do scream Agora, o que é grito colorido? Se você é usuário do Windows, caso contrário, conheceu o usuário , sua interface de usuário vem com um total de duas cores, modo cores claras e modo de cores escuro No tema do modo Light aap, nosso navegador e o layout do navegador vêm com cores claras, e no modo Darkap, nosso navegador e o layout externo do navegador vêm com cores mais escuras De acordo com a escolha do usuário, o usuário pode selecionar qualquer modo de luz. Basicamente, antes dessa regra de mídia, criamos um site de acordo com modo Light App, algo parecido. Aqui usamos fundo de cor branca e texto em preto. Mas e se os usuários selecionarem o modo escuro do aplicativo? Nesse caso, precisamos nos comprometer com a visibilidade. Algo parecido. Como você pode ver, o texto torna os raios visíveis, compare com a luz um modo porque desta vez ele vem com uma cor de fundo escura. Nosso texto e o plano de fundo estão em cor escura. Mas agora, quando aplicamos o modo de aplicativo escuro, eu altero automaticamente a cor do texto, algo assim. Não apenas a cor do texto, podemos alterar a cor fina deste site. Também podemos alterar qualquer propriedade CSS. Isso é possível porque somente pela nossa nova regra de mídia , conhecida como esquema de cores preferencial. Para usar essa regra de mídia, primeiro você precisa digitar na mídia de destino. Em seguida, dentro do recesso redondo, você precisa passar o esquema de cores preferido e passar um ID de que ele vem com um total de duas ondas predefinidas, clara e Se você escolher claro, qualquer CSS que você escrever dentro da classe, ele será aplicado somente no movimento claro, se você escolher o escuro, ele será aplicado somente no movimento escuro Agora, vamos aplicar essa nova regra de mídia. Mas antes de aplicar essa nova regra de mídia, quero te mostrar uma coisa. Como você pode ver, abra meu navegador e você verá que todos estão em cores claras. Agora vou mudar o modo de cor do meu sistema e, para mudar o modo de cor, basta pesquisar por escuro. Em seguida, vá para a sessão SSW e aqui, você precisa pesquisar no escuro e, a partir daqui, você precisa selecionar essa opção Ative o modo escuro. Depois de abrir essa configuração, a partir daqui, você pode escolher qualquer modo. Como você pode ver, Hart forneceu uma lista suspensa e, por padrão, já selecionamos o modo de cor clara Se eu selecionar o modo de cor escura, você poderá ver, automaticamente, que a cor padrão do nosso navegador foi alterada. Agora nosso navegador fica escuro. O layout interno fica escuro. O layout externo fica escuro. Da mesma forma, se eu voltar ao modo de cor branca, deixe-me mostrar para você. Vou selecionar a luz novamente. Agora você pode notar que nosso navegador vem novamente com cores claras. Agora, de acordo com esse modo de cor, podemos definir CSS diferente para nosso site. Vamos começar a prática e ver como podemos aplicá-la. Como você pode ver lado a lado, abro meu editor de código do estúdio de usuário e meu navegador usando extensão if server e já crio um documento ESTiml chamado index dot HTML Agora, como você pode ver em nossa tag corporal, temos uma tag de cabeçalho, duas e uma Panagra Agora, primeiro, vou atribuir uma cor de fundo padrão a esse corpo. Então, dentro dessa tag de estilo, primeiro vou amarrar o corpo, vou selecionar o corpo dentro das classes às vou selecionar o corpo dentro quais vou atribuir a propriedade de fundo, aquela rodada e quero atribuir a cor laranja, e vou definir esse arquivo Para usar a regra de mídia, como eu disse, primeiro precisamos digitar na taxa de mídia. Então, dentro dos versos redondos aqui, precisamos digitar preferir cor Esquema aqui eu vou aplicar cores claras. Então, dentro da resina do carro, eu quero mudar a propriedade do quarto. Vou copiar o tipo de corpo com a propriedade do quarto e depois dentro do css, vou colar aqui e, desta vez, quero aplicar a cor rosa. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Agora ele aplica a cor rosa porque se eu pesquisar em nosso quadro de cores, agora você pode ver nossa linha de corpos coloridos. É por isso que aplica a cor rosa. Agora, da mesma forma, quero criar um modo selecionado para o escuro. Para isso, aqui, vou debgate esta seção e, desta vez, vou selecionar dark, esta Também quero mudar o nome da cor, rosa para verde claro. Esse, e eu vou configurar esse arquivo. Depois de configurar este arquivo, como você pode ver, não há alterações no meu navegador. Mas o que? Se eu mudar o humor da cor, deixe-me mostrar para você. Vou abrir essa configuração e agora vou mudar o modo de cor claro para escuro. Depois de aplicar o escuro, você pode ver o resultado. Agora, automaticamente, você pode vê-lo aplicar a cor verde clara como cor padrão do corpo. E da mesma forma, novamente, selecionamos o modo de luz, deixe-me mostrar. Então, como você pode ver, volte à cor rosa do corpo. Como eu disse, você pode aplicar qualquer CSS aqui. Suponha que eu queira alterar a cor da fonte quando aplicamos o modo de cor escura, cor do tipo Sumo e quero cinza claro. Cinza claro. Além disso, vou mudar a cor de fundo e quero aplicar a cor cinza escuro. Então, a partir da palavra cor, eu quero aplicar esse tipo de cor escura, essa, esse código de cores. Vou definir essa multa. Depois de definir este arquivo, se eu mudar o mod de cor, deixe-me mostrar o claro para o escuro, você pode ver o resultado. Agora você pode ver meu navegador. Agora está claramente visível. Aqui costumávamos usar cores opostas. Para o plano de fundo, usamos a cor escura e, para o texto, usamos a cor cinza claro. É assim que podemos usar essa regra de mídia. Espero que agora esteja claro para você como podemos usá-lo. Obrigado por assistir a esta estátua em vídeo para nosso próximo tutorial 143. Tutorial de proporção de aspecto: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS avançado. E neste tutorial, aprenderemos uma nova propriedade chamada proporção. Agora, vamos tentar entender o que é proporção. Suponha que eu queira criar um quadrado perfeito. Para criar o quadrado perfeito, precisamos de altura e largura iguais. Suponha que tomemos 200 pixels de largura e 200 pixels de altura. É assim que podemos criar um quadrado. Agora temos uma nova maneira de criar esse quadrado. Agora, para criar esse tipo de quadrado, primeiro a se casar. Suponha que, no nosso caso, 200 pixels , mas para altura, não vou usar nenhuma propriedade de altura. Aqui vamos usar nossa nova propriedade Aspec ratio, algo assim, Aspec ratio Não vamos usar a propriedade de altura para criar essa caixa quadrada. Na propriedade de proporção, passamos uma proporção na qual, eu quero pegar a altura e u. Como você pode ver, usamos uma proporção, o que é um. Nosso primeiro significa casamento e o segundo significa altura. Quer dizer, de acordo com a largura, vamos usar a mesma quantidade de altura. Aqui você pode passar qualquer proporção de acordo com suas necessidades. Deixe-me mostrar outro exemplo. Suponha que, nesse caso, aqui eu crie outro elemento profundo. Desta vez, vou pegar 200 pixels e aqui vou medir a altura duas vezes e depois levar duas vezes e depois até esse tipo de estrutura usando a proporção Nesse caso, precisamos tomar a proporção um por dois, um é dois, dois Quer dizer, basicamente vamos considerar o dobro do valor da altura. Se você quiser medir altura, habop com comprimento, nesse caso, basta uri para inverter a largura digitar dois por Agora você deve ter se perguntado por que eu uso essa propriedade? Podemos fazer a mesma coisa usando a propriedade de altura. Basicamente, usamos essa propriedade para sites responsivos. Deixe-me mostrar um exemplo. Esse DV é um elemento dv quadrado. Mas quando falamos sobre um site responsivo, maioria das vezes precisamos seguir a celular, caso contrário, a resolução do laptop Como você sabe, nosso smartphone vem com resolução diferente. Sua largura é diferente. Mas a maior parte da resolução do smartphone é de 322400-80 pixels. Então, quando projetamos para dispositivos móveis, a maioria dos casos é definida com 100%. Então, a largura se tornou responsiva, mas como ela pode criar um quadrado perfeito usando-a Porque nossa altura ainda é de 200 pixels. Agora, a largura é 100%, mas a altura é fixa. Então, aqui podemos usar nossa nova propriedade como proporção falsa. Agora, ele aumenta ou diminui automaticamente a altura de acordo com o comprimento da largura e cria um quadrado perfeito. Seja qual for a resolução que temos aqui , não precisamos nos preocupar. Isso vai criar um quadrado perfeito. Usamos essa propriedade principalmente para tornar nossas imagens responsivas Sem perder tempo, vamos começar a prática e ver como podemos aplicar essa propriedade Como você pode ver, lado a lado, abro meu editor de código do Visual Studio e meu navegador usando a extensão life server, e já criei uma estimativa nome do documento index dot DM Agora, dentro da etiqueta corporal, vou pegar um desvio. Su para digitar. Além disso, vou atribuir ID ao dispositivo tipo S, HTag e nosso nome de ID é taste Dentro dessa variável D aqui, vou pegar um parágrafo, tipo Sue, EM, e quero dez palavras Além disso, vou estilizar esse elemento usando seu nome de ID. Eu copio o nome do ID e a parte superior do corpo, vou selecionar esse nome de ID e é a cals que é a primeira propriedade que vou usar W W 200 pixels Então eu vou dizer isso de fundo, e eu quero você, Ballard , também quero dizer isso de fronteira. Fronteira. Eu quero uma borda sólida de dois pixels. Sólido, e nossa cor de borda é preta, Hatag 000. Vou configurar esse arquivo. Depois de definir esse arquivo, você pode ver o resultado no navegador noturno. E agora eu quero transformar esse elemento em um quadrado perfeito. Para isso, não vou usar a propriedade de altura. Sem usar a propriedade de altura, vou usar uma propriedade chamada razão Astete Proporção uma por uma, e eu vou definir essa. Depois de definir esse arquivo, você pode ver o resultado no seu navegador. Aqui, o primeiro valor um representa V e o segundo valor um representa alto. E agora eu decido aumentar a altura desse retângulo Para isso, agora eu quero duas vezes a altura de acordo com o comprimento da largura. Aqui, vou alterar a proporção de um a dois e definir esse arquivo. Depois de definir esse arquivo, você pode ver o resultado. Se eu triplicar, basta passar três aqui e definir esse arquivo. Agora você pode notar que a altura é três vezes maior que a largura. Além disso, podemos fazer o oposto. Sim. Se você quiser atribuir 50 pixels de altura para isso, basta digitar 21. Se você definir esse arquivo, poderá ver o resultado. Agora, desculpe, o Wi tem 200 pixels e a altura se torna cem pixels porque aqui você define com 200 pixels. Deixe-me dizer uma coisa. Suponha que você queira criar um quadrado, um quadrado perfeito. Nesse caso, você pode ganhar apenas uma vitória. Suponha que ela deva pegar apenas um. Depois de definir este arquivo, você ainda pode ver esse quadrado. Se ambos os valores forem iguais, nesse caso, você poderá usar o valor numérico somente por uma vez Agora deixe-me te mostrar outra coisa. Agora você pode ver que você tem texto limitado neste elemento de banco de dados, e eu vou aumentar o tamanho do texto. Então, vou duplicar essa seção várias vezes e vou configurar esse arquivo Depois de definir esse arquivo, ele aumentará a altura desse elemento. Deixe-me te mostrar. Como você pode ver, agora, ainda temos 200 pixels e a altura se torna mais de 200 pixels porque ela usa a proporção um. Se usarmos a proporção um , nosso conteúdo não sairá desse contêiner Isso vai aumentar a altura desse contêiner. Portanto, em nosso caso, a proporção funcionará como uma propriedade de altura mínima. Sempre atribuirá uma altura mínima de 200 pixels e o conteúdo Se o conteúdo for maior que sua área, aumentará a altura. Mas o que? Se você não quiser aumentar a altura, nesse caso, você pode usar a propriedade overflow Basta digitar overflow, overflow auto. Se você configurá-lo automaticamente, poderá ver a barra de susto em seu Delem Agora, novamente, vamos para 100 pixels em altura devido à proporção. Além disso, essa probabilidade de proporção também funciona com a altura, deixe-me mostrar. Nesse caso, vou atribuir altura e peso. Eu comento a espessura dessa linha e a altura do tipo dela, 300 pixels. Além disso, vou comprometer nossa propriedade de transbordamento. Aqui eu vou pegar um por um, um é dois, um. Se eu pegar essa proporção, se eu definir esse arquivo, novamente, ele criará um quadrado perfeito. Porque essa propriedade funcionará com proporção. Se você fornecer um dos valores acordo com essa proporção de valor, ele criará o valor da outra propriedade. Se você quiser diminuir a largura, basta digitar, basta trocar a proporção dois Se você definir esse arquivo, verá o resultado. Agora, ele atribuiu 100 pixels de largura a esse elemento. Mas desta vez você pode notar que nossos dados estão transbordando desse contêiner porque aqui atribuímos uma altura fixa a esse contêiner E se você quiser resolver esse problema, basta usar o mesmo estouro de propriedades para resolver o problema Em vez de diminuir a largura desse elemento, se você quiser aumentá-lo, precisará obter um valor maior de 40 com a proporção. Suponha que eu queira uma largura três vezes maior em comparação com a altura. Aqui, passe três para um e defina esse arquivo e você poderá ver esse resultado. Agora, a largura do continuador se torna 900 pixels. Como três vezes 300 é 901 da coisa mais importante que você precisa lembrar, você não pode usar a propriedade de altura e largura juntas Então, essa propriedade de proporção de especificações não funcionará. Deixe-me te mostrar. Vou aplicar ambas as propriedades. Se eu salvar, como você pode ver, agora a largura se torna 200 pixels e a altura se torna 300 pixels. Agora, nosso índice de Espe não funcionará. Se eu tentar fazer com que seja um quadrado perfeito, ainda assim, não vai funcionar. Mas o que? Se não aplicarmos ambas as propriedades, deixe-me mostrar para você. Não vou aplicar a propriedade e comentá-la, então eu comento e configuro esse arquivo, agora você pode ver o resultado. Agora você pode ver que ele cria um quadrado perfeito. Agora , por padrão, proporção da imagem é igual ao valor amplo Otto e, de acordo com o valor de largura, aumenta a É por isso que é necessário criar uma caixa quadrada perfeita. Agora, dependemos do tamanho do conteúdo deste parágrafo. Se eu arrastar e aumentar o tamanho da janela, como você pode ver, acordo com o tamanho do conteúdo, isso aumentará a altura e a largura desse contêiner. Agora vamos ver como podemos responder nossas imagens. Primeiro, vou deletar esse elemento profundo. Além disso, vou comentar essas linhas. Depois disso, dentro da tag body aqui, vou pegar uma imagem tag.yimageimage e, como fonte, como você pode ver no meu diretório de trabalho atual, há uma imagem Vou passar o caminho da fonte da imagem nature nature dot JPG. Se eu definir esse arquivo, você poderá ver a imagem no meu navegador. E, como você pode ver aqui, imagem Wi é maior que a altura da imagem. Agora eu quero fazer dessa imagem um quadrado perfeito. Dentro dessa etiqueta de gravata e onde criar uma seleção usando sua imagem de nome de tag. Ela gravou Image. É o carnaval, a primeira propriedade com a qual vou usar, e vou montar com 400 Vou configurar esse arquivo. Até configurar esse arquivo, você pode ver o resultado. De acordo com a imagem com , mudou a altura da imagem. Mas eu quero fazer dele um quadrado perfeito. Para isso, vou usar uma propriedade chamada proporção da proporção. Vou pegar a proporção um por um e vou subtrair esse arquivo Depois de configurar esse arquivo, aqui você pode notar que ele fez um quadrado, mas o problema é que ele esticou a imagem Agora, o OD alto é igual, mas destruiu a imagem. Agora, como podemos resolver esse problema? Para resolver o problema, temos outra propriedade , conhecida como ajuste do objeto. E aqui vou digitar cover object feed cover. Se eu definir esse arquivo, agora você poderá ver o resultado. Agora você pode ver que temos a imagem quadrada e ela também distorcerá a imagem Se eu reduzir a imagem em algo de 200 pixels, você também pode ver que isso distorce a imagem Ainda temos uma caixa quadrada. Além disso, podemos alterar a proporção. Suponha que eu queira criar um retângulo, aqui vou passar a proporção de um por dois e definir esse arquivo Agora você pode ver o resultado. Sem distorcer a imagem, ela se ajusta em qualquer retângulo ou Agora vou transformar essa imagem em imagem responsiva. Por enquanto, vou usar essa gravata uma por uma e, para testes móveis, vou usar um questionário de mídia Hemotype at the rate, media skin e, dentro das rodadas, vou definir a condição Digite o leme no máximo com e eu vou ultrapassar 500 pixels. Isso significa que no Wi tem menos de 500 pixels, então podemos aplicar CSS diferente a esse elemento. É essa a calibração que eu vou subir até isso, eu vou subir de forma diferente para esta imagem. Primeiro, vou selecionar a imagem ING e, em seguida, dentro do calibre do tipo de herói com 100% Sempre que a tela ficar com menos de 500 pixels , ela será definida como 100% dessa imagem. Como você pode ver, usamos a proporção esperada de um para um. Então, vamos configurar o arquivo. Depois de definir o arquivo, agora você pode ver que nossa imagem está quadrada. Se eu reduzir a largura do navegador, deixe-me mostrar aqui, a partir da inspeção, vou alterar a dimensão desse navegador Vou reduzir a largura do navegador. Então, como você pode notar, sempre que esse vio significa com menos de 500 pixels, ele dirá largura da imagem, 100%, algo assim. Como você pode ver aqui, usamos a proporção, é por isso que ela criou um quadrado perfeito. É assim que podemos responder nossa imagem de acordo com a tela do celular E se eu aumentar a largura da janela do navegador, novamente, ela se tornará uma pequena imagem quadrada. Então, espero que agora esteja claro para você como podemos usar a propriedade da proporção para tornar nossas imagens e sites responsivos Obrigado por assistir a esta programação de vídeos para nossos próximos dois io. 144. Regra @media do modo de exibição CSS: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS e, neste tutorial, aprenderemos o aprendizado de CSS É uma nova regra de mídia. Agora vamos tentar entender qual é o significado disso. O que é esse emo Quando precisamos abrir um site, precisamos usar um software especial chamado navegador e, atualmente, temos várias opções de navegador no mercado, como Chrome, age, Safari, Firefox, Opera Todos esses são navegadores populares no mercado. Sem isso, há mais navegadores. Mas se você notar, você pode ver em todos os navegadores que temos um controle comum, essa barra de controle. Todos os navegadores vêm com essa barra de URL. Aqui podemos fornecer o URL e acessar o site. Além disso, ele vem com botão de navegação e algumas opções. Também no lado direito, ele fornece a opção de abertura de rede, a opção marcador e a opção de menu Agora, o CSS nos fornece o controle para manipular o layout do navegador Se você quiser ocultar tudo isso, você pode chamá-lo assim e podemos alterar o modo do navegador de três maneiras diferentes. O primeiro valor é o navegador. É o valor padrão. Se usarmos o navegador, ele fornecerá todos os controles. Ele fornece navegação na barra de URL, marcador, Nutap, etc. Esse é o modo padrão e é conhecido como modo de exibição do navegador. Então, temos outra opção chamada UI mínima. Se usarmos esse modo , ele removerá a barra de navegação, a barra URL e a opção de marcador Isso vai mostrar que há mais controle em nosso navegador. Por fim, temos outro modo de exibição, que é o modo de tela cheia. Quando você abre um site em nosso navegador e elogiamos a tecla F 11, ela muda a janela do navegador para tela cheia. Depois de ativar o modo de tela cheia, ela oculta todos os controles. Agora, de acordo com o modo de exibição do seu site, você pode alterar o design da interface do usuário do seu site. Quero dizer que você pode alterar o estilo CSS do seu site. É por isso que o CSS introduziu uma nova consulta de mídia conhecida como modo de exibição. Agora vamos ver como podemos usar esse modo. Em primeiro lugar, precisamos digitar na taxa de mídia. Então, dentro do processo redondo, precisamos usar uma propriedade chamada modo de exibição. Aqui você pode usar qualquer um desses valores. Suponha que você possa usar a interface e o navegador mínimos em tela cheia. De acordo com esse valor, você pode alterar a propriedade CSS. Você define uma cor de degradação diferente no modo de tela cheia. Então, quando o usuário clicar na tecla F 11, ele transformará seu navegador no modo de tela cheia. Além disso, mudará a cor de fundo do seu site. Agora, vamos começar com a prática e ver como podemos usar esses três modos diferentes. 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á crio um nome de documento HTML com o nome do índice de pontos DML Como você pode ver em nossa etiqueta corporal, temos uma etiqueta de título dentro da etiqueta de estilo, estilo dela na seção de corpo. Ele atribuiu uma área de fabricação de fontes. Agora vou definir um modo de exibição dentro da nossa tag de estilo. Ele digita na taxa de mídia e dentro das rodadas, aqui vou digitar modo de exibição, modo de exibição e vou atribuir tela cheia Essa. Então, dentro do coless, podemos estilizar de acordo com nossas necessidades Em seguida, vou pegar esse slide. Nesta etapa, vou definir o navegador, padrão. E aqui eu sou um navegador de tipos. Em seguida, vou duplicar essa linha novamente e, desta vez, vou definir o modo, a interface mínima Então, dentro do modo de tela cheia, eu quero mudar a cor da fonte. Aqui eu estou digitando, primeiro eu quero selecionar o título uma tag, H uma, depois dentro do Calibra diz, aqui eu vou usar uma propriedade chamada color, color e vou defini-la em verde Em seguida, copio essa seleção e colo em outro modo de exibição. Aqui eu vou definir a cor vermelha. E, finalmente, vou configurá-lo para uma interface de usuário mínima, vou defini-lo em azul e vou definir esse arquivo. Depois de definir este arquivo, agora você pode vê-lo ativar nosso modo padrão, o navegador Mins. É por isso que a cor da nossa fonte se transformou em vermelha. Como eu disse, esse é o modo padrão. Aqui você pode ver todos os controles no meu navegador. Aqui você pode ver os botões de navegação, opção de recarga, a barra de URL. E outras opções. Agora vou elogiar depois de selecionar o navegador F 11. Se eu elogiar o F 11, agora você pode ver nosso navegador entrar no modo de exibição completa e também perceber que ainda é a cor da fonte. Agora, nossas cores de fonte se transformam em verde. Como você pode notar, não há barra de URL e outras opções, e ela ocupa a tela inteira do navegador. Se você quiser voltar ao modo padrão normal, então, novamente, você precisa elogiar o botão F 11. Espero que agora esteja claro para você qual é a diferença entre o modo de tela cheia e o modo navegador? Por último, temos outra opção chamada UI mínima. Funciona quando você converte nosso site em um WAP. Caso contrário, podemos criar um atalho, ícone no Textop. Precisamos de um servidor real para aplicar uma interface de usuário mínima. Caso contrário, não podemos criar o atalho e abri-lo como uma interface de usuário mínima Mas posso dar uma pequena demonstração de como é a aparência de uma interface de usuário mínima. Vamos ao editor de código is Studio. Como você pode ver, como criamos um nome de botão, abra uma janela mínima e, neste botão, vincule a essa função, abra uma janela personalizada. E aqui usamos um código Java Script. Nós criamos uma função. Vamos abrir uma janela personalizada No início, criamos uma janela em branco e eu defino com 500 pixels e altura 300 pixels e a chamamos de minha janela mínima. Então, nesta janela, escrevemos um contato. Aqui escrevemos um stimaltag H one, e em uma tag de estimativa com tipo, este é meu HTML personalizado Vou configurar esse arquivo. Depois de definir esse arquivo, se eu tentar clicar em abrir janela mínima, como você pode ver, é assim que uma janela mínima se parece. Essa janela é diferente da janela de quatro telas. Não temos nenhuma barra de navegação nela. Como não temos a opção de menu da barra de URL, mas temos a opção de minimizar, opção de maximizar e a barra de fechamento e o botão fechar. Mas o problema é que ele é aberto por um servidor ativo. É por isso que não posso aplicar essa regra de mediana a ela. Aqui, eu apenas tento mostrar como será a aparência de uma janela mínima. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 145. Tutorial de pseudo-curso de CSS Fullscreen: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado a CSS e, neste tutorial, vamos aprender uma nova classe Posido, que é em tela cheia Esta é a lista de Posidoclass que está disponível em CSS, e eu já abordei muitas classes de Posido em nossos tutoriais E nessa lista, o CSS adiciona uma nova classe Posidoclass , conhecida como Agora vamos ver, o que é o mini outubro? O que podemos fazer com o positoglass em tela cheia? Suponha que temos um navegador e, dentro desse navegador, temos um elemento DV Neste Deelement, talvez esteja cheio de texto, caso contrário, imagens Como você pode notar, um botão abaixo dele. Agora, se eu clicar nesse botão, quero exibir esse elemento profundo em tela cheia Algo assim, e para torná-lo em tela cheia, precisamos usar um pouco de JavaScript. Agora, depois de torná-lo em tela cheia, quero alterar o CSS minúsculo. Suponha que eu queira mudar a cor de fundo, caso contrário, eu queira mudar a cor do texto e, para tornar isso possível, CSS introduza esta tela cheia do Posidoglass Depois de convertermos esse mergulho em for screen, ele ativará essa Posidoclass acordo com essa vinculação Posidocls e aplicará esses estilos Vamos começar a prática e ver como podemos aplicar esse PosoCass. Como você pode ver lado a lado, abro meu editor de código do isal studio e meu navegador usando a extensão if server, e já crio um documento tM chamado index dot E como você pode ver em nossa etiqueta corporal, aqui criamos uma caixa profunda. Também dentro dessa profundidade, temos um parágrafo. Lá, criamos um botão, entramos em tela cheia, e eu já estilizo esse elemento profundo e nossa seção corporal em nossa seção de estilo. Agora, o problema é que nosso botão não está funcionando. Precisamos usar JavaScript para que isso funcione. Se você não conhece JavaScript, faça exatamente o que estou fazendo. Quero criar essa tela cheia profunda ao clicar nesse botão. Vou usar um evento de evento do JavaScript, algum tipo, marque este. É malvado sempre que eu clico nesse botão. Em seguida, precisamos direcionar essa caixa usando seu nome de ID. Para isso, precisamos usar o elemento dot get do documento por ID. Dentro dos versos redondos, dentro dos códigos únicos, vou digitar a caixa do nome de identificação Depois de direcionar essa caixa, quero aplicar um novo método do Java Screen , conhecido como tela cheia. O tipo Sumo dot é um método de solicitação do tipo Sum em tela cheia, este. Além disso, precisamos usar prensas redondas porque é um método e ponto e vírgula nesta linha Inicialmente, direcionamos esse elemento, o elemento box deep, usando seu nome de ID. Eu digito o ponto do documento para obter o elemento por ID. Agora vou configurar esse arquivo. Depois de configurar esse arquivo, se eu clicar nesse botão, ele transformará esse elemento profundo no modo de tela cheia, algo parecido. Se você quiser sair dessa tela cheia, basta clicar na tecla Scape Agora podemos aplicar esse vidro posito para tela. Eu quero mudar a cor de fundo desse elemento profundo. Por que fazemos isso para girar? Agora, vamos fazer esse seletor. Primeiro, vou usar um box drive com etiqueta, caixa, dois pontos, e precisamos usar a classe posito para girar Então, dentro dos carlivorss, podemos aplicar as propriedades. Agora eu quero mudar a cor de fundo. Então, digite o plano de fundo, e eu quero torná-lo verde claro, dessa cor. Além disso, quero alterar o tamanho da fonte. Tamanho da fonte, quero torná-la de 22 pixels. Agora, vamos configurar o arquivo. Depois de configurar esse arquivo, vou clicar nesse botão novamente, em tela cheia. Como você pode ver, agora, sua cor de fundo se torna verde, verde claro. Além disso, aumenta o tamanho da fonte. S é uma classe de pósito em tela cheia. Se você quiser citar esta tela inteira, basta elogiar a tecla Scape Em seguida, quero adicionar uma tag de cabeçalho e uma tag nesta caixa. Deixe-me mostrar um pouco do tipo H one e dentro dessa tag H one, vou digitar hello world. Eu vou salvá-lo novamente. Agora eu decido que, quando faço isso para a tela, quero alterar apenas a cor do parágrafo, a cor do texto do parágrafo. Para isso, precisamos criar um seletor diferente. Deixe-me te mostrar. Para isso, dupliquei a primeira vez que dupliquei esta seção e, em seguida, vou focar somente neste parágrafo Então, dentro desta caixa Posidoglass em tela cheia, eu quero direcionar o parágrafo, então eu digito P e depois quero mudar a cor da fonte Vou digitar uma cor e quero torná-la vermelha. Vou configurar esse arquivo. Depois de configurar esse arquivo, se eu torná-lo em tela cheia novamente, agora você poderá ver que ele mudou apenas a cor da fonte do parágrafo. Eu faço com que seja vermelho. É assim que podemos usar essa Positoclass. Além disso, você pode usar a mesma classe de posição sem positopls . Deixe-me te mostrar. Suponha que eu vá fazer a seção w e, aqui, eu vou usar outra positoclasse, não PositoGlas Se a caixa for zero, então dentro das redondas, vou mover esse positoclas Então eu miro essa tag P, incento essa tag de caixa, e eu quero fazer isso Eu quero mudar a cor. Eu quero fazer com que seja de cor verde. Então, se eu definir esse arquivo, agora você pode ver, agora você pode ver o parágrafo, ele tem a cor da fonte. Isso o torna verde porque não ativamos o modo de tela cheia e, se eu o tornar em tela cheia, ele ficará vermelho. Se eu voltar ao estágio antigo, novamente, ele se tornará verde. É assim que podemos usar essa PoidoClass. Podemos usar essa PositoClass com qualquer outra Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique por dentro do nosso próximo tutorial. 146. Tutorial de introdução do Sass: Olá, pessoal. Bem vindo de volta. Neste tutorial, vou apresentar a você o que é SAS? Por que precisamos usar o SAS? E como podemos usar o CAS? Nossa primeira pergunta é: o que é SAS? SAS significa folhas de estilo sintaticamente incríveis. É basicamente uma extensão CSS. Faremos o mesmo trabalho no arquivo CAS. Como fazemos no arquivo CSS. Caso contrário, podemos chamá-lo de pré-processador CSS. Hoje em dia, é muito necessário que você tenha conhecimento de qualquer pré-processador CSS Existem dois famosos pré-processadores CSS, SAS e menos. comparação, o SAS é mais popular porque o SS vem com recursos mais avançados do que menos. Se você concluir este curso, quero dizer que se você aprender CS automaticamente, poderá entender menos. Você só precisa enfrentar uma pequena diferença de sintaxe, nada mais. Agora a questão é que, como eu disse anteriormente, funciona como CSS. Então, por que o CS é mais popular do que o CSS? Porque há alguns motivos. Deixe-me te mostrar. Em primeiro lugar, é muito fácil de gerenciar. Quando trabalhamos com CSS, ele cria arquivos muito longos Às vezes, é muito difícil gerenciar arquivos longos. Mas se falamos sobre o SAS, é muito fácil de gerenciar. O próximo motivo que o tornou mais popular foi aumentar nossa velocidade de codificação em comparação com o CSS normal Mas é eficaz quando você trabalha com grandes projetos, não com projetos pequenos. Não é muito útil em projetos pequenos. Suponha que você queira criar um site de cinco páginas. Nesse caso, não é muito útil. Mas se você trabalha com um site complexo e com várias páginas , é muito útil A última coisa que o tornou mais popular a compatibilidade entre navegadores. Quando você usa CSS, alguns recursos não são suportados no navegador antigo. Às vezes, isso cria um grande problema, mas não há problema com o SAS por seu recurso embutido, ele funciona com qualquer navegador antigo Suponha que se você trabalha com Internet Explorer sete, caso contrário, se você trabalha com a versão em letras do navegador Chrome , não consegue ver nenhuma diferença na saída. Funciona da mesma forma que funciona na versão de cartas. Agora vamos ver como podemos usar o arquivo CS em nosso arquivo STL. O estranho é que não podemos usar o arquivo CS em um sml. Sim, é verdade. Não podemos usar o arquivo CS diretamente no Atmel. Mesmo o navegador não consegue entender o código SAS. O navegador só pode entender arquivos CSS, não o arquivo CS. Então, por que precisamos criar um arquivo CS, precisamos de um compilador SAS Ele compila o arquivo CS e o converte em arquivo CSS. Portanto, você precisa inserir o arquivo CSS no seu documento ETL, não no arquivo CS no seu documento ETL, não no Mas você precisa digitar seu código no arquivo CAS, não no arquivo CSS. Em seguida, você compila o código SAS e converte em arquivo CSS. Agora a pergunta é: o que é o compilador SAS? No próximo vídeo, saberemos o que é o compilador Cs. Agora, vamos falar sobre os recursos do OSS e abordaremos esses recursos em nossos próximos tutoriais Nosso primeiro recurso são as variáveis. Podemos armazenar valor em variáveis como uma linguagem de programação. Nosso segundo recurso é o aninhamento. Usando o aninhamento, podemos atribuir uma classe a outra classe. Caso contrário, podemos usar uma classe em outro ID. Este é um caso de uso de aninhamento. Nosso próximo recurso é parcial e entradas. Podemos criar um pequeno arquivo cs e importá-lo como módulos. Nosso quarto recurso são raposas. Usando mixins, você pode reutilizar seu código várias vezes. Nosso quinto recurso é estender. Suponha que você digite algum código em uma classe, mas queira reutilizar esses códigos em outra classe Nesse caso, você pode usar extensões. Nosso próximo recurso são os operadores. Operador significa operadores aritméticos. Se precisar executar algum cálculo, nesse caso, você pode usar esses recursos como adição, multiplicação, divisão, etc Nosso próximo recurso são as funções. Nosso SAS vem com algumas funções veladas, e você pode usar essas funções Como você pode criar suas próprias funções como linguagem de programação. Então, nosso segundo último recurso são as diretivas condicionais. Se você quiser executar algum trabalho condicional como Is condition, poderá usar esse recurso, e nosso último recurso são os loops Eu sei que você já está familiarizado com JavaScript e outras linguagens de programação. Então, não preciso explicar o que são loops e qual é o uso de loops Você pode usar qualquer tipo de loop, como quatro loops, Di loop, while loop, etc Todos eles estão disponíveis no SAS. Agora vamos falar sobre a sintaxe SAS. Basicamente, o CSR veio com dois tipos de sintaxe, sintaxe SCSS e sintaxe SASS Essas são basicamente extensões. SCS SAS. Basicamente, eles estão dentro, mas há uma pequena diferença. Suponha que tenhamos uma sintaxe CSS. E, como você pode ver, usamos um total de três tipos diferentes de seletores NebuL Nb AI e Neb anchor Como você pode ver, primeiro precisamos digitar os valores CSS do NebuL. Em seguida, precisamos digitar o valor CSS do Nb AI. Por fim, é necessário digitar os valores CSS da âncora do Neb. Mas se precisarmos usar o mesmo código na sintaxe SCSS nesse caso, precisamos digitar assim Precisamos selecionar um tipo de elemento Nab. Então, dentro dos alivss, precisamos digitar toda a sintaxe, UL, LI e A. Basicamente, chamamos esse Vamos aprender mais sobre isso em nossos próximos tutoriais Mas se você digitar a sintaxe da célula no código SAS, precisará digitar assim Você não precisa usar calivras nem ponto e vírgula. Você não precisa usar ponto e vírgula depois de uma propriedade. É muito parecido com a linguagem de programação Python. Mas para este tutorial, vou usar a sintaxe SCSS, esta Caso contrário, isso pode confundir você. Agora, vamos falar sobre o tipo de conhecimento que você precisa para começar. Para o CAS, você deve ter conhecimento básico de STML e deve ter um bom conhecimento de CSS Como eu disse anteriormente, em última análise, o arquivo CS foi compilado em um arquivo CSS. Portanto, você deve ter conhecimento da sintaxe CSS adequada. E se eu falar sobre codditor, você pode usar Para este tutorial, vou usar o código VS. Você pode usar qualquer editor de código. Então, isso é tudo para este tutorial. No próximo tutorial, falarei sobre o que é o compilador CAS e qual compilador vamos usar neste Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 147. Baixe e instale a compilação sass: Olá, pessoal. É bom ver você de volta. Neste tutorial, aprenderemos o que é o compilador SAS e como podemos baixar o compilador SAS, o que pode ajudar a compilar nosso arquivo CS em um arquivo CSS Como você pode ver no meu navegador, abro o site oficial do SAS, SAS hyphen lang.com Como você pode ver, ele fornece uma introdução básica do SAS. Se você tiver tempo, poderá lê-lo. A seguir, aqui você pode ver uma opção chamada Instalar. Basta clicar em. Em seguida, é redirecionado para esta página Se você rolar um pouco para baixo, aqui poderá ver um método diferente. Aqui você pode ver uma lista de compiladores e aqui você pode ver outro método instalar seu SAS usando o NPM Para este tutorial, não vou usar nenhum pacote de nós. Eu gostaria de usar o compilador e vou usar um compilador diferente, não esse, e o nome do nosso compilador Como você pode ver, esses são a maioria dos compiladores pagos. É por isso que vou usar um compilador gratuito, que é o Koala Você só precisa pesquisar o compilador Koala SS no seu navegador e clicar neste link, e clicar neste link, Este é o site oficial deste compilador. Como você pode ver, o Koala é um aplicativo de GUI para SAS Compass e CoffeeScript Nós o usamos para fins de compilação para essas linguagens, e você sabe que todas são linguagens de pré-processador Basicamente, usando esse aplicativo, podemos compilar todas essas linguagens Em primeiro lugar, precisamos baixar esse aplicativo. Para fazer o download, você precisa clicar neste botão verde, Baixar. Como você pode ver, nosso download já começou. Em seguida, você precisa abrir sua pasta de download e aqui você pode ver a configuração deste aplicativo, a configuração do Koala Agora vou instalar esse aplicativo no meu computador. O processo de instalação é muito simples, você precisa clicar duas vezes nele. Depois disso, você precisa clicar em Avançar e escolher o diretório onde deseja instalá-lo. Esse é o local padrão, basta clicar em Avançar. Como você pode ver, eu já instalei esse aplicativo, então não quero instalá-lo novamente, mas você precisa concluir o processo de instalação. Pode levar dois ou três minutos para concluir o processo de instalação e, depois de concluir o processo de instalação, ele se abre automaticamente. Por enquanto, vou cancelá-lo. Então, depois de concluir o processo de instalação, você precisa clicar no ícone do Koala para abri-lo Basta clicar duas vezes nele. Como você pode ver, a primeira vez está totalmente vazia. E a partir desse ponto, você pode adicionar qualquer arquivo SAS ou um arquivo is. Primeiro, vou entrar no meu editor e criar um arquivo CS. Como você pode ver, há uma pasta Nam Demo, e dentro dessa pasta Devo, há outra pasta Nam CSS E dentro dessa pasta CSS, vou criar um arquivo CS. Vamos criar um novo arquivo dentro dessa pasta. Estilo dot SCSS. Caso contrário, você também pode usar a sintaxe SASS. Mas, como eu disse anteriormente, para este tutorial, vou usar a sintaxe SSS Além disso, você pode ver o ícone SAS neste local. Agora, vamos adicionar um pouco de código SAS neste documento. Eu já copiei um código SAS e vou colá-lo aqui. Este código é para fins de demonstração, então você não precisa entendê-lo. No próximo vídeo, vou falar sobre isso. Como você pode ver, criamos nosso arquivo CS com sucesso. Agora, precisamos criar um arquivo CSS na mesma pasta com o mesmo nome. Vou criar um arquivo CSS nesta pasta, estilo dot CSS. É isso mesmo. E precisamos manter esse arquivo vazio. Não precisamos digitar nenhum código CSS nesse arquivo. Precisamos deixar em branco e agora precisamos abrir nosso KoalaOptare Vou abrir nosso KoalaOptare. Então, como você pode ver, lado a lado, abro meu Qarafopter e meu E aqui você pode ver dois arquivos diferentes como arquivo e um arquivo CSS. E agora precisamos mover essa pasta CSS neste aplicativo. Vou arrastar essa pasta e colocá-la aqui. É isso mesmo. Aqui você pode ver o pico automático todos os arquivos CSS e CS. Agora vou voltar ao nosso editor de código e vou fazer algumas alterações em nosso arquivo CS. Aqui você pode ver no meu editor, eu abro meu arquivo CS. Com isso, eu também abro meu arquivo CSS. Se eu mostrar meu arquivo CSS, como você pode ver, agora ele está totalmente vazio. Agora vou voltar para o arquivo CS e vou definir esse arquivo, controle. Então, se eu definir esse arquivo e mostrar meu arquivo CSS, aqui você pode ver o código CSS adequado. Portanto, esse aplicativo Kana compila o código SAS e converte em um código CSS Aqui você pode ver com a tag Nap, ele seleciona UltaGo, mas em nosso arquivo CS, dentro da tag Nap, usamos a tag Como você pode ver em nosso arquivo CS, usamos o Napkword uma vez Mas se eu mostrar um arquivo CSS, aqui você pode ver que ele usou a tag Nap três vezes com a tag UL com a tag LI com a tag ANCA Agora vamos fazer algumas alterações em nosso arquivo CS e ver o que aconteceu. Então, aqui eu quero aumentar o UL paddy de 20 pixels, tipo Summer, 20 pixels Se eu definir esse arquivo e mostrar meu arquivo CSS, aqui você pode ver que nossas alterações estão refletidas adequadamente no arquivo CSS. Você só precisa se lembrar de que não precisa alterar nada no seu arquivo CSS. A melhor opção é fechar o arquivo CSS e depois trabalhar com o arquivo CS. Espero que agora esteja claro para você como os compiladores CS funcionam Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 148. Tutorial de variáveis do Sass: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, aprenderemos as variáveis SAS. Mas, primeiro, vamos tentar entender o que são variáveis e por que devemos usá-las. Aqui você pode ver que criamos um seletor de body tag. Dentro desse seletor, definimos a cor de fundo, vermelho e a antena da família de fontes Com isso, vou pegar dois outros seletores H, um seletor e Spenselector Agora, se você notar, você pode ver que há uma coisa comum. São cores, cor vermelha. Para o corpo, uso a cor de fundo vermelha e, para cada tag, uso a cor da fonte vermelha e também uso a mesma cor para a tag span. Como você pode ver, o vermelho é a cor comum. Suponha que tenhamos usado a mesma cor em dez lugares. E agora precisamos mudar a cor. Então temos que ir a dez lugares para mudar a cor, e isso leva muito tempo. Para isso, o sus introduz variáveis. Em variáveis, tomamos o nome de um valor. No nosso caso, cor vermelha, e o nome da nossa variável é a cor principal do traço E você deve se lembrar do nome da variável, você precisa usar o cifrão. Primeiro, precisamos usar o nome da variável e, em seguida, armazenar o valor nessa variável. Em seguida, precisamos comprimir o nome da cor com esse nome de variável O principal benefício do uso de variáveis é quando precisamos alterar a cor primária. Suponha que eu queira mudar a cor primária vermelha para azul. Então, só precisamos fazer alterações nas variáveis, não em todos os seletores Não precisamos digitar o nome da cor azul nos lugares. Você só precisa fazer alterações na variável. Esse recurso também é introduzido no CSS, mas os navegadores antigos não oferecem suporte ao recurso CSS. Mas o SAS poderia. Sem perder seu tempo, vamos começar a prática e ver como as variáveis funcionam no SAS Aqui você pode ver lado a lado, eu abro meu Visual Studio Creaor e meu navegador e você já pode ver, eu crio um layout básico de página da web Aqui você pode ver o cabeçalho, o esterco, a barra lateral e também parte do conteúdo e o rodapé Se você perceber que pode ver, há uma cor comum no cabeçalho e no rodapé desta página da web Se eu passar o mouse sobre esses links, você poderá ver a mesma cor de fundo dessa tag âncora Além disso, se eu passar o mouse sobre meus itens laterais, você poderá ver a mesma cor marrom Além disso, se eu selecionar todo o conteúdo, você poderá ver a mesma cor de fundo por trás do conteúdo. Agora vou mostrar como podemos usar variáveis. Como você pode ver, nossa cor primária é marrom, então precisamos encontrar a cor marrom. Aqui você pode ver o nome da cor marrom. Usamos essa cor no Anchor hover, cabeçalho, na seção de rodapé , muito disso Agora eu quero substituir esse valor de cor pelo membro variável Para isso, precisamos criar uma variável. Então, aqui, eu vou criar uma variável. Inicialmente, precisamos usar cifrão, dólar e nosso membro variável é a cor principal Cor mínima. Eu vou usar a cor marrom. Agora vou substituir os nomes das cores nome da variável, cor principal. Então, primeiro, vou substituir o seletor Anchor Hover da barra superior, a cor ou cor ou Também vou substituí-lo no seletor de cabeçalho, cor principal Em seguida, no item da nossa lista de menu. Em seguida, quero substituí-lo em nossa seção de conteúdo. E também vou substituí-lo em nossa barra lateral. Em seguida, vou substituí-lo em nossa seção de rodapé. Então está feito. Se eu definir esse arquivo e recarregar meu navegador, você verá que não há alterações Você pode ver a mesma cor do cabeçalho, a mesma cor do rodapé, e se eu abrir meu fofinho nos links do meu menu, você pode ver a cor de fundo. Também é marrom. Substituí com sucesso nosso valor de cor por uma variável. Agora, quero mudar a cor principal deste site, marrom para azul. Quando coloco o cursor nos itens do menu, quero a cor azul marrom Basicamente, quero dizer que quero mudar a cor principal, marrom para azul. Vou digitar cabelo azul. Se eu definir esse arquivo e recarregar meu navegador, você poderá ver o resultado Você também pode ver a cor azul na seção do cabeçalho, na seção rodapé, na seção do menu e na seção da barra lateral Agora não precisamos mudar a cor várias vezes porque agora usamos a variável. Agora você pode colocar qualquer cor de uma vez, e ela refletirá todas as páginas. Essa é a vantagem de usar variáveis. Você só precisa usar o nome da variável como um valor. Agora, se eu mostrar meu arquivo CSS, aqui você pode ver que não há variáveis. Só você pode ver os nomes das cores, fundo azul. Não é só trabalhar com cores. Você pode colocar qualquer tipo de valor na variável. Suponha que eu queira alterar o estilo da fonte em toda a página da web. Nesse caso, podemos usar variáveis. Vou criar outra variável, e o nome da nossa variável é fonte principal, Dólar, fonte principal. Cólon. Por enquanto, vou usar aerial e agora vou substituir todo o valor da fonte por essa variável Vou substituir a fonte aérea por essa variável, fonte principal E também precisamos substituir no seletor de cabeçalho, a fonte principal Por fim, vou substituí-lo em nosso cabeçalho de conteúdo. Fonte mínima. Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, não haverá alterações. Funcionou perfeitamente. Você pode vê-lo imprimir uma fonte real em toda a página da web. Agora, se precisarmos alterar a família da fonte , precisaremos alterá-la várias vezes. Agora, vamos mudar a família de fontes em toda a página da web e vou usar o que não é uma fonte Se eu definir esse arquivo e recarregar meu navegador, você poderá ver o estilo da fonte Como você pode ver, ele substitui a fonte Areal pela VardanaFont. Agora está claro para você, qual é o uso da variável no SAS Isso não apenas economiza nosso tempo, mas também aumenta nossa produtividade. Podemos mudar milhares de lugares mudando um só lugar. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 149. Tutorial de Nesting do Sass: Olá, pessoal. Bem-vindo de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos o agrupamento do SAS Aqui você pode ver três seletores diferentes. Como você pode ver em nosso primeiro seletor, eu uso a tag Nap com a tag UL, e no nosso segundo seletor, eu uso naptag com a tag Ali, e no nosso último seletor, usamos a tag e no nosso último seletor, Nap O que é comum entre esses três? Que é Nap tag. Como você pode ver, se usarmos a sintaxe SS , precisaremos usar a tag Nap três vezes Mas se digitarmos o mesmo código no SAS, precisaremos digitar assim e chamaremos esse método de aninhamento Aqui você pode ver que, primeiro, iniciamos a tag Nap, depois, dentro do Caliss, estilizamos todos esses Você selecionará nosso seletor de âncora Ali. Se usarmos aninhamento, não precisaremos digitar a palavra-chave dep três vezes e, dentro do Liverss precisaremos selecionar todos os outros seletores Que está relacionado ao naptag. Mas quando eu configuro o arquivo CS, ele retornará esse tipo de código CSS. Isso reduzirá alguns códigos de escalação, mas retornará o mesmo resultado Por fim, sem perder tempo, vamos estudar a prática e ver como funciona Então, aqui você pode ver lado a lado, eu abro meu criador visual de parafusos e meu navegador e já crio um layout básico da web. E no meu Visual Studio Cdiator, você pode ver o iOpenT 3.5, nosso documento de estimativa, nosso arquivo CS e nosso arquivo CSS Você sabe, eu uso esse layout em nosso tutorial anterior, você pode ver as variáveis que eu crio em nosso tutorial anterior. Mas neste contrato de estúdio, aprenderemos como podemos usar o aninhamento Mas, primeiro, precisamos encontrar a posição em que podemos usar o aninhamento Vou rolar um pouco para baixo. Aqui você pode ver o seletor principal de Br. Como você pode ver, após o seletor superior de Br, usamos a barra superior com UL, UL Li, etiqueta de ancoragem e Esse é o correto uso do método de aninhamento. Primeiro, vou copiar o CSS da UL. Copie e, em seguida, vou colá-lo dentro do seletor Tobar porque tobr é a tag comum Agora, esse seletor não é necessário, então vou removê-lo Em seguida, você pode ver dentro da tag UL, há uma tag LI. Como você pode ver, eu já uso a tag UL na seção da barra superior. Agora vou copiar somente o seletor de IA dessa posição para essa posição Copiar. Vou colá-lo dentro da tag UL. Primeiro, nosso seletor tobr e dentro do seletor tobr, coloquei o seletor UL e, em seguida, dentro do seletor UL, coloquei o seletor AI . Agora eu não preciso desse seletor de teses, então vou remover E agora você pode ver dentro do seletor Tobar que temos a etiqueta âncora Agora vou copiar somente o seletor de tags âncora e colá-lo fora da tag UL Vou remover esse código. Eu não preciso disso agora. Agora você pode ver um seletor de Hobart. É um seletor Hober âncora, não o seletor TBarhber não Vou copiar esse seletor de Hobart e vou usá-lo dentro da tag nga e vou usá-lo dentro da tag nga nessa posição. Vou remover esse. E agora eu quero te contar uma coisa nova. Como você pode ver, dentro da tag âncora, criamos a tag Anchor Hobert Portanto, não é necessário usar a tag âncora novamente para que possamos remover a tag Anca Aqui podemos usar o sinal da pessoa, algo assim. Isso significa que usamos esse efeito Her com a etiqueta principal. Isso criará a tag Her de sua tag principal. Se eu definir esse arquivo e atualizar meu navegador, aqui você pode ver que não há alterações É o trabalho como está. Chamamos esse método de aninhamento. Da mesma forma, seguiremos o mesmo processo para a seção de cabeçalho. Vou copiar a tag H one e colá-la dentro da tag de cabeçalho. Vou remover esse. Pois vou seguir o mesmo processo para a seção do menu. Primeiro, vou copiar a parte UL desse menu e colá-la dentro da seção do menu, vou remover a antiga. E então vou copiar a parte de IA desse menu e colá-la dentro da seção do menu. E então eu vou remover este. Nosso próximo selecionado é o seletor de âncora, que está dentro do seletor LI Então, vou copiar a tag âncora e colá-la dentro da tag LI E então eu vou remover este. E nossa próxima seleção é a etiqueta Anchor Hobart. Então, vou copiar esse seletor. Então, como você pode ver, é a tag âncora Hobart, então precisamos colá-la dentro da tag âncora E então precisamos remover a etiqueta de ar, e podemos usar uma pessoa aqui. Por enquanto, esse é inútil, então eu quero removê-lo. Então, basicamente, é criar nosso código CSS de forma muito gerenciável. Se eu definir esse arquivo e recarregar meu navegador, como você pode ver, não haverá alterações E agora não precisamos usar esse seletor de menu várias vezes Em seguida, vou seguir o processo de agrupamento da nossa seção de conteúdo Então, primeiro, vou copiar o seletor s two. Em seguida, vou colá-lo na seção de conteúdo, vou remover esse. Em seguida, você pode ver um pseudosseletor chamado seleção. Você pode ver que usamos essa seleção em toda a seção de conteúdo, vou copiar apenas o pseudo seletor Vou colá-lo na seção de conteúdo, não na seção ST. E então eu vou removê-lo. Como você sabe, para o pseudo seletor, precisamos usar o sinal de pessoa, então vou digitar pessoa Se eu salvar esse arquivo e recarregar meu navegador, você verá que não há alterações Espero que agora esteja claro para você o que é aninhamento e como podemos usar o aninhamento Obrigado por assistir a este vídeo. Fique ligado no nosso próximo estúdio. 150. Parciais do Sass e Tutorial de importações: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos o que é parcial e importa. Então, primeiro, vamos nos concentrar no parcial. Parcial significa partes. Eu quero dizer que partes do SS estão bem. Suponha que temos um arquivo CS e nosso arquivo é um arquivo CS de ponto principal, e esse é nosso arquivo principal. E, como você sabe, se criarmos um site, nosso site dividido por cabeçalho, conteúdo, sideware e rodapé, às vezes precisamos criar designs diferentes para páginas diferentes Mas o problema é: quando digitamos todo o código em um único arquivo? Isso torna nosso arquivo muito pesado e confuso. Precisamos rolar nossa página para cima e para baixo várias vezes. Então, para resolver esse problema, separamos nosso layout. Para cabeçalho, criamos arquivo de cabeçalho para conteúdo, criamos um arquivo diferente para barra lateral e rodapé Se trabalharmos com variáveis, também criaremos outro arquivo para variáveis. Basicamente, é organizar nosso código e reduzir a falta de jeito Suponha que concluamos o estilo da seção do cabeçalho e, em seguida, precisamos abri-lo novamente. Podemos abrir a peça especificada. Por que precisamos mudar? Esse é o conceito de parcial. Agora fale sobre importações. Depois de criar as diferentes partes, precisamos inserir essas partes em nosso arquivo principal. Para isso, precisamos usar uma palavra-chave especial, input. Na entrada da taxa, precisamos digitar o cabeçalho do nome do arquivo. Uma coisa importante que você precisa lembrar. Você precisa criar esse mesmo arquivo de extensão. Eu quero dizer arquivo CS, não arquivo CSS. Você não pode inserir o arquivo CSS no arquivo principal. Obviamente, você precisa criar um arquivo CS. E outra coisa que você precisa lembrar ao criar seu arquivo separado, você precisa usar o undersco antes Eu quero dizer underscohader dot SCSS. Nosso sinal de sublinhado reconhece que este não é o arquivo principal, então nosso compilador CS identificou com sucesso que este é um arquivo parcial e precisamos incluí-lo em nosso arquivo principal É por isso que não precisamos de um arquivo CSS separado para arquivos parciais. Se você usa a sintaxe SASS, então, para seu arquivo parcial, você também precisa usar a sintaxe SASS Então, sem perder seu tempo, vamos começar a prática e ver como podemos usar parciais e entradas Como você pode ver, eu já abro meu aplicativo KOA e abro nossa pasta CSS neste aplicativo Com isso, também abro o editor de código do Visual Studio. Como você pode ver, este é o nosso Min CSF, estilo dot Sss. E agora vou dividir esse arquivo com pas. Em primeiro lugar, vou começar com essas variáveis. Quero criar um arquivo CS separado para nossas variáveis. Primeiro, vou criar um novo arquivo em nossa pasta CSS. E o nome do nosso arquivo é variáveis. Como eu disse anteriormente, para criar um arquivo parcial, precisamos usar variáveis underscosge undersco Dot, nossa extensão é C é é, então eu vou pressionar Enter. Como você pode ver, ele limpou nosso arquivo e, em seguida, vou cortar minhas variáveis desse arquivo e colá-las dentro do arquivo de variáveis E eu vou removê-lo do nosso arquivo principal. Então, primeiro, vou salvar esse arquivo. Em seguida, precisamos incluir esse arquivo em nosso arquivo de estilo. Para isso, primeiro, precisamos digitar no sinal vermelho e depois digitar Importar. Importe dentro dos códigos duplos. Precisamos digitar o nome do arquivo, mas não precisamos usar undersCosign, precisamos digitar variáveis Você não precisa mencionar a extensão do arquivo. Nosso compilador é inteligente o suficiente para entender a extensão do arquivo e, em seguida, você precisa usar ponto e vírgula para finalizar essa linha Em seguida, vou criar um novo arquivo para nossa seção de cabeçalho. Então, vou digitar o cabeçalho undersco. Então eu vou pressionar Enter. Como você pode ver, ele criou um novo arquivo e agora eu quero separar nossa seção de cabeçalho. Para isso, vou selecionar na barra superior. Na seção da barra superior, quero copiar nosso cabeçalho, também o menu. Vou recortar e colar dentro do arquivo de cabeçalho. É isso mesmo. Para nossa parte do cabeçalho, selecionamos a seção de cabeçalho Tobb, também a seção do menu E então precisamos importar o arquivo em nosso arquivo principal, que é o estilo dot Sss Vou digitar no vermelho, Importar e, dentro do campo duplo, precisamos digitar o nome do arquivo, que é cabeçalho, depois ponto e vírgula dois nesta linha Agora, para nossa seção de conteúdo, vou criar outro arquivo. Dentro da pasta CSS, vou criar o conteúdo undersco SCS e, em seguida, vou pressionar Enter Como você pode ver, ele cria um novo arquivo. Em seguida, volto ao meu arquivo SSS de estilo e vou cortar essa parte do conteúdo E eu vou colá-lo dentro do arquivo SCSS de pontos de conteúdo Eu vou configurar esse arquivo também. De forma semelhante, precisamos inserir esse arquivo em nosso arquivo principal. Então, vou duplicar essa linha e aqui vou digitar contain Em seguida, precisamos criar um arquivo para nossa seção de guerras paralelas. Vou criar um novo arquivo em nossa pasta CSS. Sublinhe a barra lateral Sss . Como você pode ver, criamos um novo arquivo para nossa barra lateral e, em seguida, precisamos cortar a seção lateral do arquivo CSS de estilo Vou cortar essa seção lateral desse arquivo. E eu vou colá-lo dentro desse arquivo Sidewd. E então eu vou configurar esse arquivo. Agora precisamos inserir esse arquivo em nosso arquivo de estilo. Vou começar esta linha e aqui vou digitar sidebard. Finalmente, vou criar um novo arquivo para nossa seção de rodapé Então, dentro dessa pasta***, mais uma vez, vou criar um novo arquivo, undersCoefter, dot scss Neste arquivo, quero estilizar nossa parte do rodapé. Vou cortar essa parte colar dentro da seção de rodapé Então eu vou configurar esse arquivo. Voltarei ao nosso arquivo principal, denominado arquivo CS. Agora preciso inserir a seção de rodapé em nosso arquivo principal. Então, duplique essa linha e aqui vou digitar rodapé. Vou configurar esse arquivo. Por fim, você pode ver a seção de consulta de mídia. Nós o usamos para fins responsivos. Se você quiser separar essa parte, sim, você pode. Vamos criar outro arquivo para a seção de consultas de mídia. Dentro dessa pasta***, vou criar outra pasta Vou criar um arquivo em sco media. Dot SCs e, em seguida, vou pressionar Enter. Em seguida, vou cortar a seção de consulta de mídia e colá-la dentro desse arquivo de mídia. Eu vou configurar este. Como você sabe, precisamos inserir esse arquivo em nosso arquivo principal. Vou duplicar essa linha aqui. Vou digitar nossa linha tênue, que é mídia E eu vou pressionar Control S para definir esse arquivo. Usando a técnica parcial, separamos com sucesso nosso layout da web. Separamos nossa seção de cabeçalho, seção de conteúdo, seção de barra lateral, seção de rodapé, também as consultas de mídia e as variáveis É a falta de jeito do nosso site pelo rádio. Se eu abrir meu arquivo SML, deixe-me mostrar. Como você pode ver, esse é o nosso layout HTML. Vamos recarregar o arquivo. Como você pode ver, não há mudanças. É L do jeito que está. Agora, suponha que você queira alterar a cor de fundo do cabeçalho e do rodapé Nesse caso, você precisa abrir o arquivo de variáveis. E a partir daqui, você pode mudar sua cor principal. Eu quero um pouco de cor verde, algo assim. Se eu sentar nessa pilha e depois voltar ao navegador e recarregar meu navegador, aqui você pode ver o resultado Mudou nossa cor principal. Se eu mostrar meu arquivo CSS, deixe-me mostrar o estilo CSS de pontos. Aqui você pode vê-lo seguindo a sequência de nossos arquivos de entrada. Primeiro Tpbard, depois vem o cabeçalho, depois vem o conteúdo e, em seguida, vem o rodapé do Atlas da barra lateral e, em seguida , nossa consulta de mídia. Após a consulta de mídia, como você pode ver, nosso corpo foi selecionado e nosso rapper foi selecionado Se eu mostrar o arquivo SAS de estilo, você pode seguir a sequência. Primeiro, nossas variáveis, o cabeçalho contém a consulta de mídia do rodapé da barra lateral e, como você pode ver, nossa seção de corpo e nossa seção de rapper Espero que agora esteja claro para você o que é parcial e importa. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 151. Tutorial do Sass Mixins: Olá, pessoal, é bom ver vocês de volta. Neste tutorial, vamos aprender um novo recurso Vlated SAS Neste tutorial, aprenderemos que as raposas são um recurso muito útil Suponha que temos duas classes diferentes, classe um e classe dois. Como você pode ver, eu uso propriedade botter radius, ambas as classes Para a classe um, eu uso o raio de borda de cinco pixels, e para a classe dois, eu uso o raio de borda de dez pixels Como você pode ver, eu uso propriedades semelhantes em ambas as classes. Sua propriedade é a mesma, mas seu valor é diferente. Para nosso antigo navegador Chrome, usamos Bear Radius com webkit, e para nossos antigos navegadores Mozilla, e para nossos antigos navegadores Mozilla navegadores Portanto, é um método CSS simples. Mas o problema é que, se precisarmos usar propriedades similares dez vezes, o que acontecerá? Em seguida, precisamos digitar 30 linhas de código. Para resolver esse problema, o sus introduz misturas. As misturas funcionam basicamente como funções. Se você tinha conhecimento de JavaScript, então você já está familiarizado com as funções. Deixe-me esclarecer esse conceito. Eu vou te mostrar um exemplo. Se você quiser criar mixagem no SAS, primeiro você precisa digitar add mixins e, em seguida, usar o nome mix Você pode usar qualquer nome. No nosso caso, raio BD Só precisa se lembrar que não forneça nenhum espaço nesse nome e, em seguida, você precisa fazer corridas redondas que é totalmente opcional. Se você quiser usar qualquer parâmetro, precisará passar o nome da variável. Como você pode ver, no nosso caso, valor, então precisamos usar essas três propriedades dentro dessa mistura. Além disso, você pode passar o parâmetro com essa propriedade. Dessa forma, podemos criar nossa função de mixagem. Agora, a questão é como podemos usar essa função de mixagem em nosso código CSS? Deixe-me te mostrar. Para isso, vou usar a classe um. Se eu quiser usar essa mistura, precisamos digitar a taxa include e, em seguida, nosso nome de mixagem, raio de borda Dentro do parêntese, precisamos passar o valor do raio da borda como Quando chamo essa função de mistura, precisamos passar um valor como parâmetro e, em seguida, podemos usar esse parâmetro como um valor, valor para três propriedades diferentes. Sem perder seu tempo, vamos começar a prática e tentar entender como podemos usar os mixins Como você pode ver, lado a lado, abro meu Visual Studio Corretor e meu navegador e já crio um novo documento DML E aqui você pode ver no meu navegador que já criamos três div diferentes para este exemplo e também definimos três IDs diferentes para essas três div Para nossa primeira tentativa, definimos primeiro. Para o segundo, definimos o segundo e, para o último, se definirmos o terceiro, e também vinculo nosso arquivo CSS a este documento. Então, vamos entrar no arquivo CS e tentar explorar como a mixagem funciona. No começo, quero definir ideias de fronteira para todos esses três D. Para isso, vou usar o método de mistura. Vamos criar uma mistura. Adicione a taxa de mistura. Depois de misturar Qard, precisamos usar o nome da mixagem e nosso nome de mixagem é BD radius E então precisamos usar parênteses para nossos parâmetros. É muito semelhante à função JavaScript. Então, dentro do Kaliss, vou definir nossa primeira propriedade e nosso primeiro nome de propriedade é dash web keith Por enquanto, vou definir o raio da barra por pixel e duplicar essa linha para digitar Primeiro, eu uso o prefixo para nosso antigo navegador Crone e depois vou usar o prefixo para o navegador Mozilla, então vou E, finalmente, vou usar o raio exato da borda da propriedade Agora nossa mistura está pronta para uso. Lembre-se de que não usamos nenhum parâmetro nessa função de mixagem porque, por enquanto, não quero passar nenhum valor como parâmetro. Primeiro, vou usar essa função de mixagem em nosso primeiro toque. Para isso, primeiro, precisamos digitar Incluir palavra-chave na taxa, incluir. Depois da palavra-chave Include, precisamos digitar o nome da mixagem, e nosso nome de mixagem é VD radius Em seguida, parênteses e subagin para finalizar esta linha. Lembre-se de que, se você quiser chamar essa função de combinação, sempre precisará usar a palavra-chave add the red include. Agora, se eu definir esse arquivo e recarregar meu navegador, você poderá ver o resultado Você pode ver o raio da fronteira em nosso primeiro salto. E agora vou chamar a mesma função de mixagem em nossa segunda e terceira profundidade. Se eu definir esse arquivo e reescrever meu navegador, você poderá ver o mesmo resultado, todas essas três profundezas Agora eu quero três rádios de borda diferentes para essas três profundezas e agora quero três rádios de borda diferentes para essas Suponha que, para nosso primeiro af, eu queira um raio de borda de cinco pixels Para nosso segundo surdo, quero um raio boer de dez pixels e, para nosso terceiro, quero um raio de borda de 15 pixels Nesse caso, precisamos usar o parâmetro em nossa função de mixagem. Precisamos definir um nome de variável como parâmetro. Para isso, precisamos usar cifrão, dólar e o nome da nossa variável é valor. Em seguida, copiarei esse valor e o usarei como um valor de propriedade. Algo parecido. Agora precisamos passar o valor quando chamamos a função de mixagem. Pela primeira vez, vou dizer cinco pixels. Da mesma forma, para nosso segundo DVD, quero usar um raio de boer de dez pixels, E para nosso último DVD, quero usar um raio de borda de 15 pixels. Se eu definir esse arquivo e recarregar meu navegador, você poderá ver o resultado Então, como você pode ver, configuramos com sucesso três rádios de fronteira diferentes para essas três ações Este é o caso de uso da função de mixagem no SAS. Espero que agora esteja claro para você. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo estúdio 152. Tutorial do Sass Extend: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado ao SAS. E neste tutorial, você aprenderá um recurso muito útil, que é a extensão. Suponha que temos uma classe chamada classe um e, como você pode ver, usamos quatro propriedades nessa classe: cor, tamanho da fonte, preenchimento e altura da linha Com isso, temos outra classe, e o nome da nossa classe é classe dois. Como você pode ver, em nossa classe um, usamos a cor vermelha, e na nossa classe dois, usamos a cor laranja. Aqui você pode ver, sem a propriedade de cor, todas as propriedades e seus valores são iguais. tamanho da fonte, o preenchimento e o fiapo. Tudo é o mesmo. Agora, suponha que temos outra classe, classe três. Da mesma forma, sem cor, todas as propriedades são iguais, seu tamanho de fonte, seu preenchimento e sua altura da linha Por isso, repetimos sua proberidade e seu valor ao tempo. Eu quero dizer que precisamos digitar seis linhas extras para isso. Então, para lidar com esse tipo de situação, CS introduziu um novo método, que existe. Por que precisamos trabalhar com o arquivo CS primeiro Precisamos criar mais um do jeito que está. Mas quando criamos nossa classe dois, primeiro precisamos substituir a propriedade de cor porque não quero repetir essa cor vermelha para esse DV É por isso que eu exibo essa cor. Em seguida, você precisa usar a palavra-chave extend, na extensão vermelha, e eu quero estender essa classe com a propriedade class one. É por isso que eu digito classe um. Você pode estender com o ID da classe, o que quiser. Da mesma forma, para nossa terceira aula, precisamos apenas substituir a cor verde e, em seguida seguir o processo semelhante Adicione a extensão vermelha ou a classe um. Isso significa que eu quero usar a propriedade de classe um na classe três. Então, sem perder seu tempo, vamos começar a prática e tentar entender como podemos usar o método extend Como você pode ver, lado a lado, abro meu criador do Visual Studio e meu navegador usando a extensão de servidor, e também abro nosso aplicativo Koala Como você pode ver, temos que distinguir três profundidades diferentes com suas cores de fundo e tamanhos diferentes. Para esses três Deep, usamos três IDs diferentes, primeiro, segundo e terceiro. Este é o nosso arquivo CSS, estilo dot CSS. Se eu mostrar meu arquivo CSS, aqui você pode ver , em nossa primeira queda, nossa cor de fundo é cinza e com esses 300 pixels Da mesma forma, para nossa segunda queda, usamos fundo colorido de laranja e com 400 pixels E para nosso terceiro mergulho, usamos cor de fundo vermelha e com 600 pixels. Sem essas duas propriedades, todas as propriedades e suas variações são iguais. Você pode notá-lo preenchendo 15 pixels, borda, raio de dez pixels, família de fontes, antena, tamanho da fonte 20 Se seguirmos esse método regular , precisaremos digitar oito linhas extras. Então, para resolver esse tipo de problema, o SAS introduz extend. Vamos voltar ao arquivo CS. Não vamos mudar nada em nosso primeiro if, mas em nosso segundo Dave, vou usar o método extend Deixe-me te mostrar. Primeiro, vou excluir essas quatro linhas, o raio da borda de preenchimento, a família e os lados da fonte Em seguida, vou usar a palavra-chave, na extensão at. E agora eu quero estender esse segundo ID com o primeiro ID. Aqui, precisamos digitar has tag primeiro. Em seguida, ponto-e-vírgula para finalizar esta linha. Se eu definir esse arquivo, aqui você pode ver que não há alterações. Funcionou perfeitamente. Em seguida, vou seguir esse processo semelhante para nossa terceira profundidade. Vou remover as propriedades, e vou estender no vermelho, estender e quero estender nosso terceiro e com nosso primeiro D tem tag primeiro. Em seguida, semicron para terminar esta linha. Se eu definir esse arquivo, você verá não há alterações em nosso navegador. Portanto, estendemos com sucesso nosso primeiro ID. Mas se eu mostrar meu arquivo CSS, deixe-me mostrar como você pode ver que ele cria uma combinação de seletor de ID, primeiro, segundo e terceiro, e você também pode ver dois IDs diferentes, segundo e terceiro Ele é usado apenas para sobrescrever cor de fundo e a profundidade com 400 pixels, 600 pixels, fundo vermelho e fundo laranja Como você pode ver, é muito útil. Se você notar, pode ver que é muito parecido com as misturas, mas há uma diferença entre mixagens e extensões. Qual é a diferença? A primeira diferença é que podemos passar um valor como parâmetro em mixins, mas não podemos passar o valor como parâmetro em extensão A segunda diferença é que podemos usar o seletor combinado em extensão Mas dentro dos mixins, não podemos usar o seletor combinado, e agora vou mostrar outro método, como podemos usar extend Então você já conhece o processo, como podemos usar a extensão. Primeiro, precisamos criar uma classe e, em seguida, usando essa classe, podemos estender essa classe com outra classe e você conhece o processo. Suponha que agora você decida que não quer mostrar a classe um em seu arquivo CSS, mas quer usar a propriedade dela na classe dois e na classe três. Nesse caso, você precisa usar o sinal de porcentagem antes do nome da classe. Agora, a classe 1 é reutilizável, semelhante às misturas Chamamos isso de suporte BathOdPlace. Agora, o espaço reservado, não será refletido em seu arquivo CSS Se você quiser estender sua propriedade com esse espaço reservado, precisará usar, na extensão auxiliar, o sinal de porcentagem e o nome da classe Você só precisa se lembrar do espaço reservado e ampliar o trabalho em conjunto Então, deixe-me mostrar a demonstração real. Mais uma vez, estou de volta ao meu coordenador de estúdio visual. Então, primeiro, vou criar um espaço reservado, então vou remover essa hastag e depois vou Agora transformamos nosso primeiro ID em um espaço reservado, e vou usar esse espaço reservado em nossa segunda etapa E se você quiser usar o espaço reservado com extensão, precisará usar percentisina Agora, nosso segundo div se estende com esse espaço reservado. Além disso, quero estender nosso terceiro mergulho com esse espaço reservado Vou usar porcentagens aqui. Eu não configuro esse arquivo. Se eu definir esse arquivo primeiro, ele destruirá essas propriedades profundas porque transformamos nosso primeiro ID em um espaço reservado Como eu disse anteriormente, nosso espaço reservado não será refletido em nosso arquivo CSS Se eu definir esse arquivo, você poderá ver o resultado. Primeiro, ele destrói nossa primeira profundidade, mas manteve a propriedade anterior para o segundo e o terceiro mergulho Se eu mostrar meu arquivo CSS, aqui você pode ver o resultado. Aqui você pode ver que existem aqueles nomes selecionados IDF. Você pode ver apenas dois seletores, ID segundo e ID terceiro Primeiro, ele cria uma combinação usando o segundo ID e o terceiro ID e, em seguida, cria o segundo seletor de ID e o terceiro seletor de ID para substituir a cor e a largura do plano de fundo Usando o espaço reservado, podemos criar um código reutilizável e usá-lo várias vezes Espero que agora esteja claro para você o que é extensão e espaço reservado No próximo tutorial, aprenderemos os operadores do SAS. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 153. Tutorial de operadores do Sass: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado ao CS e, neste tutorial, aprenderemos os operadores do CS. Aqui você pode ver que temos um total de cinco operadores diferentes. Nosso primeiro nome de operador é operador de igualdade. Em seguida, vêm o operador relacional, numérico, o operador de string e o operador wllian E neste tutorial, aprenderemos operador de igualdade, operador relacional e operador wollan Mas, a princípio, vamos tentar entender o que são os operadores do meningum. Primeiro, vou falar sobre igualdade e operador relacional Como você pode ver em nosso operador de igualdade, temos dois tipos de operador, duplamente igual ao operador e não igual ao operador. Em igual ao operador, precisamos usar seno igual duas vezes Mas se não for igual ao operador, primeiro, precisamos usar a explicação seno, depois precisamos usar seno igual Significa que não é igual. Usando igual ao operador, podemos comparar valores. Suponha que nosso primeiro valor seja cinco, cinco igual a cinco, então ele retornará verdadeiro porque os dois valores são iguais. Da mesma forma, se eu usar não igual a seno, ele também retornará um valor verdadeiro ou falso acordo com a comparação Esse é o uso do operador de igualdade. Vamos aprender mais sobre isso em nossos treinos. Por outro lado, temos operadores relacionais. E vem com quatro operadores diferentes. Menor que operador, maior que operador, menor que igual ao operador, maior que igual ao operador. Todo esse uso do operador de igualdade e do operador relacional com a condição IP no SAS é chamado de função I. Em nossos próximos tutoriais, aprenderemos sobre isso Neste tutorial, aprenderemos como podemos usar condições com isso? Sem perder seu tempo, vamos começar pela prática. Aqui você pode ver, eu já coloquei minha pasta CSS neste compilador SS Quala, e você também pode ver, eu abro nosso arquivo CS e nosso arquivo CSS lado a lado, e aqui você pode ver um seletor de classes, classe um Agora vou começar essa prática com operador de igualdade. Deixe-me te mostrar. Primeiro, vou usar uma propriedade CSS, que é preenchimento. Preenchimento, dez pixels iguais a dez pixels. Aqui vou comparar dois valores. Se eu definir esse arquivo, aqui você pode ver em nosso arquivo CSS que é preenchimento escrito, verdadeiro Aqui, combinamos dez pixels iguais a dez pixels, quando eu defino esse arquivo, está escrito como verdadeiro. Sim. A condição é verdadeira, mas não usamos esse operador dessa forma. Se você está familiarizado com JavaScript, então você sabe disso. Se você conhece JavaScript, então você já está familiarizado com a condição p, e vamos aprender sobre isso em nossos próximos tutoriais Aqui, eu apenas digo como podemos usar operadores de comparação. Aqui você pode ver que comparamos dez pixels com dez pixels, mas se eu alterar o valor de dez pixels para dez EM se eu definir esse arquivo, agora você pode ver que o preenchimento está escrito dobrando porque o valor de dez pixels e o valor de 10:00 AM não são seguros. Da mesma forma, se eu comparar com dez pixels com 15 pixels, deixe-me mostrar que vou definir esse arquivo, ele também está escrito como falso porque 15 pixels é maior que dez pixels. Mas se eu usar o operador not equal to, deixe-me mostrar e depois definir esse arquivo. Nesse caso, está escrito como verdadeiro porque nossa condição é verdadeira. Dez pixels não são iguais a 15 pixels. Como você pode ver, aqui comparamos nosso valor com o valor numérico, mas também podemos usar o valor da string. Deixe-me te mostrar. Aqui vou digitar o nome da fonte AL que vou comparar , então vou usar igual a seno com aérea Se eu definir esse arquivo, aqui você pode ver que está escrito como verdadeiro porque ambas as fontes estão à venda. Mas se eu usar a fonte Roboto, deixe-me mostrar que eu configurei esse arquivo, agora ele está escrito como falso Não apenas o valor da string, também podemos comparar o valor complexo. Deixe-me te mostrar. Dentro das ressondas redondas, vou digitar quatro pixels, seis pixels e dois pixels, e vou copiar esse slide e colá-lo aqui Se eu definir esse arquivo, como você pode ver, ele será escrito como verdadeiro porque ambos os valores são verdadeiros. Mas se eu alterar um valor, sete pixels, e depois definir esse arquivo, agora você pode ver que está escrito como falso. Mas se eu usar não é igual a seno , então defino esse arquivo Agora está escrito dois porque ambas as condições não são semelhantes. É por isso que está escrito dois. Esses são nossos operadores de igualdade, e agora vou mostrar o que são operadores relacionais Basicamente, os operadores relacionais trabalham com valores numéricos. Não podemos usá-lo com valor de string. Para isso, deixe-me mostrar um exemplo. Vou remover este e aqui vou digitar 50 maior que quatro. Eu quero dizer que o número 50 é maior que quatro? Se eu definir esse arquivo, como você pode ver, serão escritos dois. Mas se eu passar 60 e depois definir esse arquivo. Como você pode ver, está escrito fw Porque em nossa condição anterior, 50 é maior que quatro, mas nessa condição, 50 não é maior que 60 É por isso que nossa condição condiciona formulários escritos. Além disso, podemos usar esse valor com a unidade. Deixe-me mostrar 50 pixels e 60 pixels. Se eu definir esse arquivo, você pode ver que está escrito fg. Mas se eu passar 40 semanas aqui e depois definir esse arquivo, agora você pode ver que está escrito como verdadeiro Além disso, você pode comparar com unidades diferentes. Deixe-me te mostrar. Suponha que eu queira comparar com 1.000 milissegundos maior do que igual a 1 segundo Se eu definir esse arquivo, aqui você pode ver que está escrito como verdadeiro. Como você pode ver, sua unidade é diferente, s e, mas seu valor é o mesmo. É por isso que está escrito como verdade, aqui eu uso maior que igual ao operador relacional Usando esse operador, podemos comparar se 1.000 s é maior do que um, nesse caso, retornará verdadeiro, caso contrário, se 1.000 s igual a um, nesse caso, retornará verdadeiro. Mas se eu passar dois segundos aqui e depois definir esse arquivo, como você pode ver, é o formulário de retorno. Porque 1002º não é maior que dois segundos. Aqui você pode ver que podemos comparar dois valores unitários diferentes com a mesma categoria. Podemos comparar o segundo com nosso minuto, microssegundo, etc Mas se eu tentar comparar s com pixel, deixe-me mostrar 1.000 ms a mais do que dois pixels. Então, se eu definir esse arquivo, agora você pode ver um erro escrito porque a categoria deles é diferente, não podemos comparar o tempo com a área. É por isso que precisamos usar a mesma categoria. Agora vamos falar sobre os operadores Bullion e como podemos usá-los No SAS, temos que diferenciar três tipos de operadores de Bollier ou não, e o resultado é sempre verdadeiro ou falso Podemos usar todo o operador booleano com várias condições Quero dizer que, se você quiser verificar mais de uma condição, poderá usar esses operadores. Usamos um operador se ambas as condições forem verdadeiras, então escrevemos verdadeiro, caso contrário, é escrito como falso. Além de duas condições, você pode adicionar mais condições com esse operador. Deixe-me mostrar o exemplo. Suponha que essa seja a condição um e eu use um operador, e essa seja a condição dois. Em nossa condição um, cinco pixels iguais a cinco pixels. Quero dizer, a condição é verdadeira e, em nossa segunda condição, fonte aérea é igual à forma de área Aqui comparamos com o valor numérico e aqui comparamos com o valor da string Como você pode ver, ambas as condições são verdadeiras. Nesse caso, ele retornará ao resultado. E se alguma condição não retornar verdadeira, nesse caso, ela retornará falsa. A seguir, vamos falar sobre nosso operador Bullion. Se uma das condições for verdadeira, então está escrita como verdadeira. Caso contrário, está escrito como falso. Suponha que tenhamos que condicionar a condição um e a condição dois. Em nossa condição um, comparo cinco pixels com 15 pixels e em nossa condição dois, comparamos a fonte da área com a área quatro. Nesse caso, você sabe que uma das condições é verdadeira, fonte aérea igual à fonte aérea Como uma das condições é verdadeira, por isso que está escrita como verdadeira. E se ambas as condições escritas falharem, nesse caso, ela retornará uma falha, e nosso último operador não será o operador. É sempre escrito o valor oposto. Se a resposta for verdadeira, ela retornará uma resposta falsa e, se a resposta for falsa, ela retornará uma resposta verdadeira. Basicamente, está escrito na resposta oposta. Então, sem perder tempo, vamos estudar de forma prática e ver como funciona Então, como você pode ver, mais uma vez, estou de volta ao meu editor de código do Visual Studio. E agora vou usar uma condição com o operador Boulan No início, vou usar essa condição 1.000 milisecad melhor do que igual a Ismein retornará o resultado verdadeiro, como você pode ver, é o retorno Com isso, vou usar o operador final e cinco pixels, igual a cinco pixels. Se eu definir esse arquivo, como você pode ver, ele será escrito como verdadeiro porque ambas as condições são verdadeiras. Mas se eu falsificar uma condição , quero alterar cinco pixels iguais a seis pixels e , em seguida, definir esse arquivo. Agora Seton cai. Agora, ambas as condições não são verdadeiras, nossa primeira condição é verdadeira, mas nossa segunda condição falha. É por isso que a gravação falha porque usamos o operador. Mas se eu usasse nosso operador, o que aconteceria? Agora vou usar nosso operador. Ou se eu definir esse arquivo, ele retornará dois porque, como você sabe, se uma das condições for verdadeira, ele retornará duas. E se ambas as condições falharem, deixe-me te mostrar. Vou mudar dois segundos e depois definir esse arquivo, como você pode ver, a gravação falha. E se ambas as condições forem verdadeiras, em todos os operadores, nesse caso, mais uma vez, lute contra o pixel e depois defina esse arquivo, como você pode ver, está escrito como verdadeiro. Então, em nosso operador, tanto a condição quanto uma das condições é verdadeira, nesse caso, retornará verdadeira. E agora vou mostrar o último operador lean que não é operável e como podemos usá-lo Então, primeiro, vou duplicar esse slide e vou comentar o anterior Então, aqui eu vou usar o operador not. Quero remover essa condição e, primeiro, vou digitar não. Como você sabe, nem sempre o operador escreveu o resultado oposto. Então, cinco pixels iguais a cinco pixels. Como você sabe, a condição é verdadeira. Se eu definir esse arquivo, aqui você pode ver que são formas escritas porque está escrito sempre o resultado oposto. Mas se a condição falhar e se eu usar o operador não igual ao, cinco pixels não iguais a cinco pixels e definir esse arquivo, agora está escrito verdadeiro. Como a condição falha, é por isso que ela também é devolvida. Sempre retorna o resultado oposto. Espero que agora esteja claro para você o que são operadores de Bollan. Então, obrigado por assistir a este vídeo, fique atento aos nossos próximos tutoriais 154. Tutorial de Operadores do Sass II: Olá, pessoal. É bom ver você de volta. Este é outro tutorial, relacionado ao operador CS. E neste tutorial, aprenderemos o numérico CS e o operador de string SS Como eu disse, no meu tutorial anterior, temos cinco operadores diferentes no SAS: operador de igualdade, operador relacional, operador numérico, operador string e operador Wulian Já abordamos o operador de igualdade, operador relacional e um operador em nosso tutorial anterior Neste tutorial, abordaremos o numérico e o operador de string . Vamos começar. Primeiro, vou falar sobre o operador de string. string significa operador de concatenação e definimos esse operador usando Usamos esse operador para adicionar uma string com outra string. Usando esse operador, podemos unir duas ruas diferentes. Além disso, podemos unir o valor numérico com a string el. Além disso, usando esse operador, podemos unir valor numérico com string viel Se você está familiarizado com JavaScript, você já sabe disso. Deixe-me mostrar um exemplo. Aqui você pode ver 50 mais px. Aqui, queremos unir uma corda hel com uma onda numérica. Como resultado, ele retornou 50 pixels. Por outro lado, temos operadores numéricos, adição, subconstrução, multiplicação, divisão, módulo, caso contrário, chamamos isso Usamos esse operador para cálculos aritméticos. Vamos começar a prática e tentar entender como podemos usá-la. Como você pode ver, eu já abro meu software de compilador CS Koala. Você também pode ver no meu coretor do Visual Studio lado a lado, eu abro meu arquivo CS e meu arquivo CSS Então, primeiro, vou mostrar como podemos usar operadores de string. Para isso, vou criar duas variáveis. Dólar, dois pontos, e eu vou pegar 50. Então eu vou dublar esta linha, e esta é a segunda. Aqui eu vou pegar cinco. Essa é a variável um e essa é a variável dois. Agora vou estilizá-lo como classe ponto, classe 1. Então, nos fígados, vou pegar uma propriedade do NCSS Suponha margem para Valor, vou usar a variável um, um. Um. Em seguida, vou usar o seno de concatenação Depois de concatenação seno, vou passar px. Aqui você pode ver nosso valor numérico escrito em V one, e eu quero concatenar Var one com Se eu definir esse arquivo, como você pode ver, ele está escrito Margin 50 pixels. Então, aqui juntamos dois tipos diferentes de valor usando o operador string e chamamos esse método de concatenação Com isso, vou mostrar como podemos usar operadores numéricos Então, com ela eu quero adicionar $2,02. Até dois, mais uma vez, vou usar seno concatenado Agora, o sinal 1-2, não é um sinal de concatenação Isso é adição de seno, mas esse sinal funcionará como um sinal de concatenação Então, se eu definir esse arquivo, aqui você pode ver que nossa margem é de 55 pixels. Então, como você sabe, usando o operador de adição, podemos adicionar dois valores, mas agora vou usar o operador de substrição. Menos. Se eu definir esse arquivo, agora você pode ver que nossa nova margem é de 45 pixels. É um raio de cinco pixels de 50 pixels. É por isso que está escrito em 45 pixels. Esse é o caso de uso do operador de subconstrução e, dessa forma, podemos usá-lo Da mesma forma, podemos usar o lado da multiplicação. Se eu definir esse arquivo, você pode ver o resultado, 250 pixels. Se eu usar a divisão seno e depois definir esse arquivo, agora você pode ver que a resposta é dez pixels e agora vou usar nosso operador de luxúria, que é módulo Deixe-me te mostrar como. Se usarmos o sinal de módulo , ele lhe dará um lembrete até a divisão Se eu definir esse arquivo, como você pode ver, há nenhum lembrete, é por isso que ele retorna zero pixel Mas se eu alterar o valor de Var one, 54 e depois definir esse arquivo, agora você pode ver que o lembrete é quatro Portanto, esse é o caso de uso do operador de módulo. Então, basicamente, não usamos esse operador numérico dessa forma Nós o usamos quando criamos designs complexos. Deixe-me te mostrar. Então, para este exemplo, vou usar uma nova propriedade, que é o tamanho da fonte. Tamanho da fonte, e eu vou usar Var one. Contamine com pixels. Se eu definir esse arquivo, você poderá ver o resultado. O tamanho da fonte de classe um é 54 pixels. Mas para nossa tag de cabeçalho um, quero o tamanho da fonte duas vezes e depois a classe um. Deixe-me mostrar o tamanho da fonte. Um dólar, multiplique por dois pixels concatenados concatenados Se eu definir esse estilo, você poderá ver o resultado. Agora, o tamanho da fonte do nosso título um é 108 pixels porque eu quero mostrar o tamanho da fonte de duas vezes , depois a classe um e depois a classe um. É por isso que eu uso o operador de multiplicação. Em nossa classe um, está escrito 54 pixels e em nosso cabeçalho , em 108 pixels. Dessa forma, usamos variáveis e operadores numéricos juntos, maioria das vezes os usamos com condição p, caso contrário, loops, e aprenderemos sobre isso em nosso próximo tutorial, então é isso para este No próximo tutorial, aprenderemos um novo conceito relacionado ao fluxo, que é interpolação Fique ligado no nosso próximo tutorial. Obrigado por assistir a este vídeo. 155. Tutorial de interpolação do Sass: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos interpolação, interpolação SAS Em nosso tutorial anterior, aprendemos operadores de string. Com isso, aprendemos operadores de concatenação de strings. Usando a concatenação de strings, podemos adicionar string com valor numérico, conforme você pode ver o resultado. Aqui você pode ver isso. Como você pode ver aqui, 50 concatam com pixels e, como resultado, retornaram 50 Mas o problema é que não podemos usar seno concatado nas propriedades Só podemos usá-lo em valores CSS. Além disso, não podemos usar o seno de concatenação no seletor CSS. Deixe-me mostrar um exemplo. Aqui você pode ver que eu pego a margem do nome da propriedade, concatenação do hífen da margem seno e chamo a posição do nome da variável Você pode colocar qualquer valor aqui, lab, top, right, eu quero dizer, suponha que a margem superior a 20 pixels, mas não podemos usar concatenação seno Deixe-me mostrar outro exemplo com seletor. Suponha que exista uma classe chamada image dot image image hífen concatenate com imagem, mas não podemos usar concatenação seno Só podemos usar a concatenação em nossas válvulas. Mas, para esse tipo de contágio o SAS introduz a interpolação Se você quiser se conectar com propriedades, caso contrário classes, nesse caso, precisamos usar o método de interpolação e precisamos usar esse sinal, Dentro da classe, precisamos colocar a linha variável e, em seguida, podemos congenar nossas Deixe-me mostrar o exemplo. Se você quiser congenar essas propriedades e a classe, nesse caso, precisamos digitar assim Mesclando o hífen hastag dentro da calira, precisamos passar precisamos Isso é para propriedade. Da mesma forma, para uma classe, precisamos seguir o mesmo método. Depois da hashtag, precisamos usar Calirasis e, dentro da calirasis, precisamos passar o Então, sem perder seu tempo, vamos começar a prática e ver como podemos usá-la Como você pode ver, eu já abro meu aplicativo Kuala e, no meu editor de código do Visual Studio, lado a lado, abro o arquivo CS e nosso arquivo CSS Vamos começar a prática e ver como podemos usar a interpolação Em primeiro lugar, vou declarar uma mixagem. Na mixagem d. E nosso nome de mixagem é margin. E dentro desse parêntese, eu quero passar dois parâmetros ou a primeira variável m é posição, e nossa segunda variável m é unidade Também vou ligar para a mixagem em nossa classe. Deixe-me te mostrar. Vou selecionar uma classe dot class one. Dentro dos aliases, vou incluir a mixagem. Adicione o vermelho, inclua e nosso nome de mixagem é margin. No começo, vou passar o valor da posição. Nossa posição é esquerda. Depois da posição, precisamos passar a unidade aqui, eu vou passar 20 e depois ponto e vírgula para terminar esta linha Agora, dentro dessa mistura, vou pegar nossa propriedade CSS, que é a margem. Margem, hífen, aqui vou usar o método de interpólio Hastag Carissa. Agora eu quero concatear a margem com outra variável, e aqui vou passar a variável de posição, posição Como você pode ver, em nossa variável de posição, passamos o valor à esquerda e depois de coluna por valor, vou usar a variável unitária. Unidade de dólar. Eu quero concatenar com pixel no PC Em seguida, semicone para finalizar esta linha. Se eu definir esse arquivo, como você pode ver no meu arquivo CSS, ele imprime uma margem de 20 pixels. Agora podemos mudar a posição apenas digitando o nome. Suponha que eu passe por cima e aqui eu passe por 40. Se eu definir esse arquivo, agora você pode ver a margem superior de 40 pixels. Aqui você pode ver, usamos uma mistura chamada margem e, dentro dessa mistura, usamos o método de interpolação. E passamos o valor dessa mistura e contenamos com a propriedade CSS, e também contenamos a string com a unidade. Este é o USKsot é a interpolação uskaso . Neste exemplo, usamos interpolion com propriedade CSS, e agora vou usar interpolion Para isso, vou criar outra mixagem. Na mistura vermelha, nosso nome de mixagem é set image, SET IMG Então, dentro do caliass e dentro desse parêntese, eu quero passar um parâmetro, e o nome do nosso parâmetro é Agora, dentro dos aliases, quero congenar nosso seletor, ponto, imagem, traço, tem tag Dentro da lista, vou chamar o nome da imagem. Então, aqui usamos a interpolição para contenar nosso seletor. Então, dentro dos fígados, vou usar uma propriedade CSS, que é a imagem de fundo fundo, imagem e eu vou usar o URL Vu para a imagem de fundo URL dentro do parêntese, dentro dos códigos duplos, para passar a localização do arquivo, e a localização do nosso arquivo é imagem, corte Além disso, aqui podemos usar o método Interpoliion para obter o nome da imagem. Deixe-me te mostrar. Hashtag dentro dos aliases, vou passar a variável, que é Depois do nome da imagem, precisamos passar a extensão da imagem, e nossa extensão é JPG. Agora precisamos chamar essa mixagem e passar o nome da imagem. Para chamar a mixagem para digitar, a tarifa inclui. Em seguida, precisamos passar o nome da mixagem, definir imagem, definir imagem. Também precisamos passar o nome da imagem. Suponha que o nome da nossa imagem seja Cloud. E então ponto e vírgula dois nesta linha. Se eu definir esse arquivo, como você pode ver, primeiro, ele cria um seletor CSS, image Cloud, e depois cria o nome da imagem cloud dot JPG Usando a interpolação, podemos concatenar o seletor CSS e também podemos usá-lo como nome de imagem porque não podemos usar o sinal de adição para concatenar É por isso que o CS introduziu a interpolação CSS. Espero que agora esteja claro para você. Obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 156. Tutorial de Funções do Sass: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS. Neste tutorial, aprenderemos as funções do SAS. Se você já está familiarizado com o JavaScript , sabe o que é função. Então, deixe-me mostrar como podemos criar funções no SAS. Para criar uma função no SAS, primeiro você precisa pegar uma palavra-chave e dilatar a função, depois o nome da função Lembre-se de não fornecer nenhum espaço entre o nome. Você pode usar de outra forma sob o sco seno, mas não forneça nenhum espaço Então, dentro dos parênteses, você pode usar um parâmetro, vários parâmetros, caso contrário, nenhum parâmetro Depende de você. Neste exemplo, usei um parâmetro, significa uma variável, e o nome da nossa variável é valor. E então você precisa usar calibrações. Se você se lembra, a função e a mixagem são bem parecidas, mas há uma diferença. Basicamente, a função pode retornar um Val. Ele pode retornar cálculos aritméticos, mas a mistura não Mas as mixagens sempre imprimem o que já foi escrito na mixagem, mas as funções escrevem valores, e podemos usar esse valor em nossos próximos códigos Suponha que eu crie um nome de classe de um terço e dentro desse seletor, como você pode ver, eu use uma propriedade chamada with chamemos nossa função e passemos um valor 1.200 Então nossa função vai dividir esse valor três e retornar 400 e, em seguida, concatenar o número com pixel em nosso CSS e passar com Deixe-me mostrar um cenário que pode esclarecer suas dúvidas. Suponha que temos um contêiner principal e sua largura seja de 1.200 pixels, e agora eu quero dividir essa largura em três partes Nesse caso, cada célula ocupa 400 pixels. Para isso, podemos criar uma função, que pode dividir nosso contêiner em três por. Se alterarmos a largura desse continuador, ele dividirá automaticamente nosso continuador em três por Da mesma forma, se quisermos dividir esse continuador em duas partes, nesse caso, precisamos criar uma função que possa dividir nosso valor em duas partes Suponha que, no futuro, você queira alterar a cor externa. Algo de 1.500 pixels. Nesse caso, nossa função vai desviar o continuu com o mesmo tamanho, 500 pixels, 500 pixels e 500 Esse é o caso de uso da função, então não precisamos digitar a largura das células manualmente. Vamos calculá-lo usando a ajuda da função. Então, vamos começar a prática e ver como podemos usá-la. Mais uma vez, estou de volta ao meu coordenador de estúdio visual. Lado a lado, abro o arquivo Ss de ponto de estilo e o arquivo CSS de estilo. Primeiro, vou definir a largura do contêiner. Para isso, vou usar uma variável. E nossa variável nm é a largura do CN, dois pontos e para a largura do nosso continuador, vou pegar 1.000 Por enquanto, vou usar qualquer unidade como pixel, M, etc Agora vou criar uma função, que dividirá meu continuari em três partes Então, para criar uma função, vou digitar aderdFunction, e o nome da nossa função é um terço, um terço Em seguida, dentro dos parênteses, o usuário passará um parâmetro Para esse parâmetro, vou usar uma erva daninha de dólar variável. Então, dentro dos aliases, seja qual for o usuário que vai passar, eu quero dividi-lo em três partes Então, para isso, vou usar a palavra-chave return. No retorno vermelho. Em seguida, a largura do dólar dividida por três, porque eu quero dividir igualmente a largura do continuador em três partes, e então vou usar concatenar Isso é para unidade porque, como resultado, eu quero retornar a unidade de pixel. Então, criamos nossa função com sucesso e o nome da função é um terço, e agora eu quero chamar essa função. Para chamar a função, precisamos estilizar uma classe, e o nome da nossa classe é um terço da erva daninha. Então, dentro da resistência do carro, vou chamá-la de propriedade e nome da nossa propriedade é o quê. O que. Agora vou chamar nossa função, e o nome da nossa função é um terço, um terço. Então, dentro desse parêntese, vou passar essa variável Antes de definir esse arquivo, deixe-me alterar a largura do contêiner. Vou substituir 1.000 por 1.200. Se eu definir esse arquivo, como você pode ver, largura de um terço do nosso contêiner é de 400 pixels. Então, no futuro, se eu alterar a largura do contêiner, 1.200 pixels para 500 pixels e depois definir esse arquivo, aqui você pode ver, ele sempre está escrito como um terço dessa largura do contêiner, que é 500 pixels Esse é o caso de uso da função. Da mesma forma, se você quiser dividir a largura do contêiner em duas partes, nesse caso, precisará criar outra função. Alguns para duplicar essa função, e eu vou mudar o nome da função, e o nome da nossa função é Mas desta vez, precisamos dividir a largura do continuador em duas partes Então, vou dividir com dois. Eu vou criar e também vou criar um seletor para isso. Deixe-me te mostrar. Nosso nome positivo selecionado é largura do cubo, Largura do cubo. Dentro das aliras, vou chamar a largura da separação Como valor, vou chamar nossa nova função e nosso novo nome de função é hub. E dentro do parêntese, aqui vou passar nossa largura do contêiner, largura variável do contêiner largura variável do contêiner Além disso, vou alterar a largura do contêiner, 1.500 pixels para 1.200 Se eu definir esse arquivo, você poderá ver o resultado. Aqui você pode ver nossa função hub dividir nosso contêiner em duas partes e retornar 600 pixels para uma parte, e nossa função de um terço dividir nosso contêiner em três e cada parte em 400 pixels. Agora está claro para você como podemos usar funções para cálculos aritméticos Então, no próximo tutorial, aprenderemos as funções do véu SAS Então, obrigado por assistir a este vídeo, fique ligado em nossas próximas tribos 157. Tutorial de funções do número do Sass: Olá, pessoal. É bom ver você de volta. Este é outro tutorial relacionado ao CS e, neste tutorial, aprenderemos as funções numéricas SAS Aqui você pode ver que os Cs vêm com total de seis em função val, função de números, função de string, função de cor, última função, função seletora e a última é intropeção Neste tutorial, aprenderemos somente funções numéricas. Vamos ver quantas funções numéricas temos no CS. Como você pode ver, temos um total de 11 funções numéricas no CS e abordaremos todas elas neste tutorial. Vamos começar a prática com a função Avis. Fisicamente, a função de Avis é escrita por vontade absoluta. Vamos começar a prática. Como você pode ver, eu já abro editor de código do meu estúdio de usuário e, lado a lado, abro a pilha SS estiloide e Primeiro, vou criar uma classe dot class one. Então, dentro das calices, primeiro, vou pegar ACSSPperty e vou Estofamento. Nossa primeira função é Avis significa função absoluta. Linha falsa tipo abs. Essa função sempre escreveu valor absoluto. Se eu passar um valor negativo, deixe-me mostrar -14 pixels Se eu definir esse arquivo, como você pode ver, ele é escrito como absoluto, 14 pixels. Ele removeu o valor negativo e escreveu 14 pixels. Se eu remover o sinal de menos e definir esse arquivo, como você pode ver, ele sempre será escrito como valor absoluto Agora, vamos falar sobre nossa próxima função, que é L. Mas antes, vou duplicar essa linha e comentar a anterior Aqui eu vou usar a função celular C CEL. Então, dentro dos versos ao, vou passar um valor flutuante. Deixe-me te mostrar. 5.3. E mesmo se eu definir esse arquivo, deixe-me te mostrar. Se eu definir esse arquivo, como você pode ver, está escrito preenchendo seis Se eu usar a função de célula toda vez que ela retornar acima do valor. Se eu usar 5.9 e definir esse arquivo, ele também retornará seis Mas se eu usar 5.1 e definir esse arquivo, ele também retornará seis. É sempre escrito acima do valor. Mas se eu passar por 5.0 e depois definir esse arquivo, agora ele gravará apenas cinco. Se eu passar o valor flutuante na função da célula, ele sempre será escrito acima do valor Da mesma forma, temos função oposta. Para isso, vou duplicar esta linha e comentar a anterior E aqui vou digitar a função de piso FL W R. Então, dentro da redonda vou passar quatro e sete Essa função sempre é escrita abaixo do valor. Se eu definir esse arquivo, como você pode ver, ele escreverá apenas quatro. Sem zero, qualquer valor que usarmos depois do ponto retornará apenas quatro. Se eu passar nove aqui , também está escrito quatro. Vamos pular para nossa próxima função, que é a função redonda para implorar essa linha e comentar a anterior E aqui vou digitar a função redonda. Linha: se eu definir esse arquivo, como você pode ver , está escrito cinco. Esta função é uma combinação de função de vedação e função de flutuação Depois de Dhimil, se o valor for maior que quatro, ele sempre será escrito como um Mas um Djimil, se o valor for menor que cinco, ele retornará um valor incrível. Deixe-me mostrar se eu passar, 4.4 aqui, e depois definir esse arquivo, como você pode ver, agora está escrito apenas quatro. Mas se eu passar por 415 e depois definir esse arquivo, agora você pode ver que está escrito cinco Este é o caso de uso da função redonda. Espero que agora esteja claro para você como a área de vendas e as funções de execução funcionam. Nossa próxima função é a função máxima. Eu quero que você comece esta linha e cunhe a anterior. E aqui vou chamar a função max. Essa função sempre retorna o valor máximo. Suponha que, se tivermos três valores, deixe-me mostrar um pixel, três pixels e cinco pixels. Se eu dissesse esse arquivo, como você pode ver, está escrito em cinco pixels. É sempre escrito o valor máximo a partir do mínimo. Da mesma forma, temos a função oposta, que é a função min. Toque esta linha e comente a anterior, e aqui vou chamar nossa função Min. Se eu definir esse arquivo, como você pode ver, ele gravará o menor valor dessa lista. É sempre escrito o valor mais baixo. Basicamente, não usamos essa função dessa forma. Quando precisamos trabalhar com cálculos aritméticos complexos, usamos essa função Agora, vamos falar sobre nossa próxima função, que é percentual. Então para começar esta linha e comentar a anterior E aqui vou digitar porcentagens. Essa função sempre retorna o valor percentual. Se eu passar 0,3, eu configuro esse arquivo, como você pode ver, ele está escrito em 30%. Além disso, se eu trabalhar com cálculo aritmético, deixe-me mostrar 200 pixels divididos por 50 pixels Se eu definir esse arquivo, como você pode ver, ele está escrito em 400%. Essa função sempre retorna porcentagem. Nossa próxima função é comparável. Para isso, vou duplicar esta linha e comentar a anterior Aqui vou digitar comparável. Usando essa função, podemos comparar duas unidades. Se as unidades forem combinadas, elas serão escritas, verdadeiras, caso contrário, serão formas escritas Deixe-me mostrar a demonstração. Então, aqui vou passar dois pixels e nosso próximo valor é quatro pixels. Se eu definir esse arquivo, como você pode ver, está escrito como verdadeiro porque suas unidades são iguais, pixel e pixel. Mas se eu passar a unidade EM e depois definir esse arquivo, EM e definir esse arquivo, como você pode ver, agora está escrito fobs Porque a unidade deles é diferente. É por isso que não pudemos compará-lo. Mas se eu passar o valor do centímetro aqui, CM, e se eu passar a unidade MM, e então definir esse arquivo, como você pode ver, agora ele está escrito porque podemos comparar centímetro com milímetro É por isso que está escrito. Vamos falar sobre nossa próxima função, que é aleatória. Vou duplicar esta linha e comentar a anterior Então, vou digitar aleatoriamente. Essa função sempre escreveu um valor aleatório. Se eu definir essa pilha, como você pode ver, ela é escrita com um valor aleatório Se eu definir esse arquivo novamente, você pode ver que ele está escrito com um valor aleatório diferente. Por padrão, a função aleatória escreve o valor 0-1. É por isso que é escrito como valor flutuante. Mas se eu passar um número, algo 12 e depois definir esse arquivo, agora ele escreverá um número de 0 a 12 Pode ser qualquer número de 0 a 12 e, no nosso caso, está escrito dez Se eu definir esse arquivo mais uma vez, agora você pode ver que está escrito um. Vamos falar sobre nossa próxima função, que é unidade. Para isso, vou duplicar esta linha e comentar a anterior E aqui vou digitar a unidade. Para este exemplo, vou passar um número, que é 22. Se eu definir esse arquivo, como você pode ver, ele escreverá apenas os códigos duplos, não o número porque não passamos nenhuma unidade, mas se eu passar o pixel PH e depois definir esse arquivo, como você pode ver, ele é escrito apenas o pixel unitário. A função unitária sempre escreveu a unidade. Da mesma forma, se eu passar centímetro, CM, e depois definir esse arquivo, aqui você pode ver que está escrito em centímetro Agora, vamos falar sobre nossa última função, que é uma unidade menor. Para isso, vou duplicar esta linha e comentar a anterior E aqui vou digitar sem unidade. Basicamente, essa função retornará ao valor, seja verdadeiro ou falso. Basicamente, essa função vai verificar se fornecemos uma unidade com esse valor ou não? Se eu definir esse arquivo, como você pode ver, ele está escrito como falso. Como fornecemos uma unidade, é por isso que está escrito como falso. Mas se eu não fornecer a unidade, eu configuro esse arquivo, como você pode ver, agora está escrito como verdadeiro. Podemos usar essa função com condições de IP. No próximo tutorial, aprenderemos funções relacionadas a strings Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 158. Tutorial de funções de sequência de caracteres do Sass Part1: Olá, pessoal, é bom ver vocês B. Mais uma vez, estou de volta com um novo tutorial relacionado ao CAS. E neste tutorial, vamos aprender a função de string CS. Aqui você pode ver a lista de funções invais do SAS. Em nossos tutoriais anteriores, aprenderemos sobre a função numérica E neste tutorial, vamos aprender funções de string. Então, vamos ver as funções de string. Como você pode ver, temos um total nove funções de string no SAS. Função Cote para função maiúscula, função índice STR, função para minúscula, função de inserção Star, função de ID exclusiva, função Star len, função uncoat e função de índice STR, função para minúscula, função de inserção Star, função de ID exclusiva, função Star len, função uncoat e função Star slice. Sem perder seu tempo, vamos começar pela prática. Como você pode ver, estou no meu coordenador do Visual Studio e, lado a lado, abro Stylar CS e o arquivo CSS de estilo Então, primeiro, vou criar uma classe, e o nome da nossa classe é classe um. Então, dentro do Surge, vou usar a propriedade CSS, e o nome da nossa propriedade é família de fontes. Família de fontes. Mas aqui eu não vou usar o nome da família da fonte diretamente. Para isso, vou usar uma função de string e nome da nossa função de string é co Quote. Então, em vez do parêntese, vou chamar o nome da família da fonte e nosso nome de família da fonte é Ariel Basicamente, a função de código envolverá essa string com códigos duplos. Se eu definir esse arquivo, aqui você pode ver o resultado. Família de fontes dentro dos códigos duplos al. Da maneira oposta, temos outra função, que é uncode Se eu usar uncode e colocar o nome dessa fonte dentro dos códigos duplos e, em seguida, definir esse arquivo, como você pode ver, ele remove a citação da string Este é o caso de uso da função uncode. Vamos pular para a próxima função, que tem duas letras maiúsculas Aqui vou amarrar duas letras maiúsculas. Caso. Basicamente, essa função vai converter essa string em maiúsculas Se eu definir esse arquivo, como você pode ver, todas as letras estão em maiúsculas Da mesma forma, temos a função oposta, que é duas minúsculas Se eu digitar dois abaixo e definir esse arquivo, como você pode ver, ele converterá nossa letra maiúscula A em uma minúscula. Basicamente, ele converte caracteres maiúsculos em minúsculos. Vamos pular para a próxima função, que é o comprimento da string. Aqui eu quero digitar nossa próxima função, que é St length. Comprimento da estrela. Seja qual for o valor da string que passarmos dentro dessa função de string, ela contará o caractere da string e retornará o tamanho em número. Como você pode ver no mundo aéreo, temos um total de cinco personagens Se eu definir esse arquivo, opa, há um erro. A grafia da lente não está correta, COMPRIMENTO. Se eu definir esse arquivo, você poderá ver o resultado. São três e cinco. Este é o caso de uso da função de comprimento STR. Vamos falar sobre nossa próxima função, que é o índice de string. Vou chamar essa função de índice de cadeia de caracteres. Então, dentro dos parênteses, nessa função como primeiro parâmetro, precisamos passar essa string Eu já copio uma string e vou colá-la aqui. É um idiota de La Mpsum. Mas, primeiro, vamos começar com a quebra de palavras. Usando essa função, podemos pesquisar um caractere ou palavra dessa string e seu número de índice escrito. Como você pode ver, como primeiro parâmetro, passamos essa string. Então, em nosso segundo parâmetro, quero pesquisar a palavra fictícia Dentro dos acordes duplos, vou passar por Dummi. Se eu definir esse arquivo, como você pode ver, está escrito 23. Está escrito o número de índice do texto maldito. Se você contar os caracteres, D seria 23, deixe-me mostrar outro exemplo. Agora eu quero pesquisar a palavra Lorem no stream. Então eu vou digitar Loren. Se eu definir esse arquivo, como você pode ver, ele será escrito como um porque palavra Lem começa no primeiro índice É por isso que está escrito um. Lembre-se de que também é contar o espaço entre as palavras. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei a função de inserção de string, a função QQ ID e a função de fatia de string Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 159. Tutorial de funções de sequência de caracteres do Sass Part2: Olá pessoal, é bom ver vocês de volta. Essa é a segunda parte do SAStringFunctions. E neste tutorial, aprenderemos a função de inserção de string, a função ID exclusiva e a função de fatia de string Então, sem perder seu tempo, vamos estudar a prática Como você pode ver, dentro da viseira cozida eu abro nossos arquivos anteriores Estilize seu arquivo CS e estilize seu arquivo de tese. Suponha que eu queira inserir uma palavra dentro dessa string. Para isso, precisamos usar a função de inserção de string. Então, aqui, vou digitar string insert. Eu quero adicionar uma palavra de olá. Então, aqui, vou digitar olá. Eu quero adicionar a palavra olá no início desta string. Para isso, precisamos passar outro parâmetro. Então, aqui vou digitar vírgula e aqui vou passar o número do índice Primeiro, também vou fornecer um espaço naquele lugar. Além disso, vou fornecer espaço após O. Então, se eu definir esse arquivo, você poderá ver o resultado. Usando a função Inserir, podemos inserir uma palavra ou um caractere dentro desse fluxo e precisamos passar o número do índice. É isso mesmo. Deixe-me te mostrar mais uma vez. Suponha que desta vez eu queira adicionar a palavra Ipsum neste fluxo Eu copio essa palavra e a removo, e aqui vou passar a palavra Ipsum E agora eu quero inserir a palavra Ipsum até uen. Para isso, vou contar o índice exato número um, dois, três, quatro, cinco, seis. Então, aqui, vou passar pelo Sebin porque também quero fornecer um espaço para uen Então, se eu definir esse arquivo, você pode ver o resultado Lorem Ipsum Portanto, este é o caso de uso da função de inserção. Vamos falar sobre nossa próxima função. Nossa próxima função é string slice. Então, aqui vou digitar STR slice. Suponha que eu queira cortar a palavra Lorem dessa string. Nesse caso, precisamos passar para o parâmetro dois. Deixe-me mostrar. Em nosso primeiro parâmetro, precisamos passar nossa string e, em nosso segundo parâmetro, precisamos passar o número do índice. Como você pode ver, a palavra Lorem termina no quinto índice. Então, aqui, eu vou passar seis. Se eu definir esse arquivo, agora você pode vê-lo remover a palavra Lem e imprimir é simplesmente dammitext Mas em nosso próximo exemplo, quero retornar uma palavra. Nesse caso, precisamos passar um total de três parâmetros, nosso número de índice inicial e nosso número de índice final, que é nove. Se eu definir esse arquivo, como você pode ver, o retorno é. Então, usando essa função, podemos cortar qualquer seção da nossa string Vamos falar sobre nossa última função, que é um ID exclusivo. Primeiro, vou remover tudo isso e aqui vou digitar ID exclusivo. ID. Em seguida, nosso parêntese e o semícone dois nesta linha Se eu definir esse arquivo, como você pode ver, ele gravará um ID exclusivo. Ele retorna alguns caracteres aleatórios. Se eu definir esse arquivo novamente, toda vez que ele for escrito um novo ID, e Bt fold, sempre essa função escreverá um ID exclusivo de nove caracteres. Basicamente, usamos essa função com condições de IP. Eu abordo todas essas funções de string. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 160. Tutorial de funções de cores do Sass: Olá, pessoal. É bom ver você de volta. Mais uma vez, estou de volta com um novo tutorial empolgante relacionado ao CS. E neste tutorial, vamos aprender as funções de cores CS. Como eu disse anteriormente, o CS veio com algumas funções invais. Função numérica, função de string, função de cores, funções de lista, função de eleitor e função de introspecção Concluímos a função numérica e função de string em nosso tutorial anterior. Neste tutorial, aprenderemos a função de cores. Sem perder tempo, vamos ver quantas funções de cores temos em nosso CAS Neste tutorial, abordaremos as funções básicas, mas importantes, do CS: clarear, escurecer, ajustar, saturar, dessaturar, misturar Eu sei que temos mais de sete cores relacionadas a funções no SAS, mas essas são as mais importantes. É por isso que vou abordar essas sete funções. Então, vamos começar a prática e ver como funciona. Aqui você pode ver, lado a lado, que abro meu Visual Studio Coreator e meu navegador usando a extensão if server Eu já criei um documento HTML chamado index dot HTML. Com isso, eu já crio Style Door CS e o arquivo CSS estilizado Como você pode ver no meu navegador, temos que fazer dois D, classe um e classe dois. primeira classe foi preenchida com a cor de fundo rosa e a segunda classe veio com a cor de fundo vazia. Vamos entrar no arquivo CS e ver o que fizemos. Como você pode ver, a princípio, criamos uma cor de base de membro variável, e nossa cor base é rosa E então estilizamos nossos molhos e definimos uma borda. Então, em nossa classe um, definimos a cor de fundo, que é nossa cor base rosa, e não definimos nenhuma cor de fundo na nossa classe dois. Agora vou modificar essa cor e quero preencher essa div com a forma escura dessa cor rosa Para isso, vou usar uma função chamada darken. Então, primeiro, vou usar a propriedade CSS, que é o plano de fundo. Antecedentes, e vou chamar nossa função. Aqui vou digitar darken. Então, dentro dos parênteses, precisamos fornecer uma cor Para cores, vou usar a mesma cor, que é a cor base. Vou copiar a variável e colá-la aqui. E então, em nosso segundo parâmetro, precisamos fornecer o valor de 0 a 100% Então, aqui eu quero passar 30%. Então, se eu definir esse arquivo, aqui você pode ver nosso contêiner cheio com 30% mais corte escuro do que o anterior. E se eu mostrar meu estilo ou arquivo CSS, como você pode ver, ele cria uma nova cor. Então, mais uma vez, vou voltar ao meu estilo ou arquivo CS. Então, como você pode ver, se eu aplicar 30% de cor escura a essa cor base, ela retornará esse tipo de Da mesma forma, se eu aplicar 70% e depois definir esse arquivo, você poderá ver a diferença. Agora são mais dez cores escuras. Eu te mostro duas profundezas porque essa é a cor original e essa é a parte escura dessa Este é o caso de uso da função escura. Nossa próxima função é a função de iluminação . Deixe-me te mostrar. Então, primeiro, vou duplicar essa linha e comentar a anterior E aqui eu vou amarrar Lighten. E eu vou passar o valor de 30% aqui. Se eu definir esse arquivo, como você pode ver, é 30% de cor clara da nossa cor base Se eu mostrar meu arquivo CSS, como você pode ver, ele está escrito em branco puro porque nossa cor rosa já é uma cor clara Se eu usar a cor azul, deixe-me mostrar a cor base azul. Neste arquivo, agora você pode ver a parte iluminada dessa cor azul. E se eu te mostrar o arquivo CSS, você pode ver o código colorido. Podemos usar essas funções com Hova Effects. Vamos falar sobre nossa próxima função, que é ajustar o matiz Primeiro, vou duplicar essa linha e comentar a anterior, e aqui vou digitar adjust Hue Matiz. Se eu definir esse arquivo, como você pode ver, ele mudou a cor. Basicamente, usando essa função, seja qual for a cor que passarmos em nosso primeiro parâmetro, ela pode retornar parte escura ou clarear parte dessa cor de acordo com esse E em nosso segundo parâmetro, precisamos passar valor com grau. Se eu passar 20 aqui e depois definir esse arquivo, você verá a diferença. Seu retorno não escurecerá o anterior. Se eu passar 70 graus, vamos ver o que aconteceu. Se eu definir esse arquivo, ele retornará parte clara dessa cor. Usando a função H, podemos girar as cores. Então, como você pode ver, podemos usar a função Hu. Vamos falar sobre nossa próxima função, que é saturar. No começo, vou duplicar essa linha e comentar a anterior Aqui vou digitar saturate. Basicamente, essa função aumenta o brilho dessa cor. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele ainda retorna da mesma cor. Vamos mudar a cor. Aqui eu vou usar uma cor marrom. Vou fornecer um valor hexadecal com AD 4038. Se eu definir esse arquivo, agora você pode ver a diferença de cor. Essa é a cor base e esta está 70% saturada da cor base. Aumenta o brilho dessa cor marrom e retorna a cor vermelha. Da mesma forma, temos a função oposta, que é dessaturar. Deixe-me te mostrar. Vou duplicar esta linha e comentar a anterior aqui , vou digitar desaturate Também vou mudar a cor base, que é azul. Se eu definir esse arquivo, como você pode ver, essa função reduz o brilho dessa cor e retorna essa cor. função saturada sempre aumenta o brilho dessa cor e a função de dessaturação sempre diminui o brilho dessa Se reduzirmos o valor em 20% e depois definirmos esse arquivo, agora ele tentará combinar com a cor base. Mas se você aumentar o valor em 90% e definir esse arquivo, agora poderá ver a diferença. Reduziu o brilho dessa cor. Mas se eu passar o valor zero e definir esse arquivo. Agora você pode ver que está escrita a cor original, a cor base, a cor azul. Mas se eu usar o valor total, 100% e definir esse arquivo, agora você poderá ver apenas a cor cinza Itrton Agora vamos falar sobre nossa próxima função, que é mix. Quero eliminar esta linha e comentar a anterior. Então, aqui, vou digitar mix. Usando essa função, podemos misturar cores diferentes. Nessa função, basicamente, precisamos passar um total de três parâmetros. Então, com a cor base, eu quero adicionar, como você pode ver, nossa cor base é azul. Eu quero adicionar a cor vermelha. Então, aqui vou digitar vermelho, vírgula e, em seguida, precisamos passar o valor percentual Então, aqui eu vou passar de 50%. Significa quanta cor azul eu quero adicionar à cor vermelha. Se eu definir esse arquivo, como você pode ver, ele está escrito na cor roxa. Se misturarmos a cor vermelha e a cor azul, nesse caso, ela reterá a cor roxa Se eu diminuir o valor percentual, 20% e depois definir esse arquivo, agora você pode vê-lo retornar a cor rosa avermelhada Aplicou 20% de cor oeste a essa cor vermelha. Se eu aumentar o valor 90% e depois definir esse arquivo, agora você poderá ver o resultado diferente. Agora você pode ver que nossa nova cor é muito mais forte do que a vermelha e está escrita quase azul. É assim que você pode usar a função mista. Agora vamos falar sobre nossa função de luxúria, que é matrizes transparentes. Vou duplicar essa linha e vou comentar a anterior Aqui vou digitar gravatas transparentes de fundo. Basicamente, usando essa função, podemos tornar nossa cor transparente. Se você já está familiarizado com CSS, sabe o valor GVA, e A significa Alpha Val, e podemos tornar nossa cor transparente usando o valor Alpha Da mesma forma, temos uma função no SAS, que é transparente, sim. Aqui, precisamos passar pelos dois parâmetros, cor e valor. Para cor, vou usar nossa cor base, e aqui precisamos passar o valor 0-1 Então, tipo Hemo, ponto zero , quatro, quero dizer, é 40% transparente Vamos configurar o arquivo e ver se ele funcionou corretamente ou não. Como você pode ver, nossa cor de fundo é 40% transparente. E se eu mostrar meu arquivo CSS, aqui você pode vê-lo usando valor Rgvia, aqui você pode ver que está escrito o valor Alpha 0.6 E se eu quiser torná-lo completamente transparente, nesse caso, precisamos passar o valor um. Se eu definir esse arquivo, agora você pode ver que ele é completamente transparente. Mas se eu mostrar meu arquivo CSS e comparar com o valor Alpha, aqui você pode ver que está escrito em zero. No CSS para transparência total, precisamos usar zero, mas no SAS para transparência completa, precisamos usar um. Obviamente, funciona apenas para essa função. Isso é tudo para este tutorial. Espero que agora esteja claro para você o que são as funções de cores do CS. Obrigado por assistir a este vídeo. Em nosso próximo tutorial, abordaremos as funções da Lista CS. Então, fique ligado no nosso próximo vídeo. 161. Tutorial de funções de lista do Sass Part1: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial empolgante relacionado às funções do SAS. E neste tutorial, vamos aprender as funções SSList Como eu disse anteriormente, temos seis funções no SAS, função numérica, função de string, função de cor, função de lista, função seletora e função de introspecção Neste tutorial, vamos aprender a função de lista. Tudo isso está em todas as funções. Mas antes precisamos entender o que é lista. Se você está familiarizado com JavaScript, então você já está familiarizado com matrizes Array significa que, em uma única variável, podemos armazenar vários valores. E se você quiser fazer a mesma coisa no SAS, então temos a Lista. Aqui você pode ver, primeiro pegamos uma variável, depois listamos, e dentro dessa variável, configuramos para dizer três valores, cinco pixels, dez pixels e 15 pixels. Esse é o primeiro método que você pode criar por último no SAS. Deixe-me mostrar esse segundo método. Aqui você pode usar o separador entre os valores. Você pode usar vírgula Assim, você pode usar valores sem vírgula. Caso contrário, você pode usar valor com vírgula. E há outra maneira de criar uma lista no CAS. Deixe-me te mostrar. Além disso, você pode usar endereços quadrados para criar uma lista no CS. E agora vou mostrar as funções da lista. Usando a função de lista, você pode manipular sua lista. Você pode agregar novo valor à sua lista. Caso contrário, você pode remover um valor dessa lista. Você pode fazer muitas coisas usando essas funções. Nossa primeira função é a função de comprimento. Daí vem a função Nth. Em seguida, função Seth N, função junção, appNFunction, função, função de índice, função de menor separador, e nossa última função é a função Portanto, temos a função de menor linha total no CS e vou abordar tudo isso neste tutorial. Sem perder seu tempo, é começar a praticar e ver como ele jurou. Finalmente, estou em um médico de estúdio visual. Lado a lado, abro o stylet cs e o arquivo css style dot Primeiro, vou criar uma lista de nomes de variáveis Dollar ist. Então, dois pontos aqui, vou definir alguns valores. Cinco pixels, espaço, dez pixels, espaço, 15 pixels. Em seguida, ponto e vírgula dois nesta linha. Agora vou criar uma classe dot class one e , dentro do alirass , vou chamar uma propriedade CSS, que é preenchida aqui, que é preenchida aqui vou usar todas as funções de lista, uma por uma Vamos chamar nossa primeira função de lista, que é comprimento. Então, aqui vou digitar o comprimento. Usando a função de comprimento, podemos contar o número total de valores em nossa lista. Se eu passar a variável am dollar list e definir esse arquivo, como você pode ver, ele será escrito preenchendo três porque temos que dizer três valores em nossa lista Se eu aumentar o valor de 20 pixels e depois definir esse arquivo, como você pode ver, ele escreverá quatro. Como você pode ver, ele conta vários valores. Além disso, se eu remover o pixel unitário, deixe-me mostrar e definir esse arquivo. Como você pode ver, escreveu quatro porque essa função é inteligente o suficiente para identificar os valores. É por isso que, sem unidade, ela pode contar nossos valores. E se eu usar vírgula entre eles e depois definir esse arquivo, como você pode ver, agora também está escrito quatro porque podemos criar nossa lista usando espaço, caso contrário, usando vírgula Vamos voltar à posição anterior. Vou pressionar Control Z. Além disso, podemos passar propriedades e valores na função de comprimento Deixe-me te mostrar. Primeiro, vou usar chaves redondas Dentro das chaves redondas, primeiro, vou usar uma propriedade com dez pixels Além disso, vou usar a propriedade de altura. Altura, cinco pixels. Se eu definir esse arquivo, como você pode ver, ele reajusta dois porque passamos o valor total de dois nesta função, largura e altura Essa função é muito difícil de identificar esses valores. Esta é a nossa função de comprimento , que pode contar os valores da nossa lista. Agora vamos falar sobre nossa próxima função, que é NIT. Mas primeiro, vou duplicar essa linha e comentar a anterior. Vou digitar NI Basicamente, passamos para dois parâmetros na função N. Em nosso primeiro parâmetro, precisamos passar o valor da lista e em nosso segundo parâmetro, precisamos passar o índice. Deixe-me te mostrar. Em nosso primeiro parâmetro, vou passar a lista Dollar list. E em nosso segundo parâmetro, vou passar o número do índice, então vou passar dois. Se eu definir esse arquivo, como você pode ver, ele será escrito em dez pixels. Agora, o quociente é o motivo pelo qual está escrito em dez pixels. Porque, como você pode ver na minha lista no índice dois, temos um valor de dez pixels. É por isso que está escrito em dez pixels. Temos que dizer quatro valores na minha lista. Isso significa que temos que contar quatro índices nesta lista. Em nosso segundo parâmetro, se eu passar o número do índice, acordo com o número do índice, ele retornará o valor. Da mesma forma, se eu alterar o número do índice, quatro e depois definir esse arquivo, agora você poderá vê-lo retornar 20. Além disso, também podemos passar um valor negativo. Se eu passar menos um e depois definir esse arquivo, agora você poderá vê-lo retornar 20 novamente . Mas a pergunta é por quê? Porque do lado esquerdo, contamos valores positivos. Da maneira oposta, contamos o valor negativo do lado direito. Então, esse é o nosso menos um, isso é menos dois, isso é menos três e isso é Se eu passar menos três e definir esse arquivo, você pode ver que está escrito dez Portanto, podemos imprimir o valor dessa maneira, caso contrário, dessa maneira. Agora, vamos falar sobre nossa próxima função, que é configurá-la. Quero começar esta linha e comentar a anterior. Se você quiser adicionar um novo valor à nossa lista existente, nesse caso, você pode usar a função Seth Neh Aqui, vou digitar Seth Ne set nth. Dentro das prensas descendentes, precisamos passar três parâmetros. Primeiro, nossa lista, depois o número do índice, onde você deseja definir? Eu quero colocá-lo no índice dois. É por isso que eu passo dois. Em nosso terceiro parâmetro, precisamos passar o novo valor, e nosso novo valor é 30 EM. Aqui eu quero substituir dez pixels por 30 da manhã. Se eu definir esse arquivo, você poderá ver o resultado. Cinco pixels, 30 am, 15 pixels, 20 pixels. Usando essa função, você pode substituir um valor na sua lista existente. Como você pode passar o valor negativo aqui. Se eu passar menos um e depois definir esse arquivo, agora você pode ver que ele substituiu 20 pixels por 30 am Vamos falar sobre nossa quarta função, que é Joan. Vou duplicar esta linha e comentar a anterior Aqui eu vou chamar a função Joan. Usando a função conjunta, podemos juntar várias listas e criar uma única lista. Para isso, vou criar outra variável, que é dois. Além disso, vou mudar esses vários pixels de 50 pixels, 100 pixels, 150 pixels e 200 pixels Aqui, precisamos passar o parâmetro dólar dois, Lista um e Lista dois, Dólar, ist, vírgula, e nosso segundo parâmetro, precisamos passar nossa segunda lista é dois, dólar, é dois Então, se eu definir esse arquivo, você pode ver que ele escreveu uma nova lista, e temos um total de oito valores nessa lista. Cinco pixels, dez pixels, 15 pixels, 20 pixels, 50 pixels, 100 pixels, 150 pixels e 200 pixels. Você pode ver que não há vírgula entre esses valores. Basicamente, essa função foi combinada para listar e escrever uma nova lista. Mas o que? Se usarmos vírgula, em nossa primeira lista, deixe-me mostrar para você e em nossa segunda lista, eu apenas uso espaço para separar valores Se eu definir esse arquivo, como você pode ver em nossa nova lista, ele usou vírgula em toda a nossa lista para separar valores Além disso, podemos passar outro parâmetro em nossa função conjunta, que é separado. Suponha que eu não queira uma vírgula entre esses valores. Nesse caso, em nosso terceiro parâmetro, precisamos passar espaço. Se eu definir esse arquivo, como você pode ver em nossa nova lista, ele separa nosso valor usando espaço, não a vírgula Como você pode usar o valor automático, é o valor padrão. Então, aqui estou eu para digitar auto. Se eu definir esse arquivo, agora você pode ver a vírgula comprovada entre os valores Mas se eu não usar vírgula em nossa primeira lista e depois definir esse arquivo, por padrão, como você pode ver, é espaço escrito Ele separa nosso valor usando o espaço. Mas agora eu quero separar esse valor usando vírgula. Nesse caso, precisamos passar uma vírgula aqui. Se eu definir esse arquivo, agora você pode ver que ele fornece vírgula entre os valores Portanto, nosso terceiro parâmetro significa separador. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordaremos uma função de caneta, função zip, função de índice, função separadora e função entre colchetes Então, obrigado por assistir a este vídeo, fique ligado nos próximos tutoriais 162. Tutorial de funções de lista do Sass, parte 2: Olá, pessoal. Mais uma vez, estou de volta ao meu coordenador do Visual Studio e, como você pode ver, lado a lado, abro os arquivos style SSPle e Stylo CSS Em nosso tutorial anterior, aprenderemos sobre a função Length, a função N-th, a função set N e a função join Mas neste tutorial, abordaremos as demais: função APN, função Z, função de índice, sua função separadora e sua função de colchetes Então, sem perder seu tempo, vamos estudar de forma prática. Em primeiro lugar, vou começar com a função APN. Então, vou configurar essa linha e comentar a anterior. E aqui vou digitar Append. Em seguida, nosso latão redondo. Suponha que se você quiser adicionar um novo valor na lista existente, nesse caso, você pode usar a função AVN. Suponha que, em nossa primeira lista, eu queira adicionar 30 pixels a 20 pixels. Nesse caso, podemos usar essa função. Deixe-me te mostrar como. Essa função adiciona um único valor. Em nosso primeiro parâmetro, precisamos passar a lista, que é a lista de dólares. Em seguida, vírgula e, em seguida, precisamos passar o novo valor, que é 30 pixels Se eu definir esse arquivo, como você pode ver no arquivo CSS, ele será escrito de 30 a 20 pixels. Está agregando um novo valor à nossa lista. Podemos adicionar novos valores usando essa função. Além disso, temos um terceiro parâmetro que podemos usar separadamente. Deixe-me te mostrar. Como você pode ver, nossos valores são divididos por espaço, então aqui vou usar nosso terceiro parâmetro, que é vírgula Se eu definir esse arquivo, você poderá ver o resultado. Agora você pode ver que nossos valores estão separados por. Você pode usar qualquer valor aqui, auto, espaço. Vamos falar sobre nossa próxima função, que é a função Z. Vou até esta linha e comento a anterior. Primeiro, vou inventar essa e digitar Z. Basicamente, essa função vai unir dois valores Eu quero dizer que tinha cinco pixels com 50 pixels, dez pixels com 100 pixels, 15 pixels com 150 pixels e 20 pixels com 200 pixels. Aqui, vou passar dois parâmetros. Nosso primeiro parâmetro é lista de dólares e nosso segundo parâmetro é dólar é dois. Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, ele combinou cinco pixels com 50 pixels, dez pixels com 100 pixels, 15 pixels com 150 pixels, 20 pixels com 200 pixels. Deixe-me mostrar um bom exemplo disso. Aqui eu vou pegar um nome de cor. Dentro das prensas redondas, vou pegar vermelho, verde e azul Além disso, vou pegar outra lista. o rounders for para vermelho, eu vou pegar 120 Para verde, vou usar 255, e para azul, vou usar 70 Se eu definir esse arquivo, agora você pode ver que o valor da cor vermelha é 120, valor da cor verde é 255 e o valor da cor azul é 70 Esse é o bom caso de uso da função zip. Se você não usa vírgula para fins de separação, deixe-me mostrar que vou revogar essa vírgula e usar espaço Nesse caso, você pode remover chaves redondas. Se eu definir esse arquivo, como você pode ver, ele também funcionou perfeitamente. Portanto, depende totalmente de você, você se sente confortável com o separador ou não Você pode usar vírgula ou espaço na web. Vamos falar sobre nossa sétima função, que é índice. Devo implorar por esta linha e comentar a anterior. E aqui vou digitar index. Suponha que você queira pesquisar algo na sua lista. Nesse caso, você pode usar a função de índice. Então, como parâmetro, primeiro, precisamos fornecer o nome da lista, e o nome da nossa lista é lista de dólares. Em nosso segundo parâmetro, precisamos passar a palavra-chave, que eu quero encontrar. Eu quero encontrar 15 pixels. Se eu definir esse arquivo, como você pode ver, é um número de índice escrito. Encontrei nossa palavra-chave no índice três. Se eu remover a unidade e pesquisar o arquivo, como você pode ver, também está escrito três. Mas se eu tentar encontrar um resultado que não existe nesta lista, deixe-me mostrar 40 e depois definir esse arquivo. Como você pode ver, não está escrito nada. Se existe, então está escrito, caso contrário, não está escrito nada. Agora, vamos falar sobre nossa oitava função, que é seu separador Então, vou duplicar essa linha e comentar a anterior, e aqui vou digitar separador de lista Separador de listas. O separador de lista basicamente retorna o nome do separador. Aqui precisamos passar o nome da lista e, em seguida, ele retornará qual separador usamos nessa lista Vou aprovar a lista de dólares. Se eu definir esse arquivo, como você pode ver, é espaço escrito. Então, aqui você pode ver em nossa lista um, usamos espaço para separar nossos valores. Mas se eu usar coma em nossa lista dois, e aqui passarmos a lista dois, e então definirmos esse arquivo. Agora você pode ver o título porque aqui usamos vírgula para separar nossos valores Temos que dizer dois tipos de separador, caso contrário, espaço. E agora vou falar sobre nossa última função, que está entre colchetes Então, vou duplicar essa linha e comentar a anterior E aqui, vou digitar se entre colchetes está entre colchetes. Basicamente, essa função retorna ao valor. Verdadeiro, ou falso. Basicamente, ele verificará se usamos *** ao quadrado em nossa lista ou Aqui vou passar o nome da nossa lista, Dollar list. Se eu definir esse arquivo, agora você pode ver que o resultado é falso escrito. Mas se eu usar o quadrado *** em nossa lista também, deixe-me mostrar e depois passar, e se eu passar dois nesta função e depois definir esse arquivo, como você pode ver, está escrito como verdadeiro Basicamente, usamos essa função com a condição e aprenderemos sobre ela em nossos próximos tutoriais Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos as funções selecionadas. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 163. Tutorial de funções do Sass Selector, parte 1: Olá, pessoal, é bom ver vocês. Mais uma vez, estamos de volta com um novo tutorial relacionado ao SAS. E neste tutorial, aprenderemos as funções do seletor SAS Mas antes precisamos entender o que está selecionado. Aqui você pode ver dentro da classe um, temos a ncatag, dissemos oi e a nossa tag Anca, que está dentro desta classe Nossa tag Anca é nosso seletor. Mas o SAS fornece algumas funções convidadas que podem manipular Deixe-me mostrar a função. Então, como você pode ver, temos sete funções seletoras em CS, seletor próximo, seletor anexado, seletor de substituição superselecionado, seletores simples, seletores unificados e seletor Avançando e começando nossa prática. Aqui você pode ver que eu já abro meu aplicativo Kuala e, lado a lado, abro arquivo CS estilizado e o arquivo CSS de estilo Primeiro, vamos limpar uma variável em nosso arquivo CS. Dólar e o nome da nossa variável são selecionados. Em seguida, cólon. Em primeiro lugar, vou mostrar qual é o uso da função de ninho seletor Aqui vou digitar o seletor List. Basicamente, dentro dessa função de aninhamento de seletores, passamos um total de dois parâmetros, e ambos os parâmetros devem ser seletores Para nosso primeiro parâmetro, vou pegar códigos duplos para nosso primeiro parâmetro, vou usar L e para nosso segundo parâmetro, vou usar I e depois Semgoron dois nesta linha Basicamente, essa função seletora criará nosso primeiro parâmetro parentag e tornará nosso segundo parâmetro a tag filha do nosso Eu quero dizer que vai criar a tag UL, parentag e a tag LI tag child Ele combinará a tag e criará uma seleção. Para aplicá-lo, precisamos criar uma classe. Para isso, vou usar o método de interpolação. Então, primeiro, vou digitar has tag e, dentro dos aliases, vou usar nossa variável, que é seletor, seletor de dólares Então, qualquer valor que tenhamos em nossa variável selecionada, ele será colado aqui. Dentro dessa função seletiva, vou usar uma propriedade Você pode usar qualquer propriedade. Por enquanto, vou usar a altura. Pixel de tonalidade de altura. Vamos configurar o arquivo e ver o que obtemos em nosso arquivo CSS. Se eu definir esse arquivo, aqui você pode ver no arquivo CSS, que ele cria a tag ultagParnTag e a tag filha Litag Ele combinou o seletor e o seletor combinado Made. Basicamente, esse é o uso da função seletor ninho. Deixe-me mostrar outro exemplo dessa função. Vou remover esse e definir esse código duplo. Eu vou fazer uma aula de Totter Two. Nossa primeira classe é XYZ e nossa segunda classe é dot ABC. E agora vou pegar nosso segundo parâmetro. Quero usar vírgula e dentro do código da torre. Nosso segundo parâmetro é a tag P. Se eu definir esse arquivo, aqui você pode ver no meu arquivo CSS do estilizador, aqui você pode vê-lo criar dois grupos diferentes de classes Primeiro, ele seleciona nossa tag de parágrafo, que está dentro da nossa classe XYZ, e depois, seleciona outra tag de parágrafo, que está dentro da classe ABC Se você quiser usar a classe sudo, sim, você pode. Deixe-me te mostrar. Primeiro, vou remover essa classe e vou usar somente a classe XYZ E então, em nossa segunda seção de parâmetros, vou digitar N pessoa, cólon, nosso fotoeleitor, que é Hober Se eu definir essa linha, aqui você pode vê-la usando o seletor Ober com a classe XYZ Aqui você pode ver se deseja adicionar dois parâmetros, para isso, você precisa usar N pessoa seno Deixe-me limpar esta seção mais uma vez. Suponha que, com XYZ, eu queira adicionar um sublinhado ABC. Deixe-me mostrar a você, então, absolutamente nenhuma pessoa sublinha ABC. Se eu definir esse arquivo, aqui você pode ver, ele cria uma nova classe XYZ underscore Essa foi nossa primeira função, que é selectNNST. Vamos falar sobre outra função que é o seletor apene Aqui vou remover o SelectOnnst e vou digitar o seletor apin Da mesma forma, nessa função, precisamos passar para o parâmetro dois. E essa função appen combinará esses dois parâmetros Deixe-me te mostrar. Em nosso primeiro parâmetro, vou usar a tag de parágrafo. Em nosso segundo parâmetro, vou usar uma classe. Aqui vou digitar dot ABC. função Selector Nest basicamente fornece espaço entre dois parâmetros Mas na função de acréscimo, ela combinará os dois parâmetros Se eu definir esse arquivo, você poderá ver o resultado. Como você pode ver, não há espaço entre a tag P e a classe ABC Quero dizer que isso cria uma única seleção. Isso significa que toda a tag de parágrafo com classe ABC, altura deve ser de 20 pixels Deixe-me mostrar outro exemplo. Suponha que eu use a classe dot XY Z. Em nosso segundo parâmetro, vou usar o sublinhado Copy Se eu definir esse arquivo, como você pode ver, ele cria uma nova classe, XYZ undersco Em nossa função anterior, precisamos usar N pessoa seno para unir esses dois parâmetros Mas nessa função, não precisamos usar o seno da pessoa Agora, deixe-me modificar esse seletor e dar um passo adiante Super cópia, vou usar o Coma, e aqui vou digitar underscoimage Como você pode ver, em nosso segundo parâmetro, usamos dois nomes diferentes, copy undisco copy e underscoimage Você pode usar qualquer nome que desejar. Se eu definir esse arquivo, como você pode ver, ele cria um total de dois seletores diferentes, ele cria um total de dois seletores diferentes cópia de sublinhado XYZ e imagem de sublinhado Basicamente, ele combina nosso primeiro parâmetro com cópia e, novamente, combina nosso primeiro parâmetro com imagem e cria dois seletores diferentes Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos sobre nossos seletores restantes Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 164. Tutorial de funções do Sass Selector, parte 2: Olá, pessoal. É bom ver você de volta. Mais uma vez, estamos no editor de código do meu estúdio de vídeo e, como você pode ver, lado a lado, abro o arquivo style dot cs e o arquivo CSS stylet Neste tutorial, continuaremos com a função seletora Vou começar este tutorial com o seletor RiplesFunction. Deixe-me te mostrar. Para isso, vou digitar o lugar do hífen do seletor. É compreensível pelo próprio nome, ele substituirá alguma coisa Nesta função, basicamente passamos um total de três parâmetros. Suponha que, em nosso primeiro parâmetro, eu passe o ponto C XYZ Esse é o nome da nossa turma. No segundo parâmetro, precisamos passar o qual devemos substituir. Suponha que eu queira substituir a classe dot XYZ. Aqui eu vou amarrar o ponto XYZ. Agora, em nosso terceiro parâmetro, precisamos passar o novo valor, e aqui você precisa passar o valor pelo qual deseja substituir. Quero substituir dot yate por dot ABC. Se eu definir esse arquivo, aqui você pode ver o resultado. Como você pode ver, não há nome de classe c dot XYZ. Ele substitui dot gate por dot ABC. É por isso que passou de c dot ABC. Deixe-me mostrar outro exemplo. Se não houver uma classe H, uma H em nosso primeiro parâmetro, nesse caso, se eu definir esse arquivo, como você pode ver, ele não substituirá o ponto XYZ por ABC É simplesmente imprimir o ponto C XYZ porque essa função de respostas não consegue encontrar H um em nosso primeiro parâmetro É por isso que imprime ADTs. Este é o uso da função de repetição do seletor. Vamos falar sobre nossa próxima função seletora, que é o superseletor E. Aqui vou amarrar seu superseletor de hífen. Basicamente, usamos o seletor para fins de teste, não para fins de modificação, e ele é escrito apenas um com through either falls Para entendê-lo, precisamos passar pelos dois parâmetros Em nosso primeiro parâmetro, precisamos passar um seletor, mas chamamos nosso primeiro seletor de superseletor Suponha que nosso superseletor seja A e chamaremos nosso segundo subseletor de parâmetros E em nosso subseletor, vou passar um ponto e também vou definir uma classe X Y Z. Se eu definir esse arquivo, ele retornará verdadeiro Mas o quotien é o porquê? Porque essa função pesquisará nosso superseletor em nosso subseletor Se o superseletor existir em nosso subseletor, nesse caso, está escrito como Vamos configurar esse arquivo. Como você pode ver, está escrito no ar. Basicamente, usamos essa função com condição IP. Mas se eu substituir a posição deles, na XYZ. Se eu remover XY do nosso subseletor e definir esse arquivo, como você pode ver, ele está escrito cai porque esse superseletor não existe nesse É por isso que está escrito Falls. Esse é o uso do superseletor. Vamos falar sobre nosso próximo seletor, que é um seletor simples Vou remover este e vou digitar um seletor de hífen simples Usando essa função seletora, podemos dividir nossos seletores Se passarmos o seletor combinado aqui, ele dividirá os seletores. Deixe-me te mostrar. Suponha que eu passe aqui no ABC. Se eu definir esse arquivo, aqui você pode vê-lo dividindo nossos seletores Ele cria um seletor A e outro ponto seletor ABC. Esse é o uso de um seletor simples. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei as funções restantes do seletor, a unificação do seletor e a extensão do seletor Obrigado por assistir a este vídeo, Stu, pelo nosso próximo tutorial 165. Tutorial de funções do Sass Selector, parte 3: Olá, pessoal. É bom ver você de volta. Este é nosso terceiro tutorial, relacionado à função seletora Sas Neste tutorial, aprenderemos a função Unify selecionada e a função de extensão do seletor Vamos entrar no editor de código do Visual Studio e ver como podemos usar essa função. No início, vou chamar a função Unifi selecionada, seletor Nesta função, temos que passar um total de dois parâmetros. Suponha que, em nosso primeiro parâmetro, eu use na tag âncora e, em nosso segundo parâmetro, eu use informações de pontos Basicamente, essa função tenta criar uma correspondência entre os dois parâmetros. Se eu definir esse arquivo, como você pode ver, ele cria uma correspondência e cria um novo seletor, em info Deixe-me mostrar mais exemplos relacionados a essa função. Suponha que, em nosso primeiro parâmetro, eu digite ad active. E em nosso segundo parâmetro, vou passar informações. Se eu definir esse arquivo, como você pode ver, ele cria um novo seletor, adt active dot info O que significa que ele selecionará a tag âncora com active plus, caso contrário, com a classe info Em seguida, ele aplicará o CSS. Mas se eu passar para um seletor diferente, deixe-me mostrar a tag âncora em nosso primeiro parâmetro e H uma tag em nosso segundo Se eu definir esse arquivo, como você pode ver, é uma seta escrita porque não criou nenhuma combinação entre dois parâmetros. Esse é o uso da função Unify. Vamos falar sobre nossa última função seletora, que é a extensão do seletor Vou remover o seletor Unify e, em seguida, vou digitar extend Essa função também funciona como uma função unificada selecionada. Basicamente, essa função tenta estender uma classe e tentar criar um novo seletor E nessa função, podemos usar um total de três parâmetros. Suponha que nosso primeiro parâmetro seja a informação do ponto âncora e, em nosso segundo parâmetro, eu vou passar a tag Anger R, e em nosso terceiro parâmetro, vou passar um link de pontos de classe. Então, essa função, tentando combinar o segundo parâmetro com o nosso primeiro parâmetro. Se eles encontrassem uma correspondência, ela imprimia IA e, em seguida, tentava criar uma combinação com a classe de link dot. Se eu definir esse arquivo, como você pode ver, primeiro, ele cria uma combinação em info. O que significa que ele imprime como está porque encontrou uma etiqueta de raiva em nosso primeiro parâmetro. É por isso que ele imprime Asit is e, em seguida, cria uma combinação de pontos de informação ponto L. Esse é outro seletor Essa função sempre cria uma combinação estranha. Deixe-me mostrar outro exemplo. Agora, em nosso segundo parâmetro, vou passar H uma tag, e em nosso terceiro parâmetro, vou passar H duas tags. Se eu definir esse arquivo, como você pode ver, ele imprime nosso primeiro parâmetro como está e não tenta estender nosso seletor Porque não encontrou nenhuma correspondência em nosso segundo parâmetro. É por isso que ele não pode estender nosso seletor. Basicamente, não usamos essa função seletora complexa em nosso projeto e, na maioria das vezes, usamos a função selecto next, o seletor apenFunction e a função seletora repress e Isso é tudo para este tutorial. Em nosso próximo tutorial, iniciaremos as funções do mapa. Obrigado por assistir a este vídeo, fique atento ao nosso próximo tutorial. 166. Tutorial de funções do Sass Map: Olá, pessoal. É bom ver você. Mais uma vez, estou de volta com um novo tutorial relacionado a dicas e, neste tutorial, aprenderemos a função de mapa. Primeiro, vamos tentar entender o que é mapa. Em nosso tutorial anterior, aprenderemos sobre a função de lista. Este é o exemplo da função de lista. Como você pode ver, em uma variável, dizemos que totalizamos três el, dez, 20 e 30 pixels. Como você sabe, podemos armazenar vários valores na função de lista. Da mesma forma, em nossa função de mapa, podemos armazenar vários valores. Mas o processo é diferente. Deixe-me te mostrar. Como você pode ver, este é o exemplo da função de mapa e dizemos que totalizamos dois valores aqui, 405 cem Mas há outro valor dentro dos códigos invertidos. Um é normal e outro é médio. Essas são as chaves. Essas são as chaves do mapa e esses são os valores. O valor médio regular é 400 e o valor médio é 500. Como você sabe, em nossa lista, temos índice. Exemplo, nosso índice de dez valores é um, índice de 20 valores é dois, índice de 30 valores é três. Usando o índice, podemos especificar a posição deste v. Usando a posição deles, você pode obter os valores. Se você quiser extrair o terceiro valor do índice , ele retornará 30 pixels. Mas nos mapas, não usamos índices. Aqui usamos chaves. Aqui podemos definir um nome diferente para nossas chaves. Esse é outro exemplo. Aqui você pode ver que usamos um nome de cor verde e, para verde, usamos o valor disial x. Da mesma forma, para azul, use o valor decimal hexadecimal. Também é uma função em nosso mapa, semelhante à lista. E também tem alguma função inval. Aqui você pode ver que temos seis funções de mapa diferentes, porta de mapa, mesclagem de mapas, chaves de remoção de mapa, valores do mapa e a última é que o mapa tem Vamos cobrir tudo isso um por um. Sem perder seu tempo, vamos começar pela prática. Como você pode ver, eu já abri meu aplicativo Kuala. Agora você pode ver lado a lado, eu abro o arquivo CS de estilo e o arquivo CSS de estilo. Primeiro, vou criar uma variável e o nome da nossa variável é fonte para ela, dólar, fonte wait. Em seguida, cólon. Depois de dois pontos dentro das prensas redondas , primeiro, vou criar nossa chave e nossa primeira tecla é normal Com isso, vou passar nosso primeiro valor e nosso primeiro valor é 400. Em seguida, vou criar nossa segunda chave, que é média. Além disso, nosso valor é 500 e nossa última chave está em negrito. E o valor é 700. Em seguida, envie um e-mail para esta linha. Este é o nosso mapa, e agora vou usá-lo. Para isso, vou criar um sabor de pontos de classe. Então, dentro da lista, vou usar um corpo CSS que é a fonte Peso da fonte. Agora vou chamar nossa primeira função de mapa, que é map gate. Então, dentro dos vestidos redondos, precisamos passar o nome do nosso mapa e o nome da chave. Como você pode ver, o nome do nosso mapa é o peso da fonte. Aqui eu vou passar o peso da fonte. Em nosso segundo parâmetro, precisamos passar a chave e, para chave, eu vou passar bool Dentro do curso duplo, vou passar em negrito. Se eu definir esse arquivo, como você pode ver, nossa fonte é 700. Na função Mp gate, precisamos passar para os dois parâmetros, o nome do mapa FontUO e a chave Essa função sempre escreveu o valor dessa chave, como você sabe, nosso valor chave mundial é 700. Mas o que aconteceria se eu passasse uma chave diferente que não existe nesta função de mapa. Aqui eu vou passar ossos. Se eu definir esse arquivo, como você pode ver, ele não está escrito porque não há nenhum nome de chave. Se a chave existir, então a função map gate escreveu o b. Agora, vamos falar sobre nossa próxima função, que é map Key. Aqui vou digitar a chave do mapa. Na função Mp keys, precisamos passar para um parâmetro, somente o nome do mapa. Se eu definir esse arquivo, como você pode ver , todas as chaves deste mapa serão escritas. Nossa primeira chave é normal, ou a segunda chave é média e nossa terceira chave está em negrito. Esse é o uso da função Mapey. Está escrito o nome de todas as chaves. Vamos falar sobre nossa próxima função, que é map ils. Então, aqui, eu vou passar ls. Também é uma palavra como a função da tecla do mapa. Se eu definir esse arquivo, como você pode ver, ele retornará todos os valores. E aqui precisamos passar apenas um parâmetro, como chaves. Isso é tudo para este tutorial. Em nosso próximo tutorial, abordarei as funções restantes, mesclagem de mapas, remoção de mapas e chave hash do mapa Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 167. Tutorial de funções do Sass Map Part2: É bom ver vocês. Neste tutorial, abordaremos as funções restantes do mapa, mesclagem de mapas, remoção de mapas e haski de mapas Vamos voltar ao editor de código do Visor Studio. Finalmente, estamos no Visu Studio Code Editor e vamos começar com a função de mesclagem de mapas Essa função será mesclada para diferenciar um mapa e retornar um mapa Então, precisamos criar outro mapa. Para isso, vou usar uma variável, e o nome da nossa variável é leve. Peso. Depois do ponto e vírgula, você disse que os vestidos redondos, nosso primeiro quinoma é o mais claro e nosso valor é 100 e nosso segundo quinoma é li e o valor é 300 e ponto e vírgula da Agora vou usar a função de mesclagem de mapas. Aqui vou digitar map merge. E se eu passar outro parâmetro, como você sabe, nessa função, precisamos passar para o parâmetro dois. Aqui, vou passar outro parâmetro, que é outro mapa, ou seja, para pesar. Eu copio o nome da variável e vou colá-lo aqui. Mas não há problema. Se eu definir esse arquivo, ele retornará a seta. Deixe-me te mostrar. Se eu definir esse arquivo, como você pode ver, é uma seta escrita porque função de mesclagem de mapas retorna um novo homem, não um valor É por isso que não podemos imprimi-lo diretamente como um valor. Precisamos criar uma nova variável para armazenar esse novo mapa. Deixe-me te mostrar. criar uma mesclagem de nomes de variáveis E agora vou chamar essa função. Vou cortar essa função desse lugar e colá-la aqui. Basicamente, essa função se fundiu com mapas e escreveu um novo mapa, e agora vou chamar mapKisFunction Aqui vou digitar as teclas do mapa. E aqui precisamos passar nossa nova variável Mug. Aqui eu vou passar Mug. Se eu definir esse arquivo, como você pode ver, ele retornará todas as chaves do nosso novo mapa. Como você pode ver, primeiro ele imprime negrito médio normal da frente para o mapa úmido e, em seguida, imprime o mais claro e claro do mapa claro para o mapa úmido Este é o uso da função map Merch. Vamos falar sobre nossa próxima função, que é a remoção de mapas. Não podemos chamar a função de remoção do mapa diretamente. Da mesma forma, precisamos criar variáveis, então vou duplicar essa linha e vou mudar o nome da variável Eles se movem. E aqui vou chamar a função map remove, map, remove. Nesta função, precisamos passar um total de dois parâmetros. Em nosso primeiro parâmetro, precisamos passar o nome do mapa. No nosso caso, fonte para ela, mas em nosso segundo parâmetro, precisamos passar o nome da chave. Qual chave eu quero remover? Suponha que eu queira remover a chave em negrito. Então, aqui vou amarrar em negrito. E se eu chamar nossa nova variável remove em nosso seletor de teste e, em seguida, definir esse arquivo, como você pode ver, use apenas as teclas normal e média Eu removo a chave em negrito. Portanto, esse é o uso da função de remoção. Basicamente, passamos o nome da chave que queremos remover. Agora, vamos falar sobre nossa última função, que é a chave hash do mapa Então, aqui, vou digitar a chave hash do mapa. Basicamente, o retorno dessa função ao tipo de valor também é verdadeiro. Nesta função, precisamos passar para o parâmetro dois. Então, como primeiro parâmetro, vou passar os pesos das fontes e, como nosso segundo parâmetro, precisamos passar o kiname, vou passar a tecla em negrito Se a tecla em negrito existir em nosso mapa de fontes, ela será escrita como verdadeira Então, vamos configurar o arquivo. Como você pode ver, está escrito de forma verdadeira. Mas se eu passar um nome de chave errado, negrito e depois definir esse arquivo, como você pode ver, ele é escrito como falso Portanto, esse é o uso da função de chave hash do mapa. Então, isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos a função de introspecção. Então, obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 168. Tutorial de funções de introdução do Sass: Olá pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS e, neste tutorial, aprenderemos a função de introspecção do SAS Já aprendemos sobre função numérica, função de string, função cor, função de lista, função seletora, função de mapa Neste tutorial, abordaremos a função de introspecção. Vamos ver quantas funções temos na função de introspecção. Como você pode ver, temos um total seis funções na introspecção Basicamente, a função está usando condições. E é sempre escrito valor booleano por meio de outras falhas Vamos começar a prática e tentar entender como podemos usar essas funções. Aqui você pode ver que estamos no editor de código do Visual Studio e, lado a lado, abro o arquivo style dot cs e o arquivo style dot css. Como você pode ver em nosso arquivo CS de pontos de estilo, já criamos alguma variável num variável, variável char, variável de lista, variável de mapa. Com isso, criamos uma mistura no raio da borda do nome. Crie também uma soma de nome de função. Como você pode ver em nossa variável num, salvamos 15 pixels e em nossa variável char, salvamos um stream, roboto Em nossa variável de lista, criamos uma lista usando vários valores, 15 pixels, 25 pixels, 30 pixels, e em nossa variável de mapa, criamos um mapa. No início, vou criar uma classe na qual vou verificar nossa função de introstecção dot taste. Dentro da resis cali, vou usar uma propriedade CSS, que é Primeiro, vou começar com a função de existência da variável. Aqui vou digitar variable exist, e aqui precisamos passar o nome da variável. Basicamente, usamos essa função com condições p e ela é retida como verdadeira ou falsa Essa função verificará se o nome da variável existe nesse arquivo retornará verdadeiro. Caso contrário, ele retornará falso. Vamos verificar a variável. Aqui vou passar o nome do dólar ou da variável no mapa. Se eu definir esse arquivo, você pode ver, opa, precisamos remover o cifrão e depois definir esse arquivo Agora você pode ver que está escrito de forma verdadeira. Se eu passar um valor que não existe em nosso arquivo, nesse caso, deixe-me mostrar mapas e, em seguida, definir esse arquivo, como você pode ver, está escrito como falso. Deixe-me te mostrar uma coisa. Como você pode ver, verificamos nossa variável de mapa. Mas se eu recortar essa variável de mapa desse lugar e colar dentro desse seletor e, em seguida, definir esse arquivo, como você pode ver, ele também retornará verdadeiro porque se as variáveis existirem em qualquer lugar em nosso arquivo, nesse caso, elas retornarão verdadeiras Essas são nossas variáveis globais, mas agora o mapa é nossa variável local. Vamos pular para outra função que é existência de uma variável global. Deixe-me te mostrar. Aqui vou digitar a variável global exista. Se eu definir esse arquivo, ele retornará falso. Deixe-me te mostrar. Como você pode ver, está escrito como falso, mas você pode ver nossa variável de mapa existe em nosso arquivo. Então, qual é o problema? Porque nossa variável de mapa não é mais uma variável global. Agora é uma variável local. Agora, nossas variáveis globais são variável num, variável char e variável lista. Se eu passar num aqui e depois definir esse arquivo, como você pode ver, agora está escrito como verdadeiro. Agora, vamos pular para outra função que é mix in exist. Aqui vou digitar mix in exist. Nesta função, precisamos passar um nome de mixagem. Aqui, vou copiar o nome da mistura do raio da borda e colá-lo aqui Se eu definir esse arquivo, como você pode ver, está escrito como verdadeiro. Mas se eu remover o raio e depois definir esse arquivo, como você pode ver, está escrito Falls Da mesma forma, temos outra função que é a função existir. Se a função existir em nosso arquivo, nesse caso, retornará true. Função Se eu passar o nome da função e o nome da nossa função for sum e, em seguida, definir esse arquivo, como você pode ver, ele será escrito como verdadeiro. Vamos pular para nossa quinta função, que é digitar. Aqui eu vou digitar tip off. Nessa função, basicamente passamos por um membro variável. Aqui precisamos passar a linha variável. Por engano, eu configurei esse arquivo, é por isso que ele está escrito nesse erro e nossa linha variável é a lista de dólares. Se eu passar essa variável e definir esse arquivo, como você pode ver, ele escreverá nosso tipo de variável, que é lista. Da mesma forma, se eu passar variável char limb e, em seguida, definir esse arquivo, aqui você poderá vê-lo escrito como string Nosso tipo de variável char é string. Essa função sempre escreveu o tipo de variável. Agora, vamos pular para nossa última variável que está em disputa. Aqui eu vou digitar spat. Não encontro nenhum uso adequado dessa função porque ela é impressa como é Vail Se eu definir esse arquivo, aqui você pode vê-lo no Roboto. Nós apenas o usamos para fins de inspeção. Se eu passar por último aqui e depois definir este arquivo, como você pode ver, imprima pelo menos como está. Acho que não é uma função muito importante. Isso é tudo para este tutorial. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 169. Tutorial de diretiva de @conteúdo do Sass: Olá pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado ao SAS Neste tutorial, aprenderemos as diretivas de conteúdo do SAS Já aprendemos sobre a mistura do SAS em nossos tutoriais anteriores Usando a mistura, podemos criar um cone reutilizável. Podemos usá-lo como funções. Como você pode ver, criamos uma mistura chamada raio BDI e, em vez da mistura, como você pode ver, usamos propriedades diferentes para navegadores diferentes Aqui usamos o prefixo. Para o Chrome, usamos a chave da web. Para a Mozilla, usamos o mose e eu uso o raio real da borda da propriedade Como você pode ver, também definimos o valor. Sempre que precisarmos chamar a mixagem em nosso seletor , precisamos passar o valor como parâmetro Como resultado, em nosso arquivo CSS, ele é escrito assim. Raio de borda de cinco pixels. A partir daqui, podemos passar vários valores. Mas a partir daqui, não podemos passar nenhuma propriedade CSS. Suponha que eu queira definir o estilo de borda usando essa mistura, mas não é possível isso e, para resolver esse problema, o SAS introduza viagens diretas de conteúdo. Basicamente, nós o usamos para enviar dados extras sem misturar valores. Quero dizer que com esse valor, podemos enviar dados extras. Deixe-me mostrar o exemplo. Como você pode ver, usamos nossa mesma mixagem, mas aqui usamos diretivas de conteúdo Para isso, precisamos digitar o conteúdo em vermelho. O que quer que passemos para incorporar a VLTs é a maneira de enviar dados para essa Como você pode ver, chamamos nosso raio de borda de mistura e definimos o valor de cinco pixels Depois disso, usamos tiss dentro do caliss, precisamos passar os valores da diretiva Border style, Esses são nossos dados de diretivas de conteúdo. Se eu definir esse arquivo, ele retornará esse código CSS. Depois do raio da borda, ele define o estilo de borda das. Como você pode ver, ele passa nossos dados extras após o raio da borda Vamos começar a prática e ver como podemos usá-la. Como você pode ver, estamos no editor de código Leo do meu usuário e, lado a lado, abro Stylod CS e o arquivo CSS Styload Eu já crio uma mistura chamada raio de borda, raio BD. E também, eu chamo isso de mixagem em nosso seletor. E aqui você pode ver o resultado em nosso arquivo CSS. E agora eu quero enviar dados extras com essa mistura, para isso precisamos usar Cali Races E aqui vou passar o estilo de borda, então tipo, borda, estilo de borda, dst. Como você pode ver, enviamos dados extras por meio dessa mistura. Mas se você quiser imprimir os dados extras na mixagem, para isso, precisará usar diretivas de conteúdo Para isso, precisamos digitar o conteúdo em vermelho. Se eu definir esse arquivo, como você pode ver, agora é impresso no estilo boda dans, enviamos os dados extras por meio das diretivas de conteúdo Agora podemos enviar várias propriedades por meio dessa mistura. Deixe-me mostrar outro exemplo. Desta vez, vou enviar seletor completo por meio dessas diretivas de conteúdo Para isso, vou comentar todas as linhas. Aqui, vou criar uma nova mistura na mesma proporção em que nosso nome de mistura é sabor. Dentro do calicis, vou usar apenas diretivas de conteúdo, adicionar a Para usar essa mistura, vou digitar include, adicionar a taxa, incluir nosso nome de mixagem é sabor. Então, dentro do calicis, primeiro, vou pegar um seletor e nosso nome selecionado é Classe um, então dentro da resistência de Cali, vou usar uma cor apropriada. Cor y, então aqui você pode ver usando essa mistura, vamos passar o seletor completo com propriedades Se eu definir esse valor, como você pode ver, ele cria uma classe dot class one e dentro dessa classe um, você define uma propriedade color. E para executar esse conteúdo extra, usamos diretivas de conteúdo Deixe-me mostrar outro exemplo como podemos usar diretivas de conteúdo Suponha que nosso seletor de classe um esteja dentro do ID um Para enviar esse conteúdo dentro do ID, podemos usá-lo dessa forma. Deixe-me te mostrar. Quero definir um IDH DAG e nosso nome de identificação é homem. Então, dentro da resina de Cali, vou passar esse recipiente Vou cortar esse conteúdo e colá-lo aqui. Se eu definir esse arquivo, como você pode ver, ele colocará o conteúdo da diretiva dentro do ID do menu. É por isso que ele imprime o Menu primeiro. Também podemos usar diretivas de conteúdo dessa forma. Agora o menu se torna seletor de pais e a Classe 1 se torna seletor de filhos Deixe-me mostrar outro exemplo uso de diretivas de conteúdo Vou comentar essas linhas. Primeiro, vou criar um botão seletor de botões Então, primeiro dentro do alyss, vou usar a propriedade border Borda de um pixel. Vou usar borda sólida, filho, e quero uma cor de borda. Ao mesmo tempo, quero criar um seletor Hober para esse botão Aqui eu vou chamar uma mixagem, que eu não crio. No vermelho, inclua. Inclua e nosso nome de mixagem é Hober. São os aliases, vou definir borda com borda com borda com borda com dois pixels Agora vou criar o nome de mixagem Her. Aqui vou digitar a mistura vermelha. Passe o mouse sobre a mistura. Então, dentro das calibragens, vou criar um seletor Posito para nossa classe Para isso, precisamos usar a coluna de login pessoal Hoger Então, dentro das calices, vou passar o conteúdo na taxa de conteúdo Usamos esse sinal de pessoa porque precisamos criar o seletor Her usando o botão Se eu definir esse arquivo, como você pode ver, primeiro, ele cria o seletor de botões e, em seguida, cria o botão Her seletor, e Boden com nossos dados extras Isso é tudo para este tutorial. Em nosso próximo tutorial, aprenderemos mais sobre isso . Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial. 170. Tutorial 2 da Diretiva de @content: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com um novo tutorial relacionado às diretrizes de conteúdo Como você pode ver, já estamos no meu editor de código do Visual Studio, lado a lado, abro o Style lot, arquivo cs e o arquivo CSS Styllod. Na maioria das vezes, usamos diretivas de conteúdo com consulta de mídia Deixe-me mostrar um exemplo com consulta de mídia. Para isso, vou comentar todos os códigos anteriores, e aqui vou pegar uma tag corporal. Então, dentro do alyss, eu quero definir uma cor de fundo Antecedentes. Fundo cinza. E agora vou criar três consultas de mídia diferentes. Na tela de mídia vermelha e dentro dos versos redondos, vou usar MaxWPPTY max W Quero definir no máximo 1.300 pixels Então, dentro dos aliases, vou passar um seletor e o nome do nosso seletor Vou usar o mesmo seletor e a mesma propriedade. É por isso que vou copiar esta seção e colar dentro dos aliases aqui. Vou definir a cor de fundo vermelha Então, quando nossa resolução de tela coincide com essa consulta de mídia, ela define nossa cor de fundo vermelha e agora vou criar duas outras consultas de mídia para resoluções diferentes. Então, eu vou duplicar esta seção, e aqui vou definir 1.000 pixels Eu quero dizer cor de fundo azul. Azul. Então, com uma coroa de 1.000 pixels do Brasil, ela definiu nossa cor de fundo azul Novamente, vou definir outra consulta de mídia. Então, vou duplicar essa parte, e aqui vou dizer 800 Com 800 pixels, quero dizer cor de fundo verde. Aqui vou digitar verde. Esse é um método CSS normal. Se eu definir esse arquivo, aqui você pode ver o resultado. Como você pode ver em nosso arquivo CSS, ele é impresso como está, mas agora vou usar diretivas de conteúdo para quadrização de mídia Para usar diretivas de conteúdo, precisamos criar uma mistura No início, vou criar uma mistura na taxa de mistura. Eu quero usar esse mix para tela de mídia. É por isso que vou configurar a mídia de nomes de mixagem. Então, dentro dos vestidos redondos, vou passar um parâmetro, e nossa variável de parâmetro é weep Dentro do alorss eu vou passar esse código, tela de mídia Copie esse código e eu vou colá-lo aqui. Aqui eu vou passar por cima com a variável. Dólar. Então, dentro das calibragens vou usar diretivas de conteúdo, na taxa contida Em seguida, ponto e vírgula dois nesta linha. Se você quiser usar essa mistura, precisará incluí-la. Mas primeiro, vou comentar as linhas, as consultas da mídia. Eu não preciso disso agora. Agora vou incluir essa mistura com Include QR, a tarifa incluída E nosso nome de mixagem é mídia. Então, dentro dos parênteses, precisamos passar o valor Como você pode ver, nosso primeiro máximo é de 1.300 pixels. Aqui eu vou passar de 1.300 px. Então, dentro das calibragens, aqui vou passar nosso conteúdo adicional para diretivas de conteúdo Nosso primeiro selecionado é o corpo. Dentro do Calibrass, quero dizer o plano de fundo. Antecedentes. Tarifa. Como você pode ver, usamos resolução total de três telas de mídia, 1.300 pixels, 1.000 pixels e 800 pixels Eu quero duplicar esta seção duas vezes. Aqui eu quero passar 1.000 pixels. Com 1.000 pixels, quero dizer que é cor de fundo azul. Azul. Em nossa última equidade de meteoros, quero ultrapassar o valor 800 Máximo com 800 e aqui eu quero definir a cor de fundo verde. Se eu definir esse arquivo, como você pode ver, ele terá o mesmo resultado. Eu imprimo como está. Mas desta vez, não precisamos usar a palavra de consulta de mídia várias vezes. Transmitimos nosso conteúdo por meio de diretivas de e já criamos uma combinação para consulta de mídia Na seção Incluir, você pode alterar o tamanho da tela. Suponha que eu ultrapasse 700 pixels. Se eu definir esse arquivo, como você pode ver, defina nossa consulta de mídia de 700 pixels. Além disso, não só isso, você pode passar várias propriedades. Deixe-me te mostrar. Com o plano de fundo, quero dizer fronteira. Borda de dois pixels. Sólido. E a cor da nossa borda é branca. Vou configurar esse arquivo e aqui você pode ver o resultado. Agora com 700 pixels, ele definiu nossa cor de fundo verde. Também definiu uma borda sólida com a cor branca. Esse é o melhor uso das diretivas de conteúdo. Espero que agora esteja claro para você. Então, obrigado por assistir a este vídeo. Fique ligado no nosso próximo tutorial. 171. Tutorial de diretivas do Sass @media: Olá, pessoal, é bom ver vocês de volta. Mais uma vez, estou de volta com o novo tutorial relacionado ao SAS. Neste tutorial, aprenderemos as diretivas de mídia SAS e as diretivas verdadeiras Vamos tentar entender o que são diretivas de mídia. Aqui você pode ver uma classe chamada contêiner, e dizemos contêiner com 1.100 pixels e centralizamos nosso contêiner usando margem Se criarmos mediaquery usando CSS, nesse caso, precisamos usar mediaquery Você pode ver que definimos um ponto de interrupção em 1.150 pixels e, dentro dessa consulta de mídia, definimos a largura do contêiner de 900 Quando a largura do navegador atinge 1.150 pixels, eles precisam reduzir a largura do nosso contêiner de 1.100 pixels para 900 Como você sabe, para fins responsivos, precisamos criar vários pontos de interrupção para diferentes tamanhos de tela Você precisa criar muitas consultas de mídia. Além disso, precisamos digitar sempre a largura do contêiner. Desnecessariamente, precisamos definir a largura do contêiner várias vezes. Para resolver esse tipo de problema, é necessário introduzir diretivas de mídia Para usar a diretiva de mídia, podemos lidar com essa situação. Então, vamos ver como podemos usá-lo e reduzir nossas linhas desnecessárias. Então, como você pode ver, finalmente, estamos no meu editor de código do Visual Studio e, lado a lado, abro estilo Dot CS e o arquivo CSS de estilo Dot. Eu já abro meu diretório CSS em nosso aplicativo Koala. Então, primeiro, vou criar uma classe, e o nome da nossa classe é container. Então, dentro da resina de Cali, vou definir a semana do contêiner de 1.100 pixels Além disso, vou definir a margem. Margem, quero centralizar o contêiner, então vou usar zero pixel. Além disso, vou usar o Auto Vile e agora quero definir consultas de mídia diferentes para diferentes pontos de interrupção, mas vamos digitar menos código sem parar Dentro dos aliases, vou criar a moeda de mídia com a taxa media Tela de mídia e, dentro do processo redondo, vou definir o ponto de interrupção Vou digitar um hífen máximo com 1.150 pixels. Então esse é nosso primeiro ponto de ruptura. Então, com 1.150 pixels de largura, quero reduzir a largura do contêiner Para isso, não precisamos digitar container novamente, precisamos digitar com propriedade. Largura 900 pixels. Como você pode ver, ela usa metanfetamina aninhada Da mesma forma, vou criar dois outros pontos de interrupção. Então, vou ler essa seção duas vezes. Aqui, vou definir o máximo com 950 pixels. Na largura do navegador de 950 pixels, quero definir a largura do contêiner de 700 pixels Como você pode ver, não precisamos usar o seletor de contêineres o tempo todo Da mesma forma, com 700 pixels de largura, quero definir o contêiner com 500 pixels. Basicamente, você pode ver no meu arquivo CS que trabalhamos com apenas um seletor Mas se eu definir esse arquivo, como você pode ver, ele criará um total de quatro seletores diferentes Como você pode ver, nosso primeiro seletor é nosso contêiner e três outros seletores são nossos No SAS, se usarmos uma mídia dentro da seção de contêiner, nós a chamamos de nomes diretos de mídia. Aqui você pode ver a diferença. Em nosso arquivo CSS, toda vez dentro da tela de mídia, ele cria um seletor de contêiner Em seguida, dentro do seletor contínuo, ele ajusta o Mas em nosso arquivo cs, se usarmos diretivas de mídia, não precisaremos usar o seletor contínuo repetidamente Esse é o uso de diretivas de mídia. Vamos tentar entender nossas próximas diretivas, que estão na diretiva raiz Em nossos tutoriais anteriores, aprenderemos sobre o agrupamento SAS E aqui você pode ver o exemplo do aninhamento. Como você pode ver, há uma turma para pais dentro do copo principal, temos uma turma para crianças e também temos uma sub-classe para crianças e uma etiqueta cortada Como você pode ver em nossa tag principal, definimos com 1.100 pixels, e em nossa tag secundária, definimos a cor vermelha e, em nossa tag subfilha, definimos a cor rosa Se eu compilar esse arquivo, ele retornará esse código CSS Como você pode ver, ele cria um total de três seletores diferentes: seletor de pai seletor de pai e filho, além de criar seletor pai-filho e subfilho Como você pode ver, é criar desnecessariamente uma tag principal em nosso arquivo CSS Mas eu não quero que os pais sejam selecionados todas as vezes. Podemos removê-lo usando o SAS. Para resolver esse problema, o SAS introduziu equipes diretas na raiz. No próximo tutorial, aprenderemos como podemos usá-lo na prática. Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial 172. Tutorial de diretivas do Sass @at root: É bom ver vocês. Neste tutorial, aprenderemos nas diretivas raiz Como você pode ver, lado a lado, abri o arquivo CS de pontos de estilo e o arquivo CSS de pontos de estilo. No começo, vou criar um grupo de nidificação. No início, vou pegar um ponto da turma principal e o nome da nossa turma principal é IM. Então, dentro dos versos de cali, vou usar a propriedade CSS e nome da nossa propriedade CSS é colorido, colorido Então, dentro dessa classe principal, vou criar outra classe. Quero criar uma subclasse e o nome da nossa subclasse é rapper item por item Então, dentro do caliss, vou usar a propriedade CSS e nossa propriedade CSS é cor Cor vermelha. Em seguida, vou usar outro seletor em nossa embalagem de itens, que é imagem Imagem dentro das brasas que vou tirar com a propriedade, nós, nós, 100% Então, fora desta embalagem de itens, vou fazer outra aula Quero criar outra subclasse desse item, e o nome do nosso seletor é dot item child Então, dentro da classe vou usar um plano de fundo de propriedade CSS Fundo rosa. Se eu definir esse arquivo, como você pode ver, ele será criado automaticamente no quarto seletor Nosso primeiro seletor é para nosso item, nosso segundo seletor é para embalagem do item e nosso terceiro seletor é para a imagem, que está dentro Nosso último seletor é o item selecionado por crianças. Agora, se você perceber que pode ver, repita sempre o item em vidro. Agora você decide que não quer classe de item para esta parte, para o item rapper e para nossa imagem Para resolver esse problema, o SRS introduz as diretivas raiz Você precisa digitar aqui nas diretivas raiz. Aqui eu vou digitar no vermelho na tropa. Então eu começo o Calibass, precisamos fechar essa classe após a tag de imagem Aqui eu vou fechar o cis e depois vou configurar esse arquivo Como você pode ver no meu arquivo CSS, ele remove o item do nosso seletor Aqui você pode ver que não há nenhum item de nome de classe. É um item impresso, uma imagem do rapper do item, mas em nosso seletor americano, você pode ver a classe do item novamente Esse é o uso das diretivas at root. Basicamente, são nomes de seletores desnecessários. Espero que você tenha entendido. Deixe-me mostrar outro exemplo de diretivas at root. Para isso, vou comentar esta seção, vou configurar esse arquivo. No início, vou usar uma mídia na mídia publicitária, nosso nome de mídia é impresso. Então, dentro do Caliss, vou pegar um item de classe Lepper Então, dentro do caliss, vou pegar outro seletor, e nosso nome de seleção é item Então, dentro das calices, vou usar a propriedade CSS e nossa propriedade CSS é cor, cor lida Se eu definir esse arquivo, você poderá vê-lo imprimir em nossa mídia. E dentro dessa impressão, você seleciona item por item. Em seguida, dentro do caliss , ele imprime na cor vermelha. Mas se você notar, verá que não há nenhuma propriedade CSS em nossa classe de invólucro de itens Essa propriedade é da classe do item, mas também seleciona esse seletor, o invólucro do item Mas eu não quero esse seletor de embalagem de itens. Se quisermos remover essa classe de invólucro de item , precisamos usar as diretivas raiz. Deixe-me te mostrar. Depois do invólucro do item, precisamos digitar em vermelho nas diretivas raiz Então precisamos começar nosso Calibase também terminar esse Calibase depois disso Se eu definir esse arquivo, como você pode ver, ele remove o item rapper e agora seleciona apenas a classe do item Como você pode ver, selecione diretamente o seletor de itens. Ele ignora o seletor do invólucro do item, o que é completamente desnecessário porque não há nenhuma propriedade CSS dentro da classe do invólucro do item Espero que agora esteja claro para ele. Uma coisa que você precisa lembrar é que as diretivas verdadeiras vêm com predefinidas e nós as chamamos Deixe-me mostrar um exemplo de como isso funciona. Primeiro, vou remover essas linhas, a embalagem do item. Então, dentro da mídia impressa, aqui vou fazer uma aula e o nome da nossa classe é container. E dentro do Cliivess aqui eu vou pegar 2 propriedades Nossa primeira propriedade é com 130 pixels. Além disso, vou pegar outra propriedade que é colorida, cor lida. Criamos esta tese para fins impressos. Se alguém tentar imprimir a página , imprimirá nosso contêiner com 130 pixels e leitura colorida. Mas em nosso site atual, eu não quero essa cor e nós. Para isso, aqui vou usar nossas diretivas at root. Na leitura na raiz. Dentro das cálices aqui eu vou usar as mesmas propriedades Mas aqui, vou mudar os valores. Para nós, vou usar 100 pixels e para cores, vou usar verde. Isso significa que, se alguém tentar imprimir nossa página da web , precisará retornar 130 pixels com a cor vermelha. Mas em nosso site, ele passa por 100 pixels e cor verde. Agora vou usar o valor predefinido das diretivas at root Dentro dos vestidos redondos, vou passar sem, sem e aqui precisamos passar um valor chamado media. Quer dizer, também faz parte da classe de contêineres, mas sem mídia. Depois de definir esse arquivo, você pode ver o resultado. Como você pode ver, nossa mídia impressa funciona ponto a outro e depois imprime sem mídia. Este é o CSS do nosso site e este é o nosso CSS impresso. Espero que agora esteja claro para você no próximo tutorial aprenderemos as diretivas de controle Obrigado por assistir a este vídeo, fique ligado no nosso próximo tutorial